mixdog 0.9.1 → 0.9.2

package/src/tui/components/PromptInput.jsx

@@ -18,7 +18,7 @@
 import React, { useEffect, useLayoutEffect, useState, useRef } from 'react';
 import { Box, Text, useInput, usePaste, useStdin } from 'ink';
 import stringWidth from 'string-width';
-import { theme } from '../theme.mjs';
+import { theme, surfaceBackground } from '../theme.mjs';
 import {
   caretPosition,
   clearSelection,
@@ -96,14 +96,36 @@ function draftStateEqual(a, b) {
   );
 }
 
-function isCtrlEnterSequence(input) {
+// Recognize a MODIFIED Enter delivered via the kitty keyboard protocol
+// (\x1b[13;<mod>u) or modifyOtherKeys (\x1b[27;<mod>;13~). The xterm modifier
+// param is (1 + bitmask) where the bitmask bits are shift=1, alt=2, ctrl=4. We
+// treat Ctrl+Enter AND Shift+Enter (the two common "insert newline" chords) as a
+// newline, so we match when the shift OR ctrl bit is set. Ctrl+J is handled
+// separately as the protocol-independent fallback.
+const MODIFIED_ENTER_SHIFT_OR_CTRL = 1 | 4;
+function isModifiedEnterSequence(input) {
   const text = String(input ?? '');
   const body = text.startsWith('\x1b[') ? text.slice(2) : text.startsWith('[') ? text.slice(1) : '';
   if (!body) return false;
   const kitty = /^13;(\d+)(?::\d+)?(?:;[\d:]+)?u$/.exec(body);
-  if (kitty) return ((Number(kitty[1]) - 1) & 4) !== 0;
+  if (kitty) return ((Number(kitty[1]) - 1) & MODIFIED_ENTER_SHIFT_OR_CTRL) !== 0;
   const modifyOtherKeys = /^27;(\d+);13~$/.exec(body);
-  return Boolean(modifyOtherKeys && (((Number(modifyOtherKeys[1]) - 1) & 4) !== 0));
+  return Boolean(modifyOtherKeys && (((Number(modifyOtherKeys[1]) - 1) & MODIFIED_ENTER_SHIFT_OR_CTRL) !== 0));
+}
+
+// Recognize ANY modified Enter (any modifier bitmask, e.g. Alt+Enter \x1b[13;3u
+// / \x1b[27;3;13~). Used to CONSUME modified-Enter sequences we don't map to a
+// newline (Alt-only, etc.) so they aren't typed into the prompt as raw CSI text
+// under modifyOtherKeys. Plain Enter (mod param = 1, bitmask 0) is intentionally
+// NOT matched, so it still submits.
+function isAnyModifiedEnterSequence(input) {
+  const text = String(input ?? '');
+  const body = text.startsWith('\x1b[') ? text.slice(2) : text.startsWith('[') ? text.slice(1) : '';
+  if (!body) return false;
+  const kitty = /^13;(\d+)(?::\d+)?(?:;[\d:]+)?u$/.exec(body);
+  if (kitty) return (Number(kitty[1]) - 1) !== 0;
+  const modifyOtherKeys = /^27;(\d+);13~$/.exec(body);
+  return Boolean(modifyOtherKeys && ((Number(modifyOtherKeys[1]) - 1) !== 0));
 }
 
 export function PromptInput({
@@ -127,6 +149,7 @@ export function PromptInput({
   onRestoreQueued,
   onHistoryNavigate,
   onPasteText,
+  onVoiceToggle,
   selectionRef,
   valueRef,
   boxRectRef,
@@ -436,6 +459,17 @@ export function PromptInput({
       return;
     }
 
+    // Safety net: drop CSI-private replies/fragments like \x1b[?<n>u / \x1b[?...c
+    // (escape may be stripped → `[?7u` / `[?1;0c`). We no longer query the
+    // terminal (enables are written unconditionally at raw-mode-on), so these
+    // should not normally appear — but a terminal that volunteers such a report
+    // must never type it into the prompt. The required `?` after `[` means this
+    // never matches a real kitty KEY event (those are \x1b[<codepoint>;<mods>u,
+    // no `?`); the optional final byte also discards any partial fragment.
+    if (/^(?:\x1b)?\[\?[\d;]*[uc]?$/.test(rawInput)) {
+      return;
+    }
+
     const rawUpArrow = rawInput === '\x1b[A' || rawInput === '\x1bOA' || rawInput === '[A' || rawInput === 'OA';
     const rawDownArrow = rawInput === '\x1b[B' || rawInput === '\x1bOB' || rawInput === '[B' || rawInput === 'OB';
     // Shift+Arrow modifier sequences (xterm `\x1b[1;2<dir>`, rxvt `\x1b[<dir>`
@@ -452,9 +486,33 @@ export function PromptInput({
     const lineBreakIndex = rawInput.search(/[\r\n]/);
     const rawEnter = rawInput === '\r' || rawInput === '\n' || rawInput === '\r\n';
     const trailingEnterPrefix = singleTrailingLineBreakPrefix(rawInput);
-    const rawCtrlEnter = isCtrlEnterSequence(rawInput);
+    const rawCtrlEnter = isModifiedEnterSequence(rawInput);
     const modifiedLineBreak = key.shift || key.meta || key.ctrl || rawCtrlEnter;
 
+    // Ctrl+J is the protocol-INDEPENDENT newline that works on every terminal.
+    //  • Legacy / modifyOtherKeys terminals: Ctrl+J is a lone '\n' (0x0A). A real
+    //    Enter is CR, which ink marks key.return (name 'return'); a lone '\n'
+    //    arrives as name 'enter' with key.return false. A multi-char paste that
+    //    contains '\n' is length > 1 (handled by the paste paths below).
+    //  • Kitty protocol active: Ctrl+J arrives as \x1b[106;5u, which ink decodes
+    //    to input 'j' with key.ctrl set.
+    // Either way → insert a newline. This MUST run before the trailing-newline/
+    // submit paths, since singleTrailingLineBreakPrefix('\n') returns '' (not
+    // null) and would otherwise route a bare Ctrl+J to submit.
+    if ((rawInput === '\n' && !key.return) || (key.ctrl && inputKey === 'j')) {
+      updateDraft((d) => replaceSelection(d, '\n'));
+      return;
+    }
+
+    // A modified Enter that is NOT a newline chord (e.g. Alt+Enter \x1b[13;3u or
+    // \x1b[27;3;13~). isModifiedEnterSequence already handled shift/ctrl above
+    // (→ newline); here we CONSUME any other modified Enter so its raw CSI bytes
+    // never type into the prompt under modifyOtherKeys. Plain Enter (mod=1) is
+    // not matched and still submits below.
+    if (!rawCtrlEnter && isAnyModifiedEnterSequence(rawInput)) {
+      return;
+    }
+
     const pasteFallback = lineBreakIndex !== -1 && trailingEnterPrefix === null && !rawEnter && (rawInput.length > 1 || !key.return);
     if (pasteFallback) {
       handleExternalPaste(rawInput, { source: 'paste-fallback' });
@@ -719,6 +777,18 @@ export function PromptInput({
       return;
     }
 
+    // Ctrl+Space voice-record toggle. Two encodings observed across
+    // terminals: a lone NUL byte (legacy Ctrl+Space, many terminals send
+    // 0x00 directly) or the kitty CSI-u form `\x1b[32;5u` (codepoint 32
+    // = space, modifier 5 = 1+4 = ctrl). Consumed here — never typed into
+    // the prompt — and forwarded to the App-level recorder state machine
+    // via onVoiceToggle; a no-op when the prop isn't wired (e.g. embedded
+    // pickers) so this never throws.
+    if (rawInput === '\x00' || /^(?:\x1b)?\[32;5u$/.test(rawInput)) {
+      onVoiceToggle?.();
+      return;
+    }
+
     // Printable input (ignore other control keys). Strip any embedded SGR mouse
     // sequences as a belt-and-suspenders guard (the early return above catches
     // whole-sequence inputs; this removes partials that rode in with real text).
@@ -739,6 +809,12 @@ export function PromptInput({
   // resetAfterCommit BEFORE React layout effects — that lag made the 2nd+ char
   // appear to land behind the caret (the observed scramble). Computing inside
   // the fork, from the real layout + current refs, fixes that by construction.
+  // Park the hardware cursor only when the prompt is a real, active edit target.
+  // The anchor stays enabled during an active turn too: suppressing it while
+  // the draft was empty (an earlier guard against a one-frame row-off paint
+  // when the transcript height changed mid-turn) made the cursor vanish for
+  // the whole turn after Enter, which reads as "the caret disappeared". A
+  // momentary one-frame drift is the lesser evil versus a missing caret.
   cursorEnabledRef.current = !disabled && isRawModeSupported;
   installCursorAnchor();
 
@@ -760,8 +836,8 @@ export function PromptInput({
   const hintMeta = hintStyle(hintTone);
 
   return (
-    <Box ref={boxRef} flexDirection="row" flexGrow={1} flexShrink={1} backgroundColor={theme.background}>
-      <Box width={IME_LEFT_GUARD_COLUMNS} flexShrink={0} backgroundColor={theme.background} />
+    <Box ref={boxRef} flexDirection="row" width="100%" flexGrow={1} flexShrink={1} backgroundColor={surfaceBackground()}>
+      <Box width={IME_LEFT_GUARD_COLUMNS} flexShrink={0} backgroundColor={surfaceBackground()} />
       <Text color={theme.text} wrap="hard">{renderedValue}</Text>
       {!value && hint ? (
         <Box marginLeft={-1}>

package/src/tui/components/QueuedCommands.jsx

@@ -22,7 +22,7 @@ export function QueuedCommands({ queued, columns }) {
   // Windows auto-wrap/scroll that drifts the alt-screen frame (see UserMessage).
   const bandColumns = Math.max(1, columns - 1);
   return (
-    <Box marginTop={1} flexDirection="column">
+    <Box flexDirection="column">
       {queued.map((item) => {
         // Truncate to 1 line so the row reservation (queued.length in App.jsx)
         // stays accurate — wrapped text would push the input box off-screen.

package/src/tui/components/SlashCommandPalette.jsx

@@ -65,6 +65,8 @@ export function SlashCommandPalette({ commands, selectedIndex = 0, title = 'Comm
   const descriptionWidth = Math.max(0, columns - labelWidth - 12);
   // Standard panel rhythm: title row, blank, description/hint row, blank, content.
   const description = truncateText(SLASH_DESCRIPTION, Math.max(0, columns - 4));
+  const titleWidth = stringWidth(String(title || ''));
+  const help = truncateText(SLASH_HELP, Math.max(0, columns - titleWidth - 7));
 
   return (
     <Box flexDirection="column" flexShrink={0} width="100%">
@@ -76,8 +78,8 @@ export function SlashCommandPalette({ commands, selectedIndex = 0, title = 'Comm
         width="100%"
       >
         <Box flexDirection="row" justifyContent="space-between">
-          <Text color={theme.panelTitle}>{title}</Text>
-          <Text color={theme.subtle}>{SLASH_HELP}</Text>
+          <Text color={theme.panelTitle} wrap="truncate">{title}</Text>
+          <Text color={theme.subtle} wrap="truncate">{help}</Text>
         </Box>
         <Text> </Text>
         <Text color={theme.subtle}>{description || ' '}</Text>
@@ -103,14 +105,15 @@ export function SlashCommandPalette({ commands, selectedIndex = 0, title = 'Comm
 const CommandRow = React.memo(function CommandRow({ command, isSelected, labelWidth, descriptionWidth, query }) {
   const label = truncateText(commandDisplayLabel(command, query), labelWidth);
   const description = truncateText(command.description, descriptionWidth);
+  const rowText = isSelected ? theme.selectionText : theme.text;
 
   return (
-    <Box flexDirection="row" width="100%" backgroundColor={isSelected ? theme.userMessageBackground : undefined}>
-      <Text color={theme.text}>
+    <Box flexDirection="row" width="100%" backgroundColor={isSelected ? theme.selectionBackground : undefined}>
+      <Text color={rowText}>
         {padCells(label, labelWidth)}
       </Text>
       {description ? (
-        <Text color={theme.text}>
+        <Text color={rowText}>
           {'  '}
           {description}
         </Text>

package/src/tui/components/Spinner.jsx

@@ -58,8 +58,6 @@ const MODE_VERBS = {
   responding: ['Responding', 'Composing', 'Writing', 'Wrapping up'],
 };
 
-const ERROR_RED = { r: 171, g: 43, b: 63 };
-
 function interpolateColor(a, b, t) {
   return {
     r: Math.round(a.r + (b.r - a.r) * t),
@@ -117,6 +115,7 @@ function spinnerRgb() {
     SPINNER_GLYPH_RGB: parseRgb(theme.spinnerGlyph) ?? { r: 240, g: 240, b: 240 },
     THINKING_INACTIVE: parseRgb(theme.thinkingBase) ?? parseRgb(theme.thinkingAccent) ?? { r: 153, g: 153, b: 153 },
     THINKING_SHIMMER: parseRgb(theme.thinkingGlow) ?? { r: 255, g: 205, b: 175 },
+    STALL_RGB: parseRgb(theme.error) ?? { r: 171, g: 43, b: 63 },
   };
 }
 
@@ -172,7 +171,7 @@ function tokenModeGlyph(mode) {
 
 export function Spinner({ verb = 'Working', startedAt, outputTokens = 0, tokens = 0, thinking = false, thinkingActiveSince = 0, mode = 'responding', columns = 80, marginTop = 1 }) {
   useAnimation({ interval: FRAME_MS });
-  const { TEXT_RGB, SHIMMER_RGB, SPINNER_GLYPH_RGB, THINKING_INACTIVE, THINKING_SHIMMER } = spinnerRgb();
+  const { TEXT_RGB, SHIMMER_RGB, SPINNER_GLYPH_RGB, THINKING_INACTIVE, THINKING_SHIMMER, STALL_RGB } = spinnerRgb();
   const now = Date.now();
   const elapsedMs = startedAt ? Math.max(0, now - startedAt) : 0;
   const frame = Math.floor(elapsedMs / FRAME_MS);
@@ -222,17 +221,18 @@ export function Spinner({ verb = 'Working', startedAt, outputTokens = 0, tokens
   const glyphColor = stalledIntensity > 0
     ? toRgbString(interpolateColor(
         SPINNER_GLYPH_RGB,
-        ERROR_RED,
+        STALL_RGB,
         stalledIntensity
       ))
     : theme.spinnerGlyph;
 
   // --- Verb shimmer (traveling highlight) ---
-  if (displayVerbModeRef.current !== mode || !displayVerbRef.current) {
-    displayVerbModeRef.current = mode;
+  if (!displayVerbRef.current) {
     displayVerbRef.current = stableModeVerb(mode, verb);
     nextVerbCheckRef.current = nextVerbCheckAt(now);
-  } else if (now >= nextVerbCheckRef.current) {
+  }
+  displayVerbModeRef.current = mode;
+  if (now >= nextVerbCheckRef.current) {
     displayVerbRef.current = chooseNextVerb(mode, verb, displayVerbRef.current);
     nextVerbCheckRef.current = nextVerbCheckAt(now);
   }

package/src/tui/components/StatusLine.jsx

@@ -9,7 +9,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Box, Text } from 'ink';
 import { displayModelName, shortenModelName } from '../../ui/model-display.mjs';
-import { theme } from '../theme.mjs';
+import { theme, surfaceBackground } from '../theme.mjs';
 import {
   normalizeStatuslineAnsi,
   statuslineFooterCacheKey,
@@ -33,6 +33,20 @@ function resetStatuslineModuleLoad() {
 
 const RESET = '\x1b[0m';
 const STATUSLINE_RENDER_DEBOUNCE_MS = 150;
+/** Background import of statusline.mjs before the +1000ms full-render tick. */
+const STATUSLINE_MODULE_PREWARM_DELAY_MS = 300;
+
+let statuslineModulePrewarmScheduled = false;
+
+function scheduleStatuslineModulePrewarm() {
+  if (statuslineModulePrewarmScheduled) return;
+  statuslineModulePrewarmScheduled = true;
+  const timer = setTimeout(() => {
+    loadStatuslineModule().catch(() => {});
+  }, STATUSLINE_MODULE_PREWARM_DELAY_MS);
+  timer.unref?.();
+}
+
 const STATUSLINE_BOOT_FULL_DELAY_MS = 1000;
 const STATUSLINE_BOOT_FULL_DELAY_ACTIVE_MS = 2200;
 const STATUSLINE_BOOT_FULL_RETRY_MS = 2000;
@@ -46,7 +60,7 @@ function isTerminalStatus(statusText) {
 
 function hasRunningStatuslineWorkers(agentWorkers = [], agentJobs = []) {
   for (const worker of Array.isArray(agentWorkers) ? agentWorkers : []) {
-    const tag = String(worker?.tag || worker?.role || worker?.name || '').trim();
+    const tag = String(worker?.tag || worker?.agent || worker?.name || '').trim();
     if (tag && !isTerminalStatus(worker?.stage || worker?.status)) return true;
   }
   for (const job of Array.isArray(agentJobs) ? agentJobs : []) {
@@ -143,8 +157,8 @@ function localContextPct({
       : (localNum(contextWindow) > 0
         ? localNum(contextWindow)
         : (localNum(rawContextWindow) > 0 ? localNum(rawContextWindow) : 200_000)));
-  const compactTrigger = localNum(autoCompactTokenLimit);
-  const window = compactTrigger > 0 && compactTrigger < baseWindow ? compactTrigger : baseWindow;
+  // autoCompactTokenLimit is the compaction trigger only; pct uses the boundary window.
+  const window = baseWindow;
   const s = stats && typeof stats === 'object' ? stats : {};
   const source = String(s.currentContextSource || '').toLowerCase();
   const estimated = localNum(s.currentEstimatedContextTokens);
@@ -190,11 +204,6 @@ const LOCAL_WORKER_SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '
 // render stay in sync (no flicker).
 const LOCAL_L2_SPINNER_FRAME_MS = 120;
 
-function localWorkerSpinnerFrame(now = Date.now()) {
-  const index = Math.floor(now / 160) % LOCAL_WORKER_SPINNER_FRAMES.length;
-  return LOCAL_WORKER_SPINNER_FRAMES[index] || LOCAL_WORKER_SPINNER_FRAMES[0];
-}
-
 function localL2SpinnerFrame(now = Date.now()) {
   const index = Math.floor(now / LOCAL_L2_SPINNER_FRAME_MS) % LOCAL_WORKER_SPINNER_FRAMES.length;
   return LOCAL_WORKER_SPINNER_FRAMES[index] || LOCAL_WORKER_SPINNER_FRAMES[0];
@@ -224,13 +233,13 @@ function localFormatElapsed(ms) {
 function localRunningWorkerCount(agentWorkers = [], agentJobs = []) {
   const seen = new Set();
   for (const worker of Array.isArray(agentWorkers) ? agentWorkers : []) {
-    const tag = String(worker?.tag || worker?.role || worker?.name || '').trim();
+    const tag = String(worker?.tag || worker?.agent || worker?.name || '').trim();
     if (!tag || isTerminalStatus(worker?.stage || worker?.status)) continue;
     seen.add(tag);
   }
   for (const job of Array.isArray(agentJobs) ? agentJobs : []) {
     if (!/running/i.test(String(job?.status || job?.stage || ''))) continue;
-    const tag = String(job?.tag || job?.role || job?.type || job?.task_id || job?.taskId || '').trim();
+    const tag = String(job?.tag || job?.agent || job?.type || job?.task_id || job?.taskId || '').trim();
     if (!tag) continue;
     seen.add(tag);
   }
@@ -241,14 +250,14 @@ function localRunningWorkerTags(agentWorkers = [], agentJobs = [], limit = 3) {
   const tags = [];
   const seen = new Set();
   for (const worker of Array.isArray(agentWorkers) ? agentWorkers : []) {
-    const tag = String(worker?.tag || worker?.role || worker?.name || '').trim();
+    const tag = String(worker?.tag || worker?.agent || worker?.name || '').trim();
     if (!tag || isTerminalStatus(worker?.stage || worker?.status) || seen.has(tag)) continue;
     seen.add(tag);
     tags.push(tag);
   }
   for (const job of Array.isArray(agentJobs) ? agentJobs : []) {
     if (!/running/i.test(String(job?.status || job?.stage || ''))) continue;
-    const tag = String(job?.tag || job?.role || job?.type || job?.task_id || job?.taskId || '').trim();
+    const tag = String(job?.tag || job?.agent || job?.type || job?.task_id || job?.taskId || '').trim();
     if (!tag || seen.has(tag)) continue;
     seen.add(tag);
     tags.push(tag);
@@ -417,12 +426,13 @@ export function normalizeStatusLine(text) {
   return normalizeStatuslineAnsi(text, statusColors(), { reset: RESET });
 }
 
-function workflowModeLabel(workflow = {}) {
+function workflowModeLabel(workflow = {}, remoteEnabled = false) {
   const name = String(workflow?.name || workflow?.id || 'Default').trim() || 'Default';
-  return `${name} Mode`;
+  const base = `${name} Mode`;
+  return remoteEnabled === true ? `Remote / ${base}` : base;
 }
 
-function StatusLineView({ sessionId, clientHostPid, provider, model, effort, fast, cwd, stats, contextWindow, displayContextWindow = 0, compactBoundaryTokens = 0, autoCompactTokenLimit = 0, rawContextWindow, resizeEpoch, agentRevision = '', agentWorkers = [], agentJobs = [], activeTools = null, initialLine = '', workflow = null, themeEpoch = 0 }) {
+function StatusLineView({ sessionId, clientHostPid, provider, model, effort, fast, cwd, stats, contextWindow, displayContextWindow = 0, compactBoundaryTokens = 0, autoCompactTokenLimit = 0, rawContextWindow, resizeEpoch, agentRevision = '', agentWorkers = [], agentJobs = [], activeTools = null, initialLine = '', workflow = null, remoteEnabled = false, themeEpoch = 0 }) {
   const [line, setLine] = useState(() => normalizeStatusLine(initialLine || localBootStatusLine({
     provider,
     model,
@@ -474,6 +484,10 @@ function StatusLineView({ sessionId, clientHostPid, provider, model, effort, fas
     : '';
   const refreshMs = hasActiveStatuslineWork(line, agentWorkers, agentJobs, activeTools) ? STATUSLINE_ACTIVE_REFRESH_MS : STATUSLINE_REFRESH_MS;
 
+  useEffect(() => {
+    scheduleStatuslineModulePrewarm();
+  }, []);
+
   useEffect(() => {
     const timer = setInterval(() => {
       setRefreshTick((tick) => (tick + 1) % 1_000_000);
@@ -634,11 +648,12 @@ function StatusLineView({ sessionId, clientHostPid, provider, model, effort, fas
   }, [sessionId, clientHostPid, provider, model, effort, fast, cwd, stats, contextWindow, displayContextWindow, compactBoundaryTokens, autoCompactTokenLimit, rawContextWindow, resizeEpoch, agentRevision, agentWorkers, agentJobs, activeToolsSignature, refreshTick, themeEpoch]);
 
   const lines = line ? line.split('\n').slice(0, 2) : [' ', ' '];
-  const workflowLabel = workflowModeLabel(workflow);
-  // Footer footprint stays 3 rows total, but L2 sits directly under L1 without
-  // an internal spacer; the remaining row is kept as outer breathing room.
+  const workflowLabel = workflowModeLabel(workflow, remoteEnabled);
+  // Footer footprint stays 3 rows total (L1 + L2 + one spacer). Keep L1/L2 in
+  // the TOP two rows so the statusline is visually attached to the prompt box;
+  // the leftover breathing row sits below L2 at the terminal bottom.
   return (
-    <Box flexDirection="column" width="100%" height={3} overflow="hidden" paddingLeft={2} backgroundColor={theme.background}>
+    <Box flexDirection="column" width="100%" height={3} overflow="hidden" justifyContent="flex-start" paddingLeft={2} backgroundColor={surfaceBackground()}>
       <Box flexDirection="row" width="100%" overflow="hidden">
         <Box flexGrow={1} flexShrink={1} overflow="hidden">
           <Text wrap="truncate">{lines[0] || ' '}</Text>
@@ -647,7 +662,11 @@ function StatusLineView({ sessionId, clientHostPid, provider, model, effort, fas
           <Text color={theme.statusText} wrap="truncate">{workflowLabel}</Text>
         </Box>
       </Box>
-      <Text wrap="truncate">{lines[1] || ' '}</Text>
+      <Box flexDirection="row" width="100%" overflow="hidden">
+        <Box flexGrow={1} flexShrink={1} overflow="hidden">
+          <Text wrap="truncate">{lines[1] || ' '}</Text>
+        </Box>
+      </Box>
     </Box>
   );
 }

package/src/tui/components/TextEntryPanel.jsx

@@ -4,7 +4,7 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Box, Text, useInput, usePaste, useStdin } from 'ink';
 import stringWidth from 'string-width';
-import { theme } from '../theme.mjs';
+import { theme, surfaceBackground } from '../theme.mjs';
 import {
   clearSelection,
   deleteBackwardWord,
@@ -126,14 +126,34 @@ function singleTrailingLineBreakPrefix(text) {
   return prefix.includes('\n') ? null : prefix;
 }
 
-function isCtrlEnterSequence(input) {
+// Recognize a MODIFIED Enter (Ctrl+Enter or Shift+Enter) delivered via the kitty
+// keyboard protocol (\x1b[13;<mod>u) or modifyOtherKeys (\x1b[27;<mod>;13~). The
+// xterm modifier param is (1 + bitmask): shift=1, alt=2, ctrl=4. We match when
+// the shift OR ctrl bit is set so both chords insert a newline. Ctrl+J is the
+// protocol-independent fallback, handled separately.
+const MODIFIED_ENTER_SHIFT_OR_CTRL = 1 | 4;
+function isModifiedEnterSequence(input) {
   const text = String(input ?? '');
   const body = text.startsWith('\x1b[') ? text.slice(2) : text.startsWith('[') ? text.slice(1) : '';
   if (!body) return false;
   const kitty = /^13;(\d+)(?::\d+)?(?:;[\d:]+)?u$/.exec(body);
-  if (kitty) return ((Number(kitty[1]) - 1) & 4) !== 0;
+  if (kitty) return ((Number(kitty[1]) - 1) & MODIFIED_ENTER_SHIFT_OR_CTRL) !== 0;
   const modifyOtherKeys = /^27;(\d+);13~$/.exec(body);
-  return Boolean(modifyOtherKeys && (((Number(modifyOtherKeys[1]) - 1) & 4) !== 0));
+  return Boolean(modifyOtherKeys && (((Number(modifyOtherKeys[1]) - 1) & MODIFIED_ENTER_SHIFT_OR_CTRL) !== 0));
+}
+
+// Recognize ANY modified Enter (any modifier bitmask, e.g. Alt+Enter). Used to
+// CONSUME modified-Enter sequences we don't map to a newline so they aren't
+// typed as raw CSI text under modifyOtherKeys. Plain Enter (mod=1) is NOT
+// matched, so it still submits.
+function isAnyModifiedEnterSequence(input) {
+  const text = String(input ?? '');
+  const body = text.startsWith('\x1b[') ? text.slice(2) : text.startsWith('[') ? text.slice(1) : '';
+  if (!body) return false;
+  const kitty = /^13;(\d+)(?::\d+)?(?:;[\d:]+)?u$/.exec(body);
+  if (kitty) return (Number(kitty[1]) - 1) !== 0;
+  const modifyOtherKeys = /^27;(\d+);13~$/.exec(body);
+  return Boolean(modifyOtherKeys && ((Number(modifyOtherKeys[1]) - 1) !== 0));
 }
 
 export function TextEntryPanel({
@@ -227,6 +247,11 @@ export function TextEntryPanel({
     const rawSource = String(input ?? '');
     const rawInput = normalizeInput(input);
     if (/(?:\x1b)?\[<\d+;\d+;\d+[Mm]/.test(rawSource)) return;
+    // Safety net: drop CSI-private replies/fragments (\x1b[?<n>u / \x1b[?...c).
+    // We no longer query the terminal, so these should not normally appear, but
+    // a volunteered report must never type into the field. See PromptInput for
+    // the full rationale; optional final byte also discards partial fragments.
+    if (/^(?:\x1b)?\[\?[\d;]*[uc]?$/.test(rawSource)) return;
 
     if (key.escape) {
       if (selectionRange(draftRef.current)) {
@@ -237,8 +262,27 @@ export function TextEntryPanel({
       return;
     }
     const trailingEnterPrefix = singleTrailingLineBreakPrefix(rawInput);
-    const rawCtrlEnter = isCtrlEnterSequence(rawSource) || isCtrlEnterSequence(rawInput);
+    const rawCtrlEnter = isModifiedEnterSequence(rawSource) || isModifiedEnterSequence(rawInput);
     const modifiedLineBreak = key.shift || key.meta || key.ctrl || rawCtrlEnter;
+
+    // Ctrl+J — the protocol-independent newline that works on every terminal.
+    // Legacy/modifyOtherKeys: a lone '\n' (real Enter is CR → key.return). Kitty:
+    // \x1b[106;5u → input 'j' with key.ctrl. Either → insert a newline. Must
+    // precede the trailing-newline/submit paths since
+    // singleTrailingLineBreakPrefix('\n') returns '' (not null) and would
+    // otherwise route Ctrl+J to submit.
+    if ((rawSource === '\n' && !key.return) || (key.ctrl && rawSource.toLowerCase() === 'j')) {
+      updateDraft((d) => replaceSelection(d, '\n'));
+      return;
+    }
+
+    // A modified Enter that is NOT a newline chord (e.g. Alt+Enter): consume it
+    // so its raw CSI bytes don't type into the field under modifyOtherKeys. Plain
+    // Enter (mod=1) is not matched and still submits below.
+    if (!rawCtrlEnter && (isAnyModifiedEnterSequence(rawSource) || isAnyModifiedEnterSequence(rawInput))) {
+      return;
+    }
+
     const pasteFallback = rawInput.includes('\n') && trailingEnterPrefix === null && (rawInput.length > 1 || !key.return);
     if (pasteFallback) {
       updateDraft((d) => insertText(d, rawInput));
@@ -256,7 +300,7 @@ export function TextEntryPanel({
       updateDraft((d) => replaceSelection(d, '\n'));
       return;
     }
-    if (key.return || rawInput === '\n') {
+    if (key.return) {
       if (modifiedLineBreak) {
         updateDraft((d) => replaceSelection(d, '\n'));
         return;
@@ -432,7 +476,7 @@ export function TextEntryPanel({
         <Text> </Text>
         <Text color={theme.subtle}>{hintText || ' '}</Text>
         <Text> </Text>
-        <Box ref={boxRef} flexDirection="row" width="100%" backgroundColor={theme.background}>
+        <Box ref={boxRef} flexDirection="row" width="100%" backgroundColor={surfaceBackground()}>
           <Text color={theme.inactive}>{promptLabel}</Text>
           <Text color={theme.text} wrap="truncate">{renderedValue}</Text>
         </Box>