@tomsun28/pizza 0.0.9 → 0.1.1

package/dist/modes/interactive/components/bash-execution.js

@@ -0,0 +1,169 @@
+/**
+ * Component for displaying bash command execution with streaming output.
+ */
+import { Container, Loader, Spacer, Text } from "@earendil-works/pi-tui";
+import stripAnsi from "strip-ansi";
+import { DEFAULT_MAX_BYTES, DEFAULT_MAX_LINES, truncateTail, } from "../../../core/tools/truncate.js";
+import { theme } from "../theme/theme.js";
+import { DynamicBorder } from "./dynamic-border.js";
+import { keyHint, keyText } from "./keybinding-hints.js";
+import { truncateToVisualLines } from "./visual-truncate.js";
+// Preview line limit when not expanded (matches tool execution behavior)
+const PREVIEW_LINES = 20;
+export class BashExecutionComponent extends Container {
+    constructor(command, ui, excludeFromContext = false) {
+        super();
+        this.outputLines = [];
+        this.status = "running";
+        this.exitCode = undefined;
+        this.expanded = false;
+        this.command = command;
+        // Use dim border for excluded-from-context commands (!! prefix)
+        const colorKey = excludeFromContext ? "dim" : "bashMode";
+        const borderColor = (str) => theme.fg(colorKey, str);
+        // Add spacer
+        this.addChild(new Spacer(1));
+        // Top border
+        this.addChild(new DynamicBorder(borderColor));
+        // Content container (holds dynamic content between borders)
+        this.contentContainer = new Container();
+        this.addChild(this.contentContainer);
+        // Command header
+        const header = new Text(theme.fg(colorKey, theme.bold(`$ ${command}`)), 1, 0);
+        this.contentContainer.addChild(header);
+        // Loader
+        this.loader = new Loader(ui, (spinner) => theme.fg(colorKey, spinner), (text) => theme.fg("muted", text), `Running... (${keyText("tui.select.cancel")} to cancel)`);
+        this.contentContainer.addChild(this.loader);
+        // Bottom border
+        this.addChild(new DynamicBorder(borderColor));
+    }
+    /**
+     * Set whether the output is expanded (shows full output) or collapsed (preview only).
+     */
+    setExpanded(expanded) {
+        this.expanded = expanded;
+        this.updateDisplay();
+    }
+    invalidate() {
+        super.invalidate();
+        this.updateDisplay();
+    }
+    appendOutput(chunk) {
+        // Strip ANSI codes and normalize line endings
+        // Note: binary data is already sanitized in tui-renderer.ts executeBashCommand
+        const clean = stripAnsi(chunk).replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+        // Append to output lines
+        const newLines = clean.split("\n");
+        if (this.outputLines.length > 0 && newLines.length > 0) {
+            // Append first chunk to last line (incomplete line continuation)
+            this.outputLines[this.outputLines.length - 1] += newLines[0];
+            this.outputLines.push(...newLines.slice(1));
+        }
+        else {
+            this.outputLines.push(...newLines);
+        }
+        this.updateDisplay();
+    }
+    setComplete(exitCode, cancelled, truncationResult, fullOutputPath) {
+        this.exitCode = exitCode;
+        this.status = cancelled
+            ? "cancelled"
+            : exitCode !== 0 && exitCode !== undefined && exitCode !== null
+                ? "error"
+                : "complete";
+        this.truncationResult = truncationResult;
+        this.fullOutputPath = fullOutputPath;
+        // Stop loader
+        this.loader.stop();
+        this.updateDisplay();
+    }
+    updateDisplay() {
+        // Apply truncation for LLM context limits (same limits as cli tool)
+        const fullOutput = this.outputLines.join("\n");
+        const contextTruncation = truncateTail(fullOutput, {
+            maxLines: DEFAULT_MAX_LINES,
+            maxBytes: DEFAULT_MAX_BYTES,
+        });
+        // Get the lines to potentially display (after context truncation)
+        const availableLines = contextTruncation.content ? contextTruncation.content.split("\n") : [];
+        // Apply preview truncation based on expanded state
+        const previewLogicalLines = availableLines.slice(-PREVIEW_LINES);
+        const hiddenLineCount = availableLines.length - previewLogicalLines.length;
+        // Rebuild content container
+        this.contentContainer.clear();
+        // Command header
+        const header = new Text(theme.fg("bashMode", theme.bold(`$ ${this.command}`)), 1, 0);
+        this.contentContainer.addChild(header);
+        // Output
+        if (availableLines.length > 0) {
+            if (this.expanded) {
+                // Show all lines
+                const displayText = availableLines.map((line) => theme.fg("muted", line)).join("\n");
+                this.contentContainer.addChild(new Text(`\n${displayText}`, 1, 0));
+            }
+            else {
+                // Use shared visual truncation utility with width-aware caching
+                const styledOutput = previewLogicalLines.map((line) => theme.fg("muted", line)).join("\n");
+                const styledInput = `\n${styledOutput}`;
+                let cachedWidth;
+                let cachedLines;
+                this.contentContainer.addChild({
+                    render: (width) => {
+                        if (cachedLines === undefined || cachedWidth !== width) {
+                            const result = truncateToVisualLines(styledInput, PREVIEW_LINES, width, 1);
+                            cachedLines = result.visualLines;
+                            cachedWidth = width;
+                        }
+                        return cachedLines ?? [];
+                    },
+                    invalidate: () => {
+                        cachedWidth = undefined;
+                        cachedLines = undefined;
+                    },
+                });
+            }
+        }
+        // Loader or status
+        if (this.status === "running") {
+            this.contentContainer.addChild(this.loader);
+        }
+        else {
+            const statusParts = [];
+            // Show how many lines are hidden (collapsed preview)
+            if (hiddenLineCount > 0) {
+                if (this.expanded) {
+                    statusParts.push(`(${keyHint("app.tools.expand", "to collapse")})`);
+                }
+                else {
+                    statusParts.push(`${theme.fg("muted", `... ${hiddenLineCount} more lines`)} (${keyHint("app.tools.expand", "to expand")})`);
+                }
+            }
+            if (this.status === "cancelled") {
+                statusParts.push(theme.fg("warning", "(cancelled)"));
+            }
+            else if (this.status === "error") {
+                statusParts.push(theme.fg("error", `(exit ${this.exitCode})`));
+            }
+            // Add truncation warning (context truncation, not preview truncation)
+            const wasTruncated = this.truncationResult?.truncated || contextTruncation.truncated;
+            if (wasTruncated && this.fullOutputPath) {
+                statusParts.push(theme.fg("warning", `Output truncated. Full output: ${this.fullOutputPath}`));
+            }
+            if (statusParts.length > 0) {
+                this.contentContainer.addChild(new Text(`\n${statusParts.join("\n")}`, 1, 0));
+            }
+        }
+    }
+    /**
+     * Get the raw output for creating BashExecutionMessage.
+     */
+    getOutput() {
+        return this.outputLines.join("\n");
+    }
+    /**
+     * Get the command that was executed.
+     */
+    getCommand() {
+        return this.command;
+    }
+}

