@ridit/lens 0.1.0

package/src/components/provider/ApiKeyStep.tsx

@@ -0,0 +1,243 @@
+import { Box, Text, useInput, type Key } from "ink";
+import { useState } from "react";
+import { execSync } from "child_process";
+import type { ProviderType } from "../../types/config";
+
+const LABELS: Record<ProviderType, string> = {
+  anthropic: "Anthropic API key",
+  gemini: "Gemini API key",
+  openai: "OpenAI API key",
+  ollama: "Ollama base URL (default: http://localhost:11434)",
+  custom: "API key",
+};
+
+function readClipboard(): string | null {
+  try {
+    if (process.platform === "win32") {
+      return execSync("powershell -command Get-Clipboard", {
+        encoding: "utf-8",
+      }).trim();
+    } else if (process.platform === "darwin") {
+      return execSync("pbpaste", { encoding: "utf-8" }).trim();
+    } else {
+      try {
+        return execSync("xclip -selection clipboard -o", {
+          encoding: "utf-8",
+        }).trim();
+      } catch {
+        return execSync("xsel --clipboard --output", {
+          encoding: "utf-8",
+        }).trim();
+      }
+    }
+  } catch {
+    return null;
+  }
+}
+
+type CustomResult = { apiKey: string; baseUrl?: string };
+type Field = "apiKey" | "baseUrl";
+
+const useFieldInput = (initial: string, onPasteError: (v: boolean) => void) => {
+  const [value, setValue] = useState(initial);
+
+  const handle = (input: string, key: Key) => {
+    if (key.backspace || key.delete) {
+      setValue((v) => v.slice(0, -1));
+      onPasteError(false);
+      return;
+    }
+    if (key.ctrl && input === "v") {
+      const clip = readClipboard();
+      if (clip) {
+        setValue((v) => v + clip);
+        onPasteError(false);
+      } else onPasteError(true);
+      return;
+    }
+    if (key.ctrl && input === "a") {
+      setValue("");
+      return;
+    }
+    if (!key.ctrl && !key.meta && input) {
+      setValue((v) => v + input);
+      onPasteError(false);
+    }
+  };
+
+  return { value, setValue, handle };
+};
+
+const SimpleInput = ({
+  providerType,
+  onSubmit,
+  onSkip,
+}: {
+  providerType: Exclude<ProviderType, "custom">;
+  onSubmit: (value: string) => void;
+  onSkip?: () => void;
+}) => {
+  const [pasteError, setPasteError] = useState(false);
+  const isPassword = providerType !== "ollama";
+  const { value, handle } = useFieldInput(
+    providerType === "ollama" ? "http://localhost:11434" : "",
+    setPasteError,
+  );
+
+  useInput((input, key) => {
+    if (key.return) {
+      if (value.trim()) onSubmit(value.trim());
+      return;
+    }
+    if (key.escape && onSkip) {
+      onSkip();
+      return;
+    }
+    handle(input, key);
+  });
+
+  const display = isPassword ? "•".repeat(value.length) : value;
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Text bold color="cyan">
+        {LABELS[providerType]}
+      </Text>
+      <Box borderStyle="round" borderColor="gray" paddingX={1}>
+        <Text>{display || " "}</Text>
+      </Box>
+      {pasteError ? (
+        <Text color="red">⚠ Could not read clipboard</Text>
+      ) : (
+        <Text color="gray">
+          enter to confirm · ctrl+v to paste · ctrl+a to clear
+          {onSkip ? " · esc to skip" : ""}
+        </Text>
+      )}
+    </Box>
+  );
+};
+
+const CustomInput = ({
+  onSubmit,
+  onSkip,
+}: {
+  onSubmit: (result: CustomResult) => void;
+  onSkip?: () => void;
+}) => {
+  const [activeField, setActiveField] = useState<Field>("apiKey");
+  const [pasteError, setPasteError] = useState(false);
+
+  const apiKeyField = useFieldInput("", setPasteError);
+  const baseUrlField = useFieldInput("", setPasteError);
+
+  const active = activeField === "apiKey" ? apiKeyField : baseUrlField;
+
+  useInput((input, key) => {
+    if (key.escape && onSkip) {
+      onSkip();
+      return;
+    }
+
+    if (key.tab) {
+      setActiveField((f) => (f === "apiKey" ? "baseUrl" : "apiKey"));
+      setPasteError(false);
+      return;
+    }
+
+    if (key.return) {
+      if (activeField === "apiKey" && apiKeyField.value.trim()) {
+        setActiveField("baseUrl");
+        return;
+      }
+      if (activeField === "baseUrl" && apiKeyField.value.trim()) {
+        onSubmit({
+          apiKey: apiKeyField.value.trim(),
+          baseUrl: baseUrlField.value.trim() || undefined,
+        });
+        return;
+      }
+    }
+
+    active.handle(input, key);
+  });
+
+  const fields: {
+    id: Field;
+    label: string;
+    password: boolean;
+    placeholder: string;
+  }[] = [
+    { id: "apiKey", label: "API key", password: true, placeholder: "sk-..." },
+    {
+      id: "baseUrl",
+      label: "Base URL",
+      password: false,
+      placeholder: "https://api.example.com/v1",
+    },
+  ];
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Text bold color="cyan">
+        Custom provider
+      </Text>
+
+      {fields.map(({ id, label, password, placeholder }) => {
+        const isActive = activeField === id;
+        const val = id === "apiKey" ? apiKeyField.value : baseUrlField.value;
+        const display = password ? "•".repeat(val.length) : val;
+
+        return (
+          <Box key={id} flexDirection="column" gap={0}>
+            <Text color={isActive ? "cyan" : "gray"}>
+              {isActive ? "›" : " "} {label}
+              {id === "baseUrl" ? " (optional)" : ""}
+            </Text>
+            <Box
+              borderStyle="round"
+              borderColor={isActive ? "cyan" : "gray"}
+              paddingX={1}
+            >
+              <Text color={val ? "white" : "gray"}>
+                {display || placeholder}
+              </Text>
+            </Box>
+          </Box>
+        );
+      })}
+
+      {pasteError ? (
+        <Text color="red">⚠ Could not read clipboard</Text>
+      ) : (
+        <Text color="gray">
+          enter to next field · tab to switch · ctrl+v to paste · ctrl+a to
+          clear
+          {onSkip ? " · esc to skip" : ""}
+        </Text>
+      )}
+    </Box>
+  );
+};
+
+export const ApiKeyStep = ({
+  providerType,
+  onSubmit,
+  onSkip,
+}: {
+  providerType: ProviderType;
+  onSubmit: (value: string | CustomResult) => void;
+  onSkip?: () => void;
+}) => {
+  if (providerType === "custom") {
+    return <CustomInput onSubmit={onSubmit} onSkip={onSkip} />;
+  }
+
+  return (
+    <SimpleInput
+      providerType={providerType}
+      onSubmit={onSubmit}
+      onSkip={onSkip}
+    />
+  );
+};

