@xingjisoft/neutrino 0.1.2 → 0.1.4

package/dist/screens/chat.js

@@ -1,12 +1,14 @@
 import { Screen } from "../terminal/screen.js";
 import { C } from "../colors.js";
-import { loadPrompt, saveSession, } from "../config.js";
+import { loadConfig, loadPrompt, saveSession, } from "../config.js";
 import { drawHeader } from "../header.js";
-import { computeInputWindow, cursorFromColumn, drawInputBox, wrapText } from "../ui.js";
+import { computeInputWindow, cursorFromColumn, drawInputBox, drawScrollbar, wrapText } from "../ui.js";
 import { drawSpans, renderMarkdownText } from "../markdown.js";
 import { ellipsize, displayWidth } from "../width.js";
-import { LLMClient } from "../llm/client.js";
+import { sanitizeText } from "../sanitize.js";
+import { LLMClient, describeError } from "../llm/client.js";
 import { executeTool, getToolDefinitions } from "../llm/tools.js";
+import { COMPACT_KEEP, COMPACT_MAX_CHARS_PER_MESSAGE, planCompaction, transcriptFor, } from "../compact.js";
 const TOOLS = getToolDefinitions();
 function parseArgs(s) {
     if (!s || !s.trim())
@@ -42,8 +44,23 @@ export class ChatScreen extends Screen {
     cursor = 0;
     scrollTop = 0;
     followBottom = true;
+    scrollbarGeom = null;
     lastEscTime = 0;
     initialized = false;
+    // ---- auto context compression ----
+    /** Prompt tokens of the most recent request — the best proxy for how large
+     *  the current context has grown. Reset once the history is compressed. */
+    lastPromptTokens = 0;
+    compressing = false;
+    // ---- collapsible tool output ----
+    /** Message indices whose tool output is expanded (everything starts
+     *  collapsed). */
+    expandedTools = new Set();
+    /** For each line produced by buildLines, the tool message index it belongs
+     *  to, or -1 when it is not part of a tool block. */
+    toolLineIndex = [];
+    /** Terminal row -> tool message index, rebuilt each render for hit-testing. */
+    toolRows = new Map();
     constructor(initialMessage = "") {
         super();
         this.initialMessage = initialMessage;
@@ -78,10 +95,39 @@ export class ChatScreen extends Screen {
             this.app.render();
         }
     }
+    /**
+     * The input row is persistent chrome: it is drawn with absolute positioning
+     * and must survive any terminal-side drift (ConPTY reflow, a stray scroll).
+     * Repainting it every frame makes the input area self-healing — the log can
+     * never end up "covering" it.
+     */
+    alwaysRepaintRows() {
+        const h = this.app.height;
+        const rows = [];
+        for (let y = h - 5; y <= h - 1; y++)
+            if (y >= 0)
+                rows.push(y);
+        return rows;
+    }
     showsCursor() {
         // The chat input is always focused; a cursor is drawn when it holds text.
         return this.inputValue.length > 0;
     }
+    onPaste(text) {
+        if (!text)
+            return;
+        // A pasted tab/ESC would otherwise sit in the input box and be re-emitted
+        // by the renderer on every frame, corrupting the rows around it.
+        text = sanitizeText(text, { singleLine: true });
+        if (!text)
+            return;
+        if (this.showInfo)
+            this.showInfo = false;
+        this.inputValue =
+            this.inputValue.slice(0, this.cursor) + text + this.inputValue.slice(this.cursor);
+        this.cursor += text.length;
+        this.app.render();
+    }
     onKey(key) {
         if (this.showInfo) {
             this.showInfo = false;
@@ -175,6 +221,7 @@ export class ChatScreen extends Screen {
         if (key.ctrl && key.name === "l") {
             const sysText = this.messages[0] && this.messages[0].role === "system" ? this.messages[0].content : "";
             this.messages = [{ role: "system", content: sysText }];
+            this.expandedTools.clear();
             this.streamingContent = null;
             this.scrollTop = 0;
             this.followBottom = true;
@@ -224,6 +271,12 @@ export class ChatScreen extends Screen {
                 this.app.render();
                 return;
             }
+            // A click inside the conversation log toggles a tool block open/closed.
+            const tool = this.toolRows.get(ev.y);
+            if (tool !== undefined) {
+                this.toggleTool(tool);
+                return;
+            }
             return;
         }
         if (ev.type === "wheel") {
@@ -237,6 +290,26 @@ export class ChatScreen extends Screen {
             this.app.render();
         }
     }
+    scrollbar() {
+        const g = this.scrollbarGeom;
+        if (!g || g.total <= g.viewport)
+            return null;
+        return {
+            x: g.x,
+            top: g.top,
+            bottom: g.bottom,
+            total: g.total,
+            viewport: g.viewport,
+            offset: this.scrollTop,
+            scrollTo: (offset) => {
+                const maxScroll = Math.max(0, g.total - g.viewport);
+                this.scrollTop = Math.max(0, Math.min(offset, maxScroll));
+                // Dragging to the very bottom resumes auto-following new output.
+                this.followBottom = this.scrollTop >= maxScroll;
+                this.app.render();
+            },
+        };
+    }
     togglePause() {
         if (!this.busy && !this.queued)
             return;
@@ -276,10 +349,17 @@ export class ChatScreen extends Screen {
         this.paused = false;
         this.app.state.isThinking = true;
         const token = ++this.turnToken;
-        const apiMessages = this.buildApiMessages();
         this.streamingContent = "";
         this.app.render();
-        void this.agentLoop(apiMessages, token);
+        void (async () => {
+            // Shrink the history before building the request when it has outgrown the
+            // configured budget.
+            await this.autoCompress(token);
+            if (token !== this.turnToken)
+                return;
+            const apiMessages = this.buildApiMessages();
+            await this.agentLoop(apiMessages, token);
+        })();
     }
     buildApiMessages() {
         const api = [{ role: "system", content: loadPrompt() }];
@@ -287,6 +367,10 @@ export class ChatScreen extends Screen {
             if (m.role === "user" || m.role === "assistant") {
                 api.push({ role: m.role, content: m.content });
             }
+            else if (m.role === "summary") {
+                // A compressed summary is fed back to the model as its own prior output.
+                api.push({ role: "assistant", content: m.content });
+            }
         }
         return api;
     }
@@ -295,6 +379,9 @@ export class ChatScreen extends Screen {
             while (true) {
                 if (token !== this.turnToken)
                     return;
+                // Keep the payload inside budget during a long single turn: once the
+                // context is too large, drop the body of older tool results.
+                apiMessages = this.trimApiMessages(apiMessages);
                 const client = new LLMClient(this.model, this.modelProvider, this.intensity);
                 let content = "";
                 let hasContent = false;
@@ -312,6 +399,7 @@ export class ChatScreen extends Screen {
                 if (client.usage) {
                     this.tokens.prompt += client.usage.prompt;
                     this.tokens.completion += client.usage.completion;
+                    this.lastPromptTokens = client.usage.prompt;
                 }
                 else {
                     this.tokens.completion += Math.max(1, Math.ceil(content.length / 4));
@@ -368,7 +456,7 @@ export class ChatScreen extends Screen {
             this.onTurnFinished();
         }
         catch (e) {
-            const err = e instanceof Error ? e.message : String(e);
+            const err = describeError(e);
             this.messages.push({ role: "assistant", content: (this.streamingContent ?? "") + `\n[Error: ${err}]` });
             this.streamingContent = null;
             this.onTurnFinished();
@@ -382,8 +470,121 @@ export class ChatScreen extends Screen {
         this.app.render();
         this.maybeFlushQueue();
     }
+    /** Expand/collapse the tool block belonging to message `index`. */
+    toggleTool(index) {
+        if (this.expandedTools.has(index))
+            this.expandedTools.delete(index);
+        else
+            this.expandedTools.add(index);
+        this.app.render();
+    }
+    /** Auto-compress threshold in (estimated) prompt tokens; 0 means "off". */
+    compressThreshold() {
+        const raw = loadConfig().context_compress_threshold;
+        const n = typeof raw === "number" ? raw : Number(raw);
+        return Number.isFinite(n) && n >= 0 ? n : 0;
+    }
+    /**
+     * Once the context has grown past the configured threshold, replace the older
+     * part of the conversation with a model-written summary. Runs at the start of
+     * a turn, before the request is built. If summarising fails the old messages
+     * are simply dropped, so the context always shrinks.
+     */
+    async autoCompress(token) {
+        const threshold = this.compressThreshold();
+        if (threshold <= 0 || this.lastPromptTokens < threshold)
+            return;
+        const system = this.messages.find((m) => m.role === "system");
+        const rest = this.messages.filter((m) => m.role !== "system");
+        const items = rest.map((m) => ({
+            role: m.role,
+            content: m.role === "tool" ? m.result : m.content ?? "",
+            name: m.role === "tool" ? m.name : undefined,
+            ref: m,
+        }));
+        const plan = planCompaction(items, COMPACT_KEEP);
+        if (!plan)
+            return;
+        const transcript = transcriptFor(plan.head, COMPACT_MAX_CHARS_PER_MESSAGE);
+        this.compressing = true;
+        this.app.render();
+        const snapshotLen = this.messages.length;
+        let summary = "";
+        try {
+            summary = await this.summarizeTranscript(transcript);
+        }
+        catch {
+            summary = "";
+        }
+        this.compressing = false;
+        if (token !== this.turnToken)
+            return;
+        // A new message (queued by the user while we were summarising) would be
+        // dropped by the swap below, so bail out and retry on the next turn.
+        if (this.messages.length !== snapshotLen) {
+            this.app.render();
+            return;
+        }
+        const count = plan.head.length;
+        const content = summary
+            ? `[Context compressed]\n${summary}`
+            : `[Context compressed]\n(${count} earlier messages were omitted to free up context.)`;
+        const summaryMsg = { role: "summary", content, count };
+        const kept = plan.tail.map((i) => i.ref);
+        this.messages = system ? [system, summaryMsg, ...kept] : [summaryMsg, ...kept];
+        // Message indices shifted, so any expanded tool block no longer lines up.
+        this.expandedTools.clear();
+        // The context is small again; its real size is re-learned from the next reply.
+        this.lastPromptTokens = 0;
+        this.save();
+    }
+    /**
+     * Summarise a transcript produced by `transcriptFor`. Split out so tests can
+     * stub it without touching the network.
+     */
+    async summarizeTranscript(transcript) {
+        const client = new LLMClient(this.model, this.modelProvider, this.intensity);
+        const text = await client.summarize(transcript);
+        if (client.usage) {
+            this.tokens.prompt += client.usage.prompt;
+            this.tokens.completion += client.usage.completion;
+        }
+        return text;
+    }
+    /**
+     * Keep the outbound payload within budget during a long single turn: once the
+     * context is over the threshold, blank out all but the most recent tool
+     * results. Their full text stays in the visible log, which is collapsible.
+     */
+    trimApiMessages(apiMessages) {
+        const threshold = this.compressThreshold();
+        if (threshold <= 0 || this.lastPromptTokens < threshold)
+            return apiMessages;
+        const toolIdx = [];
+        for (let i = 0; i < apiMessages.length; i++) {
+            if (apiMessages[i].role === "tool")
+                toolIdx.push(i);
+        }
+        const dropCount = toolIdx.length - COMPACT_KEEP;
+        if (dropCount <= 0)
+            return apiMessages;
+        const copy = apiMessages.slice();
+        for (let k = 0; k < dropCount; k++) {
+            copy[toolIdx[k]] = { ...copy[toolIdx[k]], content: "[tool output omitted to save context]" };
+        }
+        return copy;
+    }
     save() {
-        const chatMessages = this.messages.filter((m) => m.role === "user" || m.role === "assistant" || m.role === "tool");
+        const chatMessages = [];
+        for (const m of this.messages) {
+            if (m.role === "user" || m.role === "assistant" || m.role === "tool") {
+                chatMessages.push(m);
+            }
+            else if (m.role === "summary") {
+                // Persist a compressed summary as a plain assistant message.
+                chatMessages.push({ role: "assistant", content: m.content });
+            }
+        }
         if (chatMessages.length === 0)
             return;
         try {
@@ -395,38 +596,75 @@ export class ChatScreen extends Screen {
     }
     buildLines(width) {
         const lines = [];
-        const pushText = (text, style) => {
-            for (const ln of wrapText(text, width)) {
-                lines.push({ spans: [{ text: ln, style }] });
-            }
+        // Parallel map from rendered line -> owning tool message index (-1 = none),
+        // used to turn a click on any line of a tool block into an expand/collapse.
+        const toolLineIndex = [];
+        const add = (line, tool = -1) => {
+            lines.push(line);
+            toolLineIndex.push(tool);
         };
-        for (const m of this.messages) {
+        const pushText = (text, style, tool = -1) => {
+            for (const ln of wrapText(text, width))
+                add({ spans: [{ text: ln, style }] }, tool);
+        };
+        const pushMarkdown = (text, style) => {
+            for (const ln of renderMarkdownText(text, width, style))
+                add(ln);
+        };
+        for (let mi = 0; mi < this.messages.length; mi++) {
+            const m = this.messages[mi];
             if (m.role === "system") {
-                pushText(m.content, { fg: C.dim });
+                pushText(sanitizeText(m.content), { fg: C.dim });
             }
             else if (m.role === "user") {
-                lines.push({ spans: [{ text: "You:", style: { fg: C.accent, bold: true } }] });
-                lines.push(...renderMarkdownText(m.content, width, { fg: C.user }));
-                lines.push({ spans: [] });
+                add({ spans: [{ text: "You:", style: { fg: C.accent, bold: true } }] });
+                pushMarkdown(sanitizeText(m.content), { fg: C.user });
+                add({ spans: [] });
             }
             else if (m.role === "assistant") {
-                lines.push({ spans: [{ text: "Neutrino:", style: { fg: C.accent, bold: true } }] });
-                lines.push(...renderMarkdownText(m.content, width, { fg: C.assistant }));
-                lines.push({ spans: [] });
+                add({ spans: [{ text: "Neutrino:", style: { fg: C.accent, bold: true } }] });
+                pushMarkdown(sanitizeText(m.content), { fg: C.assistant });
+                add({ spans: [] });
+            }
+            else if (m.role === "summary") {
+                add({
+                    spans: [
+                        {
+                            text: `✂ Context compressed (${m.count} earlier messages)`,
+                            style: { fg: C.amber, bold: true },
+                        },
+                    ],
+                });
+                pushText(sanitizeText(m.content), { fg: C.dim });
+                add({ spans: [] });
             }
             else if (m.role === "tool") {
-                lines.push({ spans: [{ text: `⚙ ${m.name}`, style: { fg: C.toolHeader, bold: true } }] });
-                const argText = m.arguments.command ?? m.arguments.path ?? "";
+                // Header + the command/path always show; the (often huge) output body is
+                // collapsed by default and toggled by clicking the block.
+                add({ spans: [{ text: `⚙ ${m.name}`, style: { fg: C.toolHeader, bold: true } }] }, mi);
+                const argText = sanitizeText(m.arguments.command ?? m.arguments.path ?? "", { singleLine: true });
                 if (argText)
-                    lines.push({ spans: [{ text: "  " + argText, style: { fg: C.dim } }] });
-                pushText(m.result || "(no output)", { fg: C.dim });
-                lines.push({ spans: [] });
+                    add({ spans: [{ text: "  " + argText, style: { fg: C.dim } }] }, mi);
+                // Command output routinely carries ANSI colours and tabs; clean it once
+                // so the collapsed line count and the expanded body agree.
+                const body = sanitizeText(m.result || "");
+                if (this.expandedTools.has(mi)) {
+                    pushText(body || "(no output)", { fg: C.dim }, mi);
+                    add({ spans: [{ text: "  ▾ click to collapse", style: { fg: C.toolHeader } }] }, mi);
+                }
+                else {
+                    const n = body ? body.split("\n").length : 0;
+                    const summary = n > 0 ? `${n} line${n === 1 ? "" : "s"} hidden` : "no output";
+                    add({ spans: [{ text: `  ▸ ${summary} — click to expand`, style: { fg: C.dim } }] }, mi);
+                }
+                add({ spans: [] });
             }
         }
         if (this.streamingContent !== null) {
-            lines.push({ spans: [{ text: "Neutrino:", style: { fg: C.accent, bold: true } }] });
-            lines.push(...renderMarkdownText(this.streamingContent, width, { fg: C.assistant }));
+            add({ spans: [{ text: "Neutrino:", style: { fg: C.accent, bold: true } }] });
+            pushMarkdown(sanitizeText(this.streamingContent), { fg: C.assistant });
         }
+        this.toolLineIndex = toolLineIndex;
         return lines;
     }
     render(buf) {
@@ -435,7 +673,11 @@ export class ChatScreen extends Screen {
         const h = buf.height;
         let status = "";
         let statusStyle = { fg: C.dim };
-        if (this.queued) {
+        if (this.compressing) {
+            status = "Compressing context…";
+            statusStyle = { fg: C.amber, bold: true };
+        }
+        else if (this.queued) {
             status = "Will send when paused or idle...";
             statusStyle = { fg: C.amber };
         }
@@ -463,12 +705,27 @@ export class ChatScreen extends Screen {
         }
         if (this.scrollTop < 0)
             this.scrollTop = 0;
+        // Remember the bar's geometry so a drag on the last column can scroll the
+        // log (see the scrollbar() method).
+        this.scrollbarGeom =
+            lines.length > viewH
+                ? { x: w - 1, top: logTop, bottom: logBottom, total: lines.length, viewport: viewH }
+                : null;
+        // Remember which tool block (if any) each visible row belongs to, so a
+        // click can expand/collapse it (see the onMouse handler).
+        this.toolRows.clear();
         for (let y = logTop; y <= logBottom; y++) {
             const li = this.scrollTop + (y - logTop);
             if (li >= lines.length)
                 break;
+            const tool = this.toolLineIndex[li];
+            if (tool !== undefined && tool >= 0)
+                this.toolRows.set(y, tool);
             drawSpans(buf, 2, y, lines[li].spans, Math.max(4, w - 4));
         }
+        // A scrollbar on the right edge of the log, shown only when the
+        // conversation overflows the visible area.
+        drawScrollbar(buf, w - 1, logTop, logBottom, lines.length, viewH, this.scrollTop);
         const inW = Math.max(12, w - 2);
         drawInputBox(buf, 1, inputY, inW, this.inputValue, this.cursor, {
             active: true,

package/dist/screens/settings.js

@@ -1,10 +1,14 @@
 import { Screen } from "../terminal/screen.js";
 import { C } from "../colors.js";
-import { INTENSITY_LEVELS, MODEL_FILE, loadConfig, saveConfig } from "../config.js";
+import { COMPRESS_THRESHOLD_OPTIONS, CONFIG_FILE, INTENSITY_LEVELS, loadConfig, saveConfig, } from "../config.js";
 import { drawHeader } from "../header.js";
 import { centerVertically, drawHint } from "../ui.js";
+/** The settings that can be changed here, top to bottom. */
+const ROWS = ["intensity", "compress"];
 export class SettingsScreen extends Screen {
     intensityIdx = 2;
+    thresholdIdx = 3;
+    rowIdx = 0;
     lastHoverX = -1;
     lastHoverY = -1;
     onActivate() {
@@ -12,18 +16,42 @@ export class SettingsScreen extends Screen {
         const current = String(config.default_intensity ?? "High");
         const i = INTENSITY_LEVELS.indexOf(current);
         this.intensityIdx = i >= 0 ? i : 2;
+        const threshold = Number(config.context_compress_threshold ?? 32000);
+        const t = COMPRESS_THRESHOLD_OPTIONS.findIndex((o) => o.value === threshold);
+        this.thresholdIdx = t >= 0 ? t : 3;
+    }
+    /** Change the value of a row by `delta` steps and persist it immediately. */
+    cycle(row, delta) {
+        if (row === "intensity") {
+            const n = INTENSITY_LEVELS.length;
+            this.intensityIdx = (this.intensityIdx + delta + n) % n;
+        }
+        else {
+            const n = COMPRESS_THRESHOLD_OPTIONS.length;
+            this.thresholdIdx = (this.thresholdIdx + delta + n) % n;
+        }
+        this.save();
     }
     onKey(key) {
         if (key.name === "up") {
-            this.intensityIdx = (this.intensityIdx + INTENSITY_LEVELS.length - 1) % INTENSITY_LEVELS.length;
+            this.rowIdx = (this.rowIdx + ROWS.length - 1) % ROWS.length;
             this.app.render();
         }
         else if (key.name === "down") {
-            this.intensityIdx = (this.intensityIdx + 1) % INTENSITY_LEVELS.length;
+            this.rowIdx = (this.rowIdx + 1) % ROWS.length;
+            this.app.render();
+        }
+        else if (key.name === "left") {
+            this.cycle(ROWS[this.rowIdx], -1);
+            this.app.render();
+        }
+        else if (key.name === "right") {
+            this.cycle(ROWS[this.rowIdx], 1);
             this.app.render();
         }
         else if (key.name === "enter" || key.name === "return") {
             this.save();
+            this.app.render();
         }
         else if (key.name === "escape") {
             this.save();
@@ -39,9 +67,9 @@ export class SettingsScreen extends Screen {
                 return;
             this.lastHoverX = ev.x;
             this.lastHoverY = ev.y;
-            for (let i = 0; i < layout.optionYs.length; i++) {
-                if (ev.y === layout.optionYs[i] && i !== this.intensityIdx) {
-                    this.intensityIdx = i;
+            for (let i = 0; i < layout.rowYs.length; i++) {
+                if (ev.y === layout.rowYs[i] && i !== this.rowIdx) {
+                    this.rowIdx = i;
                     this.app.render();
                     return;
                 }
@@ -49,8 +77,7 @@ export class SettingsScreen extends Screen {
             return;
         }
         if (ev.type === "wheel") {
-            this.intensityIdx =
-                (this.intensityIdx + (ev.dir === -1 ? -1 : 1) + INTENSITY_LEVELS.length) % INTENSITY_LEVELS.length;
+            this.cycle(ROWS[this.rowIdx], ev.dir === -1 ? -1 : 1);
             this.app.render();
             return;
         }
@@ -60,10 +87,15 @@ export class SettingsScreen extends Screen {
                 this.app.popScreen();
                 return;
             }
-            for (let i = 0; i < layout.optionYs.length; i++) {
-                if (ev.y === layout.optionYs[i]) {
-                    this.intensityIdx = i;
-                    this.save();
+            for (let i = 0; i < layout.rowYs.length; i++) {
+                if (ev.y === layout.rowYs[i]) {
+                    if (this.rowIdx === i) {
+                        // Clicking the already-selected row advances its value.
+                        this.cycle(ROWS[i], 1);
+                    }
+                    else {
+                        this.rowIdx = i;
+                    }
                     this.app.render();
                     return;
                 }
@@ -74,59 +106,66 @@ export class SettingsScreen extends Screen {
             }
         }
     }
+    rowTexts() {
+        return [
+            { label: "Default intensity", value: INTENSITY_LEVELS[this.intensityIdx] },
+            { label: "Auto-compress context", value: COMPRESS_THRESHOLD_OPTIONS[this.thresholdIdx].label },
+        ];
+    }
     layout() {
         const h = this.app.height;
-        const lines = [
-            "Settings",
-            "",
-            `Model: ${this.app.state.selectedProvider}/${this.app.state.selectedModelName}`,
-            `Default intensity:`,
-        ];
-        const total = lines.length + INTENSITY_LEVELS.length + 2;
+        const rows = this.rowTexts();
+        const labelW = Math.max(...rows.map((r) => r.label.length));
+        // title, blank, model, blank, option rows, blank, hint
+        const total = 6 + rows.length;
         const top = centerVertically(h, total);
-        const optionYs = INTENSITY_LEVELS.map((_, i) => top + 4 + i);
-        const hintY = top + 4 + INTENSITY_LEVELS.length + 2;
+        const rowYs = rows.map((_, i) => top + 4 + i);
+        const hintY = top + 5 + rows.length;
         if (hintY > h - 1)
             return null;
-        return { optionYs, hintY };
+        return { rowYs, hintY, labelW };
     }
     save() {
         const config = loadConfig();
         config.default_intensity = INTENSITY_LEVELS[this.intensityIdx];
+        config.context_compress_threshold = COMPRESS_THRESHOLD_OPTIONS[this.thresholdIdx].value;
         saveConfig(config);
     }
     render(buf) {
         drawHeader(buf, this.app.state);
         const h = buf.height;
-        const lines = [
-            "Settings",
-            "",
-            `Model: ${this.app.state.selectedProvider}/${this.app.state.selectedModelName}`,
-            `Default intensity:`,
-        ];
-        const content = INTENSITY_LEVELS.map((l, i) => ({
-            text: l,
-            selected: i === this.intensityIdx,
-        }));
-        const total = lines.length + content.length + 2;
+        const rows = this.rowTexts();
+        const labelW = Math.max(...rows.map((r) => r.label.length));
+        const total = 6 + rows.length;
         const top = centerVertically(h, total);
         let y = top;
-        buf.centerText(y, lines[0], { fg: C.accent, bold: true });
+        buf.centerText(y, "Settings", { fg: C.accent, bold: true });
         y += 2;
-        buf.centerText(y, lines[2], { fg: C.assistant });
-        y += 1;
-        buf.centerText(y, lines[3], { fg: C.dim });
-        y += 1;
-        for (const c of content) {
-            const text = (c.selected ? "▸ " : "  ") + c.text;
-            buf.centerText(y, text, c.selected ? { fg: C.accent, bg: C.highlightBg } : { fg: C.assistant });
+        buf.centerText(y, `Model: ${this.app.state.selectedProvider}/${this.app.state.selectedModelName}`, {
+            fg: C.assistant,
+        });
+        y += 2;
+        for (let i = 0; i < rows.length; i++) {
+            const selected = i === this.rowIdx;
+            const marker = selected ? "▸ " : "  ";
+            const label = rows[i].label.padEnd(labelW);
+            const value = selected ? `◂ ${rows[i].value} ▸` : rows[i].value;
+            const text = marker + label + "   " + value;
+            if (selected) {
+                buf.centerText(y, " " + text + " ", { fg: C.accent, bg: C.highlightBg, bold: true });
+            }
+            else {
+                buf.centerText(y, text, { fg: C.assistant });
+            }
             y += 1;
         }
         y += 1;
-        buf.centerText(y, `model.json: ${MODEL_FILE}`, { fg: C.dim });
-        y += 1;
         if (y < h) {
-            drawHint(buf, y, "↑/↓ change  ·  Enter apply  ·  click to choose  ·  right-click back  ·  Esc back");
+            buf.centerText(y, `config: ${CONFIG_FILE}`, { fg: C.dim });
+            y += 1;
+        }
+        if (y < h) {
+            drawHint(buf, y, "↑/↓ select  ·  ←/→ change  ·  Enter apply  ·  right-click back  ·  Esc back");
         }
     }
 }