termux-dev 1.8.0 → 1.8.2

package/dist/cli/logo.js

@@ -0,0 +1,30 @@
+/**
+ * The devx wordmark, drawn from a small pixel font: every letter is 5 pixels wide and 6 tall, and two
+ * pixel rows share one terminal row with half blocks, so the pixels are square and the shapes stay clean.
+ */
+const FONT = {
+    D: ['████ ', '█   █', '█   █', '█   █', '█   █', '████ '],
+    E: ['█████', '█    ', '████ ', '█    ', '█    ', '█████'],
+    V: ['█   █', '█   █', '█   █', '█   █', ' █ █ ', '  █  '],
+    X: ['█   █', ' █ █ ', '  █  ', '  █  ', ' █ █ ', '█   █'],
+};
+export function wordmark(text = 'DEVX', gap = 1) {
+    const letters = Array.from(text).map((c) => FONT[c]);
+    const rows = letters[0].length;
+    const out = [];
+    for (let r = 0; r < rows; r += 2) {
+        let line = '';
+        letters.forEach((glyph, i) => {
+            if (i > 0)
+                line += ' '.repeat(gap);
+            for (let x = 0; x < glyph[r].length; x++) {
+                const top = glyph[r][x] !== ' ';
+                const bottom = glyph[r + 1][x] !== ' ';
+                line += top && bottom ? '█' : top ? '▀' : bottom ? '▄' : ' ';
+            }
+        });
+        out.push(line);
+    }
+    return out;
+}
+export const DEVX_LOGO = wordmark();

package/dist/cli/markdown.js

@@ -8,6 +8,18 @@ marked.use(markedTerminal({
     showSectionPrefix: false,
     tab: 2
 }));
+// marked-terminal prints the text of a list item as it was written (`code` and **bold** with their
+// marks); the inline tokens of the item have to be rendered.
+marked.use({
+    renderer: {
+        text(token) {
+            if (token && typeof token === 'object' && Array.isArray(token.tokens) && token.tokens.length > 0) {
+                return this.parser.parseInline(token.tokens);
+            }
+            return false;
+        },
+    },
+});
 /**
  * Inline markdown (`code`, **bold**, *italic*) for text that arrives in pieces. The state of an open
  * marker is kept between pieces, so a span that runs over several words (`**seven words in bold**`)
@@ -104,7 +116,9 @@ export function renderMarkdown(content) {
     if (!content)
         return '';
     try {
-        return marked.parse(unfenceMarkdown(content)).trim();
+        const text = marked.parse(unfenceMarkdown(content)).trim();
+        // The list marker of marked-terminal is `*`: draw a bullet instead.
+        return text.replace(/^((?:\s|\x1b\[[0-9;]*m)*)\* /gm, '$1• ');
     }
     catch {
         return content;
@@ -167,7 +181,8 @@ export class MarkdownStreamer {
                 trimmed === '***');
             if (!isSpecialLine) {
                 const lastSpaceIdx = Math.max(this.buffer.lastIndexOf(' '), this.buffer.lastIndexOf('\t'));
-                if (lastSpaceIdx > 0) {
+                // At the start of a line, a first word that is not finished yet (`  *`, the marker of an indented item) waits.
+                if (lastSpaceIdx > 0 && (!this.atLineStart || /\S\s/.test(this.buffer))) {
                     const wordsToFlush = this.buffer.slice(0, lastSpaceIdx + 1);
                     this.buffer = this.buffer.slice(lastSpaceIdx + 1);
                     this.sink(this.formatInline(wordsToFlush));

package/dist/cli/picker.js

@@ -1,10 +1,11 @@
 import { LiveBlock } from './liveblock.js';
 import { splitKeys } from './keys.js';
 import { palette } from './ui.js';
+import { t } from '../core/i18n.js';
 import { displayWidth, padEndWidth, truncateWidth, wrapWords } from './width.js';
 function hints(width) {
     const variants = [
-        [['↑↓', 'move'], ['enter', 'select'], ['esc', 'cancel']],
+        [['↑↓', t('picker.hint.move')], ['enter', t('picker.hint.select')], ['esc', t('picker.hint.cancel')]],
         [['↑↓', ''], ['enter', ''], ['esc', '']],
         [['enter', ''], ['esc', '']],
     ];
@@ -16,7 +17,7 @@ function hints(width) {
     return '';
 }
 /** Of a long list only the rows around the focus are shown, with "↑ N more" / "↓ N more" at the cut edges. */
