letmecook 0.0.13 → 0.0.14

package/src/ui/add-repos.ts

@@ -2,6 +2,8 @@ import { type CliRenderer, TextRenderable, InputRenderable, type KeyEvent } from
 import { createBaseLayout, clearLayout } from "./renderer";
 import { parseRepoSpec, type RepoSpec } from "../types";
 import { listRepoHistory } from "../repo-history";
+import { showFooter, hideFooter } from "./common/footer";
+import { isEnter, isEscape, isArrowUp, isArrowDown } from "./common/keyboard";
 
 export interface AddReposResult {
   repos: RepoSpec[];
@@ -11,7 +13,6 @@ export interface AddReposResult {
 export async function showAddReposPrompt(renderer: CliRenderer): Promise<AddReposResult> {
   const history = await listRepoHistory();
   const historySpecs = history.map((item) => item.spec);
-  let historyIndex = historySpecs.length;
   const maxMatches = 6;
 
   return new Promise((resolve) => {
@@ -21,12 +22,12 @@ export async function showAddReposPrompt(renderer: CliRenderer): Promise<AddRepo
 
     const repos: RepoSpec[] = [];
     let currentInput = "";
-    let lastMatchIndex = -1;
-    let lastMatchQuery = "";
-    let mode: "spec" | "details" = "spec";
-    let pendingRepo: RepoSpec | null = null;
-    let pendingReadOnly = false;
-    let pendingLatest = false;
+    let currentReadOnly = false;
+    let currentLatest = false;
+    let currentValidRepo: RepoSpec | null = null;
+    let selectedMatchIndex = -1; // -1 means no match selected, user is typing freely
+    let lastQuery = ""; // Track the query that generated current matches
+    let isNavigating = false; // Flag to prevent input handler from resetting when navigating
 
     // Repository input
     const repoLabel = new TextRenderable(renderer, {
@@ -67,10 +68,10 @@ export async function showAddReposPrompt(renderer: CliRenderer): Promise<AddRepo
     });
     content.add(matchesList);
 
-    // Details form
+    // Inline toggles (always visible when repo is valid)
     const detailsLabel = new TextRenderable(renderer, {
       id: "details-label",
-      content: "\nRepository details:",
+      content: "",
       fg: "#e2e8f0",
       marginTop: 1,
     });
@@ -78,7 +79,7 @@ export async function showAddReposPrompt(renderer: CliRenderer): Promise<AddRepo
 
     const detailsReadOnly = new TextRenderable(renderer, {
       id: "details-readonly",
-      content: "  Read-only: No",
+      content: "",
       fg: "#94a3b8",
       marginTop: 0,
     });
@@ -86,7 +87,7 @@ export async function showAddReposPrompt(renderer: CliRenderer): Promise<AddRepo
 
     const detailsLatest = new TextRenderable(renderer, {
       id: "details-latest",
-      content: "  Latest: No",
+      content: "",
       fg: "#94a3b8",
       marginTop: 0,
     });
@@ -98,10 +99,20 @@ export async function showAddReposPrompt(renderer: CliRenderer): Promise<AddRepo
       repoInput.insertText(text);
       currentInput = repoInput.value;
       if (currentInput.trim()) {
-        validateAndAddRepo(currentInput.trim());
+        const repo = validateRepo(currentInput.trim());
+        currentValidRepo = repo;
+        if (repo) {
+          currentReadOnly = false;
+          currentLatest = false;
+        }
       } else {
         statusText.content = "";
+        currentValidRepo = null;
       }
+      selectedMatchIndex = -1;
+      lastQuery = currentInput;
+      updateMatches();
+      updateDetails();
       event.preventDefault();
     };
 
@@ -114,7 +125,7 @@ export async function showAddReposPrompt(renderer: CliRenderer): Promise<AddRepo
     });
     content.add(statusText);
 
-    // Repos list
+    // Repos list with counter
     const reposLabel = new TextRenderable(renderer, {
       id: "repos-label",
       content: "\nAdded repositories:",
@@ -131,15 +142,6 @@ export async function showAddReposPrompt(renderer: CliRenderer): Promise<AddRepo
     });
     content.add(reposList);
 
-    // Instructions
-    const instructions = new TextRenderable(renderer, {
-      id: "instructions",
-      content: "\n[Enter] Next   [Ctrl+D] Continue   [↑/↓] History   [Tab] Complete   [Esc] Exit",
-      fg: "#64748b",
-      marginTop: 2,
-    });
-    content.add(instructions);
-
     repoInput.focus();
 
     function updateReposList() {
@@ -159,43 +161,37 @@ export async function showAddReposPrompt(renderer: CliRenderer): Promise<AddRepo
     }
 
     function updateDetails() {
-      if (mode === "details" && pendingRepo) {
+      if (currentValidRepo) {
         detailsLabel.content = "\nRepository details:";
         detailsLabel.fg = "#e2e8f0";
-        detailsReadOnly.content = `  Read-only: ${pendingReadOnly ? "Yes" : "No"}`;
-        detailsReadOnly.fg = pendingReadOnly ? "#f59e0b" : "#94a3b8";
-        detailsLatest.content = `  Latest: ${pendingLatest ? "Yes" : "No"}`;
-        detailsLatest.fg = pendingLatest ? "#22d3ee" : "#94a3b8";
-        instructions.content =
-          "\n[Enter] Add   [r] Toggle read-only   [l] Toggle latest   [Esc] Back";
+        detailsReadOnly.content = `  Read-only: ${currentReadOnly ? "Yes [r]" : "No [r]"}`;
+        detailsReadOnly.fg = currentReadOnly ? "#f59e0b" : "#94a3b8";
+        detailsLatest.content = `  Latest: ${currentLatest ? "Yes [l]" : "No [l]"}`;
+        detailsLatest.fg = currentLatest ? "#22d3ee" : "#94a3b8";
       } else {
-        detailsLabel.content = "\nRepository details:";
-        detailsLabel.fg = "#475569";
-        detailsReadOnly.content = "  Read-only: No";
-        detailsReadOnly.fg = "#475569";
-        detailsLatest.content = "  Latest: No";
-        detailsLatest.fg = "#475569";
-        instructions.content =
-          "\n[Enter] Next   [Ctrl+D] Continue   [↑/↓] History   [Tab] Complete   [Esc] Cancel";
+        detailsLabel.content = "";
+        detailsReadOnly.content = "";
+        detailsLatest.content = "";
       }
     }
 
-    function updateMatches(value: string, selectedSpec?: string) {
-      const query = value.trim();
-      if (!query) {
-        matchesList.content = "(no matches)";
-        matchesList.fg = "#64748b";
-        return;
-      }
+    function getMatchesForQuery(query: string): string[] {
+      const trimmed = query.trim();
+      if (!trimmed) return [];
 
-      const lowerQuery = query.toLowerCase();
-      const matches = historySpecs
+      const lowerQuery = trimmed.toLowerCase();
+      return historySpecs
         .filter((spec) => spec.toLowerCase().startsWith(lowerQuery))
         .toSorted((a, b) => {
           if (a.length !== b.length) return a.length - b.length;
           return a.localeCompare(b);
         })
         .slice(0, maxMatches);
+    }
+
+    function updateMatches() {
+      const query = lastQuery; // Use the last query, not currentInput (which may be a selected match)
+      const matches = getMatchesForQuery(query);
 
       if (matches.length === 0) {
         matchesList.content = "(no matches)";
@@ -205,192 +201,200 @@ export async function showAddReposPrompt(renderer: CliRenderer): Promise<AddRepo
 
       matchesList.content = matches
         .map((spec, index) => {
-          const isSelected = selectedSpec ? spec === selectedSpec : index === 0;
+          const isSelected = selectedMatchIndex === index;
           return `${isSelected ? "▶" : " "} ${spec}`;
         })
         .join("\n");
       matchesList.fg = "#94a3b8";
     }
 
-    function getMatches(value: string): string[] {
-      const query = value.trim();
-      if (!query) return [];
-      const lowerQuery = query.toLowerCase();
-      return historySpecs
-        .filter((spec) => spec.toLowerCase().startsWith(lowerQuery))
-        .toSorted((a, b) => {
-          if (a.length !== b.length) return a.length - b.length;
-          return a.localeCompare(b);
-        })
-        .slice(0, maxMatches);
-    }
-
-    function validateAndAddRepo(spec: string): boolean {
+    function validateRepo(spec: string): RepoSpec | null {
       try {
-        parseRepoSpec(spec);
+        const repo = parseRepoSpec(spec);
         statusText.content = "✓ Valid format";
         statusText.fg = "#10b981";
-        return true;
+        return repo;
       } catch (error) {
         statusText.content = `✗ ${error instanceof Error ? error.message : "Invalid format"}`;
         statusText.fg = "#ef4444";
-        return false;
+        return null;
       }
     }
 
-    function applyHistorySpec(spec: string) {
-      repoInput.value = spec;
-      currentInput = spec;
-      if (spec.trim()) {
-        validateAndAddRepo(spec.trim());
-      } else {
-        statusText.content = "";
+    function selectMatch(matchIndex: number) {
+      const matches = getMatchesForQuery(lastQuery);
+      if (matchIndex < 0 || matchIndex >= matches.length) return;
+
+      const selectedMatch = matches[matchIndex];
+      if (!selectedMatch) return;
+
+      selectedMatchIndex = matchIndex;
+      isNavigating = true; // Set flag to prevent input handler from resetting
+
+      // Update input with selected match
+      repoInput.value = selectedMatch;
+      repoInput.cursorPosition = selectedMatch.length; // Set cursor to end
+      currentInput = selectedMatch;
+
+      // Validate and update details
+      const repo = validateRepo(selectedMatch.trim());
+      currentValidRepo = repo;
+      if (repo) {
+        currentReadOnly = false;
+        currentLatest = false;
       }
-      updateMatches(currentInput);
+
+      updateMatches(); // Refresh display with new selection (matches stay the same, just highlight changes)
+      updateDetails();
+
+      isNavigating = false; // Reset flag
     }
 
-    function startRepoDetails() {
-      const spec = currentInput.trim();
-      if (!spec) return;
-
-      if (validateAndAddRepo(spec)) {
-        // Check if already added
-        if (repos.some((r) => r.spec === spec)) {
-          statusText.content = "⚠️ Repository already added";
-          statusText.fg = "#f59e0b";
-          return;
-        }
+    function addCurrentRepo() {
+      if (!currentValidRepo) return;
 
-        pendingRepo = parseRepoSpec(spec);
-        pendingReadOnly = false;
-        pendingLatest = false;
-        mode = "details";
-        repoInput.blur();
-        updateDetails();
+      const spec = currentInput.trim();
+      // Check if already added
+      if (repos.some((r) => r.spec === spec)) {
+        statusText.content = "⚠️ Repository already added";
+        statusText.fg = "#f59e0b";
+        return;
       }
-    }
 
-    function confirmAddRepo() {
-      if (!pendingRepo) return;
-      pendingRepo.readOnly = pendingReadOnly;
-      pendingRepo.latest = pendingLatest;
-      repos.push(pendingRepo);
+      const repoToAdd = { ...currentValidRepo };
+      repoToAdd.readOnly = currentReadOnly;
+      repoToAdd.latest = currentLatest;
+      repos.push(repoToAdd);
 
-      pendingRepo = null;
-      pendingReadOnly = false;
-      pendingLatest = false;
-      mode = "spec";
       currentInput = "";
       repoInput.value = "";
-      repoInput.focus();
+      currentValidRepo = null;
+      currentReadOnly = false;
+      currentLatest = false;
       updateReposList();
-      updateMatches("");
+      lastQuery = "";
+      selectedMatchIndex = -1;
+      updateMatches();
       updateDetails();
-      lastMatchIndex = -1;
-      lastMatchQuery = "";
-
-      statusText.content = "✓ Added successfully";
-      statusText.fg = "#10b981";
 
-      setTimeout(() => {
-        if (statusText.content?.toString() === "✓ Added successfully") {
-          statusText.content = "";
-        }
-      }, 2000);
+      statusText.content = "";
     }
 
     const handleKeypress = (key: KeyEvent) => {
-      if (mode === "details") {
-        if (key.name === "r") {
-          pendingReadOnly = !pendingReadOnly;
-          if (!pendingReadOnly) {
-            pendingLatest = false;
-          }
-          updateDetails();
-        } else if (key.name === "l") {
-          pendingLatest = !pendingLatest;
-          if (pendingLatest) {
-            pendingReadOnly = true;
-          }
-          updateDetails();
-        } else if (key.name === "escape" || key.name === "backspace") {
-          mode = "spec";
-          pendingRepo = null;
-          pendingReadOnly = false;
-          pendingLatest = false;
-          repoInput.focus();
-          updateDetails();
-        } else if (key.name === "return" || key.name === "enter") {
-          confirmAddRepo();
+      if (isEscape(key)) {
+        cleanup();
+        resolve({ repos, cancelled: true });
+        return;
+      }
+
+      // Toggle read-only
+      if (key.name === "r" && currentValidRepo) {
+        currentReadOnly = !currentReadOnly;
+        if (!currentReadOnly) {
+          currentLatest = false;
         }
-      } else {
-        // Spec input mode
-        if (key.name === "escape") {
-          cleanup();
-          resolve({ repos, cancelled: true });
-        } else if (key.name === "return" || key.name === "enter") {
-          startRepoDetails();
-        } else if (key.name === "tab") {
-          const query = currentInput.trim();
-          const matches = getMatches(query);
-          if (matches.length === 0) return;
-
-          const currentIndex = matches.findIndex((spec) => spec === currentInput);
-          let nextIndex = 0;
-
-          if (currentIndex !== -1) {
-            nextIndex = (currentIndex + 1) % matches.length;
-          } else if (lastMatchQuery === query.toLowerCase() && lastMatchIndex >= 0) {
-            nextIndex = (lastMatchIndex + 1) % matches.length;
-          }
-
-          const match = matches[nextIndex];
-          if (!match) return;
-          repoInput.value = match;
-          repoInput.cursorPosition = match.length;
-          currentInput = match;
-          lastMatchIndex = nextIndex;
-          lastMatchQuery = query.toLowerCase();
-          validateAndAddRepo(match.trim());
-          updateMatches(currentInput, match);
-        } else if (key.name === "up") {
-          if (historySpecs.length === 0) return;
-          historyIndex = Math.max(0, historyIndex - 1);
-          const spec = historySpecs[historyIndex];
-          if (spec) applyHistorySpec(spec);
-        } else if (key.name === "down") {
-          if (historySpecs.length === 0) return;
-          historyIndex = Math.min(historySpecs.length - 1, historyIndex + 1);
-          const spec = historySpecs[historyIndex];
-          if (spec) applyHistorySpec(spec);
-        } else if (key.name === "d" && key.ctrl) {
-          // Ctrl+D to finish
+        updateDetails();
+        return;
+      }
+
+      // Toggle latest
+      if (key.name === "l" && currentValidRepo) {
+        currentLatest = !currentLatest;
+        if (currentLatest) {
+          currentReadOnly = true;
+        }
+        updateDetails();
+        return;
+      }
+
+      // Enter to add repo or continue
+      if (isEnter(key)) {
+        if (currentInput.trim() && currentValidRepo) {
+          addCurrentRepo();
+        } else if (!currentInput.trim() && repos.length > 0) {
+          // Empty input + repos added = continue
           cleanup();
           resolve({ repos, cancelled: false });
         }
+        return;
+      }
+
+      // Arrow keys for navigating matches
+      if (isArrowUp(key)) {
+        const matches = getMatchesForQuery(lastQuery);
+        if (matches.length === 0) return;
+
+        if (selectedMatchIndex < 0) {
+          // Start from last match
+          selectedMatchIndex = matches.length - 1;
+        } else {
+          // Move up
+          selectedMatchIndex = Math.max(0, selectedMatchIndex - 1);
+        }
+        selectMatch(selectedMatchIndex);
+        return;
+      }
+
+      if (isArrowDown(key)) {
+        const matches = getMatchesForQuery(lastQuery);
+        if (matches.length === 0) return;
+
+        if (selectedMatchIndex < 0) {
+          // Start from first match
+          selectedMatchIndex = 0;
+        } else {
+          // Move down
+          selectedMatchIndex = Math.min(matches.length - 1, selectedMatchIndex + 1);
+        }
+        selectMatch(selectedMatchIndex);
+        return;
       }
     };
 
     repoInput.on("input", (value: string) => {
       currentInput = value;
-      historyIndex = historySpecs.length;
-      lastMatchIndex = -1;
-      lastMatchQuery = value.trim().toLowerCase();
+
+      // If we're navigating (programmatically setting value), don't reset selection
+      if (isNavigating) {
+        return;
+      }
+
+      // User is typing - reset selected match index and update query
+      selectedMatchIndex = -1;
+      lastQuery = value; // Update the query that generates matches
+
       if (value.trim()) {
-        validateAndAddRepo(value.trim());
+        const repo = validateRepo(value.trim());
+        currentValidRepo = repo;
+        if (repo) {
+          currentReadOnly = false;
+          currentLatest = false;
+        }
       } else {
         statusText.content = "";
+        currentValidRepo = null;
       }
-      updateMatches(value);
+      updateMatches(); // Update matches based on new lastQuery
+      updateDetails();
     });
 
     const cleanup = () => {
       renderer.keyInput.off("keypress", handleKeypress);
       repoInput.blur();
+      hideFooter(renderer);
       clearLayout(renderer);
     };
 
+    // Show footer with context-aware actions
+    showFooter(renderer, content, {
+      navigate: true,
+      select: true,
+      back: true,
+      custom: currentValidRepo ? ["r Toggle RO", "l Toggle Latest"] : ["↑↓ Navigate matches"],
+    });
+
     renderer.keyInput.on("keypress", handleKeypress);
     updateDetails();
+    updateReposList();
   });
 }