pi-lazy-panel 0.1.0

package/src/ui/widgets/changelog-dialog.ts

@@ -0,0 +1,196 @@
+/**
+ * Changelog dialog (`@`, global): pi's `/changelog` in a big scrollable box.
+ *
+ *   ┌─ What's New ─────────────────────────────── 1-38/2140 ─┐
+ *   │ 0.85.1 - 2026-09-05                                    │
+ *   │ ...                                                    │
+ *   └────────────────────────────────────────────────────────┘
+ *    CHANGELOG │ j/k scroll  ctrl+d/u page  g/G top/bottom  Esc close
+ *
+ * The markdown is rendered with pi-tui's `Markdown` (CLAUDE.md rule 8) once per
+ * width and cached; the box takes the whole terminal but a 2-column / 1-row
+ * margin, like the tree dialog. `j` `k` `↑` `↓` scroll a line, `ctrl+d` /
+ * `ctrl+u` / PageDown / PageUp half a page, `g` / `G` jump to the top / bottom,
+ * Esc / `q` close (the panel also closes it on its own `@` key). Every other key
+ * is swallowed. Loading the file is the panel's job (data/changelog.ts).
+ *
+ * changelog 弹窗：只管画和滚动；Markdown 按宽度缓存，内容由面板通过 DataSource 加载。
+ */
+
+import { getMarkdownTheme, type Theme } from "@earendil-works/pi-coding-agent";
+import { Markdown, visibleWidth } from "@earendil-works/pi-tui";
+import { SPINNER_FRAMES } from "../../constants.ts";
+import { matchesKeyId } from "../../config/keys.ts";
+import { t } from "../../i18n/index.ts";
+import type { KeyHint } from "../../types.ts";
+import { frame, overlayCentered } from "../frame.ts";
+
+/** Title on the top border (pi's own heading for /changelog, localised). */
+export function changelogTitle(): string {
+	return t("dialog.changelogTitle");
+}
+
+/** Loading line while the (large) changelog markdown is being rendered (localised). */
+export function changelogLoading(): string {
+	return t("dialog.changelogLoading");
+}
+
+/** Footer hints while the dialog is open. */
+export function changelogHints(): KeyHint[] {
+	return [
+		["j/k", t("hint.scroll")],
+		["ctrl+d/u", t("hint.page")],
+		["g/G", t("hint.topBottom")],
+		["Esc", t("hint.close")],
+	];
+}
+
+export interface ChangelogDialogOptions {
+	theme: Theme;
+	onClose: () => void;
+}
+
+export class ChangelogDialog {
+	private markdown: string | undefined;
+	/** True between `openLoading()` and `setContent()` while the markdown is loaded / rendered. */
+	private loading = false;
+	/** Rotating-square frame index for the loading line, advanced by the panel. */
+	private spinnerFrame = 0;
+	private scroll = 0;
+	/** Rendered lines cached by (width, markdown) so reopening the same changelog is instant. */
+	private cache: { width: number; markdown: string; lines: string[] } | undefined;
+	/** Body rows visible at the last render, for paging and clamping. */
+	private visible = 10;
+
+	constructor(private readonly o: ChangelogDialogOptions) {}
+
+	get isOpen(): boolean {
+		return this.loading || this.markdown !== undefined;
+	}
+
+	/** True while waiting for the changelog to load / render (the box shows the loading line). */
+	get isLoading(): boolean {
+		return this.loading;
+	}
+
+	get hints(): KeyHint[] {
+		// 加载中不给滚动提示（还没内容可滚）；关闭时也没有。
+		return this.markdown !== undefined ? changelogHints() : [];
+	}
+
+	/** Current top line (for tests). */
+	get scrollTop(): number {
+		return this.scroll;
+	}
+
+	/** Show the loading box while the markdown is fetched / rendered. */
+	openLoading(): void {
+		this.loading = true;
+		this.markdown = undefined;
+		this.spinnerFrame = 0;
+		this.scroll = 0;
+	}
+
+	/** Advance the loading spinner one frame (driven by the panel's timer). */
+	advanceSpinner(): void {
+		this.spinnerFrame++;
+	}
+
+	/** Show the changelog content; the rendered lines are cached across opens so reopening is instant. */
+	setContent(markdown: string): void {
+		this.markdown = markdown;
+		this.loading = false;
+		this.scroll = 0;
+		// 不主动清 cache：lines() 按 (width, markdown) 判断能否复用，同一份 changelog 再开就秒开。
+	}
+
+	close(): void {
+		this.markdown = undefined;
+		this.loading = false;
+		// 保留 cache：同一宽度、同一份 changelog 下次打开直接复用渲染结果。
+	}
+
+	handleInput(data: string): void {
+		if (!this.isOpen) return;
+		// 加载中只允许取消（Esc / q），滚动等按键先吞掉。
+		if (matchesKeyId(data, "escape") || matchesKeyId(data, "q")) {
+			this.o.onClose();
+			return;
+		}
+		if (this.loading) return;
+		const half = Math.max(1, Math.floor(this.visible / 2));
+		if (matchesKeyId(data, "j") || matchesKeyId(data, "down")) this.scrollBy(1);
+		else if (matchesKeyId(data, "k") || matchesKeyId(data, "up")) this.scrollBy(-1);
+		else if (matchesKeyId(data, "ctrl+d") || matchesKeyId(data, "pagedown")) this.scrollBy(half);
+		else if (matchesKeyId(data, "ctrl+u") || matchesKeyId(data, "pageup")) this.scrollBy(-half);
+		else if (matchesKeyId(data, "g")) this.scroll = 0;
+		else if (matchesKeyId(data, "shift+g")) this.scroll = Number.MAX_SAFE_INTEGER;
+		// 其他按键一律吞掉；越界的滚动位置在 render 时夹回来。
+	}
+
+	private scrollBy(delta: number): void {
+		this.scroll = Math.max(0, this.scroll + delta);
+	}
+
+	private lines(width: number): string[] {
+		const markdown = this.markdown ?? "";
+		if (this.cache?.width === width && this.cache.markdown === markdown) return this.cache.lines;
+		const md = new Markdown(markdown, 1, 0, getMarkdownTheme());
+		const lines = md.render(width);
+		this.cache = { width, markdown, lines };
+		return lines;
+	}
+
+	/** Box size for a `termW` × `termH` terminal (same margins as the tree dialog). */
+	static size(termW: number, termH: number): { width: number; height: number } {
+		return { width: Math.max(24, termW - 4), height: Math.max(5, termH - 2) };
+	}
+
+	/** Render the box itself, every line exactly `width` columns and `height` lines tall. */
+	render(width: number, height: number): string[] {
+		const { theme } = this.o;
+		this.visible = Math.max(1, height - 2);
+		if (this.loading) return this.renderLoading(width, height);
+		const all = this.lines(width - 2);
+		const maxTop = Math.max(0, all.length - this.visible);
+		this.scroll = Math.min(this.scroll, maxTop);
+		const body = all.slice(this.scroll, this.scroll + this.visible);
+		const last = Math.min(all.length, this.scroll + this.visible);
+		const meta = all.length > this.visible ? `${this.scroll + 1}-${last}/${all.length}` : "";
+		return frame(body, {
+			width,
+			height,
+			title: changelogTitle(),
+			...(meta ? { meta } : {}),
+			border: (s) => theme.fg("borderAccent", s),
+			titleStyle: (s) => theme.bold(theme.fg("accent", s)),
+			metaStyle: (s) => theme.fg("dim", s),
+		});
+	}
+
+	/** The loading box: an empty body with a centered spinner + text in its middle. */
+	private renderLoading(width: number, height: number): string[] {
+		const { theme } = this.o;
+		const inner = width - 2;
+		const glyph = SPINNER_FRAMES[this.spinnerFrame % SPINNER_FRAMES.length] ?? SPINNER_FRAMES[0];
+		const msg = `${glyph} ${changelogLoading()}`;
+		const pad = Math.max(0, Math.floor((inner - visibleWidth(msg)) / 2));
+		const body: string[] = Array.from({ length: this.visible }, () => "");
+		// 垂直居中：放在中间那一行。
+		body[Math.floor((this.visible - 1) / 2)] = " ".repeat(pad) + theme.fg("dim", msg);
+		return frame(body, {
+			width,
+			height,
+			title: changelogTitle(),
+			border: (s) => theme.fg("borderAccent", s),
+			titleStyle: (s) => theme.bold(theme.fg("accent", s)),
+			metaStyle: (s) => theme.fg("dim", s),
+		});
+	}
+
+	/** Composite the box centered over the already-rendered panel `lines`. */
+	overlay(lines: string[], termW: number): string[] {
+		const { width, height } = ChangelogDialog.size(termW, lines.length);
+		return overlayCentered(lines, this.render(width, height), width, termW);
+	}
+}

