wispy-cli 2.7.25 → 2.7.27

package/lib/cjk-text-input.mjs

@@ -6,8 +6,8 @@
  * decoded UTF-8 characters — the real fix is handling them correctly.
  */
 
-import React, { useState, useEffect } from "react";
-import { Box, Text, useInput } from "ink";
+import React, { useState, useEffect, useRef } from "react";
+import { Box, Text, useInput, useStdout } from "ink";
 
 function CJKTextInput({
   value = "",
@@ -17,6 +17,19 @@ function CJKTextInput({
   focus = true,
   showCursor = true,
 }) {
+  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 && 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)

package/lib/readline-input.mjs

@@ -0,0 +1,103 @@
+/**
+ * readline-input.mjs — Readline-based input handler for proper Korean/CJK IME support
+ *
+ * Ink's useInput hook processes raw bytes and breaks Korean IME composition.
+ * This module uses Node.js readline which handles CJK IME at a higher level.
+ *
+ * HYBRID APPROACH: Ink renders the UI, readline handles all input.
+ */
+
+import { createInterface, emitKeypressEvents } from "node:readline";
+
+export class ReadlineInput {
+  constructor({
+    onSubmit,
+    onUpdate,
+    onKeypress,
+    onCtrlC,
+    onCtrlL,
+    prompt = "> ",
+  } = {}) {
+    this.onSubmit = onSubmit;
+    this.onUpdate = onUpdate;
+    this.onKeypress = onKeypress;
+    this.onCtrlC = onCtrlC;
+    this.onCtrlL = onCtrlL;
+    this.prompt = prompt;
+    this._rl = null;
+    this._currentLine = "";
+    this._keypressListener = null;
+  }
+
+  start() {
+    // CRITICAL: Use readline which handles IME composition properly
+    this._rl = createInterface({
+      input: process.stdin,
+      output: null, // We don't want readline to write to stdout — Ink does that
+      terminal: true,
+      prompt: "",
+    });
+
+    // readline's 'line' event fires after IME composition is complete
+    this._rl.on("line", (line) => {
+      this._currentLine = "";
+      this.onSubmit?.(line);
+    });
+
+    process.stdin.setEncoding("utf8");
+
+    // Wire keypress events through readline's parser for proper CJK handling
+    emitKeypressEvents(process.stdin, this._rl);
+
+    if (process.stdin.isTTY) {
+      process.stdin.setRawMode(false); // KEY: let readline handle raw mode
+    }
+
+    this._keypressListener = (str, key) => {
+      if (!key) return;
+
+      // Ctrl+C
+      if (key.ctrl && key.name === "c") {
+        this.onCtrlC?.();
+        return;
+      }
+
+      // Ctrl+L
+      if (key.ctrl && key.name === "l") {
+        this.onCtrlL?.();
+        return;
+      }
+
+      // General keypress for parent routing (Tab, arrows, escape, single chars)
+      this.onKeypress?.(str, key);
+
+      // Update current line for live preview
+      // readline.line contains the current in-progress line
+      if (this._rl) {
+        const currentLine = this._rl.line ?? "";
+        if (currentLine !== this._currentLine) {
+          this._currentLine = currentLine;
+          this.onUpdate?.(currentLine);
+        }
+      }
+    };
+
+    process.stdin.on("keypress", this._keypressListener);
+  }
+
+  stop() {
+    if (this._keypressListener) {
+      process.stdin.off("keypress", this._keypressListener);
+      this._keypressListener = null;
+    }
+    if (this._rl) {
+      this._rl.close();
+      this._rl = null;
+    }
+    this._currentLine = "";
+  }
+
+  getLine() {
+    return this._rl?.line ?? this._currentLine;
+  }
+}

package/lib/wispy-tui.mjs

@@ -11,9 +11,11 @@
 
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { render, Box, Text, useApp, useInput, useStdout } from "ink";
+import { PassThrough } from "node:stream";
 import Spinner from "ink-spinner";
+import { ReadlineInput } from "./readline-input.mjs";
+// TextInput is used only for the Memory search box (non-critical, no IME needed)
 import CJKTextInput from "./cjk-text-input.mjs";
-// CJKTextInput is a drop-in replacement for ink-text-input with Korean/CJK support
 const TextInput = CJKTextInput;
 
 import { COMMANDS, filterCommands } from "./command-registry.mjs";
@@ -868,8 +870,11 @@ function CommandPalette({ query, onSelect, onDismiss }) {
 }
 
 // ─── Input Area ───────────────────────────────────────────────────────────────
+// NOTE: This area shows the current input value as static text.
+// The REAL cursor and input are managed by ReadlineInput (readline-based) for
+// proper Korean/CJK IME support. Ink rendering is decoupled from input.
 
-function InputArea({ value, onChange, onSubmit, loading, workstream, view }) {
+function InputArea({ value, loading, workstream, view }) {
   const prompt = `${workstream} › `;
   const placeholder = loading
     ? "waiting for response..."
@@ -889,10 +894,9 @@ function InputArea({ value, onChange, onSubmit, loading, workstream, view }) {
           React.createElement(Text, { color: "yellow" }, `  ${prompt}thinking...`))
       : React.createElement(Box, {},
           React.createElement(Text, { color: view === "chat" ? "green" : "gray" }, prompt),
-          React.createElement(TextInput, {
-            value, onChange, onSubmit,
-            placeholder,
-          })),
+          value
+            ? React.createElement(Text, {}, value)
+            : React.createElement(Text, { dimColor: true }, placeholder)),
   );
 }
 
@@ -1221,15 +1225,18 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
     return () => { engine.permissions.setApprovalHandler(null); };
   }, [engine]);
 
