@ridit/lens 0.1.0

package/src/components/repo/LensFileMenu.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import { useState } from "react";
+import type { LensFile } from "../../utils/lensfile";
+
+type MenuOption =
+  | { id: "use-cached"; label: string; description: string }
+  | { id: "re-analyze"; label: string; description: string }
+  | { id: "fix-issues"; label: string; description: string }
+  | { id: "security"; label: string; description: string }
+  | { id: "preview"; label: string; description: string };
+
+export type LensMenuChoice =
+  | "use-cached"
+  | "re-analyze"
+  | "fix-issues"
+  | "security"
+  | "preview";
+
+const buildOptions = (lf: LensFile): MenuOption[] => {
+  const opts: MenuOption[] = [
+    {
+      id: "use-cached",
+      label: "View existing analysis",
+      description: "Show the saved summary",
+    },
+    {
+      id: "re-analyze",
+      label: "Re-analyze",
+      description: "Run a fresh AI analysis",
+    },
+  ];
+  if (lf.suggestions.length > 0 || lf.missingConfigs.length > 0) {
+    opts.push({
+      id: "fix-issues",
+      label: "Fix issues",
+      description: `${lf.suggestions.length + lf.missingConfigs.length} issues found`,
+    });
+  }
+  if (lf.securityIssues.length > 0) {
+    opts.push({
+      id: "security",
+      label: "Review security issues",
+      description: `${lf.securityIssues.length} issue(s) found`,
+    });
+  }
+  opts.push({
+    id: "preview",
+    label: "Preview repo",
+    description: "Install deps and run dev server",
+  });
+  return opts;
+};
+
+export const LensFileMenu = ({
+  repoPath,
+  lensFile,
+  onChoice,
+}: {
+  repoPath: string;
+  lensFile: LensFile;
+  onChoice: (choice: LensMenuChoice) => void;
+}) => {
+  const [index, setIndex] = useState(0);
+  const options = buildOptions(lensFile);
+
+  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) onChoice(options[index]!.id as LensMenuChoice);
+  });
+
+  const age = (() => {
+    try {
+      const ms = Date.now() - new Date(lensFile.generatedAt).getTime();
+      const mins = Math.floor(ms / 60000);
+      const hours = Math.floor(mins / 60);
+      const days = Math.floor(hours / 24);
+      if (days > 0) return `${days}d ago`;
+      if (hours > 0) return `${hours}h ago`;
+      if (mins > 0) return `${mins}m ago`;
+      return "just now";
+    } catch {
+      return "unknown";
+    }
+  })();
+
+  return (
+    <Box flexDirection="column" marginTop={1} gap={1}>
+      <Box gap={2}>
+        <Text bold color="cyan">
+          {figures.info} LENS.md found
+        </Text>
+        <Text color="gray">analyzed {age}</Text>
+      </Box>
+      <Text color="gray" dimColor>
+        {lensFile.overview.slice(0, 100)}
+        {lensFile.overview.length > 100 ? "…" : ""}
+      </Text>
+      <Box flexDirection="column" gap={0}>
+        {options.map((opt, i) => {
+          const isSelected = i === index;
+          return (
+            <Box key={opt.id} marginLeft={1}>
+              <Text color={isSelected ? "cyan" : "white"}>
+                {isSelected ? figures.arrowRight : " "}
+                {"  "}
+                <Text bold={isSelected}>{opt.label}</Text>
+                <Text color="gray">
+                  {"  "}
+                  {opt.description}
+                </Text>
+              </Text>
+            </Box>
+          );
+        })}
+      </Box>
+      <Text color="gray">↑↓ navigate · enter to select</Text>
+    </Box>
+  );
+};

package/src/components/repo/NoProviderPrompt.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+
+export const NoProviderPrompt = ({
+  onAccept,
+  onDecline,
+}: {
+  onAccept: () => void;
+  onDecline: () => void;
+}) => {
+  useInput((input, key) => {
+    if (input === "y" || input === "Y" || key.return) onAccept();
+    if (input === "n" || input === "N" || key.escape) onDecline();
+  });
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Text color="yellow">{figures.warning} No API provider configured.</Text>
+      <Text>
+        Run setup now?{"  "}
+        <Text color="green">[y] yes</Text>
+        {"  "}
+        <Text color="red">[n] skip</Text>
+      </Text>
+    </Box>
+  );
+};

