@ridit/lens 0.1.0

package/src/components/task/TaskRunner.tsx

@@ -0,0 +1,396 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import Spinner from "ink-spinner";
+import figures from "figures";
+import { useState } from "react";
+import { writeFileSync, existsSync, mkdirSync } from "fs";
+import path from "path";
+import { ACCENT } from "../../colors";
+import { callModelRaw } from "../../utils/ai";
+import { DiffViewer, buildDiffs } from "../repo/DiffViewer";
+import { ProviderPicker } from "../repo/ProviderPicker";
+import type { DiffLine, FilePatch } from "../repo/DiffViewer";
+import type { Provider } from "../../types/config";
+import type { ImportantFile } from "../../types/repo";
+import { fetchFileTree, readImportantFiles } from "../../utils/files";
+import { readFileSync, readdirSync, statSync } from "fs";
+import { useThinkingPhrase } from "../../utils/thinking";
+
+type Stage =
+  | { type: "picking-provider" }
+  | { type: "reading-files" }
+  | { type: "thinking" }
+  | {
+      type: "preview";
+      plan: PromptPlan;
+      diffLines: DiffLine[][];
+      scrollOffset: number;
+    }
+  | { type: "applying" }
+  | { type: "done"; applied: AppliedFile[] }
+  | {
+      type: "viewing-file";
+      file: AppliedFile;
+      diffLines: DiffLine[];
+      scrollOffset: number;
+    }
+  | { type: "error"; message: string };
+
+type PromptPlan = {
+  summary: string;
+  patches: FilePatch[];
+};
+
+type AppliedFile = {
+  path: string;
+  isNew: boolean;
+  patch: FilePatch;
+};
+
+function buildPrompt(userPrompt: string, files: ImportantFile[]): string {
+  const fileList = files
+    .map((f) => `### ${f.path}\n\`\`\`\n${f.content.slice(0, 3000)}\n\`\`\``)
+    .join("\n\n");
+
+  return `You are a senior software engineer working on a codebase. The user has made the following request:
+
+"${userPrompt}"
+
+Here are the relevant files in the codebase:
+
+${fileList}
+
+Fulfill the user's request by providing the complete new content for any files that need to be created or modified.
+
+Respond ONLY with a JSON object (no markdown, no explanation) with this exact shape:
+{
+  "summary": "2-3 sentence explanation of what you did and why",
+  "patches": [
+    {
+      "path": "relative/path/to/file.ts",
+      "content": "complete new file content here",
+      "isNew": false
+    }
+  ]
+}
+
+Rules:
+- Always provide the COMPLETE file content, not diffs or partial content
+- isNew should be true only if you are creating a brand new file
+- Only include files that actually need changes
+- Keep changes focused on fulfilling the request
+- Do not change unrelated code
+- If the request is impossible or unclear, return an empty patches array with an explanation in summary`;
+}
+
+function ThinkingAboutStep({ prompt }: { prompt: string }) {
+  const phrase = useThinkingPhrase(true, "task");
+  return (
+    <Box gap={1}>
+      <Text color={ACCENT}>
+        <Spinner />
+      </Text>
+      <Text color={ACCENT}>{phrase}</Text>
+      <Text color="gray">"{prompt}"</Text>
+    </Box>
+  );
+}
+
+function applyPatches(repoPath: string, plan: PromptPlan): AppliedFile[] {
+  const applied: AppliedFile[] = [];
+  for (const patch of plan.patches) {
+    const fullPath = path.join(repoPath, patch.path);
+    const dir = path.dirname(fullPath);
+    if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
+    writeFileSync(fullPath, patch.content, "utf-8");
+    applied.push({ path: patch.path, isNew: patch.isNew, patch });
+  }
+  return applied;
+}
+
+const SKIP_DIRS = new Set([
+  "node_modules",
+  ".git",
+  "dist",
+  "build",
+  ".next",
+  "out",
+  "coverage",
+  "__pycache__",
+  ".venv",
+  "venv",
+]);
+
+function walkDir(dir: string, base = dir): string[] {
+  const results: string[] = [];
+  let entries: string[];
+  try {
+    entries = readdirSync(dir, { encoding: "utf-8" });
+  } catch {
+    return results;
+  }
+  for (const entry of entries) {
+    if (SKIP_DIRS.has(entry)) continue;
+    const full = path.join(dir, entry);
+    const rel = path.relative(base, full).replace(/\\/g, "/");
+    let isDir = false;
+    try {
+      isDir = statSync(full).isDirectory();
+    } catch {
+      continue;
+    }
+    if (isDir) results.push(...walkDir(full, base));
+    else results.push(rel);
+  }
+  return results;
+}
+
+export const PromptRunner = ({
+  repoPath,
+  userPrompt,
+}: {
+  repoPath: string;
+  userPrompt: string;
+}) => {
+  const [stage, setStage] = useState<Stage>({ type: "picking-provider" });
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [files, setFiles] = useState<ImportantFile[]>([]);
+
+  const handleProviderDone = (provider: Provider) => {
+    setStage({ type: "reading-files" });
+
+    fetchFileTree(repoPath)
+      .catch(() => walkDir(repoPath))
+      .then((fileTree) => {
+        const importantFiles = readImportantFiles(repoPath, fileTree);
+        setFiles(importantFiles);
+        setStage({ type: "thinking" });
+        return callModelRaw(provider, buildPrompt(userPrompt, importantFiles));
+      })
+      .then((text) => {
+        const cleaned = text.replace(/```json|```/g, "").trim();
+        const match = cleaned.match(/\{[\s\S]*\}/);
+        if (!match) throw new Error("No JSON in model response");
+        const plan = JSON.parse(match[0]) as PromptPlan;
+
+        if (plan.patches.length === 0) {
+          setStage({
+            type: "error",
+            message: plan.summary || "Model made no changes.",
+          });
+          return;
+        }
+
+        const diffLines = buildDiffs(repoPath, plan.patches);
+        setStage({ type: "preview", plan, diffLines, scrollOffset: 0 });
+      })
+      .catch((err: unknown) =>
+        setStage({
+          type: "error",
+          message: err instanceof Error ? err.message : "Something went wrong",
+        }),
+      );
+  };
+
+  useInput((_, key) => {
+    if (stage.type === "preview") {
+      if (key.upArrow)
+        setStage({
+          ...stage,
+          scrollOffset: Math.max(0, stage.scrollOffset - 1),
+        });
+      if (key.downArrow)
+        setStage({ ...stage, scrollOffset: stage.scrollOffset + 1 });
+      if (key.escape) {
+        process.exit(0);
+        return;
+      }
+      if (key.return) {
+        setStage({ type: "applying" });
+        try {
+          const applied = applyPatches(repoPath, stage.plan);
+          setStage({ type: "done", applied });
+        } catch (err: unknown) {
+          setStage({
+            type: "error",
+            message:
+              err instanceof Error ? err.message : "Failed to write files",
+          });
+        }
+      }
+      return;
+    }
+
+    if (stage.type === "done") {
+      if (key.escape) {
+        process.exit(0);
+        return;
+      }
+      if (key.upArrow) setSelectedIndex((i) => Math.max(0, i - 1));
+      if (key.downArrow)
+        setSelectedIndex((i) => Math.min(stage.applied.length - 1, i + 1));
+      if (key.return) {
+        const file = stage.applied[selectedIndex];
+        if (!file) return;
+        const diffLines = buildDiffs(repoPath, [file.patch])[0] ?? [];
+        setStage({ type: "viewing-file", file, diffLines, scrollOffset: 0 });
+      }
+      return;
+    }
+
+    if (stage.type === "viewing-file") {
+      if (key.upArrow)
+        setStage({
+          ...stage,
+          scrollOffset: Math.max(0, stage.scrollOffset - 1),
+        });
+      if (key.downArrow)
+        setStage({ ...stage, scrollOffset: stage.scrollOffset + 1 });
+      if (key.escape || key.return) {
+        setStage((prev) => {
+          if (prev.type !== "viewing-file") return prev;
+
+          process.exit(0);
+          return prev;
+        });
+      }
+      return;
+    }
+
+    if (stage.type === "error") {
+      if (key.return || key.escape) process.exit(1);
+    }
+  });
+
+  if (stage.type === "picking-provider") {
+    return <ProviderPicker onDone={handleProviderDone} />;
+  }
+
+  if (stage.type === "reading-files") {
+    return (
+      <Box marginTop={1} gap={1}>
+        <Text color={ACCENT}>
+          <Spinner />
+        </Text>
+        <Text>Reading codebase...</Text>
+      </Box>
+    );
+  }
+
+  if (stage.type === "thinking") {
+    return (
+      <Box flexDirection="column" marginTop={1} gap={1}>
+        <ThinkingAboutStep prompt={userPrompt} />
+        {files.length > 0 && (
+          <Box flexDirection="column" marginLeft={2}>
+            <Text color="gray">Using {files.length} files as context</Text>
+          </Box>
+        )}
+      </Box>
+    );
+  }
+
+  if (stage.type === "preview") {
+    const { plan, diffLines, scrollOffset } = stage;
+    return (
+      <Box flexDirection="column" marginTop={1} gap={1}>
+        <Text bold color="cyan">
+          {figures.info} Proposed Changes
+        </Text>
+        <Text color="white">{plan.summary}</Text>
+        <Box flexDirection="column" marginTop={1}>
+          <Text color="gray">{plan.patches.length} file(s) to change:</Text>
+          {plan.patches.map((p) => (
+            <Text key={p.path} color={p.isNew ? "green" : "yellow"}>
+              {"  "}
+              {p.isNew ? figures.tick : figures.bullet} {p.path}
+              {p.isNew && <Text color="gray"> (new)</Text>}
+            </Text>
+          ))}
+        </Box>
+        <DiffViewer
+          patches={plan.patches}
+          diffs={diffLines}
+          scrollOffset={scrollOffset}
+        />
+        <Text color="gray">↑↓ scroll · enter to apply · esc to cancel</Text>
+      </Box>
+    );
+  }
+
+  if (stage.type === "applying") {
+    return (
+      <Box marginTop={1} gap={1}>
+        <Text color={ACCENT}>
+          <Spinner />
+        </Text>
+        <Text>Applying changes...</Text>
+      </Box>
+    );
+  }
+
+  if (stage.type === "done") {
+    return (
+      <Box flexDirection="column" marginTop={1} gap={1}>
+        <Text bold color="green">
+          {figures.tick} Done
+        </Text>
+        <Text color="gray">{stage.applied.length} file(s) written</Text>
+        {stage.applied.map((f, i) => {
+          const isSelected = i === selectedIndex;
+          return (
+            <Box key={f.path} marginLeft={1}>
+              <Text color={isSelected ? "cyan" : "green"}>
+                {isSelected
+                  ? figures.arrowRight
+                  : f.isNew
+                    ? figures.tick
+                    : figures.bullet}{" "}
+                {f.path}
+                {f.isNew && <Text color="gray"> (new)</Text>}
+                {isSelected && <Text color="gray"> · enter to view diff</Text>}
+              </Text>
+            </Box>
+          );
+        })}
+        <Text color="gray">↑↓ navigate · enter to view diff · esc to exit</Text>
+      </Box>
+    );
+  }
+
+  if (stage.type === "viewing-file") {
+    const { file, diffLines, scrollOffset } = stage;
+    return (
+      <Box flexDirection="column" marginTop={1} gap={1}>
+        <Box gap={1}>
+          <Text bold color="cyan">
+            {figures.info}
+          </Text>
+          <Text bold color="cyan">
+            {file.path}
+          </Text>
+          <Text color="gray">{file.isNew ? "(new file)" : "(modified)"}</Text>
+        </Box>
+        <DiffViewer
+          patches={[file.patch]}
+          diffs={[diffLines]}
+          scrollOffset={scrollOffset}
+        />
+        <Text color="gray">↑↓ scroll · esc or enter to exit</Text>
+      </Box>
+    );
+  }
+
+  if (stage.type === "error") {
+    return (
+      <Box flexDirection="column" marginTop={1} gap={1}>
+        <Text color="red">
+          {figures.cross} {stage.message}
+        </Text>
+        <Text color="gray">enter or esc to exit</Text>
+      </Box>
+    );
+  }
+
+  return null;
+};

