lazyclaw 6.3.0 → 6.4.0

package/tui/editor_keys.mjs

@@ -0,0 +1,275 @@
+// tui/editor_keys.mjs — pure editor state machine + cursor-aware editing
+// helpers for <Editor/> (v6.4).
+//
+// Extracted from tui/editor.mjs to keep that file under the 500-line gate.
+// editor.mjs re-exports the public surface (makeEditorState, applyKey,
+// displayWidth, cursorDisplayCol, wrapToBudget, fillSlashCommand and the
+// PROMPT_* / CONTINUATION_* constants) so all existing import paths stay
+// valid. These operate on the editor state's `buffer` (a string) and
+// `cursor` (a UTF-16 code-unit index — the same unit `buffer.slice(0,
+// cursor)` expects). Movement steps over whole codepoints so a surrogate
+// pair (e.g. an emoji) is never split mid-character.
+import stringWidth from 'string-width';
+
+// v6.4 — 2-stage Ctrl+C window. A second Ctrl+C within this many ms exits;
+// otherwise the first press only cancels/clears and resets the timer.
+export const INTERRUPT_WINDOW_MS = 1500;
+
+// The accent prompt (`› `) prepended to the first rendered line. Its display
+// width matters for any caller that wants the usable inner width of the box.
+export const PROMPT_PREFIX = '› ';
+export const PROMPT_WIDTH = stringWidth(PROMPT_PREFIX);
+export const CONTINUATION_GUTTER = '  ';
+export const CONTINUATION_WIDTH = stringWidth(CONTINUATION_GUTTER);
+
+// Public helper: display width of a buffer (or any substring), counting wide
+// chars (CJK, fullwidth, most emoji) as 2 cells and ignoring ANSI escapes.
+// Use this — never `.length` — for column math.
+export function displayWidth(text) {
+  if (!text) return 0;
+  return stringWidth(String(text));
+}
+
+// Cell-aware soft-wrap. Returns an array of visual rows whose width respects
+// the budget (first row uses `firstBudget`, subsequent rows use `contBudget`).
+export function wrapToBudget(text, firstBudget, contBudget) {
+  if (!text) return [''];
+  const out = [];
+  let line = '';
+  let lineW = 0;
+  let budget = firstBudget;
+  for (const ch of text) {
+    const w = stringWidth(ch);
+    if (lineW + w > budget) {
+      out.push(line);
+      line = ch;
+      lineW = w;
+      budget = contBudget;
+    } else {
+      line += ch;
+      lineW += w;
+    }
+  }
+  out.push(line);
+  return out;
+}
+
+// Display column of the caret given a state. Counts wide chars as 2. On the
+// first rendered line this is offset by PROMPT_WIDTH; on continuation lines
+// (after a Shift+Enter) it is offset by CONTINUATION_WIDTH. Callers that only
+// need the in-buffer column can pass `{ withPrefix: false }`.
+export function cursorDisplayCol(state, { withPrefix = true } = {}) {
+  const before = String(state.buffer || '').slice(0, state.cursor || 0);
+  const newlineIdx = before.lastIndexOf('\n');
+  const lineSlice = newlineIdx === -1 ? before : before.slice(newlineIdx + 1);
+  const inLine = stringWidth(lineSlice);
+  if (!withPrefix) return inLine;
+  const prefix = newlineIdx === -1 ? PROMPT_WIDTH : CONTINUATION_WIDTH;
+  return prefix + inLine;
+}
+
+export function makeEditorState({ history = [] } = {}) {
+  return {
+    buffer: '',
+    cursor: 0,
+    historyIdx: history.length,
+    history,
+    lastSubmit: null,
+    lastWasPaste: false,
+  };
+}
+
+// Pure reducer: apply one key event to the editor state, returning the next
+// state. Cursor-aware (v6.4) — insert/Backspace act AT the cursor, with
+// Left/Right/Home/End/Ctrl+A/E/K/W movement & edit shortcuts.
+export function applyKey(state, evt) {
+  const { input = '', key = {}, paste = false } = evt;
+  const next = { ...state, lastSubmit: null, lastWasPaste: false };
+
+  if (key.return && key.shift) {
+    // Insert a literal newline AT the cursor (cursor-aware multiline edit).
+    const r = insertAt(state.buffer, state.cursor, '\n');
+    next.buffer = r.buffer;
+    next.cursor = r.cursor;
+    return next;
+  }
+  if (key.return) {
+    next.lastSubmit = state.buffer;
+    next.buffer = '';
+    next.cursor = 0;
+    next.historyIdx = state.history.length;
+    return next;
+  }
+  if (key.upArrow) {
+    const idx = Math.max(0, state.historyIdx - 1);
+    if (state.history[idx] !== undefined) {
+      next.historyIdx = idx;
+      next.buffer = state.history[idx];
+      next.cursor = next.buffer.length;
+    }
+    return next;
+  }
+  if (key.downArrow) {
+    const idx = Math.min(state.history.length, state.historyIdx + 1);
+    next.historyIdx = idx;
+    next.buffer = state.history[idx] !== undefined ? state.history[idx] : '';
+    next.cursor = next.buffer.length;
+    return next;
+  }
+  // ─── Mid-line cursor movement (v6.4) ──────────────────────────────────
+  if (key.leftArrow) {
+    next.cursor = prevCodepointIndex(state.buffer, state.cursor);
+    return next;
+  }
+  if (key.rightArrow) {
+    next.cursor = nextCodepointIndex(state.buffer, state.cursor);
+    return next;
+  }
+  // Home / Ctrl+A → start of the current line; End / Ctrl+E → end of it.
+  if (key.home || (key.ctrl && (input === 'a' || input === 'A'))) {
+    next.cursor = lineStartIndex(state.buffer, state.cursor);
+    return next;
+  }
+  if (key.end || (key.ctrl && (input === 'e' || input === 'E'))) {
+    next.cursor = lineEndIndex(state.buffer, state.cursor);
+    return next;
+  }
+  // Ctrl+K kill-to-end-of-line; Ctrl+W delete-word-backward.
+  if (key.ctrl && (input === 'k' || input === 'K')) {
+    const r = killToLineEnd(state.buffer, state.cursor);
+    next.buffer = r.buffer;
+    next.cursor = r.cursor;
+    return next;
+  }
+  if (key.ctrl && (input === 'w' || input === 'W')) {
+    const r = deleteWordBackward(state.buffer, state.cursor);
+    next.buffer = r.buffer;
+    next.cursor = r.cursor;
+    return next;
+  }
+  if (key.backspace || key.delete) {
+    // Delete the codepoint BEFORE the cursor (not always the end-of-buffer).
+    const r = deleteBackward(state.buffer, state.cursor);
+    next.buffer = r.buffer;
+    next.cursor = r.cursor;
+    return next;
+  }
+  if (input) {
+    // Other Ctrl/Meta chords are not insertable text — swallow so they
+    // don't land as literal letters in the buffer.
+    if (key.ctrl || key.meta) return next;
+    // Insert AT the cursor (was: always append at end).
+    const r = insertAt(state.buffer, state.cursor, input);
+    next.buffer = r.buffer;
+    next.cursor = r.cursor;
+    next.lastWasPaste = paste || input.length >= 16;
+    return next;
+  }
+  return next;
+}
+
+// Pure helper used by the slash-popup branch in <Editor/>. Replaces the
+// editor buffer with `${cmd} ` (trailing space so the user can keep typing
+// args without an extra keystroke). Does NOT submit.
+export function fillSlashCommand(state, cmd) {
+  const filled = cmd.endsWith(' ') ? cmd : cmd + ' ';
+  return {
+    ...state,
+    buffer: filled,
+    cursor: filled.length,
+    lastSubmit: null,
+    lastWasPaste: false,
+  };
+}
+
+// Replace the whitespace-delimited token that ENDS the buffer with `value`.
+// Used by slash-argument completion: the user types `/model gpt`, picks
+// `gpt-4.1` from the modal, and the partial token is swapped in place. Does NOT
+// submit. Leaves the cursor at the end of the inserted value. When the buffer
+// ends in a space (empty arg token), `value` is appended.
+export function fillArgToken(state, value) {
+  const buffer = state.buffer || '';
+  // Replace the token after the last separator. Comma is a separator too so
+  // comma-lists (`/skill a,b`) complete the trailing segment in place.
+  const start = Math.max(buffer.lastIndexOf(' '), buffer.lastIndexOf(',')) + 1;
+  const filled = buffer.slice(0, start) + value;
+  return {
+    ...state,
+    buffer: filled,
+    cursor: filled.length,
+    lastSubmit: null,
+    lastWasPaste: false,
+  };
+}
+
+// Step one codepoint LEFT of `idx` in `buffer` (UTF-16 aware). Returns the
+// new index (>= 0). If the char before idx is a low surrogate, skip both
+// units so we land before the full astral codepoint.
+export function prevCodepointIndex(buffer, idx) {
+  if (idx <= 0) return 0;
+  const code = buffer.charCodeAt(idx - 1);
+  // Low surrogate (0xDC00–0xDFFF) preceded by a high surrogate → 2 units.
+  if (code >= 0xdc00 && code <= 0xdfff && idx >= 2) {
+    const hi = buffer.charCodeAt(idx - 2);
+    if (hi >= 0xd800 && hi <= 0xdbff) return idx - 2;
+  }
+  return idx - 1;
+}
+
+// Step one codepoint RIGHT of `idx` in `buffer`. Returns the new index
+// (<= buffer.length). High surrogate at idx → consume both units.
+export function nextCodepointIndex(buffer, idx) {
+  const len = buffer.length;
+  if (idx >= len) return len;
+  const code = buffer.charCodeAt(idx);
+  if (code >= 0xd800 && code <= 0xdbff && idx + 1 < len) {
+    const lo = buffer.charCodeAt(idx + 1);
+    if (lo >= 0xdc00 && lo <= 0xdfff) return idx + 2;
+  }
+  return idx + 1;
+}
+
+// Index of the start of the current logical line (after the last '\n' at or
+// before `idx`). Home / Ctrl+A target.
+export function lineStartIndex(buffer, idx) {
+  const nl = buffer.lastIndexOf('\n', Math.max(0, idx - 1));
+  return nl === -1 ? 0 : nl + 1;
+}
+
+// Index of the end of the current logical line (the next '\n' at or after
+// `idx`, or end of buffer). End / Ctrl+E target.
+export function lineEndIndex(buffer, idx) {
+  const nl = buffer.indexOf('\n', idx);
+  return nl === -1 ? buffer.length : nl;
+}
+
+// Insert `text` at `cursor`, returning { buffer, cursor }. Cursor advances by
+// the inserted text's code-unit length so it rests just after the insertion.
+export function insertAt(buffer, cursor, text) {
+  const before = buffer.slice(0, cursor);
+  const after = buffer.slice(cursor);
+  return { buffer: before + text + after, cursor: cursor + text.length };
+}
+
+// Backspace: delete one codepoint BEFORE the cursor (no-op at column 0).
+export function deleteBackward(buffer, cursor) {
+  if (cursor <= 0) return { buffer, cursor };
+  const start = prevCodepointIndex(buffer, cursor);
+  return { buffer: buffer.slice(0, start) + buffer.slice(cursor), cursor: start };
+}
+
+// Ctrl+K: kill from the cursor to the end of the current logical line.
+export function killToLineEnd(buffer, cursor) {
+  const end = lineEndIndex(buffer, cursor);
+  return { buffer: buffer.slice(0, cursor) + buffer.slice(end), cursor };
+}
+
+// Ctrl+W: delete the whitespace-delimited word before the cursor. Eats any
+// run of trailing spaces first (so "foo " + Ctrl+W removes "foo "), matching
+// readline's unix-word-rubout.
+export function deleteWordBackward(buffer, cursor) {
+  let i = cursor;
+  while (i > 0 && /\s/.test(buffer[i - 1])) i -= 1;   // trailing whitespace
+  while (i > 0 && !/\s/.test(buffer[i - 1])) i -= 1;   // the word itself
+  return { buffer: buffer.slice(0, i) + buffer.slice(cursor), cursor: i };
+}

