zames_pro 2.73.10 → 2.74.0

package/dist/tui/store.js

@@ -0,0 +1,104 @@
+// The TUI STATE STORE — the bridge between the imperative agent code and the
+// React/Ink render tree.
+//
+// Why a store instead of React state:
+//   * the agent loop calls the UI from OUTSIDE React (`printAbove`, `toolCall`,
+//     `thinking`, ...), i.e. imperatively;
+//   * Ink re-renders from React state, which can only be set from inside a
+//     component or via a setter we own.
+// So the imperative API writes into this store and the Ink tree subscribes
+// via `useSyncExternalStore`. One direction (calls -> store -> render) means no
+// conflict between the two worlds.
+//
+// The store keeps the WHOLE app state in one immutable snapshot object so
+// `useSyncExternalStore` gets a stable reference between changes (a new object
+// is produced only on an actual mutation).
+import { initialEditState } from './edit.js';
+function initialState() {
+    return {
+        log: [],
+        title: 'zames',
+        version: '',
+        workdir: '',
+        scroll: 0,
+        busy: false,
+        locked: false,
+        statusText: '',
+        sendState: '',
+        animBase: '',
+        animStart: 0,
+        pendingText: null,
+        edit: initialEditState(),
+        pastes: [],
+        attachments: [],
+        history: [],
+        prompt: '> ',
+        commands: [],
+        locale: 'ru',
+        contextText: null,
+        contextLevel: null,
+        queueLength: 0,
+        tasks: '',
+        provider: '',
+        mouseScroll: false,
+        thinkingEnabled: false,
+        searchEnabled: false,
+        statusLine: '',
+        codeBlocks: [],
+        codeFocus: -1,
+        columns: process.stdout.columns || 80,
+    };
+}
+/**
+ * A minimal external store for the Ink tree.
+ *
+ * Mutations go through `set(partial)` which shallow-merges into a NEW snapshot
+ * object, so `useSyncExternalStore` sees a changed reference and re-renders.
+ * A render that changes nothing produces no new object and no repaint.
+ */
+export class TuiStore {
+    state = initialState();
+    listeners = new Set();
+    nextLogId = 1;
+    subscribe = (cb) => {
+        this.listeners.add(cb);
+        return () => this.listeners.delete(cb);
+    };
+    getSnapshot = () => this.state;
+    /** Shallow-merge a partial update and notify subscribers. */
+    set(partial) {
+        let changed = false;
+        for (const k of Object.keys(partial)) {
+            if (partial[k] !== this.state[k]) {
+                changed = true;
+                break;
+            }
+        }
+        if (!changed)
+            return;
+        this.state = { ...this.state, ...partial };
+        this.emit();
+    }
+    /** Functional update over the whole snapshot. */
+    update(fn) {
+        this.set(fn(this.state));
+    }
+    /** Append one permanent log entry (an Ink `<Static>` item). */
+    pushLog(kind, text, raw = false) {
+        const entry = { id: this.nextLogId++, kind, text, raw };
+        this.state = { ...this.state, log: [...this.state.log, entry] };
+        this.emit();
+    }
+    /** Append several entries in one notification (cheaper than N pushes). */
+    pushLogs(entries) {
+        if (!entries.length)
+            return;
+        const withIds = entries.map((e) => ({ ...e, id: this.nextLogId++ }));
+        this.state = { ...this.state, log: [...this.state.log, ...withIds] };
+        this.emit();
+    }
+    emit() {
+        for (const cb of this.listeners)
+            cb();
+    }
+}

package/dist/tui/types.js

@@ -0,0 +1,10 @@
+// The UI EDITOR interface — the shared surface of the legacy `LineEditor`
+// (src/input.ts) and the new Ink-based `TuiEditor` (src/tui/TuiEditor.tsx).
+//
+// index.ts and run-task.ts talk to the UI ONLY through this interface, so the
+// rendering engine (hand-rolled ANSI vs React/Ink) can be swapped without
+// touching the agent code. Both classes implement every member below.
+//
+// Only the members the agent actually uses are listed; the concrete classes may
+// expose more (internal render helpers, etc.).
+export {};

package/dist/tui/useMouseWheel.js

