agent-sh 0.14.10 → 0.14.11

package/README.md

@@ -1,15 +1,19 @@
 # agent-sh
 
-A real shell with an AI agent one keystroke away.
-
 [![npm version](https://img.shields.io/npm/v/agent-sh.svg)](https://www.npmjs.com/package/agent-sh)
 [![license](https://img.shields.io/npm/l/agent-sh.svg)](https://github.com/guanyilun/agent-sh/blob/main/LICENSE)
 
-![demo](assets/demo.gif)
+A composable agent runtime — pair any frontend with any agent backend, over one shared extension layer.
+
+## Three example apps built on agent-sh
 
-I live in my terminal. A lot of the time I'm not coding — I'm deploying something, poking at a failing `rsync`, figuring out why `docker build` won't start, fixing a one-liner. And very often I need an AI agent to help. Spinning up a full coding agent for this stuff is overkill, and I got tired of copy-pasting errors into a chat window every time.
+agent-sh is small at its core and does its real work through extensions, so the same runtime drives very different apps. Three to start with — all sharing the same agent backends, tools, providers, and `~/.agent-sh/settings.json`:
 
-So I built agent-sh. Under the hood it's a normal shell on top of node-pty — your rc config, your aliases, vim and tmux all just work. But at the start of any line, type `>` and you're talking to a small agent that already sees your cwd, your last command, and its output. Nothing to set up, no project to explain.
+### 1. A shell with the agent one keystroke away — bundled with agent-sh
+
+A normal shell on top of node-pty — your rc config, your aliases, vim and tmux all just work. But at the start of any line, type `>` and you're talking to a small agent that already sees your cwd, your last command, and its output. Nothing to set up, no project to explain.
+
+![demo](assets/demo.gif)
 
 ```
 ~ $ ls -la                       # real shell command
@@ -19,10 +23,47 @@ So I built agent-sh. Under the hood it's a normal shell on top of node-pty — y
 ~ $ > draft a commit message     # agent reads your diff and shell history
 ```
 
-agent-sh is built to be agent-agnostic. The recommended path is the built-in agent `ash` — a lightweight agent designed so extensions can plug into the same tool surface. If you'd rather host an existing coding agent (pi, claude-code, opencode), you can [bring your own](#bring-your-own-agent) — with the trade-off that it manages its own separate tools.
+```bash
+npm install -g agent-sh
+```
+
+[Quick Start ↓](#quick-start)
+
+### 2. ashi — a standalone coding agent
+
+[**`@guanyilun/ashi`**](examples/extensions/ashi/) is the same `ash` agent in a chat-style TUI, with no shell underneath — just the agent. Installed separately, it reuses agent-sh's backend, tools, slash commands, providers, and skills, and adds session history, in-session branching, and LLM-driven compaction.
+
+```bash
+npm install -g @guanyilun/ashi
+ashi
+```
+
+ashi makes the runtime's **decoupled rendering** concrete: the frontend is itself an extension, and even *how* it draws tool calls and results is a swappable render extension. Same agent backend, same conversation — load a different render extension and the whole TUI restyles, no code changes:
+
+| pi-style rendering | claude-code-style rendering |
+|---|---|
+| ![ashi rendering tool calls pi-style](assets/ashi-pi-style.png) | ![ashi rendering tool calls claude-code-style](assets/ashi-claude-code-style.png) |
+
+### 3. asHub — a GUI coding agent
+
+[**firslov/asHub**](https://github.com/firslov/asHub) is a third-party cross-platform desktop app (Electron) built on the agent-sh runtime: a multi-session sidebar, persistence across restarts, and a live-streaming interface with Markdown, syntax-highlighted code, diffs, and tool-call rendering. macOS / Windows / Linux.
+
+It pushes the same decoupling one step further — the frontend isn't a terminal at all, but a full desktop GUI on the same runtime, backends, and tools:
+
+![asHub desktop GUI](assets/ashub.png)
+
+## How it works
+
+agent-sh is a **composable agent runtime**. At its center is a pure kernel — a typed event bus, a named-handler registry, and an extension loader — that knows nothing about terminals, LLMs, shells, or rendering. Everything else plugs into it: the agent backend, its tools, provider management, and the frontend that drives it.
+
+The frontend and the agent backend are both just components on the bus, so you **mix and match** them freely — wire several frontends to one backend, or keep one frontend and swap the backend underneath — all sharing the **same extension layer** of tools, content transforms, slash commands, and themes. `import { createCore } from "agent-sh"` gives you the headless kernel; load the pieces you want and wire your own I/O.
+
+For the kernel design in full — the bus, handlers, the compositor, and the shell ↔ agent boundary — see [Architecture](docs/architecture.md). To embed the runtime in your own frontend, see the [Library Guide](docs/library.md). The rest of this README covers the bundled shell.
 
 ## Quick Start
 
+**This sets up the agent-sh shell** — the frontend bundled in the `agent-sh` package. (For the other frontends, install [ashi](examples/extensions/ashi/) or [asHub](https://github.com/firslov/asHub) instead.)
+
 ### Installation
 
 Install from npm:
@@ -139,20 +180,6 @@ All three bridges receive agent-sh's per-query shell context (`<shell_events>`)
 
 **Caveat:** pi, claude-code, and opencode each manage their own tool surfaces, so agent-sh extensions that register tools (or skills, instructions, etc.) for the built-in `ash` agent generally won't be visible to a hosted backend. Frontend extensions (themes, content transforms, slash commands, the TUI renderer) keep working — only the agent-side capabilities differ. Use the bridges when you want that agent's toolset; stay on `ash` when you want agent-sh's extension ecosystem.
 
-## Key Features
-
-**Real terminal, zero compromise.** Full PTY with your shell config, aliases, and environment. Shell starts instantly — the agent connects asynchronously in the background.
-
-**One entry point, smart tool selection.** Type `>` and agent-sh figures out how to help. Scratchpad tools (`bash`, `read_file`, `grep`, `glob`) for investigation. Extensions add capabilities like running commands in your live shell. No modes to pick — the agent reasons about which tools to use based on your intent.
-
-**Context that just works.** Every query includes your cwd, recent commands, and their output. Run a failing test, type `> fix this`, and agent-sh knows exactly what happened. Context management works like shell history — continuous, persistent across restarts, no sessions to manage. See [Context Management](docs/context-management.md).
-
-**Any LLM, any backend.** agent-sh works with any OpenAI-compatible API out of the box. Define multiple providers in settings and switch models at runtime with `/model <name>`. Or swap in a completely different agent — bundled bridges run [pi](examples/extensions/pi-bridge/), [claude-code](examples/extensions/claude-code-bridge/), or [opencode](examples/extensions/opencode-bridge/) as a drop-in backend (see [Bring your own agent](#bring-your-own-agent)).
-
-**Extensible by design.** The entire system is built on a typed event bus. Extensions can add custom input modes, content transforms (render LaTeX as images, Mermaid as diagrams), themes, slash commands, or replace the agent backend entirely. The built-in TUI renderer is itself just an extension.
-
-**Embeddable as a library.** The core is a headless kernel — `import { createCore } from "agent-sh"` to build WebSocket servers, REST APIs, Electron apps, or test harnesses. No terminal required.
-
 ## Documentation
 
 Start with **Usage** to get running, then **Architecture** for the mental model.

package/dist/agent/agent-loop.js

@@ -135,8 +135,8 @@ export class AgentLoop {
             }
             return acc;
         });
-        on("agent:submit", ({ query }) => {
-            this.handleQuery(query).catch(() => { });
+        on("agent:submit", ({ query, images }) => {
+            this.handleQuery(query, images).catch(() => { });
         });
         on("agent:cancel-request", (e) => {
             this.abortController?.abort(e.silent ? "silent" : undefined);
@@ -260,7 +260,7 @@ export class AgentLoop {
             budgetTokens: this.currentMode.contextWindow ?? DEFAULT_CONTEXT_WINDOW,
         }));
         onPipe("context:snapshot", (payload) => {
-            payload.messages = this.conversation.getMessages();
+            payload.messages = this.conversation.get();
             payload.contextWindow = this.currentMode.contextWindow ?? DEFAULT_CONTEXT_WINDOW;
             payload.activeTokens = this.conversation.estimateTokens();
             return payload;
@@ -657,12 +657,10 @@ export class AgentLoop {
         // filter, reorder, inject — whatever strategy fits.
         h.define("conversation:prepare", (messages) => messages);
         // ── Conversation primitives for compaction strategies ─────────
-        // Read messages (for inspection / computing new arrays) and replace
-        // the whole array (write side). Extensions implementing
-        // `conversation:compact` use these to observe and mutate.
-        h.define("conversation:get-messages", () => this.conversation.getMessages());
+        // Canonical array (link/replace index space), not forLLM().
+        h.define("conversation:get-messages", () => this.conversation.get());
         h.define("conversation:replace-messages", (msgs) => {
-            this.conversation.replaceMessages(msgs);
+            this.conversation.replace(msgs);
         });
         h.define("conversation:estimate-tokens", () => this.conversation.estimateTokens());
         h.define("conversation:estimate-prompt-tokens", () => this.conversation.estimatePromptTokens());
@@ -671,13 +669,13 @@ export class AgentLoop {
             const strategy = opts.strategy;
             if (strategy?.kind === "rewind" || strategy?.kind === "replace") {
                 const before = this.conversation.estimatePromptTokens();
-                const beforeLen = this.conversation.getMessages().length;
+                const beforeLen = this.conversation.get().length;
                 const next = strategy.kind === "rewind"
-                    ? this.conversation.getMessages().slice(0, strategy.toIndex)
+                    ? this.conversation.get().slice(0, strategy.toIndex)
                     : strategy.messages;
-                this.conversation.replaceMessages(next);
+                this.conversation.replace(next);
                 const after = this.conversation.estimatePromptTokens();
-                const afterLen = this.conversation.getMessages().length;
+                const afterLen = this.conversation.get().length;
                 return { before, after, evictedCount: Math.max(0, beforeLen - afterLen) };
             }
             return null;
@@ -755,7 +753,7 @@ export class AgentLoop {
             return result;
         });
     }
-    async handleQuery(query) {
+    async handleQuery(query, images) {
         // Cancel any in-flight loop (concurrent prompt handling)
         if (this.abortController) {
             this.abortController.abort();
@@ -778,7 +776,14 @@ export class AgentLoop {
             const userContent = queryContext
                 ? `<query_context>\n${queryContext}\n</query_context>\n\n${query}`
                 : query;
-            this.conversation.addUserMessage(userContent);
+            // Fail closed: an image sent to a non-vision model errors and leaves an
+            // unsendable message poisoning history, so require declared image support.
+            let userImages = images?.length ? images : undefined;
+            if (userImages && !this.currentMode.modalities?.includes("image")) {
+                this.bus.emit("ui:info", { message: `Current model has no declared image support — ${userImages.length} image(s) dropped.` });
+                userImages = undefined;
+            }
+            this.conversation.addUserMessage(userContent, userImages);
             this.bus.emit("conversation:message-appended", { role: "user", content: query });
             responseText = await this.executeLoop(signal);
         }
@@ -1262,7 +1267,7 @@ export class AgentLoop {
         // wrapTrailingWithDynamicContext for the cache-stability rationale.
         const rawMessages = [
             { role: "system", content: systemPrompt },
-            ...wrapTrailingWithDynamicContext(this.conversation.getMessages(), dynamicContext, toolPrompt),
+            ...wrapTrailingWithDynamicContext(this.conversation.forLLM(), dynamicContext, toolPrompt),
         ];
         // Let extensions transform the message array (compact, summarize, filter, etc.)
         const messages = this.handlers.call("conversation:prepare", rawMessages);

package/dist/agent/events.d.ts

@@ -1,5 +1,5 @@
 import type { ProviderRegistration } from "./host-types.js";
-import type { ToolDefinition, ToolResultDisplay } from "./types.js";
+import type { ImageContent, ToolDefinition, ToolResultDisplay } from "./types.js";
 export interface AgentIdentity {
     name: string;
     version: string;
@@ -44,6 +44,7 @@ declare module "../core/event-bus.js" {
         };
         "agent:submit": {
             query: string;
+            images?: ImageContent[];
         };
         "agent:cancel-request": {
             silent?: boolean;

package/dist/agent/index.js

@@ -32,6 +32,12 @@ function persistedModelFor(providerName) {
         return undefined;
     return getSettings().providers?.[providerName]?.defaultModel;
 }
+/** The OpenAI SDK silently defaults an empty baseURL to api.openai.com, so a
+ *  provider with a key but no endpoint would misroute its key there. `openai`
+ *  is exempt: that default is its endpoint. */
+function usableProvider(p) {
+    return !!p?.apiKey && (!!p.baseURL || p.id === "openai");
+}
 function defaultReasoningBuilder(level) {
     if (level === "off")
         return {};
@@ -279,6 +285,8 @@ export default function agentBackend(ctx) {
         for (const [id, p] of resolvedProviders) {
             if (!p.apiKey)
                 continue;
+            if (!usableProvider(p))
+                continue;
             const shapeId = p.reasoningShape ?? id;
             for (const model of p.models) {
                 const mc = p.modelCapabilities?.get(model);
@@ -347,13 +355,32 @@ export default function agentBackend(ctx) {
         loadedExtensionNames = names;
         resolvedProviders = computeResolvedProviders();
         const settings = getSettings();
-        // Built-ins register unconditionally so `auth list` can enumerate them;
-        // the fallback must skip keyless entries or it lands on openrouter and
-        // bails at the `!effectiveApiKey` guard below.
-        const providerName = config.provider
-            ?? settings.defaultProvider
-            ?? [...resolvedProviders].find(([, p]) => p.apiKey)?.[0];
-        const activeProvider = providerName ? resolvedProviders.get(providerName) ?? null : null;
+        let providerName = config.provider ?? settings.defaultProvider;
+        let activeProvider = providerName ? resolvedProviders.get(providerName) ?? null : null;
+        // Inline CLI credentials carry their own endpoint, so they skip the
+        // usable-provider fallback that registry-driven selection needs.
+        if (!config.apiKey) {
+            if (!providerName) {
+                const first = [...resolvedProviders].find(([, p]) => usableProvider(p));
+                providerName = first?.[0];
+                activeProvider = first?.[1] ?? null;
+            }
+            else if (!usableProvider(activeProvider)) {
+                const reason = !activeProvider ? "is not registered"
+                    : !activeProvider.apiKey ? "has no API key configured"
+                        : "has no endpoint configured";
+                const next = [...resolvedProviders].find(([, p]) => usableProvider(p));
+                if (next) {
+                    bus.emit("ui:error", { message: `Provider "${providerName}" ${reason}; falling back to "${next[0]}".` });
+                    providerName = next[0];
+                    activeProvider = next[1];
+                }
+                else {
+                    bus.emit("ui:error", { message: `Provider "${providerName}" ${reason}, and no other configured provider has both an API key and an endpoint. Run \`agent-sh auth\` to configure one.` });
+                    return;
+                }
+            }
+        }
         // Persisted defaultModel wins over openrouter's hardcoded DEFAULT_MODELS[0].
         const effectiveApiKey = config.apiKey ?? activeProvider?.apiKey;
         const effectiveBaseURL = config.baseURL ?? activeProvider?.baseURL;
@@ -468,6 +495,10 @@ export default function agentBackend(ctx) {
             bus.emit("ui:error", { message: `Provider "${name}" has no API key configured` });
             return;
         }
+        if (!p.baseURL && p.id !== "openai") {
+            bus.emit("ui:error", { message: `Provider "${name}" has no endpoint configured` });
+            return;
+        }
         const switchModel = p.defaultModel ?? p.models[0];
         if (!switchModel) {
             bus.emit("ui:error", { message: `Provider "${name}" has no models configured` });

package/dist/agent/live-view.d.ts

@@ -19,7 +19,7 @@ export declare class LiveView {
     constructor(handlers?: HandlerFunctions, instanceId?: string);
     private getMessagesJson;
     private invalidateMessagesCache;
-    addUserMessage(text: string): void;
+    addUserMessage(text: string, images?: ImageContent[]): void;
     addAssistantMessage(content: string | null, toolCalls?: {
         id: string;
         function: {
@@ -34,9 +34,9 @@ export declare class LiveView {
     appendUserMessage(text: string): void;
     private hasOpenToolCalls;
     private flushPendingMessages;
-    getMessages(): ChatCompletionMessageParam[];
-    get(): AgentShMessage[];
+    /** Send-shaped; may be longer than get() (dangling calls stubbed) — never link()/replace() by these indices. */
     forLLM(): ChatCompletionMessageParam[];
+    get(): AgentShMessage[];
     replace(msgs: AgentShMessage[]): void;
     link(index: number, entryId: string): void;
     /** DeepSeek 400s on tool messages without a matching tool_call;

package/dist/agent/live-view.js

@@ -1,4 +1,3 @@
-import { stripMeta } from "./llm-client.js";
 export class LiveView {
     messages = [];
     messagesDirty = true;
@@ -26,8 +25,19 @@ export class LiveView {
         this.messagesDirty = true;
         this.cachedMessagesJson = null;
     }
-    addUserMessage(text) {
-        this.messages.push({ role: "user", content: text });
+    addUserMessage(text, images) {
+        if (images?.length) {
+            const parts = [];
+            if (text)
+                parts.push({ type: "text", text });
+            for (const img of images) {
+                parts.push({ type: "image_url", image_url: { url: `data:${img.mimeType};base64,${img.data}` } });
+            }
+            this.messages.push({ role: "user", content: parts });
+        }
+        else {
+            this.messages.push({ role: "user", content: text });
+        }
         this.invalidateMessagesCache();
     }
     addAssistantMessage(content, toolCalls, extras) {
@@ -131,15 +141,13 @@ export class LiveView {
         }
         this.invalidateMessagesCache();
     }
-    getMessages() {
+    /** Send-shaped; may be longer than get() (dangling calls stubbed) — never link()/replace() by these indices. */
+    forLLM() {
         return this.normalizeReasoningConsistency(this.stubDanglingToolCalls(this.dropOrphanToolMessages(this.messages)));
     }
     get() {
         return this.messages;
     }
-    forLLM() {
-        return this.getMessages().map(stripMeta);
-    }
     replace(msgs) {
         this.replaceMessages(msgs);
     }

package/dist/agent/providers/openrouter.js

@@ -14,6 +14,14 @@ function buildReasoningParams(level, _model) {
         ? { reasoning: { effort: "none" } }
         : { reasoning: { effort: level } };
 }
+/** OpenRouter's input_modalities → the text/image subset; undefined when absent
+ *  so the fail-closed image guard treats the model as text-only. */
+function toModalities(input) {
+    if (!Array.isArray(input))
+        return undefined;
+    const out = input.filter((v) => v === "text" || v === "image");
+    return out.length ? out : undefined;
+}
 export default function activate(ctx) {
     const apiKey = resolveApiKey("openrouter").key;
     ctx.agent.providers.configure("openrouter", { reasoningParams: buildReasoningParams });
@@ -42,6 +50,7 @@ export default function activate(ctx) {
                 reasoning: m.supported_parameters?.includes("reasoning") ?? false,
                 contextWindow: m.context_length,
                 echoReasoning: userOverrides.get(m.id) ?? patterns.some((re) => re.test(m.id)),
+                modalities: toModalities(m.architecture?.input_modalities),
             })),
         });
     }).catch(() => { });

package/dist/agent/subagent.js

@@ -109,7 +109,7 @@ async function streamOnce(llmClient, systemPrompt, conversation, apiTools, model
     const stream = await llmClient.stream({
         messages: [
             { role: "system", content: systemPrompt },
-            ...wrapTrailingWithDynamicContext(conversation.getMessages(), dynamicContext ?? ""),
+            ...wrapTrailingWithDynamicContext(conversation.forLLM(), dynamicContext ?? ""),
         ],
         tools: apiTools.length > 0 ? apiTools : undefined,
         model,

package/dist/cli/install.js

@@ -14,7 +14,16 @@ const EXT_DIR = path.join(CONFIG_DIR, "extensions");
 export function listBundled() {
     if (!fs.existsSync(BUNDLED_DIR))
         return [];
-    return fs.readdirSync(BUNDLED_DIR).map((n) => n.replace(/\.(ts|js|mjs)$/, ""));
+    const out = [];
+    for (const d of fs.readdirSync(BUNDLED_DIR, { withFileTypes: true })) {
+        if (d.name.startsWith("."))
+            continue;
+        if (d.isDirectory())
+            out.push(d.name);
+        else if (SCRIPT_EXTS.some((ext) => d.name.endsWith(ext)))
+            out.push(d.name.replace(/\.[^.]+$/, ""));
+    }
+    return out;
 }
 /** Heuristic: a backend named "pi" is typically provided by an extension called "pi-bridge". */
 export function suggestBridgeFor(backend) {

package/dist/shell/events.d.ts

@@ -32,6 +32,9 @@ declare module "../core/event-bus.js" {
             cols: number;
             rows: number;
         };
+        "shell:host-write": {
+            data: string;
+        };
         "shell:buffer-request": Record<string, never>;
         "shell:buffer-snapshot": {
             text: string;

package/dist/shell/shell.js

@@ -110,6 +110,9 @@ export class Shell {
         this.bus.on("shell:pty-resize", ({ cols, rows }) => {
             this.ptyProcess.resize(cols, rows);
         });
+        this.bus.on("shell:host-write", ({ data }) => {
+            this.terminal.write(data);
+        });
         // Compat shims for the bus-event API. shell:stdout-hold maps to hard
         // mute so terminal_keys' stdout-show can't paint through the overlay.
         let holdRefcount = 0;

package/dist/utils/diff-renderer.d.ts

@@ -13,6 +13,10 @@ export interface DiffRenderOptions {
     trueColor?: boolean;
     /** Enable syntax highlighting on diff lines. Default true. */
     syntaxHighlight?: boolean;
+    /** Draw the `│` rule between the line number and the code (default true). Set false
+     *  for a flush gutter: `<n> <sigil><code>`, the row background spans the line, and
+     *  context code is left un-dimmed. */
+    gutterLine?: boolean;
 }
 export declare function detectLanguage(filePath?: string): string | undefined;
 /**

package/dist/utils/diff-renderer.js

@@ -239,25 +239,35 @@ function unifiedLayout(diff, opts) {
         lineTextW: Math.max(1, textWidth - noW - 5),
         textWidth,
         useTrueColor: opts.trueColor !== false,
+        gutterLine: opts.gutterLine !== false,
         lang: opts.syntaxHighlight !== false ? detectLanguage(opts.filePath) : undefined,
         removedPalette: { rowBg: p.errorBg, emphBg: p.errorBgEmph },
         addedPalette: { rowBg: p.successBg, emphBg: p.successBgEmph },
     };
 }
 function renderUnifiedHunk(hunk, layout) {
-    const { noW, lineTextW, textWidth, useTrueColor, lang, removedPalette, addedPalette } = layout;
+    const { noW, lineTextW, textWidth, useTrueColor, gutterLine, lang, removedPalette, addedPalette } = layout;
     const out = [];
     const pairs = findChangePairs(hunk);
     const renderedAsPartOfPair = new Set();
     const bgWidth = Math.max(1, textWidth - noW - 3);
     const gutter = (n) => `${p.dim}${n} │${p.reset} `;
+    const change = (no, sigil, bg, fg, text) => {
+        if (!gutterLine) {
+            return `${bg}${padToWidth(`${no} ${fg}${sigil}${preserveBg(text, bg)}`, textWidth)}${p.reset}`;
+        }
+        if (useTrueColor)
+            return gutter(no) + padToWidth(`${bg}${fg}${sigil} ${preserveBg(text, bg)}`, bgWidth) + p.reset;
+        return `${gutter(no)}${fg}${sigil} ${text}${p.reset}`;
+    };
     for (let i = 0; i < hunk.lines.length; i++) {
         const line = hunk.lines[i];
         const no = String(line.type === "removed" ? (line.oldNo ?? "") : (line.newNo ?? line.oldNo ?? "")).padStart(noW);
         if (line.type === "context") {
             const raw = truncateText(line.text, lineTextW);
             const text = lang ? highlightLine(raw, lang) : raw;
-            out.push(`${gutter(no)}  ${p.dim}${text}${p.reset}`);
+            // The flush gutter dims only the line number; the code stays normal/highlighted.
+            out.push(!gutterLine ? `${p.dim}${no}${p.reset}  ${text}` : `${gutter(no)}  ${p.dim}${text}${p.reset}`);
             continue;
         }
         if (line.type === "removed") {
@@ -276,19 +286,9 @@ function renderUnifiedHunk(hunk, layout) {
                 const raw = truncateText(line.text, lineTextW);
                 removedText = lang ? highlightLine(raw, lang) : raw;
             }
-            if (useTrueColor) {
-                out.push(gutter(no) + padToWidth(`${p.errorBg}${p.error}- ${preserveBg(removedText, p.errorBg)}`, bgWidth) + p.reset);
-            }
-            else {
-                out.push(`${gutter(no)}${p.error}- ${removedText}${p.reset}`);
-            }
+            out.push(change(no, "-", p.errorBg, p.error, removedText));
             if (addedText !== null && addedNo !== null) {
-                if (useTrueColor) {
-                    out.push(gutter(addedNo) + padToWidth(`${p.successBg}${p.success}+ ${preserveBg(addedText, p.successBg)}`, bgWidth) + p.reset);
-                }
-                else {
-                    out.push(`${gutter(addedNo)}${p.success}+ ${addedText}${p.reset}`);
-                }
+                out.push(change(addedNo, "+", p.successBg, p.success, addedText));
             }
             continue;
         }
@@ -297,12 +297,7 @@ function renderUnifiedHunk(hunk, layout) {
                 continue;
             const raw = truncateText(line.text, lineTextW);
             const text = lang ? highlightLine(raw, lang) : raw;
-            if (useTrueColor) {
-                out.push(gutter(no) + padToWidth(`${p.successBg}${p.success}+ ${preserveBg(text, p.successBg)}`, bgWidth) + p.reset);
-            }
-            else {
-                out.push(`${gutter(no)}${p.success}+ ${text}${p.reset}`);
-            }
+            out.push(change(no, "+", p.successBg, p.success, text));
         }
     }
     return out;