@ridit/lens 0.3.7 → 0.3.9

package/src/components/provider/ProviderSetup.tsx

@@ -0,0 +1,331 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import {
+  addProvider,
+  setActiveProvider,
+  removeProvider,
+  getConfiguredProviders,
+  loadConfig,
+  type Provider,
+} from "@ridit/lens-core";
+import { ProviderTypeStep } from "./ProviderTypeStep";
+import { ApiKeyStep } from "./ApiKeyStep";
+import { ModelStep } from "./ModelStep";
+import { ACCENT, GREEN, RED } from "../../colors";
+
+type Stage =
+  | { type: "menu" }
+  | { type: "provider-type" }
+  | { type: "credentials"; provider: Provider }
+  | { type: "model"; provider: Provider; apiKey: string; baseURL?: string }
+  | { type: "remove-pick" }
+  | { type: "remove-confirm"; provider: Provider }
+  | { type: "switch-pick" }
+  | { type: "done"; message: string };
+
+type MenuAction = "provider-type" | "remove-pick" | "switch-pick";
+
+const MENU_OPTIONS: { label: string; action: MenuAction }[] = [
+  { label: "Add / update a provider", action: "provider-type" },
+  { label: "Remove a provider", action: "remove-pick" },
+  { label: "Switch active provider", action: "switch-pick" },
+];
+
+function CompletedStep({ label }: { label: string }) {
+  return (
+    <Text color={GREEN}>
+      {figures.tick} {label}
+    </Text>
+  );
+}
+
+function Menu({
+  completedSteps,
+  onSelect,
+}: {
+  completedSteps: string[];
+  onSelect: (action: MenuAction) => void;
+}) {
+  const config = loadConfig();
+  const configured = getConfiguredProviders();
+  const [index, setIndex] = useState(0);
+
+  useInput((_, key) => {
+    if (key.upArrow) setIndex((i) => Math.max(0, i - 1));
+    if (key.downArrow) setIndex((i) => Math.min(MENU_OPTIONS.length - 1, i + 1));
+    if (key.return) onSelect(MENU_OPTIONS[index]!.action);
+  });
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      {completedSteps.map((s, i) => <CompletedStep key={i} label={s} />)}
+      <Text bold color={ACCENT}>Lens — provider setup</Text>
+      {configured.length > 0 && (
+        <Text color="gray" dimColor>
+          {figures.info} active: <Text color="white">{config.activeProvider}</Text>
+          {"  "}({configured.length} configured)
+        </Text>
+      )}
+      {MENU_OPTIONS.map((opt, i) => (
+        <Box key={opt.action} marginLeft={1}>
+          <Text color={i === index ? ACCENT : "white"}>
+            {i === index ? figures.arrowRight : " "}{"  "}
+            <Text bold={i === index}>{opt.label}</Text>
+          </Text>
+        </Box>
+      ))}
+      <Text color="gray" dimColor>↑↓ navigate · enter to select</Text>
+    </Box>
+  );
+}
+
+function RemovePick({
+  completedSteps,
+  onSelect,
+  onBack,
+}: {
+  completedSteps: string[];
+  onSelect: (provider: Provider) => void;
+  onBack: () => void;
+}) {
+  const configured = getConfiguredProviders();
+  const [index, setIndex] = useState(0);
+
+  useInput((_, key) => {
+    if (key.escape) { onBack(); return; }
+    if (key.upArrow) setIndex((i) => Math.max(0, i - 1));
+    if (key.downArrow) setIndex((i) => Math.min(configured.length - 1, i + 1));
+    if (key.return && configured.length > 0) onSelect(configured[index]!);
+  });
+
+  if (configured.length === 0) {
+    return (
+      <Box flexDirection="column" gap={1}>
+        {completedSteps.map((s, i) => <CompletedStep key={i} label={s} />)}
+        <Text color="gray">{figures.info} No providers configured.</Text>
+        <Text color="gray" dimColor>esc to go back</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      {completedSteps.map((s, i) => <CompletedStep key={i} label={s} />)}
+      <Text bold color={ACCENT}>Remove a provider</Text>
+      {configured.map((p, i) => (
+        <Box key={p} marginLeft={1}>
+          <Text color={i === index ? RED : "white"}>
+            {i === index ? figures.arrowRight : " "}{"  "}
+            <Text bold={i === index}>{p}</Text>
+          </Text>
+        </Box>
+      ))}
+      <Text color="gray" dimColor>↑↓ navigate · enter to select · esc to cancel</Text>
+    </Box>
+  );
+}
+
+function RemoveConfirm({
+  provider,
+  completedSteps,
+  onConfirm,
+  onBack,
+}: {
+  provider: Provider;
+  completedSteps: string[];
+  onConfirm: () => void;
+  onBack: () => void;
+}) {
+  useInput((input, key) => {
+    if (input === "y" || input === "Y") onConfirm();
+    else if (key.escape || input === "n" || input === "N") onBack();
+  });
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      {completedSteps.map((s, i) => <CompletedStep key={i} label={s} />)}
+      <Text color={RED}>
+        {figures.warning} Remove <Text bold>{provider}</Text>? (y/n)
+      </Text>
+    </Box>
+  );
+}
+
+function SwitchPick({
+  completedSteps,
+  onSelect,
+  onBack,
+}: {
+  completedSteps: string[];
+  onSelect: (provider: Provider) => void;
+  onBack: () => void;
+}) {
+  const config = loadConfig();
+  const configured = getConfiguredProviders();
+  const [index, setIndex] = useState(0);
+
+  useInput((_, key) => {
+    if (key.escape) { onBack(); return; }
+    if (key.upArrow) setIndex((i) => Math.max(0, i - 1));
+    if (key.downArrow) setIndex((i) => Math.min(configured.length - 1, i + 1));
+    if (key.return && configured.length > 0) onSelect(configured[index]!);
+  });
+
+  if (configured.length === 0) {
+    return (
+      <Box flexDirection="column" gap={1}>
+        {completedSteps.map((s, i) => <CompletedStep key={i} label={s} />)}
+        <Text color="gray">{figures.info} No providers configured.</Text>
+        <Text color="gray" dimColor>esc to go back</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      {completedSteps.map((s, i) => <CompletedStep key={i} label={s} />)}
+      <Text bold color={ACCENT}>Switch active provider</Text>
+      {configured.map((p, i) => {
+        const isActive = p === config.activeProvider;
+        const isSelected = i === index;
+        return (
+          <Box key={p} marginLeft={1}>
+            <Text color={isSelected ? ACCENT : "white"}>
+              {isSelected ? figures.arrowRight : " "}{"  "}
+              <Text bold={isSelected}>{p}</Text>
+              {isActive && <Text color="gray">{"  "}active</Text>}
+            </Text>
+          </Box>
+        );
+      })}
+      <Text color="gray" dimColor>↑↓ navigate · enter to select · esc to cancel</Text>
+    </Box>
+  );
+}
+
+function DoneScreen({ message, onDone }: { message: string; onDone: () => void }) {
+  useInput((_: string, key: { return: boolean; escape: boolean }) => {
+    if (key.return || key.escape) onDone();
+  });
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Text color={GREEN}>{figures.tick} {message}</Text>
+      <Text color="gray" dimColor>press enter to continue</Text>
+    </Box>
+  );
+}
+
+export function ProviderSetup({ onDone }: { onDone: () => void }) {
+  const [stage, setStage] = useState<Stage>({ type: "menu" });
+  const [completedSteps, setCompletedSteps] = useState<string[]>([]);
+
+  const pushStep = (label: string) => setCompletedSteps((s) => [...s, label]);
+  const goMenu = () => setStage({ type: "menu" });
+
+  if (stage.type === "menu") {
+    return (
+      <Menu
+        completedSteps={completedSteps}
+        onSelect={(action) => setStage({ type: action } as Stage)}
+      />
+    );
+  }
+
+  if (stage.type === "provider-type") {
+    return (
+      <Box flexDirection="column" gap={1}>
+        {completedSteps.map((s, i) => <CompletedStep key={i} label={s} />)}
+        <ProviderTypeStep
+          onSelect={(provider) => {
+            pushStep(`Provider: ${provider}`);
+            setStage({ type: "credentials", provider });
+          }}
+        />
+      </Box>
+    );
+  }
+
+  if (stage.type === "credentials") {
+    return (
+      <Box flexDirection="column" gap={1}>
+        {completedSteps.map((s, i) => <CompletedStep key={i} label={s} />)}
+        <ApiKeyStep
+          providerType={stage.provider}
+          onSubmit={(apiKey, baseURL) => {
+            if (stage.provider === "ollama") {
+              pushStep(`Base URL: ${baseURL ?? "http://localhost:11434"}`);
+            } else {
+              pushStep("API key saved");
+              if (baseURL) pushStep(`Base URL: ${baseURL}`);
+            }
+            setStage({ type: "model", provider: stage.provider, apiKey, baseURL });
+          }}
+        />
+      </Box>
+    );
+  }
+
+  if (stage.type === "model") {
+    return (
+      <Box flexDirection="column" gap={1}>
+        {completedSteps.map((s, i) => <CompletedStep key={i} label={s} />)}
+        <ModelStep
+          providerType={stage.provider}
+          onSelect={(model) => {
+            addProvider(stage.provider, {
+              apiKey: stage.apiKey,
+              model,
+              baseURL: stage.baseURL,
+            });
+            setActiveProvider(stage.provider);
+            pushStep(`Model: ${model}`);
+            setStage({ type: "done", message: `Provider set to ${stage.provider} (${model})` });
+          }}
+        />
+      </Box>
+    );
+  }
+
+  if (stage.type === "remove-pick") {
+    return (
+      <RemovePick
+        completedSteps={completedSteps}
+        onSelect={(provider) => setStage({ type: "remove-confirm", provider })}
+        onBack={goMenu}
+      />
+    );
+  }
+
+  if (stage.type === "remove-confirm") {
+    return (
+      <RemoveConfirm
+        provider={stage.provider}
+        completedSteps={completedSteps}
+        onConfirm={() => {
+          removeProvider(stage.provider);
+          pushStep(`Removed: ${stage.provider}`);
+          setStage({ type: "done", message: `Provider ${stage.provider} removed` });
+        }}
+        onBack={goMenu}
+      />
+    );
+  }
+
+  if (stage.type === "switch-pick") {
+    return (
+      <SwitchPick
+        completedSteps={completedSteps}
+        onSelect={(provider) => {
+          setActiveProvider(provider);
+          pushStep(`Switched to: ${provider}`);
+          setStage({ type: "done", message: `Now using ${provider}` });
+        }}
+        onBack={goMenu}
+      />
+    );
+  }
+
+  // done
+  return <DoneScreen message={stage.message} onDone={onDone} />;
+}