@@ -0,0 +1,113 @@
+// A hook that reads the terminal's MOUSE-WHEEL events and scrolls the log.
+//
+// Ink 8 does NOT parse mouse events (its `useInput` only handles keys), and it
+// STRIPS unknown CSI sequences, so the wheel never reaches a component. To
+// scroll the chat with the wheel we therefore:
+//   1. enable SGR mouse reporting on the terminal (ESC[?1000h ESC[?1006h);
+//   2. listen to the RAW stdin bytes ourselves (Ink's own listener ignores
+//      them, so there is no conflict).
+//
+// The SGR encoding is `ESC [ < Cb ; Cx ; Cy M` where Cb 64 = wheel up and
+// 65 = wheel down (plus modifier bits). We only need Cb.
+//
+// ALTERNATE-SCROLL: while the app is in the ALTERNATE SCREEN (full-screen
+// mode), terminals turn the mouse wheel into ARROW KEYS by default (DECSET
+// 1007, "alternate scroll mode"). Ink parses those arrows as normal Up/Down,
+// and the input editor at a buffer edge maps them to HISTORY — so the wheel
+// scrolled the INPUT HISTORY instead of the log (the operator's bug).
+//
+// ORDER MATTERS and reporting is ALWAYS ON: some terminals only apply `1007l`
+// while mouse reporting is enabled, so sending `1007l` alone (the previous
+// behavior when ui.mouseScroll was off) was a no-op there and the wheel kept
+// arriving as arrows. We now enable 1000/1006 unconditionally and disable 1007
+// right after. Consequence: drag-select needs SHIFT (the standard TUI
+// convention — Shift+drag bypasses the app), which is the trade-off for a
+// working wheel. `enabled` only decides whether the wheel SCROLLS the log;
+// the events are consumed either way so they never reach the editor.
+import { useEffect } from 'react';
+import { useStdin } from 'ink';
+/** True when a chunk contains an SGR mouse wheel event; returns the delta. */
+export function parseWheel(chunk) {
+    // Count wheel-ups (down) and wheel-downs (up) in the chunk.
+    let delta = 0;
+    const re = /\x1b\[<(\d+);\d+;\d+[Mm]/g;
+    let m;
+    while ((m = re.exec(chunk)) !== null) {
+        const cb = Number(m[1]);
+        // Button code 64 = wheel up (scroll back), 65 = wheel down (scroll fwd).
+        const button = cb & 0b11000011;
+        if (button === 64)
+            delta += 1;
+        else if (button === 65)
+            delta -= 1;
+    }
+    return delta;
+}
+/**
+ * The part of an SGR mouse sequence at the END of `chunk` that is still
+ * INCOMPLETE (no `M`/`m` terminator yet), or '' when the chunk ends cleanly.
+ * A terminal may split one sequence across two `data` events; scanning each
+ * chunk alone dropped the wheel notch (the hook keeps this tail and prepends
+ * it to the next chunk).
+ */
+export function incompleteTail(chunk) {
+    const start = chunk.lastIndexOf('\u001b[<');
+    if (start === -1)
+        return '';
+    // Complete if an `M`/`m` follows the introducer before the chunk ends.
+    if (/[Mm]/.test(chunk.slice(start + 3)))
+        return '';
+    return chunk.slice(start);
+}
+const ESC = String.fromCharCode(27);
+/**
+ * The terminal-mode sequences the hook writes. Exported PURE so a test can pin
+ * the exact bytes AND their order (reporting FIRST, then 1007 off — some
+ * terminals ignore `1007l` when mouse reporting is off, which is what made the
+ * wheel keep scrolling the input history).
+ */
+export function mouseModeSequences() {
+    const on = 
+    // 1000 = button-event tracking, 1006 = SGR extended coords, 1007 = off.
+    ESC + '[?1000h' + ESC + '[?1006h' + ESC + '[?1007l';
+    const off = ESC + '[?1006l' + ESC + '[?1000l' + ESC + '[?1007h';
+    return { on, off };
+}
+/**
+ * Subscribe to wheel events on the given terminal and call `onWheel(delta)`
+ * where delta > 0 means "scroll up / back". Enables SGR mouse reporting while
+ * mounted and disables alternate-scroll so the wheel is never turned into
+ * arrow keys.
+ */
+export function useMouseWheel(onWheel, enabled = true) {
+    const { stdin, isRawModeSupported } = useStdin();
+    useEffect(() => {
+        if (!isRawModeSupported)
+            return;
+        const seq = mouseModeSequences();
+        process.stdout.write(seq.on);
+        // A sequence may be split across two chunks; carry the incomplete tail.
+        let carry = '';
+        const onData = (data) => {
+            const s = typeof data === 'string' ? data : data.toString('utf-8');
+            const buf = carry + s;
+            carry = incompleteTail(buf);
+            const scan = carry ? buf.slice(0, buf.length - carry.length) : buf;
+            if (!scan.includes('\u001b[<'))
+                return;
+            // `enabled` decides whether the wheel SCROLLS; the event is consumed
+            // either way, so it never falls through to the editor as an arrow.
+            if (!enabled)
+                return;
+            const delta = parseWheel(scan);
+            if (delta !== 0)
+                onWheel(delta);
+        };
+        stdin.on('data', onData);
+        return () => {
+            stdin.removeListener('data', onData);
+            // Disable mouse reporting on unmount so normal selection works again.
+            process.stdout.write(seq.off);
+        };
+    }, [stdin, isRawModeSupported, onWheel, enabled]);
+}

package/dist/tui/widgets.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+// ---- palette (kept in one place so every menu is consistent) ----
+export const UI = {
+    accent: '#c8b06a',
+    accentDim: '#7a6b45',
+    text: '#cfc9b0',
+    dim: '#5b616e',
+    border: '#4a5058',
+    on: '#6fd0b0',
+    off: '#5b616e',
+    ok: '#a9c08c',
+    warn: '#c9a86a',
+    err: '#c98a80',
+    system: '#808896',
+    title: '#9fb8d8',
+};
+/** `[x]` / `[ ]` — a checkbox for a boolean value. */
+export function Checkbox({ checked, focused, }) {
+    return (_jsx(Text, { color: checked ? UI.on : UI.off, bold: focused, children: checked ? '[x]' : '[ ]' }));
+}
+/** `‹ value ›` — an inline SELECT for an enum value. The arrows hint that
+ *  ←/→ (or Space) cycle the option. */
+export function Select({ value, focused, }) {
+    return (_jsxs(Text, { children: [_jsx(Text, { color: UI.off, children: '‹ ' }), _jsx(Text, { color: focused ? UI.accent : UI.text, bold: focused, children: value }), _jsx(Text, { color: UI.off, children: ' ›' })] }));
+}
+/** A framed panel (rounded border) with an optional title bar and footer. */
+export function Panel({ title, subtitle, footer, width, children, }) {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: UI.border, paddingX: 1, width: width, children: [title ? (_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { color: UI.title, bold: true, children: title }), subtitle ? _jsx(Text, { color: UI.dim, children: subtitle }) : null] })) : null, title ? _jsx(Text, { color: "#3a3f4b", children: '─'.repeat(40) }) : null, children, footer ? footer : null] }));
+}
+/** A single hint chip: `↑/↓ select`. */
+export function Hint({ keys, label, }) {
+    return (_jsxs(Text, { children: [_jsx(Text, { color: UI.accent, children: keys }), _jsx(Text, { color: UI.dim, children: ' ' + label })] }));
+}
+/** A row of hint chips separated by ` · `. */
+export function HintBar({ hints, }) {
+    return (_jsx(Text, { children: hints.map(([k, l], i) => (_jsxs(Text, { children: [i > 0 ? _jsx(Text, { color: UI.dim, children: '  ·  ' }) : null, _jsx(Text, { color: UI.accent, children: k }), _jsx(Text, { color: UI.dim, children: ' ' + l })] }, i))) }));
+}
+/**
+ * A CODE BLOCK with a syntax-highlighted body and a copy affordance.
+ *
+ * The agent's answers are printed as pre-rendered ANSI (markdown.ts already
+ * highlights with cli-highlight), so the live log does NOT use this component —
+ * it exists for menus/panels that show a snippet inline (and for a future
+ * structured log). Copying is a KEY, not a button: a terminal has no pointer.
+ * Pass `onCopy` and show `hint` so the operator learns the binding.
+ */
+export function CodeBlock({ code, lang, highlighted, width, hint, focused, onCopy, }) {
+    // React cannot call `onCopy` from a keydown here (Ink has no per-element
+    // focus ring by default); the caller wires the key and passes `focused` to
+    // show which block it will copy. `onCopy` is kept so a future focus manager
+    // can invoke it without changing the call sites.
+    void onCopy;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: focused ? UI.accent : UI.border, paddingX: 1, width: width, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { color: UI.dim, children: lang || 'code' }), hint ? _jsx(Text, { color: UI.accent, children: hint }) : null] }), (highlighted || code).split(String.fromCharCode(10)).map((line, i) => (_jsx(Text, { children: line || ' ' }, i)))] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zames_pro",
-  "version": "2.73.10",
+  "version": "2.74.0",
   "description": "Terminal coding agent that drives a real browser to chat with DeepSeek, Qwen and other web LLMs — no API key required. Reads and edits files, runs commands, commits to git, like Claude Code / Codex CLI.",
   "type": "module",
   "bin": {
@@ -36,7 +36,6 @@
     "qwen-smoke": "tsx scripts/qwen-smoke.mts",
     "render-demo": "tsx scripts/render-demo.mts",
     "render-how": "tsx scripts/render-how-it-works.mts",
-    "render-how": "tsx scripts/render-how-it-works.mts",
     "build:readme": "tsx scripts/build-readme.mts",
     "postinstall": "node scripts/postinstall.mjs",
     "prepare": "husky"
@@ -67,16 +66,18 @@
   ],
   "license": "MIT",
   "engines": {
-    "node": ">=20"
+    "node": ">=22"
   },
   "packageManager": "npm@11.19.0",
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.30.1",
     "chalk": "^5.3.0",
     "cli-highlight": "^2.1.11",
