@gavin-hu/my-pi-agent 0.9.0 → 0.11.0

package/lib/notice.ts

@@ -0,0 +1,87 @@
+/**
+ * The shared transcript notice: one custom-message type that any extension in
+ * the package can post, plus the model-facing content and the renderer-facing
+ * details it carries.
+ *
+ * Pi renders a custom message only when it was sent with `display: true`, and
+ * it resolves a renderer by the exact `customType` — there is no wildcard — so
+ * the type and the shape behind it are one contract the producing extension and
+ * bytefly's renderer must agree on. Keep both here, never re-typed on either
+ * side.
+ *
+ * `content` is what the model reads; `details` is never sent to the model and
+ * is the renderer's whole input, so a producer states the facts once and the
+ * renderer decides the look. Value-only: constants and pure functions, no
+ * state.
+ */
+
+import type { AgentMessage } from "@earendil-works/pi-agent-core";
+
+/** The custom-message type every transcript notice is sent under. */
+export const NOTICE_TYPE = "my-pi-agent/notice";
+
+/** How a notice, or one of its rows, reads at a glance. */
+export type NoticeSeverity = "info" | "ok" | "warn" | "bad";
+
+/** One row under a notice's headline. */
+export interface NoticeItem {
+	/** The row's text, e.g. `j1 build`. Sanitized by the renderer. */
+	label: string;
+	/** Short trailing detail, e.g. `exit 1`. Sanitized by the renderer. */
+	detail?: string;
+	/** The row's severity; falls back to the notice's own. */
+	severity?: NoticeSeverity;
+}
+
+/** Everything the renderer draws, and nothing the model sees. */
+export interface NoticeDetails {
+	/** Who raised it, e.g. `job` or `watch`. */
+	source: string;
+	/** One-line headline. */
+	title: string;
+	/** The headline's severity; a row may override it. */
+	severity?: NoticeSeverity;
+	/** Rows under the headline, in order. */
+	items?: readonly NoticeItem[];
+}
+
+export interface NoticeInput {
+	/** Model-facing text; the notice is also shown when non-empty. */
+	content: string;
+	/** Renderer-facing structure. */
+	details: NoticeDetails;
+}
+
+/** The message shape both send paths accept (`pi.sendMessage`, `before_agent_start`). */
+export interface NoticeMessage {
+	customType: string;
+	content: string;
+	display: true;
+	details: NoticeDetails;
+}
+
+/** A conversation message narrowed to a notice. */
+export type NoticeEntry = AgentMessage & { customType: string; details?: NoticeDetails };
+
+/** Build a visible notice message: shared type, `display: true`, the given content and details. */
+export function noticeMessage(input: NoticeInput): NoticeMessage {
+	return { customType: NOTICE_TYPE, content: input.content, display: true, details: input.details };
+}
+
+/** Whether a conversation message is a notice. */
+export function isNotice(message: AgentMessage): message is NoticeEntry {
+	return message.role === "custom" && (message as { customType?: string }).customType === NOTICE_TYPE;
+}
+
+/**
+ * Keep only the newest notice of `source` in a transcript, so stale injected
+ * context does not accumulate. Notices of other sources and every non-notice
+ * are left alone. Returns `undefined` when nothing is stale, so a `context`
+ * handler can leave the messages untouched.
+ */
+export function pruneStaleNotices(messages: readonly AgentMessage[], source: string): AgentMessage[] | undefined {
+	const ofSource = messages.filter((message) => isNotice(message) && message.details?.source === source);
+	if (ofSource.length <= 1) return undefined;
+	const keep = ofSource[ofSource.length - 1];
+	return messages.filter((message) => !(isNotice(message) && message.details?.source === source && message !== keep));
+}

package/lib/tui/chrome.ts

@@ -19,6 +19,7 @@
 import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
 import { Text, truncateToWidth, visibleWidth, type EditorTheme, type OverlayOptions } from "@earendil-works/pi-tui";
 import { SEPARATORS } from "./glyphs.ts";
