@selesai/code 0.13.40 → 0.14.3

package/dist/modes/interactive/components/settings-selector.js

@@ -1,16 +1,12 @@
 import { getSupportedThinkingLevels } from "@earendil-works/pi-ai";
-import { Container, getCapabilities, SelectList, SettingsList, Spacer, Text, } from "@earendil-works/pi-tui";
+import { Container, getCapabilities, SettingsList, Spacer, Text, } from "@earendil-works/pi-tui";
 import { formatHttpIdleTimeoutMs, HTTP_IDLE_TIMEOUT_CHOICES } from "../../../core/http-dispatcher.js";
 import { CACHE_WARMING_MODES, } from "../../../core/settings-manager.js";
-import { getSelectListTheme, getSettingsListTheme, parseAutoThemeSetting, theme, } from "../theme/theme.js";
+import { getSettingsListTheme, parseAutoThemeSetting, SYSTEM_THEME_NAME, theme, } from "../theme/theme.js";
 import { DynamicBorder } from "./dynamic-border.js";
 import { keyDisplayText } from "./keybinding-hints.js";
-import { SteppedSubmenu } from "./settings-submenu.js";
+import { SelectSubmenu, SteppedSubmenu } from "./settings-submenu.js";
 const MODEL_PICKER_LAYOUT = { minPrimaryColumnWidth: 12, maxPrimaryColumnWidth: 46 };
-const SETTINGS_SUBMENU_SELECT_LIST_LAYOUT = {
-    minPrimaryColumnWidth: 12,
-    maxPrimaryColumnWidth: 32,
-};
 const THINKING_DESCRIPTIONS = {
     off: "No reasoning",
     minimal: "Very brief reasoning (~1k tokens)",
@@ -98,59 +94,43 @@ class WarningSettingsSubmenu extends Container {
         this.settingsList.handleInput(data);
     }
 }