-  // ── Keyboard shortcuts ──
-  useInput((input, key) => {
+  // ── Keyboard shortcut handler (called from ReadlineInput keypress) ──
+  const handleKeypress = useCallback((str, key) => {
     if (pendingApproval || showHelp) return;
 
-    if (key.tab && !loading) {
+    if (key.name === "tab" && !loading) {
       const idx = VIEWS.indexOf(view);
       setView(VIEWS[(idx + 1) % VIEWS.length]);
       return;
     }
+
+    // Only handle single-char shortcuts when no text is being typed
+    const input = str ?? "";
     if (input === "?" && !inputValue) { setShowHelp(true); return; }
     if (input === "1" && !inputValue && !loading) { setView("chat"); return; }
     if (input === "2" && !inputValue && !loading) { setView("overview"); return; }
@@ -1244,13 +1251,6 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
     if (input === "s" && !inputValue && !loading) { setView("settings"); return; }
     if (input === "t" && !inputValue) { setShowTimeline(prev => !prev); return; }
 
-    if (key.ctrl && input === "l") {
-      conversationRef.current = [];
-      setMessages([]);
-      saveConversation(activeWorkstream, []).catch(() => {});
-      return;
-    }
-
     // Workstream number switch (7-9 and beyond 6)
     if (/^[7-9]$/.test(input) && !inputValue && !loading) {
       const idx = parseInt(input) - 1;
@@ -1264,7 +1264,38 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
       exit();
       process.exit(0);
     }
-  });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pendingApproval, showHelp, loading, view, inputValue, workstreams, exit]);
+
+  // ── Wire ReadlineInput — the source of all keyboard input ──
+  const rlRef = useRef(null);
+
+  // Keep stable refs so the ReadlineInput closure always calls current callbacks
+  // without needing to restart readline.
+  const handleKeypressRef = useRef(null);
+  const handleSubmitRef = useRef(null);
+  const handleInputChangeRef = useRef(null);
+  useEffect(() => { handleKeypressRef.current = handleKeypress; }, [handleKeypress]);
+
+  useEffect(() => {
+    const rl = new ReadlineInput({
+      onSubmit: (line) => { handleSubmitRef.current?.(line); },
+      onUpdate: (text) => { handleInputChangeRef.current?.(text); },
+      onKeypress: (str, key) => { handleKeypressRef.current?.(str, key); },
+      onCtrlC: () => { exit(); process.exit(0); },
+      onCtrlL: () => {
+        conversationRef.current = [];
+        setMessages([]);
+        saveConversation(initialWorkstream, []).catch(() => {});
+      },
+      prompt: `${initialWorkstream} › `,
+    });
+    rl.start();
+    rlRef.current = rl;
+    return () => rl.stop();
+  // Only run once on mount — refs keep callbacks up to date.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   // ── Switch workstream ──
   const switchWorkstream = useCallback(async (ws) => {
@@ -1314,6 +1345,9 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
     setShowPalette(val.startsWith("/") && val.length >= 2);
   }, []);
 
+  // Keep refs up to date
+  useEffect(() => { handleInputChangeRef.current = handleInputChange; }, [handleInputChange]);
+
   const handlePaletteSelect = useCallback((cmd) => {
     const base = cmd.replace(/<[^>]+>/g, "").trimEnd();
     setInputValue(base);
@@ -1326,6 +1360,10 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
 
   // ── Message submit ──
   const handleSubmit = useCallback(async (value) => {
+    // Clear readline's internal line buffer after we consume the value
+    if (rlRef.current?._rl) {
+      rlRef.current._rl.line = "";
+    }
     if (pendingApproval) return;
     const input = value.trim();
     if (!input || loading) return;
@@ -1460,6 +1498,9 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
     }
   }, [loading, model, totalCost, totalTokens, engine, exit, pendingApproval, activeWorkstream, view, switchWorkstream]);
 
+  // Keep ref up to date
+  useEffect(() => { handleSubmitRef.current = handleSubmit; }, [handleSubmit]);
+
   // ── Layout ──
   const showSidebar = termWidth >= 80;
   const mainWidth = showSidebar ? termWidth - SIDEBAR_WIDTH - 2 : termWidth;
@@ -1544,12 +1585,10 @@ function WispyWorkspaceApp({ engine, initialWorkstream }) {
         })
       : null,
 
-    // Input
+    // Input (static display only — real input handled by ReadlineInput)
     !showHelp
       ? React.createElement(InputArea, {
           value: inputValue,
-          onChange: handleInputChange,
-          onSubmit: handleSubmit,
           loading,
           workstream: activeWorkstream,
           view,
@@ -1576,12 +1615,21 @@ async function main() {
 
   process.stdout.write("\x1b[2J\x1b[H");
 
+  // Give Ink a fake stdin so it doesn't fight with readline for raw-mode control.
+  // All actual input is handled by ReadlineInput inside WispyWorkspaceApp.
+  const fakeStdin = new PassThrough();
+  fakeStdin.isTTY = false;
+  fakeStdin.setRawMode = () => {}; // no-op so Ink doesn't crash trying to set raw mode
+
   const { waitUntilExit } = render(
     React.createElement(WispyWorkspaceApp, {
       engine,
       initialWorkstream: INITIAL_WORKSTREAM,
     }),
-    { exitOnCtrlC: true }
+    {
+      exitOnCtrlC: false, // ReadlineInput handles Ctrl+C
+      stdin: fakeStdin,
+    }
   );
 
   await waitUntilExit();

package/package.json

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