package/tui/hud.mjs

@@ -0,0 +1,111 @@
+// tui/hud.mjs — claude-hud-style status row. The compact status bar shows
+// provider · model · ctx; with the HUD enabled (cfg.chat.hud, default on) a
+// second line adds real-time usage, session cost, the trainer model, and the
+// orchestrator shape. Toggle from /config → "HUD status bar" or the /hud slash.
+//
+// Kept out of repl.mjs/chat.mjs (both at the file-size ratchet) so the gauge
+// can grow without those files growing.
+
+import { costFromUsage } from '../providers/rates.mjs';
+import { resolveTrainer } from '../providers/registry.mjs';
+import chalk from 'chalk';
+
+// HUD on unless explicitly disabled — new users see the richer bar by default.
+export function hudEnabled(cfg) {
+  return !cfg || !cfg.chat || cfg.chat.hud !== false;
+}
+
+// Build the HUD field bundle from live chat state, or null when disabled.
+// `usage` is the running session usage (_inkRunningUsage / runningUsage).
+export function hudStatus(cfg, usage) {
+  if (!hudEnabled(cfg)) return null;
+  const u = usage || {};
+  const inTok = Number(u.inputTokens) || 0;
+  const outTok = Number(u.outputTokens) || 0;
+  // Session cost: a provider-reported total (claude-cli) or rate-card math.
+  let costUsd = 0;
+  try {
+    const c = costFromUsage({ provider: cfg && cfg.provider, model: cfg && cfg.model, usage: u }, cfg && cfg.rates);
+    costUsd = (c && Number(c.cost)) || 0;
+  } catch (_) { /* no rate card → no cost segment */ }
+  // Trainer (learning-loop) model — "auto"/omitted mirrors the chat provider.
+  let trainer = '';
+  try {
+    const t = resolveTrainer(cfg || {});
+    if (t && t.provider) trainer = t.model ? `${t.provider}:${t.model}` : t.provider;
+  } catch (_) { /* ignore */ }
+  // Orchestrator shape, only when it's the active provider.
+  let orch = '';
+  if (cfg && cfg.provider === 'orchestrator' && cfg.orchestrator) {
+    const o = cfg.orchestrator;
+    const w = Array.isArray(o.workers) ? o.workers.length : 0;
+    orch = `${o.planner || '?'} +${w}w`;
+  }
+  return { inTok, outTok, costUsd, trainer, orch };
+}
+
+const fmtTok = (n) => (n >= 1000 ? (n / 1000).toFixed(1) + 'k' : String(n | 0));
+
+// Context gauge: compact counts + percent + a tiny inline bar, with a warn/
+// danger marker once the window fills up. Pure (used, budget) → string so the
+// status bar and tests can share it. chalk is level-gated (0 under NO_COLOR /
+// non-TTY), so colors degrade to plain text automatically; the warn/danger
+// markers are also plain glyphs so they survive even with color off.
+const GAUGE_CELLS = 8;
+const GAUGE_FILLED = '▰';
+const GAUGE_EMPTY = '▱';
+export function formatGauge(used, budget) {
+  const u = Number(used);
+  const b = Number(budget);
+  if (!Number.isFinite(u) || !Number.isFinite(b) || b <= 0) return '--';
+  const pct = (u / b) * 100;
+  const filled = Math.min(GAUGE_CELLS, Math.max(0, Math.round((pct / 100) * GAUGE_CELLS)));
+  const bar = GAUGE_FILLED.repeat(filled) + GAUGE_EMPTY.repeat(GAUGE_CELLS - filled);
+  const body = `${fmtTok(u)}/${fmtTok(b)} ${Math.round(pct)}% ${bar}`;
+  // >=95% danger, >=80% warn — prefix a plain marker so it's legible without
+  // color, then tint the whole gauge so it stands out at a glance.
+  if (pct >= 95) return chalk.red(`! ${body}`);
+  if (pct >= 80) return chalk.yellow(`⚠ ${body}`);
+  return body;
+}
+
+// Render the HUD line (the extra row below the compact status line). Returns
+// '' when there's nothing worth showing.
+export function formatHudRow(f) {
+  if (!f) return '';
+  const seg = [`↑${fmtTok(f.inTok)} ↓${fmtTok(f.outTok)} tok`];
+  if (f.costUsd > 0) seg.push(`$${f.costUsd.toFixed(4)}`);
+  if (f.trainer) seg.push(`trainer ${f.trainer}`);
+  if (f.orch) seg.push(`orch ${f.orch}`);
+  return seg.join('   ');
+}
+
+// `/hud [on|off]` — toggle the HUD row. /config delegates here. No arg opens an
+// on/off picker in the Ink UI, or flips the current value on the legacy path.
+export async function hudSlash(args, ctx) {
+  const cfg = ctx.readConfig ? ctx.readConfig() : (ctx.cfg || {});
+  const cur = hudEnabled(cfg);
+  const a = String(args || '').trim().toLowerCase();
+  let next;
+  if (a === 'on') next = true;
+  else if (a === 'off') next = false;
+  else if (!a && typeof ctx.openPicker === 'function') {
+    const picked = await ctx.openPicker({
+      kind: 'menu',
+      title: 'HUD status bar',
+      subtitle: `currently ${cur ? 'on' : 'off'}`,
+      items: [
+        { id: 'on', label: 'on', desc: 'usage / cost / trainer / orchestrator row' },
+        { id: 'off', label: 'off', desc: 'compact bar (provider · model · ctx)' },
+      ],
+    });
+    const id = picked && typeof picked === 'object' ? picked.id : picked;
+    if (id !== 'on' && id !== 'off') return 'hud: cancelled';
+    next = id === 'on';
+  } else next = !cur;
+  cfg.chat = (cfg.chat && typeof cfg.chat === 'object') ? cfg.chat : {};
+  cfg.chat.hud = next;
+  if (ctx.writeConfig) ctx.writeConfig(cfg);
+  if (ctx.cfg) ctx.cfg.chat = cfg.chat; // mirror so getStatus sees it live
+  return `HUD ${next ? 'on' : 'off'}`;
+}

