@ridit/lens 0.2.4 → 0.2.6

package/src/components/provider/ApiKeyStep.tsx

@@ -1,13 +1,15 @@
-import { Box, Text, useInput, type Key } from "ink";
+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 (default: http://localhost:11434)",
+  ollama: "Ollama base URL",
   custom: "API key",
 };
 
@@ -38,184 +40,139 @@ function readClipboard(): string | null {
 type CustomResult = { apiKey: string; baseUrl?: string };
 type Field = "apiKey" | "baseUrl";
 
-const 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 };
-};
-
 const SimpleInput = ({
   providerType,
   onSubmit,
-  onSkip,
+  onBack,
 }: {
   providerType: Exclude<ProviderType, "custom">;
   onSubmit: (value: string) => void;
-  onSkip?: () => void;
+  onBack?: () => void;
 }) => {
-  const [pasteError, setPasteError] = useState(false);
   const isPassword = providerType !== "ollama";
-  const { value, handle } = useFieldInput(
+  const [value, setValue] = useState(
     providerType === "ollama" ? "http://localhost:11434" : "",
-    setPasteError,
   );
 
   useInput((input, key) => {
-    if (key.return) {
-      if (value.trim()) onSubmit(value.trim());
+    if (key.escape) {
+      onBack?.();
       return;
     }
-    if (key.escape && onSkip) {
-      onSkip();
-      return;
+    if (key.ctrl && input === "v") {
+      const clip = readClipboard();
+      if (clip) setValue((v) => v + clip);
     }
-    handle(input, key);
   });
 
-  const display = isPassword ? "•".repeat(value.length) : value;
-
   return (
     <Box flexDirection="column" gap={1}>
-      <Text bold color="cyan">
-        {LABELS[providerType]}
-      </Text>
+      <Text color={TEXT}>{LABELS[providerType]}</Text>
       <Box borderStyle="round" borderColor="gray" paddingX={1}>
-        <Text>{display || " "}</Text>
+        <TextInput
+          value={value}
+          onChange={setValue}
+          onSubmit={(v) => {
+            if (v.trim()) onSubmit(v.trim());
+          }}
+          mask={isPassword ? "*" : undefined}
+          placeholder={
+            providerType === "ollama" ? "http://localhost:11434" : ""
+          }
+        />
       </Box>
-      {pasteError ? (
-        <Text color="red">⚠ Could not read clipboard</Text>
-      ) : (
-        <Text color="gray">
-          enter to confirm · ctrl+v to paste · ctrl+a to clear
-          {onSkip ? " · esc to skip" : ""}
-        </Text>
-      )}
+      <Text color="gray">
+        enter to confirm · ctrl+v to paste{onBack ? " · esc back" : ""}
+      </Text>
     </Box>
   );
 };
 
 const CustomInput = ({
   onSubmit,
-  onSkip,
+  onBack,
 }: {
   onSubmit: (result: CustomResult) => void;
-  onSkip?: () => void;
+  onBack?: () => void;
 }) => {
   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;
+  const [apiKey, setApiKey] = useState("");
+  const [baseUrl, setBaseUrl] = useState("");
 
   useInput((input, key) => {
-    if (key.escape && onSkip) {
-      onSkip();
+    if (key.escape) {
+      onBack?.();
       return;
     }
-
     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" && apiKeyField.value.trim()) {
-        onSubmit({
-          apiKey: apiKeyField.value.trim(),
-          baseUrl: baseUrlField.value.trim() || undefined,
-        });
-        return;
+    if (key.ctrl && input === "v") {
+      const clip = readClipboard();
+      if (clip) {
+        if (activeField === "apiKey") setApiKey((v) => v + clip);
+        else setBaseUrl((v) => v + clip);
       }
     }
-
-    active.handle(input, key);
   });
 
-  const fields: {
-    id: Field;
-    label: string;
-    password: boolean;
-    placeholder: string;
-  }[] = [
-    { id: "apiKey", label: "API key", password: true, placeholder: "sk-..." },
+  const fields: { id: Field; label: string; placeholder: string }[] = [
+    { id: "apiKey", label: "API key", placeholder: "sk-..." },
     {
       id: "baseUrl",
-      label: "Base URL",
-      password: false,
+      label: "Base URL (optional)",
       placeholder: "https://api.example.com/v1",
     },
   ];
 
   return (
     <Box flexDirection="column" gap={1}>
-      <Text bold color="cyan">
-        Custom provider
-      </Text>
-
-      {fields.map(({ id, label, password, placeholder }) => {
+      {fields.map(({ id, label, placeholder }) => {
         const isActive = activeField === id;
-        const val = id === "apiKey" ? apiKeyField.value : baseUrlField.value;
-        const display = password ? "•".repeat(val.length) : val;
-
+        const val = id === "apiKey" ? apiKey : baseUrl;
         return (
           <Box key={id} flexDirection="column" gap={0}>
-            <Text color={isActive ? "cyan" : "gray"}>
+            <Text color={isActive ? ACCENT : "gray"}>
               {isActive ? "›" : " "} {label}
-              {id === "baseUrl" ? " (optional)" : ""}
             </Text>
             <Box
               borderStyle="round"
-              borderColor={isActive ? "cyan" : "gray"}
+              borderColor={isActive ? ACCENT : "gray"}
               paddingX={1}
             >
-              <Text color={val ? "white" : "gray"}>
-                {display || placeholder}
-              </Text>
+              {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>
         );
       })}
-
-      {pasteError ? (
-        <Text color="red">⚠ Could not read clipboard</Text>
-      ) : (
-        <Text color="gray">
-          enter to next field · tab to switch · ctrl+v to paste · ctrl+a to
-          clear
-          {onSkip ? " · esc to skip" : ""}
-        </Text>
-      )}
+      <Text color="gray">
+        enter to next · tab to switch · ctrl+v to paste
+        {onBack ? " · esc back" : ""}
+      </Text>
     </Box>
   );
 };
@@ -223,21 +180,20 @@ const CustomInput = ({
 export const ApiKeyStep = ({
   providerType,
   onSubmit,
-  onSkip,
+  onBack,
 }: {
   providerType: ProviderType;
   onSubmit: (value: string | CustomResult) => void;
-  onSkip?: () => void;
+  onBack?: () => void;
 }) => {
   if (providerType === "custom") {
-    return <CustomInput onSubmit={onSubmit} onSkip={onSkip} />;
+    return <CustomInput onSubmit={onSubmit} onBack={onBack} />;
   }
-
   return (
     <SimpleInput
       providerType={providerType}
       onSubmit={onSubmit}
-      onSkip={onSkip}
+      onBack={onBack}
     />
   );
 };

package/src/components/provider/ModelStep.tsx

@@ -1,34 +1,35 @@
 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((input, key) => {
-    if (typing) {
-      if (key.return && custom.trim()) {
-        onSelect(custom.trim());
+  useInput((_, key) => {
+    if (key.escape) {
+      if (typing && models.length > 0) {
+        setTyping(false);
         return;
       }
-      if (key.backspace || key.delete) {
-        setCustom((v) => v.slice(0, -1));
-        return;
-      }
-      if (!key.ctrl && !key.meta && input) setCustom((v) => v + input);
+      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) {
@@ -55,19 +56,33 @@ export const ModelStep = ({
         );
       })}
       <Box marginLeft={1}>
-        <Text color={index === models.length && !typing ? "cyan" : "gray"}>
-          {index === models.length && !typing ? figures.arrowRight : " "}
-          {"  "}
-          {typing ? (
-            <Text>
-              Custom: <Text color="white">{custom || " "}</Text>
+        {typing ? (
+          <Box gap={1}>
+            <Text color={TEXT}>
+              {figures.arrowRight}
+              {"  "}Custom:{" "}
             </Text>
-          ) : (
-            "Enter custom model name"
-          )}
-        </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">↑↓ navigate · enter to select</Text>
+      <Text color="gray">
+        {typing
+          ? "enter to confirm · esc back"
+          : `↑↓ navigate · enter to select${onBack ? " · esc back" : ""}`}
+      </Text>
     </Box>
   );
 };

package/src/components/{repo → provider}/ProviderPicker.tsx

@@ -34,7 +34,7 @@ export const ProviderPicker = ({
       <Box marginTop={1}>
         <Text color="red">
           {figures.cross} No providers configured. Run{" "}
-          <Text color="cyan">lens init</Text> first.
+          <Text color="cyan">lens provider</Text> first.
         </Text>
       </Box>
     );

package/src/components/provider/ProviderTypeStep.tsx

@@ -2,6 +2,7 @@ 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" },
@@ -16,12 +17,18 @@ const OPTIONS: { type: ProviderType; label: string; description: string }[] = [
 
 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);
@@ -29,14 +36,12 @@ export const ProviderTypeStep = ({
 
   return (
     <Box flexDirection="column" gap={1}>
-      <Text bold color="cyan">
-        Select a provider
-      </Text>
+      <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 ? "cyan" : "white"}>
+            <Text color={selected ? ACCENT : "white"}>
               {selected ? figures.arrowRight : " "}
               {"  "}
               <Text bold={selected}>{opt.label}</Text>
@@ -48,7 +53,9 @@ export const ProviderTypeStep = ({
           </Box>
         );
       })}
-      <Text color="gray">↑↓ navigate · enter to select</Text>
+      <Text color="gray">
+        ↑↓ navigate · enter to select{onBack ? " · esc back" : ""}
+      </Text>
     </Box>
   );
 };

package/src/components/provider/RemoveProviderStep.tsx

@@ -3,6 +3,7 @@ import figures from "figures";
 import { useState } from "react";
 import { loadConfig, saveConfig } from "../../utils/config";
 import type { Provider } from "../../types/config";
+import { RED, TEXT } from "../../colors";
 
 export const RemoveProviderStep = ({ onDone }: { onDone: () => void }) => {
   const config = loadConfig();
@@ -38,7 +39,7 @@ export const RemoveProviderStep = ({ onDone }: { onDone: () => void }) => {
   if (providers.length === 0) {
     return (
       <Box marginTop={1}>
-        <Text color="gray">{figures.info} No providers configured.</Text>
+        <Text color="gray">No providers configured.</Text>
       </Box>
     );
   }
@@ -48,8 +49,8 @@ export const RemoveProviderStep = ({ onDone }: { onDone: () => void }) => {
   if (confirming && selected) {
     return (
       <Box flexDirection="column" gap={1} marginTop={1}>
-        <Text color="red">
-          {figures.warning} Remove <Text bold>{selected.name}</Text>? (y/n)
+        <Text color={RED}>
+          {figures.warning} Remove <Text>{selected.name}</Text>? (y/n)
         </Text>
       </Box>
     );
@@ -57,17 +58,15 @@ export const RemoveProviderStep = ({ onDone }: { onDone: () => void }) => {
 
   return (
     <Box flexDirection="column" gap={1} marginTop={1}>
-      <Text bold color="cyan">
-        Remove a provider
-      </Text>
+      <Text color={TEXT}>Remove a provider</Text>
       {providers.map((p, i) => {
         const isSelected = i === index;
         return (
           <Box key={p.id} marginLeft={1}>
-            <Text color={isSelected ? "red" : "white"}>
+            <Text color={isSelected ? RED : "white"}>
               {isSelected ? figures.arrowRight : " "}
               {"  "}
-              <Text bold={isSelected}>{p.name}</Text>
+              <Text>{p.name}</Text>
               <Text color="gray">
                 {"  "}
                 {p.type} · {p.model}

package/src/components/repo/RepoAnalysis.tsx

@@ -7,7 +7,7 @@ import { writeFileSync } from "fs";
 import path from "path";
 import { ACCENT } from "../../colors";
 import { requestFileList, analyzeRepo } from "../../utils/ai";
-import { ProviderPicker } from "./ProviderPicker";
+import { ProviderPicker } from "../provider/ProviderPicker";
 import { PreviewRunner } from "./PreviewRunner";
 import { IssueFixer } from "./IssueFixer";
 import { writeLensFile } from "../../utils/lensfile";

package/src/components/task/TaskRunner.tsx

@@ -8,7 +8,7 @@ import path from "path";
 import { ACCENT } from "../../colors";
 import { callModelRaw } from "../../utils/ai";
 import { DiffViewer, buildDiffs } from "../repo/DiffViewer";
-import { ProviderPicker } from "../repo/ProviderPicker";
+import { ProviderPicker } from "../provider/ProviderPicker";
 import type { DiffLine, FilePatch } from "../repo/DiffViewer";
 import type { Provider } from "../../types/config";
 import type { ImportantFile } from "../../types/repo";

package/src/components/timeline/CommitDetail.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { Box, Text } from "ink";
 import type { Commit, DiffFile } from "../../utils/git";
-
-const ACCENT = "#FF8C00";
+import { ACCENT } from "../../colors";
 
 type Props = {
   commit: Commit | null;
@@ -73,7 +72,6 @@ export function CommitDetail({
 
   const divider = "─".repeat(Math.max(0, width - 2));
 
-  // Build all diff lines for scrolling
   const allDiffLines: Array<{
     type: string;
     content: string;
@@ -177,7 +175,7 @@ export function CommitDetail({
       {/* stats bar */}
       <Box paddingX={1} marginTop={1} gap={3}>
         <Text color="green">+{commit.insertions} insertions</Text>
-        <Text color="red">-{commit.deletions} deletions</Text>
+        <Text color="red">-{commit.deletions}</Text>
         <Text color="gray" dimColor>
           {commit.filesChanged} file{commit.filesChanged !== 1 ? "s" : ""}{" "}
           changed

package/src/components/timeline/CommitList.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { Box, Text } from "ink";
 import type { Commit } from "../../utils/git";
-
-const ACCENT = "#FF8C00";
+import { ACCENT } from "../../colors";
 
 type Props = {
   commits: Commit[];
@@ -29,7 +28,6 @@ function formatRefs(refs: string): string {
 }
 
 function shortDate(dateStr: string): string {
-  // "2026-03-12 14:22:01 +0530" → "Mar 12"
   try {
     const d = new Date(dateStr);
     return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
@@ -82,8 +80,7 @@ export function CommitList({
         const refs = formatRefs(commit.refs);
         const date = shortDate(commit.date);
 
-        // truncate message to fit width
-        const prefixLen = 14; // symbol + hash + date
+        const prefixLen = 14;
         const maxMsg = Math.max(10, width - prefixLen - 3);
         const msg =
           commit.message.length > maxMsg
@@ -92,22 +89,18 @@ export function CommitList({
 
         return (
           <Box key={commit.hash} paddingX={1} flexDirection="column">
-            {/* graph line above (not first) */}
             {i > 0 && (
               <Text color="gray" dimColor>
                 {"│"}
               </Text>
             )}
             <Box gap={1}>
-              {/* selection indicator */}
               <Text color={isSelected ? ACCENT : "gray"}>
                 {isSelected ? "▶" : " "}
               </Text>
 
-              {/* graph node */}
               <Text color={isSelected ? ACCENT : color}>{symbol}</Text>
 
-              {/* short hash */}
               <Text
                 color={isSelected ? "white" : "gray"}
                 dimColor={!isSelected}
@@ -115,12 +108,10 @@ export function CommitList({
                 {commit.shortHash}
               </Text>
 
-              {/* date */}
               <Text color="cyan" dimColor={!isSelected}>
                 {date}
               </Text>
 
-              {/* message */}
               <Text
                 color={isSelected ? "white" : "gray"}
                 bold={isSelected}
@@ -130,14 +121,12 @@ export function CommitList({
               </Text>
             </Box>
 
-            {/* refs on selected */}
             {isSelected && refs && (
               <Box paddingLeft={4}>
                 <Text color="yellow">{refs}</Text>
               </Box>
             )}
 
-            {/* stat summary on selected */}
             {isSelected && (
               <Box paddingLeft={4} gap={2}>
                 <Text color="gray" dimColor>
@@ -159,7 +148,6 @@ export function CommitList({
         );
       })}
 
-      {/* scroll hint */}
       <Box paddingX={1} marginTop={1}>
         <Text color="gray" dimColor>
           {scrollOffset > 0 ? "↑ more above" : ""}

package/src/components/timeline/TimelineChat.tsx

@@ -5,8 +5,7 @@ import type { Commit } from "../../utils/git";
 import { summarizeTimeline } from "../../utils/git";
 import type { Provider } from "../../types/config";
 import { callChat } from "../../utils/chat";
-
-const ACCENT = "#FF8C00";
+import { ACCENT } from "../../colors";
 
 type TLMessage = { role: "user" | "assistant"; content: string; type: "text" };