-class SelectSubmenu extends Container {
-    selectList;
-    constructor(title, description, options, currentValue, onSelect, onCancel, onSelectionChange) {
-        super();
-        // Title
-        this.addChild(new Text(theme.bold(theme.fg("accent", title)), 0, 0));
-        // Description
-        if (description) {
-            this.addChild(new Spacer(1));
-            this.addChild(new Text(theme.fg("muted", description), 0, 0));
-        }
-        // Spacer
-        this.addChild(new Spacer(1));
-        // Select list
-        this.selectList = new SelectList(options, Math.min(options.length, 10), getSelectListTheme(), SETTINGS_SUBMENU_SELECT_LIST_LAYOUT);
-        // Pre-select current value
-        const currentIndex = options.findIndex((o) => o.value === currentValue);
-        if (currentIndex !== -1) {
-            this.selectList.setSelectedIndex(currentIndex);
-        }
-        this.selectList.onSelect = (item) => {
-            onSelect(item.value);
-        };
-        this.selectList.onCancel = onCancel;
-        if (onSelectionChange) {
-            this.selectList.onSelectionChange = (item) => {
-                onSelectionChange(item.value);
-            };
-        }
-        this.addChild(this.selectList);
-        // Hint
-        this.addChild(new Spacer(1));
-        this.addChild(new Text(theme.fg("dim", "  Enter to select · Esc to go back"), 0, 0));
-    }
-    handleInput(data) {
-        this.selectList.handleInput(data);
-    }
+const CLEAR_OVERRIDE_VALUE = "__clear__";
+function modelSettingKey(model) {
+    return `${model.provider}/${model.id}`;
+}
+function modelDisplayLabel(model) {
+    return `${model.id} [${model.provider}]`;
+}
+function modelThinkingOverridesSummary(overrides) {
+    const count = Object.keys(overrides).length;
+    if (count === 0)
+        return "none";
+    return `${count} configured`;
+}
+function modelItemLabel(model) {
+    return `${model.id} ${theme.fg("muted", `[${model.provider}]`)}`;
 }
 function themeItems(availableThemes, currentTheme) {
     return availableThemes.map((name) => ({
         value: name,
         label: `${name === currentTheme ? "✓ " : "  "}${name}`,
+        ...(name === SYSTEM_THEME_NAME ? { description: "Theme created from your terminal's colors" } : {}),
     }));
 }
 const AUTOMATIC_THEME_VALUE = "/";
+/** The system theme comes first, then automatic mode, then the remaining themes. */
 function singleModeThemeItems(availableThemes, currentTheme) {
+    const items = themeItems(availableThemes, currentTheme);
+    const systemIndex = items.findIndex((item) => item.value === SYSTEM_THEME_NAME);
+    const system = systemIndex === -1 ? [] : items.splice(systemIndex, 1);
     return [
+        ...system,
         {
             value: AUTOMATIC_THEME_VALUE,
-            label: "  Automatic",
+            label: "  automatic",
             description: "Use separate themes for light and dark terminal appearance",
         },
-        ...themeItems(availableThemes, currentTheme),
+        ...items,
     ];
 }
 function preferredTheme(availableThemes, preferred, fallback) {
@@ -165,7 +145,7 @@ function defaultAutomaticThemes(currentThemeSetting, availableThemes) {
     if (autoTheme)
         return autoTheme;
     const currentFixedTheme = currentThemeSetting.includes("/") ? undefined : currentThemeSetting;
-    const themeName = preferredTheme(availableThemes, currentFixedTheme, "dark");
+    const themeName = preferredTheme(availableThemes, currentFixedTheme, SYSTEM_THEME_NAME);
     return { lightTheme: themeName, darkTheme: themeName };
 }
 class ThemeSubmenu extends Container {
@@ -192,7 +172,7 @@ class ThemeSubmenu extends Container {
         this.mode = autoTheme ? "automatic" : "single";
         this.lightTheme = automaticThemes.lightTheme;
         this.darkTheme = automaticThemes.darkTheme;
-        this.singleTheme = preferredTheme(availableThemes, fixedTheme ?? (autoTheme ? this.getActiveAutomaticTheme() : undefined), "dark");
+        this.singleTheme = preferredTheme(availableThemes, fixedTheme ?? (autoTheme ? this.getActiveAutomaticTheme() : undefined), SYSTEM_THEME_NAME);
         if (this.mode === "automatic") {
             this.showAutomaticMenu();
         }
@@ -210,7 +190,7 @@ class ThemeSubmenu extends Container {
     }
     showSingleMenu() {
         this.mode = "single";
-        const menu = new SelectSubmenu("Theme", "Select a theme, or choose Automatic to follow terminal appearance.", singleModeThemeItems(this.availableThemes, this.singleTheme), this.singleTheme, (value) => {
+        const menu = new SelectSubmenu("Theme", "Select a theme, or choose automatic to follow terminal appearance.", singleModeThemeItems(this.availableThemes, this.singleTheme), this.singleTheme, (value) => {
             if (value === AUTOMATIC_THEME_VALUE) {
                 this.mode = "automatic";
                 this.callbacks.onThemePreview?.(this.getThemeSetting());
@@ -309,22 +289,6 @@ class ThemeSubmenu extends Container {
         this.onDone();
     }
 }
-const CLEAR_OVERRIDE_VALUE = "__clear__";
-function modelSettingKey(model) {
-    return `${model.provider}/${model.id}`;
-}
-function modelDisplayLabel(model) {
-    return `${model.id} [${model.provider}]`;
-}
-function modelThinkingOverridesSummary(overrides) {
-    const count = Object.keys(overrides).length;
-    if (count === 0)
-        return "none";
-    return `${count} configured`;
-}
-function modelItemLabel(model) {
-    return `${model.id} ${theme.fg("muted", `[${model.provider}]`)}`;
-}
 /**
  * Main settings selector component.
  */
@@ -349,27 +313,6 @@ export class SettingsSelectorComponent extends Container {
                 currentValue: config.autoCompact ? "true" : "false",
                 values: ["true", "false"],
             },
-            {
-                id: "auto-handoff",
-                label: "Auto handoff",
-                description: "Generate a handoff prompt and open a new session when context reaches the threshold",
-                currentValue: config.autoHandoffEnabled ? "true" : "false",
-                values: ["true", "false"],
-            },
-            {
-                id: "auto-handoff-threshold",
-                label: "Auto handoff threshold",
-                description: "Token count that triggers an automatic handoff",
-                currentValue: String(config.autoHandoffThresholdTokens),
-                values: ["64000", "96000", "128000", "160000", "192000", "256000", "512000"],
-            },
-            {
-                id: "capability-gateway-jev",
-                label: "Jev tool tie-breaking",
-                description: "Use Token-In Jev only for ambiguous optional-tool matches. Requires Token-In credentials; add one with /tokenin add.",
-                currentValue: config.capabilityGatewayJevEnabled ? "true" : "false",
-                values: ["true", "false"],
-            },
             {
                 id: "steering-mode",
                 label: "Steering mode",
@@ -412,6 +355,13 @@ export class SettingsSelectorComponent extends Container {
                 currentValue: config.hideThinkingBlock ? "true" : "false",
                 values: ["true", "false"],
             },
+            {
+                id: "mermaid-rendering",
+                label: "Mermaid diagrams",
+                description: "Render Mermaid code blocks as Unicode diagrams",
+                currentValue: config.mermaidRenderingMode,
+                values: ["off", "final", "streaming"],
+            },
             {
                 id: "cache-miss-notices",
                 label: "Cache miss notices",
@@ -429,9 +379,9 @@ export class SettingsSelectorComponent extends Container {
             {
                 id: "quiet-startup",
                 label: "Quiet startup",
-                description: "Disable verbose printing at startup",
-                currentValue: config.quietStartup ? "true" : "false",
-                values: ["true", "false"],
+                description: "Disable verbose printing at startup (header: keep only the startup header)",
+                currentValue: String(config.quietStartup),
+                values: ["true", "header", "false"],
             },
             {
                 id: "install-telemetry",
@@ -604,6 +554,19 @@ export class SettingsSelectorComponent extends Container {
                 currentValue: config.fullscreenCopyOnSelect ? "true" : "false",
                 values: ["true", "false"],
             },
+            {
+                id: "fullscreen-wheel-scroll-lines",
+                label: "Fullscreen wheel scrolling",
+                description: "Lines per mouse-wheel event in fullscreen mode; 'auto' speeds up fast wheel spins where the terminal does not",
+                currentValue: String(config.fullscreenWheelScrollLines),
+                values: [
+                    "auto",
+                    ...[...new Set([1, 2, 3, 5, 10, config.fullscreenWheelScrollLines])]
+                        .filter((lines) => lines !== "auto")
+                        .sort((a, b) => a - b)
+                        .map(String),
+                ],
+            },
             {
                 id: "theme",
                 label: "Theme",
@@ -694,7 +657,7 @@ export class SettingsSelectorComponent extends Container {
         items.splice(editorPaddingIndex + 1, 0, {
             id: "output-padding",
             label: "Output padding",
-            description: "Horizontal padding for user messages, assistant messages, and thinking",
+            description: "Horizontal padding for messages, tool output, and command output",
             currentValue: String(config.outputPad),
             values: ["0", "1"],
         });
@@ -732,17 +695,6 @@ export class SettingsSelectorComponent extends Container {
                 case "autocompact":
                     callbacks.onAutoCompactChange(newValue === "true");
                     break;
-                case "auto-handoff":
-                    callbacks.onAutoHandoffEnabledChange(newValue === "true");
-                    break;
-                case "auto-handoff-threshold":
-                    callbacks.onAutoHandoffThresholdTokensChange(parseInt(newValue, 10));
-                    break;
-                case "capability-gateway-jev":
-                    if (!callbacks.onCapabilityGatewayJevChange(newValue === "true")) {
-                        this.settingsList.updateValue(id, config.capabilityGatewayJevEnabled ? "true" : "false");
-                    }
-                    break;
                 case "show-images":
                     callbacks.onShowImagesChange(newValue === "true");
                     break;
@@ -783,6 +735,9 @@ export class SettingsSelectorComponent extends Container {
                 case "hide-thinking":
                     callbacks.onHideThinkingBlockChange(newValue === "true");
                     break;
+                case "mermaid-rendering":
+                    callbacks.onMermaidRenderingModeChange(newValue);
+                    break;
                 case "cache-miss-notices":
                     callbacks.onShowCacheMissNoticesChange(newValue === "true");
                     break;
@@ -790,7 +745,7 @@ export class SettingsSelectorComponent extends Container {
                     callbacks.onCollapseChangelogChange(newValue === "true");
                     break;
                 case "quiet-startup":
-                    callbacks.onQuietStartupChange(newValue === "true");
+                    callbacks.onQuietStartupChange(newValue === "header" ? "header" : newValue === "true");
                     break;
                 case "install-telemetry":
                     callbacks.onEnableInstallTelemetryChange(newValue === "true");
@@ -838,6 +793,9 @@ export class SettingsSelectorComponent extends Container {
                 case "fullscreen-copy-on-select":
                     callbacks.onFullscreenCopyOnSelectChange(newValue === "true");
                     break;
+                case "fullscreen-wheel-scroll-lines":
+                    callbacks.onFullscreenWheelScrollLinesChange(newValue === "auto" ? "auto" : parseInt(newValue, 10));
+                    break;
                 case "theme":
                     callbacks.onThemeChange(newValue);
                     break;

package/dist/modes/interactive/components/skill-invocation-message.d.ts

@@ -9,8 +9,9 @@ export declare class SkillInvocationMessageComponent extends Box {
     private expanded;
     private skillBlock;
     private markdownTheme;
-    constructor(skillBlock: ParsedSkillBlock, markdownTheme?: MarkdownTheme);
+    constructor(skillBlock: ParsedSkillBlock, markdownTheme?: MarkdownTheme, outputPad?: number);
     setExpanded(expanded: boolean): void;
+    setOutputPad(outputPad: number): void;
     invalidate(): void;
     private updateDisplay;
 }

package/dist/modes/interactive/components/skill-invocation-message.js

@@ -10,8 +10,8 @@ export class SkillInvocationMessageComponent extends Box {
     expanded = false;
     skillBlock;
     markdownTheme;
-    constructor(skillBlock, markdownTheme = getMarkdownTheme()) {
-        super(1, 1, (t) => theme.bg("customMessageBg", t));
+    constructor(skillBlock, markdownTheme = getMarkdownTheme(), outputPad = 1) {
+        super(outputPad, 1, (t) => theme.bg("customMessageBg", t));
         this.skillBlock = skillBlock;
         this.markdownTheme = markdownTheme;
         this.updateDisplay();
@@ -20,6 +20,9 @@ export class SkillInvocationMessageComponent extends Box {
         this.expanded = expanded;
         this.updateDisplay();
     }
+    setOutputPad(outputPad) {
+        this.setPaddingX(outputPad);
+    }
     invalidate() {
         super.invalidate();
         this.updateDisplay();

package/dist/modes/interactive/components/themed-text.d.ts

@@ -0,0 +1,16 @@
+import { Text } from "@earendil-works/pi-tui";
+/**
+ * Text whose content applies theme colors. Plain `Text` keeps the colors its string was built with, so
+ * a theme change, or the system theme receiving the terminal's colors, would leave it stale. This
+ * rebuilds the string from `build` after every invalidation, which the UI performs on theme changes.
+ *
+ * `build` must return the same content each time, apart from colors. Snapshot changing data before
+ * creating the component, or call `invalidate()` after changing state that `build` reads.
+ */
+export declare class ThemedText extends Text {
+    private readonly build;
+    private stale;
+    constructor(build: () => string, paddingX?: number, paddingY?: number);
+    invalidate(): void;
+    render(width: number): string[];
+}

package/dist/modes/interactive/components/themed-text.js

@@ -0,0 +1,28 @@
+import { Text } from "@earendil-works/pi-tui";
+/**
+ * Text whose content applies theme colors. Plain `Text` keeps the colors its string was built with, so
+ * a theme change, or the system theme receiving the terminal's colors, would leave it stale. This
+ * rebuilds the string from `build` after every invalidation, which the UI performs on theme changes.
+ *
+ * `build` must return the same content each time, apart from colors. Snapshot changing data before
+ * creating the component, or call `invalidate()` after changing state that `build` reads.
+ */
+export class ThemedText extends Text {
+    build;
+    stale = true;
+    constructor(build, paddingX = 1, paddingY = 1) {
+        super("", paddingX, paddingY);
+        this.build = build;
+    }
+    invalidate() {
+        super.invalidate();
+        this.stale = true;
+    }
+    render(width) {
+        if (this.stale) {
+            this.stale = false;
+            this.setText(this.build());
+        }
+        return super.render(width);
+    }
+}

package/dist/modes/interactive/components/tool-execution.d.ts

@@ -1,22 +1,11 @@
-import type { AgentToolResult } from "@earendil-works/pi-agent-core";
-import { type Component, Container, type TUI, type TuiMouseEvent } from "@earendil-works/pi-tui";
-import type { ToolDefinition, ToolRenderContext, ToolRenderResultOptions } from "../../../core/extensions/types.ts";
-import type { Theme } from "../theme/theme.ts";
-/**
- * What this component needs from a tool: how to draw it. It neither executes tools nor reads their
- * parameter schemas, so a definition and a bare renderer pair are equally acceptable.
- *
- * The renderer parameters are `any` on purpose: a `ToolDefinition` types them from its schema, and
- * narrowing them here would make those definitions unassignable.
- */
-export interface ToolRenderers {
-    renderShell?: "default" | "self";
-    renderCall?: (args: any, theme: Theme, context: ToolRenderContext<any, any>) => Component;
-    renderResult?: (result: AgentToolResult<any>, options: ToolRenderResultOptions, theme: Theme, context: ToolRenderContext<any, any>) => Component;
-}
+import { Container, type TUI, type TuiMouseEvent } from "@earendil-works/pi-tui";
+import type { ToolDefinition, ToolRenderers } from "../../../core/extensions/types.ts";
+/** What this component needs from a tool: how to draw it, without executing it. */
+export type { ToolRenderers };
 export interface ToolExecutionOptions {
     showImages?: boolean;
     imageWidthCells?: number;
+    outputPad?: number;
 }
 export declare class ToolExecutionComponent extends Container {
     private contentBox;
@@ -28,6 +17,8 @@ export declare class ToolExecutionComponent extends Container {
     private resultRendererComponent?;
     private rendererState;
     private imageComponents;
+    /** Inputs of imageComponents, so updateDisplay can reuse images and keep their converted PNG data. */
+    private imageSources;
     private imageSpacers;
     private toolName;
     private toolCallId;
@@ -35,6 +26,7 @@ export declare class ToolExecutionComponent extends Container {
     private expanded;
     private showImages;
     private imageWidthCells;
+    private outputPad;
     private isPartial;
     private toolDefinition?;
     private ui;
@@ -42,7 +34,6 @@ export declare class ToolExecutionComponent extends Container {
     private executionStarted;
     private argsComplete;
     private result?;
-    private convertedImages;
     private hideComponent;
     constructor(toolName: string, toolCallId: string, args: any, options: ToolExecutionOptions | undefined, toolDefinition: ToolRenderers | ToolDefinition<any, any, any> | undefined, ui: TUI, cwd: string);
     private getCallRenderer;
@@ -65,9 +56,11 @@ export declare class ToolExecutionComponent extends Container {
         }>;
         details?: any;
         isError: boolean;
+        /** Execution time of a final result. */
+        durationMs?: number;
     }, isPartial?: boolean): void;
-    private maybeConvertImagesForKitty;
     setExpanded(expanded: boolean): void;
+    setOutputPad(outputPad: number): void;
     setShowImages(show: boolean): void;
     setImageWidthCells(width: number): void;
     invalidate(): void;

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

@@ -1,6 +1,6 @@
 import { Box, Container, getCapabilities, Image, MouseRegion, Spacer, Text, } from "@earendil-works/pi-tui";
-import { getTextOutput as getRenderedTextOutput } from "../../../core/tools/render-utils.js";
-import { convertToPng } from "../../../utils/image-convert.js";
+import { formatToolCallWithArgs, getTextOutput as getRenderedTextOutput } from "../../../core/tools/render-utils.js";
+import { convertToPng, ensurePngTranscoder } from "../../../utils/image-convert.js";
 import { keyHint } from "./keybinding-hints.js";
 import { theme } from "../theme/theme.js";
 const FALLBACK_PREVIEW_LINES = 10;
@@ -14,6 +14,8 @@ export class ToolExecutionComponent extends Container {
     resultRendererComponent;
     rendererState = {};
     imageComponents = [];
+    /** Inputs of imageComponents, so updateDisplay can reuse images and keep their converted PNG data. */
+    imageSources = [];
     imageSpacers = [];
     toolName;
     toolCallId;
@@ -21,6 +23,7 @@ export class ToolExecutionComponent extends Container {
     expanded = false;
     showImages;
     imageWidthCells;
+    outputPad;
     isPartial = true;
     toolDefinition;
     ui;
@@ -28,7 +31,6 @@ export class ToolExecutionComponent extends Container {
     executionStarted = false;
     argsComplete = false;
     result;
-    convertedImages = new Map();
     hideComponent = false;
     constructor(toolName, toolCallId, args, options = {}, toolDefinition, ui, cwd) {
         super();
@@ -38,6 +40,7 @@ export class ToolExecutionComponent extends Container {
         this.toolDefinition = toolDefinition;
         this.showImages = options.showImages ?? true;
         this.imageWidthCells = options.imageWidthCells ?? 60;
+        this.outputPad = options.outputPad ?? 1;
         this.ui = ui;
         this.cwd = cwd;
         this.addChild(new Spacer(1));
@@ -85,10 +88,12 @@ export class ToolExecutionComponent extends Container {
             expanded: this.expanded,
             showImages: this.showImages,
             isError: this.result?.isError ?? false,
+            durationMs: this.isPartial ? undefined : this.result?.durationMs,
+            outputPad: this.outputPad,
         };
     }
     createCallFallback() {
-        return new Text(theme.fg("toolTitle", theme.bold(this.toolName)), 0, 0);
+        return new Text(formatToolCallWithArgs(this.toolName, this.args, theme, this.expanded), 0, 0);
     }
     createResultFallback() {
         const output = this.getTextOutput();
@@ -130,45 +135,15 @@ export class ToolExecutionComponent extends Container {
         this.result = result;
         this.isPartial = isPartial;
         this.updateDisplay();
-        this.maybeConvertImagesForKitty();
-    }
-    maybeConvertImagesForKitty() {
-        const caps = getCapabilities();
-        if (caps.images !== "kitty")
-            return;
-        if (!this.result)
-            return;
-        const imageBlocks = this.result.content.filter((c) => c.type === "image");
-        for (let i = 0; i < imageBlocks.length; i++) {
-            const img = imageBlocks[i];
-            if (!img.data || !img.mimeType)
-                continue;
-            const sourceData = img.data;
-            const sourceMimeType = img.mimeType;
-            if (sourceMimeType === "image/png")
-                continue;
-            const cached = this.convertedImages.get(i);
-            if (cached?.sourceData === sourceData && cached.sourceMimeType === sourceMimeType)
-                continue;
-            const index = i;
-            convertToPng(sourceData, sourceMimeType).then((converted) => {
-                const currentImage = this.result?.content.filter((content) => content.type === "image")[index];
-                if (!converted || currentImage?.data !== sourceData || currentImage.mimeType !== sourceMimeType)
-                    return;
-                this.convertedImages.set(index, {
-                    sourceData,
-                    sourceMimeType,
-                    ...converted,
-                });
-                this.updateDisplay();
-                this.ui.requestRender();
-            });
-        }
     }
     setExpanded(expanded) {
         this.expanded = expanded;
         this.updateDisplay();
     }
+    setOutputPad(outputPad) {
+        this.outputPad = outputPad;
+        this.updateDisplay();
+    }
     setShowImages(show) {
         this.showImages = show;
         this.updateDisplay();
@@ -233,6 +208,7 @@ export class ToolExecutionComponent extends Container {
             const renderContainer = this.getRenderShell() === "self" ? this.selfRenderContainer : this.contentBox;
             if (renderContainer instanceof Box) {
                 renderContainer.setBgFn(bgFn);
+                renderContainer.setPaddingX(this.outputPad);
             }
             renderContainer.clear();
             const callRenderer = this.getCallRenderer();
@@ -282,13 +258,17 @@ export class ToolExecutionComponent extends Container {
         }
         else {
             this.contentText.setCustomBgFn(bgFn);
+            this.contentText.setPaddingX(this.outputPad);
             this.contentText.setText(this.formatToolExecution());
             hasContent = true;
         }
+        const previousImages = this.imageComponents;
+        const previousSources = this.imageSources;
         for (const img of this.imageComponents) {
             this.removeChild(img);
         }
         this.imageComponents = [];
+        this.imageSources = [];
         for (const spacer of this.imageSpacers) {
             this.removeChild(spacer);
         }
@@ -296,20 +276,27 @@ export class ToolExecutionComponent extends Container {
         if (this.result) {
             const imageBlocks = this.result.content.filter((c) => c.type === "image");
             const caps = getCapabilities();
-            for (let i = 0; i < imageBlocks.length; i++) {
-                const img = imageBlocks[i];
+            for (const img of imageBlocks) {
                 if (caps.images && this.showImages && img.data && img.mimeType) {
-                    const cached = this.convertedImages.get(i);
-                    const converted = cached?.sourceData === img.data && cached.sourceMimeType === img.mimeType ? cached : undefined;
-                    const imageData = converted?.data ?? img.data;
-                    const imageMimeType = converted?.mimeType ?? img.mimeType;
-                    if (caps.images === "kitty" && imageMimeType !== "image/png")
-                        continue;
                     const spacer = new Spacer(1);
                     this.addChild(spacer);
                     this.imageSpacers.push(spacer);
-                    const imageComponent = new Image(imageData, imageMimeType, { fallbackColor: (s) => theme.fg("toolOutput", s) }, { maxWidthCells: this.imageWidthCells });
+                    const source = { data: img.data, mimeType: img.mimeType, widthCells: this.imageWidthCells };
+                    const index = this.imageComponents.length;
+                    const previous = previousSources[index];
+                    const imageComponent = previous?.data === source.data &&
+                        previous.mimeType === source.mimeType &&
+                        previous.widthCells === source.widthCells
+                        ? previousImages[index]
+                        : new Image(source.data, source.mimeType, { fallbackColor: (s) => theme.fg("toolOutput", s) }, { maxWidthCells: source.widthCells });
+                    if (source.mimeType !== "image/png") {
+                        ensurePngTranscoder(() => {
+                            this.invalidate();
+                            this.ui.requestRender();
+                        });
+                    }
                     this.imageComponents.push(imageComponent);
+                    this.imageSources.push(source);
                     this.addChild(imageComponent);
                 }
             }

package/dist/modes/interactive/components/tree-selector.js

@@ -257,6 +257,7 @@ class TreeList {
             let passesFilter = true;
             // Entry types hidden in default view (settings/bookkeeping)
             const isSettingsEntry = entry.type === "label" ||
+                entry.type === "context_edit" ||
                 entry.type === "custom" ||
                 entry.type === "model_change" ||
                 entry.type === "thinking_level_change" ||
@@ -482,6 +483,9 @@ class TreeList {
             case "custom":
                 parts.push("custom", entry.customType);
                 break;
+            case "context_edit":
+                parts.push("context edit", entry.replacement === null ? "omit" : "replace", entry.targetId);
+                break;
             case "label":
                 parts.push("label", entry.label ?? "");
                 break;
@@ -687,6 +691,9 @@ class TreeList {
             case "custom":
                 result = theme.fg("dim", `[custom: ${entry.customType}]`);
                 break;
+            case "context_edit":
+                result = theme.fg("dim", `[context ${entry.replacement === null ? "omit" : "replace"}: ${entry.targetId}]`);
+                break;
             case "label":
                 result = theme.fg("dim", `[label: ${entry.label ?? "(cleared)"}]`);
                 break;

package/dist/modes/interactive/components/user-message.d.ts

@@ -1,4 +1,5 @@
 import { Container, type MarkdownTheme } from "@earendil-works/pi-tui";
+import type { MarkdownTransformer } from "../../../core/extensions/types.ts";
 /**
  * Component that renders a user message
  */
@@ -6,7 +7,8 @@ export declare class UserMessageComponent extends Container {
     private text;
     private markdownTheme;
     private outputPad;
-    constructor(text: string, markdownTheme?: MarkdownTheme, outputPad?: number);
+    private markdownTransformers;
+    constructor(text: string, markdownTheme?: MarkdownTheme, outputPad?: number, markdownTransformers?: readonly MarkdownTransformer[]);
     setOutputPad(padding: number): void;
     private rebuild;
     render(width: number): string[];