package/src/ui/widgets/compact-dialog.ts

@@ -0,0 +1,29 @@
+/**
+ * Compact prompt (`c` in the sessions pane, what `/compact [instructions]` does):
+ * the title and footer hints that ./input-dialog.ts shows while asking for the
+ * optional focus instructions, same idea as ./rename-dialog.ts.
+ *
+ * The panel owns the target session and runs the compaction through the injected
+ * actions; the input is optional — an empty submission compacts with pi's default
+ * instructions, non-empty text focuses the summary.
+ *
+ * 压缩会话是通用输入弹窗（InputDialog）的一个预设：标题 + footer 提示；弹窗标题右侧显示
+ * 被压缩的会话（首条消息预览），输入可留空（空 = 用 pi 的默认压缩指令）。
+ */
+
+import { t } from "../../i18n/index.ts";
+import type { KeyHint } from "../../types.ts";
+
+/** Title on the top border of the box. */
+export function compactDialogTitle(): string {
+	return t("dialog.compactTitle");
+}
+
+/** Footer hints while the dialog is open. */
+export function compactDialogHints(): KeyHint[] {
+	return [
+		["Enter", t("hint.compact")],
+		["Esc", t("hint.cancel")],
+		[t("hint.emptyKey"), t("hint.compactDefault")],
+	];
+}

