@gavin-hu/my-pi-agent 0.8.1 → 0.10.0

package/lib/tui/line-pane.ts

@@ -0,0 +1,173 @@
+/**
+ * A scrollable text pane: the log tail a job screen opens, the match list a
+ * watcher screen opens.
+ *
+ * Both screens embed the same pane — an open row's id, a buffer of already
+ * sanitized lines, a scroll offset that follows the tail until the user scrolls
+ * away from it, a "showing last N" subtitle, and one dim range row — so the
+ * state machine lives here once. The screen owns rendering, the visible row
+ * budget, and `requestRender`; the pane owns only the state and the keys that
+ * move it.
+ *
+ * Value-only: a class with instance state, no module-level state.
+ */
+
+import { clampScroll, navigateScroll } from "./cursor.ts";
+
+/** A patch for the pane's contents; each field given replaces that field. */
+export interface PaneSource {
+	/** Title shown after the pane's prefix, e.g. `j1 build`. */
+	title?: string;
+	/** The lines, newest last. */
+	lines?: string[];
+	/** The dim subtitle line, e.g. the log file path. Already sanitized. */
+	subtitle?: string;
+	/** Whether earlier lines exist beyond the loaded window. */
+	more?: boolean;
+}
+
+/** Whether two line buffers are identical. */
+function sameLines(a: readonly string[], b: readonly string[]): boolean {
+	if (a.length !== b.length) return false;
+	for (let index = 0; index < a.length; index++) {
+		if (a[index] !== b[index]) return false;
+	}
+	return true;
+}
+
+/** The scrollable text pane both the job and watch screens embed. */
+export class LinePane {
+	/** Id of the row whose pane is open; `""` when the pane is closed. */
+	id = "";
+	/** First visible line. */
+	scroll = 0;
+	/** Rows shown at once; the screen sets this from `fitRows` each render. */
+	visible = 1;
+	/** Whether the view is parked at the tail; set false once the user scrolls up. */
+	follow = true;
+
+	private buffer: string[] = [];
+	private label = "";
+	private subtitle: string | undefined;
+	private more = false;
+
+	/** Lines loaded into the pane, oldest first. */
+	get lines(): readonly string[] {
+		return this.buffer;
+	}
+
+	/** Loaded line count. */
+	get count(): number {
+		return this.buffer.length;
+	}
+
+	/** The furthest the view can scroll while keeping a full window. */
+	get maxScroll(): number {
+		return Math.max(0, this.buffer.length - this.visible);
+	}
+
+	/** Open the pane on a row, reset to the tail. */
+	open(id: string, source: PaneSource): void {
+		this.id = id;
+		this.buffer = [];
+		this.label = "";
+		this.subtitle = undefined;
+		this.more = false;
+		this.scroll = 0;
+		this.follow = true;
+		this.update(source);
+	}
+
+	/** Close the pane and drop its buffer. */
+	close(): void {
+		this.id = "";
+		this.buffer = [];
+		this.label = "";
+		this.subtitle = undefined;
+		this.more = false;
+		this.scroll = 0;
+		this.follow = true;
+	}
+
+	/**
+	 * Replace the given fields.
+	 *
+	 * Returns whether anything visible changed, so a caller polling the pane
+	 * every 500ms can skip a repaint — and leave the user's scroll alone — when
+	 * the buffer is byte-identical.
+	 */
+	update(source: PaneSource): boolean {
+		const titleChanged = source.title !== undefined && source.title !== this.label;
+		const linesChanged = source.lines !== undefined && !sameLines(source.lines, this.buffer);
+		const moreChanged = source.more !== undefined && source.more !== this.more;
+		const subtitleChanged = source.subtitle !== undefined && source.subtitle !== this.subtitle;
+
+		if (source.title !== undefined) this.label = source.title;
+		if (source.lines !== undefined) this.buffer = source.lines;
+		if (source.more !== undefined) this.more = source.more;
+		if (source.subtitle !== undefined) this.subtitle = source.subtitle;
+
+		// Follow the tail; a paused view keeps its place but never past the end.
+		if (this.follow) this.scroll = this.maxScroll;
+		else this.scroll = Math.min(this.scroll, this.maxScroll);
+
+		return titleChanged || linesChanged || moreChanged || subtitleChanged;
+	}
+
+	/** The header label: the pane prefix, and the row's title when it has one. */
+	title(prefix: string): string {
+		return this.label ? `${prefix} · ${this.label}` : prefix;
+	}
+
+	/**
+	 * The dim subtitle: the source (a log path), the loaded-window note, and
+	 * whether the view is following. Empty when there is nothing to say.
+	 */
+	subtitleLine(): string {
+		const parts: string[] = [];
+		if (this.subtitle) parts.push(this.subtitle);
+		if (this.more && this.buffer.length > 0) parts.push(`showing last ${this.buffer.length} lines`);
+		if (this.buffer.length > 0) parts.push(this.follow ? "following" : "paused");
+		return parts.join(" · ");
+	}
+
+	/** The visible half-open line range, clamped to the buffer. */
+	window(): { start: number; end: number } {
+		const start = Math.min(Math.max(0, this.scroll), this.maxScroll);
+		return { start, end: Math.min(this.buffer.length, start + this.visible) };
+	}
+
+	/** Scroll to `next`, clamped; leaving the tail clears `follow`. */
+	setScroll(next: number): void {
+		this.scroll = clampScroll(next, this.buffer.length, this.visible);
+		this.follow = this.scroll >= this.maxScroll;
+	}
+
+	/**
+	 * Adopt a new visible height for the coming render: clamp the scroll into
+	 * range, and re-park a following view at the tail. Does not touch `follow`.
+	 */
+	fit(visible: number): void {
+		this.visible = visible;
+		this.scroll = clampScroll(this.scroll, this.buffer.length, this.visible);
+		if (this.follow) this.scroll = this.maxScroll;
+	}
+
+	/** Apply a scroll key; `false` when the key is not one the pane consumes. */
+	handleKey(data: string): boolean {
+		const next = navigateScroll(data, this.scroll, this.buffer.length, this.visible);
+		if (next !== undefined) {
+			this.setScroll(next);
+			return true;
+		}
+		if (data === "g") {
+			this.setScroll(0);
+			return true;
+		}
+		if (data === "G") {
+			this.setScroll(this.maxScroll);
+			return true;
+		}
+		return false;
+	}
+}

