zames_pro 2.83.2 → 2.84.0

package/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.84.0] - 2026-10-27
+
+### Added
+
+- **ui:** theme previews, 6 more palettes, inline /config preview
+
+## [2.83.4] - 2026-10-27
+
+### Fixed
+
+- **ui:** theme the input text, the status row and the input frame
+
 ## [2.83.2] - 2026-10-27
 
 ### Fixed

package/README.md

@@ -631,7 +631,16 @@ The switch is instant, no restart. `zames` is the default; the bundled palettes
 are ports of well-known editor schemes:
 
 `zames` (default), `one-dark`, `dracula`, `gruvbox`, `nord`, `monokai`,
-`solarized-dark`, `tokyo-night`.
+`solarized-dark`, `tokyo-night`, `catppuccin`, `github-dark`, `ayu`,
+`rose-pine`, `everforest`, `kanagawa`.
+
+A theme repaints EVERYTHING: the interface, the agent's answers, the code
+highlighting inside them, the status row and the input frame. To make the choice
+concrete, a SAMPLE SESSION in that palette is shown before you pick (in `/theme`
+below the list, in `/config` press `p` on the theme row); after
+`/theme <id>` the sample is printed too. The frame itself is a separate
+setting: `/config set ui.inputBorder <round|single|double|bold|none>`
+(default `round`; `none` removes it).
 
 Agent data is stored in `~/.zames`: browser profile, logs, undo history, sessions.
 
@@ -1354,7 +1363,16 @@ enum переключаются на месте; числа и строки от
 редакторов:
 
 `zames` (по умолчанию), `one-dark`, `dracula`, `gruvbox`, `nord`, `monokai`,
-`solarized-dark`, `tokyo-night`.
+`solarized-dark`, `tokyo-night`, `catppuccin`, `github-dark`, `ayu`,
+`rose-pine`, `everforest`, `kanagawa`.
+
+Тема перекрашивает ВСЁ: интерфейс, ответы агента, подсветку кода в ответах,
+строку статуса и рамку ввода. Чтобы было видно, ЧТО меняется, перед выбором
+показывается образец сессии в этой палитре (в `/theme` — под списком, в
+`/config` — клавиша `p` на строке темы). После применения `/theme <id>`
+образец печатается в терминал. Саму рамку можно менять отдельно:
+`/config set ui.inputBorder <round|single|double|bold|none>` (по умолчанию
+`round`, `none` — без рамки).
 
 Данные агента хранятся в `~/.zames`: профиль браузера, логи, история undo,
 сессии.

package/dist/config.js

