termux-dev 1.8.1 → 1.9.0

package/dist/cli/settings.js

@@ -30,6 +30,7 @@ export const ROWS = [
     row('layout', 'appearance', 'choice'),
     row('pureBlack', 'appearance', 'toggle'),
     row('autoApprove', 'agent', 'toggle'),
+    row('extra', 'agent', 'toggle'),
     row('maxIterations', 'agent', 'choice'),
     row('memory', 'agent', 'toggle'),
     row('updates', 'agent', 'toggle'),
@@ -37,6 +38,10 @@ export const ROWS = [
     row('language', 'general', 'choice'),
     row('about', 'about', 'info'),
 ];
+/** The rows on screen: Extra is there only while YOLO is on. */
+export function visibleRows(state) {
+    return ROWS.filter((r) => r.key !== 'extra' || state.autoApprove);
+}
 const hintFor = (key) => t(`settings.hint.${key}`);
 function cycle(items, current, direction) {
     const index = items.indexOf(current);
@@ -65,7 +70,10 @@ export function changeSetting(state, key, direction) {
         case 'pureBlack':
             return { ...state, pureBlack: !state.pureBlack };
         case 'autoApprove':
-            return { ...state, autoApprove: !state.autoApprove };
+            // Extra goes with YOLO: without it there is nothing to take the questions away from.
+            return { ...state, autoApprove: !state.autoApprove, extra: state.autoApprove ? false : !!state.extra };
+        case 'extra':
+            return state.autoApprove ? { ...state, extra: !state.extra } : state;
         case 'memory':
             return { ...state, memory: !state.memory };
         case 'updates':
@@ -81,8 +89,8 @@ export function changeSetting(state, key, direction) {
     }
 }
 /** Moves the focus one row. It stops at the first and the last row instead of wrapping. */
-export function moveFocus(focus, delta) {
-    return Math.max(0, Math.min(ROWS.length - 1, focus + delta));
+export function moveFocus(focus, delta, count = ROWS.length) {
+    return Math.max(0, Math.min(count - 1, focus + delta));
 }
 // ───────────────────────── rendering ─────────────────────────
 const LABEL_WIDTH = 21;
@@ -110,6 +118,8 @@ function valueText(key, state, version, room, withSwatch) {
             return onOff(state.pureBlack);
         case 'autoApprove':
             return onOff(state.autoApprove, palette.yolo, '▲');
+        case 'extra':
+            return onOff(!!state.extra, palette.err, '▲');
         case 'maxIterations':
             return palette.text(formatIterations(state.maxIterations));
         case 'memory':
@@ -136,7 +146,8 @@ function detailLines(state, key, width, maxLines, version) {
     }
     const hint = key === 'about' ? `devx v${version}. ${hintFor('about')}` : hintFor(key);
     // A warning is never the line that gets cut off: it keeps its row, the explanation gives way.
-    const warning = key === 'autoApprove' && state.autoApprove ? t('settings.warnYolo') : '';
+    const warning = key === 'autoApprove' && state.autoApprove ? t('settings.warnYolo')
+        : key === 'extra' && state.extra ? t('settings.warnExtra') : '';
     const hintRows = Math.max(1, maxLines - (warning ? 1 : 0));
     let wrapped = wrapText(hint, width);
     if (wrapped.length > hintRows) {
@@ -145,7 +156,7 @@ function detailLines(state, key, width, maxLines, version) {
     }
     const out = wrapped.map((line) => palette.muted(line));
     if (warning && out.length < maxLines)
-        out.push(palette.yolo(truncateWidth(warning, width)));
+        out.push((key === 'extra' ? palette.err : palette.yolo)(truncateWidth(warning, width)));
     return out;
 }
 /** The key hints, shortened step by step until they fit `width` cells. */
@@ -177,8 +188,9 @@ function renderCard(state, focus, cols, density, version) {
     if (density === 'roomy')
         lines.push(box(''));
     const labelWidth = labelColumn((r) => r.label, LABEL_WIDTH, Math.floor(iw / 2));
+    const shown = visibleRows(state);
     let section = '';
-    ROWS.forEach((row, index) => {
+    shown.forEach((row, index) => {
         if (row.sectionKey !== section) {
             if (section !== '' && density === 'roomy')
                 lines.push(box(''));
@@ -199,7 +211,7 @@ function renderCard(state, focus, cols, density, version) {
         lines.push(box(''));
     lines.push(rule('├' + '─'.repeat(W - 2) + '┤'));
     // The detail area always has the same height, so the panel does not jump while you move.
-    const detail = detailLines(state, ROWS[focus].key, iw - 2, maxDetail, version);
+    const detail = detailLines(state, shown[Math.min(focus, shown.length - 1)].key, iw - 2, maxDetail, version);
     for (let i = 0; i < maxDetail; i++)
         lines.push(box(detail[i] ? '  ' + detail[i] : ''));
     lines.push(rule('╰' + '─'.repeat(W - 2) + '╯'));
@@ -211,7 +223,8 @@ function renderCompact(state, focus, cols, rows, version) {
     const lines = [];
     const shortWidth = labelColumn((r) => r.short, SHORT_LABEL_WIDTH, Math.floor(width / 2));
     lines.push(' ' + palette.bold(palette.accent(t('settings.title'))) + palette.faint(` · v${version}`));
-    ROWS.forEach((row, index) => {
+    const shown = visibleRows(state);
+    shown.forEach((row, index) => {
         const focused = index === focus;
         const mark = focused ? palette.accent('❯') : ' ';
         const label = focused ? palette.bold(palette.text(row.short)) : palette.muted(row.short);
@@ -221,8 +234,8 @@ function renderCompact(state, focus, cols, rows, version) {
         lines.push(focused ? palette.shade(padEndWidth(content, width)) : content);
     });
     // The title, the rows and the key hints come first; the help text takes what is left of the screen.
-    const detailCount = Math.max(0, Math.min(rows >= 16 ? 2 : 1, rows - 1 - (ROWS.length + 2)));
-    const detail = detailLines(state, ROWS[focus].key, width - 2, detailCount, version);
+    const detailCount = Math.max(0, Math.min(rows >= 16 ? 2 : 1, rows - 1 - (shown.length + 2)));
+    const detail = detailLines(state, shown[Math.min(focus, shown.length - 1)].key, width - 2, detailCount, version);
     for (let i = 0; i < detailCount; i++)
         lines.push(detail[i] ? ' ' + detail[i] : '');
     lines.push(' ' + keyHints(width - 1));
@@ -233,9 +246,11 @@ function renderCompact(state, focus, cols, rows, version) {
  * depending on the height), narrow ones a plain list.
  */
 export function renderSettings(state, focus, cols, rows, version) {
-    if (cols < 60 || rows < 23)
+    // The card needs a line for each row of the list: it is lower when Extra is there.
+    const count = visibleRows(state).length;
+    if (cols < 60 || rows < count + 13)
         return renderCompact(state, focus, cols, rows, version);
-    return renderCard(state, focus, cols, rows >= 29 ? 'roomy' : 'tight', version);
+    return renderCard(state, focus, cols, rows >= count + 19 ? 'roomy' : 'tight', version);
 }
 /**
  * Shows the panel and resolves with the final state when it is closed (Esc, q or Ctrl+C).
@@ -251,16 +266,22 @@ export function runSettings(initial, options) {
         const wasRaw = !!input.isRaw;
         input.setRawMode?.(true);
         input.resume();
+        const stopWatching = block.watchResize(draw);
+        const rowsNow = () => visibleRows(state);
         const change = (direction) => {
-            const next = changeSetting(state, ROWS[focus].key, direction);
+            const key = rowsNow()[Math.min(focus, rowsNow().length - 1)].key;
+            const next = changeSetting(state, key, direction);
             if (next === state)
                 return;
             state = next;
-            options.onChange?.(ROWS[focus].key, state);
+            // The Extra row goes away with YOLO: the focus must not be left behind the end of the list.
+            focus = Math.min(focus, rowsNow().length - 1);
+            options.onChange?.(key, state);
             draw();
         };
         const close = () => {
             input.off('data', onData);
+            stopWatching();
             block.erase();
             if (!wasRaw)
                 input.setRawMode?.(false);
@@ -269,7 +290,7 @@ export function runSettings(initial, options) {
         let closed = false;
         const handleKey = (key) => {
             const move = (delta) => {
-                const next = moveFocus(focus, delta);
+                const next = moveFocus(focus, delta, rowsNow().length);
                 if (next !== focus) {
                     focus = next;
                     draw();
@@ -281,9 +302,9 @@ export function runSettings(initial, options) {
                 return move(1);
             // Home / End are sent differently by different terminals.
             if (key === '\x1b[H' || key === '\x1b[1~' || key === '\x1b[7~' || key === '\x1bOH' || key === 'g')
-                return move(-ROWS.length);
+                return move(-rowsNow().length);
             if (key === '\x1b[F' || key === '\x1b[4~' || key === '\x1b[8~' || key === '\x1bOF' || key === 'G')
-                return move(ROWS.length);
+                return move(rowsNow().length);
             if (key === '\x1b[C' || key === '\x1bOC' || key === 'l' || key === ' ' || key === '\r' || key === '\n')
                 return change(1);
             if (key === '\x1b[D' || key === '\x1bOD' || key === 'h')

package/dist/cli/typeahead.js

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import os from 'os';
 import path from 'path';
-import { CTRL_ENTER, EXTENDED_KEYS_OFF, EXTENDED_KEYS_ON, normalizeKey, splitKeys } from './keys.js';
+import { EXTENDED_KEYS_OFF, EXTENDED_KEYS_ON, isNewlineKey, normalizeKey, splitKeys } from './keys.js';
 import { buildPromptFrame, palette } from './ui.js';
 import { displayWidth, truncateWidth } from './width.js';
 import { t } from '../core/i18n.js';
@@ -31,13 +31,16 @@ export function applyKey(state, key) {
             start--;
         return start === pos ? { state } : set([...chars.slice(0, start), ...chars.slice(pos)], start);
     };
+    // Ctrl+Enter, Alt+Enter, Shift+Enter: a new paragraph, the line is not sent.
+    if (isNewlineKey(key))
+        return set([...cs.slice(0, at), '\n', ...cs.slice(at)], at + 1);
     switch (key) {
-        case CTRL_ENTER: {
-            const text = state.text.trim();
-            return { state: text ? { text: '', cursor: 0 } : state, submit: text || undefined, sendNow: true };
-        }
         case '\r':
         case '\n': {
+            // A backslash before the cursor makes Enter a line break instead (for terminals that cannot
+            // tell Ctrl+Enter from Enter, a phone keyboard for one).
+            if (at > 0 && cs[at - 1] === '\\')
+                return set([...cs.slice(0, at - 1), '\n', ...cs.slice(at)], at);
             const text = state.text.trim();
             return text ? { state: { text: '', cursor: 0 }, submit: text } : { state };
         }
@@ -103,7 +106,7 @@ export function renderComposer({ state, queued, cols, base }) {
         const last = queued[queued.length - 1].replace(/\s+/g, ' ');
         const label = queued.length === 1 ? t('composer.queued') : t('composer.queuedMany', { n: queued.length });
         const prefix = palette.warn('↳ ' + label) + palette.faint(': ');
-        // What can be done with it: ctrl+enter sends it now, the down arrow takes it back to edit.
+        // What can be done with it: the down arrow takes it back to edit.
         const hint = t('composer.queuedHint');
         const suffixWidth = displayWidth(' · ' + hint);
         const withHint = room - displayWidth(prefix) - suffixWidth >= 12;
@@ -144,7 +147,6 @@ export class TurnComposer {
     frameBase;
     onQueue;
     status;
-    onSendNow;
     active = false;
     suspended = false;
     shown = false;
@@ -159,14 +161,11 @@ export class TurnComposer {
     live;
     constructor(out = process.stdout, frameBase, onQueue, 
     /** The working line shown above the frame for the whole turn; called on every animation tick. */
-    status, 
-    /** Ctrl+Enter: the user wants the queued messages to reach the agent right now. */
-    onSendNow) {
+    status) {
         this.out = out;
         this.frameBase = frameBase;
         this.onQueue = onQueue;
         this.status = status;
-        this.onSendNow = onSendNow;
     }
     get enabled() {
         return this.active;
@@ -266,7 +265,6 @@ export class TurnComposer {
             return;
         if (process.env.DEVX_DEBUG_KEYS)
             logKeys(chunk, this.queue.length, this.state.text);
-        let sendNow = false;
         for (const raw of splitKeys(chunk)) {
             const key = normalizeKey(raw);
             // Ctrl+C is the app's (it stops the generation); Ctrl+D does nothing.
@@ -292,14 +290,9 @@ export class TurnComposer {
                 this.queue.push(result.submit);
                 this.onQueue?.(result.submit);
             }
-            if (result.sendNow && this.queue.length > 0)
-                sendNow = true;
         }
         this.lines = this.render();
         this.redraw();
-        // After the redraw: the caller takes the queue and stops the turn.
-        if (sendNow)
-            this.onSendNow?.();
     }
     // ── terminal output
     /** The write that replaces the terminal's own for the length of the turn. */

package/dist/cli/ui.js

@@ -36,9 +36,12 @@ export const palette = {
     accent: (s) => tokens().accent(s),
     bold: (s) => (colorOn() ? `\x1b[1m${s}\x1b[22m` : s),
 };
-export function resolveMode(planMode, yolo) {
+/** `extra` is YOLO without the safety net (nothing is asked); it only counts while YOLO is on. */
+export function resolveMode(planMode, yolo, extra = false) {
     if (planMode)
         return 'plan';
+    if (yolo && extra)
+        return 'extra';
     return yolo ? 'yolo' : 'agent';
 }
 export function modeStyle(mode) {
@@ -47,6 +50,8 @@ export function modeStyle(mode) {
             return { label: 'plan', glyph: '◆', color: palette.plan };
         case 'yolo':
             return { label: 'yolo', glyph: '▲', color: palette.yolo };
+        case 'extra':
+            return { label: 'extra', glyph: '▲', color: palette.err };
         default:
             return { label: 'agent', glyph: '●', color: palette.accent };
     }
@@ -136,7 +141,7 @@ function brand(version) {
 }
 export function renderHeader(info, cols) {
     const W = contentWidth(cols);
-    const modePill = info.yolo ? palette.yolo(palette.bold('▲ auto-approve')) : '';
+    const modePill = info.extra ? palette.err(palette.bold('▲ extra: nothing asked')) : info.yolo ? palette.yolo(palette.bold('▲ auto-approve')) : '';
     const branch = info.branch
         ? `${palette.faint('git:')}${palette.muted(info.branch)}${info.dirty ? palette.warn('*') : ''}`
         : '';
@@ -146,7 +151,7 @@ export function renderHeader(info, cols) {
         const limit = Math.max(8, cols - 1);
         const room = Math.max(6, cols - 3);
         const titleOptions = info.yolo
-            ? [`${brand(info.version)}  ${modePill}`, `${brand(info.version)}  ${palette.yolo('▲ yolo')}`, `${brand(info.version)} ${palette.yolo('▲')}`, brand(info.version)]
+            ? [`${brand(info.version)}  ${modePill}`, `${brand(info.version)}  ${info.extra ? palette.err('▲ extra') : palette.yolo('▲ yolo')}`, `${brand(info.version)} ${info.extra ? palette.err('▲') : palette.yolo('▲')}`, brand(info.version)]
             : [brand(info.version)];
         lines.push(titleOptions.find((t) => displayWidth(t) <= limit) ?? truncateWidth(stripAnsi(brand(info.version)), limit));
         lines.push(`  ${palette.text(truncateWidth(info.model, room))}`);
@@ -181,6 +186,17 @@ export function renderHeader(info, cols) {
     }
     return lines;
 }
+// ───────────────────────── prompt frame ─────────────────────────
+/** `◈ 2 bg` (running tasks); a failed one turns it red: `◈ 2 bg · 1 failed`. Empty when there is nothing to say. */
+export function backgroundBadge(bg, short = false) {
+    if (!bg || (bg.running <= 0 && !(bg.failed && bg.failed > 0)))
+        return '';
+    const failed = bg.failed && bg.failed > 0 ? bg.failed : 0;
+    const text = short
+        ? `◈${bg.running}${failed ? `!${failed}` : ''}`
+        : `◈ ${bg.running} bg${failed ? ` · ${failed} failed` : ''}`;
+    return failed ? palette.err(text) : palette.accent(text);
+}
 /** The part of the input that fits into `cells`, scrolled so that the cursor stays visible. */
 export function visibleWindow(input, cursorPos, cells) {
     const cps = Array.from(input);
@@ -242,6 +258,128 @@ export function visibleWindow(input, cursorPos, cells) {
         cursorCells: cellsBefore(Math.min(cursorCp, win.end), win.start),
     };
 }
+/** Cells of text per row inside the frame (the compact phone row has no side borders). */
+export function inputCells(cols) {
+    const W = frameWidth(cols);
+    return Math.max(4, isCompact(cols) ? W - 4 : W - 6);
+}
+/** Control characters but the line break (`\n` is a real break in the input, it is laid out, not shown). */
+const CONTROL_EXCEPT_NEWLINE = /[\x00-\x09\x0b-\x1f\x7f]/g;
+/** Rows the input may take before it scrolls: a quarter of the terminal, at most 8. */
+export function maxInputRows(termRows = process.stdout.rows || 24) {
+    return Math.max(1, Math.min(8, Math.floor(termRows / 4)));
+}
+/**
+ * Cuts the input into rows of `cells` cells. A line breaks after a space when it can; an
+ * attachment tag such as `[Pasted text #1 +22 lines]` is never split unless it is wider than a row.
+ */
+export function wrapInput(input, cells) {
+    const cps = Array.from(input);
+    if (cps.length === 0)
+        return [{ start: 0, end: 0 }];
+    const widths = cps.map((c) => codePointWidth(c.codePointAt(0)));
+    // Where a tag starts (in code points) -> where it ends.
+    const offsets = [];
+    let unit = 0;
+    for (const c of cps) {
+        offsets.push(unit);
+        unit += c.length;
+    }
+    const atoms = new Map();
+    for (const m of input.matchAll(BADGE)) {
+        const from = offsets.indexOf(m.index);
+        const to = offsets.indexOf(m.index + m[0].length);
+        if (from >= 0)
+            atoms.set(from, to >= 0 ? to : cps.length);
+    }
+    const rows = [];
+    let i = 0;
+    while (i < cps.length) {
+        const start = i;
+        let used = 0;
+        let afterSpace = -1;
+        let hardBreak = false;
+        while (i < cps.length) {
+            // A line break ends the row; it stays at the end of that row, so the cursor behind it is on the next one.
+            if (cps[i] === '\n') {
+                i++;
+                hardBreak = true;
+                break;
+            }
+            let next = atoms.get(i) ?? i + 1;
+            let w = widths.slice(i, next).reduce((a, b) => a + b, 0);
+            if (next > i + 1 && w > cells) {
+                next = i + 1;
+                w = widths[i];
+            } // a tag wider than a row is split
+            if (used + w > cells)
+                break;
+            used += w;
+            i = next;
+            if (cps[i - 1] === ' ')
+                afterSpace = i;
+        }
+        if (!hardBreak) {
+            if (i < cps.length && cps[i] !== ' ' && afterSpace > start)
+                i = afterSpace; // break between words
+            if (i === start)
+                i = start + 1; // a cell wider than the row
+        }
+        rows.push({ start, end: i });
+    }
+    // Text that ends with a line break: the cursor waits on a new, empty row.
+    if (cps[cps.length - 1] === '\n')
+        rows.push({ start: cps.length, end: cps.length });
+    return rows;
+}
+function layoutInput(input, cursorPos, cells) {
+    const cps = Array.from(input);
+    const widths = cps.map((c) => codePointWidth(c.codePointAt(0)));
+    let cursorCp = 0;
+    let units = 0;
+    while (cursorCp < cps.length && units < cursorPos) {
+        units += cps[cursorCp].length;
+        cursorCp++;
+    }
+    const rows = wrapInput(input, cells);
+    let cursorRow = rows.findIndex((r) => cursorCp < r.end);
+    if (cursorRow < 0)
+        cursorRow = rows.length - 1;
+    const row = rows[cursorRow];
+    const cursorCell = widths.slice(row.start, Math.min(cursorCp, row.end)).reduce((a, b) => a + b, 0);
+    return { cps, rows, widths, cursorRow, cursorCell };
+}
+/**
+ * The cursor one row up or down inside a wrapped input, or null when there is no such row
+ * (the arrow keys then walk the prompt history as before). Returns a UTF-16 index.
+ */
+export function moveCursorRow(input, cursorPos, cols, dir) {
+    const clean = input.replace(CONTROL_EXCEPT_NEWLINE, ' ');
+    const { cps, rows, widths, cursorRow, cursorCell } = layoutInput(clean, cursorPos, inputCells(cols));
+    const target = rows[cursorRow + dir];
+    if (!target)
+        return null;
+    // The last cell of a row that is not the last one belongs to the next row, so stop before it.
+    const limit = cursorRow + dir === rows.length - 1 ? target.end : Math.max(target.start, target.end - 1);
+    let at = target.start;
+    let used = 0;
+    while (at < limit && used + widths[at] <= cursorCell) {
+        used += widths[at];
+        at++;
+    }
+    return cps.slice(0, at).join('').length;
+}
+/** The rows of the input as drawn, with the cursor; scrolled so that the cursor row is visible. */
+function inputRows(f, cells) {
+    if (!f.input) {
+        return { rows: [palette.muted(truncateWidth(f.placeholder, cells))], firstRow: 0, cursorRow: 0, cursorCol: 0 };
+    }
+    const { cps, rows, cursorRow, cursorCell } = layoutInput(f.input, f.cursorPos, cells);
+    const limit = f.maxInputRows ?? maxInputRows();
+    const firstRow = rows.length <= limit ? 0 : Math.max(0, Math.min(cursorRow - limit + 1, rows.length - limit));
+    const shown = rows.slice(firstRow, firstRow + limit).map((r) => formatBadges(cps.slice(r.start, r.end).join('').replace(/\n$/, '')));
+    return { rows: shown, firstRow, cursorRow: cursorRow - firstRow, cursorCol: cursorCell };
+}
 function keyHints(cols, mode) {
     const next = mode === 'plan' ? 'agent' : 'plan';
     const all = [
@@ -279,8 +417,9 @@ export function fitModelLabel(label, max) {
 }
 export function buildPromptFrame(input) {
     // Control characters would move the cursor and tear the frame apart. They are shown as
-    // spaces; one character stays one character, so cursor positions keep matching.
-    const f = { ...input, input: input.input.replace(/[\x00-\x1f\x7f]/g, ' ') };
+    // spaces; one character stays one character, so cursor positions keep matching. A line break
+    // is kept: it starts a new row of the input.
+    const f = { ...input, input: input.input.replace(CONTROL_EXCEPT_NEWLINE, ' ') };
     if (isCompact(f.cols))
         return buildCompactFrame(f);
     const W = frameWidth(f.cols);
@@ -295,16 +434,14 @@ export function buildPromptFrame(input) {
         topRight = ' ' + palette.muted(fitModelLabel(f.model, Math.min(48, topFree - 4))) + ' ';
     }
     const top = rule('╭─') + pill + rule('─'.repeat(Math.max(0, topFree - displayWidth(topRight)))) + topRight + rule('─╮');
-    // ── input row: │ ❯ text │
+    // ── input rows: │ ❯ text │, the text wraps onto further rows instead of scrolling sideways
     const contentCells = W - 6;
-    const win = visibleWindow(f.input, f.cursorPos, contentCells);
-    const content = f.input
-        ? (win.leftEllipsis ? palette.faint('…') : '') +
-            formatBadges(win.text) +
-            (win.rightEllipsis ? palette.faint('…') : '')
-        : palette.muted(truncateWidth(f.placeholder, contentCells));
-    const inputRow = rule('│') + ' ' + palette.accent('❯') + ' ' + padEndWidth(content, contentCells) + ' ' + rule('│');
-    const cursorCol = 4 + (f.input ? (win.leftEllipsis ? 1 : 0) + win.cursorCells : 0);
+    const body = inputRows(f, contentCells);
+    const inputLines = body.rows.map((content, i) => {
+        const glyph = i === 0 ? (body.firstRow > 0 ? palette.faint('…') : palette.accent('❯')) : ' ';
+        return rule('│') + ' ' + glyph + ' ' + padEndWidth(content, contentCells) + ' ' + rule('│');
+    });
+    const cursorCol = 4 + body.cursorCol;
     // ── bottom border: ╰─ ~/project git:main* ──── ━━━━──── 12% · $0.0123 ─╯
     const bottomFree = W - 4;
     const pct = Math.max(0, Math.min(100, Math.round(f.contextPercent)));
@@ -316,7 +453,10 @@ export function buildPromptFrame(input) {
         : bottomFree >= displayWidth(stat) + 4
             ? ' ' + palette.muted(stat) + ' '
             : '';
-    const leftRoom = bottomFree - displayWidth(bottomRight) - 2;
+    // ◈ 2 bg: tasks that keep running while the conversation goes on (/tasks lists them)
+    const bgBadge = backgroundBadge(f.background);
+    const bgWidth = bgBadge ? displayWidth(stripAnsi(bgBadge)) + 2 : 0;
+    const leftRoom = bottomFree - displayWidth(bottomRight) - 2 - bgWidth;
     let bottomLeft = '';
     if (f.cwd && leftRoom >= 10) {
         const branch = f.branch ? `${palette.faint('git:')}${palette.muted(f.branch)}${f.dirty ? palette.warn('*') : ''}` : '';
@@ -325,6 +465,9 @@ export function buildPromptFrame(input) {
         const pathRoom = leftRoom - (showBranch ? branchW : 0);
         bottomLeft = ' ' + palette.muted(shortenPath(f.cwd, pathRoom)) + (showBranch ? ' ' + branch : '') + ' ';
     }
+    if (bgBadge && bottomFree - displayWidth(bottomLeft) - displayWidth(bottomRight) - 2 >= bgWidth) {
+        bottomLeft += (bottomLeft ? '' : ' ') + bgBadge + ' ';
+    }
     const bottom = rule('╰─') +
         bottomLeft +
         rule('─'.repeat(Math.max(0, bottomFree - displayWidth(bottomLeft) - displayWidth(bottomRight)))) +
@@ -332,7 +475,7 @@ export function buildPromptFrame(input) {
         rule('─╯');
     // ── footer: key hints, or the suggestion list while one is open
     const footer = f.below && f.below.length > 0 ? f.below.map((l) => '  ' + l) : [hintsRow(f.cols, f.mode)];
-    return { lines: [top, inputRow, bottom, ...footer], cursorRow: 1, cursorCol };
+    return { lines: [top, ...inputLines, bottom, ...footer], cursorRow: 1 + body.cursorRow, cursorCol };
 }
 /**
  * Phone layout: one row, no borders, no hints.
@@ -345,23 +488,26 @@ function buildCompactFrame(f) {
     const style = modeStyle(f.mode);
     const prefix = style.color(style.glyph) + ' ' + palette.accent('❯') + ' ';
     const pct = Math.max(0, Math.min(100, Math.round(f.contextPercent)));
-    const statText = `${pct}%`;
+    const bgShort = backgroundBadge(f.background, true);
+    const statText = `${bgShort ? stripAnsi(bgShort) + ' ' : ''}${pct}%`;
     const statColor = pct >= 90 ? palette.err : pct >= 75 ? palette.warn : palette.faint;
     const statWidth = displayWidth(statText) + 1;
-    const withStat = W - 4 - statWidth >= 14;
-    const cells = W - 4 - (withStat ? statWidth : 0);
-    const win = visibleWindow(f.input, f.cursorPos, cells);
-    const content = f.input
-        ? (win.leftEllipsis ? palette.faint('…') : '') +
-            formatBadges(win.text) +
-            (win.rightEllipsis ? palette.faint('…') : '')
-        : palette.muted(truncateWidth(f.placeholder, cells));
-    const row = prefix + padEndWidth(content, cells) + (withStat ? ' ' + statColor(statText) : '');
+    const cells = W - 4;
+    // The count sits at the end of the last row, and only when the text there leaves it room.
+    const withStat = cells - statWidth >= 14;
+    const body = inputRows(f, cells);
+    const statShown = bgShort && withStat ? bgShort + ' ' + statColor(`${pct}%`) : statColor(statText);
+    const rows = body.rows.map((content, i) => {
+        const lead = i === 0 ? (body.firstRow > 0 ? style.color(style.glyph) + ' ' + palette.faint('…') + ' ' : prefix) : '    ';
+        const room = cells - displayWidth(stripAnsi(content));
+        const stat = i === body.rows.length - 1 && withStat && room >= statWidth ? ' '.repeat(room - statWidth + 1) + statShown : '';
+        return lead + (stat ? content + stat : padEndWidth(content, cells));
+    });
     const below = (f.below ?? []).map((l) => '  ' + l);
     return {
-        lines: [row, ...below],
-        cursorRow: 0,
-        cursorCol: 4 + (f.input ? (win.leftEllipsis ? 1 : 0) + win.cursorCells : 0),
+        lines: [...rows, ...below],
+        cursorRow: body.cursorRow,
+        cursorCol: 4 + body.cursorCol,
     };
 }
 function hintsRow(cols, mode) {
@@ -614,7 +760,7 @@ export function summarizeToolResult(name, result, cols = 80, expanded = false) {
     }
     if (expanded && t !== 'bash' && !(t === 'edit_file' || t === 'write_file')) {
         // For these the first line is part of the output, not a summary of it.
-        const own = t.startsWith('mcp__') || t === 'web_search' || t === 'fetch_url';
+        const own = t.startsWith('mcp__') || t === 'web_search' || t === 'fetch_url' || t === 'background';
         const first = own ? [] : summarizeToolResult(name, result, cols, false);
         return [...first, ...fullRows(text, cols)];
     }
@@ -648,6 +794,17 @@ export function summarizeToolResult(name, result, cols = 80, expanded = false) {
         }
         catch { }
     }
+    // Background tasks: what happened on the first line (started / failed / matched), the rest folded.
+    if (t === 'background') {
+        const nonEmpty = outputRows(text).filter((l) => l.trim());
+        if (nonEmpty.length === 0)
+            return [renderResultLine('(no output)', 'muted', cols)];
+        const bad = /^(Error:|No background task|.* failed \(exit|.*ended right after)/.test(nonEmpty[0]);
+        const good = /^(Started bg|Stopped\.)/.test(nonEmpty[0]);
+        const rest = nonEmpty.length - 1;
+        const row = renderResultLine(nonEmpty[0].trim(), bad ? 'error' : good ? 'ok' : 'muted', cols);
+        return rest > 0 ? [row, moreHint(rest)] : [row];
+    }
     // Output of an MCP tool or a web fetch: the first line and how many more there are.
     if (t.startsWith('mcp__') || t === 'web_search' || t === 'fetch_url') {
         const nonEmpty = outputRows(text).filter((l) => l.trim());
@@ -860,7 +1017,7 @@ export function easeToward(current, target, dtMs, tauMs = 400) {
     return current + distance * (1 - Math.exp(-dtMs / tauMs));
 }
 /**
- * The working line:  `  ⠹ Read src/x.ts  (12s · ↓ 364 tokens · ctrl+c to stop)`.
+ * The working line:  `  ⠹ Read src/x.ts  (12s · ↓ 364 tokens · esc to stop)`.
  * On a narrow screen the details are dropped step by step, the label is cut last.
  */
 export function renderStatusLine({ label: rawLabel, elapsedMs, meta = '', frame, columns }) {
@@ -889,7 +1046,7 @@ export function renderStatusLine({ label: rawLabel, elapsedMs, meta = '', frame,
     return `  ${glyph} ${palette.text(text)}${' '.repeat(GAP)}${suffix}`;
 }
 /**
- * Animated "working" line:  `  ⠹ Read src/x.ts  (12s · 1.2k tok · ctrl+c to stop)`.
+ * Animated "working" line:  `  ⠹ Read src/x.ts  (12s · 1.2k tok · esc to stop)`.
  * Same start / message / stop API as the clack spinner it replaces.
  */
 let activeSpinner = null;

package/dist/cli/updater.js

@@ -3,6 +3,7 @@ import path from 'path';
 import fs from 'fs/promises';
 import pc from 'picocolors';
 import { select } from '@inquirer/prompts';
+import { palette } from './ui.js';
 import { fileURLToPath } from 'url';
 const GITHUB_REPO_URL = 'https://github.com/apvcode/Termux-Dev';
 const REMOTE_PKG_URL = 'https://raw.githubusercontent.com/apvcode/Termux-Dev/main/package.json';
@@ -208,8 +209,9 @@ export async function runStartupUpdateCheck(config) {
     const spinner = setInterval(() => {
         if (isDone)
             return;
-        const frame = pc.cyan(frames[fIdx++ % frames.length]);
-        process.stdout.write(`\r  ${frame} ${pc.dim(`Checking for updates from`)} ${pc.cyan('apvcode/Termux-Dev')} ${pc.dim(`(v${currentVersion})...`)} `);
+        // The colours of the theme, like the rest of the interface.
+        const frame = palette.accent(frames[fIdx++ % frames.length]);
+        process.stdout.write(`\r  ${frame} ${palette.muted('Checking for updates from')} ${palette.accent('apvcode/Termux-Dev')} ${palette.faint(`(v${currentVersion})...`)} `);
     }, 75);
     const result = await checkForUpdates(10000);
     isDone = true;
@@ -218,14 +220,14 @@ export async function runStartupUpdateCheck(config) {
     process.stdout.write('\r\x1b[K');
     if (result.updateAvailable) {
         console.log();
-        console.log(pc.bold(pc.cyan('  ┌───────────────────────────────────────────────────────────┐')));
-        console.log(pc.bold(pc.cyan('  │')) + pc.bold(pc.yellow(`  A new update is available: `)) + pc.dim(`v${result.currentVersion}`) + pc.bold(pc.green(` → v${result.latestVersion}`)) + ' '.repeat(Math.max(1, 23 - result.currentVersion.length - result.latestVersion.length)) + pc.bold(pc.cyan('│')));
-        console.log(pc.bold(pc.cyan('  │')) + pc.dim(`  Repository: https://github.com/apvcode/Termux-Dev          `) + pc.bold(pc.cyan('│')));
-        console.log(pc.bold(pc.cyan('  └───────────────────────────────────────────────────────────┘')));
+        console.log(palette.rule('  ┌───────────────────────────────────────────────────────────┐'));
+        console.log(palette.rule('  │') + palette.bold(palette.accent(`  A new update is available: `)) + palette.muted(`v${result.currentVersion}`) + palette.bold(palette.ok(` → v${result.latestVersion}`)) + ' '.repeat(Math.max(1, 23 - result.currentVersion.length - result.latestVersion.length)) + palette.rule('│'));
+        console.log(palette.rule('  │') + palette.faint(`  Repository: https://github.com/apvcode/Termux-Dev          `) + palette.rule('│'));
+        console.log(palette.rule('  └───────────────────────────────────────────────────────────┘'));
         console.log();
         try {
             const choice = await select({
-                message: pc.bold('Do you want to update devx now?'),
+                message: palette.bold('Do you want to update devx now?'),
                 loop: false,
                 choices: [
                     {
@@ -250,7 +252,7 @@ export async function runStartupUpdateCheck(config) {
     }
     else {
         // Briefly show up to date message
-        process.stdout.write(`  ${pc.green('✓')} ${pc.dim(`devx is up to date (v${result.currentVersion})`)}\n`);
+        process.stdout.write(`  ${palette.ok('✓')} ${palette.muted(`devx is up to date (v${result.currentVersion})`)}\n`);
         await new Promise(r => setTimeout(r, 450));
         // Clean up line
         process.stdout.write('\x1b[1A\x1b[2K');