package/lib/tui/rows.ts

@@ -0,0 +1,143 @@
+/**
+ * The row grammar: a list row, a checkbox, a status chip, a key/value row, and
+ * an empty state.
+ *
+ * Every row is one line (an empty state is its two), built from the shared
+ * token roles and the shared selection marker, and clipped with `columns.ts` so
+ * it fits the width it was given. The point is that a list row looks the same
+ * whether it is the extension screen, the job list, or the rewind timeline:
+ *
+ *   ❯ ◼ extensions  7 enabled
+ *
+ * Value-only: pure functions, theme passed in.
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { clip, padTo, splitRow } from "./columns.ts";
+import { selectionMarker } from "./cursor.ts";
+import { GLYPHS } from "./glyphs.ts";
+import { BODY_INDENT } from "./indent.ts";
+import { paint, type TuiRole } from "./tokens.ts";
+
+/** One selectable list row. */
+export interface ListRow {
+	/** Draw the `❯` marker in the accent role. A blank marker column is reserved either way. */
+	selected?: boolean;
+	/**
+	 * Reserve the `❯ ` marker column. Default true, so a column of rows stays
+	 * aligned; a non-interactive row (a transcript result) sets false to drop the
+	 * columns it can never use.
+	 */
+	marker?: boolean;
+	/**
+	 * A pre-themed cell between the marker and the glyph, e.g. a `checkbox`.
+	 * Reserved by the caller (pass a blank when the row has none) so a column of
+	 * rows stays aligned.
+	 */
+	leading?: string;
+	/** A leading status or type glyph, painted in `glyphRole`. */
+	glyph?: string;
+	glyphRole?: TuiRole;
+	/** The row's text. */
+	label: string;
+	labelRole?: TuiRole;
+	/** Right-aligned meta (a count, a time, a state). */
+	trailing?: string;
+	trailingRole?: TuiRole;
+	/** Extra columns before the marker, for a nested row. */
+	indent?: number;
+}
+
+/**
+ * One list row: an optional indent, the selection marker, an optional glyph,
+ * the label, and right-aligned trailing meta.
+ *
+ * The marker column is reserved by default, so selected and unselected rows
+ * align; `marker: false` drops it for a non-interactive row. The trailing meta
+ * is the anchor when the terminal is narrow (see `splitRow`), so a value at the
+ * end of the row survives.
+ */
+export function listRow(theme: Theme, width: number, row: ListRow): string {
+	const indent = " ".repeat(Math.max(0, Math.floor(row.indent ?? 0)));
+	const marker = row.marker === false ? "" : selectionMarker(theme, row.selected === true);
+	const leading = row.leading ? `${row.leading} ` : "";
+	const glyph = row.glyph ? `${paint(theme, row.glyphRole ?? "info", row.glyph)} ` : "";
+	const label = paint(theme, row.labelRole ?? "label", row.label);
+	const trailing = row.trailing ? paint(theme, row.trailingRole ?? "meta", row.trailing) : "";
+	return splitRow(`${indent}${marker}${leading}${glyph}${label}`, trailing, width);
+}
+
+/** A status row (a job, a watcher): the marker, a status glyph, a label, and right-aligned meta. */
+export interface StatusRow {
+	selected?: boolean;
+	/** Reserve the marker column. Default true. */
+	marker?: boolean;
+	glyph: string;
+	glyphRole: TuiRole;
+	label: string;
+	trailing: string;
+	/** Role for the trailing meta. Default `faint`. */
+	trailingRole?: TuiRole;
+}
+
+/** One row of a live status list, on the shared `listRow` grammar. */
+export function statusRow(theme: Theme, width: number, row: StatusRow): string {
+	return listRow(theme, width, {
+		selected: row.selected === true,
+		marker: row.marker !== false,
+		glyph: row.glyph,
+		glyphRole: row.glyphRole,
+		label: row.label,
+		trailing: row.trailing,
+		trailingRole: row.trailingRole ?? "faint",
+	});
+}
+
+/** The on/off checkbox glyph, in one role per state. */
+export function checkbox(theme: Theme, on: boolean, roles: { on?: TuiRole; off?: TuiRole } = {}): string {
+	return on ? paint(theme, roles.on ?? "ok", GLYPHS.boxOn) : paint(theme, roles.off ?? "faint", GLYPHS.boxOff);
+}
+
+/** A glyph and a short label in one color: the vocabulary of a status chip. */
+export function chip(theme: Theme, glyph: string, label: string, role: TuiRole = "meta"): string {
+	const head = paint(theme, role, glyph);
+	return label ? `${head} ${paint(theme, role, label)}` : head;
+}
+
+/** A fixed-width label column followed by its value. */
+export interface KeyValueRow {
+	label: string;
+	value: string;
+	/** Columns the label column occupies. Default 12. */
+	labelWidth?: number;
+	labelRole?: TuiRole;
+	valueRole?: TuiRole;
+}
+
+/**
+ * One body-indented `label   value` row, the label padded to a fixed column.
+ * The `BODY_INDENT` prefix matches `emptyState`, so a screen's body rows and its
+ * empty state share one indent.
+ */
+export function keyValueRow(theme: Theme, width: number, row: KeyValueRow): string {
+	const labelWidth = Math.max(1, Math.floor(row.labelWidth ?? 12));
+	const label = paint(theme, row.labelRole ?? "meta", padTo(row.label, labelWidth));
+	const value = paint(theme, row.valueRole ?? "label", row.value);
+	return clip(`${" ".repeat(BODY_INDENT)}${label}${value}`, width);
+}
+
+/** A screen's empty state: what is missing, and the next action. */
+export interface EmptyState {
+	/** One line naming what is absent, e.g. `No notes yet.`. */
+	label: string;
+	/** An optional line naming the next action. */
+	hint?: string;
+}
+
+/** The empty-state lines: a body-indented label, then its hint. */
+export function emptyState(theme: Theme, width: number, state: EmptyState): string[] {
+	const indent = " ".repeat(BODY_INDENT);
+	const lines = [clip(`${indent}${paint(theme, "faint", state.label)}`, width)];
+	if (state.hint) lines.push(clip(`${indent}${paint(theme, "faint", state.hint)}`, width));
+	return lines;
+}