package/src/components/provider/ModelStep.tsx

@@ -0,0 +1,73 @@
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import { useState } from "react";
+import { DEFAULT_MODELS } from "../../utils/config";
+import type { ProviderType } from "../../types/config";
+
+export const ModelStep = ({
+  providerType,
+  onSelect,
+}: {
+  providerType: ProviderType;
+  onSelect: (model: string) => void;
+}) => {
+  const models = DEFAULT_MODELS[providerType] ?? [];
+  const [index, setIndex] = useState(0);
+  const [custom, setCustom] = useState("");
+  const [typing, setTyping] = useState(models.length === 0);
+
+  useInput((input, key) => {
+    if (typing) {
+      if (key.return && custom.trim()) {
+        onSelect(custom.trim());
+        return;
+      }
+      if (key.backspace || key.delete) {
+        setCustom((v) => v.slice(0, -1));
+        return;
+      }
+      if (!key.ctrl && !key.meta && input) setCustom((v) => v + input);
+      return;
+    }
+    if (key.upArrow) setIndex((i) => Math.max(0, i - 1));
+    if (key.downArrow) setIndex((i) => Math.min(models.length, i + 1));
+    if (key.return) {
+      if (index === models.length) setTyping(true);
+      else onSelect(models[index]!);
+    }
+  });
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Text bold color="cyan">
+        Select a model
+      </Text>
+      {models.map((m, i) => {
+        const selected = !typing && i === index;
+        return (
+          <Box key={m} marginLeft={1}>
+            <Text color={selected ? "cyan" : "white"}>
+              {selected ? figures.arrowRight : " "}
+              {"  "}
+              {m}
+            </Text>
+          </Box>
+        );
+      })}
+      <Box marginLeft={1}>
+        <Text color={index === models.length && !typing ? "cyan" : "gray"}>
+          {index === models.length && !typing ? figures.arrowRight : " "}
+          {"  "}
+          {typing ? (
+            <Text>
+              Custom: <Text color="white">{custom || " "}</Text>
+            </Text>
+          ) : (
+            "Enter custom model name"
+          )}
+        </Text>
+      </Box>
+      <Text color="gray">↑↓ navigate · enter to select</Text>
+    </Box>
+  );
+};

