agent-sh 0.14.9 → 0.14.11

package/examples/extensions/ash-scheme/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "main": "index.ts",
   "dependencies": {
-    "@jcubic/lips": "^0.20.3",
+    "@jcubic/lips": "1.0.0-beta.20",
     "agent-sh": "^0.14.0"
   }
 }

package/examples/extensions/ashi/EXTENDING.md

@@ -0,0 +1,116 @@
+# Extending ashi
+
+Other extensions can customize how chat entries and tool results render — and even swap the whole TUI renderer — without forking ashi. For non-render concerns (commands, settings, tools, providers) use the standard `agent-sh` extension API; see the [agent-sh extension docs](https://github.com/guanyilun/agent-sh/blob/main/docs/extensions.md).
+
+## Chat hooks
+
+These return a renderer-agnostic chat-entry view built from the active renderer's
+node factories (`args.nodes`), so an override never imports a concrete TUI library:
+
+| Hook | Args | Returns |
+|---|---|---|
+| `ashi:render-user-message` | `{ text, nodes, state, invalidate }` | `{ node }` |
+| `ashi:render-assistant` | `{ text, nodes, state, invalidate }` | `{ node, appendText, appendCodeBlock, finalize, hasContent }` |
+| `ashi:render-thinking` | `{ text, hidden, nodes, state, invalidate }` | `{ node, appendText, finalize, setHidden }` |
+
+`nodes` is a `RenderNodes` (`text` / `markdown` / `image` / `container` / `spacer`); `src/chat/` holds the default controllers.
+
+## Tool hooks — declarative render schema
+
+Tool rendering uses a declarative schema so extensions don't import pi-tui or touch ashi internals. Register a `RenderModel` under `ashi:render-tool:{name}` (with `:default` as the fallback):
+
+```ts
+import type { RenderModel, ToolDisplay } from "@guanyilun/ashi/render";
+
+const myModel: RenderModel<{ command: string }> = {
+  initial: ({ rawInput }) => ({ command: JSON.parse(String(rawInput)).command ?? "" }),
+  view: (s): ToolDisplay => ({
+    title: [
+      { text: "$ ", style: { bold: true, color: "toolTitle" } },
+      { text: s.command, highlight: "bash" },
+    ],
+    status: s.status,
+    body: { kind: "stream", text: s.output },
+    expandable: true,
+  }),
+};
+
+export default function activate(ctx) {
+  ctx.define("ashi:render-tool:bash", () => myModel);
+}
+```
+
+`view(state, env)` is a pure function returning a `ToolDisplay`. Ashi owns the mapping to the active renderer, theming, streaming buffer policy (preview / summary / hidden modes from `ashi.display`), diff width memoization, and the Ctrl+O expand toggle. The framework auto-tracks `state.status`, `state.output` (streaming chunks), and `state.hasDiff` (for edit/write) — renderers read these without wiring their own reducers.
+
+`ToolDisplay` body kinds: `text`, `code` (with syntax highlighting via `lang`), `stream` (preview/summary/hidden policy applied by ashi), `diff` (closure pushed by the frontend orchestrator), `lines`, `compound`. Custom state transitions can be declared via an optional `reducers` map.
+
+To ship a default display policy with your renderer (e.g. "this tool's output is large, default to `summary`"), set `display` on the model. User `settings.json` still wins:
+
+```ts
+const myModel: RenderModel<...> = {
+  initial, view,
+  display: { result: "summary", previewLines: 3 },
+};
+```
+
+## Renderers
+
+The whole TUI is swappable. ashi (the substrate) depends only on the `Renderer`
+contract from [`@guanyilun/ashi/renderer`](src/renderer.ts) — the schema, theme,
+chat controllers, and frontend never import a concrete TUI library. The built-in
+renderer is pi-tui (`src/renderers/pi-tui`).
+
+A renderer is just an extension that registers `ashi:renderer:<name>`:
+
+```ts
+import type { Renderer } from "@guanyilun/ashi/renderer";
+
+function createMyRenderer(): Renderer { /* … */ }
+
+export default function activate(ctx) {
+  ctx.define("ashi:renderer:my-tui", () => createMyRenderer());
+}
+```
+
+**Loading vs. selecting are separate.** A renderer must be *loaded* (so its
+`ashi:renderer:<name>` is registered) and then *selected* by name:
+
+- **Load** — `ashi install my-tui-renderer` (installed extensions auto-load every
+  launch), or `-e my-tui-renderer` to load from source during development.
+- **Select** — `--renderer my-tui` (flag) **>** `ASHI_RENDERER=my-tui` (env) **>**
+  `ashi.renderer` in `settings.json` (persistent preference) **>** `pi-tui`
+  (default). An unknown name errors rather than silently falling back.
+
+So a persistent setup is `ashi install my-tui-renderer` once + `"ashi": { "renderer":
+"my-tui" }` in settings — no per-command flags. The contract has two halves —
+content-node factories (`text` / `markdown` / `image` / `container` / `spacer`) and
+an app shell (`mount()` → scrollback / footer / queue / input / `belowInput` / status,
+plus select lists, loader, and key events) — together with `mountToolCall` / `mountToolResult`
+and a `capabilities` list so a renderer can declare gaps and the substrate degrades
+rather than crashes. This is how you build a different TUI frontend (Ink, a
+remote/web bridge…) without forking ashi.
+
+Tool calls follow the same rule: the renderer owns the look. Same-kind runs of
+`read`/`search` are collapsed by a substrate `ToolGroup` controller that owns only
+the *state* (tail-merge, eviction, expand) and hands the renderer a neutral
+`ToolGroupModel` to draw via the optional `mountToolGroup()`. The substrate ships
+a default rendering — `renderToolGroupLines(model)`, the `├`/`└` tree — that a
+renderer can mount as-is (both pi-tui and Ink do) or ignore and draw the model
+however it likes. Grouping is a presentation policy, not a mandate: a renderer
+that omits `mountToolGroup` opts out entirely, and the substrate renders those
+calls individually through the schema mount.
+
+Autocomplete works the same way: the substrate owns the popup and mounts the
+suggestion list in the `belowInput` slot; the renderer only draws it, so the
+slash-command / `@`-file popup behaves identically in every renderer.
+
+The substrate also owns terminal setup so renderers don't each rediscover it.
+agent-sh's shell clears OPOST on boot (pi-tui emits its own `\r`); ashi reads
+`capabilities.rawOutput` and restores OPOST for renderers that emit lone `\n`
+(Ink and most libraries — the default), so they don't staircase. A new renderer
+gets the conventional terminal for free; only a raw driver like pi-tui sets
+`rawOutput: true`.
+
+See [`examples/extensions/ashi-ink`](../ashi-ink) for a worked example — a **working**
+Ink (React) renderer (`ASHI_RENDERER=ink ashi -e ashi-ink`), verified with
+`ink-testing-library`.

package/examples/extensions/ashi/README.md

@@ -73,6 +73,8 @@ Ctrl+O       Expand/collapse all tool calls and results in chat
 
 The current thinking level is shown in the footer as `[level]` next to the model name.
 
+Typing `/` (commands) or `@` (files) opens a suggestion popup: ↑/↓ to move, Tab or Enter to accept, Esc to dismiss.
+
 ## Sessions
 
 Many sessions per cwd, fresh by default:
@@ -122,7 +124,7 @@ Per-tool compactness lives under `ashi.display` in `~/.agent-sh/settings.json`:
 {
   "ashi": {
     "display": {
-      "default": { "result": "preview", "previewLines": 5 },
+      "default": { "result": "preview", "previewLines": 5, "expandedLines": 200 },
       "read":    { "result": "hidden" },
       "ls":      { "result": "hidden" },
       "grep":    { "result": "summary" },
@@ -142,63 +144,17 @@ Per-tool compactness lives under `ashi.display` in `~/.agent-sh/settings.json`:
 
 For `edit_file` / `write_file`, the diff frame is treated as the output and follows the same gating: shown for `preview`, hidden for `hidden`/`summary` (the call line already carries `+12 -3` stats). The line-count hint is suppressed for diff-producing tools so edits stay quiet.
 
-Hit `Ctrl+O` to toggle expansion across all tool entries in chat — result bodies show their full output regardless of mode, and call lines with truncated labels (e.g. long `bash` commands) reveal their full text. Press again to collapse.
+Hit `Ctrl+O` to toggle expansion across all tool entries in chat — result bodies show their output regardless of mode, and call lines with truncated labels (e.g. long `bash` commands) reveal their full text. Press again to collapse. Expanded output is still tail-capped to `expandedLines` (default 200) so `Ctrl+O` on a huge result can't flood the scrollback — the rest shows as a `… (N earlier lines hidden)` note. The agent always receives the full output; only the on-screen display is bounded.
 
 Each tool inherits from `default` and is overridden by its own block. Unknown tool names fall through to `default`.
 
-## Extension surface
-
-Other extensions can customize how chat entries and tool results render without forking ashi.
-
-### Chat hooks
-
-These return [`@earendil-works/pi-tui`](https://www.npmjs.com/package/@earendil-works/pi-tui) components directly:
-
-| Hook | Args | Returns |
-|---|---|---|
-| `ashi:render-user-message` | `{ text, state, invalidate }` | `Component` |
-| `ashi:render-assistant` | `{ text, state, invalidate }` | `Component` |
-| `ashi:render-thinking` | `{ text, hidden, state, invalidate }` | `Component` |
-
-### Tool hooks — declarative render schema
-
-Tool rendering uses a declarative schema so extensions don't import pi-tui or touch ashi internals. Register a `RenderModel` under `ashi:render-tool:{name}` (with `:default` as the fallback):
-
-```ts
-import type { RenderModel, ToolDisplay } from "@guanyilun/ashi/render";
-
-const myModel: RenderModel<{ command: string }> = {
-  initial: ({ rawInput }) => ({ command: JSON.parse(String(rawInput)).command ?? "" }),
-  view: (s): ToolDisplay => ({
-    title: [
-      { text: "$ ", style: { bold: true, color: "toolTitle" } },
-      { text: s.command, highlight: "bash" },
-    ],
-    status: s.status,
-    body: { kind: "stream", text: s.output },
-    expandable: true,
-  }),
-};
-
-export default function activate(ctx) {
-  ctx.define("ashi:render-tool:bash", () => myModel);
-}
-```
-
-`view(state, env)` is a pure function returning a `ToolDisplay`. Ashi owns the pi-tui mapping, theming, streaming buffer policy (preview / summary / hidden modes from `ashi.display`), diff width memoization, and the Ctrl+O expand toggle. The framework auto-tracks `state.status`, `state.output` (streaming chunks), and `state.hasDiff` (for edit/write) — renderers read these without wiring their own reducers.
-
-`ToolDisplay` body kinds: `text`, `code` (with syntax highlighting via `lang`), `stream` (preview/summary/hidden policy applied by ashi), `diff` (closure pushed by the frontend orchestrator), `lines`, `compound`. Custom state transitions can be declared via an optional `reducers` map.
-
-To ship a default display policy with your renderer (e.g. "this tool's output is large, default to `summary`"), set `display` on the model. User `settings.json` still wins:
-
-```ts
-const myModel: RenderModel<...> = {
-  initial, view,
-  display: { result: "summary", previewLines: 3 },
-};
-```
+## Extending ashi
 
-For non-render concerns (commands, settings, tools, providers) use the standard `agent-sh` extension API. See the [agent-sh extension docs](https://github.com/guanyilun/agent-sh/blob/main/docs/extensions.md).
+Other extensions can customize chat and tool-result rendering — and even swap the whole
+TUI renderer (pi-tui, Ink, …) — without forking ashi. See **[EXTENDING.md](EXTENDING.md)**
+for the chat/tool render hooks, the declarative tool render schema, and the renderer
+contract. For non-render concerns (commands, settings, tools, providers), use the
+standard [agent-sh extension API](https://github.com/guanyilun/agent-sh/blob/main/docs/extensions.md).
 
 ## Install from source
 

package/examples/extensions/ashi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guanyilun/ashi",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "Ash in an interactive TUI — agent-sh's built-in agent without the shell underneath",
   "type": "module",
   "main": "dist/cli.js",
@@ -12,6 +12,10 @@
     "./render": {
       "types": "./dist/schema.d.ts",
       "import": "./dist/schema.js"
+    },
+    "./renderer": {
+      "types": "./dist/renderer.d.ts",
+      "import": "./dist/renderer.js"
     }
   },
   "files": [
@@ -56,7 +60,7 @@
   },
   "dependencies": {
     "@earendil-works/pi-tui": "^0.74.0",
-    "agent-sh": "^0.14.8",
+    "agent-sh": "^0.14.10",
     "chalk": "^5.5.0",
     "cli-highlight": "^2.1.11"
   },

package/examples/extensions/ashi/src/autocomplete-controller.ts

@@ -0,0 +1,95 @@
+import type {
+  App,
+  AutocompleteItem,
+  AutocompleteProvider,
+  InputView,
+  KeyEvent,
+  SelectView,
+} from "./renderer.js";
+
+export interface AutocompleteController {
+  /** Re-query suggestions for the current input. Call from the input's onChange. */
+  refresh(): void;
+}
+
+const VISIBLE_ROWS = 8;
+
+/**
+ * Substrate-owned autocomplete: the renderer only draws a SelectView in `belowInput`, so
+ * the popup behaves identically in any renderer instead of living inside one editor.
+ */
+export function createAutocompleteController(opts: {
+  app: App;
+  input: InputView;
+  provider: AutocompleteProvider;
+  suppressed: () => boolean;
+}): AutocompleteController {
+  const { app, input, provider, suppressed } = opts;
+  let view: SelectView | null = null;
+  let items: AutocompleteItem[] = [];
+  let prefix = "";
+  let index = 0;
+  let reqSeq = 0;
+  let applying = false;
+
+  const clear = (): void => {
+    if (!view) return;
+    app.belowInput.clear();
+    view = null;
+    items = [];
+  };
+
+  const refresh = (): void => {
+    if (applying) return;
+    if (suppressed()) { clear(); app.requestRender(); return; }
+    const lines = input.getText().split("\n");
+    const { line, col } = input.getCursor();
+    const seq = ++reqSeq;
+    void Promise.resolve(provider.getSuggestions(lines, line, col)).then((result) => {
+      if (seq !== reqSeq || applying) return;
+      if (!result || result.items.length === 0) { clear(); app.requestRender(); return; }
+      items = result.items;
+      prefix = result.prefix;
+      index = Math.max(0, Math.min(index, items.length - 1));
+      app.belowInput.clear();
+      view = app.createSelectList(
+        items.map((it) => ({ value: it.value, label: it.label, description: it.description })),
+        { visibleRows: VISIBLE_ROWS },
+      );
+      view.setSelectedIndex(index);
+      app.belowInput.addChild(view.node);
+      app.requestRender();
+    });
+  };
+
+  // Enter applies and closes. Tab applies and, for `@`/path completions, re-queries so
+  // you can keep completing deeper — slash commands close (else an exact command would
+  // re-match itself and the list would never dismiss). `applying` swallows the onChange
+  // that replaceBeforeCursor fires mid-apply.
+  const apply = (allowReopen: boolean): void => {
+    const chosen = items[index];
+    if (!chosen) return;
+    const slash = prefix.startsWith("/");
+    applying = true;
+    input.replaceBeforeCursor(prefix.length, chosen.value);
+    clear();
+    applying = false;
+    if (allowReopen && !slash) refresh();
+    app.requestRender();
+  };
+
+  app.onKey((key: KeyEvent): { consume: boolean } | void => {
+    if (key.isRelease() || key.isRepeat()) return;
+    if (!view || items.length === 0) {
+      if (key.matches("tab")) { refresh(); return { consume: true }; }
+      return;
+    }
+    if (key.matches("up")) { index = (index - 1 + items.length) % items.length; view.setSelectedIndex(index); app.requestRender(); return { consume: true }; }
+    if (key.matches("down")) { index = (index + 1) % items.length; view.setSelectedIndex(index); app.requestRender(); return { consume: true }; }
+    if (key.matches("return")) { apply(false); return { consume: true }; }
+    if (key.matches("tab")) { apply(true); return { consume: true }; }
+    if (key.matches("escape")) { clear(); app.requestRender(); return { consume: true }; }
+  });
+
+  return { refresh };
+}

package/examples/extensions/ashi/src/autocomplete.ts

@@ -2,7 +2,7 @@ import type {
   AutocompleteItem,
   AutocompleteProvider,
   AutocompleteSuggestions,
-} from "@earendil-works/pi-tui";
+} from "./renderer.js";
 import type { EventBus } from "agent-sh/event-bus";
 
 /** Adapt pi-tui's AutocompleteProvider to agent-sh's autocomplete:request pipe.
@@ -54,28 +54,6 @@ export class BusAutocompleteProvider implements AutocompleteProvider {
     }));
     return { items, prefix: before };
   }
-
-  applyCompletion(
-    lines: string[],
-    cursorLine: number,
-    cursorCol: number,
-    item: AutocompleteItem,
-    prefix: string,
-  ): { lines: string[]; cursorLine: number; cursorCol: number } {
-    const line = lines[cursorLine] ?? "";
-    // Replace the prefix span (the leading slash-word + args we sent) with
-    // the completion value. Anything after the cursor is preserved.
-    const head = line.slice(0, cursorCol - prefix.length);
-    const tail = line.slice(cursorCol);
-    const newLine = `${head}${item.value}${tail}`;
-    const out = lines.slice();
-    out[cursorLine] = newLine;
-    return {
-      lines: out,
-      cursorLine,
-      cursorCol: (head + item.value).length,
-    };
-  }
 }
 
 /** Locate an active `@` file-trigger in the text preceding the cursor.

package/examples/extensions/ashi/src/capture.ts

@@ -2,8 +2,7 @@ import type { ExtensionContext } from "agent-sh/types";
 import type { MultiSessionStore } from "./multi-session-store.js";
 import type { AgentShMessage as AgentMessage } from "agent-sh/session-store";
 
-/** Maintains an `(entryId | null)[]` parallel to the live messages array;
- *  null slots are synthetics like compaction summaries that have no entry. */
+// liveEntryIds is parallel to the live messages array; null slots are synthetics (e.g. compaction summaries) with no entry.
 export interface Capture {
   flush(): Promise<void>;
   getEntryIdAt(messageIndex: number): string | null;
@@ -32,7 +31,7 @@ export function registerCapture(
     return { ...m, meta: { ...m.meta, diff: meta.diff, filePath: meta.filePath } };
   };
 
-  const flush = async (): Promise<void> => {
+  const writeNewMessages = async (): Promise<void> => {
     const messages = ctx.call("conversation:get-messages") as AgentMessage[] | undefined;
     if (!messages || messages.length <= liveEntryIds.length) return;
     const newMessages = messages.slice(liveEntryIds.length).map(enrich);
@@ -41,6 +40,13 @@ export function registerCapture(
     getStore().markLastSession();
   };
 
+  // Serialize flushes so an exit-time flush can't race processing-done and double-append.
+  let chain: Promise<void> = Promise.resolve();
+  const flush = (): Promise<void> => {
+    chain = chain.then(writeNewMessages, writeNewMessages);
+    return chain;
+  };
+
   ctx.bus.on("agent:processing-done", () => { void flush(); });
 
   return {

package/examples/extensions/ashi/src/chat/assistant.ts

@@ -0,0 +1,87 @@
+import type { ContainerView, MarkdownView, RenderNode, RenderNodes } from "../renderer.js";
+
+export type EquationRenderer = (latexSrc: string) => RenderNode | null;
+
+type LatexSegment = { type: "text"; value: string } | { type: "latex"; value: string };
+
+function segmentLatex(text: string): LatexSegment[] {
+  const segments: LatexSegment[] = [];
+  let i = 0;
+  while (i < text.length) {
+    const open = text.indexOf("$$", i);
+    if (open === -1) { segments.push({ type: "text", value: text.slice(i) }); break; }
+    const close = text.indexOf("$$", open + 2);
+    if (close === -1) { segments.push({ type: "text", value: text.slice(i) }); break; }
+    if (open > i) segments.push({ type: "text", value: text.slice(i, open) });
+    segments.push({ type: "latex", value: text.slice(open + 2, close).trim() });
+    i = close + 2;
+  }
+  return segments;
+}
+
+export class AssistantMessage {
+  readonly node: RenderNode;
+  private container: ContainerView;
+  private md: MarkdownView;
+  private buffer = "";
+
+  constructor(private nodes: RenderNodes, private renderEquation?: EquationRenderer) {
+    this.container = nodes.container();
+    this.md = nodes.markdown({ paddingX: 1, bullet: true });
+    this.container.addChild(nodes.spacer(1));
+    this.container.addChild(this.md.node);
+    this.node = this.container.node;
+  }
+
+  appendText(t: string): void {
+    this.buffer += t;
+    this.md.setText(this.buffer);
+  }
+
+  appendCodeBlock(language: string, code: string): void {
+    const prefix = this.buffer && !this.buffer.endsWith("\n") ? "\n" : "";
+    this.buffer += `${prefix}\`\`\`${language}\n${code}\n\`\`\`\n`;
+    this.md.setText(this.buffer);
+  }
+
+  finalize(): void {
+    if (this.buffer === "") this.buffer = " ";
+    if (this.renderEquation && this.buffer.includes("$$")) {
+      this.rebuildWithEquations();
+    } else {
+      this.md.setText(this.buffer);
+    }
+  }
+
+  private rebuildWithEquations(): void {
+    const segments = segmentLatex(this.buffer);
+    if (!segments.some((s) => s.type === "latex")) {
+      this.md.setText(this.buffer);
+      return;
+    }
+    this.container.clear();
+    this.container.addChild(this.nodes.spacer(1));
+    for (const seg of segments) {
+      if (seg.type === "text") {
+        if (seg.value.trim()) {
+          const m = this.nodes.markdown({ paddingX: 1 });
+          m.setText(seg.value);
+          this.container.addChild(m.node);
+        }
+      } else {
+        const eq = this.renderEquation!(seg.value);
+        if (eq) {
+          this.container.addChild(eq);
+        } else {
+          const m = this.nodes.markdown({ paddingX: 1 });
+          m.setText(`$$${seg.value}$$`);
+          this.container.addChild(m.node);
+        }
+      }
+    }
+  }
+
+  hasContent(): boolean {
+    return this.buffer.trim().length > 0;
+  }
+}

package/examples/extensions/ashi/src/chat/lines.ts

@@ -0,0 +1,20 @@
+import type { RenderNode, RenderNodes } from "../renderer.js";
+import { theme } from "../theme.js";
+
+export class InfoLine {
+  readonly node: RenderNode;
+  constructor(nodes: RenderNodes, message: string) {
+    const t = nodes.text({ paddingX: 1 });
+    t.setText(theme.fg("muted", message));
+    this.node = t.node;
+  }
+}
+
+export class ErrorLine {
+  readonly node: RenderNode;
+  constructor(nodes: RenderNodes, message: string) {
+    const t = nodes.text({ paddingX: 1 });
+    t.setText(`${theme.fg("error", "✗")} ${theme.fg("error", message)}`);
+    this.node = t.node;
+  }
+}

package/examples/extensions/ashi/src/chat/thinking.ts

@@ -0,0 +1,42 @@
+// Hidden clears the block but keeps the buffer so a toggle restores it.
+import type { ContainerView, MarkdownView, RenderNode, RenderNodes } from "../renderer.js";
+import { theme } from "../theme.js";
+
+const thinkingColor = (t: string): string => theme.dim(theme.italic(theme.fg("thinkingText", t)));
+
+export class ThinkingBlock {
+  readonly node: RenderNode;
+  private container: ContainerView;
+  private md: MarkdownView;
+  private buffer = "";
+  private hidden = false;
+
+  constructor(private nodes: RenderNodes) {
+    this.container = nodes.container();
+    this.md = nodes.markdown({ paddingX: 1, color: thinkingColor });
+    this.container.addChild(nodes.spacer(1));
+    this.container.addChild(this.md.node);
+    this.node = this.container.node;
+  }
+
+  appendText(t: string): void {
+    this.buffer += t;
+    if (!this.hidden) this.md.setText(this.buffer);
+  }
+
+  finalize(): void {
+    if (this.buffer === "") this.buffer = " ";
+    if (!this.hidden) this.md.setText(this.buffer);
+  }
+
+  setHidden(hidden: boolean): void {
+    if (hidden === this.hidden) return;
+    this.hidden = hidden;
+    this.container.clear();
+    if (hidden) return;
+    this.container.addChild(this.nodes.spacer(1));
+    this.md = this.nodes.markdown({ paddingX: 1, color: thinkingColor });
+    this.md.setText(this.buffer);
+    this.container.addChild(this.md.node);
+  }
+}

package/examples/extensions/ashi/src/chat/tool-group.ts

@@ -0,0 +1,84 @@
+import type { Renderer, RenderNode, ToolGroupChild, ToolGroupModel, ToolGroupView } from "../renderer.js";
+
+export const GROUP_ICONS: Record<string, string> = { read: "◆", search: "⌕" };
+
+const SHORT_TOOL_NAMES: Record<string, string> = {
+  read_file: "read",
+  edit_file: "edit",
+  write_file: "write",
+};
+
+function shortToolName(name: string): string {
+  return SHORT_TOOL_NAMES[name] ?? name;
+}
+
+export class ToolGroup {
+  readonly node: RenderNode;
+  readonly kind: string;
+  private view: ToolGroupView;
+  private maxVisible: number;
+  private allChildren: ToolGroupChild[] = [];
+  private callsById = new Map<string, ToolGroupChild>();
+  private expanded = false;
+  private open = true;
+
+  constructor(renderer: Renderer, kind: string, maxVisible: number = Infinity) {
+    this.kind = kind;
+    this.maxVisible = maxVisible;
+    this.view = renderer.mountToolGroup!();
+    this.node = this.view.node;
+    this.repaint();
+  }
+
+  addCall(toolCallId: string, name: string, detail: string): void {
+    const child: ToolGroupChild = { name: shortToolName(name), detail: detail || "…" };
+    if (toolCallId) this.callsById.set(toolCallId, child);
+    this.allChildren.push(child);
+    this.repaint();
+  }
+
+  recordCompletion(toolCallId: string, exitCode: number | null, summary?: string): void {
+    const child = this.callsById.get(toolCallId);
+    if (!child) return;
+    child.status = { exitCode, summary };
+    this.repaint();
+  }
+
+  toggleExpanded(): void {
+    this.expanded = !this.expanded;
+    this.repaint();
+  }
+
+  seal(): void {
+    if (!this.open) return;
+    this.open = false;
+    this.repaint();
+  }
+
+  // When collapsed and over-cap, one visible slot is reserved for the summary.
+  private visibleSliceStart(): number {
+    if (this.expanded || !Number.isFinite(this.maxVisible)) return 0;
+    if (this.allChildren.length <= this.maxVisible) return 0;
+    return this.allChildren.length - (this.maxVisible - 1);
+  }
+
+  private repaint(): void {
+    const start = this.visibleSliceStart();
+    const evicted = this.allChildren.slice(0, start);
+    const hidden = evicted.length === 0
+      ? null
+      : {
+          count: evicted.length,
+          ok: evicted.every((c) => !c.status || c.status.exitCode === null || c.status.exitCode === 0),
+        };
+    const model: ToolGroupModel = {
+      kind: this.kind,
+      icon: GROUP_ICONS[this.kind] ?? "▶",
+      children: this.allChildren.slice(start),
+      hidden,
+      expanded: this.expanded,
+      open: this.open,
+    };
+    this.view.update(model);
+  }
+}

package/examples/extensions/ashi/src/chat/user-message.ts

@@ -0,0 +1,20 @@
+import type { RenderNode, RenderNodes } from "../renderer.js";
+import { theme } from "../theme.js";
+
+export class UserMessage {
+  readonly node: RenderNode;
+  constructor(nodes: RenderNodes, text: string) {
+    const container = nodes.container();
+    container.addChild(nodes.spacer(1));
+    const md = nodes.markdown({
+      paddingX: 1,
+      paddingY: 1,
+      bgColor: (t) => theme.bg("userMessageBg", t),
+      color: (t) => theme.fg("userMessageText", t),
+      osc133Zones: true,
+    });
+    md.setText(text);
+    container.addChild(md.node);
+    this.node = container.node;
+  }
+}