letmecook 0.0.13 → 0.0.15

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,14 @@ 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
+    let isConfirming = false; // Flag for confirmation mode (showing checkboxes)
+    let confirmOptionIndex = 0; // 0 = read-only, 1 = latest, 2 = confirm button
 
     // Repository input
     const repoLabel = new TextRenderable(renderer, {
@@ -67,10 +70,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 +81,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,22 +89,40 @@ export async function showAddReposPrompt(renderer: CliRenderer): Promise<AddRepo
 
     const detailsLatest = new TextRenderable(renderer, {
       id: "details-latest",
-      content: "  Latest: No",
+      content: "",
       fg: "#94a3b8",
       marginTop: 0,
     });
     content.add(detailsLatest);
 
+    const confirmButton = new TextRenderable(renderer, {
+      id: "confirm-button",
+      content: "",
+      fg: "#10b981",
+      marginTop: 1,
+    });
+    content.add(confirmButton);
+
     repoInput.onPaste = (event) => {
       const text = event.text.replace(/[\r\n]+/g, "");
       if (!text) return;
       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 +135,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 +152,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 +171,55 @@ export async function showAddReposPrompt(renderer: CliRenderer): Promise<AddRepo
     }
 
     function updateDetails() {
-      if (mode === "details" && pendingRepo) {
-        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";
+      if (isConfirming && currentValidRepo) {
+        // Confirmation mode with interactive checkboxes
+        detailsLabel.content = `\nConfigure options for: ${currentInput.trim()}`;
+        detailsLabel.fg = "#38bdf8";
+
+        const roCheckbox = currentReadOnly ? "[✓]" : "[ ]";
+        const roSelected = confirmOptionIndex === 0;
+        detailsReadOnly.content = `  ${roSelected ? "▶" : " "} ${roCheckbox} Read-only [r]`;
+        detailsReadOnly.fg = roSelected ? "#f8fafc" : currentReadOnly ? "#f59e0b" : "#94a3b8";
+
+        const latestCheckbox = currentLatest ? "[✓]" : "[ ]";
+        const latestSelected = confirmOptionIndex === 1;
+        detailsLatest.content = `  ${latestSelected ? "▶" : " "} ${latestCheckbox} Latest [l]`;
+        detailsLatest.fg = latestSelected ? "#f8fafc" : currentLatest ? "#22d3ee" : "#94a3b8";
+
+        const confirmSelected = confirmOptionIndex === 2;
+        confirmButton.content = `  ${confirmSelected ? "▶" : " "} [Add repository]`;
+        confirmButton.fg = confirmSelected ? "#10b981" : "#64748b";
+      } else if (currentValidRepo) {
+        detailsLabel.content = "\nPress Enter to configure options";
+        detailsLabel.fg = "#64748b";
+        detailsReadOnly.content = "";
+        detailsLatest.content = "";
+        confirmButton.content = "";
       } 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 = "";
+        confirmButton.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 +229,287 @@ 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 = "";
-      }
-      updateMatches(currentInput);
-    }
+    function selectMatch(matchIndex: number) {
+      const matches = getMatchesForQuery(lastQuery);
+      if (matchIndex < 0 || matchIndex >= matches.length) return;
 
-    function startRepoDetails() {
-      const spec = currentInput.trim();
-      if (!spec) return;
+      const selectedMatch = matches[matchIndex];
+      if (!selectedMatch) return;
 
-      if (validateAndAddRepo(spec)) {
-        // Check if already added
-        if (repos.some((r) => r.spec === spec)) {
-          statusText.content = "⚠️ Repository already added";
-          statusText.fg = "#f59e0b";
-          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;
 
-        pendingRepo = parseRepoSpec(spec);
-        pendingReadOnly = false;
-        pendingLatest = false;
-        mode = "details";
-        repoInput.blur();
-        updateDetails();
+      // Validate and update details
+      const repo = validateRepo(selectedMatch.trim());
+      currentValidRepo = repo;
+      if (repo) {
+        currentReadOnly = false;
+        currentLatest = false;
       }
+
+      updateMatches(); // Refresh display with new selection (matches stay the same, just highlight changes)
+      updateDetails();
+
+      isNavigating = false; // Reset flag
     }
 
-    function confirmAddRepo() {
-      if (!pendingRepo) return;
-      pendingRepo.readOnly = pendingReadOnly;
-      pendingRepo.latest = pendingLatest;
-      repos.push(pendingRepo);
+    function addCurrentRepo() {
+      if (!currentValidRepo) return;
+
+      const spec = currentInput.trim();
+      // Check if already added
+      if (repos.some((r) => r.spec === spec)) {
+        statusText.content = "⚠️ Repository already added";
+        statusText.fg = "#f59e0b";
+        return;
+      }
+
+      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";
+      statusText.content = "";
+    }
+
+    function enterConfirmMode() {
+      isConfirming = true;
+      confirmOptionIndex = 2; // Start on confirm button for quick add
+      repoInput.blur();
+      updateDetails();
+      updateFooter();
+    }
+
+    function exitConfirmMode() {
+      isConfirming = false;
+      confirmOptionIndex = 0;
+      repoInput.focus();
+      updateDetails();
+      updateFooter();
+    }
 
-      setTimeout(() => {
-        if (statusText.content?.toString() === "✓ Added successfully") {
-          statusText.content = "";
+    function toggleCurrentOption() {
+      if (confirmOptionIndex === 0) {
+        // Toggle read-only
+        currentReadOnly = !currentReadOnly;
+        if (!currentReadOnly) {
+          currentLatest = false;
         }
-      }, 2000);
+      } else if (confirmOptionIndex === 1) {
+        // Toggle latest
+        currentLatest = !currentLatest;
+        if (currentLatest) {
+          currentReadOnly = true;
+        }
+      } else if (confirmOptionIndex === 2) {
+        // Confirm button - add the repo
+        addCurrentRepo();
+        exitConfirmMode();
+      }
+      updateDetails();
+    }
+
+    function updateFooter() {
+      if (isConfirming) {
+        showFooter(renderer, content, {
+          navigate: true,
+          select: false,
+          back: true,
+          custom: ["r Read-only", "l Latest", "space Toggle", "enter Add"],
+        });
+      } else {
+        showFooter(renderer, content, {
+          navigate: true,
+          select: true,
+          back: true,
+          custom: repos.length > 0 ? ["enter (empty) Continue"] : [],
+        });
+      }
     }
 
     const handleKeypress = (key: KeyEvent) => {
-      if (mode === "details") {
+      // Escape behavior differs based on mode
+      if (isEscape(key)) {
+        if (isConfirming) {
+          // Exit confirmation mode, go back to input
+          exitConfirmMode();
+          return;
+        }
+        cleanup();
+        resolve({ repos, cancelled: true });
+        return;
+      }
+
+      // Confirmation mode handling
+      if (isConfirming) {
+        // Toggle read-only with 'r' hotkey
         if (key.name === "r") {
-          pendingReadOnly = !pendingReadOnly;
-          if (!pendingReadOnly) {
-            pendingLatest = false;
+          currentReadOnly = !currentReadOnly;
+          if (!currentReadOnly) {
+            currentLatest = false;
           }
           updateDetails();
-        } else if (key.name === "l") {
-          pendingLatest = !pendingLatest;
-          if (pendingLatest) {
-            pendingReadOnly = true;
+          return;
+        }
+
+        // Toggle latest with 'l' hotkey
+        if (key.name === "l") {
+          currentLatest = !currentLatest;
+          if (currentLatest) {
+            currentReadOnly = true;
           }
           updateDetails();
-        } else if (key.name === "escape" || key.name === "backspace") {
-          mode = "spec";
-          pendingRepo = null;
-          pendingReadOnly = false;
-          pendingLatest = false;
-          repoInput.focus();
+          return;
+        }
+
+        // Space to toggle current option
+        if (key.name === "space") {
+          toggleCurrentOption();
+          return;
+        }
+
+        // Enter to confirm/add
+        if (isEnter(key)) {
+          addCurrentRepo();
+          exitConfirmMode();
+          return;
+        }
+
+        // Arrow keys to navigate options
+        if (isArrowUp(key)) {
+          confirmOptionIndex = Math.max(0, confirmOptionIndex - 1);
           updateDetails();
-        } else if (key.name === "return" || key.name === "enter") {
-          confirmAddRepo();
+          return;
         }
-      } 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
+        if (isArrowDown(key)) {
+          confirmOptionIndex = Math.min(2, confirmOptionIndex + 1);
+          updateDetails();
+          return;
+        }
+
+        return;
+      }
+
+      // Normal input mode handling
+
+      // Enter to enter confirmation mode or continue
+      if (isEnter(key)) {
+        if (currentInput.trim() && currentValidRepo) {
+          enterConfirmMode();
+        } 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);
     };
 
     renderer.keyInput.on("keypress", handleKeypress);
     updateDetails();
+    updateReposList();
+    updateFooter();
   });
 }