package/src/components/provider/ProviderTypeStep.tsx

@@ -0,0 +1,54 @@
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import { useState } from "react";
+import type { ProviderType } from "../../types/config";
+
+const OPTIONS: { type: ProviderType; label: string; description: string }[] = [
+  { type: "anthropic", label: "Anthropic", description: "Claude models" },
+  { type: "openai", label: "OpenAI", description: "GPT models" },
+  { type: "ollama", label: "Ollama", description: "Local models" },
+  {
+    type: "custom",
+    label: "Custom provider",
+    description: "Any OpenAI-compatible API",
+  },
+];
+
+export const ProviderTypeStep = ({
+  onSelect,
+}: {
+  onSelect: (type: ProviderType) => void;
+}) => {
+  const [index, setIndex] = useState(0);
+
+  useInput((_, key) => {
+    if (key.upArrow) setIndex((i) => Math.max(0, i - 1));
+    if (key.downArrow) setIndex((i) => Math.min(OPTIONS.length - 1, i + 1));
+    if (key.return) onSelect(OPTIONS[index]!.type);
+  });
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Text bold color="cyan">
+        Select a provider
+      </Text>
+      {OPTIONS.map((opt, i) => {
+        const selected = i === index;
+        return (
+          <Box key={opt.type} marginLeft={1}>
+            <Text color={selected ? "cyan" : "white"}>
+              {selected ? figures.arrowRight : " "}
+              {"  "}
+              <Text bold={selected}>{opt.label}</Text>
+              <Text color="gray">
+                {"  "}
+                {opt.description}
+              </Text>
+            </Text>
+          </Box>
+        );
+      })}
+      <Text color="gray">↑↓ navigate · enter to select</Text>
+    </Box>
+  );
+};

package/src/components/provider/RemoveProviderStep.tsx

