@quatcode/agent 0.2.0 → 0.2.2

package/dist/tui.js

@@ -1,17 +1,18 @@
 import path from "node:path";
 import { homedir } from "node:os";
-import { Session, ToolRegistry, addUsage, createProviderFromEnv, emptyUsage, estimateCost, runAgent, } from "@quatcode/core";
+import { readFile, stat } from "node:fs/promises";
+import { Session, ToolRegistry, addUsage, emptyUsage, estimateCost, runAgent, } from "@quatcode/core";
 import { analyzeCommand, createProjectTools, McpManager } from "@quatcode/tools";
 import { buildProjectContext, createBrainTools, scanProject } from "@quatcode/brain";
 import { Keyboard } from "./keyboard.js";
 import { LineBuffer, defaultPrompt } from "./input.js";
 import { Picker } from "./picker.js";
 import { Screen } from "./screen.js";
-import { TurnController, fmtCost, fmtDuration, fmtTokens } from "./turn.js";
+import { TurnController, fmtCost, fmtDuration, fmtTokens, toolArg, toolResultBlock } from "./turn.js";
 import { renderBanner } from "./logo.js";
 import { renderMarkdown } from "./markdown.js";
-import { CUSTOM_MODEL, PROVIDERS, buildProvider, defaultModelFor, effortsForModel, fetchProviderModels, hasKey, keyEnvFor, resolveProviderForModel, } from "./models.js";
-import { activeThemeId, bg, bold, buildColorRemap, clipAnsi, fg, getThemes, glyphs, padEndTo, palette, remapColors, setTheme, stringWidth, stripAnsi, tone, } from "./theme.js";
+import { ADD_PROVIDER, allProviders, buildProvider, defaultModelFor, effortsForModel, hasKey, keyEnvFor, probeProviderModels, providerEnvKey, providerHasModel, providerMeta, providerSlug, registerCustomProvider, removeCustomProvider, resolveProviderForModel, } from "./models.js";
+import { activeThemeId, bg, bold, buildColorRemap, clipAnsi, fg, getThemes, glyphs, padEndTo, palette, remapColors, setTheme, stringWidth, stripAnsi, tone, toolGlyph, } from "./theme.js";
 import { listSessionsForDir, loadConfig, makeSessionId, saveConfig, saveSession, deleteSession } from "./store.js";
 import { configFile, conversationKey, deleteConversation, displayTitle, latestPerConversation, messagesForStorage, sortConversations, updateConversation, } from "./store.js";
 import { MCP_USAGE, isMcpUrl, mcpInstructionsSection, parseMcpAdd } from "./mcp.js";
