zames_pro 2.88.2 → 2.89.0

package/dist/tui/ConfigMenu.js

@@ -2,17 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The Ink-based CONFIG MENU — a drop-in alternative to the hand-rolled
 // `runConfigMenu` (src/config-menu.ts), used when `ui.tui` is enabled.
 //
-// It offers the same operations with a cleaner layout: a scrolling list of
-// settings grouped by section, ↑/↓ (or j/k) to move, g to jump to the next
-// group, Enter/Space to edit (boolean/enum toggle in place, number/string
-// prompt), d twice to reset, / to filter, q/Esc to quit.
+// TWO LEVELS. The flat 45-entry list this replaced was unusable: every timing
+// knob of every backend sat in one scroll. `/config` now opens a short list of
+// GROUPS (Agent, Browser & chat, Providers, Interface, Files & history,
+// Diagnostics); Enter opens a group and shows ONLY its settings, Esc goes back.
 //
-// All strings come from i18n (cfg.*), so the menu is fully localized. The
-// component never touches config.ts directly: the caller passes get/set/reset
-// callbacks (the SAME ones the legacy menu takes), so the logic is shared.
+// Inside a group: ↑/↓ (or j/k) to move, ←/→ or Enter/Space to edit (boolean
+// toggle, enum cycle, number/string prompt), d twice to reset, / to filter,
+// q to quit. All strings come from i18n (cfg.*), so the menu is fully localized.
+// The component never touches config.ts directly: the caller passes get/set/
+// reset callbacks (the SAME ones the legacy menu takes), so the logic is shared.
 import { useMemo, useState } from 'react';
 import { Box, Text, useInput, useApp, useWindowSize } from 'ink';
 import { translate } from '../i18n.js';
+import { CONFIG_TOP_GROUPS } from '../config.js';
 import { Checkbox, Select, UI, HintBar } from './widgets.js';
 import { ThemePreview } from './theme-preview.js';
 /** Strip ANSI to measure a line's visible width. */
