@timurproko/a1 0.1.8-dev.3b54f21 → 0.1.8-dev.402

package/dist/integrations/pi/components/shell-presenters-info.js

@@ -0,0 +1,114 @@
+import { DynamicBorder, getMarkdownTheme } from "@earendil-works/pi-coding-agent";
+import { Container, Markdown, Spacer, Text } from "#pi-tui";
+import { KeybindingsManager } from "./upstream/adjacent/core/keybindings.js";
+import { PINNED_PI_LAYOUT, piTheme } from "./theme.js";
+import { componentPort, ensureTheme, formatSessionTokens } from "./shell-shared-facade.js";
+export function renderPiShellStatusText(message, width, outputPad = PINNED_PI_LAYOUT.outputPad) {
+    ensureTheme();
+    return new Text(piTheme().fg("dim", message), outputPad, 0).render(width);
+}
+export function renderPiShellCommandMessage(presentation, width, outputPad = PINNED_PI_LAYOUT.outputPad) {
+    ensureTheme();
+    const { kind, message, detail } = presentation;
+    const prefix = kind === "error" ? "Error: " : kind === "warning" ? "Warning: " : "";
+    const color = kind === "name" ? "dim" : kind === "error" || kind === "warning" ? kind : "accent";
+    const content = piTheme().fg(color, `${prefix}${message}`)
+        + (kind === "debug" && detail ? `\n${piTheme().fg("muted", detail)}` : "");
+    // Compatibility: pinned errors honor outputPad; warnings and command notices retain
+    // one-cell padding. New-session/debug notices also own one vertical padding row.
+    const text = new Text(content, kind === "error" ? outputPad : 1, kind === "new" || kind === "debug" ? 1 : 0);
+    return [
+        ...(kind === "name" && detail ? renderPiShellCommandMessage({ kind: "warning", message: detail }, width) : []),
+        ...new Spacer(1).render(width),
+        ...text.render(width),
+    ];
+}
+export function createPiShellSessionInfo(presentation) {
+    ensureTheme();
+    const { stats, sessionName, cacheWaste, usageBreakdown } = presentation;
+    let info = `${piTheme().bold("Session Info")}\n\n`;
+    if (sessionName)
+        info += `${piTheme().fg("dim", "Name:")} ${sessionName}\n`;
+    info += `${piTheme().fg("dim", "File:")} ${stats.sessionFile ?? "In-memory"}\n${piTheme().fg("dim", "ID:")} ${stats.sessionId}\n\n`;
+    info += `${piTheme().bold("Messages")}\n${piTheme().fg("dim", "Total:")} ${stats.totalMessages}\n${piTheme().fg("dim", "User:")} ${stats.userMessages}\n`;
+    info += `${piTheme().fg("dim", "Assistant:")} ${stats.assistantMessages}\n${piTheme().fg("dim", "Tools:")} ${stats.toolCalls} calls, ${stats.toolResults} results\n\n`;
+    info += `${piTheme().bold("Tokens")}\n`;
+    const { input, cacheRead, cacheWrite } = stats.tokens;
+    const promptTokens = input + cacheRead + cacheWrite;
+    info += `${piTheme().fg("dim", "Input:")} ${promptTokens.toLocaleString()}\n`;
+    if (promptTokens > 0 && (cacheRead > 0 || cacheWrite > 0)) {
+        info += `  ${piTheme().fg("dim", "Cached:")} ${cacheRead.toLocaleString()} ${piTheme().fg("dim", `(${((cacheRead / promptTokens) * 100).toFixed(1)}%)`)}\n`;
+        const written = cacheWrite > 0 ? ` ${piTheme().fg("dim", `(${cacheWrite.toLocaleString()} written to cache)`)}` : "";
+        info += `  ${piTheme().fg("dim", "Uncached:")} ${(input + cacheWrite).toLocaleString()}${written}\n`;
+    }
+    info += `${piTheme().fg("dim", "Output:")} ${stats.tokens.output.toLocaleString()}\n${piTheme().fg("dim", "Total:")} ${stats.tokens.total.toLocaleString()}\n`;
+    if (stats.cost > 0 || cacheWaste.missedTokens > 0) {
+        info += `\n${piTheme().bold("Cost")}\n${piTheme().fg("dim", "Total:")} $${stats.cost.toFixed(3)}`;
+        if (usageBreakdown.length > 1)
+            for (const entry of usageBreakdown)
+                info += `\n  ${piTheme().fg("dim", `${entry.key}:`)} $${entry.cost.toFixed(3)} ${piTheme().fg("dim", `(${formatSessionTokens(entry.tokens)} tokens)`)}`;
+        if (cacheWaste.missedTokens > 0) {
+            const detail = `${cacheWaste.missedTokens.toLocaleString()} tokens, ${cacheWaste.missCount === 1 ? "1 miss" : `${cacheWaste.missCount} misses`}`;
+            info += cacheWaste.missedCost >= 0.0001 ? `\n${piTheme().fg("dim", "Cache Re-billed:")} $${cacheWaste.missedCost.toFixed(3)} ${piTheme().fg("dim", `(${detail})`)}` : `\n${piTheme().fg("dim", "Cache Re-billed:")} ${detail}`;
+        }
+    }
+    const container = new Container();
+    container.addChild(new Spacer(1));
+    container.addChild(new Text(info, 1, 0));
+    return componentPort(container);
+}
+export function createPiShellCollapsedChangelog() {
+    ensureTheme();
+    const container = new Container();
+    container.addChild(new Spacer(1));
+    container.addChild(new DynamicBorder());
+    container.addChild(new Text(`${piTheme().bold(piTheme().fg("accent", "What's New"))}\n${piTheme().fg("muted", "Run /changelog to view the full release notes.")}`, 1, 0));
+    container.addChild(new DynamicBorder());
+    return componentPort(container);
+}
+export function createPiShellChangelog(markdown) {
+    ensureTheme();
+    const container = new Container();
+    container.addChild(new Spacer(1));
+    container.addChild(new DynamicBorder());
+    container.addChild(new Text(piTheme().bold(piTheme().fg("accent", "What's New")), 1, 0));
+    container.addChild(new Spacer(1));
+    container.addChild(new Markdown(markdown.trim() || "No changelog entries found.", 1, 1, getMarkdownTheme()));
+    container.addChild(new DynamicBorder());
+    return componentPort(container);
+}
+function shortcutDisplay(key) {
+    // Platform: pinned Pi labels Alt as Option on macOS, including extension shortcuts.
+    return key.split("/").map(binding => binding.split("+").map(part => {
+        const label = process.platform === "darwin" && part.toLowerCase() === "alt" ? "option" : part;
+        return label.charAt(0).toUpperCase() + label.slice(1);
+    }).join("+")).join("/");
+}
+export function createPiShellHotkeys(bindings, getShortcuts = () => [], profile = "pi") {
+    ensureTheme();
+    const keys = profile === "a1" ? KeybindingsManager.fromOwnedBindings(bindings) : new KeybindingsManager(bindings);
+    // Compatibility: the owned viewport consumes these physical chords before editor actions.
+    const display = (action) => keys.getKeys(action)
+        .filter(key => profile !== "a1" || (key !== "ctrl+home" && key !== "ctrl+end"))
+        .map(shortcutDisplay).join("/");
+    const row = (actions, description) => `| ${actions.map(action => {
+        const label = display(action);
+        return profile === "a1" && label.length === 0
+            ? action === "app.model.select" ? "Unbound (`/model`)" : "Unbound"
+            : `\`${label}\``;
+    }).join(" / ")} | ${description} |`;
+    let markdown = ["**Navigation**", "| Key | Action |", "|-----|--------|", row(["tui.editor.cursorUp", "tui.editor.cursorDown", "tui.editor.cursorLeft", "tui.editor.cursorRight"], "Move cursor / browse history"), row(["tui.editor.cursorWordLeft", "tui.editor.cursorWordRight"], "Move by word"), row(["tui.editor.cursorLineStart"], profile === "a1" ? "Start of prompt line" : "Start of line"), row(["tui.editor.cursorLineEnd"], profile === "a1" ? "End of prompt line" : "End of line"), ...(profile === "a1" ? ["| `Ctrl+Home` | Start of content |", "| `Ctrl+End` | End of content / follow output |"] : []), row(["tui.editor.jumpForward"], "Jump forward to character"), row(["tui.editor.jumpBackward"], "Jump backward to character"), row(["tui.editor.pageUp", "tui.editor.pageDown"], "Scroll by page"), "", "**Editing**", "| Key | Action |", "|-----|--------|", row(["tui.input.submit"], "Send message"), row(["tui.input.newLine"], `New line${process.platform === "win32" ? " (Ctrl+Enter on Windows Terminal)" : ""}`), row(["tui.editor.deleteWordBackward"], "Delete word backwards"), row(["tui.editor.deleteWordForward"], "Delete word forwards"), row(["tui.editor.deleteToLineStart"], "Delete to start of line"), row(["tui.editor.deleteToLineEnd"], "Delete to end of line"), row(["tui.editor.yank"], "Paste the most-recently-deleted text"), row(["tui.editor.yankPop"], "Cycle through the deleted text after pasting"), row(["tui.editor.undo"], "Undo"), "", "**Other**", "| Key | Action |", "|-----|--------|", row(["tui.input.tab"], "Path completion / accept autocomplete"), row(["app.interrupt"], "Cancel autocomplete / abort streaming"), row(["app.clear"], "Clear editor (first) / exit (second)"), row(["app.exit"], "Exit (when editor is empty)"), row(["app.suspend"], "Suspend to background"), row(["app.thinking.cycle"], "Cycle thinking level"), row(["app.model.cycleForward", "app.model.cycleBackward"], "Cycle models"), row(["app.model.select"], "Open model selector"), row(["app.tools.expand"], "Toggle tool output expansion"), row(["app.thinking.toggle"], "Toggle thinking block visibility"), row(["app.editor.external"], "Edit message in external editor"), row(["app.message.copy"], "Copy last assistant message"), row(["app.message.followUp"], "Queue follow-up message"), row(["app.message.dequeue"], "Restore queued messages"), row(["app.clipboard.pasteImage"], "Paste image or text from clipboard"), "| `/` | Slash commands |", "| `!` | Run bash command |", "| `!!` | Run bash command (excluded from context) |"].join("\n");
+    const shortcuts = getShortcuts(bindings ?? keys.getEffectiveConfig());
+    if (shortcuts.length > 0) {
+        markdown += "\n\n**Extensions**\n| Key | Action |\n|-----|--------|\n";
+        markdown += shortcuts.map(shortcut => `| \`${shortcutDisplay(shortcut.key)}\` | ${shortcut.description} |`).join("\n");
+    }
+    const container = new Container();
+    container.addChild(new Spacer(1));
+    container.addChild(new DynamicBorder());
+    container.addChild(new Text(piTheme().bold(piTheme().fg("accent", "Keyboard Shortcuts")), 1, 0));
+    container.addChild(new Spacer(1));
+    container.addChild(new Markdown(markdown, 1, 1, getMarkdownTheme()));
+    container.addChild(new DynamicBorder());
+    return componentPort(container);
+}