@@ -0,0 +1,83 @@
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import { useState } from "react";
+import { loadConfig, saveConfig } from "../../utils/config";
+import type { Provider } from "../../types/config";
+
+export const RemoveProviderStep = ({ onDone }: { onDone: () => void }) => {
+  const config = loadConfig();
+  const providers = config.providers;
+  const [index, setIndex] = useState(0);
+  const [confirming, setConfirming] = useState(false);
+
+  useInput((input, key) => {
+    if (confirming) {
+      if (input === "y" || input === "Y") {
+        const updated = {
+          ...config,
+          providers: providers.filter((_, i) => i !== index),
+          defaultProviderId:
+            config.defaultProviderId === providers[index]?.id
+              ? providers.find((_, i) => i !== index)?.id
+              : config.defaultProviderId,
+        };
+        saveConfig(updated);
+        onDone();
+      } else {
+        setConfirming(false);
+      }
+      return;
+    }
+
+    if (key.upArrow) setIndex((i) => Math.max(0, i - 1));
+    if (key.downArrow) setIndex((i) => Math.min(providers.length - 1, i + 1));
+    if (key.return) setConfirming(true);
+    if (key.escape) onDone();
+  });
+
+  if (providers.length === 0) {
+    return (
+      <Box marginTop={1}>
+        <Text color="gray">{figures.info} No providers configured.</Text>
+      </Box>
+    );
+  }
+
+  const selected = providers[index];
+
+  if (confirming && selected) {
+    return (
+      <Box flexDirection="column" gap={1} marginTop={1}>
+        <Text color="red">
+          {figures.warning} Remove <Text bold>{selected.name}</Text>? (y/n)
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" gap={1} marginTop={1}>
+      <Text bold color="cyan">
+        Remove a provider
+      </Text>
+      {providers.map((p, i) => {
+        const isSelected = i === index;
+        return (
+          <Box key={p.id} marginLeft={1}>
+            <Text color={isSelected ? "red" : "white"}>
+              {isSelected ? figures.arrowRight : " "}
+              {"  "}
+              <Text bold={isSelected}>{p.name}</Text>
+              <Text color="gray">
+                {"  "}
+                {p.type} · {p.model}
+                {config.defaultProviderId === p.id ? " · default" : ""}
+              </Text>
+            </Text>
+          </Box>
+        );
+      })}
+      <Text color="gray">↑↓ navigate · enter to remove · esc to cancel</Text>
+    </Box>
+  );
+};

package/src/components/repo/DiffViewer.tsx

@@ -0,0 +1,175 @@
+import React from "react";
+import { Box, Text } from "ink";
+import figures from "figures";
+
+export type DiffLine = {
+  type: "added" | "removed" | "unchanged";
+  content: string;
+  lineNum: number;
+};
+
+export type FilePatch = {
+  path: string;
+  content: string;
+  isNew: boolean;
+};
+
+export function computeDiff(
+  oldContent: string,
+  newContent: string,
+): DiffLine[] {
+  const oldLines = oldContent.split("\n");
+  const newLines = newContent.split("\n");
+  const result: DiffLine[] = [];
+
+  const m = oldLines.length;
+  const n = newLines.length;
+
+  const dp: number[][] = Array.from({ length: m + 1 }, () =>
+    new Array(n + 1).fill(0),
+  );
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      if (oldLines[i - 1] === newLines[j - 1]) {
+        dp[i]![j] = dp[i - 1]![j - 1]! + 1;
+      } else {
+        dp[i]![j] = Math.max(dp[i - 1]![j]!, dp[i]![j - 1]!);
+      }
+    }
+  }
+
+  const raw: DiffLine[] = [];
+  let i = m;
+  let j = n;
+
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && oldLines[i - 1] === newLines[j - 1]) {
+      raw.unshift({ type: "unchanged", content: oldLines[i - 1]!, lineNum: j });
+      i--;
+      j--;
+    } else if (j > 0 && (i === 0 || dp[i]![j - 1]! >= dp[i - 1]![j]!)) {
+      raw.unshift({ type: "added", content: newLines[j - 1]!, lineNum: j });
+      j--;
+    } else {
+      raw.unshift({ type: "removed", content: oldLines[i - 1]!, lineNum: i });
+      i--;
+    }
+  }
+
+  const CONTEXT = 3;
+  const changedIndices = new Set<number>();
+  raw.forEach((line, idx) => {
+    if (line.type !== "unchanged") {
+      for (
+        let k = Math.max(0, idx - CONTEXT);
+        k <= Math.min(raw.length - 1, idx + CONTEXT);
+        k++
+      ) {
+        changedIndices.add(k);
+      }
+    }
+  });
+
+  let lastIncluded = -1;
+  raw.forEach((line, idx) => {
+    if (!changedIndices.has(idx)) return;
+    if (lastIncluded !== -1 && idx > lastIncluded + 1) {
+      result.push({ type: "unchanged", content: "...", lineNum: -1 });
+    }
+    result.push(line);
+    lastIncluded = idx;
+  });
+
+  return result;
+}
+
+export function buildDiffs(
+  repoPath: string,
+  patches: FilePatch[],
+): DiffLine[][] {
+  const { readFileSync } = require("fs") as typeof import("fs");
+  const path = require("path") as typeof import("path");
+
+  return patches.map((patch) => {
+    if (patch.isNew) {
+      return patch.content.split("\n").map((line, i) => ({
+        type: "added" as const,
+        content: line,
+        lineNum: i + 1,
+      }));
+    }
+    const fullPath = path.join(repoPath, patch.path);
+    let oldContent = "";
+    try {
+      oldContent = readFileSync(fullPath, "utf-8");
+    } catch {}
+    return computeDiff(oldContent, patch.content);
+  });
+}
+
+export const DiffViewer = ({
+  patches,
+  diffs,
+  scrollOffset,
+  maxVisible = 20,
+}: {
+  patches: FilePatch[];
+  diffs: DiffLine[][];
+  scrollOffset: number;
+  maxVisible?: number;
+}) => {
+  const allLines: {
+    fileIdx: number;
+    fileName: string;
+    line: DiffLine | null;
+  }[] = [];
+
+  patches.forEach((patch, fi) => {
+    allLines.push({ fileIdx: fi, fileName: patch.path, line: null });
+    (diffs[fi] ?? []).forEach((line) => {
+      allLines.push({ fileIdx: fi, fileName: patch.path, line });
+    });
+  });
+
+  const visible = allLines.slice(scrollOffset, scrollOffset + maxVisible);
+
+  return (
+    <Box flexDirection="column" gap={0}>
+      {visible.map((entry, i) => {
+        if (!entry.line) {
+          return (
+            <Box key={`header-${entry.fileIdx}-${i}`}>
+              <Text bold color={entry.fileIdx % 2 === 0 ? "cyan" : "magenta"}>
+                {figures.bullet} {entry.fileName}
+                {patches[entry.fileIdx]?.isNew ? " (new file)" : ""}
+              </Text>
+            </Box>
+          );
+        }
+
+        const { type, content, lineNum } = entry.line;
+        const prefix = type === "added" ? "+" : type === "removed" ? "-" : " ";
+        const color =
+          type === "added" ? "green" : type === "removed" ? "red" : "gray";
+        const lineNumStr =
+          lineNum === -1 ? "   " : String(lineNum).padStart(3, " ");
+
+        return (
+          <Box key={`line-${entry.fileIdx}-${i}`}>
+            <Text color="gray">{lineNumStr} </Text>
+            <Text color={color}>
+              {prefix} {content}
+            </Text>
+          </Box>
+        );
+      })}
+      {allLines.length > maxVisible && (
+        <Text color="gray">
+          {scrollOffset + maxVisible < allLines.length
+            ? `↓ ${allLines.length - scrollOffset - maxVisible} more lines`
+            : "end of diff"}
+        </Text>
+      )}
+    </Box>
+  );
+};