+import { BODY_INDENT } from "./indent.ts";
 
 /**
  * `ctx.ui.custom` options that give a screen the whole terminal.
@@ -65,23 +66,26 @@ export function viewportRows(source: ViewportRowsSource | undefined, options: Vi
 export type ScreenHint = string | { text: string; color?: ThemeColor };
 
 /**
- * A two-space-indented key-hint footer, joined with ` · `. Plain hints are dim;
+ * A key-hint footer indented by `indent` columns (default `BODY_INDENT`, which
+ * hangs it under a screen's title rule), joined with ` · `. Plain hints are dim;
  * an object hint uses its color (dim when omitted). Hints are added while they
  * fit, so a narrow terminal drops whole keys instead of truncating one in half.
  * The first hint is always kept; the result is clipped to `width`.
  */
-export function screenHint(theme: Theme, width: number, hints: ScreenHint[]): string {
+export function screenHint(theme: Theme, width: number, hints: ScreenHint[], indent = BODY_INDENT): string {
 	const target = Math.max(1, width);
+	// Keep a column for the hint itself, however deep the caller indents.
+	const lead = " ".repeat(Math.max(0, Math.min(Math.floor(indent), target - 1)));
 	const render = (hint: ScreenHint): string =>
 		typeof hint === "string" ? theme.fg("dim", hint) : theme.fg(hint.color ?? "dim", hint.text);
 	const separator = theme.fg("dim", SEPARATORS.item);
 	const kept: ScreenHint[] = [];
 	for (const hint of hints) {
 		const candidate = [...kept, hint].map(render).join(separator);
-		if (kept.length > 0 && visibleWidth(`  ${candidate}`) > target) break;
+		if (kept.length > 0 && visibleWidth(`${lead}${candidate}`) > target) break;
 		kept.push(hint);
 	}
-	return truncateToWidth(`  ${kept.map(render).join(separator)}`, target);
+	return truncateToWidth(`${lead}${kept.map(render).join(separator)}`, target);
 }
 
 /**

package/lib/tui/cursor.ts

@@ -19,6 +19,7 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { Key, matchesKey, truncateToWidth, type TuiMouseEvent, type TuiMouseEventResult } from "@earendil-works/pi-tui";
 import { viewportRows, type ViewportRowsSource } from "./chrome.ts";
+import { GLYPHS } from "./glyphs.ts";
 
 /**
  * Rows that fit for a list of `itemCount`, reserving one extra line when the
@@ -75,7 +76,7 @@ export function wheelDelta(event: TuiMouseEvent): number | undefined {
 
 /** The `❯ ` selection marker (accent) or a same-width blank. */
 export function selectionMarker(theme: Theme, selected: boolean): string {
-	return selected ? theme.fg("accent", "❯ ") : "  ";
+	return selected ? theme.fg("accent", `${GLYPHS.prompt} `) : "  ";
 }
 
 /**

package/lib/tui/glyphs.ts

@@ -10,14 +10,14 @@
 import { keyText, type Theme } from "@earendil-works/pi-coding-agent";
 
 /**
- * Leading glyphs for status chips and footer segments.
+ * Leading glyphs for status chips, footer segments, and transcript rails.
  *
- * Every glyph is a single terminal column in every profile: narrow or neutral
- * `East_Asian_Width`, never ambiguous, wide, or fullwidth, and never emoji. A
- * CJK-width profile renders an ambiguous glyph two columns wide, which drifts a
- * chip, a rail, or a footer row; `visibleWidth` cannot catch that (it counts an
- * ambiguous character as one column), so `lib/ui.test.ts` checks the width class
- * directly. Add a new glyph only after checking it against `EastAsianWidth.txt`.
+ * A glyph is a single terminal column: never wide, fullwidth, or emoji, which
+ * are two columns in every profile. East-Asian *ambiguous* glyphs are allowed —
+ * a CJK-width profile draws those two columns, so one costs a column there, but
+ * the vocabulary is no longer limited to narrow/neutral characters. Add a glyph
+ * only after checking its `East_Asian_Width` against `EastAsianWidth.txt`;
+ * `lib/tui/glyphs.test.ts` bans wide, fullwidth, and emoji.
  */
 export const GLYPHS = {
 	branch: "⎇",
@@ -34,6 +34,7 @@ export const GLYPHS = {
 	gaugeFull: "▰",
 	gaugeEmpty: "▱",
 	turnRule: "╌",
+	divider: "╎",
 	check: "✓",
 	warn: "!",
 	cross: "✕",
@@ -47,18 +48,16 @@ export const GLYPHS = {
 	boxOff: "◻",
 	prev: "‹",
 	next: "›",
+	prompt: "❯",
 } as const;
 
-/** Columns before a transcript rail body glyph, shared by `goal` and `todo`. */
-export const BODY_INDENT = 2;
-
 /** Columns between a rail body glyph and its text. */
 export const GLYPH_GAP = 1;
 
 /** Padding used to join (`item`) or group (`group`) UI segments. */
 export const SEPARATORS = {
 	item: " · ",
-	group: " │ ",
+	group: ` ${GLYPHS.divider} `,
 } as const;
 
 /** `ctx.ui.setStatus` keys; one per extension that publishes a chip. */

package/lib/tui/indent.ts

@@ -0,0 +1,166 @@
+/**
+ * The transcript indent: how a non-prose block sits under its headline.
+ *
+ * A tool block, a shared notice, and a subagent's quoted output all hang from one
+ * left edge. A block may lead with a headline (a tool's own call line) at the
+ * outer indent; the body sits `BODY_INDENT` further in, directly under it with no
+ * separator line, which is what keeps a tool block compact. The body's first
+ * indent column may instead carry a rail glyph, passed in pre-painted by the
+ * caller so this module stays value-only.
+ *
+ * Value-only: pure functions and constants, no theme.
+ */
+
+import { type Component, stripTerminalSequences, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+/** Columns the body sits in beyond a block's outer indent. */
+export const BODY_INDENT = 2;
+
+/** How an indented block is placed. */
+export interface IndentOptions {
+	/** Columns the body is indented; a headline sits `BODY_INDENT` to its left. */
+	indent?: number;
+	/**
+	 * A pre-painted, one-column rail glyph for the body's first indent column; the
+	 * rest of the indent stays spaces. Ignored below `BODY_INDENT`, where there is
+	 * no column to spare. Default: no rail.
+	 */
+	rail?: string;
+	/**
+	 * Start the rail after the headline's continuation: keep the leading run of
+	 * non-blank body lines plain-indented, up to the first blank line. Set when the
+	 * headline degenerated to the bare subject name (a tool's call line whose path
+	 * moved onto the body), so the rail begins with the result instead of the
+	 * wrapped call. Ignored without a rail. Default false.
+	 */
+	railAfterCall?: boolean;
+	/** Drop leading lines with no visible content. Default false. */
+	trimLeading?: boolean;
+	/** Drop trailing lines with no visible content. Default true. */
+	trimTrailing?: boolean;
+	/**
+	 * Lead with the first non-blank line as the block's headline, at
+	 * `indent - BODY_INDENT`, with the body immediately after it. Default false.
+	 */
+	headline?: boolean;
+	/**
+	 * Suffix appended when a body line is clipped. Default empty: a body is clipped
+	 * silently. The headline always clips with `…`. A notice sets `…` so a
+	 * truncated row reads as truncated.
+	 */
+	bodyClip?: string;
+}
+
+/**
+ * A line with no visible text. Tested after stripping terminal sequences, so a
+ * line that is only spaces carrying a background (a `Box`'s own padding) counts
+ * as blank rather than as content.
+ */
+function isBlank(line: string): boolean {
+	return stripTerminalSequences(line).trim().length === 0;
+}
+
+/** An image-protocol line must pass through unprefixed, or the sequence corrupts. */
+const IMAGE_LINE = /^\u001b(?:P|_G|\]1337;)/;
+
+/** The body indent, clamped so the prefix always leaves at least one column. */
+function clampIndent(indent: number, width: number): number {
+	return Math.max(0, Math.min(Math.floor(indent), Math.max(0, width - 1)));
+}
+
+/**
+ * The body prefix: the rail glyph in the indent's first body column, or plain
+ * spaces. The glyph must be one visible column, so the prefix is exactly `indent`
+ * columns wide; the gap after it is the remaining `BODY_INDENT - 1`.
+ */
+function bodyPrefix(indent: number, rail: string | undefined): string {
+	if (!rail || indent < BODY_INDENT) return " ".repeat(indent);
+	const base = Math.max(0, indent - BODY_INDENT);
+	return `${" ".repeat(base)}${rail}${" ".repeat(indent - base - 1)}`;
+}
+
+/**
+ * Indent each line of an already-rendered block by `indent` columns, clipping
+ * each to `width`. The block should be built at `width - indent` so nothing is
+ * lost to the prefix; the clip is only a safety net. A line carrying an image
+ * protocol sequence is passed through untouched, and trailing lines with no
+ * visible content are dropped (by default). When `headline` is set, the first
+ * non-blank line leads at `indent - BODY_INDENT` and the body follows directly —
+ * no separator line — and its own leading blanks are dropped so a tool's spacing
+ * never leaves a gap under the headline. With `rail` set, the body's first indent
+ * column carries the glyph instead of a space; `railAfterCall` keeps the call's
+ * continuation lines plain, so the rail starts with the result.
+ */
+export function indentBlockLines(body: readonly string[], width: number, options: IndentOptions = {}): string[] {
+	const w = Math.max(1, width);
+	const indent = clampIndent(options.indent ?? 0, w);
+	const prefix = bodyPrefix(indent, options.rail);
+	const plainPrefix = " ".repeat(indent);
+
+	// The headline is the first line with something to say; it leads at the base.
+	let headline: string | undefined;
+	let rest: readonly string[] = body;
+	if (options.headline) {
+		const index = body.findIndex((line) => !IMAGE_LINE.test(line) && !isBlank(line));
+		if (index >= 0) {
+			headline = body[index];
+			rest = body.slice(index + 1);
+		}
+	}
+
+	// A call whose subject moved onto the body keeps those lines unrailed, so the
+	// rail starts with the result rather than under a bare tool name.
+	let railStart = 0;
+	if (options.rail && options.railAfterCall) {
+		while (railStart < rest.length && !isBlank(rest[railStart] ?? "")) railStart++;
+	}
+
+	const lines: string[] = [];
+	const blank: boolean[] = [];
+	for (const [index, line] of rest.entries()) {
+		if (IMAGE_LINE.test(line)) {
+			lines.push(line);
+			blank.push(false);
+			continue;
+		}
+		lines.push(truncateToWidth(`${index < railStart ? plainPrefix : prefix}${line}`, w, options.bodyClip ?? ""));
+		blank.push(isBlank(line));
+	}
+	if (options.trimLeading) {
+		while (blank.length > 0 && blank[0]) {
+			lines.shift();
+			blank.shift();
+		}
+	}
+	if (options.trimTrailing !== false) {
+		while (blank.length > 0 && blank[blank.length - 1]) {
+			lines.pop();
+			blank.pop();
+		}
+	}
+	if (headline !== undefined) {
+		const base = Math.max(0, indent - BODY_INDENT);
+		lines.unshift(truncateToWidth(`${" ".repeat(base)}${headline}`, w, "…"));
+	}
+	return lines;
+}
+
+/**
+ * Render `inner` at the width the indent leaves, so nothing is lost to the
+ * prefix. An absent `inner` renders nothing, so a tool with no output adds no
+ * blank block. The lines are not indented yet; a caller that has to inspect the
+ * block before placing it passes them to `indentBlockLines`.
+ */
+export function bodyLines(inner: Component | undefined, width: number, indent = 0): string[] {
+	if (!inner) return [];
+	const w = Math.max(1, width);
+	const prefixWidth = visibleWidth(bodyPrefix(clampIndent(indent, w), undefined));
+	return inner.render(Math.max(1, w - prefixWidth));
+}
+
+/** Render `inner` at the width the indent leaves, then indent it. */
+export function indentedLines(inner: Component | undefined, width: number, options: IndentOptions = {}): string[] {
+	const w = Math.max(1, width);
+	const indent = clampIndent(options.indent ?? 0, w);
+	return indentBlockLines(bodyLines(inner, w, indent), w, { ...options, indent });
+}

package/lib/tui/index.ts

@@ -7,7 +7,8 @@
  * `chrome.ts` (screen frame, hints, viewport, overlay), `cursor.ts` (list
  * scroll and navigation), `columns.ts` (width math), `rules.ts` (the rule
  * grammar), `rows.ts` (list rows, checkboxes, chips, empty states), `gauge.ts`
- * (the context gauge), and `line-pane.ts` (the scrollable log/match pane).
+ * (the context gauge), `indent.ts` (the transcript block indent), and
+ * `line-pane.ts` (the scrollable log/match pane).
  *
  * Value-only, like every `lib/` module: pure functions, constants, and classes,
  * with no module-level state.
@@ -19,6 +20,7 @@ export * from "./cursor.ts";
 export * from "./gauge.ts";
 export * from "./glyphs.ts";
 export * from "./line-pane.ts";
+export * from "./indent.ts";
 export * from "./rows.ts";
 export * from "./rules.ts";
 export * from "./status-controller.ts";

package/lib/tui/rows.ts

@@ -15,13 +15,20 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { clip, padTo, splitRow } from "./columns.ts";
 import { selectionMarker } from "./cursor.ts";
-import { BODY_INDENT, GLYPHS } from "./glyphs.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
@@ -45,13 +52,14 @@ export interface ListRow {
  * One list row: an optional indent, the selection marker, an optional glyph,
  * the label, and right-aligned trailing meta.
  *
- * The marker column is always reserved, so selected and unselected rows align.
- * The trailing meta is the anchor when the terminal is narrow (see
- * `splitRow`), so a value at the end of the row survives.
+ * 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 = selectionMarker(theme, row.selected === true);
+	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);
@@ -59,6 +67,32 @@ export function listRow(theme: Theme, width: number, row: ListRow): string {
 	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);

package/lib/tui/rules.ts

@@ -33,6 +33,12 @@ export interface CenteredRuleStyle extends RuleStyle {
 	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));
@@ -41,7 +47,7 @@ function widthOf(width: number): number {
 /** 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 ?? "─").repeat(w));
+	return paint(theme, style.fillRole ?? "rule", (style.glyph ?? RULE_GLYPH).repeat(w));
 }
 
 /** The label-first shape a screen or panel title uses. */
@@ -63,14 +69,14 @@ function labelRule(
 	if (!text) return plainRule(theme, w, style);
 	const labelWidth = visibleWidth(text);
 	if (labelWidth + 1 >= w) return plainRule(theme, w, style);
-	const fill = (style.glyph ?? "─").repeat(w - labelWidth - 1);
+	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 ?? "─";
+	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)));

package/lib/tui/tokens.ts

@@ -56,3 +56,17 @@ export const TUI_TOKENS: Readonly<Record<TuiRole, ThemeColor>> = {
 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.9.0",
+  "version": "0.11.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",

package/themes/bytefly-dark.json

@@ -1,12 +1,12 @@
 {
-  "$schema": "https://raw.githubusercontent.com/earendil-works/pi/main/packages/coding-agent/src/modes/interactive/theme/theme-schema.json",
+  "$schema": "https://pi.dev/schemas/theme.schema.json",
   "name": "bytefly-dark",
   "appearance": "dark",
   "vars": {
     "canvas": "#0d1117",
     "canvasSubtle": "#161b22",
     "border": "#6e7681",
-    "borderMuted": "#484f58",
+    "borderMuted": "#5a626b",
     "text": "#c9d1d9",
     "muted": "#8b949e",
     "dim": "#6e7681",
@@ -17,7 +17,6 @@
     "purple": "#bc8cff",
     "pink": "#f778ba",
     "selectionBg": "#17273a",
-    "userBg": "#1e2a44",
     "customBg": "#26233a",
     "successBg": "#12271a",
     "errorBg": "#3d1a21",
@@ -39,10 +38,10 @@
     "thinkingText": "muted",
     "selectedBg": "selectionBg",
     "scrollbarTrack": "borderMuted",
-    "scrollbarThumb": "border",
+    "scrollbarThumb": "muted",
     "searchMatchBg": "searchBg",
     "searchMatchText": "text",
-    "userMessageBg": "userBg",
+    "userMessageBg": "",
     "userMessageText": "text",
     "customMessageBg": "customBg",
     "customMessageText": "muted",
@@ -50,14 +49,14 @@
     "toolPendingBg": "canvasSubtle",
     "toolSuccessBg": "successBg",
     "toolErrorBg": "errorBg",
-    "toolTitle": "text",
+    "toolTitle": "blue",
     "toolOutput": "muted",
-    "mdHeading": "yellow",
+    "mdHeading": "blue",
     "mdLink": "blue",
     "mdLinkUrl": "muted",
     "mdCode": "pink",
     "mdCodeBlock": "text",
-    "mdCodeBlockBorder": "border",
+    "mdCodeBlockBorder": "muted",
     "mdQuote": "muted",
     "mdQuoteBorder": "border",
     "mdHr": "border",