-function windowItems(rows, focus, max, width) {
+export function windowItems(rows, focus, max, width) {
     if (rows.length <= max)
         return rows;
     const start = Math.max(0, Math.min(rows.length - max, focus - Math.floor(max / 2)));
@@ -87,7 +88,14 @@ export function runPicker(options, io = { input: process.stdin, output: process.
         const count = options.items.length;
         let focus = Math.max(0, options.items.findIndex((i) => options.current !== undefined && i.value === options.current));
         let done = false;
-        const draw = () => block.draw(renderPicker(options, focus, output.columns || 80, output.rows || 40));
+        let reported = -1;
+        const draw = () => {
+            if (options.onFocus && focus !== reported) {
+                reported = focus;
+                options.onFocus(options.items[focus].value);
+            }
+            block.draw(renderPicker(options, focus, output.columns || 80, output.rows || 40));
+        };
         const wasRaw = !!input.isRaw;
         input.setRawMode?.(true);
         input.resume();

package/dist/cli/prompt.js

@@ -6,7 +6,7 @@ import { CustomCommandManager } from '../core/commands.js';
 import { formatPromptHeader } from './modeborder.js';
 import { filterCommandPalette, estimatePromptTokens, formatPromptTokenBadge } from './prompt_palette.js';
 import { PromptHistoryNavigator } from './history_search.js';
-import { buildPromptFrame, palette, renderUserEcho, resolveMode } from './ui.js';
+import { buildPromptFrame, moveCursorRow, palette, renderUserEcho, resolveMode } from './ui.js';
 import { padEndWidth, truncateWidth } from './width.js';
 export const SLASH_COMMANDS = [
     { cmd: '/new', desc: 'Start a new clean chat session' },
@@ -27,6 +27,7 @@ export const SLASH_COMMANDS = [
     { cmd: '/agent', desc: 'Switch to AGENT mode (coder & executor)' },
     { cmd: '/image', desc: 'Paste the image from the clipboard (same as Ctrl+V or Alt+V)' },
     { cmd: '/serve', desc: 'Start local web server for web/game preview' },
+    { cmd: '/tasks', desc: 'Background tasks: list, /tasks <id> output, /tasks stop <id|all>' },
     { cmd: '/copy', desc: 'Copy the last answer of the AI to the clipboard' },
     { cmd: '/rewind', desc: 'Go back to one of your messages: the chat after it is removed' },
     { cmd: '/rename', desc: 'Rename the chat (/rename <name>), or let the AI name it again' },
@@ -141,6 +142,7 @@ export function askPrompt(opts = {}) {
                 contextPercent: opts.contextPercent ?? 0,
                 cost: opts.cost ?? 0,
                 costState: opts.costState,
+                background: opts.background?.(),
                 input,
                 cursorPos,
                 placeholder,
@@ -180,6 +182,35 @@ export function askPrompt(opts = {}) {
             render();
         };
         process.stdout.on('resize', onResize);
+        const unsubscribeOwner = opts.subscribe?.((kind) => {
+            if (disposed)
+                return;
+            if (kind === 'redraw') {
+                render();
+                return;
+            }
+            // News for the model: close the prompt, the owner starts a turn. What was typed is kept.
+            if (cleanLayout)
+                eraseFrame();
+            else
+                process.stdout.write(`\x1b[0m\r\x1b[2K`);
+            cleanup();
+            resolve(`__WAKE__:${input}`);
+        });
+        /** Up / down inside a text that wraps onto several rows; false when there is no row to go to (history takes over). */
+        function moveInInput(dir) {
+            if (!cleanLayout)
+                return false;
+            let to = moveCursorRow(input, cursorPos, process.stdout.columns || 80, dir);
+            if (to === null)
+                return false;
+            // Never land inside an attachment tag: go to its start.
+            const inside = getTagSpans().find((sp) => to > sp.start && to < sp.end);
+            if (inside)
+                to = inside.start;
+            cursorPos = to;
+            return true;
+        }
         function getTagSpans() {
             const spans = [];
             const regex = new RegExp(`\\[Pasted text #\\d+ \\+\\d+ lines\\]|${IMAGE_TAG_SOURCE}`, 'g');
@@ -505,6 +536,7 @@ export function askPrompt(opts = {}) {
         render();
         function cleanup() {
             disposed = true;
+            unsubscribeOwner?.();
             if (process.stdout.isTTY) {
                 process.stdout.write('\x1b[?2004l');
             }
@@ -696,6 +728,9 @@ export function askPrompt(opts = {}) {
                     selectedIndex = Math.max(0, selectedIndex - 1); // stops at the first item
                     render();
                 }
+                else if (moveInInput(-1)) {
+                    render();
+                }
                 else {
                     const prev = historyNav.navigateUp(input);
                     if (prev !== null) {
@@ -712,6 +747,9 @@ export function askPrompt(opts = {}) {
                     selectedIndex = Math.min(items.length - 1, selectedIndex + 1); // stops at the last item
                     render();
                 }
+                else if (moveInInput(1)) {
+                    render();
+                }
                 else {
                     const next = historyNav.navigateDown();
                     if (next !== null) {

package/dist/cli/transcript.js

@@ -5,6 +5,8 @@ import { palette, renderPlanCard, renderResultLine, renderTaskCard, renderToolLi
 import { displayWidth, truncateWidth, wrapText } from './width.js';
 import { t } from '../core/i18n.js';
 const MAX_ECHO_LINES = 300;
+/** What /compact puts in front of the summary it keeps as the first message. */
+export const COMPACT_MARK = '[CONVERSATION COMPACTED]';
 /** The rows under a tool line: a plan card, a diff, or the output (one row folded, all of it unfolded). */
 export function toolResultRows(name, result, opts) {
     const { cols } = opts;
@@ -49,6 +51,20 @@ function thoughtRows(item, opts) {
     const body = item.text.trim().split('\n').flatMap((line) => (line.trim() === '' ? [''] : wrapText(line, Math.max(20, opts.cols - 8))));
     return [palette.muted(`  ∴ ${t('status.thinkingLine')}`), ...body.map((l) => bar + palette.muted(l)), palette.faint(`  ╰ ${summary}`)];
 }
+/** The line that follows /compact: folded it says the summary can be opened, unfolded it shows what the model wrote. */
+export function compactRows(summary, opts) {
+    const done = t('compact.done');
+    if (!opts.outputExpanded) {
+        const room = Math.max(10, opts.cols - 1 - 4);
+        const hint = `  (${t('view.expandOutput')})`;
+        const text = displayWidth(done + hint) <= room ? palette.text(done) + palette.faint(hint) : palette.text(truncateWidth(done, room));
+        return ['  ' + palette.ok('✓') + ' ' + text];
+    }
+    const bar = palette.faint('  │ ');
+    const body = summary.trim().split('\n').flatMap((line) => (line.trim() === '' ? [''] : wrapText(line, Math.max(20, opts.cols - 8))));
+    const head = '  ' + palette.ok('✓') + ' ' + palette.text(truncateWidth(done, Math.max(10, opts.cols - 5)));
+    return [head, palette.muted(`  ∴ ${truncateWidth(t('compact.summary'), Math.max(10, opts.cols - 6))}`), ...body.map((l) => bar + palette.muted(l)), palette.faint('  ╰')];
+}
 /** One item as terminal rows (without the blank row that separates it from its neighbour). */
 export function renderItem(item, opts) {
     switch (item.kind) {
@@ -67,6 +83,8 @@ export function renderItem(item, opts) {
                 rows.push(...toolResultRows(item.name, item.result, { cols: opts.cols, expanded: opts.outputExpanded, diffColors: opts.diffColors }));
             return rows;
         }
+        case 'compact':
+            return compactRows(item.summary, opts);
         default:
             return item.rows;
     }
@@ -98,7 +116,9 @@ export function messagesToItems(messages) {
             results.set(m.tool_call_id, m);
     const items = [];
     for (const m of messages) {
-        if (m.role === 'user')
+        if (m.role === 'user' && m.content.startsWith(COMPACT_MARK))
+            items.push({ kind: 'compact', summary: m.content.slice(m.content.indexOf('\n') + 1) });
+        else if (m.role === 'user')
             items.push({ kind: 'user', text: m.content.split('\n\n--- Attached Files ---')[0] });
         else if (m.role === 'assistant') {
             if (m.reasoning && m.reasoning.text.trim())

package/dist/cli/ui.js

@@ -74,12 +74,13 @@ export function formatDuration(ms) {
 }
 /** `/home/me/projects/app` → `~/projects/app`, shortened from the left to fit `max` cells. */
 export function shortenPath(p, max, home = os.homedir()) {
-    let s = p;
-    if (s === home)
+    const slashed = (v) => v.split(path.sep).join('/').replace(/\\/g, '/');
+    let s = slashed(p);
+    const h = slashed(home).replace(/\/+$/, '');
+    if (s === h)
         s = '~';
-    else if (s.startsWith(home + path.sep))
-        s = '~' + s.slice(home.length);
-    s = s.split(path.sep).join('/');
+    else if (h && s.startsWith(h + '/'))
+        s = '~' + s.slice(h.length);
     if (displayWidth(s) <= max)
         return s;
     const parts = s.split('/');
@@ -180,6 +181,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);
@@ -241,6 +253,114 @@ 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);
+}
+/** 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;
+        while (i < cps.length) {
+            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 (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 });
+    }
+    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(/[\x00-\x1f\x7f]/g, ' ');
+    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('')));
+    return { rows: shown, firstRow, cursorRow: cursorRow - firstRow, cursorCol: cursorCell };
+}
 function keyHints(cols, mode) {
     const next = mode === 'plan' ? 'agent' : 'plan';
     const all = [
@@ -294,16 +414,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)));
@@ -315,7 +433,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('*') : ''}` : '';
@@ -324,6 +445,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)))) +
@@ -331,7 +455,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.
@@ -344,23 +468,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) {
@@ -613,7 +740,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)];
     }
@@ -647,6 +774,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());

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');

package/dist/cli/welcome.js

@@ -0,0 +1,56 @@
+import { DEVX_LOGO } from './logo.js';
+import { palette } from './ui.js';
+import { displayWidth, padEndWidth, truncateWidth, wrapWords } from './width.js';
+import { t } from '../core/i18n.js';
+const LOGO = DEVX_LOGO;
+/** The steps of the first run, in the order they are asked. */
+export const SETUP_STEPS = ['welcome.step.language', 'welcome.step.theme', 'welcome.step.provider', 'welcome.step.key', 'welcome.step.model'];
+/** The card shown when devx is opened for the first time. `done` steps are ticked, the next one is highlighted. */
+export function renderWelcome(version, cols, done = 0) {
+    const steps = SETUP_STEPS.map((key, i) => {
+        const label = t(key);
+        if (i < done)
+            return palette.ok('✓') + ' ' + palette.muted(label);
+        if (i === done)
+            return palette.accent(String(i + 1)) + ' ' + palette.bold(palette.text(label));
+        return palette.faint(String(i + 1)) + ' ' + palette.faint(label);
+    });
+    if (cols < 60) {
+        const width = Math.max(20, cols - 2);
+        const lines = ['', ...LOGO.map((l) => ' ' + palette.bold(palette.accent(l))), ' ' + palette.faint(`v${version}`), ''];
+        for (const line of wrapWords(t('welcome.tagline'), width))
+            lines.push(' ' + palette.text(line));
+        lines.push('');
+        for (const s of steps)
+            lines.push(' ' + s);
+        lines.push('');
+        return lines;
+    }
+    const W = Math.min(cols - 1, 76);
+    const iw = W - 4;
+    const rule = palette.rule;
+    const box = (content) => rule('│') + ' ' + padEndWidth(content, iw) + ' ' + rule('│');
+    const head = ' ' + palette.bold(palette.accent('devx')) + ' ';
+    const ver = ' ' + palette.faint(`v${version}`) + ' ';
+    const lines = [rule('╭─') + head + rule('─'.repeat(Math.max(0, W - 4 - displayWidth(head) - displayWidth(ver)))) + ver + rule('─╮'), box('')];
+    for (const l of LOGO)
+        lines.push(box('  ' + palette.bold(palette.accent(l))));
+    lines.push(box(''));
+    for (const line of wrapWords(t('welcome.tagline'), iw - 4))
+        lines.push(box('  ' + palette.bold(palette.text(line))));
+    for (const line of wrapWords(t('welcome.intro'), iw - 4))
+        lines.push(box('  ' + palette.muted(line)));
+    lines.push(box(''));
+    const row = (sep) => '  ' + steps.join(palette.faint(sep));
+    const sep = [row('  ·  '), row(' · ')].find((r) => displayWidth(r) <= iw);
+    if (sep)
+        lines.push(box(sep));
+    else
+        for (const step of steps)
+            lines.push(box('  ' + step));
+    lines.push(box(''));
+    for (const line of wrapWords(t('welcome.keyNote'), iw - 4))
+        lines.push(box('  ' + palette.faint(truncateWidth(line, iw - 4))));
+    lines.push(rule('╰' + '─'.repeat(W - 2) + '╯'));
+    return lines;
+}