package/src/ui/widgets/confirm-dialog.ts

@@ -0,0 +1,98 @@
+/**
+ * Confirm dialog: the Yes / No menu shown before every destructive or outbound
+ * action (delete, fork, clone, share, import, overwriting an export — CLAUDE.md rule 7).
+ *
+ *   ┌─ Delete session? ──────────── FilmRecall ─┐
+ *   │   Yes                                      │
+ *   │ › No                                       │
+ *   └────────────────────────────────────────────┘
+ *    CONFIRM │ y/n choose   Enter confirm   Esc cancel     <- footer while open
+ *
+ * A preset of ./select-dialog.ts, like ./restore-dialog.ts: the cursor starts
+ * on No so a stray Enter never destroys anything, `y` / `n` pick directly,
+ * Enter confirms the highlighted entry and Esc cancels.
+ *
+ * 删除 / fork 前的确认框是通用选择菜单（SelectDialog）的一个预设：默认停在 No，
+ * y / n 直接选，Enter 确认光标所在项，Esc 取消。这里只放文案、顺序和提示，不做 I/O。
+ */
+
+import { t } from "../../i18n/index.ts";
+import type { KeyHint } from "../../types.ts";
+import type { SelectDialogSpec } from "./select-dialog.ts";
+
+/** Menu entries, localised; `CONFIRM_YES_INDEX` / `CONFIRM_NO_INDEX` name them. */
+export function confirmItems(): string[] {
+	return [t("confirm.yes"), t("confirm.no")];
+}
+export const CONFIRM_YES_INDEX = 0;
+export const CONFIRM_NO_INDEX = 1;
+
+/** Footer hints while a confirmation is open. */
+export function confirmHints(): KeyHint[] {
+	return [
+		["y/n", t("hint.choose")],
+		["Enter", t("hint.confirm")],
+		["Esc", t("hint.cancel")],
+	];
+}
+
+/** Title of the delete-session confirmation. */
+export function deleteSessionTitle(): string {
+	return t("confirm.delete");
+}
+
+/** Title of the batch delete confirmation (`d` with a multi-selection). */
+export function deleteSessionsTitle(count: number): string {
+	return t("confirm.deleteN", { count });
+}
+
+/** Title of the clone-session confirmation (`y`). */
+export function cloneSessionTitle(): string {
+	return t("confirm.clone");
+}
+
+/** Title of the fork confirmation, shown after a message is picked (`o`). */
+export function forkSessionTitle(): string {
+	return t("confirm.fork");
+}
+
+/** Title of the share confirmation (`S`): the session leaves the machine. */
+export function shareSessionTitle(): string {
+	return t("confirm.share");
+}
+
+/** Title of the import confirmation (`I`), pi's "Replace current session with …?". */
+export function importSessionTitle(): string {
+	return t("confirm.import");
+}
+
+/** Title of the confirmation before an export overwrites an existing file (`e`). */
+export function overwriteFileTitle(): string {
+	return t("confirm.overwrite");
+}
+
+export interface ConfirmSpecOptions {
+	/** Title on the top border, e.g. "Delete session?". */
+	title: string;
+	/** What is about to be acted on, shown at the right end of the title bar. */
+	subject?: string;
+	onConfirm: () => void;
+	onCancel: () => void;
+}
+
+/**
+ * The `SelectDialog.open` spec of a confirmation: Yes / No with the cursor on
+ * No; picking No is the same as Esc.
+ */
+export function confirmDialogSpec(o: ConfirmSpecOptions): SelectDialogSpec {
+	return {
+		title: o.title,
+		items: confirmItems(),
+		initialIndex: CONFIRM_NO_INDEX,
+		...(o.subject ? { subject: o.subject } : {}),
+		hints: confirmHints(),
+		shortcuts: { y: CONFIRM_YES_INDEX, n: CONFIRM_NO_INDEX },
+		onSelect: (index) => (index === CONFIRM_YES_INDEX ? o.onConfirm() : o.onCancel()),
+		onCancel: o.onCancel,
+	};
+}