package/dist/modes/interactive/components/bordered-loader.d.ts

@@ -0,0 +1,15 @@
+import { Container, type TUI } from "@earendil-works/pi-tui";
+import type { Theme } from "../theme/theme.js";
+/** Loader wrapped with borders for extension UI */
+export declare class BorderedLoader extends Container {
+    private loader;
+    private cancellable;
+    private signalController?;
+    constructor(tui: TUI, theme: Theme, message: string, options?: {
+        cancellable?: boolean;
+    });
+    get signal(): AbortSignal;
+    set onAbort(fn: (() => void) | undefined);
+    handleInput(data: string): void;
+    dispose(): void;
+}

package/dist/modes/interactive/components/bordered-loader.js

@@ -0,0 +1,50 @@
+import { CancellableLoader, Container, Loader, Spacer, Text } from "@earendil-works/pi-tui";
+import { DynamicBorder } from "./dynamic-border.js";
+import { keyHint } from "./keybinding-hints.js";
+/** Loader wrapped with borders for extension UI */
+export class BorderedLoader extends Container {
+    constructor(tui, theme, message, options) {
+        super();
+        this.cancellable = options?.cancellable ?? true;
+        const borderColor = (s) => theme.fg("border", s);
+        this.addChild(new DynamicBorder(borderColor));
+        if (this.cancellable) {
+            this.loader = new CancellableLoader(tui, (s) => theme.fg("accent", s), (s) => theme.fg("muted", s), message);
+        }
+        else {
+            this.signalController = new AbortController();
+            this.loader = new Loader(tui, (s) => theme.fg("accent", s), (s) => theme.fg("muted", s), message);
+        }
+        this.addChild(this.loader);
+        if (this.cancellable) {
+            this.addChild(new Spacer(1));
+            this.addChild(new Text(keyHint("tui.select.cancel", "cancel"), 1, 0));
+        }
+        this.addChild(new Spacer(1));
+        this.addChild(new DynamicBorder(borderColor));
+    }
+    get signal() {
+        if (this.cancellable) {
+            return this.loader.signal;
+        }
+        return this.signalController?.signal ?? new AbortController().signal;
+    }
+    set onAbort(fn) {
+        if (this.cancellable) {
+            this.loader.onAbort = fn;
+        }
+    }
+    handleInput(data) {
+        if (this.cancellable) {
+            this.loader.handleInput(data);
+        }
+    }
+    dispose() {
+        if ("dispose" in this.loader && typeof this.loader.dispose === "function") {
+            this.loader.dispose();
+        }
+        else if ("stop" in this.loader && typeof this.loader.stop === "function") {
+            this.loader.stop();
+        }
+    }
+}

