arc402-cli 0.9.4 → 0.9.6

package/src/tui/Viewport.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { Box, Text, useStdout } from "ink";
+import { Box, Text } from "ink";
 
 interface ViewportProps {
   lines: string[];
   scrollOffset: number;
   isAutoScroll: boolean;
+  height: number;
 }
 
 /**
@@ -13,49 +14,37 @@ interface ViewportProps {
  * scrollOffset=0 means pinned to bottom (auto-scroll).
  * Positive scrollOffset means scrolled up by that many lines.
  */
-export function Viewport({ lines, scrollOffset, isAutoScroll }: ViewportProps) {
-  const { stdout } = useStdout();
-  const termRows = stdout?.rows ?? 24;
-
-  // Approximate viewport height for scroll slicing.
-  // The actual flex layout handles visual sizing; this is for computing
-  // which lines to show in the scroll window.
-  const viewportHeight = Math.max(1, termRows - 18);
+export function Viewport({ lines, scrollOffset, isAutoScroll, height }: ViewportProps) {
+  const viewportHeight = Math.max(1, height);
 
   // Compute the window slice
-  // scrollOffset=0 → show last viewportHeight lines
-  // scrollOffset=N → show lines ending viewportHeight+N from end
   const totalLines = lines.length;
   let endIdx: number;
   let startIdx: number;
 
   if (scrollOffset === 0) {
-    // Auto-scroll: pinned to bottom
     endIdx = totalLines;
     startIdx = Math.max(0, endIdx - viewportHeight);
   } else {
-    // Scrolled up: scrollOffset lines from bottom
     endIdx = Math.max(0, totalLines - scrollOffset);
     startIdx = Math.max(0, endIdx - viewportHeight);
   }
 
   const visibleLines = lines.slice(startIdx, endIdx);
 
+  const canScrollUp = startIdx > 0;
   const canScrollDown = scrollOffset > 0;
 
   return (
     <Box flexDirection="column" flexGrow={1}>
-      <Box flexDirection="column">
-        {visibleLines.map((line, i) => (
-          <Text key={i}>{line}</Text>
-        ))}
-      </Box>
-      {/* spacer — pushes content up, scroll indicator down */}
-      <Box flexGrow={1} />
+      {canScrollUp && (
+        <Text dimColor>{"  \u2191 more (Shift+Up)"}</Text>
+      )}
+      {visibleLines.map((line, i) => (
+        <Text key={startIdx + i}>{line}</Text>
+      ))}
       {canScrollDown && !isAutoScroll && (
-        <Box justifyContent="flex-end">
-          <Text dimColor>↓ more</Text>
-        </Box>
+        <Text dimColor>{"  \u2193 more (Shift+Down / Esc)"}</Text>
       )}
     </Box>
   );

package/src/tui/components/CustomTextInput.tsx

@@ -0,0 +1,127 @@
+import React, { useState, useEffect } from "react";
+import { Text, useInput } from "ink";
+
+interface CustomTextInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit?: (value: string) => void;
+  focus?: boolean;
+}
+
+/**
+ * Minimal text input that does NOT intercept Tab, Up, Down, Escape, or Ctrl+C,
+ * allowing parent useInput handlers to receive those keys.
+ */
+export function CustomTextInput({
+  value,
+  onChange,
+  onSubmit,
+  focus = true,
+}: CustomTextInputProps) {
+  const [cursorPos, setCursorPos] = useState(value.length);
+  const [cursorVisible, setCursorVisible] = useState(true);
+
+  // Keep cursor within bounds when value changes externally
+  useEffect(() => {
+    setCursorPos((pos) => Math.min(pos, value.length));
+  }, [value]);
+
+  // Blink cursor
+  useEffect(() => {
+    if (!focus) return;
+    const timer = setInterval(() => {
+      setCursorVisible((v) => !v);
+    }, 530);
+    return () => clearInterval(timer);
+  }, [focus]);
+
+  useInput(
+    (input, key) => {
+      // Keys we explicitly do NOT handle — let parent see them:
+      // Tab, Up, Down, Escape, Ctrl+C
+      if (key.tab || key.upArrow || key.downArrow || key.escape) return;
+      if (input === "\x03") return; // Ctrl+C
+
+      // Enter/Return — submit
+      if (key.return) {
+        onSubmit?.(value);
+        return;
+      }
+
+      // Backspace
+      if (key.backspace || key.delete) {
+        if (cursorPos > 0) {
+          const next = value.slice(0, cursorPos - 1) + value.slice(cursorPos);
+          setCursorPos(cursorPos - 1);
+          onChange(next);
+        }
+        return;
+      }
+
+      // Left arrow
+      if (key.leftArrow) {
+        setCursorPos((p) => Math.max(0, p - 1));
+        return;
+      }
+
+      // Right arrow
+      if (key.rightArrow) {
+        setCursorPos((p) => Math.min(value.length, p + 1));
+        return;
+      }
+
+      // Home (Ctrl+A)
+      if (input === "\x01") {
+        setCursorPos(0);
+        return;
+      }
+
+      // End (Ctrl+E)
+      if (input === "\x05") {
+        setCursorPos(value.length);
+        return;
+      }
+
+      // Ctrl+U — clear line
+      if (input === "\x15") {
+        setCursorPos(0);
+        onChange("");
+        return;
+      }
+
+      // Ctrl+K — kill to end of line
+      if (input === "\x0B") {
+        onChange(value.slice(0, cursorPos));
+        return;
+      }
+
+      // Ignore other control characters
+      if (input.length > 0 && input.charCodeAt(0) < 32) return;
+
+      // Regular character input (including paste)
+      if (input.length > 0) {
+        const next =
+          value.slice(0, cursorPos) + input + value.slice(cursorPos);
+        setCursorPos(cursorPos + input.length);
+        onChange(next);
+      }
+    },
+    { isActive: focus }
+  );
+
+  if (!focus) {
+    return <Text dimColor>{value}</Text>;
+  }
+
+  const before = value.slice(0, cursorPos);
+  const cursorChar = cursorPos < value.length ? value[cursorPos] : " ";
+  const after = value.slice(cursorPos + 1);
+
+  return (
+    <Text>
+      {before}
+      <Text inverse={cursorVisible}>{cursorChar}</Text>
+      {after}
+    </Text>
+  );
+}

package/src/tui/useCommand.ts

@@ -68,14 +68,14 @@ export function useCommand(): UseCommandResult {
           stdoutRemainder += chunk.toString("utf8");
           const lines = stdoutRemainder.split("\n");
           stdoutRemainder = lines.pop() ?? "";
-          for (const line of lines) onLine(line);
+          for (const line of lines) onLine(line.replace(/\r$/, ""));
         });
 
         child.stderr?.on("data", (chunk: Buffer) => {
           stderrRemainder += chunk.toString("utf8");
           const lines = stderrRemainder.split("\n");
           stderrRemainder = lines.pop() ?? "";
-          for (const line of lines) onLine(line);
+          for (const line of lines) onLine(line.replace(/\r$/, ""));
         });
 
         child.on("close", (code) => {

package/src/tui/useScroll.ts

@@ -50,6 +50,10 @@ export function useScroll(viewportHeight: number): UseScrollResult {
       scrollUp(viewportHeight);
     } else if (key.pageDown) {
       scrollDown(viewportHeight);
+    } else if (key.shift && key.upArrow) {
+      scrollUp(1);
+    } else if (key.shift && key.downArrow) {
+      scrollDown(1);
     }
   });