@gavin-hu/my-pi-agent 0.20.0 → 0.22.0

package/lib/tui/glyphs.ts

@@ -8,6 +8,7 @@
  */
 
 import { keyText, type Theme } from "@earendil-works/pi-coding-agent";
+import { paint } from "./tokens.ts";
 
 /**
  * Leading glyphs for status chips, footer segments, and transcript rails.
@@ -29,8 +30,7 @@ export const GLYPHS = {
 	jobsRunning: "▸",
 	jobsFailure: "✗",
 	stopped: "⊘",
-	browse: "◉",
-	board: "⊞",
+	http: "◉",
 	delegation: "↳",
 	wechat: "✆",
 	gaugeFull: "▰",
@@ -51,6 +51,7 @@ export const GLYPHS = {
 	prev: "‹",
 	next: "›",
 	update: "↑",
+	autoMode: "▶",
 	prompt: "❯",
 } as const;
 
@@ -70,8 +71,7 @@ export const STATUS_KEYS = {
 	jobsFailure: "jobs-failure",
 	watch: "watch",
 	watchMatches: "watch-matches",
-	browse: "browse",
-	board: "board",
+	http: "http",
 	rewind: "rewind",
 	agents: "agents",
 	wechat: "wechat",
@@ -84,25 +84,25 @@ export const STATUS_KEYS = {
  */
 export const EXPAND_KEYBINDING = "app.tools.expand";
 
-/** The bound expand key, styled dim, or `""` when the binding is unknown. */
+/** The bound expand key, in the faint role, or `""` when the binding is unknown. */
 export function expandKey(theme: Theme): string {
 	const key = keyText(EXPAND_KEYBINDING);
-	return key ? theme.fg("dim", key) : "";
+	return key ? paint(theme, "faint", key) : "";
 }
 
 /**
- * Pi's key-hint format: the key dim, its description muted. An unbound key
+ * Pi's key-hint format: the key faint, its description meta. An unbound key
  * (`""`) yields `""`, so a hint never prints a stray description.
  */
 export function keyHintText(theme: Theme, key: string, description: string): string {
-	return key ? theme.fg("dim", key) + theme.fg("muted", ` ${description}`) : "";
+	return key ? paint(theme, "faint", key) + paint(theme, "meta", ` ${description}`) : "";
 }
 
 /**
- * The built-in-style expand affordance: a muted `(ctrl+o to expand)` with the
- * key in dim. Degrades to `(to expand)` when the binding is unknown.
+ * The built-in-style expand affordance: a meta `(ctrl+o to expand)` with the
+ * key in faint. Degrades to `(to expand)` when the binding is unknown.
  */
 export function expandHint(theme: Theme): string {
 	const hint = keyHintText(theme, keyText(EXPAND_KEYBINDING), "to expand)");
-	return theme.fg("muted", "(") + (hint || theme.fg("muted", "to expand)"));
+	return paint(theme, "meta", "(") + (hint || paint(theme, "meta", "to expand)"));
 }

package/lib/tui/render-cache.ts

@@ -31,6 +31,8 @@
 export class RenderCache {
 	private width: number | null = null;
 	private source: readonly string[] | undefined;
+	/** The last key's parts, for the value-keyed form; `undefined` until one is set. */
+	private parts: readonly unknown[] | undefined;
 	private cached: string[] = [];
 
 	/**
@@ -47,9 +49,36 @@ export class RenderCache {
 		return this.cached;
 	}
 
+	/**
+	 * The lines from `build()`, for a component that derives them from a key.
+	 *
+	 * The identity form above chains on the inner component's array. A component with no
+	 * inner component has nothing to chain on — a header's view and a footer's snapshot are
+	 * rebuilt every frame — so it describes its inputs instead, and this compares them:
+	 * primitives by value, and anything else by identity (a theme object is the case that
+	 * matters, since its strings are what get cached).
+	 *
+	 * The key is only as complete as the caller makes it: a part left out is a frame that
+	 * shows stale lines. Positions are compared, so an undefined part is a real one.
+	 */
+	keyed(parts: readonly unknown[], build: () => string[]): string[] {
+		const previous = this.parts;
+		if (
+			previous !== undefined &&
+			previous.length === parts.length &&
+			previous.every((part, at) => part === parts[at])
+		) {
+			return this.cached;
+		}
+		this.cached = build();
+		this.parts = [...parts];
+		return this.cached;
+	}
+
 	/** Drop the memo; call from the component's `invalidate()`. */
 	invalidate(): void {
 		this.width = null;
+		this.parts = undefined;
 		this.cached = [];
 	}
 }

