@earendil-works/pi-coding-agent 0.87.0 → 0.99.0

package/docs/tui.md

@@ -1,961 +1,125 @@
-> pi can create TUI components. Ask it to build one for your use case.
+# Terminal UI
 
-# TUI Components
+`@earendil-works/pi-tui` provides the terminal component system used by Pi. Extensions use it when built-in dialogs, notifications, status text, and widgets are not enough for the interaction they need.
 
-Extensions and custom tools can render custom TUI components for interactive user interfaces. This page covers the component system and available building blocks.
+Start with `ctx.ui` methods from an [extension](extensions.md#interact-with-the-user). Build a custom component only when the UI needs its own rendering, keyboard or mouse input, focus, layout, or lifecycle.
 
-**Source:** [`@earendil-works/pi-tui`](https://github.com/earendil-works/pi/tree/main/packages/tui)
+## Choose an integration point
 
-## Component Interface
+| Need | Use |
+|---|---|
+| Select, confirm, input, or multi-line editor | `ctx.ui.select()`, `confirm()`, `input()`, or `editor()` |
+| Non-blocking feedback | `ctx.ui.notify()` or `setStatus()` |
+| Persistent content near the editor | `ctx.ui.setWidget()` |
+| Replace the header, footer, or editor | The corresponding `ctx.ui` component factory |
+| Temporary interactive screen or overlay | `ctx.ui.custom()` |
+| Custom rendering for a tool or session entry | An extension renderer |
 
-All components implement:
+These APIs receive Pi’s active theme and keybindings where needed. Do not create a second terminal renderer inside an extension.
 
-```typescript
-interface Component {
-  render(width: number): string[];
-  handleInput?(data: string): void;
-  handleMouse?(event: TuiMouseEvent): TuiMouseEventResult | undefined;
-  wantsKeyRelease?: boolean;
-  invalidate(): void;
-}
-```
-
-| Method | Description |
-|--------|-------------|
-| `render(width)` | Return array of strings (one per line). Each line **must not exceed `width`**. |
-| `handleInput?(data)` | Receive keyboard input when component has focus. |
-| `handleMouse?(event)` | Receive normalized pointer input in fullscreen mode. |
-| `wantsKeyRelease?` | If true, component receives key release events (Kitty protocol). Default: false. |
-| `invalidate()` | Clear cached render state. Called on theme changes. |
-
-The TUI appends a full SGR reset and OSC 8 reset at the end of each rendered line. Styles do not carry across lines. If you emit multi-line text with styling, reapply styles per line or use `wrapTextWithAnsi()` so styles are preserved for each wrapped line.
-
-## Focusable Interface (IME Support)
-
-Components that display a text cursor and need IME (Input Method Editor) support should implement the `Focusable` interface:
-
-```typescript
-import { CURSOR_MARKER, type Component, type Focusable } from "@earendil-works/pi-tui";
-
-class MyInput implements Component, Focusable {
-  focused: boolean = false;  // Set by TUI when focus changes
-  
-  render(width: number): string[] {
-    const marker = this.focused ? CURSOR_MARKER : "";
-    // Emit marker right before the fake cursor
-    return [`> ${beforeCursor}${marker}\x1b[7m${atCursor}\x1b[27m${afterCursor}`];
-  }
-}
-```
-
-When a `Focusable` component has focus, TUI:
-1. Sets `focused = true` on the component
-2. Scans rendered output for `CURSOR_MARKER` (a zero-width APC escape sequence)
-3. Positions the hardware terminal cursor at that location
-4. Shows the hardware cursor only when `showHardwareCursor` is enabled
-
-The cursor remains hidden by default. This keeps the fake cursor rendering, while still positioning the hardware cursor for terminals that track IME candidate windows with hidden cursors. Some terminals require a visible hardware cursor for IME positioning; enable it with the renderer's `showHardwareCursor` constructor argument or `setShowHardwareCursor(true)`. Pi also maps `PI_HARDWARE_CURSOR=1` to this setting before it creates its renderer. The `Editor` and `Input` built-in components already implement this interface.
-
-### Container Components with Embedded Inputs
-
-When a container component (dialog, selector, etc.) contains an `Input` or `Editor` child, the container must implement `Focusable` and propagate the focus state to the child. Otherwise, the hardware cursor won't be positioned correctly for IME input.
-
-```typescript
-import { Container, type Focusable, Input } from "@earendil-works/pi-tui";
-
-class SearchDialog extends Container implements Focusable {
-  private searchInput: Input;
-
-  // Focusable implementation - propagate to child input for IME cursor positioning
-  private _focused = false;
-  get focused(): boolean {
-    return this._focused;
-  }
-  set focused(value: boolean) {
-    this._focused = value;
-    this.searchInput.focused = value;
-  }
-
-  constructor() {
-    super();
-    this.searchInput = new Input();
-    this.addChild(this.searchInput);
-  }
-}
-```
-
-Without this propagation, typing with an IME (Chinese, Japanese, Korean, etc.) will show the candidate window in the wrong position on screen.
-
-## Using Components
-
-**In extensions** via `ctx.ui.custom()`:
-
-```typescript
-pi.on("session_start", async (_event, ctx) => {
-  const result = await ctx.ui.custom<string | null>((tui, theme, keybindings, done) =>
-    new MyComponent({
-      theme,
-      keybindings,
-      onChange: () => tui.requestRender(),
-      onSelect: (value) => done(value),
-      onCancel: () => done(null),
-    })
-  );
-});
-```
-
-**In custom tools** via `ctx.ui.custom()`:
+## Understand the component model
 
-```typescript
-async execute(toolCallId, params, signal, onUpdate, ctx) {
-  const result = await ctx.ui.custom<string | null>((tui, theme, keybindings, done) =>
-    new MyComponent({
-      theme,
-      keybindings,
-      onChange: () => tui.requestRender(),
-      onSelect: (value) => done(value),
-      onCancel: () => done(null),
-    })
-  );
-  // Use result...
-}
-```
+A component renders an array of terminal lines for an available width. It can optionally handle keyboard and mouse input, and it must invalidate cached output when its state or theme-dependent content changes.
 
-## Overlays
+Every rendered line must fit within the supplied width. Measure visible terminal columns rather than string length because ANSI escapes, wide characters, emoji, and combining characters change display width.
 
-Overlays render components on top of existing content without clearing the screen. Pass `{ overlay: true }` to `ctx.ui.custom()`:
+Use `visibleWidth()`, `truncateToWidth()`, `sliceByColumn()`, and `wrapTextWithAnsi()` instead of implementing terminal-width handling yourself. Pi resets styling and hyperlinks after every line, so reapply styles on each rendered line.
 
-```typescript
-const result = await ctx.ui.custom<string | null>(
-  (tui, theme, keybindings, done) => new MyDialog({ onClose: done }),
-  { overlay: true }
-);
-```
+After changing component state, invalidate the affected component and call the injected `tui.requestRender()`. The TUI coalesces render requests and updates the terminal.
 
-For positioning and sizing, use `overlayOptions`:
+## Compose built-in components
 
-```typescript
-const result = await ctx.ui.custom<string | null>(
-  (tui, theme, keybindings, done) => new SidePanel({ onClose: done }),
-  {
-    overlay: true,
-    overlayOptions: {
-      // Size: number or percentage string
-      width: "50%",          // 50% of terminal width
-      minWidth: 40,          // minimum 40 columns
-      maxHeight: "80%",      // max 80% of terminal height
-
-      // Position: anchor-based (default: "center")
-      anchor: "right-center", // 9 positions: center, top-left, top-center, etc.
-      offsetX: -2,            // offset from anchor
-      offsetY: 0,
-
-      // Or percentage/absolute positioning
-      row: "25%",            // 25% from top
-      col: 10,               // column 10
-
-      // Margins
-      margin: 2,             // all sides, or { top, right, bottom, left }
-
-      // Responsive: hide on narrow terminals
-      visible: (termWidth, termHeight) => termWidth >= 80,
-    },
-    // Get handle for programmatic focus and visibility control
-    onHandle: (handle) => {
-      // handle.focus() - focus this overlay and bring it to the visual front
-      // handle.unfocus() - release input to normal fallback
-      // handle.unfocus({ target }) - release input to a specific component or null
-      // handle.setHidden(true/false) - toggle visibility
-      // handle.hide() - permanently remove
-    },
-  }
-);
-```
+The package includes components for common layouts and controls:
 
-### Overlay Focus
+- `Text`, `Markdown`, `Image`, and `TruncatedText` render content.
+- `Container`, `VStack`, `HStack`, `Box`, and `Spacer` compose layouts.
+- `Input` and `Editor` accept text.
+- `SelectList` and `SettingsList` implement searchable selection and settings flows.
+- `ScrollView` provides a bounded scrollable viewport.
+- `Loader` and `CancellableLoader` report ongoing work.
+- `MouseRegion` adds pointer behavior around another component.
 
-A focused visible overlay keeps input ownership across temporary non-overlay UI. If an overlay opens another `ctx.ui.custom()` component without `{ overlay: true }`, that replacement UI receives input while it is active; when it closes, the focused overlay can reclaim input.
+Prefer these components over rebuilding selection, scrolling, text editing, or width handling. The extension examples show how to combine them with Pi’s borders and themes.
 
-Use `handle.unfocus()` when a visible overlay should stop owning input and let TUI fall back to another visible capturing overlay or the previous focus target. Use `handle.unfocus({ target })` when a specific component should receive input while the overlay stays visible. Passing `{ target: null }` intentionally leaves no focused component until focus is set again.
+## Handle keyboard input and focus
 
-### Overlay Lifecycle
+Use `matchesKey()` and `Key` for terminal keyboard input. The parser accounts for supported terminal protocols and key modifiers. Extension components should use the injected `KeybindingsManager` for configurable application actions.
 
-Overlay components are disposed when closed. Don't reuse references - create fresh instances:
+A component that displays a text cursor should implement `Focusable` and place `CURSOR_MARKER` immediately before its visual cursor. The TUI uses that marker to position the hardware cursor for input method editors.
 
-```typescript
-// Wrong - stale reference
-let menu: MenuComponent;
-await ctx.ui.custom((_, __, ___, done) => {
-  menu = new MenuComponent(done);
-  return menu;
-}, { overlay: true });
-setActiveComponent(menu);  // Disposed
-
-// Correct - re-call to re-show
-const showMenu = () => ctx.ui.custom((_, __, ___, done) => 
-  new MenuComponent(done), { overlay: true });
-
-await showMenu();  // First show
-await showMenu();  // "Back" = just call again
-```
+Containers that wrap an `Input` or `Editor` must propagate their `focused` state to that child. Without propagation, Chinese, Japanese, Korean, and other IME candidate windows can appear at the wrong screen position.
 
-See [overlay-qa-tests.ts](../examples/extensions/overlay-qa-tests.ts) for comprehensive examples covering anchors, margins, stacking, responsive visibility, and animation.
+Extend Pi’s `CustomEditor` when replacing the main editor. It preserves application shortcuts and agent controls.
 
-## Built-in Components
+Forward keys your editor does not own to the base implementation, and restore the default by clearing the custom editor factory.
 
-Import from `@earendil-works/pi-tui`:
+## Handle mouse input
 
-```typescript
-import { Text, Box, Container, Spacer, Markdown } from "@earendil-works/pi-tui";
-```
+Fullscreen mode routes normalized mouse events to components. A handler can mark an event handled, capture a drag sequence, request focus, or request a render.
 
-### Text
-
-Multi-line text with word wrapping.
-
-```typescript
-const text = new Text(
-  "Hello World",    // content
-  1,                // paddingX (default: 1)
-  1,                // paddingY (default: 1)
-  (s) => bgGray(s)  // optional background function
-);
-text.setText("Updated");
-```
-
-### Box
-
-Container with padding and background color.
-
-```typescript
-const box = new Box(
-  1,                // paddingX
-  1,                // paddingY
-  (s) => bgGray(s)  // background function
-);
-box.addChild(new Text("Content", 0, 0));
-box.setBgFn((s) => bgBlue(s));
-```
+Unhandled wheel events scroll the nearest `ScrollView`. Unhandled primary-button drags remain available for transcript selection. OSC 8 links take precedence over enclosing click regions.
 
-### Container
+Regular mode leaves mouse input to the terminal because the terminal owns scrollback. Design every interaction with a keyboard path even when fullscreen mouse input is available.
 
-Groups child components vertically.
+## Use custom screens and overlays
 
-```typescript
-const container = new Container();
-container.addChild(component1);
-container.addChild(component2);
-container.removeChild(component1);
-```
+`ctx.ui.custom()` temporarily gives one component control of the interactive area and resolves when that component calls the supplied completion callback.
 
-### Spacer
+Pass `overlay: true` to draw above existing content. Overlay options control size, anchors, offsets, margins, and responsive visibility. An overlay handle can change focus or temporarily hide and show the overlay with `setHidden()` while the interaction remains active.
 
-Empty vertical space.
+Focused overlays retain input ownership across ordinary renders. If another component should receive input while an overlay remains visible, explicitly release or redirect focus through the handle.
 
-```typescript
-const spacer = new Spacer(2);  // 2 empty lines
-```
+Treat each custom component instance as belonging to one interaction. Create a new instance when starting that interaction again.
 
-### Markdown
+Finish the interaction with the completion callback supplied to the component factory. It resolves the `ctx.ui.custom()` promise and disposes the component. Do not call `OverlayHandle.hide()` on an overlay created by `ctx.ui.custom()`.
 
-Renders markdown with syntax highlighting.
+See [`overlay-qa-tests.ts`](../examples/extensions/overlay-qa-tests.ts) for positioning, stacking, focus, responsive visibility, and animation behavior.
 
-```typescript
-const md = new Markdown(
-  "# Title\n\nSome **bold** text",
-  1,        // paddingX
-  1,        // paddingY
-  theme     // MarkdownTheme (see below)
-);
-md.setText("Updated markdown");
-```
+## Apply themes correctly
 
-### Image
+Use the theme passed to the extension or component callback. Theme helpers produce ANSI-styled strings for semantic colors such as accent, muted text, success, warnings, errors, tool output, and Markdown.
 
-Renders images in supported terminals (Kitty, iTerm2, Ghostty, WezTerm, Warp).
+Use `theme.style()` to combine foreground and background colors with text attributes:
 
 ```typescript
-const image = new Image(
-  base64Data,   // base64-encoded image
-  "image/png",  // MIME type
-  theme,        // ImageTheme
-  { maxWidthCells: 80, maxHeightCells: 24 }
+return new Text(
+  theme.style("Done!", {
+    fg: "success",
+    bg: "toolSuccessBg",
+    bold: true,
+  }),
+  0,
+  0,
 );
 ```
 
-## Keyboard Input
-
-Use `matchesKey()` for key detection:
-
-```typescript
-import { matchesKey, Key } from "@earendil-works/pi-tui";
-
-handleInput(data: string) {
-  if (matchesKey(data, Key.up)) {
-    this.selectedIndex--;
-  } else if (matchesKey(data, Key.enter)) {
-    this.onSelect?.(this.selectedIndex);
-  } else if (matchesKey(data, Key.escape)) {
-    this.onCancel?.();
-  } else if (matchesKey(data, Key.ctrl("c"))) {
-    // Ctrl+C
-  }
-}
-```
-
-**Key identifiers** (use `Key.*` for autocomplete, or string literals):
-- Basic keys: `Key.enter`, `Key.escape`, `Key.tab`, `Key.space`, `Key.backspace`, `Key.delete`, `Key.home`, `Key.end`
-- Arrow keys: `Key.up`, `Key.down`, `Key.left`, `Key.right`
-- With modifiers: `Key.ctrl("c")`, `Key.shift("tab")`, `Key.alt("left")`, `Key.ctrlShift("p")`
-- String format also works: `"enter"`, `"ctrl+c"`, `"shift+tab"`, `"ctrl+shift+p"`
-
-## Mouse Input
-
-Fullscreen mode routes normalized press, release, click, move, drag, and wheel events to components and overlays. Return `{ handled: true }` to suppress default behavior, `capture: true` to retain drag/release ownership, `focus: true` to request keyboard focus, and `render: true` when a hover or release visibly changes the component. Press, click, drag, and wheel render by default; no-op move/release events do not.
-
-```typescript
-import { MouseRegion } from "@earendil-works/pi-tui";
-
-const clickable = new MouseRegion(content, (event) => {
-  if (event.type !== "click" || event.button !== "left") return undefined;
-  expanded = !expanded;
-  return { handled: true };
-});
-```
-
-Unhandled wheel input scrolls the nearest `ScrollView`; unhandled primary-button drags retain transcript selection. OSC 8 links take precedence over parent click regions. `Input`, `Editor`, `SelectList`, and `SettingsList` include fullscreen mouse behavior. Regular mode does not capture mouse input because the terminal owns its scrollback.
-
-## Line Width
-
-**Critical:** Each line from `render()` must not exceed the `width` parameter.
-
-```typescript
-import { visibleWidth, truncateToWidth } from "@earendil-works/pi-tui";
-
-render(width: number): string[] {
-  // Truncate long lines
-  return [truncateToWidth(this.text, width)];
-}
-```
-
-Utilities:
-- `visibleWidth(str)` - Get display width (ignores ANSI codes)
-- `truncateToWidth(str, width, ellipsis?)` - Truncate with optional ellipsis
-- `wrapTextWithAnsi(str, width)` - Word wrap preserving ANSI codes
-
-## Creating Custom Components
-
-Example: Interactive selector
-
-```typescript
-import {
-  matchesKey, Key,
-  truncateToWidth, visibleWidth
-} from "@earendil-works/pi-tui";
-
-class MySelector {
-  private items: string[];
-  private selected = 0;
-  private cachedWidth?: number;
-  private cachedLines?: string[];
-  
-  public onSelect?: (item: string) => void;
-  public onCancel?: () => void;
-
-  constructor(items: string[]) {
-    this.items = items;
-  }
-
-  handleInput(data: string): void {
-    if (matchesKey(data, Key.up) && this.selected > 0) {
-      this.selected--;
-      this.invalidate();
-    } else if (matchesKey(data, Key.down) && this.selected < this.items.length - 1) {
-      this.selected++;
-      this.invalidate();
-    } else if (matchesKey(data, Key.enter)) {
-      this.onSelect?.(this.items[this.selected]);
-    } else if (matchesKey(data, Key.escape)) {
-      this.onCancel?.();
-    }
-  }
-
-  render(width: number): string[] {
-    if (this.cachedLines && this.cachedWidth === width) {
-      return this.cachedLines;
-    }
-
-    this.cachedLines = this.items.map((item, i) => {
-      const prefix = i === this.selected ? "> " : "  ";
-      return truncateToWidth(prefix + item, width);
-    });
-    this.cachedWidth = width;
-    return this.cachedLines;
-  }
-
-  invalidate(): void {
-    this.cachedWidth = undefined;
-    this.cachedLines = undefined;
-  }
-}
-```
-
-Usage in an extension:
-
-```typescript
-pi.registerCommand("pick", {
-  description: "Pick an item",
-  handler: async (_args, ctx) => {
-    const items = ["Option A", "Option B", "Option C"];
-    const selected = await ctx.ui.custom<string | null>((tui, _theme, _keybindings, done) => {
-      const selector = new MySelector(items);
-      selector.onSelect = done;
-      selector.onCancel = () => done(null);
-
-      return {
-        render: (width) => selector.render(width),
-        handleInput: (data) => {
-          selector.handleInput(data);
-          tui.requestRender();
-        },
-        invalidate: () => selector.invalidate(),
-      };
-    });
-
-    if (selected !== null) {
-      ctx.ui.notify(`Selected: ${selected}`, "info");
-    }
-  }
-});
-```
-
-## Theming
-
-Components accept theme objects for styling.
-
-**In `renderCall`/`renderResult`**, use the `theme` parameter:
-
-```typescript
-renderResult(result, options, theme, context) {
-  // Use theme.fg() for foreground colors
-  return new Text(theme.fg("success", "Done!"), 0, 0);
-  
-  // Use theme.bg() for background colors
-  const styled = theme.bg("toolPendingBg", theme.fg("accent", "text"));
-}
-```
-
-**Foreground colors** (`theme.fg(color, text)`):
-
-| Category | Colors |
-|----------|--------|
-| General | `text`, `accent`, `muted`, `dim`, `searchMatchText` |
-| Status | `success`, `error`, `warning` |
-| Borders | `border`, `borderAccent`, `borderMuted` |
-| Messages | `userMessageText`, `customMessageText`, `customMessageLabel` |
-| Tools | `toolTitle`, `toolOutput` |
-| Diffs | `toolDiffAdded`, `toolDiffRemoved`, `toolDiffContext` |
-| Markdown | `mdHeading`, `mdLink`, `mdLinkUrl`, `mdCode`, `mdCodeBlock`, `mdCodeBlockBorder`, `mdQuote`, `mdQuoteBorder`, `mdHr`, `mdListBullet` |
-| Syntax | `syntaxComment`, `syntaxKeyword`, `syntaxFunction`, `syntaxVariable`, `syntaxString`, `syntaxNumber`, `syntaxType`, `syntaxOperator`, `syntaxPunctuation` |
-| Thinking | `thinkingOff`, `thinkingMinimal`, `thinkingLow`, `thinkingMedium`, `thinkingHigh`, `thinkingXhigh`, `thinkingMax` |
-| Modes | `bashMode` |
-
-**Background colors** (`theme.bg(color, text)`):
-
-`selectedBg`, `searchMatchBg`, `userMessageBg`, `customMessageBg`, `toolPendingBg`, `toolSuccessBg`, `toolErrorBg`
-
-**For Markdown**, use `getMarkdownTheme()`:
-
-```typescript
-import { getMarkdownTheme } from "@earendil-works/pi-coding-agent";
-import { Markdown } from "@earendil-works/pi-tui";
-
-renderResult(result, options, theme, context) {
-  const mdTheme = getMarkdownTheme();
-  return new Markdown(result.details.markdown, 0, 0, mdTheme);
-}
-```
-
-**For custom components**, define your own theme interface:
-
-```typescript
-interface MyTheme {
-  selected: (s: string) => string;
-  normal: (s: string) => string;
-}
-```
-
-## Debug logging
-
-Set `PI_TUI_WRITE_LOG` to capture the raw ANSI stream written to stdout.
-
-```bash
-PI_TUI_WRITE_LOG=/tmp/tui-ansi.log npx tsx packages/tui/test/chat-simple.ts
-```
-
-## Performance
-
-Cache rendered output when possible:
-
-```typescript
-class CachedComponent {
-  private cachedWidth?: number;
-  private cachedLines?: string[];
-
-  render(width: number): string[] {
-    if (this.cachedLines && this.cachedWidth === width) {
-      return this.cachedLines;
-    }
-    // ... compute lines ...
-    this.cachedWidth = width;
-    this.cachedLines = lines;
-    return lines;
-  }
-
-  invalidate(): void {
-    this.cachedWidth = undefined;
-    this.cachedLines = undefined;
-  }
-}
-```
-
-Call `invalidate()` when state changes, then use the injected `tui.requestRender()` to trigger re-render.
-
-## Invalidation and Theme Changes
-
-When the theme changes, the TUI calls `invalidate()` on all components to clear their caches. Components must properly implement `invalidate()` to ensure theme changes take effect.
-
-### The Problem
-
-If a component pre-bakes theme colors into strings (via `theme.fg()`, `theme.bg()`, etc.) and caches them, the cached strings contain ANSI escape codes from the old theme. Simply clearing the render cache isn't enough if the component stores the themed content separately.
-
-**Wrong approach** (theme colors won't update):
-
-```typescript
-class BadComponent extends Container {
-  private content: Text;
-
-  constructor(message: string, theme: Theme) {
-    super();
-    // Pre-baked theme colors stored in Text component
-    this.content = new Text(theme.fg("accent", message), 1, 0);
-    this.addChild(this.content);
-  }
-  // No invalidate override - parent's invalidate only clears
-  // child render caches, not the pre-baked content
-}
-```
-
-### The Solution
-
-Components that build content with theme colors must rebuild that content when `invalidate()` is called:
-
-```typescript
-class GoodComponent extends Container {
-  private message: string;
-  private content: Text;
-
-  constructor(message: string) {
-    super();
-    this.message = message;
-    this.content = new Text("", 1, 0);
-    this.addChild(this.content);
-    this.updateDisplay();
-  }
-
-  private updateDisplay(): void {
-    // Rebuild content with current theme
-    this.content.setText(theme.fg("accent", this.message));
-  }
-
-  override invalidate(): void {
-    super.invalidate();  // Clear child caches
-    this.updateDisplay(); // Rebuild with new theme
-  }
-}
-```
-
-### Pattern: Rebuild on Invalidate
-
-For components with complex content:
-
-```typescript
-class ComplexComponent extends Container {
-  private data: SomeData;
-
-  constructor(data: SomeData) {
-    super();
-    this.data = data;
-    this.rebuild();
-  }
-
-  private rebuild(): void {
-    this.clear();  // Remove all children
-
-    // Build UI with current theme
-    this.addChild(new Text(theme.fg("accent", theme.bold("Title")), 1, 0));
-    this.addChild(new Spacer(1));
-
-    for (const item of this.data.items) {
-      const color = item.active ? "success" : "muted";
-      this.addChild(new Text(theme.fg(color, item.label), 1, 0));
-    }
-  }
-
-  override invalidate(): void {
-    super.invalidate();
-    this.rebuild();
-  }
-}
-```
-
-### When This Matters
-
-This pattern is needed when:
-
-1. **Pre-baking theme colors** - Using `theme.fg()` or `theme.bg()` to create styled strings stored in child components
-2. **Syntax highlighting** - Using `highlightCode()` which applies theme-based syntax colors
-3. **Complex layouts** - Building child component trees that embed theme colors
-
-This pattern is NOT needed when:
-
-1. **Using theme callbacks** - Passing functions like `(text) => theme.fg("accent", text)` that are called during render
-2. **Simple containers** - Just grouping other components without adding themed content
-3. **Stateless render** - Computing themed output fresh in every `render()` call (no caching)
-
-## Common Patterns
-
-These patterns cover the most common UI needs in extensions. **Copy these patterns instead of building from scratch.**
-
-### Pattern 1: Selection Dialog (SelectList)
-
-For letting users pick from a list of options. Use `SelectList` from `@earendil-works/pi-tui` with `DynamicBorder` for framing.
-
-```typescript
-import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
-import { DynamicBorder } from "@earendil-works/pi-coding-agent";
-import { Container, type SelectItem, SelectList, Text } from "@earendil-works/pi-tui";
-
-pi.registerCommand("pick", {
-  handler: async (_args, ctx) => {
-    const items: SelectItem[] = [
-      { value: "opt1", label: "Option 1", description: "First option" },
-      { value: "opt2", label: "Option 2", description: "Second option" },
-      { value: "opt3", label: "Option 3" },  // description is optional
-    ];
-
-    const result = await ctx.ui.custom<string | null>((tui, theme, _kb, done) => {
-      const container = new Container();
-
-      // Top border
-      container.addChild(new DynamicBorder((s: string) => theme.fg("accent", s)));
-
-      // Title
-      container.addChild(new Text(theme.fg("accent", theme.bold("Pick an Option")), 1, 0));
-
-      // SelectList with theme
-      const selectList = new SelectList(items, Math.min(items.length, 10), {
-        selectedPrefix: (t) => theme.fg("accent", t),
-        selectedText: (t) => theme.fg("accent", t),
-        description: (t) => theme.fg("muted", t),
-        scrollInfo: (t) => theme.fg("dim", t),
-        noMatch: (t) => theme.fg("warning", t),
-      });
-      selectList.onSelect = (item) => done(item.value);
-      selectList.onCancel = () => done(null);
-      container.addChild(selectList);
-
-      // Help text
-      container.addChild(new Text(theme.fg("dim", "↑↓ navigate • enter select • esc cancel"), 1, 0));
-
-      // Bottom border
-      container.addChild(new DynamicBorder((s: string) => theme.fg("accent", s)));
-
-      return {
-        render: (w) => container.render(w),
-        invalidate: () => container.invalidate(),
-        handleInput: (data) => { selectList.handleInput(data); tui.requestRender(); },
-      };
-    });
-
-    if (result) {
-      ctx.ui.notify(`Selected: ${result}`, "info");
-    }
-  },
-});
-```
-
-**Examples:** [preset.ts](../examples/extensions/preset.ts), [tools.ts](../examples/extensions/tools.ts)
-
-### Pattern 2: Async Operation with Cancel (BorderedLoader)
-
-For operations that take time and should be cancellable. `BorderedLoader` shows a spinner and handles escape to cancel.
-
-```typescript
-import { BorderedLoader } from "@earendil-works/pi-coding-agent";
-
-pi.registerCommand("fetch", {
-  handler: async (_args, ctx) => {
-    const result = await ctx.ui.custom<string | null>((tui, theme, _kb, done) => {
-      const loader = new BorderedLoader(tui, theme, "Fetching data...");
-      loader.onAbort = () => done(null);
-
-      // Do async work
-      fetchData(loader.signal)
-        .then((data) => done(data))
-        .catch(() => done(null));
-
-      return loader;
-    });
-
-    if (result === null) {
-      ctx.ui.notify("Cancelled", "info");
-    } else {
-      ctx.ui.setEditorText(result);
-    }
-  },
-});
-```
-
-**Examples:** [qna.ts](../examples/extensions/qna.ts), [handoff.ts](../examples/extensions/handoff.ts)
-
-### Pattern 3: Settings/Toggles (SettingsList)
-
-For toggling multiple settings. Use `SettingsList` from `@earendil-works/pi-tui` with `getSettingsListTheme()`.
-
-```typescript
-import { getSettingsListTheme } from "@earendil-works/pi-coding-agent";
-import { Container, type SettingItem, SettingsList, Text } from "@earendil-works/pi-tui";
-
-pi.registerCommand("settings", {
-  handler: async (_args, ctx) => {
-    const items: SettingItem[] = [
-      { id: "verbose", label: "Verbose mode", currentValue: "off", values: ["on", "off"] },
-      { id: "color", label: "Color output", currentValue: "on", values: ["on", "off"] },
-    ];
-
-    await ctx.ui.custom((_tui, theme, _kb, done) => {
-      const container = new Container();
-      container.addChild(new Text(theme.fg("accent", theme.bold("Settings")), 1, 1));
-
-      const settingsList = new SettingsList(
-        items,
-        Math.min(items.length + 2, 15),
-        getSettingsListTheme(),
-        (id, newValue) => {
-          // Handle value change
-          ctx.ui.notify(`${id} = ${newValue}`, "info");
-        },
-        () => done(undefined),  // On close
-        { enableSearch: true }, // Optional: enable fuzzy search by label
-      );
-      container.addChild(settingsList);
-
-      return {
-        render: (w) => container.render(w),
-        invalidate: () => container.invalidate(),
-        handleInput: (data) => settingsList.handleInput?.(data),
-      };
-    });
-  },
-});
-```
-
-**Examples:** [tools.ts](../examples/extensions/tools.ts)
-
-### Pattern 4: Persistent Status Indicator
-
-Show status in the footer that persists across renders. Good for mode indicators.
-
-```typescript
-// Set status (shown in footer)
-ctx.ui.setStatus("my-ext", ctx.ui.theme.fg("accent", "● active"));
-
-// Clear status
-ctx.ui.setStatus("my-ext", undefined);
-```
-
-**Examples:** [status-line.ts](../examples/extensions/status-line.ts), [plan-mode/index.ts](../examples/extensions/plan-mode/index.ts), [preset.ts](../examples/extensions/preset.ts)
-
-### Pattern 4b: Working Indicator Customization
-
-Customize the inline working indicator shown while pi is streaming a response.
-
-```typescript
-// Static indicator
-ctx.ui.setWorkingIndicator({ frames: [ctx.ui.theme.fg("accent", "●")] });
-
-// Custom animated indicator
-ctx.ui.setWorkingIndicator({
-  frames: [
-    ctx.ui.theme.fg("dim", "·"),
-    ctx.ui.theme.fg("muted", "•"),
-    ctx.ui.theme.fg("accent", "●"),
-    ctx.ui.theme.fg("muted", "•"),
-  ],
-  intervalMs: 120,
-});
-
-// Hide the indicator entirely
-ctx.ui.setWorkingIndicator({ frames: [] });
-
-// Restore pi's default spinner
-ctx.ui.setWorkingIndicator();
-```
-
-This only affects the normal streaming working indicator. Compaction and retry loaders keep their built-in styling. Custom frames are rendered verbatim, so extensions must add their own colors when needed.
-
-**Examples:** [working-indicator.ts](../examples/extensions/working-indicator.ts)
-
-### Pattern 5: Widgets Above/Below Editor
-
-Show persistent content above or below the input editor. Good for todo lists, progress.
-
-```typescript
-// Simple string array (above editor by default)
-ctx.ui.setWidget("my-widget", ["Line 1", "Line 2"]);
-
-// Render below the editor
-ctx.ui.setWidget("my-widget", ["Line 1", "Line 2"], { placement: "belowEditor" });
-
-// Or with theme
-ctx.ui.setWidget("my-widget", (_tui, theme) => {
-  const lines = items.map((item, i) =>
-    item.done
-      ? theme.fg("success", "✓ ") + theme.fg("muted", item.text)
-      : theme.fg("dim", "○ ") + item.text
-  );
-  return {
-    render: () => lines,
-    invalidate: () => {},
-  };
-});
-
-// Clear
-ctx.ui.setWidget("my-widget", undefined);
-```
-
-**Examples:** [plan-mode/index.ts](../examples/extensions/plan-mode/index.ts)
+A style color can be a semantic theme token or a concrete `Color`. Foreground tokens are accepted as `fg` and background tokens as `bg`; to use a token's color in the other position, pass its concrete color, for example `{ fg: theme.colors.userMessageBg }`. Access concrete colors through `theme.colors` and use utilities such as `mixColors()` from `@earendil-works/pi-tui` when color math is needed. Tokens that a theme sets to the terminal default render with the terminal's own color; `theme.colors` reports the color the terminal announced for them, or a guess when it did not. Use `theme.appearance` (`"dark"` or `"light"`) to decide, for example, whether to lighten or darken a color. Pi converts the result to truecolor or 256-color output based on terminal capabilities. Theme tokens are converted once per theme; compute concrete colors outside the render path when possible.
 
-### Pattern 6: Custom Footer
-
-Replace the footer. `footerData` exposes data not otherwise accessible to extensions.
-
-```typescript
-ctx.ui.setFooter((tui, theme, footerData) => ({
-  invalidate() {},
-  render(width: number): string[] {
-    // footerData.getGitBranch(): string | null
-    // footerData.getExtensionStatuses(): ReadonlyMap<string, string>
-    return [`${ctx.model?.id} (${footerData.getGitBranch() || "no git"})`];
-  },
-  dispose: footerData.onBranchChange(() => tui.requestRender()), // reactive
-}));
-
-ctx.ui.setFooter(undefined); // restore default
-```
-
-Token stats available via `ctx.sessionManager.getBranch()` and `ctx.model`.
-
-**Examples:** [custom-footer.ts](../examples/extensions/custom-footer.ts)
-
-### Pattern 7: Custom Editor (vim mode, etc.)
-
-Replace the main input editor with a custom implementation. Useful for modal editing (vim), different keybindings (emacs), or specialized input handling.
-
-```typescript
-import { CustomEditor, type ExtensionAPI } from "@earendil-works/pi-coding-agent";
-import { matchesKey, truncateToWidth } from "@earendil-works/pi-tui";
-
-type Mode = "normal" | "insert";
-
-class VimEditor extends CustomEditor {
-  private mode: Mode = "insert";
-
-  handleInput(data: string): void {
-    // Escape: switch to normal mode, or pass through for app handling
-    if (matchesKey(data, "escape")) {
-      if (this.mode === "insert") {
-        this.mode = "normal";
-        return;
-      }
-      // In normal mode, escape aborts agent (handled by CustomEditor)
-      super.handleInput(data);
-      return;
-    }
-
-    // Insert mode: pass everything to CustomEditor
-    if (this.mode === "insert") {
-      super.handleInput(data);
-      return;
-    }
-
-    // Normal mode: vim-style navigation
-    switch (data) {
-      case "i": this.mode = "insert"; return;
-      case "h": super.handleInput("\x1b[D"); return; // Left
-      case "j": super.handleInput("\x1b[B"); return; // Down
-      case "k": super.handleInput("\x1b[A"); return; // Up
-      case "l": super.handleInput("\x1b[C"); return; // Right
-    }
-    // Pass unhandled keys to super (ctrl+c, etc.), but filter printable chars
-    if (data.length === 1 && data.charCodeAt(0) >= 32) return;
-    super.handleInput(data);
-  }
-
-  render(width: number): string[] {
-    const lines = super.render(width);
-    // Add mode indicator to bottom border (use truncateToWidth for ANSI-safe truncation)
-    if (lines.length > 0) {
-      const label = this.mode === "normal" ? " NORMAL " : " INSERT ";
-      const lastLine = lines[lines.length - 1]!;
-      // Pass "" as ellipsis to avoid adding "..." when truncating
-      lines[lines.length - 1] = truncateToWidth(lastLine, width - label.length, "") + label;
-    }
-    return lines;
-  }
-}
-
-export default function (pi: ExtensionAPI) {
-  pi.on("session_start", (_event, ctx) => {
-    // Factory receives the TUI, theme, and keybindings from the app
-    ctx.ui.setEditorComponent((tui, theme, keybindings) =>
-      new VimEditor(tui, theme, keybindings)
-    );
-  });
-}
-```
+The existing `theme.fg()` and `theme.bg()` helpers remain available for applying one semantic color.
 
-**Key points:**
+Do not permanently store strings with theme colors unless `invalidate()` rebuilds them. A theme change clears render caches, but it cannot remove old ANSI colors embedded in application state.
 
-- **Extend `CustomEditor`** (not base `Editor`) to get app keybindings (escape to abort, ctrl+d to exit, model switching, etc.)
-- **Call `super.handleInput(data)`** for keys you don't handle
-- **Status spinners**: custom editors keep standalone status rows by default. Pass `{ embedWorkingStatus: true }` as the fourth `CustomEditor` constructor argument to embed working, compaction, branch summarization, and retry spinners in the editor border instead.
-- **Factory pattern**: `setEditorComponent` receives a factory function that gets `tui`, `theme`, and `keybindings`
-- **Pass `undefined`** to restore the default editor: `ctx.ui.setEditorComponent(undefined)`
+Theme callbacks evaluated during rendering do not need special rebuilding. Stateless components can also calculate themed output on every render.
 
-**Examples:** [modal-editor.ts](../examples/extensions/modal-editor.ts)
+Use [Themes](themes.md) to create terminal palettes. Use Pi’s `getMarkdownTheme()` when rendering Markdown that should match the active application theme.
 
-## Key Rules
+## Keep rendering responsive
 
-1. **Always use theme from callback** - Don't import theme directly. Use `theme` from the `ctx.ui.custom((tui, theme, keybindings, done) => ...)` callback.
+Rendering runs on the interactive path. Cache expensive layout and highlighting work by width and content, then clear that cache from `invalidate()`.
 
-2. **Always type DynamicBorder color param** - Write `(s: string) => theme.fg("accent", s)`, not `(s) => theme.fg("accent", s)`.
+Keep the default view compact and reveal detail through expansion or a dedicated screen. For custom tool rendering, handle partial results and reuse the previous component when it can be updated safely.
 
-3. **Call tui.requestRender() after state changes** - In `handleInput`, call `tui.requestRender()` after updating state.
+Use `PI_TUI_WRITE_LOG` to capture the raw ANSI stream when diagnosing rendering problems. Test narrow widths, wide characters, resize events, theme changes, focus transitions, and both regular and fullscreen modes.
 
-4. **Return the three-method object** - Custom components need `{ render, invalidate, handleInput }`.
+## Examples and source
 
-5. **Use existing components** - `SelectList`, `SettingsList`, `BorderedLoader` cover 90% of cases. Don't rebuild them.
+The checked extension examples cover the main patterns:
 
-## Examples
+- [`preset.ts`](../examples/extensions/preset.ts) and [`tools.ts`](../examples/extensions/tools.ts) use selection and settings lists.
+- [`qna.ts`](../examples/extensions/qna.ts) uses cancellable asynchronous UI.
+- [`modal-editor.ts`](../examples/extensions/modal-editor.ts) replaces the editor.
+- [`custom-footer.ts`](../examples/extensions/custom-footer.ts) replaces the footer.
+- [`widget-placement.ts`](../examples/extensions/widget-placement.ts) places persistent content around the editor.
+- [`doom-overlay/`](../examples/extensions/doom-overlay/) demonstrates a continuously rendered overlay.
 
-- **Selection UI**: [examples/extensions/preset.ts](../examples/extensions/preset.ts) - SelectList with DynamicBorder framing
-- **Async with cancel**: [examples/extensions/qna.ts](../examples/extensions/qna.ts) - BorderedLoader for LLM calls
-- **Settings toggles**: [examples/extensions/tools.ts](../examples/extensions/tools.ts) - SettingsList for tool enable/disable
-- **Status indicators**: [examples/extensions/plan-mode/index.ts](../examples/extensions/plan-mode/index.ts) - setStatus and setWidget
-- **Working indicator**: [examples/extensions/working-indicator.ts](../examples/extensions/working-indicator.ts) - setWorkingIndicator
-- **Custom footer**: [examples/extensions/custom-footer.ts](../examples/extensions/custom-footer.ts) - setFooter with stats
-- **Custom editor**: [examples/extensions/modal-editor.ts](../examples/extensions/modal-editor.ts) - Vim-like modal editing
-- **Snake game**: [examples/extensions/snake.ts](../examples/extensions/snake.ts) - Full game with keyboard input, game loop
-- **Custom tool rendering**: [examples/extensions/todo.ts](../examples/extensions/todo.ts) - renderCall and renderResult
+The public exports are defined in [`packages/tui/src/index.ts`](https://github.com/earendil-works/pi/blob/main/packages/tui/src/index.ts). See [Extensions](extensions.md) for extension lifecycle, state, tools, events, and mode behavior.