package/dist/modes/interactive/components/branch-summary-message.d.ts

@@ -0,0 +1,15 @@
+import { Box, type MarkdownTheme } from "@earendil-works/pi-tui";
+import type { BranchSummaryMessage } from "../../../core/messages.js";
+/**
+ * Component that renders a branch summary message with collapsed/expanded state.
+ * Uses same background color as custom messages for visual consistency.
+ */
+export declare class BranchSummaryMessageComponent extends Box {
+    private expanded;
+    private message;
+    private markdownTheme;
+    constructor(message: BranchSummaryMessage, markdownTheme?: MarkdownTheme);
+    setExpanded(expanded: boolean): void;
+    invalidate(): void;
+    private updateDisplay;
+}

package/dist/modes/interactive/components/branch-summary-message.js

@@ -0,0 +1,41 @@
+import { Box, Markdown, Spacer, Text } from "@earendil-works/pi-tui";
+import { getMarkdownTheme, theme } from "../theme/theme.js";
+import { keyText } from "./keybinding-hints.js";
+/**
+ * Component that renders a branch summary message with collapsed/expanded state.
+ * Uses same background color as custom messages for visual consistency.
+ */
+export class BranchSummaryMessageComponent extends Box {
+    constructor(message, markdownTheme = getMarkdownTheme()) {
+        super(1, 1, (t) => theme.bg("customMessageBg", t));
+        this.expanded = false;
+        this.message = message;
+        this.markdownTheme = markdownTheme;
+        this.updateDisplay();
+    }
+    setExpanded(expanded) {
+        this.expanded = expanded;
+        this.updateDisplay();
+    }
+    invalidate() {
+        super.invalidate();
+        this.updateDisplay();
+    }
+    updateDisplay() {
+        this.clear();
+        const label = theme.fg("customMessageLabel", `\x1b[1m[branch]\x1b[22m`);
+        this.addChild(new Text(label, 0, 0));
+        this.addChild(new Spacer(1));
+        if (this.expanded) {
+            const header = "**Branch Summary**\n\n";
+            this.addChild(new Markdown(header + this.message.summary, 0, 0, this.markdownTheme, {
+                color: (text) => theme.fg("customMessageText", text),
+            }));
+        }
+        else {
+            this.addChild(new Text(theme.fg("customMessageText", "Branch summary (") +
+                theme.fg("dim", keyText("app.tools.expand")) +
+                theme.fg("customMessageText", " to expand)"), 0, 0));
+        }
+    }
+}

package/dist/modes/interactive/components/brand-header.d.ts

@@ -0,0 +1,33 @@
+import { type Component } from "@earendil-works/pi-tui";
+import type { TaskHistoryItem } from "../../../core/projection/task-history.js";
+export declare class BrandHeaderComponent implements Component {
+    private readonly appName;
+    private readonly version;
+    private expanded;
+    private cachedWidth?;
+    private cachedExpanded?;
+    private cachedLines?;
+    private taskHistory;
+    constructor(appName: string, version: string, expanded?: boolean);
+    setExpanded(expanded: boolean): void;
+    setTaskHistory(taskHistory: TaskHistoryItem[]): void;
+    invalidate(): void;
+    render(width: number): string[];
+    private renderFull;
+    private renderLogoBody;
+    private taskPanelRows;
+    private formatTaskLine;
+    private taskStatusLabel;
+    private renderBoxedCompact;
+    private renderTiny;
+    private expandedShortcutLines;
+    private shortcutHints;
+    private compactShortcuts;
+    private brandText;
+    private brandLabel;
+    private displayName;
+    private splitLine;
+    private boxedLine;
+    private rule;
+    private fit;
+}