package/lib/tui/tokens.ts

@@ -5,9 +5,16 @@
  * 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.
+ * closed, so the kit only ever references it, never a literal color — and this
+ * table is the one place it does, tool vocabulary included, so a remap here
+ * reaches every surface the kit and the renderers draw.
  *
  * Value-only: one frozen lookup table and pure helpers.
+ *
+ * Two vocabularies live here and they do not mix: `ok`/`warn`/`bad` are verdicts —
+ * they say how something *is* — and `hue1`…`hue5` are categories, which say only
+ * "this is not those". A surface that shows hues keeps its verdicts to the places
+ * that earn one, because a reader cannot tell a borrowed green from a judgement.
  */
 
 import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
@@ -35,7 +42,24 @@ export type TuiRole =
 	/** Error. */
 	| "bad"
 	/** Neutral notice. */
-	| "info";
+	| "info"
+	/**
+	 * A category hue: identity, never a verdict.
+	 *
+	 * Blue, purple, pink, green, and amber are the shipped palette's five colourful
+	 * tokens, so a categorical surface reads as a chart. Green and amber are the same
+	 * tokens `ok` and `warn` resolve to — that is the cost of Pi's closed token set —
+	 * which is why a hue never appears in a slot that also carries a judgement.
+	 */
+	| "hue1"
+	| "hue2"
+	| "hue3"
+	| "hue4"
+	| "hue5"
+	/** A tool call's own name: the transcript block's only accent. */
+	| "toolTitle"
+	/** A tool result's body text. */
+	| "toolOutput";
 
 /** Role -> theme color. The single place the kit names a Pi token. */
 export const TUI_TOKENS: Readonly<Record<TuiRole, ThemeColor>> = {
@@ -50,6 +74,13 @@ export const TUI_TOKENS: Readonly<Record<TuiRole, ThemeColor>> = {
 	warn: "warning",
 	bad: "error",
 	info: "muted",
+	hue1: "accent",
+	hue2: "mdListBullet",
+	hue3: "mdCode",
+	hue4: "success",
+	hue5: "warning",
+	toolTitle: "toolTitle",
+	toolOutput: "toolOutput",
 };
 
 /** Paint `text` in a role's color. */

package/lib/tui/tool.ts

@@ -22,6 +22,7 @@ import { type Component, truncateToWidth } from "@earendil-works/pi-tui";
 import { formatDuration, sanitizeLine, stripControlChars } from "../format.ts";
 import { clip, clipMiddle } from "./columns.ts";
 import { expandHint, SEPARATORS } from "./glyphs.ts";
+import { RenderCache } from "./render-cache.ts";
 import { paint } from "./tokens.ts";
 
 /** The parts of a tool result a renderer reads. */
@@ -30,9 +31,9 @@ export interface ToolMessageResult {
 	isError?: boolean;
 }
 
-/** The bold tool name in Pi's tool-title token, the block's only accent. */
+/** The bold tool name in the toolTitle role, the block's only accent. */
 export function toolCallTitle(theme: Theme, name: string): string {
-	return theme.fg("toolTitle", theme.bold(name));
+	return paint(theme, "toolTitle", theme.bold(name));
 }
 
 /**
@@ -223,10 +224,18 @@ export type TailResultInput<Row> =
  * section, or the themed tail with an "earlier" note. The caller owns the row
  * renderer, so the extension's own row grammar — a peer-session tag, a status
  * glyph — stays with its vocabulary.
+ *
+ * `render` runs on every frame Pi draws, for every block in the transcript, and
+ * this block is the shared one behind the board's card, a session's peer list and
+ * a shaped tail — each of which re-derived its rows and clipped every line per
+ * frame before this memo. The lines depend on the input, the theme and the width,
+ * and none of them changes without `setInput`, `invalidate`, or a new width, so
+ * the memo is keyed on the width and dropped by those two calls.
  */
 export class TailResult<Row> implements Component {
 	private input: TailResultInput<Row>;
 	private theme: Theme;
+	private readonly cache = new RenderCache();
 
 	constructor(input: TailResultInput<Row>, theme: Theme) {
 		this.input = input;
@@ -237,12 +246,19 @@ export class TailResult<Row> implements Component {
 	setInput(input: TailResultInput<Row>, theme: Theme): void {
 		this.input = input;
 		this.theme = theme;
+		this.cache.invalidate();
 	}
 
-	invalidate(): void {}
+	invalidate(): void {
+		this.cache.invalidate();
+	}
 
 	render(width: number): string[] {
 		const w = Math.max(1, width);
+		return this.cache.lines(w, undefined, () => this.build(w));
+	}
+
+	private build(w: number): string[] {
 		const lines: string[] = [""];
 		const input = this.input;
 		if (input.kind === "list") {
@@ -259,11 +275,24 @@ export class TailResult<Row> implements Component {
 			return lines;
 		}
 		if (input.earlier > 0) lines.push(clip(earlierHint(this.theme, input.earlier, input.earlierLabel), w));
-		for (const line of input.lines) lines.push(this.theme.fg("toolOutput", clip(line, w)));
+		for (const line of input.lines) lines.push(paint(this.theme, "toolOutput", clip(line, w)));
 		return lines;
 	}
 }
 
+/**
+ * Whether the component the transcript handed back is this kit's tail block.
+ *
+ * `TailResult` carries its row type and `instanceof` erases it. The caller is the
+ * one that knows which rows it drew, so the claim lives here as a guard rather
+ * than as a cast in each extension that reuses its block through
+ * `context.lastComponent` — and a component from another tool can only reach that
+ * check by being this class, which is why the erased type is safe to assert.
+ */
+export function isTailResult<Row>(value: unknown): value is TailResult<Row> {
+	return value instanceof TailResult;
+}
+
 /** The render context fields the elapsed timer needs. */
 export interface ToolRenderClock {
 	/** Pi's per-call render state, opaque here: this module only ever casts it. */

package/lib/web/README.md

@@ -42,6 +42,27 @@ What stays page-side: what a status *says*. `paintStatus` owns the text, its too
 the `bf-status--<tone>` class; the board composes `live · 3m` and appends its own class.
 A shared runtime that also decided the wording would be a second copy of the page's voice.
 
+## One inline Markdown renderer, spliced in
+
+Two served pages read Markdown written by a model or a person: the plan review's document
+and the board's card notes. Both need the same two answers — what an inline token is, and
+which target a link may point at — so `markdown.ts` holds one body of each and exports
+`INLINE_MARKDOWN_JS` for a bundle to splice. The review page's block half
+([`../../extensions/plan/web-markdown.ts`](../../extensions/plan/web-markdown.ts)) calls
+`renderInline` for the text inside a block; the board calls it for each note. A page that
+writes its own is how one of them starts accepting a `javascript:` target the other refuses.
+
+The renderer appends a text node or one of four atoms — `code`, `strong`, `em`, `a` — and
+never parses markup, so the board's rule that a stored field is never `innerHTML` holds with
+Markdown in play. A link is made only when `safeHref` allows the target: `http`, `https`, or
+`mailto`, no credentials, and no protocol-relative or disguised relative target, resolved
+against the page's own URL at call time.
+
+The body is JavaScript on purpose, like the runtime's: no annotation survives into the
+string, and no backtick or `${` may appear in one. It is the inline half only — a card note
+is one sanitized line, so inline is the whole of it, while blocks, tables, and fenced code
+stay the review page's own half.
+
 ## Name a class once, in a table
 
 A page's document is TypeScript and its client is a string inside a template literal, so

package/lib/web/client-runtime.ts

@@ -116,7 +116,33 @@ export function postJson(url: string, payload: unknown): Promise<PostResult> {
 }
 
 /**
- * The runtime, as a bundle receives it: four bodies, in the order a client reads them.
+ * The prefix this page was served under, as the server wrote it on `<html data-base>`.
+ *
+ * A session serves several pages on one origin, so a bundle cannot assume it owns the
+ * root: `""` at the origin's root, `/files` under a mount. The attribute is read every
+ * time rather than cached at load, because a fragment runs in whatever order the bundle
+ * lists it and none of them may depend on another having run first.
+ */
+export function pageBase(): string {
+	// Cast for the same reason as `el`: this project compiles without a DOM lib, and the
+	// page guarantees a document with a root element.
+	const root = (
+		globalThis as unknown as { document: { documentElement: { getAttribute(name: string): string | null } } }
+	).document.documentElement;
+	return root.getAttribute("data-base") ?? "";
+}
+
+/**
+ * {@link pageBase} on its own, for a bundle to splice at its **outermost** scope.
+ *
+ * A page's bundle is a stack of fragments, and a fragment's helper is only visible to the
+ * ones nested inside it — so this one goes where every fragment can reach it, which is not
+ * where the rest of the runtime goes.
+ */
+export const CLIENT_BASE_JS = String(pageBase);
+
+/**
+ * The runtime, as a bundle receives it: the four bodies, in the order a client reads them.
  *
  * `test` holds each to its module body and proves the string is safe to splice.
  */

package/lib/web/components.ts

@@ -28,6 +28,8 @@ export const WEB_COMPONENTS_CSS = `.bf-brand{display:inline-flex;align-items:cen
 .bf-btn:disabled{opacity:.5;cursor:default}
 .bf-chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
 .bf-chip--accent{color:var(--accent);border:1px solid currentColor;border-radius:var(--radius-pill);padding:2px 10px}
+/* A field the card carries rather than a state it is in: the same pill, worn quietly. */
+.bf-chip--outline{color:var(--muted);border:1px solid currentColor;border-radius:var(--radius-pill);padding:2px 10px}
 .bf-chip--success{color:var(--success)}
 .bf-chip--warn{color:var(--warn)}
 .bf-chip--danger{color:var(--danger)}
@@ -35,7 +37,7 @@ export const WEB_COMPONENTS_CSS = `.bf-brand{display:inline-flex;align-items:cen
 .bf-segmented__item{appearance:none;border:0;border-radius:0;background:transparent;color:var(--text);font:var(--fs-xs) var(--font-ui);padding:5px var(--space-3);cursor:pointer}
 .bf-segmented__item+.bf-segmented__item{border-left:1px solid var(--border)}
 .bf-segmented__item:hover{color:var(--accent);text-decoration:none}
-.bf-segmented__item[aria-current="page"],.bf-segmented__item[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
+.bf-segmented__item[aria-current="page"],.bf-segmented__item[aria-selected="true"],.bf-segmented__item[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
 .bf-input{border:0;background:transparent;color:var(--text);font:var(--fs-sm) var(--font-mono);width:100%;outline:none}
 .bf-field{display:flex;align-items:center;gap:var(--space-1);background:var(--canvas);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-1) var(--space-2);color:var(--muted);font-size:var(--fs-sm)}
 /* The field is the control: ringing the input inside it drew a border within a border. */
@@ -73,6 +75,8 @@ export const WEB_COMPONENTS_CSS = `.bf-brand{display:inline-flex;align-items:cen
 .bf-keys{display:grid;grid-template-columns:auto 1fr;gap:8px var(--space-4);margin:0;padding:var(--space-4)}
 .bf-keys dt{white-space:nowrap}
 .bf-keys dd{margin:0;color:var(--muted);font-size:var(--fs-sm)}
+/* One line under the table, for a rule that is not a key: what an open dialog keeps. */
+.bf-keys__note{margin:0;padding:0 var(--space-4) var(--space-4);color:var(--muted);font-size:var(--fs-xs)}
 .bf-kbd{display:inline-block;min-width:20px;padding:1px 6px;border:1px solid var(--border);border-bottom-width:2px;border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:var(--fs-xs) var(--font-mono);text-align:center}
 .bf-tree{font-family:var(--font-mono);font-size:var(--fs-sm);overflow-x:auto}
 .bf-tree ul{list-style:none;margin:0;padding-left:14px}

package/lib/web/index.ts

@@ -8,6 +8,7 @@ export * from "./base.ts";
 export * from "./client-runtime.ts";
 export * from "./components.ts";
 export * from "./layout.ts";
+export * from "./markdown.ts";
 export * from "./markup.ts";
 export * from "./names.ts";
 export * from "./runtime.ts";

package/lib/web/markdown.ts

@@ -0,0 +1,83 @@
+/**
+ * Inline Markdown, for every served page: one renderer and one link policy.
+ *
+ * Two pages read Markdown written by a model or a person — the plan review's document and
+ * the board's card notes — and each needs the same two answers: what an inline token is,
+ * and which target a link may point at. A second copy of either is how one page starts
+ * accepting a `javascript:` target the other refuses, so the body lives here and each page
+ * splices it into its own bundle.
+ *
+ * The renderer appends **text nodes and four elements only** — `code`, `strong`, `em`, and
+ * `a` — so plan, comment, and note text never becomes markup and no page needs `innerHTML`.
+ * A link is made only for a target `safeHref` allows: `http`, `https`, or `mailto`, no
+ * credentials, and no protocol-relative or disguised relative target.
+ *
+ * It is the inline half only. A card note is one sanitized line, so inline is the whole of
+ * it; the review page's blocks, tables, fenced code, and lists are its own half, and they
+ * call `renderInline` for the text inside each.
+ *
+ * The body is JavaScript: no annotation survives into a string, and no backtick or `${`
+ * may appear in one. `base` is the page's own URL at call time, which is what makes a
+ * target that only looks relative land as text.
+ */
+export const INLINE_MARKDOWN_JS = String.raw`  // A link is rendered only for an http(s) or mailto target. Resolving against
+  // the review origin is what catches a target that only looks relative: the
+  // URL parser strips a tab or newline, so "/\t/evil.com" is cross-origin once
+  // it is parsed, and a disguised target must stay text.
+  function safeHref(url, base) {
+    var trimmed = String(url).trim();
+    if (!trimmed || /^\/\//.test(trimmed)) return null;
+    var resolved;
+    try { resolved = new URL(trimmed, base); } catch (error) { return null; }
+    if (resolved.protocol === "mailto:") return trimmed;
+    if (resolved.protocol !== "http:" && resolved.protocol !== "https:") return null;
+    if (resolved.username || resolved.password) return null;
+    if (resolved.origin === new URL(base).origin) return resolved.href;
+    return /^https?:\/\//i.test(trimmed) ? resolved.href : null;
+  }
+
+  // Inline token order matters: code, emphasis, and links are matched before a
+  // bare URL, so a URL inside a link target or a code span is never re-split.
+  var INLINE = /(\x60[^\x60]+\x60|\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\([^)]+\)|(?:https?:\/\/|www\.)[^\s<]+)/g;
+
+  function renderInline(container, text) {
+    String(text).split(INLINE).forEach(function (part) {
+      if (!part) return;
+      var match;
+      if ((match = /^\x60([^\x60]+)\x60$/.exec(part))) {
+        var code = el("code"); code.textContent = match[1]; container.appendChild(code); return;
+      }
+      if ((match = /^\*\*([^*]+)\*\*$/.exec(part))) {
+        var strong = el("strong"); strong.textContent = match[1]; container.appendChild(strong); return;
+      }
+      if ((match = /^\*([^*]+)\*$/.exec(part))) {
+        var em = el("em"); em.textContent = match[1]; container.appendChild(em); return;
+      }
+      if ((match = /^\[([^\]]+)\]\(([^)]+)\)$/.exec(part))) {
+        var href = safeHref(match[2], location.href);
+        if (!href) { container.appendChild(document.createTextNode(part)); return; }
+        var link = el("a"); link.textContent = match[1]; link.href = href; link.target = "_blank"; link.rel = "noreferrer noopener";
+        container.appendChild(link); return;
+      }
+      // GFM extended autolink: a bare http(s) or www. URL in running text.
+      if ((match = /^(?:https?:\/\/|www\.)[^\s<]+$/.exec(part))) {
+        var url = match[0].replace(/[.,;:!?*_~]+$/, "");
+        while (url.charAt(url.length - 1) === ")" && (url.match(/\(/g) || []).length < (url.match(/\)/g) || []).length) {
+          url = url.slice(0, -1).replace(/[.,;:!?*_~]+$/, "");
+        }
+        var dot = url.indexOf(".");
+        var target = /^www\./i.test(url) ? "http://" + url : url;
+        var safe = dot > 0 && /\.[^./]/.test(url.slice(dot)) ? safeHref(target, location.href) : null;
+        if (safe) {
+          var auto = el("a");
+          auto.textContent = url;
+          auto.href = safe;
+          auto.target = "_blank";
+          auto.rel = "noreferrer noopener";
+          container.appendChild(auto);
+          return;
+        }
+      }
+      container.appendChild(document.createTextNode(part));
+    });
+  }`;

package/lib/web/markup.ts

@@ -16,6 +16,12 @@ export interface DocHeadOptions {
 	title: string;
 	/** Trusted CSS assembled by the page. */
 	css: string;
+	/**
+	 * The mount prefix this page answers under, e.g. `/files`; `""` for the origin's
+	 * root. A page's scripts and links are emitted under it, because a session serves
+	 * several pages on one origin.
+	 */
+	base?: string;
 }
 
 /**
@@ -41,6 +47,17 @@ export function tabTitle(product: string, subject?: string, count?: string): str
  */
 export const TAB_TITLE_JS = String(tabTitle);
 
+/**
+ * The `data-base` attribute a page's `<html>` carries, which its own bundle reads
+ * (`base()` in `client-runtime.ts`) to build every URL it emits.
+ *
+ * `""` — the origin's root — writes nothing at all, so a page served alone is markup
+ * without a mount to name.
+ */
+export function baseAttribute(base: string): string {
+	return base === "" ? "" : ` data-base="${escapeHtml(base)}"`;
+}
+
 /**
  * The shared document head: charset, viewport, colour scheme, title, the page
  * CSS, and the pre-paint theme bootstrap. The body and its scripts stay with
@@ -53,7 +70,7 @@ export function docHead(options: DocHeadOptions): string {
 <title>${escapeHtml(options.title)}</title>
 ${markIcon()}
 <style>${options.css}</style>
-<script src="${THEME_JS_PATH}"></script>`;
+<script src="${options.base ?? ""}${THEME_JS_PATH}"></script>`;
 }
 
 /**
@@ -202,7 +219,7 @@ export interface KeyHint {
  * for the sheet, `#keys-close` for its own close button — and the trigger button
  * is the page's own concern, since the two pages name it differently.
  */
-export function keysSheet(rows: readonly KeyHint[]): string {
+export function keysSheet(rows: readonly KeyHint[], note?: string): string {
 	const kbd = (key: string): string => `<kbd class="bf-kbd">${escapeHtml(key)}</kbd>`;
 	const body = rows
 		.map((row) => {
@@ -214,6 +231,7 @@ export function keysSheet(rows: readonly KeyHint[]): string {
 <div class="bf-dialog__panel" role="dialog" aria-modal="true" aria-labelledby="keys-title">
 <div class="bf-dialog__head"><h2 id="keys-title">Keyboard shortcuts</h2><span class="bf-spacer"></span><button type="button" class="bf-btn" id="keys-close">Close</button></div>
 <dl class="bf-keys">${body}</dl>
+${note === undefined ? "" : `<p class="bf-keys__note">${escapeHtml(note)}</p>`}
 </div>
 </div>`;
 }

package/lib/web/runtime.ts

@@ -156,20 +156,19 @@ export function dialogScript(options: DialogOptions): string {
   });
 
   // Tab cycles inside the dialog: leaving it would put focus behind the scrim,
-  // where the page looks inert but is not.
+  // where the page looks inert but is not. Every Tab is redirected rather than only
+  // the two that wrap, because the panel is the first node and the *container* of the
+  // others: a browser's own backwards step from the last node has no sibling to land
+  // on and walks out of the dialog instead.
   dialog.addEventListener("keydown", function (event) {
     if (event.key !== "Tab") return;
     var nodes = focusables();
     if (nodes.length === 0) { event.preventDefault(); return; }
-    var first = nodes[0];
-    var last = nodes[nodes.length - 1];
-    if (event.shiftKey && document.activeElement === first) {
-      event.preventDefault();
-      last.focus();
-    } else if (!event.shiftKey && document.activeElement === last) {
-      event.preventDefault();
-      first.focus();
-    }
+    var at = nodes.indexOf(document.activeElement);
+    var step = event.shiftKey ? -1 : 1;
+    var next = at === -1 ? (event.shiftKey ? nodes.length - 1 : 0) : (at + step + nodes.length) % nodes.length;
+    event.preventDefault();
+    nodes[next].focus();
   });
 
   // Capture, so Esc closes the dialog before a page handler peels another layer.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gavin-hu/my-pi-agent",
-  "version": "0.20.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, file-read, check, memory, context, session-bus, board, team, wechat, and bytefly.",
+  "version": "0.22.0",
+  "description": "Personal Pi customizations, packaged as a Pi package: worktree isolation and rewind snapshots, question, todo, goal, plan, serve, subagent, job, watch, web-access, file-browse, file-open, file-read, check, memory, context, session-bus, board, team, wechat, and bytefly.",
   "keywords": [
     "pi-package",
     "pi",
@@ -84,6 +84,11 @@
     "lib/**",
     "skills/**",
     "themes/**",
+    "assets/screens/board.png",
+    "assets/screens/chrome.png",
+    "assets/screens/file-browse.png",
+    "assets/screens/plan-review.png",
+    "assets/screens/plan.png",
     "!**/*.test.ts"
   ],
   "publishConfig": {
@@ -92,6 +97,7 @@
   },
   "pi": {
     "extensions": [
+      "./extensions/serve/index.ts",
       "./extensions/worktree/index.ts",
       "./extensions/rewind/index.ts",
       "./extensions/question/index.ts",

package/skills/init/SKILL.md

@@ -13,7 +13,7 @@ cannot show; the repository supplies every command, path, and convention that ca
 be verified. Plan mode is the review gate: no write happens before approval.
 
 `/skill:init` loads this skill. If plan mode is not active, call
-`enter_plan_mode` and wait for confirmation. Keep the interview and the plan
+`plan` with action `enter` and wait for confirmation. Keep the interview and the plan
 review in that order; do not write the file early to save a step. A declined plan
 mode ends the skill: stop and explain, rather than writing directly.
 
@@ -29,7 +29,7 @@ mode ends the skill: stop and explain, rather than writing directly.
         └─> draft: new file, exact edits, or an honest no-op
         └─> quality gate
         └─> plan outline with ## Steps and ## Verification
-        └─> write_plan ──> exit_plan_mode
+        └─> plan · write ──> plan · exit
                              ├─ not approved ──> refine the same plan
                              └─ approved ──────> write/edit the target
                                                  └─ read back + quality gate
@@ -147,7 +147,7 @@ evidence, not as a replacement for reading the repository.
 
 ## 5. Plan and review
 
-- Save the proposal with `write_plan` in the documented outline. The plan must
+- Save the proposal with `plan` action `write` in the documented outline. The plan must
   include:
   - `## Goal` — the outcome for the instruction file;
   - `## Context` — the sourced evidence sheet, the effective-file finding, and the
@@ -162,9 +162,9 @@ evidence, not as a replacement for reading the repository.
   - `## Verification` — the project's own check when it declares one (`run_check`,
     or the narrower docs or structure test that guards the instruction file), then
     reading the written file back against the checklist.
-- Call `exit_plan_mode` with the returned path.
+- Call `plan` action `exit` with the returned path.
 - If the user refines or rejects the plan, stay in plan mode, rewrite the same
-  plan file with `write_plan` (`plan_path`), and present it again.
+  plan file with `plan` action `write` (`plan_path`), and present it again.
 - No write to the target may happen before approval.
 
 ## 6. Apply and verify

package/skills/next/SKILL.md

@@ -15,11 +15,9 @@ project wins.
 The conversation decides where the candidates come from (section 3); the request
 decides only what to ask and where to look.
 
-Two sibling skills, where they are installed, own a narrower question: an audit
-of *where to refactor* is `refactor`, and *whether a document still tells the
-truth* — the changelog, the roadmap, the front door — is `project-docs`. When the
-request is already scoped to one of those, name the skill that answers it and
-hand over, instead of returning a generic list.
+A sibling skill, where it is installed, owns a narrower question: an audit of
+*where to refactor* is `refactor`. When the request is already scoped to it, name
+that skill and hand over, instead of returning a generic list.
 
 A next-steps block that the host draws itself is not this skill's output: that is
 the reply's suggested follow-up, a turn-level hint. This skill inspects state, so

package/extensions/board/config.ts

@@ -1,36 +0,0 @@
-/**
- * The board's one setting: the port its page is pinned to.
- *
- * The `board` section of the shared `bytefly.json` (global then project, project
- * wins). `0` — the default — takes one free port for the session and remembers it,
- * which is what a session that never bookmarks its URL wants; a positive value pins
- * the page, so a bookmarked URL survives a restart. A pinned port that is taken
- * fails the start rather than moving the page out from under the bookmark.
- *
- * Pin it in the project document when more than one repository runs a board: a
- * global value is one port for every board on the machine.
- */
-
-import { clampInteger, loadConfigSection } from "../../lib/config.ts";
-
-/** The `board` section. */
-export interface BoardConfig {
-	/** TCP port on `127.0.0.1`; `0` picks one for the session, a positive value pins it. */
-	port: number;
-}
-
-export const DEFAULT_BOARD_CONFIG: BoardConfig = { port: 0 };
-
-/** Validate and clamp a raw config object over the defaults. */
-export function normalizeBoardConfig(
-	raw: Record<string, unknown> | undefined,
-	base: BoardConfig = DEFAULT_BOARD_CONFIG,
-): BoardConfig {
-	if (!raw) return base;
-	return { port: clampInteger(raw.port, base.port, 0, 65_535) };
-}
-
-/** Load the effective config for a working directory. */
-export function loadBoardConfig(cwd: string): BoardConfig {
-	return loadConfigSection(cwd, "board", DEFAULT_BOARD_CONFIG, normalizeBoardConfig);
-}