package/src/components/provider/ProviderTypeStep.tsx

@@ -1,61 +1,53 @@
-import { Box, Text, useInput } from "ink";
-import figures from "figures";
-import { useState } from "react";
-import type { ProviderType } from "../../types/config";
-import { ACCENT, TEXT } from "../../colors";
-
-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,
-  onBack,
-}: {
-  onSelect: (type: ProviderType) => void;
-  onBack?: () => void;
-}) => {
-  const [index, setIndex] = useState(0);
-
-  useInput((_, key) => {
-    if (key.escape) {
-      onBack?.();
-      return;
-    }
-    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 color={TEXT}>Select a provider</Text>
-      {OPTIONS.map((opt, i) => {
-        const selected = i === index;
-        return (
-          <Box key={opt.type} marginLeft={1}>
-            <Text color={selected ? ACCENT : "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{onBack ? " · esc back" : ""}
-      </Text>
-    </Box>
-  );
-};
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import type { Provider } from "@ridit/lens-core";
+import { ACCENT } from "../../colors";
+
+const OPTIONS: { type: Provider; label: string; description: string }[] = [
+  { type: "anthropic", label: "Anthropic", description: "Claude models" },
+  { type: "openai", label: "OpenAI", description: "GPT models" },
+  { type: "google", label: "Google", description: "Gemini models" },
+  { type: "groq", label: "Groq", description: "Fast open-source models" },
+  { type: "openrouter", label: "OpenRouter", description: "Multi-provider gateway" },
+  { type: "ollama", label: "Ollama", description: "Local models" },
+  { type: "custom", label: "Custom", description: "Any OpenAI-compatible API" },
+];
+
+export function ProviderTypeStep({
+  onSelect,
+}: {
+  onSelect: (type: Provider) => 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={ACCENT}>
+        Select a provider
+      </Text>
+      {OPTIONS.map((opt, i) => {
+        const selected = i === index;
+        return (
+          <Box key={opt.type} marginLeft={1}>
+            <Text color={selected ? ACCENT : "white"}>
+              {selected ? figures.arrowRight : " "}
+              {"  "}
+              <Text bold={selected}>{opt.label}</Text>
+              <Text color="gray">{"  "}{opt.description}</Text>
+            </Text>
+          </Box>
+        );
+      })}
+      <Text color="gray" dimColor>
+        ↑↓ navigate · enter to select
+      </Text>
+    </Box>
+  );
+}

package/src/components/repo/StepRow.tsx

@@ -1,69 +1,68 @@
-import { Box, Text } from "ink";
-import Spinner from "ink-spinner";
-import { ACCENT } from "../../colors";
-import { useThinkingPhrase, type ThinkingKind } from "../../utils/thinking";
-import type { Step } from "../../types/repo";
-
-const LABELS: Record<string, string> = {
-  cloning: "cloning repository",
-  "fetching-tree": "fetching repository structure",
-  "reading-files": "reading important files",
-};
-
-const kindMap: Record<string, ThinkingKind> = {
-  cloning: "cloning",
-  "fetching-tree": "analyzing",
-  "reading-files": "analyzing",
-};
-
-function ActiveStep({ type }: { type: string }) {
-  const phrase = useThinkingPhrase(true, kindMap[type], 4321);
-  const label = LABELS[type] ?? type;
-  return (
-    <Box gap={1}>
-      <Text color={ACCENT}>
-        <Spinner />
-      </Text>
-      <Text color={ACCENT}>{phrase}</Text>
-    </Box>
-  );
-}
-
-export const StepRow = ({ step }: { step: Step }) => {
-  if (step.type === "error") {
-    return (
-      <Box gap={1}>
-        <Text color="red">✗</Text>
-        <Text color="red">{step.message}</Text>
-      </Box>
-    );
-  }
-
-  if (step.type === "folder-exists") {
-    return (
-      <Box flexDirection="column">
-        <Box gap={1}>
-          <Text color="yellow">!</Text>
-          <Text color="gray">folder already exists at </Text>
-          <Text color="white">{step.repoPath}</Text>
-        </Box>
-        <Box gap={1} marginLeft={2}>
-          <Text color="gray">y re-clone · n use existing</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  const label = LABELS[step.type] ?? step.type;
-
-  if (step.status === "done") {
-    return (
-      <Box gap={1}>
-        <Text color="green">✓</Text>
-        <Text color="gray">{label}</Text>
-      </Box>
-    );
-  }
-
-  return <ActiveStep type={step.type} />;
-};
+import React from "react";
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+import { ACCENT } from "../../colors";
+import { useThinkingPhrase, type ThinkingKind } from "../../utils/thinking";
+
+export type Step =
+  | { type: "cloning"; status: "pending" | "done" }
+  | { type: "folder-exists"; status: "pending"; repoPath: string }
+  | { type: "error"; message: string };
+
+const LABELS: Record<string, string> = {
+  cloning: "cloning repository",
+};
+
+const kindMap: Record<string, ThinkingKind> = {
+  cloning: "cloning",
+};
+
+function ActiveStep({ type }: { type: string }) {
+  const phrase = useThinkingPhrase(true, kindMap[type] ?? "general", 4321);
+  const label = LABELS[type] ?? type;
+  return (
+    <Box gap={1}>
+      <Text color={ACCENT}>
+        <Spinner />
+      </Text>
+      <Text color={ACCENT}>{phrase}</Text>
+    </Box>
+  );
+}
+
+export function StepRow({ step }: { step: Step }) {
+  if (step.type === "error") {
+    return (
+      <Box gap={1}>
+        <Text color="red">✗</Text>
+        <Text color="red">{step.message}</Text>
+      </Box>
+    );
+  }
+
+  if (step.type === "folder-exists") {
+    return (
+      <Box flexDirection="column">
+        <Box gap={1}>
+          <Text color="yellow">!</Text>
+          <Text color="gray">folder already exists at </Text>
+          <Text color="white">{step.repoPath}</Text>
+        </Box>
+        <Box gap={1} marginLeft={2}>
+          <Text color="gray">y re-clone · n use existing</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (step.status === "done") {
+    return (
+      <Box gap={1}>
+        <Text color="green">✓</Text>
+        <Text color="gray">{LABELS[step.type] ?? step.type}</Text>
+      </Box>
+    );
+  }
+
+  return <ActiveStep type={step.type} />;
+}