wispy-cli 2.7.24 → 2.7.26

package/lib/cjk-text-input.mjs

@@ -1,30 +1,14 @@
 /**
  * cjk-text-input.mjs — CJK-aware text input for Ink TUI
  *
- * Drop-in replacement for `ink-text-input` that handles Korean/CJK IME
- * composition properly by using Node's UTF-8 encoded stdin data events
- * instead of raw byte-by-byte useInput hooks.
- *
- * Key insight: When stdin is in "raw" mode and encoding is set to "utf8",
- * Node.js emits fully-composed UTF-8 strings (including Korean/CJK characters)
- * rather than raw bytes. The terminal emulator handles IME composition before
- * sending the final composed character to stdin.
+ * Uses Ink's native useInput hook (not raw stdin) so it works alongside
+ * other Ink components. Korean/CJK works because useInput already receives
+ * decoded UTF-8 characters — the real fix is handling them correctly.
  */
 
-import React, { useState, useEffect, useRef, useCallback } from "react";
-import { Box, Text, useStdin } from "ink";
+import React, { useState, useEffect, useRef } from "react";
+import { Box, Text, useInput, useStdout } from "ink";
 
-/**
- * CJKTextInput — A text input component that properly handles CJK/Korean input.
- *
- * @param {object} props
- * @param {string}   props.value        - Controlled value
- * @param {function} props.onChange     - Called with new value on change
- * @param {function} props.onSubmit     - Called with value on Enter
- * @param {string}   [props.placeholder] - Placeholder text when empty
- * @param {boolean}  [props.focus=true] - Whether this input is focused
- * @param {boolean}  [props.showCursor=true] - Whether to show cursor block
- */
 function CJKTextInput({
   value = "",
   onChange,
@@ -33,118 +17,85 @@ function CJKTextInput({
   focus = true,
   showCursor = true,
 }) {
-  const { stdin, setRawMode } = useStdin();
-  const valueRef = useRef(value);
-
-  // Keep ref in sync with controlled value
-  useEffect(() => {
-    valueRef.current = value;
-  }, [value]);
+  const { stdout } = useStdout();
 
+  // Show real terminal cursor when focused so IME composition popup
+  // appears at the correct position (not bottom-right corner)
   useEffect(() => {
-    if (!focus || !stdin) return;
-
-    // Set UTF-8 encoding so Node decodes multi-byte sequences (Korean, CJK)
-    // before emitting the data event — this is the key fix for CJK input.
-    const prevEncoding = stdin.readableEncoding;
-    stdin.setEncoding("utf8");
-
-    const onData = (chunk) => {
-      // chunk is now a UTF-8 decoded string (not a Buffer)
-      const str = typeof chunk === "string" ? chunk : chunk.toString("utf8");
-
-      for (let i = 0; i < str.length; ) {
-        // Check for escape sequences (arrow keys, etc.)
-        if (str[i] === "\x1b") {
-          const seq = str.slice(i);
-          // Arrow keys
-          if (seq.startsWith("\x1b[D") || seq.startsWith("\x1bOD")) {
-            // Left arrow — not handled here, skip
-            i += seq.startsWith("\x1b[D") ? 3 : 3;
-            continue;
-          }
-          if (seq.startsWith("\x1b[C") || seq.startsWith("\x1bOC")) {
-            // Right arrow — not handled here, skip
-            i += 3;
-            continue;
-          }
-          // Other escape sequences — skip
-          i += 1;
-          continue;
-        }
-
-        const ch = str[i];
-        const code = ch.charCodeAt(0);
-
-        if (ch === "\r" || ch === "\n") {
-          onSubmit?.(valueRef.current);
-          i++;
-          continue;
-        }
-
-        if (ch === "\x7f" || ch === "\b") {
-          // Backspace
-          const newVal = valueRef.current.slice(0, -1);
-          valueRef.current = newVal;
-          onChange?.(newVal);
-          i++;
-          continue;
-        }
-
-        if (ch === "\x03") {
-          // Ctrl+C — let Ink handle it
-          i++;
-          continue;
-        }
-
-        if (ch === "\t") {
-          // Tab — do NOT consume, let Ink's useInput handle tab for view switching
-          i++;
-          continue;
-        }
+    if (focus && stdout) {
+      stdout.write("\x1b[?25h"); // show cursor
+      return () => {
+        stdout.write("\x1b[?25l"); // hide cursor on unfocus
+      };
+    }
+  }, [focus, stdout]);
+
+  useInput(
+    (input, key) => {
+      // Skip keys handled by parent (Tab, Ctrl+C, arrows for view switching)
+      if (
+        key.tab ||
+        (key.shift && key.tab) ||
+        key.upArrow ||
+        key.downArrow ||
+        (key.ctrl && input === "c")
+      ) {
+        return;
+      }
 
-        if (ch === "\x15") {
-          // Ctrl+U — clear line
-          valueRef.current = "";
-          onChange?.("");
-          i++;
-          continue;
-        }
+      if (key.return) {
+        onSubmit?.(value);
+        return;
+      }
 
-        if (ch === "\x01") {
-          // Ctrl+A — move to beginning (just clear for simplicity)
-          i++;
-          continue;
-        }
+      if (key.backspace || key.delete) {
+        // For CJK: slice off one character (which may be multi-byte)
+        const newVal = [...value].slice(0, -1).join("");
+        onChange?.(newVal);
+        return;
+      }
 
-        // Normal printable character (ASCII or multi-byte CJK/Korean)
-        // code >= 32 for ASCII printable; any non-control Unicode char is fine
-        if (code >= 32 || code > 127) {
-          const newVal = valueRef.current + ch;
-          valueRef.current = newVal;
-          onChange?.(newVal);
-        }
+      if (key.leftArrow || key.rightArrow) {
+        // Cursor movement — skip for now (append-only input)
+        return;
+      }
 
-        i++;
+      // Ctrl+U — clear line
+      if (key.ctrl && input === "u") {
+        onChange?.("");
+        return;
       }
-    };
 
-    stdin.on("data", onData);
+      // Ctrl+W — delete last word
+      if (key.ctrl && input === "w") {
+        const trimmed = value.trimEnd();
+        const lastSpace = trimmed.lastIndexOf(" ");
+        onChange?.(lastSpace >= 0 ? trimmed.slice(0, lastSpace + 1) : "");
+        return;
+      }
 
-    return () => {
-      stdin.removeListener("data", onData);
-      // Restore previous encoding
-      if (prevEncoding !== null) {
-        stdin.setEncoding(prevEncoding);
+      // Normal character input — this includes CJK characters
+      // Ink's useInput already decodes UTF-8, so 'input' is a proper string
+      if (input && input.length > 0) {
+        onChange?.(value + input);
       }
-    };
-  }, [focus, stdin, onChange, onSubmit]);
+    },
+    { isActive: focus }
+  );
 
   // Render
   const displayValue = value;
   const showPlaceholder = !displayValue && placeholder;
 
   if (showPlaceholder) {
+    if (showCursor && focus) {
+      return React.createElement(
+        Box,
+        {},
+        React.createElement(Text, { inverse: true }, placeholder[0] || " "),
+        React.createElement(Text, { dimColor: true }, placeholder.slice(1))
+      );
+    }
     return React.createElement(Text, { dimColor: true }, placeholder);
   }
 
@@ -153,7 +104,7 @@ function CJKTextInput({
       Box,
       {},
       React.createElement(Text, {}, displayValue),
-      React.createElement(Text, { inverse: true }, " "),
+      React.createElement(Text, { inverse: true }, " ")
     );
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wispy-cli",
-  "version": "2.7.24",
+  "version": "2.7.26",
   "description": "🌿 Wispy — AI workspace assistant with trustworthy execution (harness, receipts, approvals, diffs)",
   "license": "MIT",
   "author": "Minseo & Poropo",