package/src/ui/widgets/export-dialog.ts

@@ -0,0 +1,62 @@
+/**
+ * Export dialogs (`e` in the sessions pane, what pi's `/export` does): the
+ * format menu and the output-path prompt.
+ *
+ *   ┌─ Export as ─────────────────────────── FilmRecall ─┐
+ *   │ › HTML   whole tree, opens in a browser             │
+ *   │   JSONL  active branch, can be imported again        │
+ *   └──────────────────────────────────────────────────────┘
+ *   ┌─ Export to ──────────────────────────── FilmRecall ─┐
+ *   │ E:\work\pi-session-2026-09-23T….html                 │
+ *   └──────────────────────────────────────────────────────┘
+ *
+ * Only wording for a ./select-dialog.ts and an ./input-dialog.ts preset, like
+ * ./restore-dialog.ts. The path is pre-filled with pi's default (the actions
+ * layer resolves it); a directory gets the default file name inside it, and an
+ * existing file is confirmed (./confirm-dialog.ts) before it is overwritten.
+ *
+ * 导出只是两个通用弹窗的预设：先选格式（SelectDialog），再输入输出路径（InputDialog，
+ * 预填 pi 的默认路径，Esc 退回格式菜单）。目标文件已存在时再弹确认框。
+ */
+
+import { t } from "../../i18n/index.ts";
+import type { ExportFormat, KeyHint } from "../../types.ts";
+
+/** Title of the format menu (localised). */
+export function exportFormatTitle(): string {
+	return t("dialog.exportFormatTitle");
+}
+
+/** Format order, top to bottom (HTML first, like /export without an extension). */
+export const EXPORT_FORMAT_ORDER: readonly ExportFormat[] = ["html", "jsonl"];
+
+/** Menu entries, top to bottom, localised. */
+export function exportFormats(): ReadonlyArray<{ format: ExportFormat; label: string }> {
+	return [
+		{ format: "html", label: t("dialog.exportHtml") },
+		{ format: "jsonl", label: t("dialog.exportJsonl") },
+	];
+}
+
+/** Footer hints while the format menu is open. */
+export function exportFormatHints(): KeyHint[] {
+	return [
+		["j/k", t("hint.move")],
+		["Enter", t("hint.select")],
+		["Esc", t("hint.cancel")],
+	];
+}
+
+/** Title of the output-path prompt (localised). */
+export function exportPathTitle(): string {
+	return t("dialog.exportPathTitle");
+}
+
+/** Footer hints while the output-path prompt is open. */
+export function exportPathHints(): KeyHint[] {
+	return [
+		["Enter", t("hint.export")],
+		["Esc", t("hint.back")],
+		[t("hint.folderKey"), t("hint.defaultInside")],
+	];
+}

