@ridit/lens 0.1.0

package/src/commands/task.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Box, Text } from "ink";
+import figures from "figures";
+import { existsSync } from "fs";
+import path from "path";
+import { PromptRunner } from "../components/task/TaskRunner";
+
+export const TaskCommand = ({
+  prompt,
+  path: inputPath,
+}: {
+  prompt: string;
+  path: string;
+}) => {
+  const resolvedPath = path.resolve(inputPath);
+
+  if (!existsSync(resolvedPath)) {
+    return (
+      <Box marginTop={1}>
+        <Text color="red">
+          {figures.cross} Path not found: {resolvedPath}
+        </Text>
+      </Box>
+    );
+  }
+
+  if (!prompt.trim()) {
+    return (
+      <Box marginTop={1}>
+        <Text color="red">{figures.cross} Prompt cannot be empty.</Text>
+      </Box>
+    );
+  }
+
+  return <PromptRunner repoPath={resolvedPath} userPrompt={prompt} />;
+};

package/src/commands/timeline.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Box, Text } from "ink";
+import figures from "figures";
+import { existsSync } from "fs";
+import path from "path";
+import { TimelineRunner } from "../components/timeline/TimelineRunner";
+
+export const TimelineCommand = ({ path: inputPath }: { path: string }) => {
+  const resolvedPath = path.resolve(inputPath);
+
+  if (!existsSync(resolvedPath)) {
+    return (
+      <Box marginTop={1}>
+        <Text color="red">
+          {figures.cross} Path not found: {resolvedPath}
+        </Text>
+      </Box>
+    );
+  }
+
+  return <TimelineRunner repoPath={resolvedPath} />;
+};

package/src/components/chat/ChatMessage.tsx

