@ridit/lens 0.3.7 → 0.3.9

package/src/components/provider/ApiKeyStep.tsx

@@ -1,199 +1,207 @@
-import { Box, Text, useInput } from "ink";
-import TextInput from "ink-text-input";
-import { useState } from "react";
-import { execSync } from "child_process";
-import type { ProviderType } from "../../types/config";
-import { ACCENT, TEXT } from "../../colors";
-
-const LABELS: Record<ProviderType, string> = {
-  anthropic: "Anthropic API key",
-  gemini: "Gemini API key",
-  openai: "OpenAI API key",
-  ollama: "Ollama base URL",
-  custom: "API key",
-};
-
-function readClipboard(): string | null {
-  try {
-    if (process.platform === "win32") {
-      return execSync("powershell -command Get-Clipboard", {
-        encoding: "utf-8",
-      }).trim();
-    } else if (process.platform === "darwin") {
-      return execSync("pbpaste", { encoding: "utf-8" }).trim();
-    } else {
-      try {
-        return execSync("xclip -selection clipboard -o", {
-          encoding: "utf-8",
-        }).trim();
-      } catch {
-        return execSync("xsel --clipboard --output", {
-          encoding: "utf-8",
-        }).trim();
-      }
-    }
-  } catch {
-    return null;
-  }
-}
-
-type CustomResult = { apiKey: string; baseUrl?: string };
-type Field = "apiKey" | "baseUrl";
-
-const SimpleInput = ({
-  providerType,
-  onSubmit,
-  onBack,
-}: {
-  providerType: Exclude<ProviderType, "custom">;
-  onSubmit: (value: string) => void;
-  onBack?: () => void;
-}) => {
-  const isPassword = providerType !== "ollama";
-  const [value, setValue] = useState(
-    providerType === "ollama" ? "http://localhost:11434" : "",
-  );
-
-  useInput((input, key) => {
-    if (key.escape) {
-      onBack?.();
-      return;
-    }
-    if (key.ctrl && input === "v") {
-      const clip = readClipboard();
-      if (clip) setValue((v) => v + clip);
-    }
-  });
-
-  return (
-    <Box flexDirection="column" gap={1}>
-      <Text color={TEXT}>{LABELS[providerType]}</Text>
-      <Box borderStyle="round" borderColor="gray" paddingX={1}>
-        <TextInput
-          value={value}
-          onChange={setValue}
-          onSubmit={(v) => {
-            if (v.trim()) onSubmit(v.trim());
-          }}
-          mask={isPassword ? "*" : undefined}
-          placeholder={
-            providerType === "ollama" ? "http://localhost:11434" : ""
-          }
-        />
-      </Box>
-      <Text color="gray">
-        enter to confirm · ctrl+v to paste{onBack ? " · esc back" : ""}
-      </Text>
-    </Box>
-  );
-};
-
-const CustomInput = ({
-  onSubmit,
-  onBack,
-}: {
-  onSubmit: (result: CustomResult) => void;
-  onBack?: () => void;
-}) => {
-  const [activeField, setActiveField] = useState<Field>("apiKey");
-  const [apiKey, setApiKey] = useState("");
-  const [baseUrl, setBaseUrl] = useState("");
-
-  useInput((input, key) => {
-    if (key.escape) {
-      onBack?.();
-      return;
-    }
-    if (key.tab) {
-      setActiveField((f) => (f === "apiKey" ? "baseUrl" : "apiKey"));
-      return;
-    }
-    if (key.ctrl && input === "v") {
-      const clip = readClipboard();
-      if (clip) {
-        if (activeField === "apiKey") setApiKey((v) => v + clip);
-        else setBaseUrl((v) => v + clip);
-      }
-    }
-  });
-
-  const fields: { id: Field; label: string; placeholder: string }[] = [
-    { id: "apiKey", label: "API key", placeholder: "sk-..." },
-    {
-      id: "baseUrl",
-      label: "Base URL (optional)",
-      placeholder: "https://api.example.com/v1",
-    },
-  ];
-
-  return (
-    <Box flexDirection="column" gap={1}>
-      {fields.map(({ id, label, placeholder }) => {
-        const isActive = activeField === id;
-        const val = id === "apiKey" ? apiKey : baseUrl;
-        return (
-          <Box key={id} flexDirection="column" gap={0}>
-            <Text color={isActive ? ACCENT : "gray"}>
-              {isActive ? "›" : " "} {label}
-            </Text>
-            <Box
-              borderStyle="round"
-              borderColor={isActive ? ACCENT : "gray"}
-              paddingX={1}
-            >
-              {isActive ? (
-                <TextInput
-                  value={val}
-                  onChange={id === "apiKey" ? setApiKey : setBaseUrl}
-                  onSubmit={() => {
-                    if (id === "apiKey" && apiKey.trim()) {
-                      setActiveField("baseUrl");
-                    } else if (id === "baseUrl" && apiKey.trim()) {
-                      onSubmit({
-                        apiKey: apiKey.trim(),
-                        baseUrl: baseUrl.trim() || undefined,
-                      });
-                    }
-                  }}
-                  mask={id === "apiKey" ? "*" : undefined}
-                  placeholder={placeholder}
-                />
-              ) : (
-                <Text color={val ? "white" : "gray"}>
-                  {id === "apiKey" && val
-                    ? "*".repeat(val.length)
-                    : val || placeholder}
-                </Text>
-              )}
-            </Box>
-          </Box>
-        );
-      })}
-      <Text color="gray">
-        enter to next · tab to switch · ctrl+v to paste
-        {onBack ? " · esc back" : ""}
-      </Text>
-    </Box>
-  );
-};
-
-export const ApiKeyStep = ({
-  providerType,
-  onSubmit,
-  onBack,
-}: {
-  providerType: ProviderType;
-  onSubmit: (value: string | CustomResult) => void;
-  onBack?: () => void;
-}) => {
-  if (providerType === "custom") {
-    return <CustomInput onSubmit={onSubmit} onBack={onBack} />;
-  }
-  return (
-    <SimpleInput
-      providerType={providerType}
-      onSubmit={onSubmit}
-      onBack={onBack}
-    />
-  );
-};
+import React, { useState } from "react";
+import { Box, Text, useInput, type Key } from "ink";
+import { execSync } from "child_process";
+import type { Provider } from "@ridit/lens-core";
+import { ACCENT } from "../../colors";
+
+function readClipboard(): string | null {
+  try {
+    if (process.platform === "win32") {
+      return execSync("powershell -command Get-Clipboard", { encoding: "utf-8" }).trim();
+    } else if (process.platform === "darwin") {
+      return execSync("pbpaste", { encoding: "utf-8" }).trim();
+    } else {
+      try {
+        return execSync("xclip -selection clipboard -o", { encoding: "utf-8" }).trim();
+      } catch {
+        return execSync("xsel --clipboard --output", { encoding: "utf-8" }).trim();
+      }
+    }
+  } catch {
+    return null;
+  }
+}
+
+const LABELS: Partial<Record<Provider, string>> = {
+  anthropic: "Anthropic API key",
+  openai: "OpenAI API key",
+  google: "Google API key",
+  groq: "Groq API key",
+  openrouter: "OpenRouter API key",
+  ollama: "Ollama base URL (leave blank for http://localhost:11434)",
+};
+
+function useFieldInput(initial: string, onPasteError: (v: boolean) => void) {
+  const [value, setValue] = useState(initial);
+
+  const handle = (input: string, key: Key) => {
+    if (key.backspace || key.delete) {
+      setValue((v) => v.slice(0, -1));
+      onPasteError(false);
+      return;
+    }
+    if (key.ctrl && input === "v") {
+      const clip = readClipboard();
+      if (clip) {
+        setValue((v) => v + clip);
+        onPasteError(false);
+      } else {
+        onPasteError(true);
+      }
+      return;
+    }
+    if (key.ctrl && input === "a") {
+      setValue("");
+      return;
+    }
+    if (!key.ctrl && !key.meta && input) {
+      setValue((v) => v + input);
+      onPasteError(false);
+    }
+  };
+
+  return { value, setValue, handle };
+}
+
+// Single-field input (API key or base URL)
+function SimpleInput({
+  providerType,
+  onSubmit,
+}: {
+  providerType: Exclude<Provider, "custom">;
+  onSubmit: (value: string) => void;
+}) {
+  const [pasteError, setPasteError] = useState(false);
+  const isOllama = providerType === "ollama";
+  const { value, handle } = useFieldInput(
+    isOllama ? "http://localhost:11434" : "",
+    setPasteError,
+  );
+
+  useInput((input, key) => {
+    if (key.return) {
+      onSubmit(value.trim());
+      return;
+    }
+    handle(input, key);
+  });
+
+  const display = isOllama ? value : "•".repeat(value.length);
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Text bold color={ACCENT}>
+        {LABELS[providerType] ?? "API key"}
+      </Text>
+      <Box borderStyle="round" borderColor="gray" paddingX={1}>
+        <Text>{display || " "}</Text>
+      </Box>
+      {pasteError ? (
+        <Text color="red">⚠ Could not read clipboard</Text>
+      ) : (
+        <Text color="gray" dimColor>
+          enter to confirm · ctrl+v to paste · ctrl+a to clear
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+// Two-field input for custom provider (API key + base URL)
+function CustomInput({
+  onSubmit,
+}: {
+  onSubmit: (apiKey: string, baseURL?: string) => void;
+}) {
+  type Field = "apiKey" | "baseUrl";
+  const [activeField, setActiveField] = useState<Field>("apiKey");
+  const [pasteError, setPasteError] = useState(false);
+
+  const apiKeyField = useFieldInput("", setPasteError);
+  const baseUrlField = useFieldInput("", setPasteError);
+  const active = activeField === "apiKey" ? apiKeyField : baseUrlField;
+
+  useInput((input, key) => {
+    if (key.tab) {
+      setActiveField((f) => (f === "apiKey" ? "baseUrl" : "apiKey"));
+      setPasteError(false);
+      return;
+    }
+    if (key.return) {
+      if (activeField === "apiKey" && apiKeyField.value.trim()) {
+        setActiveField("baseUrl");
+        return;
+      }
+      if (activeField === "baseUrl") {
+        onSubmit(
+          apiKeyField.value.trim(),
+          baseUrlField.value.trim() || undefined,
+        );
+        return;
+      }
+    }
+    active.handle(input, key);
+  });
+
+  const fields: { id: Field; label: string; password: boolean; placeholder: string }[] = [
+    { id: "apiKey", label: "API key", password: true, placeholder: "sk-..." },
+    { id: "baseUrl", label: "Base URL", password: false, placeholder: "https://api.example.com/v1" },
+  ];
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Text bold color={ACCENT}>
+        Custom provider
+      </Text>
+      {fields.map(({ id, label, password, placeholder }) => {
+        const isActive = activeField === id;
+        const val = id === "apiKey" ? apiKeyField.value : baseUrlField.value;
+        const display = password ? "•".repeat(val.length) : val;
+        return (
+          <Box key={id} flexDirection="column">
+            <Text color={isActive ? ACCENT : "gray"}>
+              {isActive ? "›" : " "} {label}
+              {id === "baseUrl" ? " (optional)" : ""}
+            </Text>
+            <Box borderStyle="round" borderColor={isActive ? ACCENT : "gray"} paddingX={1}>
+              <Text color={val ? "white" : "gray"}>{display || placeholder}</Text>
+            </Box>
+          </Box>
+        );
+      })}
+      {pasteError ? (
+        <Text color="red">⚠ Could not read clipboard</Text>
+      ) : (
+        <Text color="gray" dimColor>
+          enter to next · tab to switch · ctrl+v to paste · ctrl+a to clear
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+export function ApiKeyStep({
+  providerType,
+  onSubmit,
+}: {
+  providerType: Provider;
+  onSubmit: (apiKey: string, baseURL?: string) => void;
+}) {
+  if (providerType === "custom") {
+    return <CustomInput onSubmit={onSubmit} />;
+  }
+  if (providerType === "ollama") {
+    return (
+      <SimpleInput
+        providerType="ollama"
+        onSubmit={(baseUrl) => onSubmit("ollama", baseUrl || "http://localhost:11434")}
+      />
+    );
+  }
+  return (
+    <SimpleInput
+      providerType={providerType}
+      onSubmit={(apiKey) => onSubmit(apiKey)}
+    />
+  );
+}

package/src/components/provider/ModelStep.tsx

@@ -1,88 +1,90 @@
-import { Box, Text, useInput } from "ink";
-import TextInput from "ink-text-input";
-import figures from "figures";
-import { useState } from "react";
-import { DEFAULT_MODELS } from "../../utils/config";
-import type { ProviderType } from "../../types/config";
-import { TEXT } from "../../colors";
-
-export const ModelStep = ({
-  providerType,
-  onSelect,
-  onBack,
-}: {
-  providerType: ProviderType;
-  onSelect: (model: string) => void;
-  onBack?: () => void;
-}) => {
-  const models = DEFAULT_MODELS[providerType] ?? [];
-  const [index, setIndex] = useState(0);
-  const [custom, setCustom] = useState("");
-  const [typing, setTyping] = useState(models.length === 0);
-
-  useInput((_, key) => {
-    if (key.escape) {
-      if (typing && models.length > 0) {
-        setTyping(false);
-        return;
-      }
-      onBack?.();
-      return;
-    }
-    if (typing) return;
-    if (key.upArrow) setIndex((i) => Math.max(0, i - 1));
-    if (key.downArrow) setIndex((i) => Math.min(models.length, i + 1));
-    if (key.return) {
-      if (index === models.length) setTyping(true);
-      else onSelect(models[index]!);
-    }
-  });
-
-  return (
-    <Box flexDirection="column" gap={1}>
-      <Text bold color="cyan">
-        Select a model
-      </Text>
-      {models.map((m, i) => {
-        const selected = !typing && i === index;
-        return (
-          <Box key={m} marginLeft={1}>
-            <Text color={selected ? "cyan" : "white"}>
-              {selected ? figures.arrowRight : " "}
-              {"  "}
-              {m}
-            </Text>
-          </Box>
-        );
-      })}
-      <Box marginLeft={1}>
-        {typing ? (
-          <Box gap={1}>
-            <Text color={TEXT}>
-              {figures.arrowRight}
-              {"  "}Custom:{" "}
-            </Text>
-            <TextInput
-              value={custom}
-              onChange={setCustom}
-              onSubmit={(v) => {
-                if (v.trim()) onSelect(v.trim());
-              }}
-              placeholder="enter model name"
-            />
-          </Box>
-        ) : (
-          <Text color={index === models.length ? "cyan" : "gray"}>
-            {index === models.length ? figures.arrowRight : " "}
-            {"  "}Enter custom model name
-          </Text>
-        )}
-      </Box>
-      <Text color="gray">
-        {typing
-          ? "enter to confirm · esc back"
-          : `↑↓ 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 DEFAULT_MODELS: Partial<Record<Provider, string[]>> = {
+  anthropic: [
+    "claude-sonnet-4-5-20250514",
+    "claude-opus-4-5-20250514",
+    "claude-haiku-4-5-20251001",
+  ],
+  openai: ["gpt-4o", "gpt-4o-mini", "gpt-4-turbo"],
+  google: ["gemini-2.0-flash", "gemini-1.5-pro", "gemini-1.5-flash"],
+  groq: ["llama-3.3-70b-versatile", "llama-3.1-8b-instant", "mixtral-8x7b-32768"],
+  openrouter: ["openai/gpt-4o", "openai/gpt-4o-mini", "anthropic/claude-3.5-sonnet"],
+  ollama: ["llama3.2", "llama3.1", "mistral", "codellama", "phi3"],
+  custom: [],
+};
+
+export function ModelStep({
+  providerType,
+  onSelect,
+}: {
+  providerType: Provider;
+  onSelect: (model: string) => void;
+}) {
+  const models = DEFAULT_MODELS[providerType] ?? [];
+  const [index, setIndex] = useState(0);
+  const [custom, setCustom] = useState("");
+  const [typing, setTyping] = useState(models.length === 0);
+
+  useInput((input, key) => {
+    if (typing) {
+      if (key.return && custom.trim()) {
+        onSelect(custom.trim());
+        return;
+      }
+      if (key.backspace || key.delete) {
+        setCustom((v) => v.slice(0, -1));
+        return;
+      }
+      if (!key.ctrl && !key.meta && input) setCustom((v) => v + input);
+      return;
+    }
+    if (key.upArrow) setIndex((i) => Math.max(0, i - 1));
+    if (key.downArrow) setIndex((i) => Math.min(models.length, i + 1));
+    if (key.return) {
+      if (index === models.length) setTyping(true);
+      else onSelect(models[index]!);
+    }
+  });
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Text bold color={ACCENT}>
+        Select a model
+      </Text>
+      {models.map((m, i) => {
+        const selected = !typing && i === index;
+        return (
+          <Box key={m} marginLeft={1}>
+            <Text color={selected ? ACCENT : "white"}>
+              {selected ? figures.arrowRight : " "}
+              {"  "}
+              {m}
+            </Text>
+          </Box>
+        );
+      })}
+      <Box marginLeft={1}>
+        <Text color={index === models.length && !typing ? ACCENT : "gray"}>
+          {index === models.length && !typing ? figures.arrowRight : " "}
+          {"  "}
+          {typing ? (
+            <Text>
+              Model name:{" "}
+              <Text color="white">{custom || " "}</Text>
+            </Text>
+          ) : (
+            "Enter custom model name"
+          )}
+        </Text>
+      </Box>
+      <Text color="gray" dimColor>
+        ↑↓ navigate · enter to select
+      </Text>
+    </Box>
+  );
+}