@@ -134,6 +134,7 @@ export const DEFAULTS = {
     ui: {
         locale: DEFAULT_LOCALE,
         theme: DEFAULT_THEME,
+        inputBorder: 'round',
         contextLimit: 1_000_000,
         // 0 = auto: terminal width, capped at 100 columns (the historical width).
         answerWidth: 0,
@@ -291,6 +292,13 @@ export const CONFIG_SCHEMA = [
         labelKey: 'cfg.f.maxIterations',
         groupKey: 'cfg.group.agent',
     },
+    {
+        path: 'ui.inputBorder',
+        type: 'enum',
+        values: ['round', 'single', 'double', 'bold', 'none'],
+        labelKey: 'cfg.f.ui_inputBorder',
+        groupKey: 'cfg.group.ui',
+    },
     {
         path: 'ui.theme',
         type: 'enum',

package/dist/i18n/config.js

@@ -55,6 +55,10 @@ export const configMessages = {
         ru: 'Язык интерфейса и ответов агента',
         en: 'Interface and agent reply language',
     },
+    'cfg.f.ui_inputBorder': {
+        ru: 'Рамка строки ввода: round | single | double | bold | none',
+        en: 'Input box frame: round | single | double | bold | none',
+    },
     'cfg.f.ui_theme': {
         ru: 'Цветовая тема терминала',
         en: 'Terminal color theme',

package/dist/i18n/deepseek.js

@@ -212,6 +212,14 @@ export const deepseekMessages = {
         ru: '✔ Сохранено: {v} = {value}',
         en: '✔ Saved: {v} = {value}',
     },
+    'cfg.menu.theme_preview': {
+        ru: 'Так тема выглядит в работе:',
+        en: 'How the theme looks in a session:',
+    },
+    'cfg.menu.theme_preview_key': {
+        ru: 'пример темы',
+        en: 'theme sample',
+    },
     'cfg.menu.default': { ru: 'по умолчанию', en: 'default' },
     'cfg.menu.filter_hint': {
         ru: '/ — поиск по настройкам, d — сбросить (дважды), * — изменено от дефолта',

package/dist/index.js

@@ -5,6 +5,8 @@ import fs from 'fs/promises';
 import { readFileSync, statSync } from 'fs';
 import { fileURLToPath } from 'url';
 import { theme, applyTheme, themeColors, themeNames, currentThemeName, isThemeName, } from './theme.js';
+import { themePreviewAnsi } from './tui/theme-preview.js';
+import { setInputBorder } from './tui/ui-colors.js';
 import { DeepSeekBrowser, headlessUACacheReady } from './browser.js';
 import { QwenBrowser } from './qwen-browser.js';
 import { GlmBrowser } from './glm-browser.js';
@@ -123,6 +125,10 @@ setAnswerWidth(config.ui?.answerWidth ?? 0);
 // banner, startup notices): theme.ts starts on the default and every call site
 // reads the live object, so one apply here repaints the whole session.
 applyTheme(config.ui?.theme);
+// Same for the input-box FRAME style: the TUI reads it per render, so one
+// apply before the editor is created covers the first paint (a /config change
+// goes through setConfigRuntime below).
+setInputBorder(config.ui?.inputBorder);
 // Current interface/agent language. Changed by the /config lang <ru|en> command.
 let currentLocale = isLocale(config.ui?.locale)
     ? config.ui.locale
@@ -1943,6 +1949,11 @@ async function main() {
         // object is shared and mutated in place, so every later render uses it;
         // the editor is asked for a full redraw because the rows already on screen
         // (status, prompt, hints) were painted with the OLD colors.
+        if (path === 'ui.inputBorder') {
+            setInputBorder(value);
+            if (editor)
+                editor.setTheme?.(themeColors());
+        }
         if (path === 'ui.theme') {
             const applied = applyTheme(value);
             config.ui.theme = applied;
@@ -2176,8 +2187,9 @@ async function main() {
             // read the shared UI map, and without a bump the operator would cycle
             // palette ids while the colors stayed those of the previous one.
             onAfterChange: (field) => {
-                if (field.path === 'ui.theme')
+                if (field.path === 'ui.theme' || field.path === 'ui.inputBorder') {
                     editor?.setTheme?.(themeColors());
+                }
             },
             locale: currentLocale,
         };
@@ -2238,6 +2250,11 @@ async function main() {
                 return;
             }
             emit(theme.assistant(t('theme.set', { v: applyThemeById(arg) })));
+            // A terminal can only show colors it can paint, and the operator asked
+            // "what exactly changes?" — print a sample of every role in the new
+            // palette right below the confirmation.
+            emit('');
+            emit(themePreviewAnsi(arg));
             return;
         }
         // No argument: a pick list in the TUI, the id list otherwise. The cursor
@@ -2267,6 +2284,8 @@ async function main() {
             }
             if (picked) {
                 emit(theme.assistant(t('theme.set', { v: applyThemeById(picked) })));
+                emit('');
+                emit(themePreviewAnsi(picked));
             }
             else {
                 // Cancelled: the previews must not stick. Restore WITHOUT persisting.

package/dist/input/layout.js

@@ -353,24 +353,26 @@ export function truncateToWidth(s, maxCols) {
     const reset = out.includes(ESC + '[') ? ESC + '[0m' : '';
     return out + reset + '…';
 }
-// Inner content width of the framed input box: the rounded border takes 1
-// column on each side and the box adds 1 column of padding on each side, so
-// the text must wrap to `cols - 4`. Exported so the layout ABOVE the box
+// Inner content width of the framed input box: the border takes 1 column on
+// each side (2 total, 0 when ui.inputBorder is 'none') and the box adds
+// 1 column of padding on each side, so the text wraps to `cols - border - 2`. Exported so the layout ABOVE the box
 // (FullScreenApp) and the box itself (InputLine) use ONE number — a mismatch
 // made the reserved height disagree with the rendered rows and the panel
 // overflowed.
-export function inputInnerCols(cols) {
-    return Math.max(4, (Number(cols) || 80) - 4);
+export function inputInnerCols(cols, borderCols = 2) {
+    return Math.max(4, (Number(cols) || 80) - borderCols - 2);
 }
 // Real height (rows) of the framed input box for the CURRENT buffer: 2 border
 // rows + the number of VISUAL rows the buffer wraps to. Using the LOGICAL line
 // count (buf.split('\n').length) was wrong: a long line wraps and renders MORE
 // rows than it has newlines, so the box was reserved too few rows, the second
 // line printed OVER the first and the cursor landed on the wrong row.
-export function inputBoxRows(prompt, buf, cursor, cols) {
-    const inner = inputInnerCols(cols);
+export function inputBoxRows(prompt, buf, cursor, cols, borderCols = 2) {
+    const inner = inputInnerCols(cols, borderCols);
     const rows = layoutInput(prompt, buf, cursor, inner).rows.length;
-    return 2 + Math.max(1, rows);
+    // Two BORDER rows only when a frame is drawn ('none' reserves just the text).
+    const borderRows = borderCols > 0 ? 2 : 0;
+    return borderRows + Math.max(1, rows);
 }
 export function layoutInput(promptStr, buf, cursor, cols) {
     // Reserve the LAST column. If a printed row reaches exactly `cols` columns,

package/dist/theme.js

@@ -179,6 +179,134 @@ export const PALETTES = {
         brown: '#ff9e64',
         toggleOn: '#73daca',
     },
+    // Catppuccin Mocha — the soft pastel palette that took over the editor
+    // ecosystem (Neovim, VS Code, terminals).
+    catppuccin: {
+        bg: '#1e1e2e',
+        user: '#89b4fa',
+        userBar: '#5477a8',
+        turnRule: '#313244',
+        turnLabel: '#6c7086',
+        prompt: '#f9e2af',
+        dir: '#89dceb',
+        assistant: '#cdd6f4',
+        tool: '#fab387',
+        toolResult: '#a6adc8',
+        system: '#9399b2',
+        dim: '#6c7086',
+        taskSummary: '#89b4fa',
+        warn: '#f9e2af',
+        error: '#f38ba8',
+        success: '#a6e3a1',
+        brown: '#eba0ac',
+        toggleOn: '#94e2d5',
+    },
+    // GitHub Dark — the palette of GitHub's dark UI (familiar to anyone who
+    // reads diffs all day).
+    'github-dark': {
+        bg: '#0d1117',
+        user: '#58a6ff',
+        userBar: '#3a6ea8',
+        turnRule: '#21262d',
+        turnLabel: '#6e7681',
+        prompt: '#d29922',
+        dir: '#79c0ff',
+        assistant: '#c9d1d9',
+        tool: '#ffa657',
+        toolResult: '#8b949e',
+        system: '#8b949e',
+        dim: '#6e7681',
+        taskSummary: '#a5d6ff',
+        warn: '#d29922',
+        error: '#f85149',
+        success: '#3fb950',
+        brown: '#db6d28',
+        toggleOn: '#56d4dd',
+    },
+    // Ayu Dark — the minimal warm-accent scheme from the Ayu editor theme.
+    ayu: {
+        bg: '#0f1419',
+        user: '#59c2ff',
+        userBar: '#35789e',
+        turnRule: '#1f2430',
+        turnLabel: '#5c6773',
+        prompt: '#ffb454',
+        dir: '#59c2ff',
+        assistant: '#c7ccd1',
+        tool: '#ff8f40',
+        toolResult: '#a0a8b0',
+        system: '#8a9199',
+        dim: '#5c6773',
+        taskSummary: '#39bae6',
+        warn: '#ffb454',
+        error: '#f07178',
+        success: '#aad94c',
+        brown: '#e6b450',
+        toggleOn: '#95e6cb',
+    },
+    // Rosé Pine — muted rose-pine tones, a calmer alternative to Dracula.
+    'rose-pine': {
+        bg: '#191724',
+        user: '#9ccfd8',
+        userBar: '#5b8490',
+        turnRule: '#26233a',
+        turnLabel: '#6e6a86',
+        prompt: '#f6c177',
+        dir: '#9ccfd8',
+        assistant: '#e0def4',
+        tool: '#ebbcba',
+        toolResult: '#908caa',
+        system: '#908caa',
+        dim: '#6e6a86',
+        taskSummary: '#c4a7e7',
+        warn: '#f6c177',
+        error: '#eb6f92',
+        success: '#31748f',
+        brown: '#ebbcba',
+        toggleOn: '#9ccfd8',
+    },
+    // Everforest — the soft green forest palette (low contrast, easy on eyes).
+    everforest: {
+        bg: '#2d353b',
+        user: '#7fbbb3',
+        userBar: '#5a8b85',
+        turnRule: '#3d484d',
+        turnLabel: '#859289',
+        prompt: '#dbbc7f',
+        dir: '#7fbbb3',
+        assistant: '#d3c6aa',
+        tool: '#e69875',
+        toolResult: '#9da9a0',
+        system: '#859289',
+        dim: '#7a8478',
+        taskSummary: '#a7c080',
+        warn: '#dbbc7f',
+        error: '#e67e80',
+        success: '#a7c080',
+        brown: '#e69875',
+        toggleOn: '#83c092',
+    },
+    // Kanagawa — Hokusai-inspired muted indigo (the "wave" theme).
+    kanagawa: {
+        bg: '#1f1f28',
+        user: '#7e9cd8',
+        userBar: '#55709e',
+        turnRule: '#2a2a37',
+        turnLabel: '#727169',
+        prompt: '#e6c384',
+        dir: '#7fb4ca',
+        assistant: '#dcd7ba',
+        tool: '#ffa066',
+        toolResult: '#a6a69c',
+        system: '#c8c093',
+        dim: '#727169',
+        taskSummary: '#957fb8',
+        warn: '#e6c384',
+        error: '#e46876',
+        success: '#98bb6c',
+        brown: '#d27e59',
+        toggleOn: '#7aa89f',
+    },
 };
 /** The palette id used when the configured theme is unknown/missing. */
 export const DEFAULT_THEME = 'zames';

package/dist/tui/ConfigMenu.js

@@ -14,6 +14,7 @@ import { useMemo, useState } from 'react';
 import { Box, Text, useInput, useApp, useWindowSize } from 'ink';
 import { translate } from '../i18n.js';
 import { Checkbox, Select, UI, HintBar } from './widgets.js';
+import { ThemePreview } from './theme-preview.js';
 /** Strip ANSI to measure a line's visible width. */
 function stripAnsi(s) {
     return s.replace(/\x1b\[[0-9;?]*[A-Za-z]/g, '');
@@ -52,6 +53,8 @@ export function ConfigMenuApp(opts) {
     const [editBuf, setEditBuf] = useState('');
     const [pendingReset, setPendingReset] = useState(null);
     const [message, setMessage] = useState(null);
+    // Inline palette preview of the theme row ('p').
+    const [previewTheme, setPreviewTheme] = useState(false);
     // `get`/`set` mutate the LIVE config object in place, so React has no state
     // change to react to and the row kept the OLD value on screen after a
     // toggle/cycle (the operator saw «ru» while the config already held «en»).
@@ -216,12 +219,14 @@ export function ConfigMenuApp(opts) {
             setCursor((c) => visible.length ? (c - 1 + visible.length) % visible.length : 0);
             setPendingReset(null);
             setMessage(null);
+            setPreviewTheme(false);
             return;
         }
         if (key.downArrow || input === 'j') {
             setCursor((c) => (visible.length ? (c + 1) % visible.length : 0));
             setPendingReset(null);
             setMessage(null);
+            setPreviewTheme(false);
             return;
         }
         if (input === 'g') {
@@ -238,6 +243,30 @@ export function ConfigMenuApp(opts) {
             setMessage(null);
             return;
         }
+        if (input === 'p' || input === 'P') {
+            // Inline palette PREVIEW for the theme row: the settings list is where
+            // most operators meet ui.theme, and cycling the enum only shows the id.
+            // 'p' opens the sample session painted with the CURRENT palette, so the
+            // choice can be judged without leaving /config. Other rows: no-op.
+            const f = visible[cursor];
+            if (f && f.path === 'ui.theme') {
+                setPreviewTheme((v) => !v);
+                setMessage(null);
+                return;
+            }
+        }
+        if (input === 'p' || input === 'P') {
+            // Inline palette PREVIEW on the theme row: /config is where most
+            // operators meet ui.theme, and cycling the enum only shows the id. 'p'
+            // toggles a sample session painted with the CURRENT palette, so the
+            // choice can be judged without leaving the menu. Other rows: no-op.
+            const f = visible[cursor];
+            if (f && f.path === 'ui.theme') {
+                setPreviewTheme((v) => !v);
+                setMessage(null);
+                return;
+            }
+        }
         if (key.return || input === ' ') {
             activate();
             return;
@@ -336,10 +365,13 @@ export function ConfigMenuApp(opts) {
     if (!visible.length) {
         items.push(_jsx(Text, { color: UI.dim, children: '  ' + t('cfg.menu.no_match') }, "none"));
     }
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: UI.border, paddingX: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { bold: true, color: UI.title, children: t('cfg.menu.title') }), _jsx(Text, { color: UI.dim, children: (visible.length ? cursor + 1 : 0) + '/' + visible.length })] }), _jsx(Text, { color: UI.border, children: '─'.repeat(Math.max(10, (columns || 80) - 6)) }), items, _jsx(Text, { color: UI.border, children: '─'.repeat(Math.max(10, (columns || 80) - 6)) }), editing ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: UI.text, children: t('cfg.menu.edit_hint') }), _jsx(Text, { color: UI.accent, children: '❯ ' + editBuf })] })) : filterMode ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: UI.text, children: t('cfg.menu.filter_hint') }), _jsx(Text, { color: UI.accent, children: '❯ ' + filterQuery })] })) : message ? (_jsx(Text, { color: UI.ok, children: message })) : filterQuery ? (_jsx(Text, { color: UI.dim, children: t('cfg.menu.filter_active', { q: filterQuery }) })) : null, _jsx(HintBar, { hints: [
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: UI.border, paddingX: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { bold: true, color: UI.title, children: t('cfg.menu.title') }), _jsx(Text, { color: UI.dim, children: (visible.length ? cursor + 1 : 0) + '/' + visible.length })] }), _jsx(Text, { color: UI.border, children: '─'.repeat(Math.max(10, (columns || 80) - 6)) }), items, _jsx(Text, { color: UI.border, children: '─'.repeat(Math.max(10, (columns || 80) - 6)) }), previewTheme && visible[cursor]?.path === 'ui.theme' ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: UI.dim, children: t('cfg.menu.theme_preview') }), _jsx(ThemePreview, { name: String(get('ui.theme') ?? 'zames'), compact: true })] })) : null, editing ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: UI.text, children: t('cfg.menu.edit_hint') }), _jsx(Text, { color: UI.accent, children: '❯ ' + editBuf })] })) : filterMode ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: UI.text, children: t('cfg.menu.filter_hint') }), _jsx(Text, { color: UI.accent, children: '❯ ' + filterQuery })] })) : message ? (_jsx(Text, { color: UI.ok, children: message })) : filterQuery ? (_jsx(Text, { color: UI.dim, children: t('cfg.menu.filter_active', { q: filterQuery }) })) : null, _jsx(HintBar, { hints: [
                     ['↑/↓', hint('tui.hint.select')],
                     ['←/→', hint('tui.hint.change')],
                     ['Enter', hint('tui.hint.edit')],
+                    ...(visible[cursor]?.path === 'ui.theme'
+                        ? [['p', hint('cfg.menu.theme_preview_key')]]
+                        : []),
                     ['/', hint('tui.hint.search')],
                     ['d', hint('tui.hint.reset')],
                     ['q', hint('tui.hint.quit')],

package/dist/tui/FullScreenApp.js

@@ -20,7 +20,7 @@ import { suggestRowCount } from '../input/suggest.js';
 import { truncateToWidth, visLen } from '../input/layout.js';
 import { fullScreenLayout } from './layout.js';
 import { useMouseWheel } from './useMouseWheel.js';
-import { UI } from './ui-colors.js';
+import { UI, inputBorderCols } from './ui-colors.js';
 /** The header bar: title, version, working directory. */
 function Header({ store }) {
     const state = useSyncExternalStore(store.subscribe, store.getSnapshot);
@@ -65,6 +65,7 @@ export function FullScreenApp({ store, inputProps, }) {
         buf: state.edit.buf,
         cursor: state.edit.cursor,
         suggestRows: suggestRowCount(state.edit.buf, state.commands, cols),
+        borderCols: inputBorderCols(),
     });
     const logHeight = fsLayout.logHeight;
     // Window the log BY RENDERED ROW: a long wrapped answer can be taller than

package/dist/tui/InputLine.js

@@ -16,11 +16,11 @@ import { insertText, insertPaste, insertNewline, backspace, del, moveLeft, moveR
 import { dispatchKey, parseCsiU } from './keys.js';
 import { useSyncExternalStore } from 'react';
 import { matchSlashCommands, suggestWindow, completeSlashCommand, } from '../input/suggest.js';
-import { UI } from './ui-colors.js';
+import { UI, inputBorderStyle } from './ui-colors.js';
 /** Render the visual rows of the buffer with the prompt on the first row. */
 function InputRows({ prompt, buf, cols, }) {
     const lay = layoutInput(prompt, buf, 0, cols);
-    return (_jsx(Box, { flexDirection: "column", children: lay.rows.map((r, i) => (_jsxs(Text, { children: [_jsx(Text, { color: UI.accent, bold: true, children: r.prefix }), r.text] }, i))) }));
+    return (_jsx(Box, { flexDirection: "column", children: lay.rows.map((r, i) => (_jsxs(Text, { children: [_jsx(Text, { color: UI.accent, bold: true, children: r.prefix }), _jsx(Text, { color: UI.text, children: r.text })] }, i))) }));
 }
 export function InputLine(props) {
     const { columns } = useWindowSize();
@@ -49,7 +49,11 @@ export function InputLine(props) {
     // `Math.max(4, cols - 4)` here was one independent copy that could drift from
     // the reservation (the box then rendered more rows than were reserved and the
     // input rows overprinted the status bar).
-    const innerCols = inputInnerCols(cols);
+    // The frame style comes from ui.inputBorder (set live by /config): round
+    // (default), single, double, bold, none. Read per render so a switch applies
+    // immediately; 'none' also frees the two border columns for the text.
+    const borderStyle = inputBorderStyle();
+    const innerCols = inputInnerCols(cols, borderStyle ? 2 : 0);
     // Mirror the state into a ref so the useInput callback (a stable closure Ink
     // calls for every key) always sees the latest values.
     const stRef = useRef(st);
@@ -321,5 +325,5 @@ export function InputLine(props) {
                     }), moreCount > 0 && (_jsx(Text, { color: UI.dim, children: '   ' +
                             t('editor.more', { n: String(moreCount) }) +
                             '  ' +
-                            t('editor.page_hint') }))] })), _jsx(Box, { borderStyle: "round", borderColor: props.locked ? UI.dim : UI.accent, paddingLeft: 1, paddingRight: 1, flexDirection: "column", children: _jsx(InputRows, { prompt: props.prompt, buf: st.buf, cols: innerCols }) })] }));
+                            t('editor.page_hint') }))] })), _jsx(Box, { borderStyle: borderStyle, borderColor: props.locked ? UI.dim : UI.accent, paddingLeft: 1, paddingRight: 1, flexDirection: "column", children: _jsx(InputRows, { prompt: props.prompt, buf: st.buf, cols: innerCols }) })] }));
 }

