@quatcode/agent 0.2.1 → 0.2.3

package/dist/tui.js

@@ -8,11 +8,11 @@ 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 { ADD_PROVIDER, allProviders, buildProvider, defaultModelFor, effortsForModel, hasKey, keyEnvFor, probeProviderModels, providerEnvKey, providerMeta, providerSlug, registerCustomProvider, removeCustomProvider, 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";
@@ -50,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;
@@ -82,6 +83,7 @@ class TuiApp {
     gateMode;
     verbose = false;
     conversationId = makeSessionId();
+    providerSessionId = makeSessionId();
     totalUsage = emptyUsage();
     turns = 0;
     transcript = [];
@@ -130,6 +132,9 @@ class TuiApp {
     messageCursor = -1;
     selection = null;
     frameLines = [];
+    modeBadgeStart = -1;
+    modeBadgeWidth = 0;
+    modeBadgeHover = false;
     constructor(options, input, output) {
         this.opts = options;
         this.dir = path.resolve(options.dir);
@@ -142,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();
@@ -179,7 +189,6 @@ class TuiApp {
         }
         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();
@@ -320,9 +329,12 @@ class TuiApp {
     onKeys = (keys) => {
         for (const key of keys) {
             if (key.type === "resize") {
-                this.screen.applyBackground();
+                this.screen.requestSize();
                 this.scheduleRender();
-                const settle = setTimeout(() => this.scheduleRender(), 150);
+                const settle = setTimeout(() => {
+                    this.screen.requestSize();
+                    this.scheduleRender();
+                }, 150);
                 if (typeof settle.unref === "function")
                     settle.unref();
                 continue;
@@ -683,7 +695,41 @@ 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;
+    }
+    placeInputCursor(row, col) {
+        const rendered = this.lastInputRender;
+        if (!rendered)
+            return false;
+        const top = this.lastHeaderRows + this.lastViewport + this.lastInputOffset;
+        const lineIndex = row - top;
+        if (lineIndex < 0 || lineIndex >= rendered.lines.length)
+            return false;
+        const prefixWidth = rendered.prefixWidths[lineIndex] ?? 0;
+        const textCol = col - this.padX - prefixWidth;
+        const start = rendered.lineStarts[lineIndex] ?? 0;
+        this.buffer.setCursorFromDisplay(lineIndex, Math.max(0, textCol), start);
+        this.scheduleRender();
+        return true;
+    }
     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) {
@@ -710,6 +756,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) {
@@ -722,6 +774,8 @@ class TuiApp {
             return;
         }
         if (this.mode === "editing") {
+            if (this.placeInputCursor(row, col))
+                return;
             const matches = this.suggestionMatches();
             if (matches.length > 0) {
                 const top = this.lastHeaderRows + this.lastViewport + 1;
@@ -999,28 +1053,33 @@ 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,
@@ -1032,20 +1091,20 @@ class TuiApp {
             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] ?? "-");
@@ -1225,7 +1284,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());
@@ -1258,14 +1317,16 @@ 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 {
@@ -1399,14 +1460,14 @@ class TuiApp {
         }
         const urlResult = await this.readLine({
             prompt: `  ${tone.bone("BASE URL")} ${tone.mist(glyphs.prompt)} `,
-            placeholder: "https://api.example.com/v1",
+            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;
         }
-        const baseUrl = urlResult.text.trim().replace(/\/+$/, "");
-        if (!/^https?:\/\//i.test(baseUrl)) {
+        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;
         }
@@ -1422,14 +1483,17 @@ class TuiApp {
         const apiKey = keyResult.text.trim();
         this.setStatus({ label: `CHECKING ${id.toUpperCase()}` });
         let models = [];
+        let baseUrl = rawBase;
         try {
-            models = await probeProviderModels(baseUrl, apiKey);
+            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")}`,
+                `  ${tone.mist("// the provider must expose an OpenAI-compatible GET /models (usually <base>/v1)")}`,
             ]);
             return false;
         }
@@ -1635,12 +1699,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);
@@ -1700,7 +1766,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;
@@ -1777,6 +1843,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 };
@@ -1796,6 +1867,7 @@ 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 = [];
@@ -1901,7 +1973,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()}`)}`,
             "",
@@ -1922,7 +1993,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",
@@ -1986,25 +2057,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();
@@ -2509,12 +2646,13 @@ class TuiApp {
             ["ctrl+enter", "newline (shift+enter, ctrl+space, ctrl+j, \\ + enter too)"],
             ["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"],
+            ["click in input", "place the cursor"],
             ["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"],
@@ -2546,6 +2684,7 @@ class TuiApp {
             createdAt: new Date().toISOString(),
             cwd: this.dir,
             task: input,
+            provider: this.providerId,
             model: this.model,
             status: result.status,
             steps: result.steps,