package/src/components/repo/PreviewRunner.tsx

@@ -0,0 +1,217 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import Spinner from "ink-spinner";
+import figures from "figures";
+import { useEffect, useState, useRef } from "react";
+import { ACCENT } from "../../colors";
+import { detectPreview, runInstall, runDev } from "../../utils/preview";
+import type { PreviewProcess } from "../../utils/preview";
+
+type PreviewStage =
+  | { type: "detecting" }
+  | { type: "not-supported" }
+  | { type: "installing"; logs: string[] }
+  | { type: "starting"; logs: string[] }
+  | { type: "running"; port: number | null; logs: string[] }
+  | { type: "error"; message: string };
+
+const MAX_LOGS = 8;
+
+export const PreviewRunner = ({
+  repoPath,
+  onExit,
+}: {
+  repoPath: string;
+  onExit: () => void;
+}) => {
+  const [stage, setStage] = useState<PreviewStage>({ type: "detecting" });
+  const devProcess = useRef<PreviewProcess | null>(null);
+
+  useInput((_, key) => {
+    if (key.escape || (key.ctrl && _.toLowerCase() === "c")) {
+      devProcess.current?.kill();
+      onExit();
+    }
+  });
+
+  useEffect(() => {
+    const info = detectPreview(repoPath);
+    if (!info) {
+      setStage({ type: "not-supported" });
+      return;
+    }
+
+    setStage({ type: "installing", logs: [] });
+    const installer = runInstall(repoPath, info.installCmd);
+    const installLogs: string[] = [];
+
+    installer.onLog((line) => {
+      installLogs.push(line);
+      setStage({ type: "installing", logs: [...installLogs].slice(-MAX_LOGS) });
+    });
+    installer.onError((line) => {
+      installLogs.push(line);
+      setStage({ type: "installing", logs: [...installLogs].slice(-MAX_LOGS) });
+    });
+    installer.onExit((code) => {
+      if (code !== 0 && code !== null) {
+        setStage({
+          type: "error",
+          message: `Install failed with exit code ${code}`,
+        });
+        return;
+      }
+
+      setStage({ type: "starting", logs: [] });
+      const dev = runDev(repoPath, info.devCmd);
+      devProcess.current = dev;
+      const devLogs: string[] = [];
+
+      dev.onLog((line) => {
+        devLogs.push(line);
+        const isRunning =
+          line.toLowerCase().includes("localhost") ||
+          line.toLowerCase().includes("ready") ||
+          line.toLowerCase().includes("started") ||
+          line.toLowerCase().includes("listening");
+
+        if (isRunning) {
+          setStage({
+            type: "running",
+            port: info.port,
+            logs: [...devLogs].slice(-MAX_LOGS),
+          });
+        } else {
+          setStage((s) =>
+            s.type === "running"
+              ? { ...s, logs: [...devLogs].slice(-MAX_LOGS) }
+              : { type: "starting", logs: [...devLogs].slice(-MAX_LOGS) },
+          );
+        }
+      });
+
+      dev.onError((line) => {
+        devLogs.push(line);
+        setStage((s) =>
+          s.type === "running"
+            ? { ...s, logs: [...devLogs].slice(-MAX_LOGS) }
+            : { type: "starting", logs: [...devLogs].slice(-MAX_LOGS) },
+        );
+      });
+
+      dev.onExit((code) => {
+        if (code !== 0 && code !== null) {
+          setStage({
+            type: "error",
+            message: `Dev server exited with code ${code}`,
+          });
+        }
+      });
+    });
+
+    return () => {
+      devProcess.current?.kill();
+    };
+  }, [repoPath]);
+
+  if (stage.type === "detecting") {
+    return (
+      <Box marginTop={1}>
+        <Text color={ACCENT}>
+          <Spinner />
+        </Text>
+        <Box marginLeft={1}>
+          <Text>Detecting project type...</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (stage.type === "not-supported") {
+    return (
+      <Box marginTop={1}>
+        <Text color="yellow">
+          {figures.warning} No supported run configuration found (no
+          package.json, requirements.txt, etc.)
+        </Text>
+      </Box>
+    );
+  }
+
+  if (stage.type === "installing") {
+    return (
+      <Box flexDirection="column" marginTop={1} gap={1}>
+        <Box>
+          <Text color={ACCENT}>
+            <Spinner />
+          </Text>
+          <Box marginLeft={1}>
+            <Text>Installing dependencies...</Text>
+          </Box>
+        </Box>
+        <Box flexDirection="column" marginLeft={2}>
+          {stage.logs.map((log, i) => (
+            <Text key={i} color="gray">
+              {log}
+            </Text>
+          ))}
+        </Box>
+      </Box>
+    );
+  }
+
+  if (stage.type === "starting") {
+    return (
+      <Box flexDirection="column" marginTop={1} gap={1}>
+        <Box>
+          <Text color={ACCENT}>
+            <Spinner />
+          </Text>
+          <Box marginLeft={1}>
+            <Text>Starting dev server...</Text>
+          </Box>
+        </Box>
+        <Box flexDirection="column" marginLeft={2}>
+          {stage.logs.map((log, i) => (
+            <Text key={i} color="gray">
+              {log}
+            </Text>
+          ))}
+        </Box>
+      </Box>
+    );
+  }
+
+  if (stage.type === "running") {
+    return (
+      <Box flexDirection="column" marginTop={1} gap={1}>
+        <Box gap={1}>
+          <Text color="green">{figures.tick} Dev server running</Text>
+          {stage.port && (
+            <Text color="cyan">→ http://localhost:{stage.port}</Text>
+          )}
+        </Box>
+        <Box flexDirection="column" marginLeft={2}>
+          {stage.logs.map((log, i) => (
+            <Text key={i} color="gray">
+              {log}
+            </Text>
+          ))}
+        </Box>
+        <Text color="gray">ctrl+c or esc to stop</Text>
+      </Box>
+    );
+  }
+
+  if (stage.type === "error") {
+    return (
+      <Box marginTop={1}>
+        <Text color="red">
+          {figures.cross} {stage.message}
+        </Text>
+      </Box>
+    );
+  }
+
+  return null;
+};

package/src/components/repo/ProviderPicker.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import { useEffect, useState } from "react";
+import { loadConfig } from "../../utils/config";
+import type { Provider } from "../../types/config";
+
+export const ProviderPicker = ({
+  onDone,
+}: {
+  onDone: (provider: Provider) => void;
+}) => {
+  const [index, setIndex] = useState(0);
+  const config = loadConfig();
+  const providers = config.providers;
+
+  useEffect(() => {
+    if (providers.length === 1) {
+      onDone(providers[0]!);
+    }
+  }, []);
+
+  useInput((_, key) => {
+    if (providers.length <= 1) 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) {
+      onDone(providers[index]!);
+    }
+  });
+
+  if (providers.length === 0) {
+    return (
+      <Box marginTop={1}>
+        <Text color="red">
+          {figures.cross} No providers configured. Run{" "}
+          <Text color="cyan">lens init</Text> first.
+        </Text>
+      </Box>
+    );
+  }
+
+  if (providers.length === 1) {
+    return (
+      <Box marginTop={1}>
+        <Text color="gray">
+          {figures.arrowRight} Using{" "}
+          <Text color="cyan">{providers[0]!.name}</Text>
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" marginTop={1} gap={1}>
+      <Text bold color="cyan">
+        Select provider
+      </Text>
+      {providers.map((p, i) => (
+        <Box key={p.id} marginLeft={1}>
+          <Text color={i === index ? "cyan" : "white"}>
+            {i === index ? figures.arrowRight : " "}
+            {"  "}
+            <Text bold={i === index}>{p.name}</Text>
+            <Text color="gray">
+              {"  "}
+              {p.type} · {p.model}
+              {config.defaultProviderId === p.id ? " · default" : ""}
+            </Text>
+          </Text>
+        </Box>
+      ))}
+      <Text color="gray">↑↓ navigate · enter to select</Text>
+    </Box>
+  );
+};