package/dist/modes/interactive/components/brand-header.js

@@ -0,0 +1,235 @@
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { theme } from "../theme/theme.js";
+import { keyHint, keyText, rawKeyHint } from "./keybinding-hints.js";
+const LOGO_LINES = [
+    " ██████╗ ██╗███████╗███████╗ █████╗ ",
+    " ██╔══██╗██║╚══███╔╝╚══███╔╝██╔══██╗",
+    " ██████╔╝██║  ███╔╝   ███╔╝ ███████║",
+    " ██╔═══╝ ██║ ███╔╝   ███╔╝  ██╔══██║",
+    " ██║     ██║███████╗███████╗██║  ██║",
+    " ╚═╝     ╚═╝╚══════╝╚══════╝╚═╝  ╚═╝",
+];
+export class BrandHeaderComponent {
+    constructor(appName, version, expanded = false) {
+        this.appName = appName;
+        this.version = version;
+        this.taskHistory = [];
+        this.expanded = expanded;
+    }
+    setExpanded(expanded) {
+        if (this.expanded === expanded)
+            return;
+        this.expanded = expanded;
+        this.invalidate();
+    }
+    setTaskHistory(taskHistory) {
+        this.taskHistory = taskHistory.slice(0, 3);
+        this.invalidate();
+    }
+    invalidate() {
+        this.cachedWidth = undefined;
+        this.cachedExpanded = undefined;
+        this.cachedLines = undefined;
+    }
+    render(width) {
+        const safeWidth = Math.max(1, width);
+        if (this.cachedLines && this.cachedWidth === safeWidth && this.cachedExpanded === this.expanded) {
+            return this.cachedLines;
+        }
+        const lines = safeWidth >= 68
+            ? this.renderFull(safeWidth)
+            : safeWidth >= 46
+                ? this.renderBoxedCompact(safeWidth)
+                : this.renderTiny(safeWidth);
+        this.cachedWidth = safeWidth;
+        this.cachedExpanded = this.expanded;
+        this.cachedLines = lines;
+        return lines;
+    }
+    renderFull(width) {
+        const lines = [
+            this.rule(width, "╭", "─", "╮"),
+            this.boxedLine(this.splitLine(this.brandText(), theme.fg("muted", "terminal coding agent"), width - 4), width),
+            this.rule(width, "├", "─", "┤"),
+            ...this.renderLogoBody(width),
+            this.boxedLine("", width),
+            this.boxedLine(theme.fg("muted", `Create together with ${this.displayName()}.`), width),
+            this.boxedLine(theme.fg("dim", "Read code · edit files · run commands · keep context"), width),
+            this.boxedLine(this.compactShortcuts(), width),
+        ];
+        if (this.expanded) {
+            lines.push(this.rule(width, "├", "─", "┤"));
+            lines.push(this.boxedLine(theme.fg("dim", "Shortcuts"), width));
+            lines.push(...this.expandedShortcutLines(width));
+        }
+        lines.push(this.rule(width, "╰", "─", "╯"));
+        return lines;
+    }
+    renderLogoBody(width) {
+        if (this.taskHistory.length === 0 || width < 100) {
+            return LOGO_LINES.map((line) => this.boxedLine(theme.fg("accent", line), width));
+        }
+        const innerWidth = Math.max(1, width - 4);
+        const taskWidth = Math.min(44, Math.max(32, Math.floor(innerWidth * 0.38)));
+        const separator = theme.fg("borderMuted", "│");
+        const separatorWidth = 3;
+        const logoWidth = Math.max(1, innerWidth - taskWidth - separatorWidth);
+        const taskRows = this.taskPanelRows(taskWidth);
+        return LOGO_LINES.map((line, index) => {
+            const logo = this.fit(theme.fg("accent", line), logoWidth);
+            const task = this.fit(taskRows[index] ?? "", taskWidth);
+            return this.boxedLine(`${logo} ${separator} ${task}`, width);
+        });
+    }
+    taskPanelRows(width) {
+        const rows = [
+            theme.bold(theme.fg("muted", "Recent tasks")),
+            ...this.taskHistory.map((task) => this.formatTaskLine(task, width)),
+        ];
+        while (rows.length < LOGO_LINES.length) {
+            rows.push("");
+        }
+        return rows;
+    }
+    formatTaskLine(task, width) {
+        const label = this.taskStatusLabel(task.status);
+        const summaryWidth = Math.max(1, width - visibleWidth(label) - 1);
+        const summary = truncateToWidth(task.summary, summaryWidth, "", true);
+        return `${label} ${summary}`;
+    }
+    taskStatusLabel(status) {
+        switch (status) {
+            case "accepted":
+            case "completed":
+                return theme.fg("success", "done");
+            case "started":
+            case "in_progress":
+                return theme.fg("accent", "run ");
+            case "failed":
+                return theme.fg("error", "fail");
+            case "rework":
+                return theme.fg("warning", "redo");
+            case "cancelled":
+                return theme.fg("muted", "stop");
+            case "assigned":
+                return theme.fg("muted", "asgn");
+            case "created":
+                return theme.fg("muted", "todo");
+        }
+    }
+    renderBoxedCompact(width) {
+        const lines = [
+            this.rule(width, "╭", "─", "╮"),
+            this.boxedLine(this.brandText(), width),
+            this.boxedLine(theme.fg("muted", "Terminal coding agent"), width),
+            this.boxedLine(theme.fg("dim", "Read code · edit files · run commands"), width),
+            this.boxedLine(this.compactShortcuts(), width),
+        ];
+        if (this.expanded) {
+            lines.push(this.rule(width, "├", "─", "┤"));
+            lines.push(...this.expandedShortcutLines(width));
+        }
+        lines.push(this.rule(width, "╰", "─", "╯"));
+        return lines;
+    }
+    renderTiny(width) {
+        const lines = [
+            this.fit(this.brandText(), width),
+            this.fit(theme.fg("muted", "Terminal coding agent"), width),
+            this.fit(this.compactShortcuts(), width),
+        ];
+        if (this.expanded) {
+            lines.push(...this.shortcutHints().map((line) => this.fit(line, width)));
+        }
+        return lines;
+    }
+    expandedShortcutLines(width) {
+        const hints = this.shortcutHints();
+        const innerWidth = Math.max(1, width - 4);
+        if (innerWidth >= 62) {
+            const columnWidth = Math.floor((innerWidth - 3) / 2);
+            const rows = [];
+            for (let i = 0; i < hints.length; i += 2) {
+                const left = this.fit(hints[i] ?? "", columnWidth);
+                const right = this.fit(hints[i + 1] ?? "", columnWidth);
+                rows.push(this.boxedLine(`${left} ${theme.fg("borderMuted", "│")} ${right}`, width));
+            }
+            return rows;
+        }
+        return hints.map((line) => this.boxedLine(line, width));
+    }
+    shortcutHints() {
+        const hint = (keybinding, description) => keyHint(keybinding, description);
+        return [
+            hint("app.interrupt", "to interrupt"),
+            hint("app.clear", "to clear"),
+            rawKeyHint(`${keyText("app.clear")} twice`, "to exit"),
+            hint("app.exit", "to exit (empty)"),
+            hint("app.suspend", "to suspend"),
+            keyHint("tui.editor.deleteToLineEnd", "to delete to end"),
+            hint("app.thinking.cycle", "to cycle thinking level"),
+            rawKeyHint(`${keyText("app.model.cycleForward")}/${keyText("app.model.cycleBackward")}`, "to cycle models"),
+            hint("app.model.select", "to select model"),
+            hint("app.tools.expand", "to expand tools"),
+            hint("app.thinking.toggle", "to expand thinking"),
+            hint("app.editor.external", "for external editor"),
+            rawKeyHint("/", "for commands"),
+            rawKeyHint("!", "to run bash"),
+            rawKeyHint("!!", "to run bash (no context)"),
+            hint("app.message.followUp", "to queue follow-up"),
+            hint("app.message.dequeue", "to edit all queued messages"),
+            hint("app.clipboard.pasteImage", "to paste image"),
+            rawKeyHint("drop files", "to attach"),
+        ];
+    }
+    compactShortcuts() {
+        return [
+            theme.fg("dim", "/help"),
+            theme.fg("muted", "commands"),
+            theme.fg("dim", keyText("app.model.cycleForward")),
+            theme.fg("muted", "model"),
+            theme.fg("dim", keyText("app.thinking.cycle")),
+            theme.fg("muted", "think"),
+            theme.fg("dim", keyText("app.interrupt")),
+            theme.fg("muted", "stop"),
+        ].join("  ");
+    }
+    brandText() {
+        return `${theme.bold(theme.fg("accent", this.brandLabel()))}${theme.fg("dim", ` v${this.version}`)}`;
+    }
+    brandLabel() {
+        return (this.appName.trim() || "pizza").toUpperCase();
+    }
+    displayName() {
+        const normalized = this.appName.trim() || "pizza";
+        return normalized.charAt(0).toUpperCase() + normalized.slice(1);
+    }
+    splitLine(left, right, width) {
+        const safeWidth = Math.max(1, width);
+        const maxRightWidth = Math.max(0, safeWidth - visibleWidth(left) - 1);
+        const fittedRight = maxRightWidth > 0 ? truncateToWidth(right, maxRightWidth, "") : "";
+        const maxLeftWidth = Math.max(1, safeWidth - visibleWidth(fittedRight) - (fittedRight ? 1 : 0));
+        const fittedLeft = truncateToWidth(left, maxLeftWidth, "");
+        const gap = Math.max(1, safeWidth - visibleWidth(fittedLeft) - visibleWidth(fittedRight));
+        return fittedRight ? `${fittedLeft}${" ".repeat(gap)}${fittedRight}` : this.fit(fittedLeft, safeWidth);
+    }
+    boxedLine(content, width) {
+        if (width < 4) {
+            return this.fit(content, width);
+        }
+        const border = (text) => theme.fg("border", text);
+        const inner = this.fit(content, width - 4);
+        return `${border("│")} ${inner} ${border("│")}`;
+    }
+    rule(width, left, fill, right) {
+        if (width <= 1) {
+            return theme.fg("border", fill.slice(0, 1));
+        }
+        return theme.fg("border", `${left}${fill.repeat(Math.max(0, width - 2))}${right}`);
+    }
+    fit(text, width) {
+        if (width <= 0)
+            return "";
+        return truncateToWidth(text, width, "", true);
+    }
+}