package/tui/login_flow.mjs

@@ -0,0 +1,113 @@
+// tui/login_flow.mjs — interactive "connect / log in" flow for the keyless
+// CLI providers, factored out of slash_dispatcher.mjs so the dispatcher stays
+// small. Drives the inline menu (browser OAuth / paste API key / install) that
+// /provider and /login surface when codex-cli or gemini-cli is picked but not
+// signed in. The actual subprocess (codex login, gemini, npm i -g) runs from
+// the chat post-loop guard via providers/cli_login.mjs once Ink releases stdin;
+// here we only decide what to queue and persist the chosen provider.
+
+import { CLI_LOGIN_PROVIDERS, cliLoginStatus } from '../providers/cli_login.mjs';
+import { setAuthKey } from '../providers/auth_store.mjs';
+
+// Persist the chosen provider so the chat re-entered after a foreground login
+// comes back on it. Best-effort; the in-memory switch already happened.
+function _persistProvider(ctx, provName) {
+  try {
+    if (typeof ctx.readConfig === 'function' && typeof ctx.writeConfig === 'function') {
+      const c = ctx.readConfig();
+      c.provider = provName;
+      ctx.writeConfig(c);
+      if (ctx.cfg) ctx.cfg.provider = provName;
+    }
+  } catch (_) { /* best-effort */ }
+}
+
+// Detect connection state for a keyless CLI provider and, when not connected,
+// offer an inline action. Returns:
+//   null                 already connected / not a CLI-login provider / can't prompt
+//   { exit:true }        a foreground action was queued (ctx.requestLogin set)
+//   { exit:false, msg }  handled inline (key saved / skipped / cancelled)
+export async function maybeLoginForCli(ctx, provName, { promptText, statusDeps } = {}) {
+  const spec = CLI_LOGIN_PROVIDERS[provName];
+  if (!spec) return null;
+  if (typeof ctx.openPicker !== 'function') return null;
+  const hasStoredKey = typeof ctx.resolveAuthKey === 'function' && !!ctx.resolveAuthKey(provName);
+  let status;
+  try {
+    status = await cliLoginStatus(provName, { hasStoredKey, ...(statusDeps || {}) });
+  } catch (_) {
+    return null; // detection failure must not block the provider switch
+  }
+  if (!status.supported || status.loggedIn) return null;
+
+  const items = [];
+  if (status.binMissing) {
+    items.push({ id: 'install', label: `▶ install ${spec.pkg}`, desc: `runs: npm i -g ${spec.pkg} (then sign in)` });
+  } else {
+    items.push({ id: 'browser', label: '▶ log in via browser', desc: `runs: ${spec.browserHint}` });
+  }
+  items.push({ id: 'apikey', label: 'paste an API key instead', desc: spec.apiKeyHint });
+  items.push({ id: 'skip', label: 'skip for now', desc: `connect later via /login ${provName}` });
+
+  const picked = await ctx.openPicker({
+    kind: 'menu',
+    title: `${provName} — not connected`,
+    subtitle: status.binMissing ? `the \`${spec.bin}\` CLI is not installed` : `\`${spec.bin}\` is installed but not signed in`,
+    items,
+  });
+  const id = picked && typeof picked === 'object' ? picked.id : picked;
+  if (!id || id === 'skip') {
+    return { exit: false, msg: `provider → ${provName}  (not connected — run /login ${provName} when ready)` };
+  }
+  if (id === 'browser' || id === 'install') {
+    ctx.requestLogin = { provider: provName, mode: id };
+    return { exit: true };
+  }
+  // id === 'apikey'
+  const key = typeof promptText === 'function'
+    ? await promptText(ctx, { title: `${provName} — API key`, subtitle: spec.apiKeyHint })
+    : null;
+  if (!key) return { exit: false, msg: 'cancelled' };
+  if (provName === 'codex-cli') {
+    // codex persists the key itself via `codex login --with-api-key` (stdin),
+    // which needs a subprocess — defer to the foreground guard.
+    ctx.requestLogin = { provider: provName, mode: 'apikey', apiKey: key };
+    return { exit: true };
+  }
+  // gemini: save the key in lazyclaw; the provider injects it as GEMINI_API_KEY.
+  if (typeof ctx.readConfig === 'function' && typeof ctx.writeConfig === 'function') {
+    const next = setAuthKey({ readConfig: ctx.readConfig, writeConfig: ctx.writeConfig, provider: provName, key });
+    if (ctx.cfg && next) { ctx.cfg.authProfiles = next.authProfiles; ctx.cfg.authActiveProfile = next.authActiveProfile; }
+  }
+  return { exit: false, msg: `✓ ${provName} API key saved — provider → ${provName}` };
+}
+
+// Called from /provider after a keyless CLI provider is selected. Returns a
+// string to surface (or 'EXIT' to hand off to the foreground login), or null
+// to let /provider print its default "provider → x" line.
+export async function runProviderLogin(ctx, provName, deps = {}) {
+  const login = await maybeLoginForCli(ctx, provName, deps);
+  if (login && login.exit) { _persistProvider(ctx, provName); return 'EXIT'; }
+  return (login && login.msg) ? login.msg : null;
+}
+
+// `/login [provider]` — connect a keyless CLI provider without leaving chat.
+export async function loginSlash(args, ctx, deps = {}) {
+  const provName = (args && args.trim()) || (ctx.getActiveProvName ? ctx.getActiveProvName() : '');
+  const spec = CLI_LOGIN_PROVIDERS[provName];
+  if (!spec) {
+    const known = Object.keys(CLI_LOGIN_PROVIDERS).join(' · ');
+    return `/login is for the keyless CLI providers (${known}). Current: ${provName || '(none)'}.`;
+  }
+  if (typeof ctx.openPicker !== 'function') {
+    return `/login needs the interactive UI. To connect ${provName}, run \`${spec.browserHint}\` in a shell, or set an API key.`;
+  }
+  const login = await maybeLoginForCli(ctx, provName, deps);
+  if (login && login.exit) {
+    _persistProvider(ctx, provName);
+    if (ctx.setActiveProvName) ctx.setActiveProvName(provName);
+    return 'EXIT';
+  }
+  if (login && login.msg) return login.msg;
+  return `${provName} is already connected.`;
+}

