@quatcode/agent 0.2.5 → 0.2.7

package/dist/tui.js

@@ -10,7 +10,7 @@ import { Picker } from "./picker.js";
 import { Screen } from "./screen.js";
 import { TurnController, fmtCost, fmtDuration, fmtTokens, toolArg, toolResultBlock } from "./turn.js";
 import { renderBanner } from "./logo.js";
-import { renderMarkdown } from "./markdown.js";
+import { renderMarkdown, wrapSegments } from "./markdown.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";
@@ -24,6 +24,7 @@ const COMMAND_INFO = [
     { 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: "/btw", args: "<question>", desc: "ask a side question without interrupting the task" },
     { 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" },
@@ -136,6 +137,14 @@ class TuiApp {
     modeBadgeWidth = 0;
     modeBadgeHover = false;
     versionNotice = null;
+    bottomHintStart = -1;
+    bottomHintWidth = 0;
+    bottomHintRow = -1;
+    queue = [];
+    inputScroll = 0;
+    lastInputTotalRows = 0;
+    hoverRow = -1;
+    hoverCol = -1;
     constructor(options, input, output) {
         this.opts = options;
         this.dir = path.resolve(options.dir);
@@ -237,8 +246,10 @@ class TuiApp {
             const prompt = this.opts.initialPrompt;
             this.buffer.addHistory(prompt);
             this.clearSplash();
-            this.append(this.userBlockLines(prompt));
+            this.appendUserBlock(prompt, 0);
             await this.turn(prompt);
+            if (await this.drainQueue())
+                return this.finish();
         }
         for (;;) {
             const result = await this.readLine();
@@ -264,7 +275,7 @@ class TuiApp {
                 transcriptLength: transcriptAt,
             };
             this.messageCursor = -1;
-            this.append(this.userBlockLines(input, images.length));
+            const blockStart = this.appendUserBlock(input, images.length);
             if (isCommand) {
                 this.turnUndo = null;
                 const shouldExit = await this.command(input);
@@ -272,9 +283,14 @@ class TuiApp {
                     break;
                 continue;
             }
-            this.userMarkers.push({ line: transcriptAt, text: input });
+            this.userMarkers.push({ line: blockStart, text: input });
             await this.turn(input, images);
+            if (await this.drainQueue())
+                break;
         }
+        return this.finish();
+    }
+    async finish() {
         this.printGoodbye();
         this.renderNow();
         await this.pause(120);
@@ -374,6 +390,12 @@ class TuiApp {
                         this.moveSuggestion(key.kind === "wheelup" ? -1 : 1);
                         continue;
                     }
+                    if ((this.mode === "editing" || this.mode === "running") &&
+                        this.inputOverflow() &&
+                        this.pointerOverInput()) {
+                        this.scrollInput(key.kind === "wheelup" ? 3 : -3);
+                        continue;
+                    }
                     const delta = key.kind === "wheelup" ? 3 : -3;
                     if (this.mode === "picker" && this.picker) {
                         const dir = key.kind === "wheelup" ? "up" : "down";
@@ -433,10 +455,21 @@ class TuiApp {
                 this.selection = null;
                 this.scheduleRender();
             }
+            if (key.type === "nav" && key.dir === "down" && key.ctrl) {
+                this.scrollOffset = 0;
+                this.scheduleRender();
+                continue;
+            }
             if (this.mode === "editing")
                 this.handleEditKey(key);
-            else if (this.mode === "running")
-                this.handleRunKey(key);
+            else if (this.mode === "running") {
+                const abortKey = key.type === "escape" || (key.type === "control" && key.ch === "c");
+                const undoKey = key.type === "control" && key.ch === "z";
+                if (abortKey || undoKey)
+                    this.handleRunKey(key);
+                else
+                    this.handleEditKey(key);
+            }
             else if (this.mode === "permission")
                 this.handleConfirmKey(key);
             else if (this.mode === "picker")
@@ -466,6 +499,10 @@ class TuiApp {
         if (key.type === "text" || key.type === "backspace" || key.type === "delete") {
             this.suggestionIndex = 0;
         }
+        if (key.type === "text" || key.type === "backspace" || key.type === "delete") {
+            this.suggestionIndex = 0;
+            this.inputScroll = 0;
+        }
         switch (key.type) {
             case "text":
                 this.buffer.insert(key.text);
@@ -473,14 +510,16 @@ class TuiApp {
             case "control":
                 switch (key.ch) {
                     case "c":
-                        if (this.buffer.isEmpty())
+                        if (this.buffer.isEmpty() && this.mode !== "running")
                             this.finishLine({ kind: "interrupt" });
                         else
                             this.buffer.clearLine();
                         break;
                     case "d":
-                        if (this.buffer.isEmpty())
-                            this.finishLine({ kind: "eof" });
+                        if (this.buffer.isEmpty()) {
+                            if (this.mode !== "running")
+                                this.finishLine({ kind: "eof" });
+                        }
                         else
                             this.buffer.deleteForward();
                         break;
@@ -543,7 +582,7 @@ class TuiApp {
                     if (!this.deleteImageTokenAfter())
                         this.buffer.deleteWordAfter();
                 }
-                else if (key.ch === "v" || key.ch === "V") {
+                else if (key.ch === "v" || key.ch === "V" || key.ch === "м" || key.ch === "М") {
                     void this.pasteFromClipboard();
                     return;
                 }
@@ -554,6 +593,7 @@ class TuiApp {
                     this.moveSuggestion(key.dir === "up" ? -1 : 1);
                     return;
                 }
+                this.inputScroll = 0;
                 if (key.dir === "up") {
                     if (!this.buffer.moveVertical(-1))
                         this.buffer.historyPrev();
@@ -588,6 +628,7 @@ class TuiApp {
                 }
                 break;
             case "newline":
+                this.inputScroll = 0;
                 this.buffer.insert("\n");
                 break;
             case "enter": {
@@ -599,7 +640,7 @@ class TuiApp {
                     const index = Math.max(0, Math.min(this.suggestionIndex, matches.length - 1));
                     const selected = matches[index];
                     if (selected) {
-                        this.finishLine({ kind: "submit", text: selected.name });
+                        this.submitText(selected.name);
                         return;
                     }
                 }
@@ -612,13 +653,13 @@ class TuiApp {
                     if (unique.length === 1)
                         text = unique[0].name;
                 }
-                this.finishLine({ kind: "submit", text });
+                this.submitText(text);
                 return;
             }
             case "tab":
                 if (this.suggestionMatches().length > 0)
                     this.completeCommand();
-                else
+                else if (this.mode !== "running")
                     this.toggleMode();
                 break;
             case "backspace":
@@ -644,13 +685,104 @@ class TuiApp {
         this.scheduleRender();
         resolve?.(result);
     }
+    submitText(raw) {
+        if (this.mode !== "running") {
+            this.buffer.reset();
+            this.inputScroll = 0;
+            this.finishLine({ kind: "submit", text: raw });
+            return;
+        }
+        const extracted = extractInputImages(raw, this.pendingImages);
+        this.pendingImages = new Map();
+        const text = extracted.text;
+        const images = extracted.images;
+        if (text)
+            this.buffer.addHistory(text);
+        this.buffer.reset();
+        this.inputScroll = 0;
+        if (/^\/btw\b/.test(text)) {
+            void this.runBtw(text.replace(/^\/btw\s*/, ""));
+            return;
+        }
+        this.queue.push({ text, images });
+        this.appendUserBlock(text, images.length, [
+            `  ${tone.mist("// QUEUED — will be sent when the current task finishes")}`,
+        ]);
+        this.scheduleRender();
+    }
+    async drainQueue() {
+        while (this.queue.length > 0) {
+            const next = this.queue.shift();
+            if (!next.text.trim())
+                continue;
+            if (next.text.startsWith("/")) {
+                const shouldExit = await this.command(next.text);
+                if (shouldExit)
+                    return true;
+                continue;
+            }
+            this.append([`  ${tone.mist("// SENDING QUEUED MESSAGE")}`]);
+            this.clearSplash();
+            this.userMarkers.push({ line: this.transcript.length, text: next.text });
+            await this.turn(next.text, next.images);
+        }
+        return false;
+    }
+    async runBtw(question) {
+        const text = question.trim();
+        if (!text) {
+            this.append([`  ${tone.mist("// usage: /btw <question>")}`]);
+            return;
+        }
+        const provider = this.ensureProvider();
+        const inner = Math.min(Math.max(44, this.contentWidth() - 8), 66);
+        if (!provider) {
+            this.append([
+                `  ${tone.red(glyphs.cross)} ${tone.mist("// BTW needs a configured provider")}`,
+            ]);
+            return;
+        }
+        const pending = box("BTW", [tone.silver(clipAnsi(text, inner - 2)), "", tone.mist("// thinking…")], inner, palette.steel);
+        this.append([...pending, ""]);
+        const start = Math.max(0, this.transcript.length - pending.length - 1);
+        try {
+            const response = await provider.complete({
+                model: this.model,
+                system: `${this.system ? `${this.system}\n\n` : ""}# side channel\nThe user is asking a quick side question while the main task runs. Answer briefly and directly. Do not use tools, do not change the main task, and do not ask to run anything.`,
+                messages: [
+                    ...this.session.getMessages(),
+                    { role: "user", content: [{ type: "text", text }] },
+                ],
+                maxTokens: 2048,
+            });
+            const answer = response.content
+                .map((part) => (part.type === "text" ? part.text : ""))
+                .join("")
+                .trim();
+            const answerLines = answer
+                ? renderMarkdown(answer, { width: inner - 2, indent: 2 })
+                : [tone.mist("// the model returned no answer")];
+            const card = box("BTW", [tone.silver(clipAnsi(text, inner - 2)), "", ...answerLines], inner, palette.steel);
+            this.transcript.splice(start, pending.length + 1, ...card, "");
+        }
+        catch (err) {
+            const card = box("BTW", [
+                tone.silver(clipAnsi(text, inner - 2)),
+                "",
+                tone.red(`// ${errorMessage(err)}`),
+            ], inner, palette.red);
+            this.transcript.splice(start, pending.length + 1, ...card, "");
+        }
+        this.scheduleRender();
+    }
     readLine(overrides = {}) {
         const initial = overrides.initial ?? this.pendingInitial ?? "";
         this.pendingInitial = null;
         if (initial)
             this.buffer.setText(initial);
-        else
+        else if (this.buffer.text().trim() === "")
             this.buffer.reset();
+        this.inputScroll = 0;
         this.inputPrompt = overrides.prompt ?? defaultPrompt();
         this.inputMask = overrides.mask ?? false;
         this.inputPlaceholder = overrides.placeholder ?? "ask anything, or /help";
@@ -735,17 +867,58 @@ class TuiApp {
         if (!rendered)
             return false;
         const top = this.lastHeaderRows + this.lastViewport + this.lastInputOffset;
-        const lineIndex = row - top;
-        if (lineIndex < 0 || lineIndex >= rendered.lines.length)
+        const rowIndex = row - top;
+        if (rowIndex < 0 || rowIndex >= rendered.lines.length)
+            return false;
+        const visual = rendered.rows[rowIndex];
+        if (!visual)
             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);
+        const textCol = col - this.padX - visual.prefixWidth;
+        this.buffer.setCursorFromDisplay(visual.line, Math.max(0, textCol), visual.start);
         this.scheduleRender();
         return true;
     }
+    inputWindowSize() {
+        return Math.max(3, Math.floor(this.screen.rows / 2));
+    }
+    inputOverflow() {
+        return this.lastInputTotalRows > this.inputWindowSize();
+    }
+    pointerOverInput() {
+        if (!this.lastInputRender || this.hoverRow < 0)
+            return false;
+        const top = this.lastHeaderRows + this.lastViewport + this.lastInputOffset;
+        return (this.hoverRow >= top && this.hoverRow < top + this.lastInputRender.lines.length);
+    }
+    scrollInput(delta) {
+        const maxOffset = Math.max(0, this.lastInputTotalRows - this.inputWindowSize());
+        this.inputScroll = Math.max(0, Math.min(this.inputScroll + delta, maxOffset));
+        this.scheduleRender();
+    }
+    bottomHintHit(row, col) {
+        if (this.bottomHintRow < 0 || this.bottomHintStart < 0)
+            return false;
+        if (row !== this.bottomHintRow)
+            return false;
+        const start = this.padX + this.bottomHintStart;
+        return col >= start && col < start + this.bottomHintWidth;
+    }
+    bottomRuleLine() {
+        const width = this.contentWidth();
+        const label = `${glyphs.arrowDown} bottom · ctrl+${glyphs.arrowDown}`;
+        this.bottomHintStart = -1;
+        this.bottomHintWidth = 0;
+        if (this.scrollOffset > 0 && this.mode !== "picker" && width > 36) {
+            const dashes = Math.max(8, width - 2 - stringWidth(label) - 2);
+            this.bottomHintStart = 2 + dashes + 2;
+            this.bottomHintWidth = stringWidth(label);
+            return `  ${tone.mist("─".repeat(dashes))}  ${tone.silver(label)}`;
+        }
+        return `  ${tone.mist("─".repeat(Math.max(8, width - 2)))}`;
+    }
     handleHover(row, col) {
+        this.hoverRow = row;
+        this.hoverCol = col;
         if (row === 1) {
             const hover = this.badgeHit(col);
             if (hover !== this.modeBadgeHover) {
@@ -767,11 +940,11 @@ class TuiApp {
             }
             return;
         }
-        if (this.mode === "editing") {
+        if (this.mode === "editing" || this.mode === "running") {
             const matches = this.suggestionMatches();
             if (matches.length === 0)
                 return;
-            const top = this.lastHeaderRows + this.lastViewport + 1;
+            const top = this.lastHeaderRows + this.lastViewport + 1 + (this.status ? 1 : 0);
             const index = row - top;
             if (index >= 0 && index < matches.length && index !== this.suggestionIndex) {
                 this.suggestionIndex = index;
@@ -791,6 +964,11 @@ class TuiApp {
             this.toggleMode();
             return;
         }
+        if (this.bottomHintHit(row, col)) {
+            this.scrollOffset = 0;
+            this.scheduleRender();
+            return;
+        }
         if (this.mode === "permission") {
             const index = this.permissionOptionAt(row, col);
             if (index !== null) {
@@ -802,16 +980,16 @@ class TuiApp {
             }
             return;
         }
-        if (this.mode === "editing") {
+        if (this.mode === "editing" || this.mode === "running") {
             if (this.placeInputCursor(row, col))
                 return;
             const matches = this.suggestionMatches();
             if (matches.length > 0) {
-                const top = this.lastHeaderRows + this.lastViewport + 1;
+                const top = this.lastHeaderRows + this.lastViewport + 1 + (this.status ? 1 : 0);
                 const index = row - top;
                 if (index >= 0 && index < matches.length) {
                     this.suggestionIndex = index;
-                    this.finishLine({ kind: "submit", text: matches[index].name });
+                    this.submitText(matches[index].name);
                 }
             }
             return;
@@ -1036,6 +1214,8 @@ class TuiApp {
         const viewport = Math.max(3, rows - header.length - footer.length - this.padTop - this.padBottom);
         this.lastHeaderRows = header.length + this.padTop;
         this.lastViewport = viewport;
+        this.bottomHintRow =
+            this.bottomHintStart >= 0 ? this.lastHeaderRows + viewport + footer.length - 1 : -1;
         let content;
         if (this.mode === "picker" && this.picker) {
             content = this.picker.render(this.contentWidth() - 2, viewport);
@@ -1051,7 +1231,10 @@ class TuiApp {
         while (lines.length < rows)
             lines.push("");
         let cursor = null;
-        if (this.mode === "editing" && this.lastInputRender) {
+        if ((this.mode === "editing" || this.mode === "running") &&
+            this.lastInputRender &&
+            this.lastInputRender.cursorRow >= 0 &&
+            this.lastInputRender.cursorRow < this.lastInputRender.lines.length) {
             const inputTop = this.padTop + header.length + viewport + this.lastInputOffset;
             cursor = {
                 row: inputTop + this.lastInputRender.cursorRow,
@@ -1116,7 +1299,8 @@ class TuiApp {
     footerLines() {
         const width = this.contentWidth();
         const rule = `  ${tone.mist("─".repeat(Math.max(8, width - 2)))}`;
-        if (this.mode === "editing") {
+        const bottom = this.bottomRuleLine();
+        if (this.mode === "editing" || this.mode === "running") {
             const rendered = this.buffer.render({
                 width,
                 prompt: this.inputPrompt,
@@ -1124,28 +1308,55 @@ class TuiApp {
                 mask: this.inputMask,
                 style: styleInputLine,
             });
-            this.lastInputRender = rendered;
+            const maxRows = this.inputWindowSize();
+            const total = rendered.lines.length;
+            this.lastInputTotalRows = total;
+            if (total > maxRows) {
+                const maxOffset = total - maxRows;
+                const fromBottom = Math.max(0, Math.min(this.inputScroll, maxOffset));
+                this.inputScroll = fromBottom;
+                const start = maxOffset - fromBottom;
+                this.lastInputRender = {
+                    lines: rendered.lines.slice(start, start + maxRows),
+                    rows: rendered.rows.slice(start, start + maxRows),
+                    cursorRow: rendered.cursorRow - start,
+                    cursorCol: rendered.cursorCol,
+                };
+            }
+            else {
+                this.inputScroll = 0;
+                this.lastInputRender = rendered;
+            }
             const suggestions = this.suggestions();
-            this.lastInputOffset = 1 + suggestions.length;
-            return [rule, ...suggestions, ...rendered.lines, rule];
+            const statusLines = this.status
+                ? [this.statusLine()]
+                : this.mode === "running"
+                    ? [`  ${tone.mist("// esc interrupts · enter queues a message")}`]
+                    : [];
+            this.lastInputOffset = 1 + statusLines.length + suggestions.length;
+            return [rule, ...statusLines, ...suggestions, ...this.lastInputRender.lines, bottom];
         }
         this.lastInputRender = null;
+        this.lastInputTotalRows = 0;
         if (this.status)
-            return [rule, this.statusLine(), rule];
-        if (this.mode === "running") {
-            return [rule, `  ${tone.mist("// esc interrupts")}`, rule];
-        }
+            return [rule, this.statusLine(), bottom];
         if (this.mode === "permission")
-            return [rule, `  ${this.permissionHint}`, rule];
+            return [rule, `  ${this.permissionHint}`, bottom];
         if (this.mode === "picker" && this.picker) {
-            return [rule, this.picker.footer(this.picker.itemCount()), rule];
+            return [rule, this.picker.footer(this.picker.itemCount()), bottom];
         }
-        return [rule, "", rule];
+        return [rule, "", bottom];
     }
     statusLine() {
         const spin = tone.accent(glyphs.spinner[this.spinnerFrame % glyphs.spinner.length] ?? "-");
         const elapsed = ((performance.now() - this.statusStartedAt) / 1000).toFixed(1);
-        const meta = [this.status?.meta, `${elapsed}s`].filter(Boolean).join(" · ");
+        const meta = [
+            this.status?.meta,
+            `${elapsed}s`,
+            this.queue.length > 0 ? `${this.queue.length} queued` : "",
+        ]
+            .filter(Boolean)
+            .join(" · ");
         return `  ${spin} ${this.status?.label ?? ""}  ${tone.mist(meta)}`;
     }
     visibleTranscript(viewport) {
@@ -1900,6 +2111,9 @@ class TuiApp {
             case "help":
                 this.printHelp();
                 return false;
+            case "btw":
+                await this.runBtw(arg);
+                return false;
             case "new":
                 this.session = new Session(this.system);
                 this.conversationId = makeSessionId();
@@ -2144,8 +2358,12 @@ class TuiApp {
                     .flatMap((part) => (part.type === "text" ? [part.text] : []))
                     .join("\n");
                 const images = message.content.filter((part) => part.type === "image").length;
-                if (text.trim() || images > 0)
+                if (text.trim() || images > 0) {
+                    if (lines.length > 0 && lines[lines.length - 1] !== "")
+                        lines.push("");
                     lines.push(...this.userBlockLines(text, images));
+                    lines.push("");
+                }
                 continue;
             }
             if (message.role === "assistant") {
@@ -2687,6 +2905,8 @@ class TuiApp {
             ["sessions picker", "ctrl+r rename · ctrl+p pin · ctrl+d delete"],
             ["↑ ↓", "input history — previous / next message"],
             ["wheel", "scroll the conversation"],
+            ["ctrl+↓", "jump to the bottom of the chat (or click the ↓ button)"],
+            ["enter while running", "queue the message · /btw asks without interrupting"],
             ["ctrl+p/ctrl+n", "input history (same as ↑ ↓)"],
             ["tab / badge", "switch plan/build · click the header badge · complete commands"],
             ["ctrl+z", "undo the last message (works while thinking)"],
@@ -2704,14 +2924,31 @@ class TuiApp {
         }
         this.append(lines);
     }
+    appendUserBlock(input, imageCount, extra = []) {
+        const lines = this.userBlockLines(input, imageCount);
+        const last = this.transcript[this.transcript.length - 1];
+        const leading = this.transcript.length > 0 && last !== "" ? [""] : [];
+        this.append([...leading, ...lines, ...extra, ""]);
+        return Math.max(0, this.transcript.length - (extra.length + 1) - lines.length);
+    }
     userBlockLines(input, imageCount = 0) {
+        const width = Math.max(20, this.contentWidth() - 2);
         const lines = input.split("\n");
-        const head = `  ${tone.accent(glyphs.prompt)} ${bold(tone.bone(lines[0] ?? ""))}`;
-        const rest = lines.slice(1).map((line) => `    ${tone.bone(line)}`);
-        const images = imageCount > 0
-            ? [`    ${tone.mist(`[${imageCount} image${imageCount === 1 ? "" : "s"} attached]`)}`]
-            : [];
-        return [head, ...rest, ...images];
+        const out = [];
+        for (let index = 0; index < lines.length; index++) {
+            const line = lines[index];
+            if (line === "") {
+                out.push("");
+                continue;
+            }
+            const prefix = index === 0 ? `${tone.accent(glyphs.prompt)} ` : "  ";
+            const kind = index === 0 ? "bold" : "plain";
+            out.push(...wrapSegments([{ text: line, kind }], prefix, "  ", width));
+        }
+        if (imageCount > 0) {
+            out.push(`  ${tone.mist(`[${imageCount} image${imageCount === 1 ? "" : "s"} attached]`)}`);
+        }
+        return out;
     }
     async saveTurn(input, result, durationMs) {
         const cost = estimateCost(result.usage, this.model, this.providerId);