@rol1n/pi-kit 0.0.0-stage → 0.1.0

package/extensions/oai-subquota/types.ts

@@ -0,0 +1,40 @@
+export interface LimitWindow {
+  usedPercent: number;
+  leftPercent: number;
+  windowSeconds?: number;
+  resetAt?: number;
+  resetAfterSeconds?: number;
+}
+
+export interface RateLimit {
+  id: string;
+  name: string;
+  primary?: LimitWindow;
+  secondary?: LimitWindow;
+}
+
+export interface CreditsSnapshot {
+  hasCredits?: boolean;
+  unlimited?: boolean;
+  balance?: number | string;
+}
+
+export interface ResetsSnapshot {
+  availableCount?: number;
+  applicableCount?: number;
+}
+
+export interface AccountSnapshot {
+  email?: string;
+  plan?: string;
+  accountId?: string;
+}
+
+export interface CodexUsageSnapshot {
+  source: "api" | "headers" | "cache";
+  fetchedAt: string;
+  account: AccountSnapshot;
+  defaultLimit?: RateLimit;
+  credits?: CreditsSnapshot;
+  resets?: ResetsSnapshot;
+}

package/extensions/oai-subquota/ui.ts

@@ -0,0 +1,183 @@
+import type { ExtensionCommandContext, ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
+import { Text, visibleWidth } from "@earendil-works/pi-tui";
+import type { CodexUsageSnapshot, LimitWindow } from "./types.ts";
+
+const USAGE_SETTINGS_URL = "https://chatgpt.com/codex/settings/usage";
+const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+function pct(value: number | undefined): string {
+  if (value === undefined || !Number.isFinite(value)) return "?%";
+  return Number.isInteger(value) ? `${value}%` : `${value.toFixed(1)}%`;
+}
+
+function padLabel(label: string, width = 28): string {
+  return `${label}:`.padEnd(width, " ");
+}
+
+function formatTime(d: Date): string {
+  return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+}
+
+function sameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+
+function formatReset(resetAt: number | undefined, now = new Date()): string {
+  if (!resetAt) return "";
+  const reset = new Date(resetAt * 1000);
+  if (!Number.isFinite(reset.getTime())) return "";
+  const time = formatTime(reset);
+  if (sameDay(reset, now)) return `resets ${time}`;
+  const date = `${reset.getDate()} ${MONTH_NAMES[reset.getMonth()]}`;
+  return reset.getFullYear() === now.getFullYear() ? `resets ${time} on ${date}` : `resets ${time} on ${date} ${reset.getFullYear()}`;
+}
+
+export function formatDuration(seconds: number | undefined): string {
+  if (seconds === undefined || !Number.isFinite(seconds) || seconds <= 0) return "";
+  const rounded = Math.round(seconds);
+  const days = Math.floor(rounded / 86_400);
+  const hours = Math.floor((rounded % 86_400) / 3600);
+  const mins = Math.floor((rounded % 3600) / 60);
+  if (days > 0) return `${days}d${hours ? `${hours}h` : ""}`;
+  if (hours > 0) return `${hours}h${mins ? `${mins}m` : ""}`;
+  return `${mins || 1}m`;
+}
+
+function resetSeconds(window: LimitWindow | undefined, now: Date): number | undefined {
+  if (!window) return undefined;
+  if (window.resetAfterSeconds !== undefined) return window.resetAfterSeconds;
+  return window.resetAt !== undefined ? Math.max(0, Math.round(window.resetAt - now.getTime() / 1000)) : undefined;
+}
+
+export function bar(leftPercent: number | undefined, width = 20): string {
+  const left = Math.max(0, Math.min(100, leftPercent ?? 0));
+  const filled = Math.max(0, Math.min(width, Math.round((left / 100) * width)));
+  return `[${"█".repeat(filled)}${"░".repeat(width - filled)}]`;
+}
+
+function formatWindowLine(label: string, window: LimitWindow | undefined, now: Date): string | undefined {
+  if (!window) return undefined;
+  const reset = formatReset(window.resetAt, now) || (formatDuration(window.resetAfterSeconds) ? `resets in ${formatDuration(window.resetAfterSeconds)}` : "");
+  const suffix = reset ? ` (${reset})` : "";
+  return `${padLabel(label)}${bar(window.leftPercent)} ${pct(window.leftPercent)} left${suffix}`;
+}
+
+function formatCreditsLine(snapshot: CodexUsageSnapshot): string | undefined {
+  const c = snapshot.credits;
+  if (!c) return undefined;
+  if (c.unlimited) return `${padLabel("Credits")}unlimited`;
+  if (c.balance !== undefined) {
+    const val = Number(c.balance);
+    if (!Number.isFinite(val) || val <= 0) return undefined;
+    return `${padLabel("Credits")}${Math.floor(val).toLocaleString()} credits`;
+  }
+  return c.hasCredits ? `${padLabel("Credits")}available` : undefined;
+}
+
+function formatResetsLine(snapshot: CodexUsageSnapshot): string | undefined {
+  const count = snapshot.resets?.availableCount;
+  return typeof count === "number" && count > 0 ? `${padLabel("Resets")}${count} available` : undefined;
+}
+
+export function formatStatusline(snapshot: CodexUsageSnapshot, now = new Date()): string {
+  const parts: string[] = [];
+  const primary = snapshot.defaultLimit?.primary;
+  const secondary = snapshot.defaultLimit?.secondary;
+
+  if (primary) {
+    parts.push(`5h:${pct(primary.leftPercent)}`);
+  }
+
+  if (secondary) {
+    parts.push(`7d:${pct(secondary.leftPercent)}`);
+    const r7d = formatDuration(resetSeconds(secondary, now));
+    if (r7d) parts.push(`↺ ${r7d}`);
+  }
+
+  return parts.length > 0 ? parts.join(" ") : "unavailable";
+}
+
+function makeBox(lines: string[], reqWidth?: number): string {
+  const contentWidth = Math.max(...lines.map((l) => visibleWidth(l)), 1);
+  const width = Math.max(contentWidth, reqWidth ?? 0);
+  const top = `╭${"─".repeat(width + 2)}╮`;
+  const bottom = `╰${"─".repeat(width + 2)}╯`;
+  const body = lines.map((l) => `│ ${l}${" ".repeat(Math.max(0, width - visibleWidth(l)))} │`);
+  return [top, ...body, bottom].join("\n");
+}
+
+export function formatBoxedStatus(snapshot: CodexUsageSnapshot, now = new Date()): string {
+  const lines: string[] = [
+    ">_ Codex usage",
+    "",
+    `Visit ${USAGE_SETTINGS_URL} for up-to-date`,
+    "information on rate limits and credits",
+    "",
+  ];
+
+  const acct: string[] = [];
+  if (snapshot.account.email) acct.push(snapshot.account.email);
+  if (snapshot.account.plan) acct.push(`(${snapshot.account.plan[0]?.toUpperCase()}${snapshot.account.plan.slice(1)})`);
+  if (acct.length > 0) lines.push(`${padLabel("Account")}${acct.join(" ")}`);
+  if (snapshot.fetchedAt) lines.push(`${padLabel("Updated")}${new Date(snapshot.fetchedAt).toLocaleString()}`);
+  lines.push("");
+
+  const p = formatWindowLine("5h limit", snapshot.defaultLimit?.primary, now);
+  const s = formatWindowLine("Weekly limit", snapshot.defaultLimit?.secondary, now);
+  if (p) lines.push(p);
+  if (s) lines.push(s);
+
+  const credits = formatCreditsLine(snapshot);
+  if (credits) lines.push(credits);
+
+  const resets = formatResetsLine(snapshot);
+  if (resets) lines.push(resets);
+
+  return makeBox(lines);
+}
+
+function colorForLeft(left: number): "success" | "warning" | "error" {
+  return left >= 60 ? "success" : left >= 25 ? "warning" : "error";
+}
+
+function colorizeStatusLine(line: string, theme: Theme): string {
+  let out = line;
+  const match = line.match(/(\[[█░]+\])\s+(\d+(?:\.\d+)?)% left/);
+  if (match?.[1] && match[2]) {
+    const barText = match[1];
+    const pctText = match[2];
+    const color = colorForLeft(Number(pctText) || 0);
+    out = out.replace(barText, theme.fg(color, barText));
+    out = out.replace(`${pctText}% left`, theme.fg(color, `${pctText}% left`));
+  }
+  out = out.replace(">_ Codex usage", theme.fg("accent", theme.bold(">_ Codex usage")));
+  out = out.replace(/(Account|Updated|5h limit|Weekly limit|Credits|Resets):/g, (lbl) => theme.fg("muted", lbl));
+  out = out.replace(/(Visit https:\/\/chatgpt\.com\/codex\/settings\/usage for up-to-date|information on rate limits and credits)/g, (txt) => theme.fg("dim", txt));
+
+  if (out.startsWith("╭") || out.startsWith("╰")) return theme.fg("dim", out);
+  if (out.startsWith("│") && out.endsWith("│")) {
+    return `${theme.fg("dim", out[0] ?? "")}${out.slice(1, -1)}${theme.fg("dim", out.at(-1) ?? "")}`;
+  }
+  return out;
+}
+
+export function renderStatusMessage(message: { content: string }, _opt: unknown, theme: Theme): Text {
+  return new Text(message.content.split("\n").map((l) => colorizeStatusLine(l, theme)).join("\n"), 0, 0);
+}
+
+export function dimText(ctx: ExtensionContext | ExtensionCommandContext, text: string): string {
+  try {
+    return ctx.ui?.theme?.fg ? ctx.ui.theme.fg("dim", text) : text;
+  } catch {
+    return text;
+  }
+}
+
+/**
+ * Format quota text for Pi's shared extension-status row.
+ * It must stay compact because Pi combines all extension statuses before
+ * applying the footer width limit.
+ */
+export function formatRightAlignedStatusline(snapshot: CodexUsageSnapshot, now = new Date()): string {
+  return formatStatusline(snapshot, now);
+}

package/extensions/prompt-snipaste/README.md

@@ -0,0 +1,33 @@
+# prompt-snipaste
+
+Choose prompt snippets to prepend or append to the next user message, with a terminal preview and a session transcript card.
+
+## Install
+
+```sh
+pi install npm:@rol1n/prompt-snipaste
+```
+
+Also included in `@rol1n/pi-kit`.
+
+## Use
+
+Open `/snipaste` or press Alt+S. Use the arrow keys to navigate, Space to toggle snippets, Tab to preview, Enter to confirm, and Escape to cancel. Selected snippets apply once to the next user input; they are then cleared.
+
+## Prompt configuration
+
+The picker uses Pi's resolved prompt commands, including prompts installed through packages. Package resource filters and disabled prompts are respected; a top-level `prompts: []` does not hide enabled package prompts. Personal and project prompt directories or explicit prompt paths can still be configured through Pi normally.
+
+Markdown frontmatter controls each snippet:
+
+```markdown
+---
+name: Review checklist
+description: Add the review criteria to the next message
+placement: append
+order: 100
+---
+Check correctness, error handling, and missing validation.
+```
+
+`placement` accepts `prepend` or `append`; append is the default. Lower `order` values come first within a placement. Without frontmatter, the file name becomes the snippet name and the body is used directly. The extension's fallback loader, when used without a Pi runtime, reads conventional prompt directories and explicit prompt paths.

package/extensions/prompt-snipaste/index.ts

@@ -0,0 +1,143 @@
+/** Select prompt snippets for the next user message with /snipaste or Alt+S. */
+import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { Key } from "@earendil-works/pi-tui";
+import type { PromptCardData, Snippet } from "./types.ts";
+import { loadSnippets } from "./snippets.ts";
+import { showSnippetMenu } from "./menu.ts";
+import { buildPromptCardComponent, updateSnippetWidget } from "./renderers.ts";
+
+export default function promptSnipaste(pi: ExtensionAPI) {
+	let enabled = new Set<string>();
+	let snippets: Snippet[] = [];
+
+	function updateWidget(ctx: ExtensionContext) {
+		updateSnippetWidget(ctx, () => ({ snippets, enabled }));
+	}
+
+	async function openMenu(ctx: ExtensionContext) {
+		if (ctx.mode !== "tui") {
+			ctx.ui.notify("Prompt snippets menu is only available in interactive terminals", "warning");
+			return;
+		}
+
+		snippets = loadSnippets(ctx.cwd, pi);
+		enabled = new Set([...enabled].filter((id) => snippets.some((s) => s.id === id)));
+
+		if (snippets.length === 0) {
+			ctx.ui.notify("No Markdown files found in prompt directories", "warning");
+			updateWidget(ctx);
+			return;
+		}
+
+		const working = new Set(enabled);
+
+		const confirmed = await showSnippetMenu(ctx, snippets, working);
+
+		if (confirmed) {
+			enabled = working;
+		}
+		updateWidget(ctx);
+	}
+
+	let pendingTurnSnippets: Snippet[] | null = null;
+
+	pi.registerEntryRenderer<PromptCardData>("prompt-snipaste-card", (entry, _options, theme) => {
+		const data = entry.data;
+		if (!data?.snippets || data.snippets.length === 0) return undefined;
+		return buildPromptCardComponent(data.snippets, theme);
+	});
+
+	pi.on("session_start", (_event, ctx) => {
+		enabled = new Set();
+		pendingTurnSnippets = null;
+		snippets = loadSnippets(ctx.cwd, pi);
+		updateWidget(ctx);
+	});
+
+	pi.on("input", async (_event, ctx) => {
+		if (enabled.size === 0) return undefined;
+
+		snippets = loadSnippets(ctx.cwd, pi);
+		const active = snippets.filter((s) => enabled.has(s.id));
+		enabled = new Set();
+		updateWidget(ctx);
+
+		if (active.length === 0) return undefined;
+
+		pendingTurnSnippets = active;
+
+		pi.appendEntry<PromptCardData>("prompt-snipaste-card", {
+			snippets: active.map((s) => ({
+				id: s.id,
+				name: s.name,
+				placement: s.placement,
+				order: s.order,
+				body: s.body,
+			})),
+		});
+
+		return undefined;
+	});
+
+	pi.on("context", async (event, _ctx) => {
+		if (!pendingTurnSnippets || pendingTurnSnippets.length === 0) return undefined;
+
+		const active = pendingTurnSnippets;
+		pendingTurnSnippets = null;
+
+		const prepends = active.filter((s) => s.placement === "prepend");
+		const appends = active.filter((s) => s.placement === "append");
+
+		const messages = [...event.messages];
+		for (let i = messages.length - 1; i >= 0; i--) {
+			const msg = messages[i];
+			if (msg.role === "user") {
+				if (typeof msg.content === "string") {
+					const parts: string[] = [];
+
+					if (prepends.length > 0) {
+						parts.push(prepends.map((s) => s.body.trim()).join("\n\n"));
+					}
+					if (msg.content.trim()) {
+						parts.push(msg.content.trim());
+					}
+					if (appends.length > 0) {
+						parts.push(appends.map((s) => s.body.trim()).join("\n\n"));
+					}
+
+					messages[i] = {
+						...msg,
+						content: parts.join("\n\n"),
+					};
+				} else if (Array.isArray(msg.content)) {
+					const prependText = prepends.map((s) => s.body.trim()).join("\n\n");
+					const appendText = appends.map((s) => s.body.trim()).join("\n\n");
+					const newContent = [...msg.content];
+					if (prependText) {
+						newContent.unshift({ type: "text", text: prependText });
+					}
+					if (appendText) {
+						newContent.push({ type: "text", text: appendText });
+					}
+					messages[i] = {
+						...msg,
+						content: newContent as any,
+					};
+				}
+				return { messages };
+			}
+		}
+
+		return undefined;
+	});
+
+	pi.registerCommand("snipaste", {
+		description: "Select prepended or appended prompt snippets to inject into the next message",
+		handler: (_args, ctx) => openMenu(ctx),
+	});
+
+	pi.registerShortcut(Key.alt("s"), {
+		description: "Open prompt snippets menu",
+		handler: (ctx) => openMenu(ctx),
+	});
+}

package/extensions/prompt-snipaste/menu.ts

@@ -0,0 +1,159 @@
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { Key, matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import type { Snippet } from "./types.ts";
+
+/** Edit a working selection; the caller commits it only after confirmation. */
+export function showSnippetMenu(ctx: ExtensionContext, snippets: Snippet[], working: Set<string>): Promise<boolean> {
+	return ctx.ui.custom<boolean>((tui, theme, _keybindings, done) => {
+		const prepends = snippets.filter((s) => s.placement === "prepend");
+		const appends = snippets.filter((s) => s.placement === "append");
+		const items = [...prepends, ...appends];
+
+		let mode: "list" | "preview" = "list";
+		let cursor = 0;
+		let listScroll = 0;
+		let previewScroll = 0;
+
+		const itemRow = (snippet: Snippet, idx: number, width: number): string => {
+			const pointer = idx === cursor ? theme.fg("accent", "> ") : "  ";
+			const checkbox = working.has(snippet.id) ? theme.fg("success", "[x]") : theme.fg("dim", "[ ]");
+			const desc = snippet.description ? theme.fg("dim", ` — ${snippet.description}`) : "";
+			return truncateToWidth(`${pointer}${checkbox} ${theme.bold(snippet.name)}${desc}`, width);
+		};
+
+		const buildListRows = (width: number): { text: string; itemIndex: number | null }[] => {
+			const rows: { text: string; itemIndex: number | null }[] = [];
+			rows.push({ text: theme.fg("dim", "↑ Prepend Prompts"), itemIndex: null });
+			prepends.forEach((s, i) => rows.push({ text: itemRow(s, i, width), itemIndex: i }));
+			rows.push({ text: "", itemIndex: null });
+			rows.push({ text: theme.fg("dim", "↓ Append Prompts"), itemIndex: null });
+			appends.forEach((s, i) => rows.push({ text: itemRow(s, prepends.length + i, width), itemIndex: prepends.length + i }));
+			return rows;
+		};
+
+		const buildPreviewRows = (snippet: Snippet, width: number): string[] => {
+			const rows: string[] = [];
+			rows.push(truncateToWidth(theme.bold(snippet.name), width));
+			rows.push(truncateToWidth(theme.fg("dim", `${snippet.placement === "prepend" ? "Prepend" : "Append"} · Order ${snippet.order} · ${snippet.id}`), width));
+			rows.push(theme.fg("dim", "─".repeat(Math.min(width, 40))));
+			for (const line of snippet.body.split("\n")) {
+				for (const wrapped of wrapTextWithAnsi(line, width)) {
+					rows.push(truncateToWidth(wrapped, width));
+				}
+			}
+			return rows;
+		};
+
+		const viewport = (
+			lines: string[],
+			scroll: number,
+			maxView: number,
+			focusRow?: number,
+		): { out: string[]; scroll: number } => {
+			const clipped = lines.length > maxView;
+			const view = clipped ? Math.max(1, maxView - 2) : maxView;
+
+			let s = Math.min(Math.max(0, scroll), Math.max(0, lines.length - view));
+			if (focusRow !== undefined) {
+				if (focusRow < s) s = focusRow;
+				else if (focusRow >= s + view) s = focusRow - view + 1;
+			}
+
+			const visible = lines.slice(s, s + view);
+			if (!clipped) return { out: visible, scroll: s };
+
+			const above = s;
+			const below = lines.length - (s + view);
+			return {
+				out: [
+					above > 0 ? theme.fg("dim", `  ↑ ${above} more`) : "",
+					...visible,
+					below > 0 ? theme.fg("dim", `  ↓ ${below} more`) : "",
+				],
+				scroll: s,
+			};
+		};
+
+		return {
+			render(width: number): string[] {
+				const maxView = Math.max(5, tui.terminal.rows - 10);
+
+				let content: string[];
+				let title: string;
+				let hints: string;
+				if (mode === "list") {
+					const rows = buildListRows(width);
+					const cursorRow = rows.findIndex((r) => r.itemIndex === cursor);
+					const v = viewport(rows.map((r) => r.text), listScroll, maxView, cursorRow);
+					content = v.out;
+					listScroll = v.scroll;
+					title = "Prompt Snippets";
+					hints = "↑↓ Navigate • Space Select • Tab Preview • Enter Confirm • Esc Cancel";
+				} else {
+					const snippet = items[cursor];
+					const rows = buildPreviewRows(snippet, width);
+					const v = viewport(rows, previewScroll, maxView);
+					content = v.out;
+					previewScroll = v.scroll;
+					title = `Preview: ${snippet.name}`;
+					hints = "↑↓ Scroll • Tab/Esc Back to list";
+				}
+
+				const innerW = width - 4;
+				const titleVisW = visibleWidth(title);
+				const hintsVisW = visibleWidth(hints);
+				const titlePad = Math.max(0, innerW - titleVisW);
+				const hintsPad = Math.max(0, innerW - hintsVisW);
+
+				const rawLines = [
+					theme.fg("border", `╭─ ${theme.bold(title)} ${"─".repeat(titlePad)}╮`),
+					...content.map((l) => {
+						const pad = Math.max(0, innerW - visibleWidth(l));
+						return theme.fg("border", "│ ") + l + " ".repeat(pad) + theme.fg("border", " │");
+					}),
+					theme.fg("border", `├${"─".repeat(innerW + 2)}┤`),
+					theme.fg("border", "│ ") + theme.fg("dim", hints) + " ".repeat(hintsPad) + theme.fg("border", " │"),
+					theme.fg("border", `╰${"─".repeat(innerW + 2)}╯`),
+				];
+
+				return rawLines.map((line) => truncateToWidth(line, width));
+			},
+			invalidate() {},
+			handleInput(data: string) {
+				if (mode === "list") {
+					if (matchesKey(data, Key.up)) {
+						cursor = (cursor - 1 + items.length) % items.length;
+						tui.requestRender();
+					} else if (matchesKey(data, Key.down)) {
+						cursor = (cursor + 1) % items.length;
+						tui.requestRender();
+					} else if (matchesKey(data, Key.space)) {
+						const id = items[cursor].id;
+						if (working.has(id)) working.delete(id);
+						else working.add(id);
+						tui.requestRender();
+					} else if (matchesKey(data, Key.tab)) {
+						mode = "preview";
+						previewScroll = 0;
+						tui.requestRender();
+					} else if (matchesKey(data, Key.enter)) {
+						done(true);
+					} else if (matchesKey(data, Key.escape)) {
+						done(false);
+					}
+				} else {
+					if (matchesKey(data, Key.up)) {
+						previewScroll--;
+						tui.requestRender();
+					} else if (matchesKey(data, Key.down)) {
+						previewScroll++;
+						tui.requestRender();
+					} else if (matchesKey(data, Key.tab) || matchesKey(data, Key.escape)) {
+						mode = "list";
+						tui.requestRender();
+					}
+				}
+			},
+		};
+	});
+}

package/extensions/prompt-snipaste/renderers.ts

@@ -0,0 +1,88 @@
+import type { ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import type { PromptCardData, Snippet } from "./types.ts";
+
+const WIDGET_ID = "prompt-snipaste";
+
+export function buildPromptCardComponent(
+	snippets: PromptCardData["snippets"],
+	theme: Theme,
+) {
+	const borderCol = (s: string) => theme.fg("borderAccent", s);
+	const dim = (s: string) => theme.fg("dim", s);
+	const bold = (s: string) => theme.bold(s);
+
+	const titleText = ` Prompt Snippets (${snippets.length}) `;
+
+	return {
+		render(width: number): string[] {
+			const effectiveWidth = Math.max(20, Math.min(width, 100));
+			const innerW = effectiveWidth - 4;
+
+			const titleVisW = visibleWidth(titleText);
+			const topDashLen = Math.max(1, innerW - titleVisW);
+			const topLine = borderCol("╭─") + bold(titleText) + borderCol("─".repeat(topDashLen) + "╮");
+			const botLine = borderCol("╰" + "─".repeat(innerW + 2) + "╯");
+
+			const lines: string[] = [];
+			lines.push(topLine);
+
+			snippets.forEach((item, idx) => {
+				if (idx > 0) {
+					lines.push(borderCol("├" + "─".repeat(innerW + 2) + "┤"));
+				}
+				const header = `● ${item.name}`;
+				const headerVisW = visibleWidth(header);
+				const headerPad = Math.max(0, innerW - headerVisW);
+				lines.push(borderCol("│ ") + bold(header) + " ".repeat(headerPad) + borderCol(" │"));
+
+				const bodyLines = item.body.split(/\r?\n/);
+				for (const line of bodyLines) {
+					if (!line.trim()) continue;
+					for (const wrapped of wrapTextWithAnsi(line, innerW)) {
+						const pad = Math.max(0, innerW - visibleWidth(wrapped));
+						lines.push(borderCol("│ ") + dim(wrapped) + " ".repeat(pad) + borderCol(" │"));
+					}
+				}
+			});
+
+			lines.push(botLine);
+			return lines.map((l) => truncateToWidth(l, width));
+		},
+		invalidate() {},
+	};
+}
+
+export function updateSnippetWidget(
+	ctx: ExtensionContext,
+	getSelection: () => { snippets: Snippet[]; enabled: Set<string> },
+) {
+	if (getSelection().enabled.size === 0) {
+		ctx.ui.setWidget(WIDGET_ID, undefined);
+		return;
+	}
+
+	ctx.ui.setWidget(WIDGET_ID, (_tui, theme) => ({
+		render(width: number): string[] {
+			const { snippets, enabled } = getSelection();
+			const active = snippets.filter((s) => enabled.has(s.id));
+			if (active.length === 0) return [];
+
+			const prepends = active.filter((s) => s.placement === "prepend");
+			const appends = active.filter((s) => s.placement === "append");
+
+			const parts: string[] = [];
+			if (prepends.length > 0) {
+				parts.push(theme.fg("accent", `↑ ${prepends.map((s) => s.name).join(", ")}`));
+			}
+			if (appends.length > 0) {
+				parts.push(theme.fg("warning", `↓ ${appends.map((s) => s.name).join(", ")}`));
+			}
+
+			const text = `[Prompts: ${parts.join(" · ")}]`;
+			return [truncateToWidth(text, width)];
+		},
+		invalidate() {},
+	}));
+}
+