package/src/ui/widgets/footer.ts

@@ -0,0 +1,117 @@
+/**
+ * Footer bar.
+ *
+ * Single line at the bottom of the panel:
+ *   │ NORMAL │ / Search   ? Help   l Focus   Enter Resume   d Delete   q Quit
+ *
+ * Shows the current mode and the most relevant bindings for the focused pane.
+ * Hints are derived from the resolved keymap, so custom bindings show up here.
+ * When search mode is active the panel renders the search bar instead; while a
+ * dialog owns the keyboard (label / restore mode) the panel passes the
+ * dialog's own hints via `hints`.
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { FOOTER_HINTS } from "../../config/keymap.ts";
+import { labelsForFocus } from "../../config/keys.ts";
+import { t } from "../../i18n/index.ts";
+import type { ActionId, KeyHint, Keymap, ListScope, PaneId, PanelMode } from "../../types.ts";
+import { fit } from "../frame.ts";
+
+export interface FooterProps {
+	mode: PanelMode;
+	focus: PaneId;
+	keymap: Keymap;
+	theme: Theme;
+	/** Current list scope; the hint for the scope already active is hidden ("A All" while on Current). */
+	scope?: ListScope;
+	/** Optional status text (e.g. "loading…" or an error). */
+	status?: string;
+	/** Replace the keymap-derived hints, e.g. with a dialog's keys while it is open. */
+	hints?: KeyHint[];
+	/** Extension version, shown muted at the far right (e.g. "0.1.0" → "v0.1.0"). */
+	version?: string;
+}
+
+/** Scope actions are one-way, so only the one that would change something is worth a hint. */
+const SCOPE_ACTION_OF: Record<ListScope, ActionId> = {
+	"current-folder": "scope-current",
+	all: "scope-all",
+};
+
+/** Actions with a short footer wording (under `footer.` in the locale files); others fall back to the action id. */
+const HAS_SHORT: ReadonlySet<ActionId> = new Set<ActionId>([
+	"search",
+	"help",
+	"focus-next",
+	"scope-current",
+	"scope-all",
+	"quit",
+	"session-resume",
+	"session-delete",
+	"session-rename",
+	"session-new",
+	"session-fork",
+	"session-clone",
+	"session-copy-last-reply",
+	"session-export",
+	"session-import",
+	"session-share",
+	"session-sort",
+	"session-info",
+	"session-compact",
+	"tree-restore",
+	"tree-open",
+	"tree-fold",
+	"tree-label",
+	"tree-copy",
+	"go-top",
+	"go-bottom",
+	"changelog",
+]);
+
+/** Short footer wording of `action` (localised), falling back to the action id. */
+function footerLabel(action: ActionId): string {
+	return HAS_SHORT.has(action) ? t(`footer.${action}`) : action;
+}
+
+export function renderFooter(p: FooterProps, width: number): string[] {
+	const { theme } = p;
+	const mode = theme.bold(theme.bg("selectedBg", ` ${t(`mode.${p.mode}`)} `));
+	const status = p.status ? `  ${theme.fg("warning", p.status)}` : "";
+	// 右下角的版本号（muted 弱化显示），先给它预留位置，避免按键提示占满后把它挤没。
+	const version = p.version ? theme.fg("muted", `v${p.version}`) : "";
+	const versionBudget = version ? visibleWidth(version) + 2 : 0;
+	const budget = width - visibleWidth(mode) - visibleWidth(status) - versionBudget - 1;
+
+	// 只显示放得下的提示，避免窄终端里被截断成半个词。
+	const parts: string[] = [];
+	let used = 0;
+	for (const [key, text] of p.hints ?? keymapHints(p)) {
+		const part = `${theme.bold(theme.fg("accent", key))} ${theme.fg("muted", text)}`;
+		const w = visibleWidth(part) + (parts.length ? 3 : 0);
+		if (used + w > budget) break;
+		parts.push(part);
+		used += w;
+	}
+	const left = `${mode} ${parts.join("   ")}${status}`;
+	if (!version) return [fit(left, width)];
+	// 版本号靠右：中间用空格撑开，整体再 fit 到宽度（放不下时优先保留左侧提示，版本被截断）。
+	const gap = Math.max(1, width - visibleWidth(left) - visibleWidth(version));
+	return [fit(`${left}${" ".repeat(gap)}${version}`, width)];
+}
+
+/** Hints of the focused pane from the resolved keymap, in FOOTER_HINTS order. */
+function keymapHints(p: FooterProps): KeyHint[] {
+	// 当前已经是 Current 就不提示 C Current，只提示 A All；反之亦然。
+	const activeScopeAction = p.scope ? SCOPE_ACTION_OF[p.scope] : undefined;
+	const out: KeyHint[] = [];
+	for (const action of FOOTER_HINTS[p.focus]) {
+		if (action === activeScopeAction) continue;
+		const labels = labelsForFocus(p.keymap, p.focus, action);
+		if (labels.length === 0) continue;
+		out.push([labels[0]!, footerLabel(action)]);
+	}
+	return out;
+}

package/src/ui/widgets/fork-dialog.ts

@@ -0,0 +1,28 @@
+/**
+ * Fork selector (`o` in the sessions pane, what pi's `/fork` shows): the title
+ * and footer hints for the centered menu of user messages to fork before.
+ *
+ * Like ./restore-dialog.ts, this is only the wording for a ./select-dialog.ts
+ * preset — the panel builds the item list from the session's fork points, the
+ * confirmation (./confirm-dialog.ts) then guards the actual fork.
+ *
+ * fork 选择器只是通用选择菜单（SelectDialog，带滚动窗口）的一个预设：标题 + 提示。
+ * 选项来自会话里的 user 消息（app 层从 data 拿），默认停在最后一条（pi 的默认）。
+ */
+
+import { t } from "../../i18n/index.ts";
+import type { KeyHint } from "../../types.ts";
+
+/** Title on the top border of the fork selector. */
+export function forkDialogTitle(): string {
+	return t("dialog.forkTitle");
+}
+
+/** Footer hints while the fork selector is open. */
+export function forkDialogHints(): KeyHint[] {
+	return [
+		["j/k", t("hint.move")],
+		["Enter", t("hint.select")],
+		["Esc", t("hint.cancel")],
+	];
+}