package/lib/tui/rules.ts

@@ -0,0 +1,94 @@
+/**
+ * The rule grammar: how a surface draws a horizontal divider.
+ *
+ * Two shapes, built from one idea — a run of a single-column glyph, with an
+ * optional label — so a screen title and a centered rule read as one family:
+ *
+ *   title     Extensions ──────────────────   (label first, accent)
+ *   centered       ╌╌╌╌╌╌ turn 3 ╌╌╌╌╌╌       (label centered)
+ *
+ * A rule degrades to a plain fill rather than truncating a label into an
+ * ellipsis, matching Pi's built-in header.
+ *
+ * Value-only: pure functions, theme passed in.
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { paint, type TuiRole } from "./tokens.ts";
+
+/** The glyph and colors a rule is drawn with. */
+export interface RuleStyle {
+	/** Single-column fill glyph. Default `─` (a centered rule defaults to `─` too). */
+	glyph?: string;
+	/** The label's role. */
+	labelRole?: TuiRole;
+	/** The fill's role. */
+	fillRole?: TuiRole;
+}
+
+/** A centered rule's style adds the padding around the label. */
+export interface CenteredRuleStyle extends RuleStyle {
+	/** Spaces on each side of the label. Default 1. */
+	pad?: number;
+}
+
+/**
+ * The solid rule fill: the glyph a divider repeats. One constant names it, so
+ * the header rule, a panel title, and the user-message nameplate cannot drift.
+ */
+export const RULE_GLYPH = "─";
+
+/** A usable origin: terminal arithmetic starts from one column, never zero. */
+function widthOf(width: number): number {
+	return Math.max(1, Math.floor(width));
+}
+
+/** A full-width divider in one color. */
+export function plainRule(theme: Theme, width: number, style: RuleStyle = {}): string {
+	const w = widthOf(width);
+	return paint(theme, style.fillRole ?? "rule", (style.glyph ?? RULE_GLYPH).repeat(w));
+}
+
+/** The label-first shape a screen or panel title uses. */
+export function titleRule(theme: Theme, width: number, label: string, style: RuleStyle = {}): string {
+	return labelRule(theme, width, label, "title", "rule", style);
+}
+
+/** A label-first rule: the label at the margin, a fill to the edge. */
+function labelRule(
+	theme: Theme,
+	width: number,
+	label: string,
+	labelRole: TuiRole,
+	fillRole: TuiRole,
+	style: RuleStyle,
+): string {
+	const w = widthOf(width);
+	const text = label.trim();
+	if (!text) return plainRule(theme, w, style);
+	const labelWidth = visibleWidth(text);
+	if (labelWidth + 1 >= w) return plainRule(theme, w, style);
+	const fill = (style.glyph ?? RULE_GLYPH).repeat(w - labelWidth - 1);
+	return paint(theme, style.labelRole ?? labelRole, text) + " " + paint(theme, style.fillRole ?? fillRole, fill);
+}
+
+/** A centered rule: fill, label, and the rest of the fill. */
+export function centeredRule(theme: Theme, width: number, label: string, style: CenteredRuleStyle = {}): string {
+	const w = widthOf(width);
+	const glyph = style.glyph ?? RULE_GLYPH;
+	const fillRole = style.fillRole ?? "ruleStrong";
+	if (!label.trim()) return paint(theme, fillRole, glyph.repeat(w));
+	const pad = " ".repeat(Math.max(0, Math.floor(style.pad ?? 1)));
+	const text = `${pad}${label}${pad}`;
+	const labelWidth = visibleWidth(text);
+	if (labelWidth >= w) return paint(theme, fillRole, glyph.repeat(w));
+	const remaining = w - labelWidth;
+	const left = Math.floor(remaining / 2);
+	const right = remaining - left;
+	return (
+		paint(theme, fillRole, glyph.repeat(left)) +
+		paint(theme, style.labelRole ?? "meta", text) +
+		paint(theme, fillRole, glyph.repeat(right))
+	);
+}