+    "ink": "^8.0.0",
     "markdansi": "^0.3.4",
     "ora": "^8.0.1",
-    "playwright": "^1.48.0"
+    "playwright": "^1.48.0",
+    "react": "^19.3.0"
   },
   "publishConfig": {
     "access": "public"
@@ -92,6 +93,7 @@
   "devDependencies": {
     "@eslint/js": "^9.39.5",
     "@types/node": "^26.6.2",
+    "@types/react": "^19.3.0",
     "eslint": "^9.39.5",
     "eslint-config-prettier": "^10.1.8",
     "globals": "^17.12.0",

package/scripts/coverage-gate.mts

@@ -39,6 +39,16 @@ const FLOORS = {
   // C3: the pure /config subcommand dispatcher — silent routing regressions
   // (a wrong subcommand branch) are invisible without tests.
   'config-command.ts': 85,
+  // The Ink TUI's PURE halves: the editor state transitions (tui/edit.ts) and
+  // the key dispatcher (tui/keys.ts). A silent regression there breaks the
+  // operator's editing without any UI test catching it. NOTE: the gate keys on
+  // the BASENAME (its regex has no slash), so these are 'edit.ts' / 'keys.ts' /
+  // 'store.ts' — unique in the tree today.
+  'edit.ts': 85,
+  'keys.ts': 85,
+  'store.ts': 85,
+  'banner.ts': 85,
+  'tool-summary.ts': 85,
   // N12: web.ts holds the SSRF guard and the DuckDuckGo/HTML parsers — a
   // regression there is silent. Floors sit below the current values.
   'web.ts': 40,

package/scripts/render-demo.mts

@@ -21,7 +21,7 @@ const out = path.join(root, 'docs', 'demo.png')
 
 const C = {
   bg: '#23272e',
-  user: '#b4b8d0',
+  user: '#8fd4f0',
   prompt: '#c8b06a',
   dir: '#7fc4f0',
   assistant: '#cfc9b0',

package/scripts/tui-probe.tsx

@@ -0,0 +1,62 @@
+// A tiny Ink harness that mounts the REAL FullScreenApp with a scripted store,
+// so a pty run can assert the on-screen geometry (input box height, cursor
+// row) instead of grepping escape bytes. Run under `script -qec` and feed keys
+// on stdin; the terminal output is replayed by the VT100 emulator in the test.
+//
+// NOT shipped: a dev probe only (lives in scripts/, not in `files`).
+
+import React from 'react'
+import fs from 'node:fs'
+import { render } from 'ink'
+import { TuiStore } from '../src/tui/store.js'
+import { FullScreenApp } from '../src/tui/FullScreenApp.js'
+import { TuiApp } from '../src/tui/TuiApp.js'
+import { initialEditState } from '../src/tui/edit.js'
+
+const store = new TuiStore()
+store.set({
+  title: 'probe',
+  version: '0.0.0',
+  workdir: '/tmp',
+  prompt: '> ',
+  locale: 'en',
+  commands: [],
+  edit: { ...initialEditState(), buf: process.argv[2] ?? '' },
+  // A copyable code block, so a pty run can press Ctrl+Y and assert the copy
+  // callback fired (the raw block, not the highlighted render).
+  codeBlocks: [{ lang: 'ts', text: 'const a = 1', index: 1 }],
+})
+
+// A few log rows so the viewport is not empty.
+store.pushLog('system', 'log line one')
+store.pushLog('system', 'log line two')
+
+const COPY_LOG = process.env.PROBE_COPY_LOG || ''
+const INLINE = process.env.PROBE_INLINE === '1'
+
+const inputProps = {
+  onSubmit: () => {},
+  onEscape: () => {},
+  onCtrlC: () => {},
+  onCopyCode: () => {
+    if (COPY_LOG) fs.appendFileSync(COPY_LOG, 'copy' + String.fromCharCode(10))
+  },
+  onAttach: () => null,
+  onClipboard: () => Promise.resolve(null),
+  onHistoryChange: () => {},
+  onClearScreen: () => {},
+  attachments: [],
+  onPastesChange: () => {},
+}
+
+render(
+  INLINE ? (
+    <TuiApp store={store} inputProps={inputProps} />
+  ) : (
+    <FullScreenApp store={store} inputProps={inputProps} />
+  ),
+  { exitOnCtrlC: false, patchConsole: false, alternateScreen: !INLINE },
+)
+
+// Keep the app alive until killed.
+setInterval(() => {}, 1 << 30)