package/dist/tui/StatusBar.js

@@ -115,12 +115,13 @@ function Badges({ state, budget = Infinity, }) {
     }
     return _jsx(_Fragment, { children: all.slice(start).map((b) => b.node) });
 }
-export function StatusBar({ state, divider = true, }) {
-    // Drive the spinner from Ink's shared animation timer (one timer for the
-    // whole tree). The interval matches the old 400ms dot cadence.
+/**
+ * The LEFT part of the status row (spinner/pause/scroll marker) as a string.
+ * Extracted from the component so the text and its rules are unit-testable
+ * without a terminal; the component only truncates and colorizes it.
+ */
+export function statusLeftText(state, t, frame = 0) {
     const animating = state.busy || !!state.animBase;
-    const { frame } = useAnimation({ interval: 400, isActive: animating });
-    const t = translate(state.locale);
     const stateLbl = stateLabel(state, state.locale);
     let left;
     if (state.pendingText) {
@@ -147,20 +148,31 @@ export function StatusBar({ state, divider = true, }) {
     // When the log is scrolled up, show a marker in the status line (NOT as a
     // separate row below the input — that pushed the panel up and made the input
     // jump). It replaces the spinner text while scrolled, so it never adds a row.
+    // It carries NO timer: the elapsed label belongs to an animation, and a
+    // counter running next to «scrolled 5 lines» only ate width.
     const scrollNote = state.scroll > 0
-        ? translate(state.locale)('status.scrolled', {
-            n: String(state.scroll),
-        })
+        ? translate(state.locale)('status.scrolled', { n: String(state.scroll) })
         : '';
-    const leftText = scrollNote || prefix + left;
+    return scrollNote || prefix + left;
+}
+export function StatusBar({ state, divider = true, }) {
+    // Drive the spinner from Ink's shared animation timer (one timer for the
+    // whole tree). The interval matches the old 400ms dot cadence.
+    const animating = state.busy || !!state.animBase;
+    const { frame } = useAnimation({ interval: 400, isActive: animating });
+    const t = translate(state.locale);
+    const leftText = statusLeftText(state, t, frame);
     const showLeft = !!leftText;
-    // Keep the row on ONE line. The left status gets at most a third of the
-    // width (it is the least important); the badges take the rest and DROP whole
-    // badges until they fit (the context counter survives longest). Estimating
-    // the badge width for the left budget was circular and let the row overshoot
-    // to a second line on a narrow terminal.
+    // Keep the row on ONE line: the left status may use whatever the BADGES do
+    // not need, minus a small gap so the two never touch. A fixed "a third of
+    // the width" budget cut the pause counter mid-number («5…») while half the
+    // row sat empty; measuring the badges (they are DROPPED whole when the row
+    // is tight, the context counter survives longest) is both accurate and
+    // keeps the layout stable.
     const cols = useWindowSize().columns || 80;
-    const leftBudget = Math.max(0, Math.min(Math.floor(cols / 3), cols - 14));
+    const badgeW = badgeTextWidth(state);
+    const gap = badgeW > 0 ? 2 : 0;
+    const leftBudget = Math.max(0, cols - 2 - badgeW - gap);
     const leftOut = showLeft ? truncateToWidth(leftText, leftBudget) : '';
     return (_jsxs(Box, { flexDirection: "column", children: [divider ? _jsx(Text, { color: UI.border, children: '─'.repeat(cols) }) : null, _jsxs(Box, { flexDirection: "row", width: Math.max(1, cols - 2), height: 1, children: [_jsx(Text, { color: UI.accentDim, children: leftOut || ' ' }), _jsx(Box, { flexGrow: 1 }), _jsx(Badges, { state: state, budget: Math.max(0, cols - 2 - visLen(leftOut)) })] })] }));
 }

package/dist/tui/ThemePicker.js

@@ -10,7 +10,7 @@ import { useState } from 'react';
 import { Box, Text, useInput, useApp, useWindowSize } from 'ink';
 import { UI } from './ui-colors.js';
 import { HintBar } from './widgets.js';
-import { theme } from '../theme.js';
+import { ThemePreview } from './theme-preview.js';
 import { translate } from '../i18n.js';
 export function ThemePicker({ themes, initial, onPreview, locale = 'en', onDone, }) {
     const { exit } = useApp();
@@ -30,20 +30,6 @@ export function ThemePicker({ themes, initial, onPreview, locale = 'en', onDone,
         setCursor(next);
         onPreview(themes[next]);
     };
-    // A sample line of every important role, colored through `theme` (chalk):
-    // Ink's <Text color> takes a hex STRING, not a formatter, so a gradient like
-    // this has to be pre-rendered ANSI.
-    const preview = () => [
-        theme.user('user'),
-        theme.assistant('answer'),
-        theme.tool('tool'),
-        theme.toolResult('result'),
-        theme.system('system'),
-        theme.warn('warn'),
-        theme.error('error'),
-        theme.success('ok'),
-        theme.toggleOn('on'),
-    ].join(' ');
     useInput((input, key) => {
         if (key.escape || (key.ctrl && input === 'c') || input === 'q') {
             finish(null);
@@ -63,7 +49,7 @@ export function ThemePicker({ themes, initial, onPreview, locale = 'en', onDone,
     return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: UI.border, paddingX: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { color: UI.title, bold: true, children: '◆ ' + t('theme.pick_title') }), _jsx(Text, { color: UI.dim, children: themes.length })] }), _jsx(Text, { color: UI.border, children: '─'.repeat(innerCols) }), themes.map((name, idx) => {
                 const sel = idx === cursor;
                 return (_jsxs(Text, { children: [_jsx(Text, { color: UI.accent, children: sel ? '❯ ' : '  ' }), _jsx(Text, { color: sel ? UI.accent : undefined, bold: sel, children: name }), idx === start ? (_jsx(Text, { color: UI.dim, children: '  ' + t('tui.list.current') })) : null] }, name));
-            }), _jsx(Text, { color: UI.border, children: '─'.repeat(innerCols) }), _jsx(Text, { children: preview() }), _jsx(HintBar, { hints: [
+            }), _jsx(Text, { color: UI.border, children: '─'.repeat(innerCols) }), _jsx(ThemePreview, { name: themes[cursor] ?? initial, compact: true }), _jsx(HintBar, { hints: [
                     ['↑/↓', t('theme.pick_move')],
                     ['Enter', t('tui.hint.ok')],
                     ['Esc', t('theme.pick_cancel')],

package/dist/tui/layout.js

@@ -13,7 +13,7 @@ export const HINT_ROWS = 1;
 export function fullScreenLayout(input) {
     const termRows = Math.max(1, Math.floor(input.termRows) || 24);
     const cols = Math.max(1, Math.floor(input.cols) || 80);
-    const box = inputBoxRows(input.prompt, input.buf, input.cursor, cols);
+    const box = inputBoxRows(input.prompt, input.buf, input.cursor, cols, input.borderCols ?? 2);
     const suggestRows = Math.max(0, Math.floor(input.suggestRows) || 0);
     const panelRows = HEADER_ROWS + STATUS_ROWS + box + suggestRows + HINT_ROWS;
     const logHeight = Math.max(1, termRows - panelRows);

package/dist/tui/theme-preview.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import chalk from 'chalk';
+import { PALETTES, DEFAULT_THEME, isThemeName } from '../theme.js';
+/**
+ * The sample lines. Kept PURE DATA so tests can assert the preview covers the
+ * important roles and the Ink/plain renderers cannot drift apart.
+ */
+export function previewLines() {
+    return [
+        { role: 'dir', text: '~/project' },
+        { role: 'prompt', text: '❯ объясни этот код', bold: true },
+        { role: 'assistant', text: '● Ответ: функция читает файл и парсит JSON.' },
+        { role: 'tool', text: '🔧 Read {"path":"package.json"}' },
+        { role: 'toolResult', text: '→ ✔ 42 строки' },
+        { role: 'taskSummary', text: '· duration: 6s · tools: 1' },
+        { role: 'warn', text: '▲ предупреждение' },
+        { role: 'error', text: '✖ ошибка' },
+        { role: 'success', text: '✔ готово' },
+        { role: 'toggleOn', text: '🌐 поиск вкл' },
+        { role: 'system', text: '● сервисное сообщение' },
+        { role: 'dim', text: '· подсказка' },
+    ];
+}
+function paletteOf(name) {
+    return PALETTES[isThemeName(name) ? name : DEFAULT_THEME];
+}
+/** The preview as one chalk-painted string (for a plain terminal line). */
+export function themePreviewAnsi(name) {
+    const p = paletteOf(name);
+    return previewLines()
+        .map((l) => {
+        const c = chalk.hex(p[l.role]);
+        return l.bold ? c.bold(l.text) : c(l.text);
+    })
+        .join('\n');
+}
+/** The preview as an Ink block (for the picker / the config menu). */
+export function ThemePreview({ name, compact = false, }) {
+    const p = paletteOf(name);
+    const lines = compact
+        ? previewLines().filter((l) => ['prompt', 'assistant', 'tool', 'error', 'success', 'dim'].includes(l.role))
+        : previewLines();
+    return (_jsx(Box, { flexDirection: "column", children: lines.map((l, i) => (_jsx(Text, { color: p[l.role], bold: l.bold, children: l.text }, i))) }));
+}

package/dist/tui/ui-colors.js

@@ -26,6 +26,36 @@ export function uiColorsFrom(p) {
     };
 }
 export const UI = uiColorsFrom(PALETTES[DEFAULT_THEME]);
+// Border STYLE of the framed surfaces (the input box today). Ink only ships a
+// handful of box styles; 'none' draws no frame at all. Kept next to the colors
+// because it is the same kind of presentation state, and mutated in place so a
+// /config switch applies without re-importing anything.
+let inputBorder = 'round';
+/** Switch the input frame style ('round'|'single'|'double'|'bold'|'none'). */
+export function setInputBorder(name) {
+    const v = String(name ?? '')
+        .trim()
+        .toLowerCase();
+    inputBorder =
+        v === 'none' ||
+            v === 'single' ||
+            v === 'double' ||
+            v === 'bold' ||
+            v === 'round'
+            ? v
+            : 'round';
+    return inputBorder;
+}
+/** The current input frame style as an Ink borderStyle value (none = no box). */
+export function inputBorderStyle() {
+    if (inputBorder === 'none')
+        return undefined;
+    return inputBorder;
+}
+/** Border columns the frame consumes (2 = left + right, 0 when off). */
+export function inputBorderCols() {
+    return inputBorderStyle() ? 2 : 0;
+}
 /** Repaint the Ink widgets with the palette of `name` (unknown -> default). */
 export function syncUiColors(name) {
     const id = isThemeName(name) ? name : DEFAULT_THEME;

package/llms-full.txt

@@ -616,7 +616,16 @@ The switch is instant, no restart. `zames` is the default; the bundled palettes
 are ports of well-known editor schemes:
 
 `zames` (default), `one-dark`, `dracula`, `gruvbox`, `nord`, `monokai`,
-`solarized-dark`, `tokyo-night`.
+`solarized-dark`, `tokyo-night`, `catppuccin`, `github-dark`, `ayu`,
+`rose-pine`, `everforest`, `kanagawa`.
+
+A theme repaints EVERYTHING: the interface, the agent's answers, the code
+highlighting inside them, the status row and the input frame. To make the choice
+concrete, a SAMPLE SESSION in that palette is shown before you pick (in `/theme`
+below the list, in `/config` press `p` on the theme row); after
+`/theme <id>` the sample is printed too. The frame itself is a separate
+setting: `/config set ui.inputBorder <round|single|double|bold|none>`
+(default `round`; `none` removes it).
 
 Agent data is stored in `~/.zames`: browser profile, logs, undo history, sessions.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zames_pro",
-  "version": "2.83.2",
+  "version": "2.84.0",
   "description": "Terminal coding agent that drives a real browser to chat with DeepSeek, Qwen or GLM — no API key required. Reads and edits files, runs commands, commits to git, like Claude Code / Codex CLI.",
   "type": "module",
   "bin": {
@@ -47,7 +47,8 @@
     "postinstall": "node scripts/postinstall.mjs",
     "prepare": "husky",
     "glm-smoke": "tsx scripts/glm-smoke.mts",
-    "seo:topics": "tsx scripts/seo-topics.mts"
+    "seo:topics": "tsx scripts/seo-topics.mts",
+    "ui-smoke": "tsx scripts/ui-smoke.mts"
   },
   "keywords": [
     "zames",