@@ -22,6 +23,7 @@ const COMMAND_INFO = [
     { name: "/help", desc: "show this help" },
     { name: "/new", desc: "new conversation (clears the screen)" },
     { name: "/model", args: "[id]", desc: "pick or set the model" },
+    { name: "/provider", args: "[add|list|remove]", desc: "connect a provider by API key" },
     { name: "/effort", args: "[level]", desc: "reasoning effort (minimal…high)" },
     { name: "/key", desc: "enter the API key for the current provider" },
     { name: "/dir", args: "[path]", desc: "change the project directory" },
@@ -48,6 +50,7 @@ const READ_ONLY_TOOLS = new Set([
     "screenshot",
     "list_servers",
 ]);
+const PLAN_ALLOWED_TOOLS = new Set([...READ_ONLY_TOOLS, "run_command"]);
 export async function runTui(options) {
     const input = options.io?.input ?? process.stdin;
     const output = options.io?.output ?? process.stdout;
@@ -80,6 +83,7 @@ class TuiApp {
     gateMode;
     verbose = false;
     conversationId = makeSessionId();
+    providerSessionId = makeSessionId();
     totalUsage = emptyUsage();
     turns = 0;
     transcript = [];
@@ -123,11 +127,14 @@ class TuiApp {
     lastTurn = null;
     turnUndo = null;
     pendingInitial = null;
-    pendingImages = [];
+    pendingImages = new Map();
     userMarkers = [];
     messageCursor = -1;
     selection = null;
     frameLines = [];
+    modeBadgeStart = -1;
+    modeBadgeWidth = 0;
+    modeBadgeHover = false;
     constructor(options, input, output) {
         this.opts = options;
         this.dir = path.resolve(options.dir);
@@ -140,6 +147,11 @@ class TuiApp {
         this.kb.start();
         this.screen.enter();
         this.kb.setHandler(this.onKeys);
+        this.kb.onSizeReport = (row, col) => {
+            if (this.screen.applySizeReport(row, col))
+                this.scheduleRender();
+        };
+        this.screen.requestSize();
         const cleanup = () => {
             try {
                 this.stopSpinner();
@@ -164,9 +176,19 @@ class TuiApp {
             if (value && process.env[name] === undefined)
                 process.env[name] = value;
         }
+        for (const [id, custom] of Object.entries(this.config.customProviders ?? {})) {
+            registerCustomProvider({
+                id,
+                label: custom.label,
+                envKey: custom.envKey,
+                kind: "openai",
+                baseUrl: custom.baseUrl,
+                defaultModel: custom.models[0]?.id ?? "",
+                models: custom.models,
+            });
+        }
         this.effort = this.opts.effort ?? this.config.effort ?? null;
         setTheme(this.config.theme ?? "quatcode");
-        this.screen.applyBackground();
         let configMeta = null;
         try {
             configMeta = await this.loadConfiguration();
@@ -216,10 +238,12 @@ class TuiApp {
                 this.append([`  ${tone.mist("// cancelled")}`]);
                 continue;
             }
-            const input = result.text;
-            this.buffer.addHistory(input);
-            const images = this.pendingImages;
-            this.pendingImages = [];
+            const extracted = extractInputImages(result.text, this.pendingImages);
+            this.pendingImages = new Map();
+            const input = extracted.text;
+            const images = extracted.images;
+            if (input)
+                this.buffer.addHistory(input);
             const isCommand = input.startsWith("/");
             if (!isCommand)
                 this.clearSplash();
@@ -305,7 +329,14 @@ class TuiApp {
     onKeys = (keys) => {
         for (const key of keys) {
             if (key.type === "resize") {
+                this.screen.requestSize();
                 this.scheduleRender();
+                const settle = setTimeout(() => {
+                    this.screen.requestSize();
+                    this.scheduleRender();
+                }, 150);
+                if (typeof settle.unref === "function")
+                    settle.unref();
                 continue;
             }
             if (key.type === "mouse") {
@@ -458,7 +489,8 @@ class TuiApp {
                         this.buffer.killToEnd();
                         break;
                     case "w":
-                        this.buffer.deleteWordBefore();
+                        if (!this.deleteImageTokenBefore())
+                            this.buffer.deleteWordBefore();
                         break;
                     case "p":
                         this.buffer.historyPrev();
@@ -478,8 +510,14 @@ class TuiApp {
                     this.buffer.moveWord(-1);
                 else if (key.ch === "f" || key.ch === "F")
                     this.buffer.moveWord(1);
-                else if (key.ch === "d" || key.ch === "D")
-                    this.buffer.deleteWordAfter();
+                else if (key.ch === "d" || key.ch === "D") {
+                    if (!this.deleteImageTokenAfter())
+                        this.buffer.deleteWordAfter();
+                }
+                else if (key.ch === "v" || key.ch === "V") {
+                    void this.pasteFromClipboard();
+                    return;
+                }
                 break;
             case "nav":
                 if ((key.dir === "up" || key.dir === "down") &&
@@ -555,10 +593,12 @@ class TuiApp {
                     this.toggleMode();
                 break;
             case "backspace":
-                this.buffer.backspace();
+                if (!this.deleteImageTokenBefore())
+                    this.buffer.backspace();
                 break;
             case "delete":
-                this.buffer.deleteForward();
+                if (!this.deleteImageTokenAfter())
+                    this.buffer.deleteForward();
                 break;
             case "escape":
                 this.finishLine({ kind: "cancel" });
@@ -655,7 +695,26 @@ class TuiApp {
         }
         return lines;
     }
+    badgeHit(col) {
+        if (this.modeBadgeStart < 0 || this.modeBadgeWidth <= 0)
+            return false;
+        const start = this.padX + this.modeBadgeStart;
+        return col >= start && col < start + this.modeBadgeWidth;
+    }
     handleHover(row, col) {
+        if (row === 1) {
+            const hover = this.badgeHit(col);
+            if (hover !== this.modeBadgeHover) {
+                this.modeBadgeHover = hover;
+                this.scheduleRender();
+            }
+            if (hover)
+                return;
+        }
+        else if (this.modeBadgeHover) {
+            this.modeBadgeHover = false;
+            this.scheduleRender();
+        }
         if (this.mode === "permission") {
             const index = this.permissionOptionAt(row, col);
             if (index !== null && index !== this.permissionSelected) {
@@ -682,6 +741,12 @@ class TuiApp {
         }
     }
     handleClick(row, col) {
+        if (row === 1 &&
+            (this.mode === "editing" || this.mode === "idle") &&
+            this.badgeHit(col)) {
+            this.toggleMode();
+            return;
+        }
         if (this.mode === "permission") {
             const index = this.permissionOptionAt(row, col);
             if (index !== null) {
@@ -745,21 +810,44 @@ class TuiApp {
     async pasteFromClipboard() {
         const image = readClipboardImage();
         if (image) {
-            this.pendingImages.push(image);
-            const kb = Math.max(1, Math.round((image.data.length * 3) / 4 / 1024));
-            this.append([
-                `  ${tone.accent(glyphs.diamond)} ${tone.mist(`// image attached (${image.mediaType} · ${kb} KB) · it will be sent with the next message`)}`,
-            ]);
+            this.attachImageMarker(image);
             return;
         }
         const text = readClipboardText();
         if (text && text.length > 0) {
+            const fromPath = await imageFromPath(text);
+            if (fromPath) {
+                this.attachImageMarker(fromPath);
+                return;
+            }
             this.buffer.insert(text.replace(/\r\n?/g, "\n"));
             this.scheduleRender();
             return;
         }
         this.append([`  ${tone.mist("// clipboard is empty or unavailable")}`]);
     }
+    deleteImageTokenBefore() {
+        const length = imageTokenBefore(this.buffer.cursorLineBefore());
+        if (length <= 0)
+            return false;
+        this.buffer.deleteBefore(length);
+        return true;
+    }
+    deleteImageTokenAfter() {
+        const length = imageTokenAfter(this.buffer.cursorLineAfter());
+        if (length <= 0)
+            return false;
+        this.buffer.deleteAfter(length);
+        return true;
+    }
+    attachImageMarker(image) {
+        const index = nextImageIndex(this.buffer.text());
+        this.pendingImages.set(index, image);
+        const current = this.buffer.text();
+        const needsSpace = current.length > 0 && !/\s$/.test(current);
+        this.buffer.insert(`${needsSpace ? " " : ""}[Image ${index}] `);
+        this.scheduleRender();
+    }
     copySelection() {
         const text = this.selectionText();
         this.selection = null;
@@ -948,52 +1036,58 @@ class TuiApp {
         const modelLabel = this.model
             ? `${this.providerId} · ${this.model}${effort ? ` · ${effort}` : ""}`
             : "";
-        const badge = this.agentMode === "plan"
-            ? fg(palette.amber, bg(palette.graphite, " PLAN "))
-            : tone.onGraphite(" BUILD ");
-        const left = [
+        const badgeText = this.agentMode === "plan" ? " PLAN " : " BUILD ";
+        const badge = this.modeBadgeHover
+            ? fg(palette.bone, bg(palette.steel, badgeText))
+            : this.agentMode === "plan"
+                ? fg(palette.amber, bg(palette.graphite, badgeText))
+                : tone.onGraphite(badgeText);
+        const before = [
             bold(tone.bone("quatcode")),
             modelLabel ? tone.steel("·") : "",
             modelLabel ? tone.silver(modelLabel) : "",
-            badge,
         ]
             .filter(Boolean)
             .join("  ");
+        this.modeBadgeStart = 2 + stringWidth(before) + 2;
+        this.modeBadgeWidth = stringWidth(badge);
+        const left = `${before}  ${badge}`;
         const scrolled = this.scrollOffset > 0 ? tone.mist("↑ ") : "";
         const right = `${scrolled}${tone.mist(`v${VERSION}`)}`;
         const gap = Math.max(1, width - 2 - stringWidth(left) - stringWidth(right));
         return [
             `  ${left}${" ".repeat(gap)}${right}`,
-            `  ${tone.steel("─".repeat(Math.max(8, width - 2)))}`,
+            `  ${tone.mist("─".repeat(Math.max(8, width - 2)))}`,
         ];
     }
     footerLines() {
         const width = this.contentWidth();
-        const bar = `  ${tone.steel("─".repeat(Math.max(8, width - 2)))}`;
+        const rule = `  ${tone.mist("─".repeat(Math.max(8, width - 2)))}`;
         if (this.mode === "editing") {
             const rendered = this.buffer.render({
                 width,
                 prompt: this.inputPrompt,
                 placeholder: this.inputPlaceholder,
                 mask: this.inputMask,
+                style: styleInputLine,
             });
             this.lastInputRender = rendered;
             const suggestions = this.suggestions();
             this.lastInputOffset = 1 + suggestions.length;
-            return [bar, ...suggestions, ...rendered.lines];
+            return [rule, ...suggestions, ...rendered.lines, rule];
         }
         this.lastInputRender = null;
         if (this.status)
-            return [bar, this.statusLine()];
+            return [rule, this.statusLine(), rule];
         if (this.mode === "running") {
-            return [bar, `  ${tone.mist("// esc interrupts")}`];
+            return [rule, `  ${tone.mist("// esc interrupts")}`, rule];
         }
         if (this.mode === "permission")
-            return [bar, `  ${this.permissionHint}`];
+            return [rule, `  ${this.permissionHint}`, rule];
         if (this.mode === "picker" && this.picker) {
-            return [bar, this.picker.footer(this.picker.itemCount())];
+            return [rule, this.picker.footer(this.picker.itemCount()), rule];
         }
-        return [bar, `  ${tone.mist(`// ${shortenHome(this.dir)}`)}`];
+        return [rule, `  ${tone.mist(`// ${shortenHome(this.dir)}`)}`, rule];
     }
     statusLine() {
         const spin = tone.accent(glyphs.spinner[this.spinnerFrame % glyphs.spinner.length] ?? "-");
@@ -1104,40 +1198,33 @@ class TuiApp {
         return `${tone.silver(`${this.providerId} · ${this.model}`)}${keyState}`;
     }
     detectProvider() {
-        if (process.env.ANTHROPIC_API_KEY)
-            return "anthropic";
-        if (process.env.OPENAI_API_KEY)
-            return "openai";
-        if (process.env.GEMINI_API_KEY)
-            return "gemini";
+        for (const provider of allProviders()) {
+            if (process.env[provider.envKey])
+                return provider.id;
+        }
         return null;
     }
     detectEnvSetup() {
+        const envModelFor = (id) => {
+            const meta = providerMeta(id);
+            if (!meta)
+                return undefined;
+            return process.env[`${meta.envKey.replace(/_API_KEY$/, "")}_MODEL`];
+        };
+        const pick = (id) => ({
+            id,
+            model: envModelFor(id) ?? defaultModelFor(id),
+        });
         const override = process.env.QUATCODE_PROVIDER?.toLowerCase();
-        if (override === "anthropic" || override === "openai" || override === "gemini") {
-            const envModel = {
-                anthropic: process.env.ANTHROPIC_MODEL,
-                openai: process.env.OPENAI_MODEL,
-                gemini: process.env.GEMINI_MODEL,
-            }[override];
-            return { id: override, model: envModel ?? defaultModelFor(override) };
-        }
-        if (process.env.ANTHROPIC_MODEL)
-            return { id: "anthropic", model: process.env.ANTHROPIC_MODEL };
-        if (process.env.OPENAI_MODEL)
-            return { id: "openai", model: process.env.OPENAI_MODEL };
-        if (process.env.GEMINI_MODEL)
-            return { id: "gemini", model: process.env.GEMINI_MODEL };
-        try {
-            const provider = createProviderFromEnv();
-            const id = provider.id;
-            if (provider.defaultModel &&
-                (id === "anthropic" || id === "openai" || id === "gemini")) {
-                return { id, model: provider.defaultModel };
-            }
+        if (override && providerMeta(override))
+            return pick(override);
+        for (const provider of allProviders()) {
+            if (envModelFor(provider.id))
+                return pick(provider.id);
         }
-        catch {
-            return null;
+        for (const provider of allProviders()) {
+            if (process.env[provider.envKey])
+                return pick(provider.id);
         }
         return null;
     }
@@ -1180,7 +1267,7 @@ class TuiApp {
             const readOnlyMcp = this.mcp.readOnlyToolNames();
             const filtered = new ToolRegistry();
             for (const tool of full.list()) {
-                if (READ_ONLY_TOOLS.has(tool.name) || readOnlyMcp.has(tool.name))
+                if (PLAN_ALLOWED_TOOLS.has(tool.name) || readOnlyMcp.has(tool.name))
                     filtered.register(tool);
             }
             filtered.onDispose(() => full.dispose());
@@ -1213,79 +1300,214 @@ class TuiApp {
         this.agentMode = this.agentMode === "build" ? "plan" : "build";
         this.rebuildTools();
         this.append([
-            `  ${tone.accent(glyphs.diamond)} ${tone.mist(`// MODE → ${this.agentMode.toUpperCase()}`)}${this.agentMode === "plan" ? `  ${tone.amber("read-only: no edits, no commands")}` : ""}`,
+            `  ${tone.accent(glyphs.diamond)} ${tone.mist(`// MODE → ${this.agentMode.toUpperCase()}`)}${this.agentMode === "plan" ? `  ${tone.amber("no edits · run_command allowed (with approval)")}` : ""}`,
         ]);
     }
     ensureProvider() {
         if (this.provider)
             return this.provider;
         try {
-            this.provider = buildProvider(this.providerId, this.model);
+            this.provider = buildProvider(this.providerId, this.model, {
+                sessionId: this.providerSessionId,
+            });
             return this.provider;
         }
         catch {
             return null;
         }
     }
-    async collectModelEntries() {
-        const result = [];
-        for (const provider of PROVIDERS) {
-            let models = provider.models;
-            if (hasKey(provider.id)) {
-                this.setStatus({ label: `LOADING ${provider.label.toUpperCase()} MODELS` });
-                const live = await fetchProviderModels(provider.id);
-                if (live.length > 0)
-                    models = live;
+    async changeModel() {
+        for (;;) {
+            const pickerEntries = [
+                { kind: "header", label: "setup" },
+                {
+                    kind: "item",
+                    value: ADD_PROVIDER,
+                    label: "add a provider…",
+                    hint: "connect by API key",
+                },
+            ];
+            for (const provider of allProviders()) {
+                if (provider.models.length === 0)
+                    continue;
+                pickerEntries.push({
+                    kind: "header",
+                    label: `${provider.label} · ${hasKey(provider.id) ? "key set" : "no key"}${provider.custom ? " · added" : ""}`,
+                });
+                for (const model of provider.models) {
+                    pickerEntries.push({
+                        kind: "item",
+                        value: `${provider.id}:${model.id}`,
+                        label: model.id,
+                        hint: model.label,
+                    });
+                }
             }
-            for (const model of models) {
-                result.push({ providerId: provider.id, id: model.id, label: model.label });
+            const chosen = await this.openPicker(new Picker({ title: "select a model", entries: pickerEntries, filterable: true }));
+            if (!chosen)
+                return false;
+            if (chosen === ADD_PROVIDER) {
+                const added = await this.addProviderFlow();
+                if (added) {
+                    this.renderNow();
+                    await this.pause(650);
+                }
+                continue;
             }
+            const separator = chosen.indexOf(":");
+            const model = chosen.slice(separator + 1);
+            this.applyModel(chosen.slice(0, separator), model);
+            await this.chooseEffortForModel(model);
+            return true;
         }
-        this.setStatus(null);
-        return result;
     }
-    async changeModel() {
-        this.setStatus({ label: "LOADING MODELS" });
-        const entries = await this.collectModelEntries();
-        this.setStatus(null);
-        const pickerEntries = [];
-        for (const provider of PROVIDERS) {
-            const models = entries.filter((entry) => entry.providerId === provider.id);
-            if (models.length === 0)
-                continue;
-            pickerEntries.push({
-                kind: "header",
-                label: `${provider.label} · ${hasKey(provider.id) ? "key set" : "no key"}`,
-            });
-            for (const model of models) {
-                pickerEntries.push({
-                    kind: "item",
-                    value: `${provider.id}:${model.id}`,
-                    label: model.id,
-                    hint: model.label,
-                });
+    async providerCommand(arg) {
+        const parts = arg.split(/\s+/).filter(Boolean);
+        const sub = (parts[0] ?? "").toLowerCase();
+        const rest = parts.slice(1).join(" ").trim();
+        if (!sub || sub === "add" || sub === "connect") {
+            await this.addProviderFlow();
+            return;
+        }
+        if (sub === "list" || sub === "ls") {
+            const lines = [`  ${tone.mist("// PROVIDERS")}`];
+            for (const provider of allProviders()) {
+                const state = hasKey(provider.id) ? tone.accent("key set") : tone.mist("no key");
+                lines.push(`  ${padEndTo(tone.bone(provider.label), 18)}${tone.silver(`${provider.models.length} models`)}  ${state}${provider.custom ? tone.mist("  · added") : ""}`);
+                lines.push(`    ${tone.mist(`${provider.envKey}${provider.baseUrl ? ` · ${provider.baseUrl}` : ""}`)}`);
             }
+            lines.push("");
+            lines.push(`  ${tone.mist("// add: /provider add (or /model → add a provider…) · remove: /provider remove <name>")}`);
+            this.append(lines);
+            return;
         }
-        pickerEntries.push({ kind: "item", value: CUSTOM_MODEL, label: "custom model id…" });
-        const chosen = await this.openPicker(new Picker({ title: "select a model", entries: pickerEntries, filterable: true }));
-        if (!chosen)
+        if (sub === "remove" || sub === "rm") {
+            if (!rest) {
+                this.append([`  ${tone.mist("// usage: /provider remove <name>")}`]);
+                return;
+            }
+            const meta = providerMeta(rest);
+            if (!meta) {
+                this.append([`  ${tone.red(`// no provider named ${rest}`)}`]);
+                return;
+            }
+            if (!meta.custom) {
+                this.append([`  ${tone.red(`// ${rest} is a built-in provider and cannot be removed`)}`]);
+                return;
+            }
+            const confirmed = await this.confirm(`remove provider "${rest}"?`);
+            if (!confirmed) {
+                this.append([`  ${tone.mist("// cancelled")}`]);
+                return;
+            }
+            removeCustomProvider(rest);
+            if (meta.envKey) {
+                const keys = { ...(this.config.keys ?? {}) };
+                if (keys[meta.envKey]) {
+                    delete keys[meta.envKey];
+                    this.config.keys = keys;
+                }
+                delete process.env[meta.envKey];
+            }
+            if (this.config.customProviders?.[rest]) {
+                const next = { ...this.config.customProviders };
+                delete next[rest];
+                this.config.customProviders = next;
+            }
+            if (this.providerId === rest) {
+                this.applyModel("anthropic", defaultModelFor("anthropic"));
+                this.append([`  ${tone.mist(`// MODEL → ${this.providerId} · ${this.model}`)}`]);
+            }
+            await saveConfig({ ...this.config }).catch(() => undefined);
+            this.append([
+                `  ${tone.accent(glyphs.diamond)} ${tone.mist(`// PROVIDER REMOVED → ${rest}`)}`,
+            ]);
+            return;
+        }
+        this.append([`  ${tone.mist("// usage: /provider [add|list|remove <name>]")}`]);
+    }
+    async addProviderFlow() {
+        const nameResult = await this.readLine({
+            prompt: `  ${tone.bone("PROVIDER NAME")} ${tone.mist(glyphs.prompt)} `,
+            placeholder: "e.g. together, fireworks, cerebras",
+        });
+        if (nameResult.kind !== "submit" || !nameResult.text.trim()) {
+            this.append([`  ${tone.mist("// cancelled")}`]);
+            return false;
+        }
+        const id = providerSlug(nameResult.text);
+        const existing = providerMeta(id);
+        if (existing && !existing.custom) {
+            this.append([`  ${tone.red(`// ${id} is already a built-in provider — pick it from the list`)}`]);
+            return false;
+        }
+        const urlResult = await this.readLine({
+            prompt: `  ${tone.bone("BASE URL")} ${tone.mist(glyphs.prompt)} `,
+            placeholder: "https://api.example.com/v1 — the API base, not the website",
+        });
+        if (urlResult.kind !== "submit" || !urlResult.text.trim()) {
+            this.append([`  ${tone.mist("// cancelled")}`]);
             return false;
-        if (chosen === CUSTOM_MODEL) {
-            const result = await this.readLine({
-                prompt: `  ${tone.bone("MODEL ID")} ${tone.mist(glyphs.prompt)} `,
-                placeholder: "e.g. claude-sonnet-5-5",
-            });
-            if (result.kind !== "submit" || !result.text.trim())
-                return false;
-            const id = result.text.trim();
-            this.applyModel(resolveProviderForModel(id) ?? this.providerId, id);
-            await this.chooseEffortForModel(id);
-            return true;
         }
-        const separator = chosen.indexOf(":");
-        const model = chosen.slice(separator + 1);
-        this.applyModel(chosen.slice(0, separator), model);
-        await this.chooseEffortForModel(model);
+        const rawBase = urlResult.text.trim().replace(/\/+$/, "");
+        if (!/^https?:\/\//i.test(rawBase)) {
+            this.append([`  ${tone.red("// base url must start with http:// or https://")}`]);
+            return false;
+        }
+        const keyResult = await this.readLine({
+            prompt: `  ${tone.bone("API KEY")} ${tone.mist(glyphs.prompt)} `,
+            mask: true,
+            placeholder: "",
+        });
+        if (keyResult.kind !== "submit" || !keyResult.text.trim()) {
+            this.append([`  ${tone.mist("// cancelled")}`]);
+            return false;
+        }
+        const apiKey = keyResult.text.trim();
+        this.setStatus({ label: `CHECKING ${id.toUpperCase()}` });
+        let models = [];
+        let baseUrl = rawBase;
+        try {
+            const probe = await probeProviderModels(rawBase, apiKey);
+            baseUrl = probe.baseUrl;
+            models = probe.models;
+        }
+        catch (err) {
+            this.setStatus(null);
+            this.append([
+                `  ${tone.red(`// ${errorMessage(err)}`)}`,
+                `  ${tone.mist("// the provider must expose an OpenAI-compatible GET /models (usually <base>/v1)")}`,
+            ]);
+            return false;
+        }
+        this.setStatus(null);
+        if (models.length === 0) {
+            this.append([`  ${tone.red("// no chat models found at this endpoint")}`]);
+            return false;
+        }
+        const envKey = providerEnvKey(id);
+        registerCustomProvider({
+            id,
+            label: id,
+            envKey,
+            kind: "openai",
+            baseUrl,
+            defaultModel: models[0]?.id ?? "",
+            models,
+            custom: true,
+        });
+        process.env[envKey] = apiKey;
+        this.config.keys = { ...(this.config.keys ?? {}), [envKey]: apiKey };
+        this.config.customProviders = {
+            ...(this.config.customProviders ?? {}),
+            [id]: { label: id, baseUrl, envKey, models },
+        };
+        await saveConfig({ ...this.config }).catch(() => undefined);
+        this.append([
+            `  ${tone.accent(glyphs.diamond)} ${tone.mist(`// PROVIDER ADDED → ${id} · ${models.length} model${models.length === 1 ? "" : "s"}`)}`,
+            `    ${tone.silver(baseUrl)}`,
+            `    ${tone.mist(clipAnsi(models.slice(0, 6).map((model) => model.id).join(" · "), Math.max(20, this.contentWidth() - 6)))}`,
+        ]);
         return true;
     }
     effortEntries(efforts, current) {
@@ -1460,12 +1682,14 @@ class TuiApp {
     buildGate() {
         return {
             request: async (req) => {
-                if (this.agentMode === "plan" && !READ_ONLY_TOOLS.has(req.tool)) {
+                if (this.agentMode === "plan" && !PLAN_ALLOWED_TOOLS.has(req.tool)) {
                     this.append([
                         `  ${tone.amber(glyphs.diamondOpen)} ${tone.mist(`// ${req.tool} blocked in PLAN mode (Tab switches to BUILD)`)}`,
                     ]);
                     return { allowed: false };
                 }
+                if (this.agentMode === "plan" && READ_ONLY_TOOLS.has(req.tool))
+                    return { allowed: true };
                 if (this.gateMode === "always")
                     return { allowed: true };
                 const choice = await this.permissionCard(req);
@@ -1525,7 +1749,7 @@ class TuiApp {
         if (mcpSection)
             system = system ? `${system}\n\n${mcpSection}` : mcpSection;
         if (this.agentMode === "plan") {
-            system = `${system ? `${system}\n\n` : ""}# mode\nYou are in PLAN mode: analyze the codebase and propose a plan. Do not modify files or run commands. When the plan is ready, present it and tell the user to press Tab to switch to BUILD mode.`;
+            system = `${system ? `${system}\n\n` : ""}# mode\nYou are in PLAN mode: analyze the codebase and propose a plan. You may run read-only commands with run_command to inspect the project (each command is approved by the user), but never modify files, install packages or run mutating commands. When the plan is ready, present it and tell the user to press Tab to switch to BUILD mode.`;
         }
         this.abort = new AbortController();
         this.abortRequested = false;
@@ -1602,6 +1826,11 @@ class TuiApp {
                     ? "max steps"
                     : "failed";
         controller.footer(status);
+        if (result.status === "max_steps" && !this.abortRequested) {
+            this.append([
+                `  ${tone.amber(glyphs.diamondOpen)} ${tone.mist(`// STEP LIMIT REACHED (${this.opts.maxSteps}) — send any message to continue where it left off, or start with --max-steps <n>`)}`,
+            ]);
+        }
         const recordId = await this.saveTurn(input, result, controller.durationMs);
         if (this.turnUndo) {
             this.lastTurn = { ...this.turnUndo, recordId };
@@ -1621,7 +1850,9 @@ class TuiApp {
             case "new":
                 this.session = new Session(this.system);
                 this.conversationId = makeSessionId();
+                this.providerSessionId = makeSessionId();
                 this.lastTurn = null;
+                this.pendingImages = new Map();
                 this.transcript = [];
                 this.userMarkers = [];
                 this.messageCursor = -1;
@@ -1643,6 +1874,9 @@ class TuiApp {
                     }
                 }
                 return false;
+            case "provider":
+                await this.providerCommand(arg);
+                return false;
             case "effort":
                 await this.effortCommand(arg);
                 return false;
@@ -1722,7 +1956,6 @@ class TuiApp {
         this.transcript = this.transcript.map((line) => remapColors(line, pairs));
         this.config.theme = theme.id;
         void saveConfig({ ...this.config, theme: theme.id }).catch(() => undefined);
-        this.screen.applyBackground();
         this.append([
             `  ${tone.accent(glyphs.diamond)} ${tone.mist(`// THEME → ${theme.label.toUpperCase()}`)}`,
             "",
@@ -1743,7 +1976,7 @@ class TuiApp {
                 kind: "item",
                 value: conversationKey(record),
                 label: `${record.pinned ? `${glyphs.pin} ` : ""}${clipAnsi(displayTitle(record), labelWidth)}`,
-                hint: `${record.pinned ? "pinned · " : ""}${record.createdAt.slice(0, 16).replace("T", " ")} · ${record.model} · ${record.status} · ${record.steps} steps`,
+                hint: `${record.pinned ? "pinned · " : ""}${record.createdAt.slice(0, 16).replace("T", " ")} · ${record.provider ? `${record.provider} · ` : ""}${record.model} · ${record.status} · ${record.steps} steps`,
             }));
             const chosen = await this.openPicker(new Picker({
                 title: "sessions · enter resumes",
@@ -1807,25 +2040,91 @@ class TuiApp {
         const messages = record.messages ?? [];
         this.session = new Session(this.system, messages);
         this.conversationId = conversationKey(record);
+        this.providerSessionId = makeSessionId();
         if (record.model) {
-            this.providerId = resolveProviderForModel(record.model) ?? this.providerId;
+            const resolved = record.provider && providerHasModel(record.provider, record.model)
+                ? record.provider
+                : providerHasModel(this.providerId, record.model)
+                    ? this.providerId
+                    : resolveProviderForModel(record.model);
+            if (resolved)
+                this.providerId = resolved;
             this.model = record.model;
             this.provider = null;
         }
         const task = record.task.replace(/\s+/g, " ");
         this.append([
             `  ${tone.accent(glyphs.diamond)} ${tone.mist(`// RESUMED → ${clipAnsi(task, this.contentWidth() - 20)}`)}`,
-            `    ${tone.silver(`${messages.length} message${messages.length === 1 ? "" : "s"} · ${record.model} · ${record.createdAt.slice(0, 16).replace("T", " ")}`)}`,
+            `    ${tone.silver(`${messages.length} message${messages.length === 1 ? "" : "s"} · ${record.provider ? `${record.provider} · ` : ""}${record.model} · ${record.createdAt.slice(0, 16).replace("T", " ")}`)}`,
         ]);
-        if (record.text) {
+        if (messages.length > 0) {
+            this.append(this.replaySession(messages));
+        }
+        else if (record.text) {
             this.append([`  ${tone.mist("// LAST ANSWER")}`]);
             this.append(renderMarkdown(record.text, { width: this.contentWidth() - 2 }));
         }
-        if (messages.length === 0) {
+        else {
             this.append([`  ${tone.mist("// no stored messages for this session (saved before resume support)")}`]);
         }
         this.append([""]);
     }
+    replaySession(messages) {
+        const width = Math.max(40, this.contentWidth() - 2);
+        const calls = new Map();
+        const results = new Set();
+        for (const message of messages) {
+            if (message.role === "assistant") {
+                for (const part of message.content) {
+                    if (part.type === "tool_call")
+                        calls.set(part.id, { name: part.name, input: part.input });
+                }
+            }
+            else if (message.role === "tool") {
+                results.add(message.toolCallId);
+            }
+        }
+        const lines = [];
+        for (const message of messages) {
+            if (message.role === "user") {
+                const text = message.content
+                    .flatMap((part) => (part.type === "text" ? [part.text] : []))
+                    .join("\n");
+                const images = message.content.filter((part) => part.type === "image").length;
+                if (text.trim() || images > 0)
+                    lines.push(...this.userBlockLines(text, images));
+                continue;
+            }
+            if (message.role === "assistant") {
+                const text = message.content
+                    .flatMap((part) => (part.type === "text" ? [part.text] : []))
+                    .join("");
+                if (text.trim()) {
+                    lines.push(`  ${tone.mist("// AGENT")}`);
+                    lines.push(...renderMarkdown(text, { width }));
+                }
+                for (const part of message.content) {
+                    if (part.type !== "tool_call" || results.has(part.id))
+                        continue;
+                    const arg = toolArg(part.input, Math.max(20, width - 28));
+                    lines.push("", clipAnsi(`  ${tone.mist(toolGlyph(part.name))} ${bold(part.name)}${arg ? `  ${tone.silver(arg)}` : ""}  ${tone.mist("// no result stored")}`, width - 1));
+                }
+                continue;
+            }
+            const call = calls.get(message.toolCallId);
+            const name = call?.name ?? "tool";
+            const arg = call ? toolArg(call.input, Math.max(20, width - 28)) : "";
+            lines.push(...toolResultBlock({
+                tool: name,
+                arg,
+                content: message.content,
+                isError: Boolean(message.isError),
+                width,
+                verbose: this.verbose,
+            }));
+        }
+        return lines;
+    }
     async skillsCommand(arg) {
         const parts = arg.split(/\s+/).filter(Boolean);
         const sub = (parts[0] ?? "").toLowerCase();
@@ -2328,14 +2627,14 @@ class TuiApp {
         const keys = [
             ["enter", "send"],
             ["ctrl+enter", "newline (shift+enter, ctrl+space, ctrl+j, \\ + enter too)"],
-            ["ctrl+v", "paste text or an image"],
+            ["ctrl+v / alt+v", "paste text or an image — alt+v works even if the terminal eats ctrl+v"],
             ["mouse drag", "select text · ctrl+c copies"],
             ["permission card", "← → select · enter confirm · mouse click"],
             ["sessions picker", "ctrl+r rename · ctrl+p pin · ctrl+d delete"],
             ["↑ ↓", "input history — previous / next message"],
             ["wheel", "scroll the conversation"],
             ["ctrl+p/ctrl+n", "input history (same as ↑ ↓)"],
-            ["tab", "plan/build mode · complete commands"],
+            ["tab / badge", "switch plan/build · click the header badge · complete commands"],
             ["ctrl+z", "undo the last message (works while thinking)"],
             ["esc", "interrupt a run"],
             ["ctrl+c", "clear input / exit"],
@@ -2367,6 +2666,7 @@ class TuiApp {
             createdAt: new Date().toISOString(),
             cwd: this.dir,
             task: input,
+            provider: this.providerId,
             model: this.model,
             status: result.status,
             steps: result.steps,
@@ -2437,6 +2737,80 @@ function shortenHome(dir) {
     const home = homedir();
     return dir.startsWith(home) ? `~${dir.slice(home.length)}` : dir;
 }
+const IMAGE_EXTENSIONS = {
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".jpeg": "image/jpeg",
+    ".webp": "image/webp",
+    ".gif": "image/gif",
+    ".bmp": "image/bmp",
+};
+const IMAGE_MARKER_RE = /\[Image (\d+)\]/g;
+export function nextImageIndex(text) {
+    const used = new Set();
+    for (const match of text.matchAll(IMAGE_MARKER_RE)) {
+        const index = Number(match[1]);
+        if (Number.isInteger(index) && index > 0)
+            used.add(index);
+    }
+    let index = 1;
+    while (used.has(index))
+        index += 1;
+    return index;
+}
+export function extractInputImages(text, images) {
+    const used = [];
+    const cleaned = text
+        .replace(IMAGE_MARKER_RE, (match, raw) => {
+        const image = images.get(Number(raw));
+        if (!image)
+            return match;
+        used.push(image);
+        return "";
+    })
+        .replace(/[ \t]{2,}/g, " ")
+        .replace(/[ \t]+\n/g, "\n")
+        .trim();
+    return { text: cleaned, images: used };
+}
+function imageTokenBefore(before) {
+    const match = /(?:\[Image \d+\][ \t]*)+$/.exec(before);
+    return match ? match[0].length : 0;
+}
+function imageTokenAfter(after) {
+    const match = /^(?:\[Image \d+\][ \t]*)+/.exec(after);
+    return match ? match[0].length : 0;
+}
+function styleInputLine(text) {
+    const parts = text.split(/(\[Image \d+\])/);
+    if (parts.length === 1)
+        return tone.bone(text);
+    return parts
+        .map((part) => /^\[Image \d+\]$/.test(part) ? tone.onBone(part) : tone.bone(part))
+        .join("");
+}
+async function imageFromPath(raw) {
+    const lines = raw
+        .split(/\r?\n/)
+        .map((line) => line.trim().replace(/^["']|["']$/g, "").trim())
+        .filter(Boolean);
+    if (lines.length !== 1)
+        return null;
+    const file = lines[0];
+    const mediaType = IMAGE_EXTENSIONS[path.extname(file).toLowerCase()];
+    if (!mediaType)
+        return null;
+    try {
+        const info = await stat(file);
+        if (!info.isFile() || info.size === 0 || info.size > 12 * 1024 * 1024)
+            return null;
+        const data = await readFile(file);
+        return { type: "image", mediaType, data: data.toString("base64") };
+    }
+    catch {
+        return null;
+    }
+}
 function errorMessage(err) {
     return err instanceof Error ? err.message : String(err);
 }