package/dist/integrations/pi/components/shell-presenters-transcript.d.ts

@@ -0,0 +1,29 @@
+import { AssistantMessageComponent } from "@earendil-works/pi-coding-agent";
+import { type MermaidRenderingMode } from "./upstream/components/mermaid.js";
+import type { OwnedUiTranscriptBlock } from "../../../contracts/owned-ui/index.js";
+import { type PiShellSubmittedPromptComposer } from "./submitted-prompt-adapter.js";
+export { isPiPromptStyleCompaction, type PiShellSubmittedPromptComposer } from "./submitted-prompt-adapter.js";
+import { type PiShellExtensionRendererResolver, type PiShellImageAssetResolver, type PiShellTranscriptComponentPort } from "./shell-shared-facade.js";
+export declare function createPiShellTranscriptComponent(initial: OwnedUiTranscriptBlock, cwd: string, extensions?: PiShellExtensionRendererResolver, submittedPrompt?: PiShellSubmittedPromptComposer, initialOutputPad?: 0 | 1, initialHideThinkingBlock?: boolean, initialMermaidRenderingMode?: MermaidRenderingMode, initialShowImages?: boolean, initialImageWidthCells?: number, imageAssets?: PiShellImageAssetResolver, presentation?: {
+    readonly getColumns: () => number;
+    readonly getRows: () => number;
+    readonly changed: () => void;
+}): PiShellTranscriptComponentPort;
+export declare function renderPiShellTranscriptBlock(block: OwnedUiTranscriptBlock, width: number, cwd: string): readonly string[];
+/**
+ * Pinned Pi's CLI prints startup diagnostics with `reportDiagnostics` before
+ * the banner: the whole line, prefix included, in chalk's basic ANSI severity
+ * colour — not the theme's tokens — with info lines dim and unprefixed.
+ */
+export declare function renderPiShellStartupDiagnostic(diagnostic: {
+    readonly severity: "info" | "warning" | "error";
+    readonly message: string;
+}, width: number): readonly string[];
+/**
+ * Pinned Pi's `showPackageUpdateNotification` banner: warning-coloured dynamic
+ * borders around a bold warning title, the muted update instruction with the
+ * accent command, and the package list.
+ */
+export declare function renderPiShellPackageUpdateNotice(packages: readonly string[], width: number): readonly string[];
+type PiAssistantMessage = NonNullable<ConstructorParameters<typeof AssistantMessageComponent>[0]>;
+export declare function validatedAssistantMessage(block: OwnedUiTranscriptBlock): PiAssistantMessage;