package/src/components/timeline/CommitDetail.tsx

@@ -0,0 +1,274 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Commit, DiffFile } from "../../utils/git";
+
+const ACCENT = "#FF8C00";
+
+type Props = {
+  commit: Commit | null;
+  diff: DiffFile[];
+  diffLoading: boolean;
+  diffScrollOffset: number;
+  showFullDiff: boolean;
+  width: number;
+  height: number;
+};
+
+function formatFullDate(dateStr: string): string {
+  try {
+    const d = new Date(dateStr);
+    return d.toLocaleDateString("en-US", {
+      weekday: "short",
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return dateStr;
+  }
+}
+
+function statusIcon(status: DiffFile["status"]): {
+  icon: string;
+  color: string;
+} {
+  switch (status) {
+    case "added":
+      return { icon: "+", color: "green" };
+    case "deleted":
+      return { icon: "-", color: "red" };
+    case "renamed":
+      return { icon: "→", color: "yellow" };
+    default:
+      return { icon: "~", color: "cyan" };
+  }
+}
+
+export function CommitDetail({
+  commit,
+  diff,
+  diffLoading,
+  diffScrollOffset,
+  showFullDiff,
+  width,
+  height,
+}: Props) {
+  if (!commit) {
+    return (
+      <Box
+        width={width}
+        height={height}
+        flexDirection="column"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Text color="gray" dimColor>
+          select a commit to view details
+        </Text>
+      </Box>
+    );
+  }
+
+  const divider = "─".repeat(Math.max(0, width - 2));
+
+  // Build all diff lines for scrolling
+  const allDiffLines: Array<{
+    type: string;
+    content: string;
+    fileHeader?: string;
+  }> = [];
+  for (const file of diff) {
+    const { icon, color } = statusIcon(file.status);
+    allDiffLines.push({
+      type: "fileheader",
+      content: `${icon} ${file.path}`,
+      fileHeader: color,
+    });
+    allDiffLines.push({
+      type: "filestat",
+      content: `  +${file.insertions} -${file.deletions}`,
+    });
+    if (showFullDiff) {
+      for (const line of file.lines) {
+        allDiffLines.push({ type: line.type, content: line.content });
+      }
+    }
+  }
+
+  const visibleDiffLines = allDiffLines.slice(
+    diffScrollOffset,
+    diffScrollOffset + Math.max(1, height - 18),
+  );
+
+  return (
+    <Box width={width} flexDirection="column">
+      {/* ── Commit header ── */}
+      <Box paddingX={1} marginBottom={1}>
+        <Text color="gray" dimColor>
+          {divider}
+        </Text>
+      </Box>
+
+      <Box paddingX={1} gap={2}>
+        <Text color={ACCENT} bold>
+          ◉ {commit.shortHash}
+        </Text>
+        {commit.parents.length > 1 && <Text color="magenta">merge commit</Text>}
+        {commit.refs && (
+          <Text color="yellow">
+            {commit.refs
+              .split(",")
+              .map((r) => r.trim())
+              .filter(Boolean)
+              .slice(0, 2)
+              .join(" ")}
+          </Text>
+        )}
+      </Box>
+
+      {/* message */}
+      <Box paddingX={1} marginTop={1}>
+        <Text color="white" bold wrap="wrap">
+          {commit.message}
+        </Text>
+      </Box>
+      {commit.body && (
+        <Box paddingX={1} marginTop={1}>
+          <Text color="gray" wrap="wrap">
+            {commit.body}
+          </Text>
+        </Box>
+      )}
+
+      {/* meta */}
+      <Box paddingX={1} marginTop={1} flexDirection="column" gap={0}>
+        <Box gap={2}>
+          <Text color="gray" dimColor>
+            author
+          </Text>
+          <Text color="cyan">{commit.author}</Text>
+          <Text color="gray" dimColor>
+            &lt;{commit.email}&gt;
+          </Text>
+        </Box>
+        <Box gap={2}>
+          <Text color="gray" dimColor>
+            date{" "}
+          </Text>
+          <Text color="white">{formatFullDate(commit.date)}</Text>
+          <Text color="gray" dimColor>
+            ({commit.relativeDate})
+          </Text>
+        </Box>
+        {commit.parents.length > 0 && (
+          <Box gap={2}>
+            <Text color="gray" dimColor>
+              parent
+            </Text>
+            <Text color="gray">
+              {commit.parents.map((p) => p.slice(0, 7)).join(", ")}
+            </Text>
+          </Box>
+        )}
+      </Box>
+
+      {/* stats bar */}
+      <Box paddingX={1} marginTop={1} gap={3}>
+        <Text color="green">+{commit.insertions} insertions</Text>
+        <Text color="red">-{commit.deletions} deletions</Text>
+        <Text color="gray" dimColor>
+          {commit.filesChanged} file{commit.filesChanged !== 1 ? "s" : ""}{" "}
+          changed
+        </Text>
+      </Box>
+
+      {/* ── Diff section ── */}
+      <Box paddingX={1} marginTop={1}>
+        <Text color="gray" dimColor>
+          {divider}
+        </Text>
+      </Box>
+
+      <Box paddingX={1} marginBottom={1} gap={2}>
+        <Text color={ACCENT}>CHANGES</Text>
+        <Text color="gray" dimColor>
+          {showFullDiff ? "[d] collapse diff" : "[d] expand diff"}
+        </Text>
+        {diffLoading && (
+          <Text color="gray" dimColor>
+            loading…
+          </Text>
+        )}
+      </Box>
+
+      {/* diff lines */}
+      {visibleDiffLines.map((line, i) => {
+        if (line.type === "fileheader") {
+          return (
+            <Box key={i} paddingX={1}>
+              <Text color={line.fileHeader ?? "white"} bold>
+                {line.content}
+              </Text>
+            </Box>
+          );
+        }
+        if (line.type === "filestat") {
+          return (
+            <Box key={i} paddingX={1}>
+              <Text color="gray" dimColor>
+                {line.content}
+              </Text>
+            </Box>
+          );
+        }
+        if (line.type === "header") {
+          return (
+            <Box key={i} paddingX={1}>
+              <Text color="cyan" dimColor>
+                {line.content.slice(0, width - 4)}
+              </Text>
+            </Box>
+          );
+        }
+        if (line.type === "add") {
+          return (
+            <Box key={i} paddingX={1}>
+              <Text color="green">
+                {"+"}
+                {line.content.slice(0, width - 5)}
+              </Text>
+            </Box>
+          );
+        }
+        if (line.type === "remove") {
+          return (
+            <Box key={i} paddingX={1}>
+              <Text color="red">
+                {"-"}
+                {line.content.slice(0, width - 5)}
+              </Text>
+            </Box>
+          );
+        }
+        return (
+          <Box key={i} paddingX={1}>
+            <Text color="gray" dimColor>
+              {" "}
+              {line.content.slice(0, width - 5)}
+            </Text>
+          </Box>
+        );
+      })}
+
+      {allDiffLines.length > visibleDiffLines.length + diffScrollOffset && (
+        <Box paddingX={1} marginTop={1}>
+          <Text color="gray" dimColor>
+            ↓ scroll diff with shift+↑↓
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}