package/src/components/repo/FileReviewer.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import { useState } from "react";
+import { iconForFile } from "../../utils/files";
+import { FileViewer } from "./FileViewer";
+import type { ImportantFile, ReviewStage } from "../../types/repo";
+
+export const FileReviewer = ({
+  files,
+  onDone,
+}: {
+  files: ImportantFile[];
+  onDone: () => void;
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [reviewStage, setReviewStage] = useState<ReviewStage>("list");
+
+  useInput((_, key) => {
+    if (reviewStage === "file") return;
+
+    if (key.upArrow) setSelectedIndex((i) => Math.max(0, i - 1));
+    if (key.downArrow)
+      setSelectedIndex((i) => Math.min(files.length - 1, i + 1));
+    if (key.return || key.rightArrow) setReviewStage("file");
+    if (key.escape) onDone();
+    if (key.rightArrow) onDone();
+  });
+
+  if (reviewStage === "file") {
+    const file = files[selectedIndex];
+    if (!file) return null;
+    return (
+      <FileViewer
+        file={file}
+        index={selectedIndex}
+        total={files.length}
+        onBack={() => setReviewStage("list")}
+      />
+    );
+  }
+
+  return (
+    <Box flexDirection="column" marginTop={1} gap={1}>
+      <Text bold color="cyan">
+        {figures.hamburger} {files.length} important file(s) found
+        <Text color="gray">
+          {"  "}↑↓ navigate · enter to open · → next step · esc to skip
+        </Text>
+      </Text>
+
+      <Box flexDirection="column">
+        {files.map((file, i) => {
+          const isSelected = i === selectedIndex;
+          return (
+            <Box key={file.path} marginLeft={1}>
+              <Text color={isSelected ? "cyan" : "yellow"}>
+                {isSelected ? figures.arrowRight : " "}
+                {"  "}
+                {iconForFile(file.path)}
+                {"  "}
+                {file.path}
+              </Text>
+            </Box>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+};