@@ -50,6 +53,9 @@ export function ConfigMenuApp(opts) {
     // (a hardcoded Russian bar showed up in an English UI).
     const hint = translate(locale);
     const { columns, rows } = useWindowSize();
+    // null = the GROUP list (level 1); a topKey = that group's settings.
+    const [openGroup, setOpenGroup] = useState(null);
+    const [groupCursor, setGroupCursor] = useState(0);
     const [cursor, setCursor] = useState(0);
     const [filterQuery, setFilterQuery] = useState('');
     const [filterMode, setFilterMode] = useState(false);
@@ -65,14 +71,20 @@ export function ConfigMenuApp(opts) {
     // Bump this counter after every mutation to force a re-render.
     const [version, setVersion] = useState(0);
     const bump = () => setVersion((v) => v + 1);
+    const allGroups = opts.topGroups || [...CONFIG_TOP_GROUPS];
+    // A group with no visible field is not offered at all.
+    const groups = useMemo(() => allGroups.filter((g) => fields.some((f) => f.topKey === g && !f.advanced)), [allGroups, fields]);
     const visible = useMemo(() => {
+        if (!openGroup)
+            return [];
+        const inGroup = fields.filter((f) => f.topKey === openGroup && !f.advanced);
         const q = filterQuery.trim().toLowerCase();
         if (!q)
-            return fields;
-        return fields.filter((f) => (f.path + ' ' + t(f.labelKey || f.path) + ' ' + t(f.groupKey))
+            return inGroup;
+        return inGroup.filter((f) => (f.path + ' ' + t(f.labelKey || f.path) + ' ' + t(f.groupKey))
             .toLowerCase()
             .includes(q));
-    }, [fields, filterQuery, t]);
+    }, [fields, openGroup, filterQuery, t]);
     const isModified = (f) => {
         if (!getDefault)
             return false;
@@ -85,6 +97,12 @@ export function ConfigMenuApp(opts) {
             return String(cur) !== String(def);
         }
     };
+    /** How many fields of a top group differ from their defaults (badge). */
+    const groupChanged = (topKey) => {
+        if (!getDefault)
+            return 0;
+        return fields.filter((f) => f.topKey === topKey && isModified(f)).length;
+    };
     const commitEdit = () => {
         const f = visible[cursor];
         const raw = editBuf.trim();
@@ -152,6 +170,30 @@ export function ConfigMenuApp(opts) {
             setMessage(null);
         }
     };
+    /** Enter a group: reset the per-group UI state so nothing leaks across. */
+    const enterGroup = (topKey) => {
+        setOpenGroup(topKey);
+        setCursor(0);
+        setFilterQuery('');
+        setFilterMode(false);
+        setPendingReset(null);
+        setMessage(null);
+        setPreviewTheme(false);
+    };
+    const leaveGroup = () => {
+        // Keep the group list cursor on the group that was just left, so Esc does
+        // not send the operator back to the top of the list.
+        const idx = groups.indexOf(openGroup || '');
+        setOpenGroup(null);
+        setGroupCursor(idx >= 0 ? idx : 0);
+        setFilterQuery('');
+        setFilterMode(false);
+        setPendingReset(null);
+        setMessage(null);
+        setEditing(false);
+        setEditBuf('');
+        setPreviewTheme(false);
+    };
     const quit = () => {
         opts.onExit();
         exit();
@@ -199,13 +241,42 @@ export function ConfigMenuApp(opts) {
             }
             return;
         }
-        if (key.escape ||
-            input === 'q' ||
-            input === 'Q' ||
-            (key.ctrl && input === 'c')) {
+        // ---------- LEVEL 1: the group list ----------
+        if (!openGroup) {
+            if (key.escape ||
+                input === 'q' ||
+                input === 'Q' ||
+                (key.ctrl && input === 'c')) {
+                quit();
+                return;
+            }
+            if (key.upArrow || input === 'k') {
+                setGroupCursor((c) => groups.length ? (c - 1 + groups.length) % groups.length : 0);
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setGroupCursor((c) => (groups.length ? (c + 1) % groups.length : 0));
+                return;
+            }
+            if (key.return || input === ' ' || key.rightArrow) {
+                const g = groups[groupCursor];
+                if (g)
+                    enterGroup(g);
+                return;
+            }
+            return;
+        }
+        // ---------- LEVEL 2: the settings of one group ----------
+        if (input === 'q' || input === 'Q' || (key.ctrl && input === 'c')) {
             quit();
             return;
         }
+        // Esc = BACK to the group list (not out of /config): inside a group the
+        // operator is one level deep, and quitting from there was a surprise.
+        if (key.escape) {
+            leaveGroup();
+            return;
+        }
         if (input === '/') {
             setFilterMode(true);
             setMessage(null);
@@ -234,7 +305,7 @@ export function ConfigMenuApp(opts) {
             return;
         }
         if (input === 'g') {
-            // Jump to the first field of the NEXT group (and back to the top).
+            // Jump to the first field of the NEXT subsection (and back to the top).
             const curGroup = visible[cursor]?.groupKey;
             let target = -1;
             for (let k = cursor + 1; k < visible.length; k++) {
@@ -259,18 +330,6 @@ export function ConfigMenuApp(opts) {
                 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;
@@ -302,11 +361,13 @@ export function ConfigMenuApp(opts) {
     const maxRows = Math.max(3, termRows - 8);
     const innerCols = Math.max(1, (columns || 80) - 4);
     const shown = useMemo(() => {
-        const groupStart = (i) => i === 0 || visible[i].groupKey !== visible[i - 1].groupKey;
-        // Rendered height of one item: 1 base row + wrapped extra rows. The label
-        // plus the value cell plus the path hint is approximated by the raw label
-        // length; over-estimating is safe (it only shortens the window).
+        const list = openGroup ? visible : groups;
+        const groupStart = (i) => !!openGroup &&
+            (i === 0 || visible[i].groupKey !== visible[i - 1].groupKey);
+        // Rendered height of one item: 1 base row + wrapped extra rows.
         const itemRows = (i) => {
+            if (!openGroup)
+                return 1;
             const f = visible[i];
             const label = f.labelKey ? t(f.labelKey) : f.path;
             return Math.max(1, Math.ceil((label.length + 12) / innerCols));
@@ -320,18 +381,19 @@ export function ConfigMenuApp(opts) {
             }
             return r;
         };
-        if (!visible.length)
+        const cur = openGroup ? cursor : groupCursor;
+        if (!list.length)
             return { start: 0, end: 0 };
-        let start = cursor;
-        let end = cursor + 1;
+        let start = cur;
+        let end = cur + 1;
         // Fill downward first, then upward, so the cursor stays visible and the
         // window uses the whole budget.
-        while (end < visible.length && rowsIn(start, end + 1) <= maxRows)
+        while (end < list.length && rowsIn(start, end + 1) <= maxRows)
             end++;
         while (start > 0 && rowsIn(start - 1, end) <= maxRows)
             start--;
         return { start, end };
-    }, [cursor, visible, maxRows, innerCols, t]);
+    }, [cursor, groupCursor, openGroup, visible, groups, maxRows, innerCols, t]);
     const usable = Math.max(1, (columns || 80) - 1);
     void visCols;
     void usable;
@@ -339,37 +401,59 @@ export function ConfigMenuApp(opts) {
     // counter (a pure `get()` call has no reactive dependency of its own).
     void version;
     const items = [];
-    let lastGroup = '';
-    for (let i = shown.start; i < shown.end; i++) {
-        const f = visible[i];
-        const g = f.groupKey;
-        if (i === shown.start || g !== lastGroup) {
-            items.push(_jsx(Text, { color: UI.title, children: '  ' + t(f.groupKey).toUpperCase() }, 'g' + i));
-            lastGroup = g;
+    if (!openGroup) {
+        // ---- level 1: one row per GROUP ----
+        for (let i = shown.start; i < shown.end; i++) {
+            const g = groups[i];
+            const selected = i === groupCursor;
+            const count = fields.filter((f) => f.topKey === g && !f.advanced).length;
+            const changed = groupChanged(g);
+            items.push(_jsxs(Text, { children: [_jsx(Text, { color: UI.accent, children: selected ? '❯ ' : '  ' }), _jsx(Text, { color: selected ? UI.accent : UI.text, bold: selected, children: t(g) }), _jsx(Text, { color: UI.dim, children: '  ' + t('cfg.menu.group_count', { n: count }) }), changed > 0 ? (_jsx(Text, { color: UI.warn, children: '  ' + t('cfg.menu.group_modified', { n: changed }) })) : null] }, 'grp' + i));
         }
-        const selected = i === cursor;
-        const label = f.labelKey ? t(f.labelKey) : f.path;
-        const raw = get(f.path);
-        const mod = isModified(f) ? '*' : '';
-        // The VALUE cell depends on the field type: a checkbox for booleans, an
-        // inline select for enums, plain text otherwise. The selected row shows
-        // the path on the right as a hint.
-        let valueCell;
-        if (f.type === 'boolean') {
-            valueCell = _jsx(Checkbox, { checked: raw === true, focused: selected });
-        }
-        else if (f.type === 'enum' && f.values && f.values.length) {
-            valueCell = (_jsx(Select, { value: String(raw ?? f.values[0]), focused: selected }));
+    }
+    else {
+        // ---- level 2: the settings of the open group ----
+        let lastGroup = '';
+        for (let i = shown.start; i < shown.end; i++) {
+            const f = visible[i];
+            const g = f.groupKey;
+            if (i === shown.start || g !== lastGroup) {
+                items.push(_jsx(Text, { color: UI.title, children: '  ' + t(f.groupKey).toUpperCase() }, 'g' + i));
+                lastGroup = g;
+            }
+            const selected = i === cursor;
+            const label = f.labelKey ? t(f.labelKey) : f.path;
+            const raw = get(f.path);
+            const mod = isModified(f) ? '*' : '';
+            // The VALUE cell depends on the field type: a checkbox for booleans, an
+            // inline select for enums, plain text otherwise. The selected row shows
+            // the path on the right as a hint.
+            let valueCell;
+            if (f.type === 'boolean') {
+                valueCell = _jsx(Checkbox, { checked: raw === true, focused: selected });
+            }
+            else if (f.type === 'enum' && f.values && f.values.length) {
+                valueCell = (_jsx(Select, { value: String(raw ?? f.values[0]), focused: selected }));
+            }
+            else {
+                valueCell = (_jsx(Text, { color: selected ? UI.text : UI.system, children: displayValue(f, raw, t) }));
+            }
+            items.push(_jsxs(Text, { children: [_jsx(Text, { color: UI.accent, children: selected ? '❯ ' : '  ' }), _jsx(Text, { color: selected ? UI.accent : UI.text, bold: selected, children: label }), _jsx(Text, { color: UI.dim, children: '  ' }), valueCell, mod ? _jsx(Text, { color: UI.warn, children: ' ' + mod }) : null, selected ? _jsx(Text, { color: UI.dim, children: '   ' + f.path }) : null] }, 'f' + i));
         }
-        else {
-            valueCell = (_jsx(Text, { color: selected ? UI.text : UI.system, children: displayValue(f, raw, t) }));
+        if (!visible.length) {
+            items.push(_jsx(Text, { color: UI.dim, children: '  ' + t('cfg.menu.no_match') }, "none"));
         }
-        items.push(_jsxs(Text, { children: [_jsx(Text, { color: UI.accent, children: selected ? '❯ ' : '  ' }), _jsx(Text, { color: selected ? UI.accent : UI.text, bold: selected, children: label }), _jsx(Text, { color: UI.dim, children: '  ' }), valueCell, mod ? _jsx(Text, { color: UI.warn, children: ' ' + mod }) : null, selected ? _jsx(Text, { color: UI.dim, children: '   ' + f.path }) : null] }, 'f' + i));
-    }
-    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)) }), 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: [
+    const count = openGroup ? visible.length : groups.length;
+    const pos = openGroup ? cursor : groupCursor;
+    const title = openGroup
+        ? t(openGroup) + '  ›  ' + t('cfg.menu.title')
+        : t('cfg.menu.groups_title');
+    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: title }), _jsx(Text, { color: UI.dim, children: (count ? pos + 1 : 0) + '/' + count })] }), _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, !openGroup ? (_jsx(HintBar, { hints: [
+                    ['↑/↓', hint('tui.hint.select')],
+                    ['Enter', hint('tui.hint.ok')],
+                    ['q', hint('tui.hint.quit')],
+                ] })) : (_jsx(HintBar, { hints: [
                     ['↑/↓', hint('tui.hint.select')],
                     ['←/→', hint('tui.hint.change')],
                     ['Enter', hint('tui.hint.edit')],
@@ -378,6 +462,7 @@ export function ConfigMenuApp(opts) {
                         : []),
                     ['/', hint('tui.hint.search')],
                     ['d', hint('tui.hint.reset')],
+                    ['Esc', hint('tui.hint.back')],
                     ['q', hint('tui.hint.quit')],
-                ] })] }));
+                ] }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zames_pro",
-  "version": "2.88.2",
+  "version": "2.89.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": {