@ridit/lens 0.3.7 → 0.3.9

package/src/components/chat/StatusBar.tsx

@@ -0,0 +1,214 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useStdout } from "ink";
+import Spinner from "ink-spinner";
+import { resolve } from "path";
+import { homedir } from "os";
+import { TextArea } from "./TextArea";
+import { ACCENT, GREEN, RED } from "../../colors";
+
+export function AppHeader({
+  model,
+  repoPath,
+}: {
+  model: string;
+  repoPath: string;
+}) {
+  const cols = process.stdout.columns ?? 80;
+  const rule = "─".repeat(Math.max(1, cols));
+  const abs = resolve(repoPath);
+  const displayPath = abs.startsWith(homedir())
+    ? "~" + abs.slice(homedir().length)
+    : abs;
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box gap={2}>
+        <Text color={ACCENT} bold>
+          ◆ lens
+        </Text>
+        <Text color="gray" dimColor>
+          ·
+        </Text>
+        <Text color="white" dimColor>
+          {model}
+        </Text>
+        <Text color="gray" dimColor>
+          ·
+        </Text>
+        <Text color="gray" dimColor>
+          {displayPath}
+        </Text>
+      </Box>
+      <Text color="gray" dimColor>
+        {rule}
+      </Text>
+    </Box>
+  );
+}
+
+export function InputBox({
+  value,
+  onChange,
+  onSubmit,
+  inputKey,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  onSubmit: (v: string) => void;
+  inputKey?: number;
+}) {
+  const { stdout } = useStdout();
+  const [cols, setCols] = useState(stdout?.columns ?? 80);
+
+  useEffect(() => {
+    const handler = () => setCols(stdout?.columns ?? 80);
+    stdout?.on("resize", handler);
+    return () => {
+      stdout?.off("resize", handler);
+    };
+  }, [stdout]);
+
+  const rule = "─".repeat(Math.max(1, cols));
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text color="gray" dimColor>
+        {rule}
+      </Text>
+      <Box gap={1}>
+        <Text color={ACCENT}>{">"}</Text>
+        <TextArea
+          key={inputKey}
+          value={value}
+          onChange={onChange}
+          onSubmit={onSubmit}
+          placeholder="ask anything..."
+        />
+      </Box>
+      <Text color="gray" dimColor>
+        {rule}
+      </Text>
+    </Box>
+  );
+}
+
+// ── Shortcut bar ──────────────────────────────────────────────────────────────
+
+const SHORTCUTS = [
+  ["↵", "send"],
+  ["^↵", "line"],
+  ["^⌫", " word"],
+  ["^f", "force"],
+  ["^c", "exit"],
+] as const;
+
+export function ShortcutBar({
+  autoApprove,
+  forceApprove,
+  isThinking = false,
+  model,
+}: {
+  autoApprove?: boolean;
+  forceApprove?: boolean;
+  isThinking?: boolean;
+  model?: string;
+}) {
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    if (!isThinking) {
+      setElapsed(0);
+      return;
+    }
+    setElapsed(0);
+    const id = setInterval(() => setElapsed((s) => s + 1), 1000);
+    return () => clearInterval(id);
+  }, [isThinking]);
+
+  if (isThinking) {
+    return (
+      <Box marginTop={0} gap={1}>
+        <Text color={ACCENT}>
+          <Spinner type="dots" />
+        </Text>
+        {model && <Text color="gray">{model}</Text>}
+        <Text color="gray" dimColor>
+          ({elapsed}s · esc cancel)
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box marginTop={0} justifyContent="space-between">
+      <Box>
+        {forceApprove ? (
+          <>
+            <Text color="gray" dimColor>
+              {" "}
+              ·{" "}
+            </Text>
+            <Text color={RED} bold>
+              force-all
+            </Text>
+          </>
+        ) : autoApprove ? (
+          <>
+            <Text color="gray" dimColor>
+              {" "}
+              ·{" "}
+            </Text>
+            <Text color={GREEN}>auto</Text>
+          </>
+        ) : null}
+        {model && (
+          <>
+            <Text color={ACCENT}> ● </Text>
+            <Text color="gray">{model}</Text>
+          </>
+        )}
+      </Box>
+
+      <Box>
+        {SHORTCUTS.map(([key, desc], i) => (
+          <Box key={i}>
+            {i > 0 && <Text color="gray"> · </Text>}
+            <Text color="gray">{key}</Text>
+            <Text color="gray"> {desc}</Text>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+// ── Typewriter text ───────────────────────────────────────────────────────────
+
+export function TypewriterText({
+  text,
+  color = ACCENT,
+  speed = 38,
+}: {
+  text: string;
+  color?: string;
+  speed?: number;
+}) {
+  const [displayed, setDisplayed] = React.useState("");
+  const [target, setTarget] = React.useState(text);
+
+  React.useEffect(() => {
+    setDisplayed("");
+    setTarget(text);
+  }, [text]);
+
+  React.useEffect(() => {
+    if (displayed.length >= target.length) return;
+    const t = setTimeout(
+      () => setDisplayed(target.slice(0, displayed.length + 1)),
+      speed,
+    );
+    return () => clearTimeout(t);
+  }, [displayed, target, speed]);
+
+  return <Text color={color}>{displayed}</Text>;
+}

package/src/components/chat/TextArea.tsx

@@ -1,176 +1,173 @@
-import React, { useState, useEffect } from "react";
-import { Text, useInput } from "ink";
-import chalk from "chalk";
-
-function isWordChar(ch: string): boolean {
-  return /[\w]/.test(ch);
-}
-
-function wordBoundaryLeft(text: string, pos: number): number {
-  if (pos <= 0) return 0;
-  let i = pos - 1;
-
-  while (i > 0 && !isWordChar(text[i]!)) i--;
-
-  while (i > 0 && isWordChar(text[i - 1]!)) i--;
-  return i;
-}
-
-function wordBoundaryRight(text: string, pos: number): number {
-  const len = text.length;
-  if (pos >= len) return len;
-  let i = pos;
-
-  while (i < len && isWordChar(text[i]!)) i++;
-
-  while (i < len && !isWordChar(text[i]!)) i++;
-  return i;
-}
-
-export interface TextAreaProps {
-  value: string;
-  onChange: (value: string) => void;
-  onSubmit: (value: string) => void;
-  focus?: boolean;
-  placeholder?: string;
-}
-
-export function TextArea({
-  value,
-  onChange,
-  onSubmit,
-  focus = true,
-  placeholder = "",
-}: TextAreaProps) {
-  const [cursor, setCursor] = useState(value.length);
-  const [prevValue, setPrevValue] = useState(value);
-
-  if (value !== prevValue) {
-    setPrevValue(value);
-    const lenDiff = Math.abs(value.length - prevValue.length);
-    if (cursor > value.length || lenDiff > 1) {
-      setCursor(value.length);
-    }
-  }
-
-  useInput(
-    (input, key) => {
-      if (key.upArrow || key.downArrow) return;
-      if (key.tab || (key.shift && key.tab)) return;
-      if (key.ctrl && input === "c") return;
-
-      if (key.return && !key.meta) {
-        onSubmit(value);
-        return;
-      }
-
-      if ((key.return && key.meta) || (key.ctrl && input === "j")) {
-        const next = value.slice(0, cursor) + "\n" + value.slice(cursor);
-        onChange(next);
-        setCursor((c) => c + 1);
-        return;
-      }
-
-      if (key.leftArrow && key.ctrl) {
-        setCursor(wordBoundaryLeft(value, cursor));
-        return;
-      }
-
-      if (key.rightArrow && key.ctrl) {
-        setCursor(wordBoundaryRight(value, cursor));
-        return;
-      }
-
-      if (key.leftArrow) {
-        setCursor((c) => Math.max(0, c - 1));
-        return;
-      }
-
-      if (key.rightArrow) {
-        setCursor((c) => Math.min(value.length, c + 1));
-        return;
-      }
-
-      if (key.ctrl && input === "a") {
-        const lineStart = value.lastIndexOf("\n", cursor - 1) + 1;
-        setCursor(lineStart);
-        return;
-      }
-
-      if (key.ctrl && input === "e") {
-        const lineEnd = value.indexOf("\n", cursor);
-        setCursor(lineEnd === -1 ? value.length : lineEnd);
-        return;
-      }
-
-      if (key.ctrl && input === "u") {
-        const lineStart = value.lastIndexOf("\n", cursor - 1) + 1;
-        onChange(value.slice(0, lineStart) + value.slice(cursor));
-        setCursor(lineStart);
-        return;
-      }
-
-      if (key.ctrl && input === "k") {
-        const lineEnd = value.indexOf("\n", cursor);
-        onChange(
-          value.slice(0, cursor) + (lineEnd === -1 ? "" : value.slice(lineEnd)),
-        );
-        return;
-      }
-
-      if (key.ctrl && input === "w") {
-        const to = wordBoundaryLeft(value, cursor);
-        onChange(value.slice(0, to) + value.slice(cursor));
-        setCursor(to);
-        return;
-      }
-
-      if (key.ctrl && key.delete) {
-        const to = wordBoundaryRight(value, cursor);
-        onChange(value.slice(0, cursor) + value.slice(to));
-        return;
-      }
-
-      if (key.backspace || key.delete) {
-        if (cursor > 0) {
-          onChange(value.slice(0, cursor - 1) + value.slice(cursor));
-          setCursor((c) => c - 1);
-        }
-        return;
-      }
-
-      if (key.escape) return;
-
-      if (input) {
-        const next = value.slice(0, cursor) + input + value.slice(cursor);
-        onChange(next);
-        setCursor((c) => c + input.length);
-      }
-    },
-    { isActive: focus },
-  );
-
-  if (value.length === 0 && placeholder) {
-    return (
-      <Text>
-        {chalk.inverse(placeholder[0] ?? " ")}
-        {placeholder.length > 1 ? chalk.gray(placeholder.slice(1)) : ""}
-      </Text>
-    );
-  }
-
-  let rendered = "";
-  for (let i = 0; i < value.length; i++) {
-    const ch = value[i]!;
-    if (i === cursor) {
-      rendered += ch === "\n" ? chalk.inverse(" ") + "\n" : chalk.inverse(ch);
-    } else {
-      rendered += ch;
-    }
-  }
-  if (cursor === value.length) {
-    rendered += chalk.inverse(" ");
-  }
-
-  return <Text>{rendered}</Text>;
-}
+import React, { useState } from "react";
+import { Text, useInput } from "ink";
+import chalk from "chalk";
+
+function isWordChar(ch: string): boolean {
+  return /[\w]/.test(ch);
+}
+
+function wordBoundaryLeft(text: string, pos: number): number {
+  if (pos <= 0) return 0;
+  let i = pos - 1;
+  while (i > 0 && !isWordChar(text[i]!)) i--;
+  while (i > 0 && isWordChar(text[i - 1]!)) i--;
+  return i;
+}
+
+function wordBoundaryRight(text: string, pos: number): number {
+  const len = text.length;
+  if (pos >= len) return len;
+  let i = pos;
+  while (i < len && isWordChar(text[i]!)) i++;
+  while (i < len && !isWordChar(text[i]!)) i++;
+  return i;
+}
+
+export interface TextAreaProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: (value: string) => void;
+  focus?: boolean;
+  placeholder?: string;
+}
+
+export function TextArea({
+  value,
+  onChange,
+  onSubmit,
+  focus = true,
+  placeholder = "",
+}: TextAreaProps) {
+  const [cursor, setCursor] = useState(value.length);
+  const [prevValue, setPrevValue] = useState(value);
+
+  if (value !== prevValue) {
+    setPrevValue(value);
+    const lenDiff = Math.abs(value.length - prevValue.length);
+    if (cursor > value.length || lenDiff > 1) {
+      setCursor(value.length);
+    }
+  }
+
+  useInput(
+    (input, key) => {
+      if (key.upArrow || key.downArrow) return;
+      if (key.tab || (key.shift && key.tab)) return;
+      if (key.ctrl && input === "c") return;
+
+      const isShiftEnter =
+        (key.return && key.shift) ||
+        input === "\x1b[27;2;13~" ||
+        input === "\x1b[13;2u";
+
+      if (key.return && !key.meta && !key.shift && !isShiftEnter) {
+        onSubmit(value);
+        return;
+      }
+
+      if (isShiftEnter) {
+        const next = value.slice(0, cursor) + "\n" + value.slice(cursor);
+        onChange(next);
+        setCursor((c) => c + 1);
+        return;
+      }
+
+      if (key.leftArrow && key.ctrl) {
+        setCursor(wordBoundaryLeft(value, cursor));
+        return;
+      }
+
+      if (key.rightArrow && key.ctrl) {
+        setCursor(wordBoundaryRight(value, cursor));
+        return;
+      }
+
+      if (key.leftArrow) {
+        setCursor((c) => Math.max(0, c - 1));
+        return;
+      }
+
+      if (key.rightArrow) {
+        setCursor((c) => Math.min(value.length, c + 1));
+        return;
+      }
+
+      if (key.ctrl && input === "a") {
+        const lineStart = value.lastIndexOf("\n", cursor - 1) + 1;
+        setCursor(lineStart);
+        return;
+      }
+
+      if (key.ctrl && input === "e") {
+        const lineEnd = value.indexOf("\n", cursor);
+        setCursor(lineEnd === -1 ? value.length : lineEnd);
+        return;
+      }
+
+      if (key.ctrl && input === "u") {
+        const lineStart = value.lastIndexOf("\n", cursor - 1) + 1;
+        onChange(value.slice(0, lineStart) + value.slice(cursor));
+        setCursor(lineStart);
+        return;
+      }
+
+      if (key.ctrl && input === "k") {
+        const lineEnd = value.indexOf("\n", cursor);
+        onChange(
+          value.slice(0, cursor) + (lineEnd === -1 ? "" : value.slice(lineEnd)),
+        );
+        return;
+      }
+
+      if (key.ctrl && input === "f") return;
+
+      if ((key.ctrl && key.delete) || input === "\x1b[3;5~") {
+        const to = wordBoundaryLeft(value, cursor);
+        onChange(value.slice(0, to) + value.slice(cursor));
+        setCursor(to);
+        return;
+      }
+
+      if (key.backspace || key.delete) {
+        if (cursor > 0) {
+          onChange(value.slice(0, cursor - 1) + value.slice(cursor));
+          setCursor((c) => c - 1);
+        }
+        return;
+      }
+
+      if (key.escape) return;
+
+      if (input) {
+        const next = value.slice(0, cursor) + input + value.slice(cursor);
+        onChange(next);
+        setCursor((c) => c + input.length);
+      }
+    },
+    { isActive: focus },
+  );
+
+  if (value.length === 0 && placeholder) {
+    return (
+      <Text>
+        {chalk.inverse(placeholder[0] ?? " ")}
+        {placeholder.length > 1 ? chalk.gray(placeholder.slice(1)) : ""}
+      </Text>
+    );
+  }
+
+  let rendered = "";
+  for (let i = 0; i < value.length; i++) {
+    const ch = value[i]!;
+    if (i === cursor) {
+      rendered += ch === "\n" ? chalk.inverse(" ") + "\n" : chalk.inverse(ch);
+    } else {
+      rendered += ch;
+    }
+  }
+  if (cursor === value.length) {
+    rendered += chalk.inverse(" ");
+  }
+
+  return <Text>{rendered}</Text>;
+}