@ridit/lens 0.3.7 → 0.3.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ridit/lens",
-  "version": "0.3.7",
-  "description": "Know Your Codebase.",
+  "version": "0.3.9",
+  "description": "Understand your codebase.",
   "author": "Ridit Jangra <riditjangra09@gmail.com> (https://ridit.space)",
   "license": "MIT",
   "repository": {
@@ -13,33 +13,27 @@
     "lens": "./dist/index.mjs"
   },
   "scripts": {
-    "build": "bun build src/index.tsx --target node --outfile dist/index.mjs",
+    "dev": "bun src/index.tsx",
+    "build": "bun build src/index.tsx --target node --outfile dist/index.mjs --external react-devtools-core",
     "postbuild": "node -e \"const fs=require('fs');const f='dist/index.mjs';fs.writeFileSync(f,'#!/usr/bin/env node\\n'+fs.readFileSync(f,'utf8'))\"",
-    "tag": "node -e \"const v=require('./package.json').version;require('child_process').execSync('git tag v'+v+' && git push origin v'+v,{stdio:'inherit'})\"",
-    "prepublishOnly": "npm run build && npm run tag"
+    "prepublishOnly": "bun run build",
+    "test": "bun test"
   },
   "dependencies": {
-    "@ridit/lens-sdk": "^0.2.0",
-    "asciichart": "^1.5.25",
-    "bun": "^1.3.11",
+    "@ridit/ink-ui": "*",
+    "@ridit/lens-core": "*",
+    "chalk": "^5.6.2",
     "commander": "^14.0.3",
     "figures": "^6.1.0",
-    "ink": "^6.8.0",
+    "ink": "4.4.1",
     "ink-spinner": "^5.0.0",
     "ink-text-input": "^6.0.0",
-    "nanoid": "^5.1.6",
-    "pdfkit": "^0.18.0",
-    "react": "^19.2.4",
-    "react-devtools-core": "^7.0.1",
-    "sugar-high": "^0.9.5",
-    "terminal-image": "^4.2.0"
+    "react": "18.2.0"
   },
   "devDependencies": {
-    "@types/asciichart": "^1.5.8",
+    "@types/react": "^18.0.0",
     "@types/bun": "latest",
-    "@types/jest": "^30.0.0",
-    "@types/pdfkit": "^0.17.5",
-    "@types/react": "^19.2.14"
+    "@ridit/typescript-config": "*"
   },
   "peerDependencies": {
     "typescript": "^5"

package/src/colors.ts

@@ -1,15 +1,15 @@
-export const ACCENT = "#DA7758";
-export const HEADING = "#FFFFFF";
-export const TEXT = "#E8E8E8";
-export const RED = "#E06C75";
-export const GREEN = "#85C98A";
-export const CYAN = "#79C5D4";
-
-export const TOKEN_KEYWORD = "#B385C9";
-export const TOKEN_STRING = "#85C98A";
-export const TOKEN_NUMBER = "#E8C170";
-export const TOKEN_PROPERTY = "#79C5D4";
-export const TOKEN_ENTITY = "#7AABDB";
-export const TOKEN_TEXT = "#E8E8E8";
-export const TOKEN_MUTED = "#888888";
-export const TOKEN_COMMENT = "#777777";
+export const ACCENT = "#DA7758";
+export const HEADING = "#FFFFFF";
+export const TEXT = "#E8E8E8";
+export const RED = "#E06C75";
+export const GREEN = "#85C98A";
+export const CYAN = "#79C5D4";
+
+export const TOKEN_KEYWORD = "#B385C9";
+export const TOKEN_STRING = "#85C98A";
+export const TOKEN_NUMBER = "#E8C170";
+export const TOKEN_PROPERTY = "#79C5D4";
+export const TOKEN_ENTITY = "#7AABDB";
+export const TOKEN_TEXT = "#E8E8E8";
+export const TOKEN_MUTED = "#888888";
+export const TOKEN_COMMENT = "#777777";

package/src/commands/chat.tsx

@@ -1,23 +1,32 @@
-import React from "react";
-import { Box, Text } from "ink";
-import figures from "figures";
-import { existsSync } from "fs";
-import path from "path";
-import { ChatRunner } from "../components/chat/ChatRunner";
-import { ACCENT } from "../colors";
-
-export const ChatCommand = ({ 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 <ChatRunner repoPath={resolvedPath} />;
-};
+import React from "react";
+import { Box } from "ink";
+import { ChatRunner } from "../components/chat/ChatView";
+
+export function ChatCommand({
+  path,
+  autoForce = false,
+  initialMessage,
+  dev = false,
+  single = false,
+  sessionId,
+}: {
+  path: string;
+  autoForce?: boolean;
+  initialMessage?: string;
+  dev?: boolean;
+  single?: boolean;
+  sessionId?: string;
+}) {
+  return (
+    <Box flexDirection="column">
+      <ChatRunner
+        repoPath={path}
+        autoForce={autoForce}
+        initialMessage={initialMessage}
+        dev={dev}
+        single={single}
+        sessionId={sessionId}
+      />
+    </Box>
+  );
+}

package/src/commands/provider.tsx

@@ -1,238 +1,11 @@
-import { Box, Text, useInput } from "ink";
-import figures from "figures";
-import { useState } from "react";
-import { nanoid } from "nanoid";
-import { addProvider, loadConfig } from "../utils/config";
-import { ProviderTypeStep } from "../components/provider/ProviderTypeStep";
-import { ApiKeyStep } from "../components/provider/ApiKeyStep";
-import { ModelStep } from "../components/provider/ModelStep";
-import { RemoveProviderStep } from "../components/provider/RemoveProviderStep";
-import type { Provider, ProviderType } from "../types/config";
-import { ACCENT, CYAN, GREEN, TEXT } from "../colors";
-
-type InitStage =
-  | { type: "menu" }
-  | { type: "provider-type" }
-  | { type: "api-key"; providerType: ProviderType }
-  | { type: "base-url"; providerType: ProviderType; apiKey: string }
-  | {
-      type: "model";
-      providerType: ProviderType;
-      apiKey: string;
-      baseUrl?: string;
-    }
-  | { type: "remove" }
-  | { type: "done"; provider: Provider };
-
-const MENU_OPTIONS = [
-  { label: "Add a provider", action: "provider-type" },
-  { label: "Remove a provider", action: "remove" },
-] as const;
-
-export const InitCommand = () => {
-  const [stage, setStage] = useState<InitStage>({ type: "menu" });
-  const [completedSteps, setCompletedSteps] = useState<string[]>([]);
-  const [menuIndex, setMenuIndex] = useState(0);
-
-  const pushStep = (label: string) => setCompletedSteps((s) => [...s, label]);
-  const popStep = () => setCompletedSteps((s) => s.slice(0, -1));
-  const popSteps = (n: number) => setCompletedSteps((s) => s.slice(0, -n));
-
-  useInput((input, key) => {
-    if (stage.type !== "menu") return;
-    if (key.upArrow) setMenuIndex((i) => Math.max(0, i - 1));
-    if (key.downArrow)
-      setMenuIndex((i) => Math.min(MENU_OPTIONS.length - 1, i + 1));
-    if (key.return) {
-      const action = MENU_OPTIONS[menuIndex]?.action;
-      if (action === "provider-type") setStage({ type: "provider-type" });
-      if (action === "remove") setStage({ type: "remove" });
-    }
-  });
-
-  if (stage.type === "menu") {
-    const config = loadConfig();
-    return (
-      <Box flexDirection="column" gap={1}>
-        {completedSteps.map((s, i) => (
-          <Text key={i} color={GREEN}>
-            {figures.arrowRight} {s}
-          </Text>
-        ))}
-        {config.providers.length > 0 && (
-          <Text color="gray">
-            {config.providers.length} provider(s) configured
-          </Text>
-        )}
-        {MENU_OPTIONS.map((opt, i) => (
-          <Box key={opt.action} marginLeft={1}>
-            <Text color={i === menuIndex ? ACCENT : "white"}>
-              {i === menuIndex ? figures.arrowRight : " "}
-              {"  "}
-              {opt.label}
-            </Text>
-          </Box>
-        ))}
-        <Text color="gray">↑↓ navigate · enter to select</Text>
-      </Box>
-    );
-  }
-
-  if (stage.type === "remove") {
-    return (
-      <Box flexDirection="column" gap={1}>
-        {completedSteps.map((s, i) => (
-          <Text key={i} color={GREEN}>
-            {figures.arrowRight} {s}
-          </Text>
-        ))}
-        <RemoveProviderStep onDone={() => setStage({ type: "menu" })} />
-      </Box>
-    );
-  }
-
-  if (stage.type === "provider-type") {
-    return (
-      <Box flexDirection="column" gap={1}>
-        {completedSteps.map((s, i) => (
-          <Text key={i} color={GREEN}>
-            {figures.arrowRight} {s}
-          </Text>
-        ))}
-        <ProviderTypeStep
-          onSelect={(providerType) => {
-            pushStep(`Provider: ${providerType}`);
-            setStage({ type: "api-key", providerType });
-          }}
-          onBack={() => setStage({ type: "menu" })}
-        />
-      </Box>
-    );
-  }
-
-  if (stage.type === "api-key") {
-    return (
-      <Box flexDirection="column" gap={1}>
-        {completedSteps.map((s, i) => (
-          <Text key={i} color={GREEN}>
-            {figures.arrowRight} {s}
-          </Text>
-        ))}
-        <ApiKeyStep
-          providerType={stage.providerType}
-          onSubmit={(value) => {
-            if (stage.providerType === "custom") {
-              const { apiKey, baseUrl } = value as {
-                apiKey: string;
-                baseUrl?: string;
-              };
-              pushStep("API key saved");
-              if (baseUrl) pushStep(`Base URL: ${baseUrl}`);
-              setStage({
-                type: "model",
-                providerType: stage.providerType,
-                apiKey,
-                baseUrl,
-              });
-            } else if (stage.providerType === "ollama") {
-              pushStep(`Base URL: ${value}`);
-              setStage({
-                type: "model",
-                providerType: stage.providerType,
-                apiKey: "",
-                baseUrl: value as string,
-              });
-            } else {
-              pushStep("API key saved");
-              setStage({
-                type: "model",
-                providerType: stage.providerType,
-                apiKey: value as string,
-              });
-            }
-          }}
-          onBack={() => {
-            popStep();
-            setStage({ type: "provider-type" });
-          }}
-        />
-      </Box>
-    );
-  }
-
-  if (stage.type === "base-url") {
-    return (
-      <Box flexDirection="column" gap={1}>
-        {completedSteps.map((s, i) => (
-          <Text key={i} color={GREEN}>
-            {figures.arrowRight} {s}
-          </Text>
-        ))}
-        <ApiKeyStep
-          providerType="ollama"
-          onSubmit={(baseUrl) => {
-            pushStep(`Base URL: ${baseUrl}`);
-            setStage({
-              type: "model",
-              providerType: stage.providerType,
-              apiKey: stage.apiKey,
-              baseUrl: baseUrl as string,
-            });
-          }}
-          onBack={() => {
-            popStep();
-            setStage({ type: "api-key", providerType: stage.providerType });
-          }}
-        />
-      </Box>
-    );
-  }
-
-  if (stage.type === "model") {
-    return (
-      <Box flexDirection="column" gap={1}>
-        {completedSteps.map((s, i) => (
-          <Text key={i} color={GREEN}>
-            {figures.arrowRight} {s}
-          </Text>
-        ))}
-        <ModelStep
-          providerType={stage.providerType}
-          onSelect={(model) => {
-            const provider: Provider = {
-              id: nanoid(8),
-              type: stage.providerType,
-              name: `${stage.providerType}-${model}`,
-              apiKey: stage.apiKey || undefined,
-              baseUrl: stage.baseUrl,
-              model,
-            };
-            addProvider(provider);
-            pushStep(`Model: ${model}`);
-            setStage({ type: "done", provider });
-          }}
-          onBack={() => {
-            popStep();
-            setStage({ type: "api-key", providerType: stage.providerType });
-          }}
-        />
-      </Box>
-    );
-  }
-
-  return (
-    <Box flexDirection="column" gap={1}>
-      {completedSteps.map((s, i) => (
-        <Text key={i} color={GREEN}>
-          {figures.arrowRight} {s}
-        </Text>
-      ))}
-      <Text color={GREEN}>
-        {figures.arrowRight} Provider configured successfully
-      </Text>
-      <Text color="gray">
-        Run <Text color={CYAN}>lens provider</Text> again to manage providers.
-      </Text>
-    </Box>
-  );
-};
+import React from "react";
+import { Box } from "ink";
+import { ProviderSetup } from "../components/provider/ProviderSetup";
+
+export function ProviderCommand() {
+  return (
+    <Box flexDirection="column" paddingX={1} paddingY={1}>
+      <ProviderSetup onDone={() => process.exit(0)} />
+    </Box>
+  );
+}

package/src/commands/repo.tsx

@@ -1,120 +1,66 @@
-import { Box, Text, useInput } from "ink";
-import figures from "figures";
-import { useEffect, useState } from "react";
-import path from "path";
-import os from "os";
-import { startCloneRepo } from "../utils/repo";
-import { fetchFileTree, readImportantFiles } from "../utils/files";
-import { StepRow } from "../components/repo/StepRow";
-import { FileReviewer } from "../components/repo/FileReviewer";
-import { RepoAnalysis } from "../components/repo/RepoAnalysis";
-import type { Step, ImportantFile } from "../types/repo";
-
-export const RepoCommand = ({ url }: { url: string }) => {
-  const [steps, setSteps] = useState<Step[]>([
-    { type: "cloning", status: "pending" },
-  ]);
-  const [importantFiles, setImportantFiles] = useState<ImportantFile[]>([]);
-  const [fileTree, setFileTree] = useState<string[]>([]);
-  const [repoPath, setRepoPath] = useState<string>("");
-  const [reviewDone, setReviewDone] = useState(false);
-
-  const updateLastStep = (updated: Step) =>
-    setSteps((prev) => [...prev.slice(0, -1), updated]);
-
-  const pushStep = (step: Step) => setSteps((prev) => [...prev, step]);
-
-  const handleCloneSuccess = (rPath: string) => {
-    setRepoPath(rPath);
-    updateLastStep({ type: "cloning", status: "done" });
-    pushStep({ type: "fetching-tree", status: "pending" });
-
-    fetchFileTree(rPath)
-      .then((files) => {
-        updateLastStep({ type: "fetching-tree", status: "done" });
-        pushStep({ type: "reading-files", status: "pending" });
-        setFileTree(files);
-        const found = readImportantFiles(rPath, files);
-        setImportantFiles(found);
-        updateLastStep({ type: "reading-files", status: "done" });
-      })
-      .catch(() => updateLastStep({ type: "fetching-tree", status: "done" }));
-  };
-
-  useEffect(() => {
-    startCloneRepo(url).then((result) => {
-      if (result.done) {
-        const repoName = path
-          .basename(new URL(url).pathname)
-          .replace(/\.git$/, "");
-        handleCloneSuccess(path.join(os.tmpdir(), repoName));
-      } else if (result.folderExists) {
-        updateLastStep({
-          type: "folder-exists",
-          status: "pending",
-          repoPath: result.repoPath,
-        });
-      } else {
-        updateLastStep({
-          type: "error",
-          message: result.error ?? "Unknown error",
-        });
-      }
-    });
-  }, [url]);
-
-  useInput((input) => {
-    const last = steps[steps.length - 1];
-    if (last?.type !== "folder-exists") return;
-    const rPath = last.repoPath;
-
-    if (input === "y" || input === "Y") {
-      updateLastStep({ type: "cloning", status: "pending" });
-      startCloneRepo(url, { forceReclone: true }).then((result) => {
-        if (result.done) {
-          handleCloneSuccess(rPath);
-        } else if (!result.folderExists) {
-          updateLastStep({
-            type: "error",
-            message: result.error ?? "Unknown error",
-          });
-        }
-      });
-    }
-
-    if (input === "n" || input === "N") handleCloneSuccess(rPath);
-  });
-
-  const allDone =
-    steps[steps.length - 1]?.type === "reading-files" &&
-    (steps[steps.length - 1] as Extract<Step, { type: "reading-files" }>)
-      .status === "done";
-
-  return (
-    <Box flexDirection="column">
-      {steps.map((step, i) => (
-        <StepRow key={i} step={step} />
-      ))}
-
-      {allDone && !reviewDone && importantFiles.length > 0 && (
-        <FileReviewer
-          files={importantFiles}
-          onDone={() => setReviewDone(true)}
-        />
-      )}
-
-      {allDone && importantFiles.length === 0 && !reviewDone && (
-        <Text color="gray">{figures.info} No important files found</Text>
-      )}
-
-      {(reviewDone || (allDone && importantFiles.length === 0)) && (
-        <RepoAnalysis
-          repoUrl={url}
-          repoPath={repoPath}
-          fileTree={fileTree}
-          files={importantFiles}
-        />
-      )}
-    </Box>
-  );
-};
+import React, { useState, useEffect } from "react";
+import { Box, useInput } from "ink";
+import { StepRow, type Step } from "../components/repo/StepRow";
+import { ChatRunner } from "../components/chat/ChatView";
+import { startCloneRepo } from "../utils/repo";
+
+export function RepoCommand({ url }: { url: string }) {
+  const [steps, setSteps] = useState<Step[]>([
+    { type: "cloning", status: "pending" },
+  ]);
+  const [repoPath, setRepoPath] = useState<string | null>(null);
+
+  const updateLastStep = (updated: Step) =>
+    setSteps((prev) => [...prev.slice(0, -1), updated]);
+
+  const pushStep = (step: Step) => setSteps((prev) => [...prev, step]);
+
+  const doClone = (forceReclone = false) => {
+    startCloneRepo(url, { forceReclone }).then((result) => {
+      if (result.done) {
+        updateLastStep({ type: "cloning", status: "done" });
+        setRepoPath(result.repoPath);
+      } else if (!result.done && result.folderExists) {
+        updateLastStep({
+          type: "folder-exists",
+          status: "pending",
+          repoPath: result.repoPath,
+        });
+      } else if (!result.done) {
+        updateLastStep({ type: "error", message: result.error ?? "Clone failed" });
+      }
+    });
+  };
+
+  useEffect(() => {
+    doClone();
+  }, [url]);
+
+  useInput((input) => {
+    const last = steps[steps.length - 1];
+    if (last?.type !== "folder-exists") return;
+    if (input === "y" || input === "Y") {
+      updateLastStep({ type: "cloning", status: "pending" });
+      doClone(true);
+    }
+    if (input === "n" || input === "N") {
+      updateLastStep({ type: "cloning", status: "done" });
+      setRepoPath(last.repoPath);
+    }
+  });
+
+  return (
+    <Box flexDirection="column">
+      {steps.map((step, i) => (
+        <StepRow key={i} step={step} />
+      ))}
+
+      {repoPath && (
+        <ChatRunner
+          repoPath={repoPath}
+          initialMessage={`I've cloned the repository from ${url}. Please analyze it — give me an overview of what it does, the tech stack, key architectural decisions, and anything interesting.`}
+        />
+      )}
+    </Box>
+  );
+}

package/src/commands/timeline.tsx

@@ -1,22 +1,11 @@
-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} />;
-};
+import React from "react";
+import { Box } from "ink";
+import { TimelineRunner } from "../components/timeline/TimelineView";
+
+export function TimelineCommand({ path }: { path: string }) {
+  return (
+    <Box flexDirection="column">
+      <TimelineRunner repoPath={path} />
+    </Box>
+  );
+}