package/dist/{src/foundation/pi-component-adapter → integrations/pi/components}/shell-presenters-transcript.js

@@ -1,145 +1,159 @@
-import { AssistantMessageComponent, BashExecutionComponent, CompactionSummaryMessageComponent, CustomMessageComponent, DynamicBorder, getMarkdownTheme, parseSkillBlock, ToolExecutionComponent, UserMessageComponent, } from "@earendil-works/pi-coding-agent";
-import { SkillInvocationMessageComponent, } from "./upstream/components/skill-invocation-message.js";
-import { Container, Markdown, Spacer, Text, } from "#pi-tui";
-import { KeybindingsManager, } from "./upstream/adjacent/core/keybindings.js";
+import { AssistantMessageComponent, BashExecutionComponent, CompactionSummaryMessageComponent, CustomMessageComponent, DynamicBorder, getMarkdownTheme, parseSkillBlock, UserMessageComponent, } from "@earendil-works/pi-coding-agent";
+import { ToolExecutionComponent } from "./upstream/components/tool-execution.js";
+import { SkillInvocationMessageComponent } from "./upstream/components/skill-invocation-message.js";
+import { piToolArguments as toolArguments, updatePiToolResult as updateToolResult } from "./tool-result-adapter.js";
+import { createTranscriptImageResolver } from "./transcript-image-resolver.js";
+import { createMermaidMarkdownTransformer } from "./upstream/components/mermaid.js";
+import { Container, Image, Spacer, Text, } from "#pi-tui";
+import { PRODUCT_TEXT } from "../../../product-identity.js";
+import { createPiSubmittedPromptComponent, isPiPromptStyleCompaction, } from "./submitted-prompt-adapter.js";
+export { isPiPromptStyleCompaction } from "./submitted-prompt-adapter.js";
 import { PINNED_PI_LAYOUT, piTheme, } from "./theme.js";