package/tui/modal_picker.mjs

@@ -33,6 +33,10 @@ const DEFAULT_MAX_ROWS = 12;
 //   selectedIndex:number — host-owned selection cursor (in filtered list)
 //   query:string         — host-owned filter buffer
 //   searchable?:boolean  — show the filter row (default true)
+//   secret?:boolean      — mask the typed query (api-key / token entry) so it
+//                          isn't echoed to scrollback / screen-share. The host
+//                          still owns + submits the real buffer; this only
+//                          changes how it is drawn.
 //   maxRows?:number      — viewport height (default 12)
 //   toast?:string        — transient one-line message below the list
 //   columns?:number      — terminal width override (tests)
@@ -43,6 +47,7 @@ export function ModalPicker({
   selectedIndex,
   query,
   searchable = true,
+  secret = false,
   maxRows = DEFAULT_MAX_ROWS,
   toast,
   columns,
@@ -74,7 +79,11 @@ export function ModalPicker({
   }
   // Filter row.
   if (searchable) {
-    const q = String(query || '');
+    const raw = String(query || '');
+    // For a secret field, never echo the characters — render one bullet per
+    // *visible* glyph (so CJK width stays correct) while the host keeps the
+    // real buffer for submission.
+    const q = secret ? '•'.repeat(stringWidth(raw)) : raw;
     const tail = total > 0 ? `${total} match${total === 1 ? '' : 'es'}` : 'no matches';
     rows.push(React.createElement(
       Text, { key: 'filter' },