termux-dev 1.5.0 → 1.8.0

package/dist/cli/prompt_palette.js

@@ -7,6 +7,12 @@ export function filterCommandPalette(query, commands) {
     return commands.filter((c) => {
         const name = c.cmd.toLowerCase().replace(/^\//, '');
         return name.includes(q) || c.desc.toLowerCase().includes(q);
+    }).sort((a, b) => {
+        const rank = (cmd) => {
+            const name = cmd.toLowerCase().replace(/^\//, '');
+            return name.startsWith(q) ? 0 : name.includes(q) ? 1 : 2;
+        };
+        return rank(a.cmd) - rank(b.cmd);
     });
 }
 export function estimatePromptTokens(text) {

package/dist/cli/resume.js

@@ -0,0 +1,15 @@
+import { palette, renderNotice } from './ui.js';
+import { displayWidth, truncateWidth } from './width.js';
+import { messagesToItems, renderTranscript } from './transcript.js';
+export function renderResumedMessages(messages, info) {
+    const { cols } = info;
+    const label = info.title.replace(/\s+/g, ' ').trim();
+    const count = info.total > info.shown ? `${info.shown} / ${info.total}` : String(info.total);
+    const head = `  ${palette.faint('╌')} ${palette.muted(truncateWidth(label, Math.max(10, cols - 14 - displayWidth(count))))}  ${palette.faint(count)}`;
+    const body = renderTranscript(messagesToItems(messages), {
+        cols,
+        thinkingExpanded: !!info.thinkingExpanded,
+        outputExpanded: !!info.outputExpanded,
+    });
+    return ['', head, '', ...body, '', renderNotice('ok', `resumed · ${info.total} messages`, cols), ''];
+}

package/dist/cli/rewind.js

@@ -0,0 +1,51 @@
+import { truncateWidth } from './width.js';
+import { t } from '../core/i18n.js';
+/**
+ * /rewind: go back to one of your own messages. The conversation after it is removed (the model
+ * forgets it too), and the message comes back into the input line to be edited.
+ */
+export const REWIND_CURRENT = -1;
+/** "5 minutes ago" in the chosen language; empty when the message has no time (an old session). */
+export function timeAgo(at, now = Date.now()) {
+    if (!at || !Number.isFinite(at))
+        return '';
+    const seconds = Math.max(0, Math.round((now - at) / 1000));
+    if (seconds < 60)
+        return t('rewind.ago.now');
+    const minutes = Math.round(seconds / 60);
+    if (minutes < 60)
+        return t('rewind.ago.min', { n: minutes });
+    const hours = Math.round(minutes / 60);
+    if (hours < 24)
+        return t('rewind.ago.hour', { n: hours });
+    return t('rewind.ago.day', { n: Math.round(hours / 24) });
+}
+/** What of a user message is shown: its first line, without the files that were attached to it. */
+export function messageLabel(content, max = 52) {
+    const typed = content.split('\n\n--- Attached Files ---')[0];
+    const first = typed.split('\n').map((l) => l.trim()).find((l) => l.length > 0) ?? '';
+    return truncateWidth(first.replace(/\s+/g, ' '), max);
+}
+/** The text that goes back into the input line. */
+export function messageDraft(content) {
+    return content.split('\n\n--- Attached Files ---')[0].trim();
+}
+export function userEntries(messages) {
+    const out = [];
+    messages.forEach((message, index) => {
+        if (message.role === 'user')
+            out.push({ index, message });
+    });
+    return out;
+}
+/** The items of the menu: your messages, oldest first, and "(current)" last, where the cursor starts. */
+export function rewindItems(messages, now = Date.now()) {
+    const entries = userEntries(messages);
+    const items = entries.map((e, n) => {
+        const later = entries.length - 1 - n;
+        const parts = [timeAgo(e.message.at, now), later > 0 ? t('rewind.later', { n: later }) : ''].filter(Boolean);
+        return { value: e.index, label: messageLabel(e.message.content), detail: parts.join(' · ') };
+    });
+    items.push({ value: REWIND_CURRENT, label: t('rewind.current'), detail: '' });
+    return items;
+}

package/dist/cli/runtime_errors.js

@@ -0,0 +1,6 @@
+export function reportRuntimeError(error, abort = null) {
+    const details = error instanceof Error ? error.stack || error.message : String(error);
+    console.error('\n[devx runtime error]:', details);
+    process.exitCode = 1;
+    abort?.();
+}

package/dist/cli/server.js

@@ -3,6 +3,7 @@ import fs from 'fs/promises';
 import fsSync from 'fs';
 import path from 'path';
 import os from 'os';
+import net from 'net';
 import { spawn } from 'child_process';
 import pc from 'picocolors';
 import qrcode from 'qrcode-terminal';
@@ -62,10 +63,57 @@ export function stopServer() {
     }
     return false;
 }
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+const BLOCKED_EXTENSIONS = new Set(['.pem', '.key', '.p12', '.pfx', '.keystore', '.jks']);
+/** Names that must never be served: dotfiles, dependencies, keys and obvious secret stores. */
+export function isBlockedName(name) {
+    if (!name || name === '.')
+        return false;
+    const lower = name.toLowerCase();
+    return (lower.startsWith('.') ||
+        lower === 'node_modules' ||
+        BLOCKED_EXTENSIONS.has(path.extname(lower)) ||
+        /^id_(rsa|dsa|ecdsa|ed25519)/.test(lower) ||
+        /^(secrets?|credentials?)(\.[a-z0-9]+)*$/.test(lower));
+}
+/**
+ * Only answer requests addressed to an IP, localhost, a single-label host name or *.local.
+ * A public domain name in the Host header means a DNS-rebinding attempt from a web page.
+ */
+export function isAllowedHost(hostHeader) {
+    if (!hostHeader)
+        return false;
+    const host = hostHeader.startsWith('[')
+        ? hostHeader.slice(1, hostHeader.indexOf(']'))
+        : hostHeader.split(':')[0];
+    const lower = host.toLowerCase();
+    return net.isIP(lower) !== 0 || !lower.includes('.') || lower.endsWith('.local');
+}
+/** The real (symlink-resolved) location must stay inside the project and must not be a blocked file. */
+async function isServable(targetPath, cwd) {
+    try {
+        const [realTarget, realBase] = await Promise.all([fs.realpath(targetPath), fs.realpath(cwd)]);
+        const rel = path.relative(realBase, realTarget);
+        if (rel === '..' || rel.startsWith('..' + path.sep) || path.isAbsolute(rel))
+            return false;
+        return !rel.split(path.sep).some(isBlockedName);
+    }
+    catch {
+        return false;
+    }
+}
 function renderDirectoryHtml(dirPath, relPath, files, port) {
     const currentRel = relPath === '/' ? '' : relPath;
+    const safeRelPath = escapeHtml(relPath);
     const items = files
-        .filter(f => !f.name.startsWith('.') && f.name !== 'node_modules')
+        .filter(f => !isBlockedName(f.name))
         .sort((a, b) => {
         if (a.isDirectory() && !b.isDirectory())
             return -1;
@@ -75,44 +123,44 @@ function renderDirectoryHtml(dirPath, relPath, files, port) {
     })
         .map(f => {
         const isDir = f.isDirectory();
-        const href = `${currentRel}/${encodeURIComponent(f.name)}${isDir ? '/' : ''}`;
+        const href = escapeHtml(`${currentRel.split('/').map(encodeURIComponent).join('/')}/${encodeURIComponent(f.name)}${isDir ? '/' : ''}`);
         const ext = path.extname(f.name).toLowerCase();
-        let icon = isDir ? '📁' : '📄';
+        let icon = isDir ? '▸' : '·';
         let badge = '';
         if (ext === '.html' || ext === '.htm') {
-            icon = '🌐';
+            icon = '◆';
             badge = '<span class="badge">HTML</span>';
         }
         else if (['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'].includes(ext)) {
-            icon = '🖼️';
+            icon = '·';
         }
         else if (['.js', '.ts', '.tsx', '.jsx', '.json'].includes(ext)) {
-            icon = '⚡';
+            icon = '·';
         }
         else if (ext === '.css') {
-            icon = '🎨';
+            icon = '·';
         }
         return `
         <li>
           <a class="file-item" href="${href}">
             <span class="icon">${icon}</span>
-            <span class="name">${f.name}</span>
+            <span class="name">${escapeHtml(f.name)}</span>
             ${badge}
-            <span class="type">${isDir ? 'Directory' : ext || 'File'}</span>
+            <span class="type">${isDir ? 'Directory' : escapeHtml(ext) || 'File'}</span>
           </a>
         </li>
       `;
     })
         .join('');
     const parentLink = currentRel && currentRel !== '/'
-        ? `<li><a class="file-item" href="${path.dirname(currentRel) === '/' ? '/' : path.dirname(currentRel) + '/'}"><span class="icon">⬆️</span><span class="name">.. (Parent Directory)</span></a></li>`
+        ? `<li><a class="file-item" href="${escapeHtml((path.posix.dirname(currentRel) === '/' ? '/' : path.posix.dirname(currentRel) + '/').split('/').map(encodeURIComponent).join('/'))}"><span class="icon">↑</span><span class="name">.. (Parent Directory)</span></a></li>`
         : '';
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>devx Live Preview &bull; ${relPath}</title>
+  <title>devx Live Preview &bull; ${safeRelPath}</title>
   <style>
     * { box-sizing: border-box; }
     body { background: #0a0a0c; color: #e1e4e8; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace; margin: 0; padding: 24px 16px; }
@@ -132,9 +180,9 @@ function renderDirectoryHtml(dirPath, relPath, files, port) {
 </head>
 <body>
   <div class="card">
-    <h1>⚡ devx Live Preview</h1>
+    <h1>devx Live Preview</h1>
     <div class="info">
-      Path: <code>${relPath}</code> &bull; Port: <code>${port}</code>
+      Path: <code>${safeRelPath}</code> &bull; Port: <code>${port}</code>
     </div>
     <ul>
       ${parentLink}
@@ -153,20 +201,32 @@ export async function startServer(preferredPort = 3000) {
     return new Promise((resolve, reject) => {
         const server = http.createServer(async (req, res) => {
             try {
+                // Security check: a public domain name here is a DNS-rebinding attempt.
+                if (!isAllowedHost(req.headers.host)) {
+                    res.writeHead(403, { 'Content-Type': 'text/plain' });
+                    res.end('Forbidden: unexpected Host header');
+                    return;
+                }
                 let rawPath = req.url?.split('?')[0] || '/';
                 let reqPath = decodeURIComponent(rawPath);
                 const cwd = process.cwd();
                 let targetPath = path.resolve(cwd, '.' + reqPath);
                 // Security check: ensure path is within cwd
                 const rel = path.relative(cwd, targetPath);
-                if (rel.startsWith('..') || path.isAbsolute(rel)) {
+                if (rel === '..' || rel.startsWith('..' + path.sep) || path.isAbsolute(rel)) {
                     res.writeHead(403, { 'Content-Type': 'text/plain' });
                     res.end('Forbidden');
                     return;
                 }
-                // Security check: block dotfiles, hidden directories (.env, .git, etc.) and node_modules
+                // Security check: block dotfiles, hidden directories (.env, .git, etc.), node_modules, keys and secret stores
                 const segments = reqPath.split(/[\/\\]/).filter(Boolean);
-                if (segments.some(seg => (seg.startsWith('.') && seg !== '.') || seg === 'node_modules')) {
+                if (segments.some(isBlockedName)) {
+                    res.writeHead(403, { 'Content-Type': 'text/plain' });
+                    res.end('Forbidden');
+                    return;
+                }
+                // Security check: symlinks must not lead out of the project or to a blocked file
+                if (fsSync.existsSync(targetPath) && !(await isServable(targetPath, cwd))) {
                     res.writeHead(403, { 'Content-Type': 'text/plain' });
                     res.end('Forbidden');
                     return;
@@ -184,11 +244,10 @@ export async function startServer(preferredPort = 3000) {
                             path.join(targetPath, 'build/index.html')
                         ];
                         for (const idxPath of possibleIndexes) {
-                            if (fsSync.existsSync(idxPath)) {
+                            if (fsSync.existsSync(idxPath) && await isServable(idxPath, cwd)) {
                                 const content = await fs.readFile(idxPath);
                                 res.writeHead(200, {
                                     'Content-Type': 'text/html; charset=utf-8',
-                                    'Access-Control-Allow-Origin': '*'
                                 });
                                 res.end(content);
                                 return;
@@ -199,7 +258,6 @@ export async function startServer(preferredPort = 3000) {
                         const dirHtml = renderDirectoryHtml(targetPath, reqPath, dirents, activePort);
                         res.writeHead(200, {
                             'Content-Type': 'text/html; charset=utf-8',
-                            'Access-Control-Allow-Origin': '*'
                         });
                         res.end(dirHtml);
                         return;
@@ -209,6 +267,11 @@ export async function startServer(preferredPort = 3000) {
                 if (!fsSync.existsSync(targetPath)) {
                     const withHtml = `${targetPath}.html`;
                     if (fsSync.existsSync(withHtml)) {
+                        if (!(await isServable(withHtml, cwd))) {
+                            res.writeHead(403, { 'Content-Type': 'text/plain' });
+                            res.end('Forbidden');
+                            return;
+                        }
                         targetPath = withHtml;
                     }
                 }
@@ -219,7 +282,6 @@ export async function startServer(preferredPort = 3000) {
                     const content = await fs.readFile(targetPath);
                     res.writeHead(200, {
                         'Content-Type': contentType,
-                        'Access-Control-Allow-Origin': '*'
                     });
                     res.end(content);
                     return;
@@ -228,11 +290,10 @@ export async function startServer(preferredPort = 3000) {
                 const hasAssetExt = path.extname(reqPath).length > 0;
                 if (!hasAssetExt) {
                     const rootIndex = path.join(cwd, 'index.html');
-                    if (fsSync.existsSync(rootIndex)) {
+                    if (fsSync.existsSync(rootIndex) && await isServable(rootIndex, cwd)) {
                         const content = await fs.readFile(rootIndex);
                         res.writeHead(200, {
                             'Content-Type': 'text/html; charset=utf-8',
-                            'Access-Control-Allow-Origin': '*'
                         });
                         res.end(content);
                         return;
@@ -297,7 +358,7 @@ export async function displayServerBanner(localUrl, networkUrl) {
     const cols = Math.min(process.stdout.columns || 80, 80);
     const cardWidth = Math.max(36, Math.min(cols - 4, 66));
     const innerWidth = cardWidth - 2;
-    const title = ' 🌐 Live Web Preview ';
+    const title = ' Live Web Preview ';
     const topFill = Math.max(2, cardWidth - 3 - title.length);
     console.log('\n' + th.colorFn('┌─') + pc.bold(title) + th.colorFn('─'.repeat(topFill) + '┐'));
     const printRow = (content) => {
@@ -308,7 +369,7 @@ export async function displayServerBanner(localUrl, networkUrl) {
     printRow(`  ${pc.bold('Local:')}   ${pc.cyan(localUrl)}`);
     printRow(`  ${pc.bold('Network:')} ${pc.green(networkUrl)}`);
     printRow(' ');
-    printRow(`  ${pc.bold('📱 Mobile QR:')}`);
+    printRow(`  ${pc.bold('Mobile QR:')}`);
     if (qr) {
         const qrLines = qr.trim().split('\n');
         for (const ql of qrLines) {

package/dist/cli/settings.js

@@ -0,0 +1,307 @@
+import { LiveBlock } from './liveblock.js';
+import { splitKeys } from './keys.js';
+import { THEME_IDS, getTheme, renderSwatch, renderThemePreview } from './theme.js';
+import { palette } from './ui.js';
+import { displayWidth, padEndWidth, stripAnsi, truncateWidth, wrapText, wrapWords } from './width.js';
+import { LANGUAGE_IDS, languageName, t } from '../core/i18n.js';
+export { wrapWords };
+/**
+ * The settings screen: one panel that is redrawn in place (nothing piles up in the
+ * scrollback), moves with the arrow keys without wrapping around at the ends, and applies
+ * every change immediately, so a theme can be judged on the panel itself.
+ *
+ * Rendering is a pure function of the state; `runSettings` only adds the keyboard.
+ */
+export const ITERATION_STEPS = [10, 20, 30, 50, 100, 200, 500, 9999];
+/** Limits for the cost of a session, in USD; 0 is no limit. */
+export const COST_LIMIT_STEPS = [0, 0.5, 1, 2, 5, 10, 20, 50];
+function row(key, sectionKey, kind) {
+    return {
+        key,
+        sectionKey,
+        kind,
+        get section() { return t(`settings.section.${sectionKey}`); },
+        get label() { return t(`settings.row.${key}`); },
+        get short() { return t(`settings.short.${key}`); },
+    };
+}
+export const ROWS = [
+    row('theme', 'appearance', 'choice'),
+    row('layout', 'appearance', 'choice'),
+    row('pureBlack', 'appearance', 'toggle'),
+    row('autoApprove', 'agent', 'toggle'),
+    row('maxIterations', 'agent', 'choice'),
+    row('memory', 'agent', 'toggle'),
+    row('updates', 'agent', 'toggle'),
+    row('costLimit', 'agent', 'choice'),
+    row('language', 'general', 'choice'),
+    row('about', 'about', 'info'),
+];
+const hintFor = (key) => t(`settings.hint.${key}`);
+function cycle(items, current, direction) {
+    const index = items.indexOf(current);
+    if (index === -1)
+        return items[direction === 1 ? 0 : items.length - 1];
+    return items[(index + direction + items.length) % items.length];
+}
+/** Closest step of the iteration list, for values set by hand in the config file. */
+function nearestStep(value) {
+    return ITERATION_STEPS.reduce((best, step) => (Math.abs(step - value) < Math.abs(best - value) ? step : best), ITERATION_STEPS[0]);
+}
+/**
+ * Applies one key press to a setting. Left/right move through the values of a choice;
+ * toggles flip whichever way you press. The input state is never modified.
+ */
+export function changeSetting(state, key, direction) {
+    switch (key) {
+        case 'theme':
+            return { ...state, themeId: cycle(THEME_IDS, getTheme(state.themeId).id, direction) };
+        case 'layout':
+            return { ...state, layout: state.layout === 'clean' ? 'classic' : 'clean' };
+        case 'maxIterations': {
+            const current = ITERATION_STEPS.includes(state.maxIterations) ? state.maxIterations : nearestStep(state.maxIterations);
+            return { ...state, maxIterations: cycle(ITERATION_STEPS, current, direction) };
+        }
+        case 'pureBlack':
+            return { ...state, pureBlack: !state.pureBlack };
+        case 'autoApprove':
+            return { ...state, autoApprove: !state.autoApprove };
+        case 'memory':
+            return { ...state, memory: !state.memory };
+        case 'updates':
+            return { ...state, updates: !state.updates };
+        case 'costLimit': {
+            const current = COST_LIMIT_STEPS.reduce((best, step) => (Math.abs(step - state.costLimit) < Math.abs(best - state.costLimit) ? step : best), COST_LIMIT_STEPS[0]);
+            return { ...state, costLimit: cycle(COST_LIMIT_STEPS, current, direction) };
+        }
+        case 'language':
+            return { ...state, language: cycle(LANGUAGE_IDS, LANGUAGE_IDS.includes(state.language) ? state.language : LANGUAGE_IDS[0], direction) };
+        default:
+            return state;
+    }
+}
+/** 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));
+}
+// ───────────────────────── rendering ─────────────────────────
+const LABEL_WIDTH = 21;
+const SHORT_LABEL_WIDTH = 11;
+/** A column wide enough for the longest label of the current language (never narrower than the English one). */
+const labelColumn = (pick, least, most) => Math.min(most, Math.max(least, ...ROWS.map((r) => displayWidth(pick(r)))));
+function formatIterations(n) {
+    return n >= 9999 ? t('settings.value.unlimited') : t('settings.value.steps', { n });
+}
+function onOff(on, onColor = palette.ok, glyph = '●') {
+    return on ? onColor(`${glyph} ${t('settings.value.on')}`) : palette.faint(`○ ${t('settings.value.off')}`);
+}
+/** The current value of a row, styled; `room` is the number of cells available. */
+function valueText(key, state, version, room, withSwatch) {
+    switch (key) {
+        case 'theme': {
+            const theme = getTheme(state.themeId);
+            const swatch = withSwatch ? renderSwatch(theme) + '  ' : theme.tokens.accent(theme.symbol) + ' ';
+            const used = withSwatch ? 9 : 2;
+            return swatch + palette.text(truncateWidth(theme.name, Math.max(4, room - used)));
+        }
+        case 'layout':
+            return palette.text(state.layout === 'clean' ? t('settings.value.clean') : t('settings.value.classic'));
+        case 'pureBlack':
+            return onOff(state.pureBlack);
+        case 'autoApprove':
+            return onOff(state.autoApprove, palette.yolo, '▲');
+        case 'maxIterations':
+            return palette.text(formatIterations(state.maxIterations));
+        case 'memory':
+            return onOff(state.memory);
+        case 'updates':
+            return onOff(state.updates);
+        case 'costLimit':
+            return state.costLimit > 0 ? palette.text(`$${state.costLimit}`) : palette.faint(`○ ${t('settings.value.off')}`);
+        case 'language':
+            return palette.text(truncateWidth(languageName(state.language), Math.max(4, room)));
+        case 'about':
+            return palette.muted(`v${version}`);
+    }
+}
+/** Help text under the list: what the focused setting does, plus a live preview for themes. */
+function detailLines(state, key, width, maxLines, version) {
+    if (maxLines <= 0)
+        return [];
+    if (key === 'theme') {
+        const theme = getTheme(state.themeId);
+        // The sample lines are styled; on a very narrow screen they are cut (and lose their colour).
+        const preview = renderThemePreview(theme).split('\n').map((line) => (displayWidth(line) <= width ? line : truncateWidth(stripAnsi(line), width)));
+        return [palette.muted(truncateWidth(`${theme.name}: ${theme.desc}`, width)), ...preview].slice(0, maxLines);
+    }
+    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 hintRows = Math.max(1, maxLines - (warning ? 1 : 0));
+    let wrapped = wrapText(hint, width);
+    if (wrapped.length > hintRows) {
+        wrapped = wrapped.slice(0, hintRows);
+        wrapped[hintRows - 1] = truncateWidth(wrapped[hintRows - 1], width - 1).replace(/…$/, '') + '…';
+    }
+    const out = wrapped.map((line) => palette.muted(line));
+    if (warning && out.length < maxLines)
+        out.push(palette.yolo(truncateWidth(warning, width)));
+    return out;
+}
+/** The key hints, shortened step by step until they fit `width` cells. */
+function keyHints(width) {
+    const variants = [
+        [['↑↓', t('settings.keys.move')], ['←→', t('settings.keys.change')], ['enter', t('settings.keys.toggle')], ['esc', t('settings.keys.close')]],
+        [['↑↓', t('settings.keys.move')], ['←→', t('settings.keys.change')], ['esc', t('settings.keys.close')]],
+        [['↑↓', ''], ['←→', ''], ['esc', '']],
+        [['esc', '']],
+    ];
+    for (const items of variants) {
+        const text = items.map(([k, label]) => palette.text(k) + (label ? ' ' + palette.faint(label) : '')).join(palette.faint(items[0][1] ? ' · ' : ' '));
+        if (displayWidth(text) <= width)
+            return text;
+    }
+    return '';
+}
+function renderCard(state, focus, cols, density, version) {
+    const W = Math.min(cols - 1, 76);
+    const iw = W - 4;
+    const rule = palette.rule;
+    const maxDetail = density === 'roomy' ? 5 : 4;
+    const lines = [];
+    const box = (content, shaded = false) => rule('│') + (shaded ? palette.shade(' ' + padEndWidth(content, iw) + ' ') : ' ' + padEndWidth(content, iw) + ' ') + rule('│');
+    const title = ' ' + palette.bold(palette.accent(t('settings.title'))) + ' ';
+    const tag = ' ' + palette.faint(`devx v${version}`) + ' ';
+    const fill = Math.max(0, W - 4 - displayWidth(title) - displayWidth(tag));
+    lines.push(rule('╭─') + title + rule('─'.repeat(fill)) + tag + rule('─╮'));
+    if (density === 'roomy')
+        lines.push(box(''));
+    const labelWidth = labelColumn((r) => r.label, LABEL_WIDTH, Math.floor(iw / 2));
+    let section = '';
+    ROWS.forEach((row, index) => {
+        if (row.sectionKey !== section) {
+            if (section !== '' && density === 'roomy')
+                lines.push(box(''));
+            section = row.sectionKey;
+            lines.push(box('  ' + palette.faint(row.section.toUpperCase())));
+        }
+        const focused = index === focus;
+        const mark = focused ? palette.accent('❯') : ' ';
+        const label = focused ? palette.bold(palette.text(row.label)) : palette.muted(row.label);
+        const control = row.kind === 'choice' ? (focused ? palette.accent('‹ ›') : palette.faint('‹ ›')) : '';
+        const prefix = ` ${mark} ${padEndWidth(label, labelWidth)}`;
+        const room = iw - displayWidth(prefix) - 4;
+        const left = prefix + valueText(row.key, state, version, room, true);
+        const gap = Math.max(1, iw - displayWidth(left) - displayWidth(control) - 1);
+        lines.push(box(left + ' '.repeat(gap) + control, focused));
+    });
+    if (density === 'roomy')
+        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);
+    for (let i = 0; i < maxDetail; i++)
+        lines.push(box(detail[i] ? '  ' + detail[i] : ''));
+    lines.push(rule('╰' + '─'.repeat(W - 2) + '╯'));
+    lines.push(' ' + keyHints(cols - 2));
+    return lines;
+}
+function renderCompact(state, focus, cols, rows, version) {
+    const width = Math.max(20, cols - 1);
+    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 focused = index === focus;
+        const mark = focused ? palette.accent('❯') : ' ';
+        const label = focused ? palette.bold(palette.text(row.short)) : palette.muted(row.short);
+        const prefix = ` ${mark} ${padEndWidth(label, shortWidth)}`;
+        const room = Math.max(4, width - displayWidth(prefix) - 1);
+        const content = prefix + valueText(row.key, state, version, room, false);
+        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);
+    for (let i = 0; i < detailCount; i++)
+        lines.push(detail[i] ? ' ' + detail[i] : '');
+    lines.push(' ' + keyHints(width - 1));
+    return lines;
+}
+/**
+ * The whole panel as terminal rows. Wide terminals get a framed card (roomy or tight
+ * depending on the height), narrow ones a plain list.
+ */
+export function renderSettings(state, focus, cols, rows, version) {
+    if (cols < 60 || rows < 23)
+        return renderCompact(state, focus, cols, rows, version);
+    return renderCard(state, focus, cols, rows >= 29 ? 'roomy' : 'tight', version);
+}
+/**
+ * Shows the panel and resolves with the final state when it is closed (Esc, q or Ctrl+C).
+ * The panel is erased on close.
+ */
+export function runSettings(initial, options) {
+    return new Promise((resolve) => {
+        const { input, output } = options.io ?? { input: process.stdin, output: process.stdout };
+        const block = new LiveBlock(output);
+        let state = { ...initial };
+        let focus = 0;
+        const draw = () => block.draw(renderSettings(state, focus, output.columns || 80, output.rows || 30, options.version));
+        const wasRaw = !!input.isRaw;
+        input.setRawMode?.(true);
+        input.resume();
+        const change = (direction) => {
+            const next = changeSetting(state, ROWS[focus].key, direction);
+            if (next === state)
+                return;
+            state = next;
+            options.onChange?.(ROWS[focus].key, state);
+            draw();
+        };
+        const close = () => {
+            input.off('data', onData);
+            block.erase();
+            if (!wasRaw)
+                input.setRawMode?.(false);
+            resolve(state);
+        };
+        let closed = false;
+        const handleKey = (key) => {
+            const move = (delta) => {
+                const next = moveFocus(focus, delta);
+                if (next !== focus) {
+                    focus = next;
+                    draw();
+                }
+            };
+            if (key === '\x1b[A' || key === '\x1bOA' || key === 'k')
+                return move(-1);
+            if (key === '\x1b[B' || key === '\x1bOB' || key === 'j')
+                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);
+            if (key === '\x1b[F' || key === '\x1b[4~' || key === '\x1b[8~' || key === '\x1bOF' || key === 'G')
+                return move(ROWS.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')
+                return change(-1);
+            if (key === '\x1b' || key === 'q' || key === '\x03') {
+                closed = true;
+                return close();
+            }
+        };
+        // Several key presses can arrive in one chunk; handle them one by one.
+        const onData = (chunk) => {
+            for (const key of splitKeys(chunk.toString())) {
+                if (closed)
+                    return;
+                handleKey(key);
+            }
+        };
+        input.on('data', onData);
+        draw();
+    });
+}