@giovannijecha/jecode 0.1.6-rc.0 → 0.1.6

package/README.md

@@ -164,8 +164,9 @@ Useful controls:
   the place you are reading.
 - **Ctrl+O** expands or compacts the latest reasoning or tool-detail block.
 
-The one-line footer keeps model, effort, and workspace on the left. Live work,
-readiness guidance, and temporary feedback use the right edge without polluting
+The one-line footer keeps model, effort, and workspace on the left. Live work
+stays visible on the reasoning and tool rail; the right edge carries the
+interrupt hint, readiness guidance, and temporary feedback without polluting
 the transcript.
 
 ## Configuration
@@ -253,8 +254,9 @@ npm ci --ignore-scripts
 npm run check
 ~~~
 
-The visual lab exercises the TUI without a provider, network access, tool
-execution, or workspace writes:
+The visual lab exercises the complete production TUI—golden conversation,
+live tool trace, output tails, change-centric diffs, approvals, menus, and
+fields—without a provider, network access, tool execution, or workspace writes:
 
 ~~~console
 npm run tui:lab

package/dist/commands.js

@@ -121,7 +121,6 @@ async function permissions(session, host) {
     }
     const index = await choose({
         title: heading("revoke permission", "applies only to this session", session.palette),
-        right: "↑↓ enter · esc close",
         options: [
             ...entries.map((entry) => ({ label: entry.label, hint: "revoke" })),
             { label: "all remembered permissions", hint: "revoke all" },

package/dist/controller.js

@@ -62,7 +62,12 @@ async function settle(call, options, events, signal, preview) {
     if (tool.dangerous && !(await events.approve(call))) {
         return refuse(call, "the user declined this call — ask them how to proceed", "declined");
     }
-    return runTool(tool, call, { ...options.toolContext, signal, preview });
+    return runTool(tool, call, {
+        ...options.toolContext,
+        signal,
+        preview,
+        onOutput: (output) => events.onToolOutput?.(call, output),
+    });
 }
 function refuse(call, reason, summary) {
     return {

package/dist/credential-commands.js

@@ -22,7 +22,6 @@ export async function askForKey(name, host, pal) {
         return false;
     const index = await host.choose({
         title: heading("remember it?", name, pal),
-        right: "↑↓ enter",
         options: [
             { label: "just this session", hint: "nothing is written", key: "s" },
             { label: `save it to ${storeLabel()}`, hint: "owner-only file", key: "w" },
@@ -55,7 +54,6 @@ export async function credentialsCommand(session, host) {
         return;
     const index = await choose({
         title: heading("credential", "values are never shown", session.palette),
-        right: "↑↓ enter · esc close",
         options: PROVIDERS.map((provider) => ({
             label: provider.keyVar,
             hint: credentialSource(provider.keyVar) ?? "missing",
@@ -86,7 +84,6 @@ export async function credentialsCommand(session, host) {
     ];
     const action = await choose({
         title: heading(name, source ?? "missing", session.palette),
-        right: "↑↓ enter",
         options: actions,
         index: 0,
     });
@@ -103,7 +100,6 @@ async function offerForget(name, session, host, hint) {
         return;
     const index = await host.choose({
         title: heading(name, hint, session.palette),
-        right: "↑↓ enter",
         options: [
             { label: "keep saved copy", key: "k" },
             { label: "forget saved copy", hint: storeLabel(), key: "f" },

package/dist/ollama-settings-command.js

@@ -20,7 +20,6 @@ export async function ollamaConnectionSetting(session, host, persist) {
     const current = ollamaConnection();
     const index = await host.choose({
         title: heading("Ollama connection", "where Ollama requests run", session.palette),
-        right: "↑↓ enter · esc back",
         options: [
             { label: "cloud", hint: "ollama.com · API key" },
             { label: "local", hint: "this computer · no API key" },

package/dist/provider-commands.js

@@ -23,7 +23,6 @@ export async function providersCommand(session, host, behavior = {}) {
     const at = PROVIDERS.findIndex((provider) => provider.id === session.provider.id);
     const index = await choose({
         title: heading("provider", "where the next turn runs", session.palette),
-        right: "↑↓ enter",
         options,
         index: Math.max(0, at),
     });
@@ -149,7 +148,6 @@ export async function modelsCommand(session, host, behavior = {}) {
     }
     const index = await choose({
         title: heading("model", provider.id, session.palette),
-        right: "↑↓ enter",
         options: ids.map((id) => ({ label: id })),
         searchable: true,
         query: "",

package/dist/settings-command.js

@@ -59,8 +59,7 @@ export async function settingsCommand(session, host) {
 export function settingsPicker(values, pal, index = 0, store = settingsLabel()) {
     return {
         title: heading("settings", store, pal),
-        right: "↑↓ enter · esc close",
-        footer: "Changes apply now · flags and environment win at launch",
+        description: "Changes apply now · flags and environment win at launch",
         options: settingsItems(values).map((item) => item.option),
         index,
     };
@@ -135,7 +134,6 @@ async function effortSetting(session, host) {
     const current = session.config.effort;
     const index = await choose({
         title: heading("effort", "saved default", session.palette),
-        right: "↑↓ enter · esc back",
         options: EFFORTS.map((value) => ({ label: value })),
         index: Math.max(0, EFFORTS.findIndex((value) => value === current)),
     });
@@ -152,7 +150,6 @@ async function motionSetting(session, host) {
     const values = [false, true];
     const index = await choose({
         title: heading("reduced motion", "saved default", session.palette),
-        right: "↑↓ enter · esc back",
         options: values.map((value) => ({ label: value ? "on" : "off" })),
         index: session.config.reducedMotion ? 1 : 0,
     });

package/dist/tools/shell.js

@@ -24,7 +24,7 @@ export const runCommand = {
         const timeoutMs = optionalInt(args, "timeout_ms") ?? DEFAULT_TIMEOUT_MS;
         if (timeoutMs <= 0)
             throw new Error('"timeout_ms" must be a positive integer');
-        const result = await execute(command, ctx.root, timeoutMs, ctx.signal);
+        const result = await execute(command, ctx.root, timeoutMs, ctx.signal, ctx.onOutput);
         const output = redactCredentials(result.output);
         const summary = result.timedOut
             ? `timed out after ${timeoutMs}ms`
@@ -35,7 +35,7 @@ export const runCommand = {
         };
     },
 };
-function execute(command, cwd, timeoutMs, signal) {
+function execute(command, cwd, timeoutMs, signal, onOutput) {
     if (signal?.aborted === true)
         return Promise.reject(abortReason(signal));
     return new Promise((resolve, reject) => {
@@ -46,7 +46,7 @@ function execute(command, cwd, timeoutMs, signal) {
             windowsHide: true,
             detached: process.platform !== "win32",
         });
-        const output = capture();
+        const output = capture(onOutput);
         let timedOut = false;
         let aborted;
         let settled = false;
@@ -91,30 +91,35 @@ function execute(command, cwd, timeoutMs, signal) {
         });
     });
 }
-function capture() {
+function capture(onOutput) {
     const half = MAX_OUTPUT_CHARS / 2;
     const credentials = credentialRedactor();
     let head = "";
     let tail = "";
     let total = 0;
-    const append = (chunk) => {
+    const appendSafe = (chunk) => {
         total += chunk.length;
         const room = Math.max(0, half - head.length);
         head += chunk.slice(0, room);
         const rest = chunk.slice(room);
         if (rest !== "")
             tail = `${tail}${rest}`.slice(-half);
+        if (chunk !== "")
+            onOutput?.(formatted().trimEnd());
+    };
+    const formatted = () => {
+        if (total <= MAX_OUTPUT_CHARS)
+            return `${head}${tail}`;
+        const cut = total - head.length - tail.length;
+        return `${head}\n\n[... ${cut} characters cut ...]\n\n${tail}`;
     };
     return {
         append(chunk) {
-            append(credentials.write(chunk));
+            appendSafe(credentials.write(chunk));
         },
         value() {
-            append(credentials.end());
-            if (total <= MAX_OUTPUT_CHARS)
-                return `${head}${tail}`;
-            const cut = total - head.length - tail.length;
-            return `${head}\n\n[... ${cut} characters cut ...]\n\n${tail}`;
+            appendSafe(credentials.end());
+            return formatted();
         },
     };
 }

package/dist/tui/app-workflows.js

@@ -90,14 +90,17 @@ export function appWorkflows(options) {
             },
             usage: (usage) => recordUsage(session.usage, usage),
         });
+        let finishReason;
         try {
             await runTurn(session.history, controllerOptions(session), events, activity.control.signal);
         }
         catch (error) {
-            options.emit(turnFailure(session, error, activity.control.signal.aborted));
+            const interrupted = activity.control.signal.aborted;
+            finishReason = interrupted ? "interrupted" : "failed";
+            options.emit(turnFailure(session, error, interrupted));
         }
         finally {
-            events.finish();
+            events.finish(finishReason);
             options.finishActivity(activity);
         }
     }

package/dist/tui/app.js

@@ -3,7 +3,7 @@
 // Everything mutable about a session lives in `state` here. The view is a pure
 // function of it, so the only job of a key handler is to change state and ask
 // for a repaint — never to draw.
-import { begin, elapsed } from "./activity.js";
+import { begin } from "./activity.js";
 import * as overlay from "./overlay.js";
 import { options as completionOptions } from "./complete.js";
 import { decoder } from "./keys.js";
@@ -50,13 +50,12 @@ export async function runApp(session, transcriptRoot, environment = {}) {
         unseen: state.unseen,
         pal: session.palette,
         footer: footerInfo(session, workspace),
-        status: state.status === undefined || state.activity === undefined
-            ? state.status
-            : `${state.status} · ${elapsed(state.activity)}`,
+        status: state.status,
         feedback: state.feedback,
         readiness: turnBlocker(session),
         spin: state.spin,
         reducedMotion: session.config.reducedMotion,
+        now: Date.now(),
         modal: overlay.shown(state.open),
         menu: completionOptions(state.completing),
         menuIndex: state.completing?.index,
@@ -147,7 +146,15 @@ export async function runApp(session, transcriptRoot, environment = {}) {
         spinTimer = setInterval(() => {
             if (!session.config.reducedMotion)
                 state.spin++;
-            render();
+            let activeTool;
+            for (let index = state.blocks.length - 1; index >= 0; index--) {
+                const block = state.blocks[index];
+                if (block?.kind !== "tool" || block.tone !== "pending" || block.startedAt === undefined)
+                    continue;
+                activeTool = block;
+                break;
+            }
+            render(activeTool);
         }, session.config.reducedMotion ? 1_000 : SPIN_MS);
         render();
         return activity;
@@ -178,6 +185,7 @@ export async function runApp(session, transcriptRoot, environment = {}) {
         refreshSettings: () => {
             terminal.setReducedMotion(session.config.reducedMotion);
             paint.invalidate();
+            transcript.invalidate();
             render();
         },
         startActivity,

package/dist/tui/approve.js

@@ -29,22 +29,33 @@ export function scopeFor(call) {
 export function promptFor(call, target, pal) {
     const scope = scopeFor(call);
     const options = [
-        { label: `Run this ${call.name === "edit_file" ? "edit" : "call"} once`, hint: "enter", key: "y" },
-        { label: `Allow ${scope.label} this session`, hint: "a", key: "a" },
-        { label: "Deny and add feedback", hint: "esc", key: "n" },
+        { label: "Yes, once", hint: "enter", key: "y" },
+        { label: `Yes, ${scopeNoun(scope)} for the session`, hint: "a", key: "a" },
+        { label: "No, and say why", hint: "esc", key: "n" },
     ];
     return {
-        title: [
-            { text: "Permission required", fg: pal.ink.attention, bold: true },
-            { text: `  ${call.name}`, fg: pal.ink.muted },
-            ...(target === "" ? [] : [{ text: ` ${target}`, fg: pal.ink.muted }]),
-        ],
-        description: "Review the exact action above, then choose.",
-        footer: "Enter to select · Esc to deny",
+        title: [{ text: question(call.name), fg: pal.ink.attention, bold: true }],
+        right: `${call.name}${target === "" ? "" : ` · ${target}`}`,
         options,
         index: 0,
     };
 }
+function question(name) {
+    if (name === "edit_file")
+        return "Allow this edit?";
+    if (name === "write_file")
+        return "Write this file?";
+    if (name === "run_command")
+        return "Run this command?";
+    return "Allow this call?";
+}
+function scopeNoun(scope) {
+    if (scope.key.startsWith("file\0"))
+        return "this file";
+    if (scope.key.startsWith("command\0"))
+        return "this command";
+    return "this call";
+}
 function stable(value) {
     if (Array.isArray(value))
         return `[${value.map(stable).join(",")}]`;

package/dist/tui/blocks.js

@@ -2,7 +2,7 @@
 import { renderAnswer, renderReasoning, renderUser } from "./components/messages.js";
 import { renderList, renderNotice } from "./components/misc.js";
 import { renderTool } from "./components/tool.js";
-export function render(block, width, pal) {
+export function render(block, width, pal, context = {}) {
     switch (block.kind) {
         case "user":
             return renderUser(block, width, pal);
@@ -11,13 +11,21 @@ export function render(block, width, pal) {
         case "reasoning":
             return renderReasoning(block, width, pal);
         case "tool":
-            return renderTool(block, width, pal);
+            return renderTool(block, width, pal, {
+                continues: context.previous?.kind === "tool",
+                spin: context.spin,
+                reducedMotion: context.reducedMotion,
+                now: context.now,
+            });
         case "notice":
             return renderNotice(block, width, pal);
         case "list":
             return renderList(block, width, pal);
     }
 }
-export function renderAll(blocks, width, pal) {
-    return blocks.flatMap((block) => render(block, width, pal));
+export function renderAll(blocks, width, pal, context = {}) {
+    return blocks.flatMap((block, index) => render(block, width, pal, {
+        ...context,
+        previous: blocks[index - 1],
+    }));
 }

package/dist/tui/components/command-menu.js

@@ -5,12 +5,15 @@ export function renderCommandMenu(commands, selected, width, pal) {
     const { first, last } = menuWindow(commands.length, selectedIndex, MAX_ROWS);
     const shown = commands.slice(first, last);
     if (shown.length === 0)
-        return [];
-    return renderMenuRows(shown.map((command, index) => ({
-        label: `/${command.name}`,
-        description: command.blurb,
-        selected: selectedIndex === first + index,
-    })), width, pal);
+        return { rows: [], right: "" };
+    return {
+        rows: renderMenuRows(shown.map((command, index) => ({
+            label: `/${command.name}`,
+            description: command.blurb,
+            selected: selectedIndex === first + index,
+        })), width, pal),
+        right: commands.length > shown.length ? `${first + 1}–${last} / ${commands.length}` : "",
+    };
 }
 export function commandMenuLimit() {
     return MAX_ROWS;

package/dist/tui/components/composer.js

@@ -1,12 +1,13 @@
 import { row } from "../../ui/render.js";
-import { charWidth, graphemes } from "../../ui/width.js";
-export function renderComposer(editor, width, maxInputRows, pal) {
-    const laid = layout(editor, Math.max(1, width));
+import { charWidth, graphemes, textWidth } from "../../ui/width.js";
+export function renderComposer(editor, width, maxInputRows, pal, right = "") {
+    const rightRoom = right === "" ? 0 : textWidth(right) + 1;
+    const laid = layout(editor, Math.max(1, width - rightRoom));
     const room = Math.max(1, maxInputRows);
     const first = Math.max(0, Math.min(laid.lines.length - room, laid.cursor.row));
     const shown = laid.lines.slice(first, first + room);
     return {
-        rows: shown.map((line) => row(width, [{ text: line, fg: pal.ink.bright }])),
+        rows: shown.map((line, index) => row(width, [{ text: line, fg: pal.ink.bright }], index === 0 && right !== "" ? [{ text: right, fg: pal.ink.muted }] : [])),
         cursor: { row: laid.cursor.row - first, col: laid.cursor.col },
     };
 }

package/dist/tui/components/menu.js

@@ -1,5 +1,5 @@
 // One visual row grammar for autocomplete and every interactive selector.
-import { plainLen, row } from "../../ui/render.js";
+import { hasColor, plainLen, row } from "../../ui/render.js";
 import { elide } from "../../ui/width.js";
 export function renderMenuRows(entries, width, pal) {
     if (entries.length === 0)
@@ -16,22 +16,27 @@ export function menuWindow(length, selected, visible) {
     return { first, last: Math.min(count, first + room) };
 }
 function renderEntry(entry, labelWidth, width, pal) {
-    const fg = entry.selected ? pal.accent : pal.ink.fg;
+    // Colour terminals use one quiet selection band. In monochrome the arrow is
+    // structural rather than decorative, so selection remains unambiguous.
+    const monochrome = !hasColor();
+    const selectedMark = entry.selected && monochrome ? "→ " : "  ";
+    const fg = entry.selected ? pal.ink.bright : pal.ink.fg;
     const primary = [
-        { text: entry.selected ? "→ " : "  ", fg },
+        { text: selectedMark, fg: entry.selected ? pal.accent : fg },
         { text: entry.label, fg },
     ];
     if (width > 40 && entry.description !== undefined) {
         const gap = Math.max(2, labelWidth - primaryWidth(entry));
-        primary.push({ text: `${" ".repeat(gap)}${entry.description}`, fg: entry.selected ? pal.accent : pal.ink.muted });
+        primary.push({ text: `${" ".repeat(gap)}${entry.description}`, fg: entry.selected ? pal.ink.fg : pal.ink.muted });
     }
     const right = width > 40 && entry.hint !== undefined
         ? [{
                 text: elide(entry.hint, Math.max(1, Math.floor(width / 4))),
-                fg: entry.selected ? pal.accent : pal.ink.muted,
+                fg: entry.selected ? pal.ink.fg : pal.ink.muted,
             }]
         : [];
-    return row(width, primary, right);
+    const ground = entry.selected && !monochrome ? pal.surface.inset : undefined;
+    return row(width, primary, right, ground);
 }
 function primaryWidth(entry) {
     return plainLen([{ text: entry.label }]);

package/dist/tui/components/prompt.js

@@ -0,0 +1,67 @@
+// One active one-line input grammar for dock fields and searchable pickers.
+import { row } from "../../ui/render.js";
+import { charWidth, graphemes, textWidth } from "../../ui/width.js";
+const MARK = "→ ";
+const DOT = "●";
+export const PROMPT_WIDTH = textWidth(MARK);
+export function promptLine(text, cursor, width, pal, options = {}) {
+    const right = options.right === undefined || options.right === ""
+        ? []
+        : [{ text: options.right, fg: pal.ink.muted }];
+    const laid = layout(text, cursor, width, options);
+    const content = laid.visible === "" && options.placeholder !== undefined
+        ? { text: options.placeholder, fg: pal.ink.muted }
+        : { text: laid.visible, fg: pal.ink.bright };
+    return {
+        row: row(width, [{ text: MARK, fg: pal.accent }, content], right),
+        cursor: { row: 0, col: PROMPT_WIDTH + textWidth(laid.before) },
+    };
+}
+export function promptCursor(text, cursor, width, options = {}) {
+    const laid = layout(text, cursor, width, options);
+    return {
+        row: 0,
+        col: PROMPT_WIDTH + textWidth(laid.before),
+    };
+}
+function layout(text, cursor, width, options) {
+    const rightRoom = options.right === undefined || options.right === ""
+        ? 0
+        : textWidth(options.right) + 1;
+    const room = Math.max(1, width - PROMPT_WIDTH - rightRoom);
+    const source = graphemes(text);
+    const shown = options.secret === true ? source.map(() => DOT) : source;
+    const at = graphemes(text.slice(0, cursor)).length;
+    const start = visibleStart(shown, at, room);
+    return {
+        visible: visibleSlice(shown, start, room),
+        before: shown.slice(start, Math.max(start, at)).join(""),
+    };
+}
+/** Keep one terminal cell available for the caret at the end of the window. */
+function visibleStart(clusters, cursor, room) {
+    const budget = Math.max(0, room - 1);
+    let used = 0;
+    let start = Math.max(0, Math.min(clusters.length, cursor));
+    while (start > 0) {
+        const width = charWidth(clusters[start - 1]);
+        if (used + width > budget)
+            break;
+        start--;
+        used += width;
+    }
+    return start;
+}
+function visibleSlice(clusters, start, room) {
+    let used = 0;
+    let out = "";
+    for (let index = start; index < clusters.length; index++) {
+        const cluster = clusters[index];
+        const width = charWidth(cluster);
+        if (used + width > room)
+            break;
+        out += cluster;
+        used += width;
+    }
+    return out;
+}

package/dist/tui/components/status.js

@@ -1,7 +1,3 @@
-const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-export function spinner(tick) {
-    return SPINNER[tick % SPINNER.length];
-}
 /** Styled content for the footer's replaceable right-hand status channel. */
 export function renderStatus(info, pal) {
     const urgent = info.feedback?.tone === "warn" || info.feedback?.tone === "error"
@@ -10,10 +6,7 @@ export function renderStatus(info, pal) {
     if (urgent !== undefined)
         return withUnseen(feedbackSegments(urgent, pal), info.unseen, pal);
     if (info.status !== undefined) {
-        return withUnseen([
-            { text: `${info.reducedMotion ? "•" : spinner(info.tick)} `, fg: pal.accent },
-            { text: `${info.status} (esc to interrupt)`, fg: pal.ink.muted },
-        ], info.unseen, pal);
+        return withUnseen([{ text: "esc to interrupt", fg: pal.ink.muted }], info.unseen, pal);
     }
     if (info.feedback !== undefined) {
         return withUnseen(feedbackSegments(info.feedback, pal), info.unseen, pal);

package/dist/tui/components/tool.js

@@ -1,39 +1,94 @@
-import { blank, row } from "../../ui/render.js";
-const PAD = 1;
-const PREVIEW_ROWS = 10;
-export function renderTool(block, width, pal) {
-    const ground = toolGround(block.tone, pal);
-    const all = block.body ?? [];
-    const shown = block.expanded === true ? all : all.slice(0, PREVIEW_ROWS);
-    const remaining = all.length - shown.length;
-    const rows = [
-        "",
-        blank(width, ground),
+// A compact execution trace: state and identity on one rail, evidence below.
+import { hasColor, row } from "../../ui/render.js";
+const OUTPUT_ROWS = 8;
+const LIVE_OUTPUT_ROWS = 6;
+const DIFF_ROWS = 12;
+export function renderTool(block, width, pal, context = {}) {
+    const shown = visibleDetails(block);
+    const right = liveLabel(block, context);
+    return [
+        ...(context.continues === true ? [] : [""]),
         row(width, [
+            { text: " " },
+            { text: `${stateGlyph(block, context)} `, fg: statusInk(block.tone, pal), bold: true },
             { text: block.name, fg: pal.ink.bright, bold: true },
-            ...(block.target === "" ? [] : [{ text: ` ${block.target}`, fg: pal.accent }]),
-        ], [], ground, PAD),
+            ...(block.target === "" ? [] : [{ text: `  ${block.target}`, fg: pal.accent }]),
+        ], right === "" ? [] : [{ text: right, fg: statusInk(block.tone, pal) }]),
+        ...shown.map((detail) => renderDetail(detail, block.tone, width, pal)),
     ];
-    if (shown.length > 0) {
-        rows.push(blank(width, ground));
-        rows.push(...shown.map((detail) => renderDetail(detail, block.tone, width, ground, pal)));
+}
+function visibleDetails(block) {
+    const all = block.body ?? [];
+    if (block.expanded === true || all.length === 0)
+        return all;
+    if (all.every((detail) => detail.kind === "out")) {
+        const limit = block.tone === "pending" ? LIVE_OUTPUT_ROWS : OUTPUT_ROWS;
+        if (all.length <= limit)
+            return all;
+        const hidden = all.length - limit;
+        const note = block.tone === "pending"
+            ? `… ${all.length} lines so far`
+            : `… ${hidden} earlier lines · ctrl+o expand`;
+        return [{ kind: "gap", text: note }, ...all.slice(-limit)];
+    }
+    return diffWindow(all);
+}
+/** Keep change rows and their nearest context; never turn a diff into a tail. */
+function diffWindow(all) {
+    if (all.length <= DIFF_ROWS)
+        return [...all];
+    const important = all.flatMap((detail, index) => detail.kind === "keep" ? [] : [index]);
+    const chosen = new Set();
+    const budgeted = important.length <= DIFF_ROWS
+        ? important
+        : [
+            ...important.slice(0, Math.ceil(DIFF_ROWS / 2)),
+            ...important.slice(-Math.floor(DIFF_ROWS / 2)),
+        ];
+    for (const index of budgeted)
+        chosen.add(index);
+    for (let radius = 1; chosen.size < DIFF_ROWS && radius < all.length; radius++) {
+        for (const index of important) {
+            for (const candidate of [index - radius, index + radius]) {
+                if (candidate < 0 || candidate >= all.length || chosen.has(candidate))
+                    continue;
+                chosen.add(candidate);
+                if (chosen.size >= DIFF_ROWS)
+                    break;
+            }
+            if (chosen.size >= DIFF_ROWS)
+                break;
+        }
     }
-    if (remaining > 0) {
-        rows.push(row(width, [{ text: `… ${remaining} more lines · ctrl+o expand`, fg: pal.ink.muted }], [], ground, PAD));
+    const indexes = [...chosen].sort((left, right) => left - right);
+    const out = [];
+    let previous = -1;
+    for (const index of indexes) {
+        if (index > previous + 1) {
+            out.push({ kind: "gap", text: `… ${index - previous - 1} lines hidden · ctrl+o expand` });
+        }
+        const detail = all[index];
+        if (detail !== undefined)
+            out.push(detail);
+        previous = index;
     }
-    if (block.right !== "") {
-        rows.push(row(width, [{ text: resultLabel(block.right, block.tone), fg: statusInk(block.tone, pal) }], [], ground, PAD));
+    if (previous < all.length - 1) {
+        out.push({
+            kind: "gap",
+            text: `… ${all.length - previous - 1} lines hidden · ctrl+o expand`,
+        });
     }
-    rows.push(blank(width, ground));
-    return rows;
+    return out;
 }
-function renderDetail(detail, tone, width, ground, pal) {
+function renderDetail(detail, tone, width, pal) {
+    const lead = { text: " " };
+    const rail = { text: "│ ", fg: pal.rule };
     if (detail.kind === "out") {
         const fg = tone === "fail" || failureLine(detail.text) ? pal.ink.removed : pal.ink.muted;
-        return row(width, [{ text: detail.text === "" ? " " : detail.text, fg }], [], ground, PAD);
+        return row(width, [lead, rail, { text: detail.text === "" ? " " : detail.text, fg }]);
     }
     if (detail.kind === "gap") {
-        return row(width, [{ text: `     ${detail.text}`, fg: pal.ink.muted }], [], ground, PAD);
+        return row(width, [lead, rail, { text: detail.text, fg: pal.ink.muted, italic: true }]);
     }
     const number = detail.kind === "add" ? detail.newLine : detail.oldLine;
     const prefix = `${detail.kind === "add" ? "+" : detail.kind === "del" ? "-" : " "}${String(number ?? "").padStart(3)} `;
@@ -42,7 +97,7 @@ function renderDetail(detail, tone, width, ground, pal) {
         : detail.kind === "del"
             ? pal.ink.removed
             : pal.ink.muted;
-    return row(width, [{ text: prefix, fg }, ...emphasized(detail.text, detail.emphasis, fg)], [], ground, PAD);
+    return row(width, [lead, rail, { text: prefix, fg }, ...emphasized(detail.text, detail.emphasis, fg)]);
 }
 function emphasized(text, emphasis, fg) {
     if (emphasis === undefined || emphasis.length <= 0)
@@ -55,31 +110,34 @@ function emphasized(text, emphasis, fg) {
         ...(end === text.length ? [] : [{ text: text.slice(end), fg }]),
     ];
 }
-function toolGround(tone, pal) {
-    if (tone === "ok")
-        return pal.surface.added;
-    if (tone === "fail")
-        return pal.surface.removed;
-    if (tone === "deny")
-        return pal.surface.attention;
-    return pal.surface.inset;
+function stateGlyph(block, context) {
+    if (block.tone === "pending") {
+        if (block.startedAt === undefined || context.reducedMotion === true)
+            return "◌";
+        const frames = ["◐", "◓", "◑", "◒"];
+        return frames[Math.floor((context.spin ?? 0) / 2) % frames.length];
+    }
+    if (block.tone === "fail")
+        return hasColor() ? "●" : "×";
+    if (block.tone === "deny")
+        return "○";
+    return hasColor() ? "●" : "✓";
+}
+function liveLabel(block, context) {
+    if (block.tone !== "pending" || block.startedAt === undefined || block.right !== "running") {
+        return block.right;
+    }
+    const elapsed = Math.max(0, (context.now ?? Date.now()) - block.startedAt);
+    const seconds = elapsed / 1_000;
+    return `running · ${seconds < 10 ? seconds.toFixed(1) : Math.round(seconds)}s`;
 }
 function statusInk(tone, pal) {
     if (tone === "fail")
         return pal.ink.removed;
-    if (tone === "pending")
+    if (tone === "pending" || tone === "deny")
         return pal.ink.attention;
     return pal.ink.muted;
 }
 function failureLine(line) {
-    return line.startsWith("✖") || line.includes("AssertionError") || /\bfailed\b/i.test(line);
-}
-function resultLabel(result, tone) {
-    if (tone === "pending")
-        return result;
-    const match = /^(.*?)(?:\s*·\s*)?(\d+(?:\.\d+)?(?:ms|s))$/.exec(result);
-    if (match === null)
-        return result;
-    const prefix = (match[1] ?? "").trim();
-    return `${prefix === "" ? "" : `${prefix} · `}Took ${match[2]}`;
+    return line.startsWith("✖") || line.startsWith("×") || line.includes("AssertionError") || /\bfailed\b/i.test(line);
 }

package/dist/tui/field.js

@@ -4,46 +4,22 @@
 // — the same `Editor`, the same keymap — and adds the two things a composer
 // must never do: hide what it holds, and stay on one row however long that is.
 import { row } from "../ui/render.js";
-import { graphemes, textWidth } from "../ui/width.js";
-const DOT = "●";
-const PROMPT = "→ ";
-const LEAD = textWidth(PROMPT);
+import { promptCursor, promptLine } from "./components/prompt.js";
 export function panel(field, width, pal) {
     const { ink } = pal;
     const head = row(width, field.title, field.right === undefined ? [] : [{ text: field.right, fg: ink.muted }]);
-    const view = laid(field, width);
-    const line = row(width, [
-        { text: PROMPT, fg: pal.accent },
-        { text: view.text, fg: ink.bright },
-    ]);
+    const line = promptLine(field.editor.text, field.editor.cursor, width, pal, {
+        secret: field.secret,
+    }).row;
     const note = field.note === undefined ? [] : [row(width, [{ text: `  ${field.note}`, fg: ink.muted }])];
     return [head, line, ...note];
 }
 /** Where the caret sits, relative to the unframed field body. */
 export function caret(field, width) {
-    return { row: 1, col: LEAD + laid(field, width).col };
-}
-/**
- * The visible slice of the line, and where the caret lands inside it.
- *
- * A key is longer than most terminals are wide, so the line scrolls under a
- * fixed window rather than wrapping: an input that grows downwards pushes the
- * rest of the dock around while it is being pasted into.
- */
-function laid(field, width) {
-    const inner = Math.max(1, width - LEAD);
-    const all = field.secret ? DOT.repeat(size(field.editor.text)) : field.editor.text;
-    const at = size(field.editor.text.slice(0, field.editor.cursor));
-    // Keep the caret in view, and prefer showing the end of what was typed —
-    // which for a pasted key is the half that says the paste arrived whole.
-    const start = Math.max(0, at - inner + 1);
-    return { text: [...all].slice(start, start + inner).join(""), col: at - start };
-}
-function size(text) {
-    let n = 0;
-    for (const _cluster of graphemes(text))
-        n++;
-    return n;
+    const at = promptCursor(field.editor.text, field.editor.cursor, width, {
+        secret: field.secret,
+    });
+    return { row: 1, col: at.col };
 }
 /**
  * The line with its breaks taken out.

package/dist/tui/modal.js

@@ -16,9 +16,11 @@ export function panel(modal, width, pal, maxRows) {
 /**
  * Where the caret goes while this is open, if it goes anywhere.
  *
- * A menu is read, not typed into, so it hides the caret entirely — a blinking
- * block on a row nobody is editing is an invitation to type into it.
+ * Menus without search hide the caret; searchable menus expose the shared
+ * query prompt and place the terminal caret at its real editing position.
  */
-export function caret(modal, width) {
-    return modal.kind === "type" ? field.caret(modal.field, width) : undefined;
+export function caret(modal, width, maxRows) {
+    return modal.kind === "type"
+        ? field.caret(modal.field, width)
+        : picker.caret(modal.picker, width, maxRows);
 }

package/dist/tui/picker.js

@@ -2,6 +2,7 @@
 import { row } from "../ui/render.js";
 import { elide } from "../ui/width.js";
 import { menuWindow, renderMenuRows } from "./components/menu.js";
+import { promptCursor, promptLine } from "./components/prompt.js";
 const WINDOW = 6;
 export function move(picker, step) {
     const shown = matches(picker);
@@ -44,41 +45,64 @@ export function byKey(picker, text) {
     const found = picker.options.findIndex((option) => option.key === typed);
     return found === -1 ? undefined : found;
 }
-export function panel(picker, width, pal, maxRows = WINDOW + 4) {
+export function panel(picker, width, pal, maxRows = WINDOW + 3) {
+    return layout(picker, width, pal, maxRows).rows;
+}
+/** Caret for the shared query row, relative to the unframed picker body. */
+export function caret(picker, width, maxRows = WINDOW + 3) {
+    return layout(picker, width, undefined, maxRows).cursor;
+}
+function layout(picker, width, pal, maxRows) {
     const found = matches(picker);
-    const fixed = 2 + (picker.description === undefined ? 0 : 1) + (picker.searchable === true ? 1 : 0);
+    const note = picker.description ?? picker.footer;
+    const fixed = 1 + (note === undefined ? 0 : 1) + (picker.searchable === true ? 1 : 0);
     const optionRoom = Math.max(1, Math.min(WINDOW, maxRows - fixed));
     const selectedAt = Math.max(0, found.findIndex((entry) => entry.index === picker.index));
     const { first, last } = menuWindow(found.length, selectedAt, optionRoom);
     const shown = found.slice(first, last);
-    const options = shown.length === 0
-        ? [row(width, [{ text: "  no matches", fg: pal.ink.muted }])]
-        : renderMenuRows(shown.map(({ option, index }) => ({
-            label: option.label,
-            hint: option.hint,
-            selected: index === picker.index,
-        })), width, pal);
+    const colors = pal;
+    const options = colors === undefined
+        ? []
+        : shown.length === 0
+            ? [row(width, [{ text: "  no matches", fg: colors.ink.muted }])]
+            : renderMenuRows(shown.map(({ option, index }) => ({
+                label: option.label,
+                hint: option.hint,
+                selected: index === picker.index,
+            })), width, colors);
     const progress = found.length > shown.length || picker.searchable === true
         ? `${found.length === 0 ? "0" : `${first + 1}–${first + shown.length}`} / ${found.length}` +
-            (found.length === picker.options.length ? "" : ` · ${picker.options.length} total`) + " · "
+            (found.length === picker.options.length ? "" : ` · ${picker.options.length} total`)
         : "";
-    const footer = picker.footer ?? "Enter to select · Esc to close";
-    return [
-        row(width, picker.title, picker.right === undefined ? [] : [{ text: picker.right, fg: pal.ink.muted }]),
-        ...(picker.description === undefined
+    const titleRight = picker.right ?? (picker.searchable === true ? undefined : progress);
+    const visibleTitleRight = titleRight === undefined
+        ? undefined
+        : elide(titleRight, Math.max(1, Math.floor(width * 0.55)));
+    const queryRow = picker.searchable === true && colors !== undefined
+        ? promptLine(picker.query ?? "", (picker.query ?? "").length, width, colors, {
+            placeholder: "type to filter",
+            right: progress,
+        })
+        : undefined;
+    const queryCursor = picker.searchable === true
+        ? promptCursor(picker.query ?? "", (picker.query ?? "").length, width, { right: progress })
+        : undefined;
+    const queryOffset = 1 + (note === undefined ? 0 : 1);
+    return {
+        rows: colors === undefined
             ? []
-            : [row(width, [{ text: picker.description, fg: pal.ink.muted }])]),
-        ...(picker.searchable === true
-            ? [
-                row(width, [
-                    { text: "  filter  ", fg: pal.ink.muted },
-                    { text: picker.query === "" || picker.query === undefined ? "type to search" : picker.query, fg: pal.ink.bright },
-                ]),
-            ]
-            : []),
-        ...options,
-        row(width, [{ text: `  ${elide(progress + footer, Math.max(1, width - 2))}`, fg: pal.ink.muted }]),
-    ];
+            : [
+                row(width, picker.title, visibleTitleRight === undefined || visibleTitleRight === ""
+                    ? []
+                    : [{ text: visibleTitleRight, fg: colors.ink.muted }]),
+                ...(note === undefined ? [] : [row(width, [{ text: note, fg: colors.ink.muted }])]),
+                ...(queryRow === undefined ? [] : [queryRow.row]),
+                ...options,
+            ],
+        cursor: picker.searchable === true
+            ? { row: queryOffset, col: queryCursor?.col ?? 0 }
+            : undefined,
+    };
 }
 export function heading(label, about, pal) {
     return [

package/dist/tui/transcript-view.js

@@ -17,8 +17,8 @@ export function transcriptRenderer(draw = render) {
     let positions = new WeakMap();
     const dirty = new Set();
     return {
-        viewport(blocks, width, height, scroll, palette) {
-            sync(blocks, width, palette);
+        viewport(blocks, width, height, scroll, palette, state = {}) {
+            sync(blocks, width, palette, state);
             const visibleHeight = Math.max(0, height);
             const totalRows = ends.at(-1) ?? 0;
             const maxScroll = Math.max(0, totalRows - visibleHeight);
@@ -50,19 +50,19 @@ export function transcriptRenderer(draw = render) {
             dirty.clear();
         },
     };
-    function sync(blocks, width, palette) {
+    function sync(blocks, width, palette, state) {
         if (source !== blocks ||
             layoutWidth !== width ||
             layoutPalette !== palette ||
             blocks.length < entries.length ||
             edgeChanged(blocks)) {
-            rebuild(blocks, width, palette);
+            rebuild(blocks, width, palette, state);
             return;
         }
-        append(blocks, width, palette);
-        refreshDirty(width, palette);
+        append(blocks, width, palette, state);
+        refreshDirty(width, palette, state);
     }
-    function rebuild(blocks, width, palette) {
+    function rebuild(blocks, width, palette, state) {
         source = blocks;
         layoutWidth = width;
         layoutPalette = palette;
@@ -70,15 +70,15 @@ export function transcriptRenderer(draw = render) {
         ends = [];
         positions = new WeakMap();
         dirty.clear();
-        append(blocks, width, palette);
+        append(blocks, width, palette, state);
     }
-    function append(blocks, width, palette) {
+    function append(blocks, width, palette, state) {
         let total = ends.at(-1) ?? 0;
         for (let index = entries.length; index < blocks.length; index++) {
             const block = blocks[index];
             if (block === undefined)
                 continue;
-            const rows = draw(block, width, palette);
+            const rows = draw(block, width, palette, { ...state, previous: blocks[index - 1] });
             entries.push({ block, rows });
             positions.set(block, index);
             dirty.delete(block);
@@ -86,7 +86,7 @@ export function transcriptRenderer(draw = render) {
             ends.push(total);
         }
     }
-    function refreshDirty(width, palette) {
+    function refreshDirty(width, palette, state) {
         if (dirty.size === 0)
             return;
         const changed = [...dirty]
@@ -99,8 +99,12 @@ export function transcriptRenderer(draw = render) {
         const first = changed[0];
         for (const index of changed) {
             const entry = entries[index];
-            if (entry !== undefined)
-                entry.rows = draw(entry.block, width, palette);
+            if (entry !== undefined) {
+                entry.rows = draw(entry.block, width, palette, {
+                    ...state,
+                    previous: entries[index - 1]?.block,
+                });
+            }
         }
         recomputeEnds(first);
     }

package/dist/tui/turn.js

@@ -5,15 +5,9 @@
 // neither has to know how the other is built.
 import { condense, diff } from "../ui/diff.js";
 import { promptFor } from "./approve.js";
-/**
- * What the footer can truthfully say.
- *
- * Every one of these is read off an event that has actually arrived, never
- * from a guess about where the turn probably is. A status line that says one
- * thing for the whole turn is decoration; this one is the only window into a
- * process that is otherwise silent for seconds at a time, so it has to be
- * worth believing.
- */
+// Semantic activity labels remain useful state even though the quiet footer
+// reduces them to one stable interruption hint. Reasoning and tools identify
+// the live work in the transcript itself.
 const WAITING = "Waiting";
 const THINKING = "Thinking";
 const WRITING = "Writing";
@@ -38,10 +32,18 @@ export function transcribe(stage) {
         return changed ? block : undefined;
     };
     return {
-        finish() {
+        finish(reason) {
             const changed = close();
             if (changed !== undefined)
                 stage.render(changed);
+            for (const block of tools.values()) {
+                if (block.kind !== "tool" || block.tone !== "pending")
+                    continue;
+                block.tone = "fail";
+                block.right = reason ?? "failed";
+                block.startedAt = undefined;
+                stage.render(block);
+            }
         },
         onStep(current, total) {
             step = current;
@@ -87,21 +89,34 @@ export function transcribe(stage) {
                 kind: "tool",
                 name: call.name,
                 target: target(call.input),
-                right: "pending",
+                right: "running",
                 tone: "pending",
                 body: preview(call, look),
+                startedAt: Date.now(),
             };
             tools.set(call.id, block);
             stage.emit(block);
             stage.render(block);
         },
+        onToolOutput(call, output) {
+            const block = tools.get(call.id);
+            if (block === undefined || block.kind !== "tool" || block.tone !== "pending")
+                return;
+            block.body = details(output, "out");
+            stage.render(block);
+        },
         onToolResult(call, result, summary) {
             stage.status(waiting(step, steps));
             const block = tools.get(call.id);
             if (block === undefined || block.kind !== "tool")
                 return;
+            if (block.tone === "deny") {
+                stage.render(block);
+                return;
+            }
             block.tone = result.isError ? "fail" : "ok";
             block.right = summary ?? "";
+            block.startedAt = undefined;
             // A failure replaces the preview: what the call was going to do stops
             // being the interesting part the moment it did not do it.
             const outcome = result.isError
@@ -112,31 +127,56 @@ export function transcribe(stage) {
             stage.render(block);
         },
         approve(call) {
-            if (stage.approved(call))
+            const block = tools.get(call.id);
+            if (stage.approved(call)) {
+                if (block !== undefined && block.kind === "tool") {
+                    block.right = "running";
+                    block.startedAt ??= Date.now();
+                    stage.render(block);
+                }
                 return Promise.resolve(true);
+            }
             const changed = close();
             if (changed !== undefined)
                 stage.render(changed);
             stage.status(ASKING);
+            if (block !== undefined && block.kind === "tool") {
+                block.right = pendingApproval(block.body);
+                block.startedAt = undefined;
+                stage.render(block);
+            }
             return new Promise((resolve) => {
                 stage.ask(promptFor(call, target(call.input), stage.palette), (answer) => {
                     if (answer === "always")
                         stage.remember(call);
                     const approved = answer !== "no";
-                    const block = tools.get(call.id);
-                    if (!approved && block !== undefined && block.kind === "tool") {
-                        block.tone = "deny";
-                        block.right = "declined";
-                        block.body = undefined;
+                    const settled = tools.get(call.id);
+                    if (settled !== undefined && settled.kind === "tool") {
+                        if (approved) {
+                            settled.tone = "pending";
+                            settled.right = "running";
+                            settled.startedAt = Date.now();
+                        }
+                        else {
+                            settled.tone = "deny";
+                            settled.right = "denied";
+                            settled.startedAt = undefined;
+                        }
                     }
                     stage.status(approved ? `Running ${call.name}` : waiting(step, steps));
-                    stage.render(block);
+                    stage.render(settled);
                     resolve(approved);
                 });
             });
         },
     };
 }
+function pendingApproval(body) {
+    const added = body?.filter((detail) => detail.kind === "add").length ?? 0;
+    const removed = body?.filter((detail) => detail.kind === "del").length ?? 0;
+    const summary = added + removed === 0 ? "" : `+${added} −${removed} · `;
+    return `${summary}pending approval`;
+}
 function waiting(step, total) {
     return step === 1 ? WAITING : `${WAITING} · step ${step}/${total}`;
 }

package/dist/tui/view.js

@@ -6,9 +6,8 @@ import { renderCommandMenu } from "./components/command-menu.js";
 import { renderComposer } from "./components/composer.js";
 import { renderDock } from "./components/dock.js";
 import { renderFooter } from "./components/footer.js";
-import { renderStatus, spinner } from "./components/status.js";
+import { renderStatus } from "./components/status.js";
 import { transcriptRenderer } from "./transcript-view.js";
-export { spinner } from "./components/status.js";
 const DOCK_MAX = 6;
 const FOOTER_ROWS = 1;
 const DOCK_RULES = 2;
@@ -26,7 +25,7 @@ export function compose(view, size, transcript = transcriptRenderer()) {
     // Any spare height belongs above the conversation, so short sessions grow
     // upward from the fixed dock rhythm instead of leaving a changing hole
     // beneath the latest reply.
-    const viewport = transcript.viewport(view.blocks, width, transcriptHeight, view.scroll, view.pal);
+    const viewport = transcript.viewport(view.blocks, width, transcriptHeight, view.scroll, view.pal, { spin: view.spin, reducedMotion: view.reducedMotion, now: view.now });
     const cursor = dock.cursor === undefined
         ? undefined
         : { row: transcriptHeight + dock.cursor.row, col: dock.cursor.col };
@@ -40,15 +39,14 @@ function dockRows(view, width, height) {
         status: view.modal === undefined ? view.status : undefined,
         feedback: view.feedback,
         readiness: view.readiness,
-        tick: view.spin,
-        reducedMotion: view.reducedMotion === true,
         unseen: view.unseen ?? 0,
     }, view.pal);
     const footer = renderFooter(view.footer, status, width, view.pal);
     if (view.modal !== undefined) {
+        const maxModalRows = height - FOOTER_ROWS - TRANSCRIPT_MIN - TRANSCRIPT_DOCK_GAP - DOCK_RULES;
         const body = {
-            rows: modal.panel(view.modal, width, view.pal, height - FOOTER_ROWS - TRANSCRIPT_MIN - TRANSCRIPT_DOCK_GAP - DOCK_RULES),
-            cursor: modal.caret(view.modal, width),
+            rows: modal.panel(view.modal, width, view.pal, maxModalRows),
+            cursor: modal.caret(view.modal, width, maxModalRows),
         };
         const dock = renderDock(body, width, view.pal, true);
         return {
@@ -60,11 +58,11 @@ function dockRows(view, width, height) {
     const available = height
         - TRANSCRIPT_MIN
         - TRANSCRIPT_DOCK_GAP
-        - menu.length
+        - menu.rows.length
         - FOOTER_ROWS
         - DOCK_RULES;
-    const composer = renderComposer(view.editor, width, Math.max(1, Math.min(DOCK_MAX, available)), view.pal);
-    const dock = renderDock({ rows: [...composer.rows, ...menu], cursor: composer.cursor }, width, view.pal, menu.length > 0);
+    const composer = renderComposer(view.editor, width, Math.max(1, Math.min(DOCK_MAX, available)), view.pal, menu.right);
+    const dock = renderDock({ rows: [...composer.rows, ...menu.rows], cursor: composer.cursor }, width, view.pal, menu.rows.length > 0);
     return {
         rows: ["", ...dock.rows, ...footer],
         cursor: offset(dock.cursor, TRANSCRIPT_DOCK_GAP),

package/dist/ui/render.js

@@ -20,6 +20,10 @@ let colorEnabled = terminalColor;
 export function configureColor(enabled) {
     colorEnabled = terminalColor && enabled;
 }
+/** Whether semantic colour and surfaces will be visible on this terminal. */
+export function hasColor() {
+    return colorEnabled;
+}
 export function paint(seg) {
     const text = terminalText(seg.text);
     if (!colorEnabled)
@@ -85,13 +89,17 @@ export function fitSegs(segs, cols) {
  */
 export function row(width, left, right = [], ground, padX = PAD) {
     const inner = Math.max(0, width - padX * 2);
-    const rightW = plainLen(right);
-    const gutter = right.length > 0 ? 1 : 0;
+    // The right column normally wins over the left, but it must still obey the
+    // row boundary when it cannot fit by itself (long commands and paths do
+    // reach approval titles on narrow terminals).
+    const fittedRight = fitSegs(right, inner);
+    const rightW = plainLen(fittedRight);
+    const gutter = fittedRight.length > 0 && rightW < inner ? 1 : 0;
     const fitted = fitSegs(left, Math.max(0, inner - rightW - gutter));
     // An empty pad is no pad at all: a zero-width segment still costs a pair of
     // escape sequences on every row of every frame.
     const lead = padX === 0 ? [] : [{ text: " ".repeat(padX), bg: ground }];
-    if (ground === undefined && right.length === 0) {
+    if (ground === undefined && fittedRight.length === 0) {
         // Nothing to draw is an empty row, not an indent: leading spaces are
         // invisible on screen and very visible in a paste buffer.
         if (plainLen(fitted) === 0)
@@ -103,7 +111,7 @@ export function row(width, left, right = [], ground, padX = PAD) {
         ...lead,
         ...fitted.map((seg) => ({ ...seg, bg: seg.bg ?? ground })),
         { text: " ".repeat(gap), bg: ground },
-        ...right.map((seg) => ({ ...seg, bg: seg.bg ?? ground })),
+        ...fittedRight.map((seg) => ({ ...seg, bg: seg.bg ?? ground })),
         ...lead,
     ]
         .map(paint)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@giovannijecha/jecode",
-  "version": "0.1.6-rc.0",
+  "version": "0.1.6",
   "description": "An owned coding agent with zero external runtime dependencies.",
   "license": "MIT",
   "repository": {