@@ -0,0 +1,176 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { ACCENT } from "../../colors";
+import type { Message } from "../../types/chat";
+
+function InlineText({ text }: { text: string }) {
+  const parts = text.split(/(`[^`]+`|\*\*[^*]+\*\*)/g);
+  return (
+    <>
+      {parts.map((part, i) => {
+        if (part.startsWith("`") && part.endsWith("`")) {
+          return (
+            <Text key={i} color={ACCENT}>
+              {part.slice(1, -1)}
+            </Text>
+          );
+        }
+        if (part.startsWith("**") && part.endsWith("**")) {
+          return (
+            <Text key={i} bold color="white">
+              {part.slice(2, -2)}
+            </Text>
+          );
+        }
+        return (
+          <Text key={i} color="white">
+            {part}
+          </Text>
+        );
+      })}
+    </>
+  );
+}
+
+function CodeBlock({ lang, code }: { lang: string; code: string }) {
+  return (
+    <Box flexDirection="column" marginY={1} marginLeft={2}>
+      {lang && <Text color="gray">{lang}</Text>}
+      {code.split("\n").map((line, i) => (
+        <Text key={i} color={ACCENT}>
+          {"  "}
+          {line}
+        </Text>
+      ))}
+    </Box>
+  );
+}
+
+function MessageBody({ content }: { content: string }) {
+  const segments = content.split(/(```[\s\S]*?```)/g);
+
+  return (
+    <Box flexDirection="column">
+      {segments.map((seg, si) => {
+        if (seg.startsWith("```")) {
+          const lines = seg.slice(3).split("\n");
+          const lang = lines[0]?.trim() ?? "";
+          const code = lines
+            .slice(1)
+            .join("\n")
+            .replace(/```\s*$/, "")
+            .trimEnd();
+          return <CodeBlock key={si} lang={lang} code={code} />;
+        }
+
+        const lines = seg.split("\n").filter((l) => l.trim() !== "");
+        return (
+          <Box key={si} flexDirection="column">
+            {lines.map((line, li) => {
+              if (line.match(/^[-*•]\s/)) {
+                return (
+                  <Box key={li} gap={1}>
+                    <Text color={ACCENT}>*</Text>
+                    <InlineText text={line.slice(2).trim()} />
+                  </Box>
+                );
+              }
+
+              if (line.match(/^\d+\.\s/)) {
+                const num = line.match(/^(\d+)\.\s/)![1];
+                return (
+                  <Box key={li} gap={1}>
+                    <Text color="gray">{num}.</Text>
+                    <InlineText text={line.replace(/^\d+\.\s/, "").trim()} />
+                  </Box>
+                );
+              }
+
+              return (
+                <Box key={li}>
+                  <InlineText text={line} />
+                </Box>
+              );
+            })}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+export function StaticMessage({ msg }: { msg: Message }) {
+  if (msg.role === "user") {
+    return (
+      <Box marginBottom={1} gap={1}>
+        <Text color="gray">{">"}</Text>
+        <Text color="white" bold>
+          {msg.content}
+        </Text>
+      </Box>
+    );
+  }
+
+  if (msg.type === "tool") {
+    const icons: Record<string, string> = {
+      shell: "$",
+      fetch: "~>",
+      "read-file": "r",
+      "write-file": "w",
+      search: "?",
+    };
+    const icon = icons[msg.toolName] ?? "·";
+    const label =
+      msg.toolName === "shell"
+        ? msg.content
+        : msg.toolName === "search"
+          ? `"${msg.content}"`
+          : msg.content;
+
+    return (
+      <Box flexDirection="column" marginBottom={1}>
+        <Box gap={1}>
+          <Text color={msg.approved ? ACCENT : "red"}>{icon}</Text>
+          <Text color={msg.approved ? "gray" : "red"} dimColor={!msg.approved}>
+            {label}
+          </Text>
+          {!msg.approved && <Text color="red">denied</Text>}
+        </Box>
+        {msg.approved && msg.result && (
+          <Box marginLeft={2}>
+            <Text color="gray">
+              {msg.result.split("\n")[0]?.slice(0, 120)}
+              {(msg.result.split("\n")[0]?.length ?? 0) > 120 ? "…" : ""}
+            </Text>
+          </Box>
+        )}
+      </Box>
+    );
+  }
+
+  if (msg.type === "plan") {
+    return (
+      <Box flexDirection="column" marginBottom={1}>
+        <Box gap={1}>
+          <Text color={ACCENT}>*</Text>
+          <MessageBody content={msg.content} />
+        </Box>
+        <Box marginLeft={2} gap={1}>
+          <Text color={msg.applied ? "green" : "gray"}>
+            {msg.applied ? "✓" : "·"}
+          </Text>
+          <Text color={msg.applied ? "green" : "gray"} dimColor={!msg.applied}>
+            {msg.applied ? "changes applied" : "changes skipped"}
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box marginBottom={1} gap={1}>
+      <Text color={ACCENT}>●</Text>
+      <MessageBody content={msg.content} />
+    </Box>
+  );
+}

package/src/components/chat/ChatOverlays.tsx

@@ -0,0 +1,329 @@
+import React from "react";
+import { Box, Text, Static } from "ink";
+import Spinner from "ink-spinner";
+import TextInput from "ink-text-input";
+import figures from "figures";
+import { ACCENT } from "../../colors";
+import { DiffViewer } from "../repo/DiffViewer";
+import { StaticMessage } from "./ChatMessage";
+import type { DiffLine, FilePatch } from "../repo/DiffViewer";
+import type { Message, ToolCall, ChatStage } from "../../types/chat";
+
+function History({ committed }: { committed: Message[] }) {
+  return (
+    <Static items={committed}>
+      {(msg, i) => <StaticMessage key={i} msg={msg} />}
+    </Static>
+  );
+}
+
+function Hint({ text }: { text: string }) {
+  return (
+    <Text color="gray" dimColor>
+      {text}
+    </Text>
+  );
+}
+
+export function PermissionPrompt({
+  tool,
+  onDecide,
+}: {
+  tool: ToolCall;
+  onDecide: (approved: boolean) => void;
+}) {
+  let icon: string;
+  let label: string;
+  let value: string;
+
+  if (tool.type === "shell") {
+    icon = "$";
+    label = "run";
+    value = tool.command;
+  } else if (tool.type === "fetch") {
+    icon = "~>";
+    label = "fetch";
+    value = tool.url;
+  } else if (tool.type === "read-file") {
+    icon = "r";
+    label = "read";
+    value = tool.filePath;
+  } else if (tool.type === "write-file") {
+    icon = "w";
+    label = "write";
+    value = `${tool.filePath} (${tool.fileContent.length} bytes)`;
+  } else {
+    icon = "?";
+    label = "search";
+    value = tool.query;
+  }
+
+  return (
+    <Box flexDirection="column" marginY={1}>
+      <Box gap={1}>
+        <Text color={ACCENT}>{icon}</Text>
+        <Text color="gray">{label}</Text>
+        <Text color="white">{value}</Text>
+      </Box>
+      <Box gap={1} marginLeft={2}>
+        <Text color="gray">y/enter allow · n/esc deny</Text>
+      </Box>
+    </Box>
+  );
+}
+
+export function InputBox({
+  value,
+  onChange,
+  onSubmit,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  onSubmit: (v: string) => void;
+}) {
+  return (
+    <Box
+      marginTop={1}
+      borderBottom
+      borderTop
+      borderRight={false}
+      borderLeft={false}
+      borderColor={"gray"}
+      borderStyle="single"
+    >
+      <Box gap={1}>
+        <Text color={ACCENT}>{">"}</Text>
+        <TextInput value={value} onChange={onChange} onSubmit={onSubmit} />
+      </Box>
+    </Box>
+  );
+}
+
+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>;
+}
+
+export function ShortcutBar() {
+  return (
+    <Box gap={3} marginTop={0}>
+      <Text color="gray" dimColor>
+        enter send · ^v paste · ^c exit
+      </Text>
+    </Box>
+  );
+}
+
+export function CloneOfferView({
+  stage,
+  committed,
+}: {
+  stage: Extract<ChatStage, { type: "clone-offer" }>;
+  committed: Message[];
+}) {
+  return (
+    <Box flexDirection="column">
+      <History committed={committed} />
+      <Box flexDirection="column" marginY={1}>
+        <Box gap={1}>
+          <Text color={ACCENT}>*</Text>
+          <Text color="white">clone </Text>
+          <Text color={ACCENT}>{stage.repoUrl}</Text>
+          <Text color="white">?</Text>
+        </Box>
+        <Hint text="  y/enter clone · n/esc skip" />
+      </Box>
+    </Box>
+  );
+}
+
+export function CloningView({
+  stage,
+  committed,
+}: {
+  stage: Extract<ChatStage, { type: "cloning" }>;
+  committed: Message[];
+}) {
+  return (
+    <Box flexDirection="column">
+      <History committed={committed} />
+      <Box gap={1} marginTop={1}>
+        <Text color={ACCENT}>
+          <Spinner />
+        </Text>
+        <Text color="gray">cloning </Text>
+        <Text color={ACCENT}>{stage.repoUrl}</Text>
+        <Text color="gray">...</Text>
+      </Box>
+    </Box>
+  );
+}
+
+export function CloneExistsView({
+  stage,
+  committed,
+}: {
+  stage: Extract<ChatStage, { type: "clone-exists" }>;
+  committed: Message[];
+}) {
+  return (
+    <Box flexDirection="column">
+      <History committed={committed} />
+      <Box flexDirection="column" marginY={1}>
+        <Box gap={1}>
+          <Text color="yellow">!</Text>
+          <Text color="gray">already cloned at </Text>
+          <Text color="white">{stage.repoPath}</Text>
+        </Box>
+        <Hint text="  y re-clone · n use existing" />
+      </Box>
+    </Box>
+  );
+}
+
+export function CloneDoneView({
+  stage,
+  committed,
+}: {
+  stage: Extract<ChatStage, { type: "clone-done" }>;
+  committed: Message[];
+}) {
+  const repoName = stage.repoUrl.split("/").pop() ?? "repo";
+  return (
+    <Box flexDirection="column">
+      <History committed={committed} />
+      <Box flexDirection="column" marginY={1}>
+        <Box gap={1}>
+          <Text color="green">✓</Text>
+          <Text color="white" bold>
+            {repoName}
+          </Text>
+          <Text color="gray">
+            cloned · {stage.fileCount} files · {stage.destPath}
+          </Text>
+        </Box>
+        <Hint text="  enter/esc continue" />
+      </Box>
+    </Box>
+  );
+}
+
+export function CloneErrorView({
+  stage,
+  committed,
+}: {
+  stage: Extract<ChatStage, { type: "clone-error" }>;
+  committed: Message[];
+}) {
+  return (
+    <Box flexDirection="column">
+      <History committed={committed} />
+      <Box flexDirection="column" marginY={1}>
+        <Box gap={1}>
+          <Text color="red">✗</Text>
+          <Text color="red">{stage.message}</Text>
+        </Box>
+        <Hint text="  enter/esc continue" />
+      </Box>
+    </Box>
+  );
+}
+
+export function PreviewView({
+  stage,
+  committed,
+}: {
+  stage: Extract<ChatStage, { type: "preview" }>;
+  committed: Message[];
+}) {
+  const { patches, diffLines, scrollOffset } = stage;
+  return (
+    <Box flexDirection="column">
+      <History committed={committed} />
+      <Box gap={1} marginTop={1}>
+        <Text color={ACCENT}>*</Text>
+        <Text color="white" bold>
+          proposed changes
+        </Text>
+        <Text color="gray">
+          ({patches.length} file{patches.length !== 1 ? "s" : ""})
+        </Text>
+      </Box>
+      <Box flexDirection="column" marginLeft={2} marginTop={1}>
+        {patches.map((p) => (
+          <Box key={p.path} gap={1}>
+            <Text color={p.isNew ? "green" : "yellow"}>
+              {p.isNew ? "+" : "~"}
+            </Text>
+            <Text color={p.isNew ? "green" : "yellow"}>{p.path}</Text>
+            {p.isNew && (
+              <Text color="gray" dimColor>
+                new
+              </Text>
+            )}
+          </Box>
+        ))}
+      </Box>
+      <DiffViewer
+        patches={patches}
+        diffs={diffLines}
+        scrollOffset={scrollOffset}
+      />
+      <Hint text="↑↓ scroll · enter/a apply · s/esc skip" />
+    </Box>
+  );
+}
+
+export function ViewingFileView({
+  stage,
+  committed,
+}: {
+  stage: Extract<ChatStage, { type: "viewing-file" }>;
+  committed: Message[];
+}) {
+  const { file, diffLines, scrollOffset } = stage;
+  return (
+    <Box flexDirection="column">
+      <History committed={committed} />
+      <Box gap={1} marginTop={1}>
+        <Text color={ACCENT}>r</Text>
+        <Text color="white" bold>
+          {file.path}
+        </Text>
+        <Text color="gray" dimColor>
+          {file.isNew ? "new" : "modified"}
+        </Text>
+      </Box>
+      <DiffViewer
+        patches={[file.patch]}
+        diffs={[diffLines]}
+        scrollOffset={scrollOffset}
+      />
+      <Hint text="↑↓ scroll · enter/esc back" />
+    </Box>
+  );
+}