package/dist/modes/interactive/components/compaction-summary-message.d.ts

@@ -0,0 +1,15 @@
+import { Box, type MarkdownTheme } from "@earendil-works/pi-tui";
+import type { CompactionSummaryMessage } from "../../../core/messages.js";
+/**
+ * Component that renders a compaction message with collapsed/expanded state.
+ * Uses same background color as custom messages for visual consistency.
+ */
+export declare class CompactionSummaryMessageComponent extends Box {
+    private expanded;
+    private message;
+    private markdownTheme;
+    constructor(message: CompactionSummaryMessage, markdownTheme?: MarkdownTheme);
+    setExpanded(expanded: boolean): void;
+    invalidate(): void;
+    private updateDisplay;
+}

package/dist/modes/interactive/components/compaction-summary-message.js

@@ -0,0 +1,42 @@
+import { Box, Markdown, Spacer, Text } from "@earendil-works/pi-tui";
+import { getMarkdownTheme, theme } from "../theme/theme.js";
+import { keyText } from "./keybinding-hints.js";
+/**
+ * Component that renders a compaction message with collapsed/expanded state.
+ * Uses same background color as custom messages for visual consistency.
+ */
+export class CompactionSummaryMessageComponent extends Box {
+    constructor(message, markdownTheme = getMarkdownTheme()) {
+        super(1, 1, (t) => theme.bg("customMessageBg", t));
+        this.expanded = false;
+        this.message = message;
+        this.markdownTheme = markdownTheme;
+        this.updateDisplay();
+    }
+    setExpanded(expanded) {
+        this.expanded = expanded;
+        this.updateDisplay();
+    }
+    invalidate() {
+        super.invalidate();
+        this.updateDisplay();
+    }
+    updateDisplay() {
+        this.clear();
+        const tokenStr = this.message.tokensBefore.toLocaleString();
+        const label = theme.fg("customMessageLabel", `\x1b[1m[compaction]\x1b[22m`);
+        this.addChild(new Text(label, 0, 0));
+        this.addChild(new Spacer(1));
+        if (this.expanded) {
+            const header = `**Compacted from ${tokenStr} tokens**\n\n`;
+            this.addChild(new Markdown(header + this.message.summary, 0, 0, this.markdownTheme, {
+                color: (text) => theme.fg("customMessageText", text),
+            }));
+        }
+        else {
+            this.addChild(new Text(theme.fg("customMessageText", `Compacted from ${tokenStr} tokens (`) +
+                theme.fg("dim", keyText("app.tools.expand")) +
+                theme.fg("customMessageText", " to expand)"), 0, 0));
+        }
+    }
+}