package/lib/tui/status-controller.ts

@@ -0,0 +1,107 @@
+/**
+ * The footer status chips two extensions publish the same way.
+ *
+ * A controller remembers the last context it was attached to, repaints the keys
+ * it owns, clears them when its feature is disabled, and never throws: a
+ * non-interactive mode has no UI, so every method no-ops or falls back to plain
+ * text instead.
+ *
+ * The chips themselves are the caller's: it supplies the keys, the counts, and
+ * the roles, so `job` and `watch` share the controller but not their vocabulary.
+ * Value-only: the per-caller state lives in this closure, never in the module.
+ */
+
+import type { ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
+import { paint, type TuiRole } from "./tokens.ts";
+
+/** One chip a controller publishes. */
+export interface StatusChip {
+	/** The `ctx.ui.setStatus` key. */
+	key: string;
+	/** Glyph shown before the count. */
+	glyph: string;
+	/** Count; `0` clears the key. */
+	count: number;
+	/** The design role the chip is drawn in. */
+	role: TuiRole;
+}
+
+/** What a controller publishes, read fresh on every paint. */
+export interface StatusControllerOptions {
+	/** The keys this controller owns, cleared together when it is disabled. */
+	keys: readonly string[];
+	/** Whether the chips should be published at all. */
+	enabled(): boolean;
+	/** The chips for the current state. */
+	chips(): readonly StatusChip[];
+}
+
+/** An attach/paint/clear surface for one extension's footer chips. */
+export interface StatusController {
+	/** Remember the live context; later calls use it when none is passed. */
+	attach(ctx: ExtensionContext): void;
+	/** Forget the context, for example on shutdown or reload. */
+	detach(): void;
+	/** Republish using the attached context. */
+	paint(): void;
+	/** Publish the chips (and attach `ctx` when given). */
+	setStatus(ctx?: ExtensionContext): void;
+}
+
+/** A context's theme, or `undefined` when the UI is unavailable. */
+function themeOf(target: ExtensionContext): Theme | undefined {
+	try {
+		return target.ui.theme;
+	} catch {
+		return undefined;
+	}
+}
+
+/** Paint in role, falling back to plain text when the theme cannot. */
+function safePaint(theme: Theme | undefined, role: TuiRole, text: string): string {
+	if (!theme) return text;
+	try {
+		return paint(theme, role, text);
+	} catch {
+		return text;
+	}
+}
+
+/** Build a controller for one extension's pair of chips. */
+export function createStatusController(options: StatusControllerOptions): StatusController {
+	let ctx: ExtensionContext | undefined;
+
+	const setStatus = (next?: ExtensionContext): void => {
+		if (next) ctx = next;
+		const target = ctx;
+		if (!target) return;
+		try {
+			if (!options.enabled()) {
+				for (const key of options.keys) target.ui.setStatus(key, undefined);
+				return;
+			}
+			const theme = themeOf(target);
+			for (const chip of options.chips()) {
+				// A space before the count keeps the compact chrome form (`▸2`),
+				// while the two chips stay separate segments in the full form.
+				const text = `${chip.glyph} ${chip.count}`;
+				target.ui.setStatus(chip.key, chip.count > 0 ? safePaint(theme, chip.role, text) : undefined);
+			}
+		} catch {
+			// UI may be unavailable in non-interactive modes.
+		}
+	};
+
+	return {
+		attach: (next) => {
+			ctx = next;
+		},
+		detach: () => {
+			ctx = undefined;
+		},
+		paint: () => {
+			setStatus();
+		},
+		setStatus,
+	};
+}

package/lib/tui/tokens.ts

@@ -0,0 +1,72 @@
+/**
+ * The Bytefly terminal design tokens: semantic roles mapped onto Pi's theme
+ * colors.
+ *
+ * A component names a role (`title`, `meta`, `bad`) and the active theme
+ * supplies the color, so switching themes re-skins every surface without a
+ * component changing. The mapping is deliberately indirect: Pi's token set is
+ * closed, so the kit only ever references it, never a literal color.
+ *
+ * Value-only: one frozen lookup table and pure helpers.
+ */
+
+import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
+
+/** A semantic role a surface can paint. */
+export type TuiRole =
+	/** The brand highlight: selection, focus, a model name. */
+	| "accent"
+	/** A screen, section, or panel title. */
+	| "title"
+	/** Primary body text. */
+	| "label"
+	/** Secondary text: counts, paths, summaries. */
+	| "meta"
+	/** Tertiary text and de-emphasis. */
+	| "faint"
+	/** A divider line. */
+	| "rule"
+	/** A heavier divider. */
+	| "ruleStrong"
+	/** Success. */
+	| "ok"
+	/** Warning. */
+	| "warn"
+	/** Error. */
+	| "bad"
+	/** Neutral notice. */
+	| "info";
+
+/** Role -> theme color. The single place the kit names a Pi token. */
+export const TUI_TOKENS: Readonly<Record<TuiRole, ThemeColor>> = {
+	accent: "accent",
+	title: "accent",
+	label: "text",
+	meta: "muted",
+	faint: "dim",
+	rule: "borderMuted",
+	ruleStrong: "border",
+	ok: "success",
+	warn: "warning",
+	bad: "error",
+	info: "muted",
+};
+
+/** Paint `text` in a role's color. */
+export function paint(theme: Theme, role: TuiRole, text: string): string {
+	return theme.fg(TUI_TOKENS[role], text);
+}
+
+/**
+ * The opening sequence for a role, without its reset. A frame that must repaint
+ * a run in place — mid-line, where the surrounding text already carries the
+ * closing reset — opens with this instead of wrapping a whole string.
+ *
+ * Derived from `paint` with a sentinel, so it tracks the theme's own escape
+ * shape rather than assuming one.
+ */
+export function paintPrefix(theme: Theme, role: TuiRole): string {
+	const marker = "\u0000";
+	const wrapped = paint(theme, role, marker);
+	return wrapped.slice(0, wrapped.indexOf(marker));
+}

package/lib/web/base.ts

@@ -8,7 +8,8 @@
 
 // Every focusable element gets the same ring; components must not re-declare
 // their own, so the keyboard affordance cannot disappear surface by surface.
-export const WEB_BASE_CSS = `*{box-sizing:border-box}
+export const WEB_BASE_CSS = `html,body{margin:0}
+*{box-sizing:border-box}
 [hidden]{display:none!important}
 a{color:var(--accent);text-decoration:none}
 a:hover{text-decoration:underline}

package/lib/web/components.ts

@@ -117,7 +117,9 @@ th[aria-sort="descending"] .bf-sort::after{content:" \\25BC";font-size:9px;color
 .bf-md .md-check{color:var(--success)}
 .bf-md table{margin:0;border-collapse:collapse;table-layout:auto;width:auto;font-size:var(--fs-sm)}
 .bf-md .md-table-wrap{overflow-x:auto;margin:0 0 1em}
-.bf-md th,.bf-md td{border:1px solid var(--border);padding:6px 10px;text-align:left;vertical-align:top}
+.bf-md th,.bf-md td{border:1px solid var(--border);padding:6px 10px;text-align:left;vertical-align:top;overflow-wrap:break-word}
+.bf-md th{white-space:nowrap}
+.bf-md th code,.bf-md td code{white-space:nowrap}
 .bf-md thead th{background:var(--surface);font-weight:var(--fw-medium)}
 .bf-md .md-left{text-align:left}
 .bf-md .md-center{text-align:center}

package/lib/web/layout.ts

@@ -11,15 +11,19 @@
  *
  * Only the shared 860px collapse lives here; the plan-specific rules stay in
  * `extensions/plan/web-page.ts`.
+ *
+ * The shell is a definite full-height column so the panes scroll inside it; the
+ * 860px breakpoint drops that back to normal page scroll for narrow screens.
  */
 
-export const WEB_LAYOUT_CSS = `.bf-app{display:flex;flex-direction:column;min-height:100vh;background:var(--canvas);color:var(--text);font:var(--fs-base)/var(--lh-normal) var(--font-ui)}
+export const WEB_LAYOUT_CSS = `.bf-app{display:flex;flex-direction:column;height:100vh;min-height:0;overflow:hidden;background:var(--canvas);color:var(--text);font:var(--fs-base)/var(--lh-normal) var(--font-ui)}
 .bf-app__header{position:sticky;top:0;z-index:2;flex:0 0 auto;background:var(--surface);border-bottom:1px solid var(--border)}
 .bf-app__body{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:260px minmax(0,1fr)}
 .bf-app__sidebar{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--surface);border-right:1px solid var(--border)}
 .bf-app__main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:auto;padding:var(--space-5) var(--space-6)}
 .bf-app__footer{flex:0 0 auto;border-top:1px solid var(--border);color:var(--muted);font-size:var(--fs-sm);padding:var(--space-3) var(--space-6)}
 @media (max-width:860px){
+.bf-app{height:auto;min-height:100vh;overflow:visible}
 .bf-app__body{flex:none;grid-template-columns:1fr}
 .bf-app__sidebar{display:block;position:static;max-height:none;overflow:visible;border-right:0;border-bottom:1px solid var(--border)}
 .bf-app__main{overflow:visible}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gavin-hu/my-pi-agent",
-  "version": "0.8.1",
+  "version": "0.10.0",
   "description": "Personal Pi customizations, packaged as a Pi package: worktree isolation and rewind snapshots, question, todo, goal, plan, subagent, job, watch, web-access, file-browse, file-open, document, memory, wechat, and bytefly.",
   "keywords": [
     "pi-package",
@@ -90,7 +90,7 @@
     "themes": [
       "./themes/*.json"
     ],
-    "image": "https://raw.githubusercontent.com/gavin-hu/my-pi-agent/main/assets/bytefly-chrome.png"
+    "image": "https://raw.githubusercontent.com/gavin-hu/my-pi-agent/main/assets/chrome.png"
   },
   "scripts": {
     "test": "bun test --parallel=4 --timeout 30000",
@@ -102,7 +102,11 @@
     "check": "bun run format:check && bun run typecheck && bun run test",
     "check:serial": "bun run format:check && bun run typecheck && bun run test:serial",
     "release:notes": "bun run scripts/release-notes.ts",
-    "config:migrate": "bun run scripts/migrate-config.ts"
+    "config:migrate": "bun run scripts/migrate-config.ts",
+    "screenshot:plan": "bun run scripts/plan-review-shot.ts",
+    "screenshot:tools": "bun run scripts/tool-renderings.ts gallery assets/tool-renderings.png",
+    "screenshot:tool-pngs": "bun run scripts/tool-renderings.ts tools assets/tools",
+    "screenshots": "bun run scripts/screenshots.ts"
   },
   "dependencies": {
     "exceljs": "^4.4.0",