-import { componentPort, createTuiFacade, ensureTheme, formatSessionTokens, isRecord, } from "./shell-shared-facade.js";
-export function renderPiShellStatusText(message, width) {
-    ensureTheme();
-    return new Text(piTheme().fg("dim", message), PINNED_PI_LAYOUT.outputPad, 0).render(width);
-}
-export function createPiShellSessionInfo(presentation) {
-    ensureTheme();
-    const { stats, sessionName, cacheWaste, usageBreakdown } = presentation;
-    let info = `${piTheme().bold("Session Info")}\n\n`;
-    if (sessionName)
-        info += `${piTheme().fg("dim", "Name:")} ${sessionName}\n`;
-    info += `${piTheme().fg("dim", "File:")} ${stats.sessionFile ?? "In-memory"}\n`;
-    info += `${piTheme().fg("dim", "ID:")} ${stats.sessionId}\n\n`;
-    info += `${piTheme().bold("Messages")}\n`;
-    info += `${piTheme().fg("dim", "Total:")} ${stats.totalMessages}\n`;
-    info += `${piTheme().fg("dim", "User:")} ${stats.userMessages}\n`;
-    info += `${piTheme().fg("dim", "Assistant:")} ${stats.assistantMessages}\n`;
-    info += `${piTheme().fg("dim", "Tools:")} ${stats.toolCalls} calls, ${stats.toolResults} results\n\n`;
-    info += `${piTheme().bold("Tokens")}\n`;
-    const { input, cacheRead, cacheWrite } = stats.tokens;
-    const promptTokens = input + cacheRead + cacheWrite;
-    info += `${piTheme().fg("dim", "Input:")} ${promptTokens.toLocaleString()}\n`;
-    if (promptTokens > 0 && (cacheRead > 0 || cacheWrite > 0)) {
-        const hitRate = piTheme().fg("dim", `(${((cacheRead / promptTokens) * 100).toFixed(1)}%)`);
-        info += `  ${piTheme().fg("dim", "Cached:")} ${cacheRead.toLocaleString()} ${hitRate}\n`;
-        const written = cacheWrite > 0 ? ` ${piTheme().fg("dim", `(${cacheWrite.toLocaleString()} written to cache)`)}` : "";
-        info += `  ${piTheme().fg("dim", "Uncached:")} ${(input + cacheWrite).toLocaleString()}${written}\n`;
-    }
-    info += `${piTheme().fg("dim", "Output:")} ${stats.tokens.output.toLocaleString()}\n`;
-    info += `${piTheme().fg("dim", "Total:")} ${stats.tokens.total.toLocaleString()}\n`;
-    if (stats.cost > 0 || cacheWaste.missedTokens > 0) {
-        info += `\n${piTheme().bold("Cost")}\n`;
-        info += `${piTheme().fg("dim", "Total:")} $${stats.cost.toFixed(3)}`;
-        if (usageBreakdown.length > 1) {
-            for (const entry of usageBreakdown) {
-                info += `\n  ${piTheme().fg("dim", `${entry.key}:`)} $${entry.cost.toFixed(3)} ${piTheme().fg("dim", `(${formatSessionTokens(entry.tokens)} tokens)`)}`;
-            }
-        }
-        if (cacheWaste.missedTokens > 0) {
-            const missLabel = cacheWaste.missCount === 1 ? "1 miss" : `${cacheWaste.missCount} misses`;
-            const detail = `${cacheWaste.missedTokens.toLocaleString()} tokens, ${missLabel}`;
-            info += cacheWaste.missedCost >= 0.0001
-                ? `\n${piTheme().fg("dim", "Cache Re-billed:")} $${cacheWaste.missedCost.toFixed(3)} ${piTheme().fg("dim", `(${detail})`)}`
-                : `\n${piTheme().fg("dim", "Cache Re-billed:")} ${detail}`;
-        }
-    }
-    const container = new Container();
-    container.addChild(new Spacer(1));
-    container.addChild(new Text(info, 1, 0));
-    return componentPort(container);
-}
-export function createPiShellChangelog(markdown) {
-    ensureTheme();
-    const container = new Container();
-    container.addChild(new Spacer(1));
-    container.addChild(new DynamicBorder());
-    container.addChild(new Text(piTheme().bold(piTheme().fg("accent", "What's New")), 1, 0));
-    container.addChild(new Spacer(1));
-    container.addChild(new Markdown(markdown.trim() || "No changelog entries found.", 1, 1, getMarkdownTheme()));
-    container.addChild(new DynamicBorder());
-    return componentPort(container);
-}
-export function createPiShellHotkeys() {
-    ensureTheme();
-    const keys = new KeybindingsManager();
-    const display = (action) => keys.getKeys(action)
-        .map(key => key.split("+").map(part => part.charAt(0).toUpperCase() + part.slice(1)).join("+"))
-        .join("/");
-    const row = (actions, description) => `| ${actions.map(action => `\`${display(action)}\``).join(" / ")} | ${description} |`;
-    const markdown = [
-        "**Navigation**", "| Key | Action |", "|-----|--------|",
-        row(["tui.editor.cursorUp", "tui.editor.cursorDown", "tui.editor.cursorLeft", "tui.editor.cursorRight"], "Move cursor / browse history"),
-        row(["tui.editor.cursorWordLeft", "tui.editor.cursorWordRight"], "Move by word"),
-        row(["tui.editor.cursorLineStart"], "Start of line"), row(["tui.editor.cursorLineEnd"], "End of line"),
-        row(["tui.editor.jumpForward"], "Jump forward to character"), row(["tui.editor.jumpBackward"], "Jump backward to character"),
-        row(["tui.editor.pageUp", "tui.editor.pageDown"], "Scroll by page"), "",
-        "**Editing**", "| Key | Action |", "|-----|--------|",
-        row(["tui.input.submit"], "Send message"),
-        row(["tui.input.newLine"], `New line${process.platform === "win32" ? " (Ctrl+Enter on Windows Terminal)" : ""}`),
-        row(["tui.editor.deleteWordBackward"], "Delete word backwards"), row(["tui.editor.deleteWordForward"], "Delete word forwards"),
-        row(["tui.editor.deleteToLineStart"], "Delete to start of line"), row(["tui.editor.deleteToLineEnd"], "Delete to end of line"),
-        row(["tui.editor.yank"], "Paste the most-recently-deleted text"), row(["tui.editor.yankPop"], "Cycle through the deleted text after pasting"),
-        row(["tui.editor.undo"], "Undo"), "", "**Other**", "| Key | Action |", "|-----|--------|",
-        row(["tui.input.tab"], "Path completion / accept autocomplete"), row(["app.interrupt"], "Cancel autocomplete / abort streaming"),
-        row(["app.clear"], "Clear editor (first) / exit (second)"), row(["app.exit"], "Exit (when editor is empty)"),
-        row(["app.suspend"], "Suspend to background"), row(["app.thinking.cycle"], "Cycle thinking level"),
-        row(["app.model.cycleForward", "app.model.cycleBackward"], "Cycle models"), row(["app.model.select"], "Open model selector"),
-        row(["app.tools.expand"], "Toggle tool output expansion"), row(["app.thinking.toggle"], "Toggle thinking block visibility"),
-        row(["app.editor.external"], "Edit message in external editor"), row(["app.message.copy"], "Copy last assistant message"),
-        row(["app.message.followUp"], "Queue follow-up message"), row(["app.message.dequeue"], "Restore queued messages"),
-        row(["app.clipboard.pasteImage"], "Paste image or text from clipboard"),
-        "| `/` | Slash commands |", "| `!` | Run bash command |", "| `!!` | Run bash command (excluded from context) |",
-    ].join("\n");
-    const container = new Container();
-    container.addChild(new Spacer(1));
-    container.addChild(new DynamicBorder());
-    container.addChild(new Text(piTheme().bold(piTheme().fg("accent", "Keyboard Shortcuts")), 1, 0));
-    container.addChild(new Spacer(1));
-    container.addChild(new Markdown(markdown, 1, 1, getMarkdownTheme()));
-    container.addChild(new DynamicBorder());
-    return componentPort(container);
-}
-export function createPiShellTranscriptComponent(initial, cwd, extensions) {
+import { componentPort, createTuiFacade, ensureTheme, isRecord, } from "./shell-shared-facade.js";
+export function createPiShellTranscriptComponent(initial, cwd, extensions, submittedPrompt, initialOutputPad = PINNED_PI_LAYOUT.outputPad, initialHideThinkingBlock = false, initialMermaidRenderingMode = "off", initialShowImages = true, initialImageWidthCells = 80, imageAssets, presentation) {
     ensureTheme();
     let block = initial;
+    const retainedImages = createTranscriptImageResolver(imageAssets, initial);
     let expanded = false;
-    let component = transcriptComponent(block, cwd, expanded, extensions);
+    let outputPad = initialOutputPad;
+    let hideThinkingBlock = initialHideThinkingBlock;
+    let mermaidRenderingMode = initialMermaidRenderingMode;
+    let showImages = initialShowImages;
+    let imageWidthCells = initialImageWidthCells;
+    let disposed = false;
+    let mount = 0;
+    let updating = false;
+    let dirty = false;
+    let presentationRevision = 0;
+    let mountedTool;
+    const mutate = (action) => {
+        const previous = updating;
+        updating = true;
+        try {
+            return action();
+        }
+        finally {
+            updating = previous;
+        }
+    };
+    const rebuild = () => {
+        mountedTool?.dispose();
+        const token = ++mount;
+        const requestRender = () => {
+            if (disposed || updating || token !== mount || dirty)
+                return;
+            dirty = true;
+            presentationRevision++;
+            presentation?.changed();
+        };
+        return mutate(() => {
+            const next = transcriptComponent(block, cwd, expanded, extensions, submittedPrompt, outputPad, hideThinkingBlock, mermaidRenderingMode, showImages, imageWidthCells, retainedImages, createTuiFacade({ getColumns: presentation?.getColumns ?? (() => 80),
+                getRows: presentation?.getRows ?? (() => 24), requestRender }));
+            mountedTool = next instanceof ToolExecutionComponent ? next : undefined;
+            return withTranscriptImages(next, block, retainedImages, showImages, imageWidthCells);
+        });
+    };
+    let component = rebuild();
     return {
         get id() { return block.id; },
         get revision() { return block.revision; },
-        render: width => component.render(width),
-        invalidate: () => component.invalidate(),
+        get presentationRevision() { return presentationRevision; },
+        render: width => {
+            dirty = false;
+            const rows = mutate(() => renderWithOutputPad(component, block.kind, width, outputPad));
+            const warning = block.toolRendering?.unavailable;
+            return warning === undefined ? rows : [...rows, ...new Text(piTheme().fg("warning", warning), outputPad, 0).render(width)];
+        },
+        invalidate: () => mutate(() => component.invalidate()),
+        dispose: () => { disposed = true; mount++; mountedTool?.dispose(); retainedImages.dispose(); },
         update(next) {
             if (next.id !== block.id)
                 throw new TypeError("Pi transcript component identity cannot change");
             const previous = block;
             block = next;
-            if (!updateTranscriptComponent(component, previous, next, expanded)) {
-                component = transcriptComponent(block, cwd, expanded, extensions);
-            }
+            retainedImages.update(next);
+            if (!mutate(() => updateTranscriptComponent(component, previous, next, expanded, retainedImages)))
+                component = rebuild();
         },
         setExpanded(next) {
             if (expanded === next)
                 return;
             expanded = next;
-            if ("setExpanded" in component && typeof component.setExpanded === "function") {
-                component.setExpanded(expanded);
-            }
-            else {
-                component = transcriptComponent(block, cwd, expanded, extensions);
+            if (submittedPrompt !== undefined && isPiPromptStyleCompaction(block))
+                return;
+            if ("setExpanded" in component && typeof component.setExpanded === "function")
+                mutate(() => {
+                    if ("setExpanded" in component && typeof component.setExpanded === "function")
+                        component.setExpanded(expanded);
+                });
+            else
+                component = rebuild();
+        },
+        setOutputPad(padding) {
+            if (outputPad === padding)
+                return;
+            outputPad = padding;
+            component = rebuild();
+        },
+        setHideThinkingBlock(hidden) {
+            if (hideThinkingBlock === hidden)
+                return;
+            hideThinkingBlock = hidden;
+            component = rebuild();
+        },
+        setMermaidRenderingMode(mode) {
+            if (mermaidRenderingMode === mode)
+                return;
+            mermaidRenderingMode = mode;
+            component = rebuild();
+        },
+        setImagePresentation(show, width) {
+            showImages = show;
+            imageWidthCells = width;
+            if (component instanceof ToolExecutionComponent) {
+                const tool = component;
+                mutate(() => { tool.setShowImages(show); tool.setImageWidthCells(width); });
             }
+            else
+                component = rebuild();
         },
     };
 }
+function withTranscriptImages(component, block, assets, showImages, imageWidthCells) {
+    // Compatibility: Pi owns tool images and renderer state, including references introduced after the call header.
+    if (component instanceof ToolExecutionComponent)
+        return component;
+    const references = block.imageReferences ?? [];
+    if (references.length === 0)
+        return component;
+    const container = new Container();
+    container.addChild(component);
+    for (const reference of references) {
+        container.addChild(new Spacer(1));
+        const asset = assets?.resolve(reference.assetId) ?? null;
+        if (!showImages) {
+            container.addChild(new Text(piTheme().fg("muted", `[Image hidden: ${reference.mimeType}, ${reference.byteLength} bytes]`), 1, 0));
+        }
+        else if (asset === null) {
+            container.addChild(new Text(piTheme().fg("warning", `[Image unavailable: ${reference.mimeType}]`), 1, 0));
+        }
+        else {
+            container.addChild(new Image(asset.data, asset.mimeType, {
+                fallbackColor: text => piTheme().fg("muted", text),
+            }, { maxWidthCells: imageWidthCells, filename: reference.assetId }));
+        }
+    }
+    return container;
+}
+function renderWithOutputPad(component, kind, width, outputPad) {
+    const rows = component.render(width);
+    if (outputPad !== 0 || (kind !== "tool-call" && kind !== "tool-result" && kind !== "bash"))
+        return rows;
+    return rows.map(row => row.startsWith(" ") ? row.slice(1) : row);
+}
 export function renderPiShellTranscriptBlock(block, width, cwd) {
     ensureTheme();
-    return transcriptComponent(block, cwd, true).render(width);
+    return transcriptComponent(block, cwd, true, undefined, undefined, PINNED_PI_LAYOUT.outputPad, false, "off", true, 80).render(width);
 }
 /**
  * Pinned Pi's CLI prints startup diagnostics with `reportDiagnostics` before
@@ -168,18 +182,18 @@ export function renderPiShellPackageUpdateNotice(packages, width) {
     container.addChild(new Spacer(1));
     container.addChild(new DynamicBorder(text => theme.fg("warning", text)));
     container.addChild(new Text(`${theme.bold(theme.fg("warning", "Package Updates Available"))}\n`
-        + `${theme.fg("muted", "Package updates are available. Run ")}${theme.fg("accent", "pi update --extensions")}\n`
+        + `${theme.fg("muted", "Package updates are available. Run ")}${theme.fg("accent", `${PRODUCT_TEXT.commandName} pi update --extensions`)}\n`
         + `${theme.fg("muted", "Packages:")}\n`
         + packages.map(name => `- ${name}`).join("\n"), 1, 0));
     container.addChild(new DynamicBorder(text => theme.fg("warning", text)));
     return container.render(width);
 }
-function transcriptComponent(block, cwd, expanded, extensions) {
+function transcriptComponent(block, cwd, expanded, extensions, submittedPrompt, outputPad, hideThinkingBlock, mermaidRenderingMode, showImages, imageWidthCells, imageAssets, tui) {
     switch (block.kind) {
         case "user": {
             const skill = parseSkillBlock(block.text);
             if (!skill)
-                return new UserMessageComponent(block.text);
+                return submittedPrompt ? createPiSubmittedPromptComponent(block, submittedPrompt) : new UserMessageComponent(block.text);
             const invocation = new SkillInvocationMessageComponent(skill, getMarkdownTheme());
             invocation.setExpanded(expanded);
             if (!skill.userMessage)
@@ -192,14 +206,18 @@ function transcriptComponent(block, cwd, expanded, extensions) {
         }
         case "assistant":
         case "thinking":
-            return assistantComponent(block);
+            return assistantComponent(block, outputPad, hideThinkingBlock, mermaidRenderingMode);
         case "tool-call":
         case "tool-result": {
-            const component = toolComponent(block, cwd, extensions);
+            const component = toolComponent(block, cwd, extensions, showImages, imageWidthCells, imageAssets, tui);
             component.setExpanded(expanded);
             return component;
         }
         case "compaction": {
+            if (submittedPrompt !== undefined && isPiPromptStyleCompaction(block)) {
+                const tokens = numericPayload(block, "tokensBefore").toLocaleString("en-US");
+                return createPiSubmittedPromptComponent(block, submittedPrompt, `Compacted from ${tokens} tokens`);
+            }
             const component = new CompactionSummaryMessageComponent({
                 role: "compactionSummary",
                 summary: block.text,
@@ -210,18 +228,18 @@ function transcriptComponent(block, cwd, expanded, extensions) {
             return component;
         }
         case "retry":
-            return new Text(piTheme().fg("warning", `Retry: ${block.text}`), PINNED_PI_LAYOUT.outputPad, 0);
+            return new Text(piTheme().fg("warning", `Retry: ${block.text}`), outputPad, 0);
         case "error":
-            return new Text(piTheme().fg("error", `Error: ${block.text}`), PINNED_PI_LAYOUT.outputPad, 0);
+            return new Text(piTheme().fg("error", `Error: ${block.text}`), outputPad, 0);
         case "system":
-            return new Text(piTheme().fg("dim", block.text), PINNED_PI_LAYOUT.outputPad, 0);
+            return new Text(piTheme().fg("dim", block.text), outputPad, 0);
         case "custom":
-            return customMessageComponent(block, expanded, extensions);
+            return customMessageComponent(block, expanded, extensions, outputPad);
         case "bash":
-            return bashExecutionComponent(block, cwd, expanded);
+            return bashExecutionComponent(block, cwd, expanded, tui);
     }
 }
-function updateTranscriptComponent(component, previous, next, expanded) {
+function updateTranscriptComponent(component, previous, next, expanded, imageAssets) {
     if (component instanceof AssistantMessageComponent && next.kind === previous.kind
         && (next.kind === "assistant" || next.kind === "thinking")) {
         component.updateContent(validatedAssistantMessage(next), next.status === "live");
@@ -230,22 +248,10 @@ function updateTranscriptComponent(component, previous, next, expanded) {
     if (component instanceof ToolExecutionComponent
         && (next.kind === "tool-call" || next.kind === "tool-result")
         && (previous.kind === "tool-call" || previous.kind === "tool-result")) {
-        const payload = blockPayload(next);
-        component.updateArgs(toolArguments(payload));
-        if (next.status === "live")
-            component.markExecutionStarted();
-        if (next.status === "finalized" || payload.argsComplete === true)
-            component.setArgsComplete();
-        if (payload.partialResult === true) {
-            component.updateResult({ content: [{ type: "text", text: next.text }], isError: false }, true);
-        }
-        else if (next.kind === "tool-result") {
-            component.updateResult({
-                content: [{ type: "text", text: next.text }],
-                isError: payload.isError === true,
-            }, next.status === "live");
-        }
-        component.setExpanded(expanded);
+        if (toolArguments(previous) !== toolArguments(next))
+            component.updateArgs(toolArguments(next));
+        applyToolState(component, next, previous);
+        updateToolResult(component, next, imageAssets);
         return true;
     }
     if (component instanceof BashExecutionComponent && next.kind === "bash" && previous.kind === "bash") {
@@ -265,8 +271,9 @@ function updateTranscriptComponent(component, previous, next, expanded) {
     }
     return false;
 }
-function assistantComponent(block) {
-    const component = new AssistantMessageComponent(undefined, false, getMarkdownTheme(), undefined, PINNED_PI_LAYOUT.outputPad);
+function assistantComponent(block, outputPad, hideThinkingBlock, mermaidRenderingMode) {
+    const transformer = createMermaidMarkdownTransformer({ getMode: () => mermaidRenderingMode, theme: piTheme() });
+    const component = new AssistantMessageComponent(undefined, hideThinkingBlock, getMarkdownTheme(), undefined, outputPad, [transformer]);
     component.updateContent(validatedAssistantMessage(block), block.status === "live");
     return component;
 }
@@ -334,28 +341,28 @@ function validatedMessageRenderer(value) {
 function isPiMessageRenderer(value) {
     return typeof value === "function";
 }
-function toolComponent(block, cwd, extensions) {
+function toolComponent(block, cwd, extensions, showImages, imageWidthCells, imageAssets, tui) {
     const payload = blockPayload(block);
     const toolCallId = stringPayload(payload, "toolCallId") ?? block.id;
     const toolName = stringPayload(payload, "toolName") ?? block.title ?? "tool";
-    const argumentsPayload = toolArguments(payload);
-    const component = new ToolExecutionComponent(toolName, toolCallId, argumentsPayload, undefined, validatedToolDefinition(extensions?.getToolDefinition(toolName)), createTuiFacade({ getColumns: () => 80, getRows: () => 24, requestRender() { }, onSubmit() { } }), cwd);
-    if (block.status === "live")
+    const argumentsPayload = toolArguments(block);
+    const component = new ToolExecutionComponent(toolName, toolCallId, argumentsPayload, { showImages, imageWidthCells }, validatedToolDefinition(extensions?.getToolDefinition(toolName)), tui ?? createTuiFacade({ getColumns: () => 80, getRows: () => 24, requestRender() { } }), cwd);
+    applyToolState(component, block);
+    updateToolResult(component, block, imageAssets);
+    return component;
+}
+/** The public renderer's argument-complete and execution-started flags are independent. */
+function applyToolState(component, block, previous) {
+    const started = (value) => value.toolState?.execution === "running"
+        || value.toolState === undefined && value.status === "live";
+    const complete = (value) => value.toolState?.argsComplete
+        ?? (value.status === "finalized" || blockPayload(value).argsComplete === true);
+    if (started(block) && (previous === undefined || !started(previous)))
         component.markExecutionStarted();
-    if (block.status === "finalized" || payload.argsComplete === true)
+    if (complete(block) && (previous === undefined || !complete(previous)))
         component.setArgsComplete();
-    if (payload.partialResult === true) {
-        component.updateResult({ content: [{ type: "text", text: block.text }], isError: false }, true);
-    }
-    else if (block.kind === "tool-result") {
-        component.updateResult({
-            content: [{ type: "text", text: block.text }],
-            isError: payload.isError === true,
-        });
-    }
-    return component;
 }
-function customMessageComponent(block, expanded, extensions) {
+function customMessageComponent(block, expanded, extensions, outputPad) {
     const payload = blockPayload(block);
     const message = {
         role: "custom",
@@ -366,13 +373,13 @@ function customMessageComponent(block, expanded, extensions) {
         timestamp: numericPayload(block, "timestamp") || 0,
     };
     const renderer = validatedMessageRenderer(extensions?.getMessageRenderer(message.customType));
-    const component = new CustomMessageComponent(message, renderer, getMarkdownTheme(), PINNED_PI_LAYOUT.outputPad);
+    const component = new CustomMessageComponent(message, renderer, getMarkdownTheme(), outputPad);
     component.setExpanded(expanded);
     return component;
 }
-function bashExecutionComponent(block, cwd, expanded) {
+function bashExecutionComponent(block, cwd, expanded, tui) {
     const payload = blockPayload(block);
-    const component = new BashExecutionComponent(stringPayload(payload, "command") ?? block.title ?? "", createTuiFacade({ getColumns: () => 80, getRows: () => 24, requestRender() { } }), payload.excludeFromContext === true);
+    const component = new BashExecutionComponent(stringPayload(payload, "command") ?? block.title ?? "", tui ?? createTuiFacade({ getColumns: () => 80, getRows: () => 24, requestRender() { } }), payload.excludeFromContext === true);
     if (block.text)
         component.appendOutput(block.text);
     if (block.status === "finalized")
@@ -396,9 +403,6 @@ function completeBashComponent(component, block) {
         maxBytes: 50 * 1024,
     } : undefined, stringPayload(payload, "fullOutputPath"));
 }
-function toolArguments(payload) {
-    return isRecord(payload.arguments) && "json" in payload.arguments ? payload.arguments.json : payload.arguments ?? {};
-}
 function transcriptText(block) {
     if (block.kind === "retry")
         return piTheme().fg("warning", `Retry: ${block.text}`);