gitforest 0.1.0

package/src/components/onboarding/DirectoriesStep.tsx

@@ -0,0 +1,847 @@
+import { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+import { existsSync, statSync, readdirSync } from "fs";
+import { homedir } from "os";
+import { join, dirname, basename, relative } from "path";
+
+export interface DirectoriesStepProps {
+  directories: Array<{ path: string; maxDepth: number; label?: string }>;
+  onComplete: (directories: Array<{ path: string; maxDepth: number; label?: string }>) => void;
+  onBack: () => void;
+  onCancel: () => void;
+}
+
+interface DirectoryItem {
+  path: string;
+  maxDepth: number;
+  label?: string;
+  valid: boolean;
+  error?: string;
+}
+
+interface InputState {
+  maxDepth: string;
+  label: string;
+  showLabelInput: boolean;
+}
+
+interface SimplifiedBrowserState {
+  // Current working directory
+  currentPath: string;
+
+  // Contents of currentPath
+  entries: Array<{ name: string; fullPath: string }>;
+
+  // What user is typing
+  inputBuffer: string;
+
+  // Completions for current input
+  completions: string[];
+
+  // Index for Tab cycling
+  completionIndex: number;
+
+  // Scroll offset for folder list
+  scrollOffset: number;
+
+  // Selected folder index in the filtered list
+  selectedFolderIndex: number;
+
+  error: string | null;
+}
+
+export function validateDirectoryPath(path: string): { valid: boolean; error?: string } {
+  if (!path) {
+    return { valid: false, error: "Path is required" };
+  }
+
+  const expanded = path.replace(/^~/, homedir());
+
+  if (!existsSync(expanded)) {
+    return { valid: false, error: "Path does not exist" };
+  }
+
+  try {
+    const stat = statSync(expanded);
+    if (!stat.isDirectory()) {
+      return { valid: false, error: "Not a directory" };
+    }
+  } catch {
+    return { valid: false, error: "Cannot access path" };
+  }
+
+  return { valid: true };
+}
+
+/**
+ * Read directory contents, filtering to directories only
+ */
+export function readDirectory(path: string): Array<{ name: string; fullPath: string }> {
+  try {
+    const entries = readdirSync(path, { withFileTypes: true });
+    return entries
+      .filter((e) => {
+        if (e.name.startsWith(".")) return false;
+
+        // Regular directory check
+        if (e.isDirectory()) return true;
+
+        // Check if symlink points to a directory
+        if (e.isSymbolicLink()) {
+          try {
+            const fullPath = join(path, e.name);
+            return statSync(fullPath).isDirectory();
+          } catch {
+            return false;
+          }
+        }
+
+        return false;
+      })
+      .map((e) => ({
+        name: e.name,
+        fullPath: join(path, e.name),
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Get path completions based on input
+ */
+export function getCompletions(input: string, currentPath: string): string[] {
+  // Strip trailing slash for proper dirname/basename handling
+  const normalizedInput = input.endsWith("/") ? input.slice(0, -1) : input;
+  const expanded = normalizedInput.replace(/^~/, homedir());
+
+  // If input starts with /, it's an absolute path
+  if (input.startsWith("/")) {
+    const dir = dirname(expanded || "/");
+    const prefix = basename(expanded);
+    const entries = readDirectory(dir);
+    return entries
+      .filter((e) => e.name.toLowerCase().startsWith(prefix.toLowerCase()))
+      .map((e) => join(dir, e.name));
+  }
+
+  // Relative or home-based path
+  const basePath = expanded.startsWith("/") ? "/" : currentPath;
+  const dir = join(basePath, dirname(expanded || "."));
+  const prefix = basename(expanded);
+
+  try {
+    const entries = readDirectory(dir);
+    return entries
+      .filter((e) => e.name.toLowerCase().startsWith(prefix.toLowerCase()))
+      .map((e) => join(dir, e.name));
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Format path for display (replace home with ~)
+ */
+export function formatDisplayPath(path: string): string {
+  const home = homedir();
+  if (path.startsWith(home)) {
+    return "~" + path.slice(home.length);
+  }
+  return path;
+}
+
+/**
+ * Hybrid directory browser with typing + navigation
+ */
+interface HybridDirectoryBrowserProps {
+  startingPath: string;
+  onSelect: (path: string) => void;
+  onCancel: () => void;
+}
+
+export function HybridDirectoryBrowser({ startingPath, onSelect, onCancel }: HybridDirectoryBrowserProps) {
+  const MAX_DISPLAY_FOLDERS = 10;
+
+  const [browser, setBrowser] = useState<SimplifiedBrowserState>({
+    currentPath: startingPath,
+    entries: readDirectory(startingPath),
+    inputBuffer: "~",
+    completions: [],
+    completionIndex: 0,
+    scrollOffset: 0,
+    selectedFolderIndex: 0,
+    error: null,
+  });
+
+  // Update completions when input changes
+  useEffect(() => {
+    if (browser.inputBuffer.length > 0) {
+      const matches = getCompletions(browser.inputBuffer, browser.currentPath);
+      setBrowser((prev) => ({
+        ...prev,
+        completions: matches,
+        completionIndex: 0,
+      }));
+    } else {
+      setBrowser((prev) => ({
+        ...prev,
+        completions: [],
+        completionIndex: 0,
+      }));
+    }
+  }, [browser.inputBuffer, browser.currentPath]);
+
+  // Update currentPath when input is a valid directory
+  useEffect(() => {
+    if (browser.inputBuffer.length > 0) {
+      // Expand ~ for validation
+      const expanded = browser.inputBuffer.replace(/^~/, homedir());
+      // Check if it's a valid directory
+      if (existsSync(expanded) && statSync(expanded).isDirectory()) {
+        setBrowser((prev) => ({
+          ...prev,
+          currentPath: expanded,
+          entries: readDirectory(expanded),
+        }));
+      }
+    } else {
+      // When input is empty, default to home directory
+      setBrowser((prev) => ({
+        ...prev,
+        currentPath: startingPath,
+        entries: readDirectory(startingPath),
+      }));
+    }
+  }, [browser.inputBuffer, startingPath]);
+
+  // Reset scroll offset and selection when currentPath changes
+  useEffect(() => {
+    setBrowser((prev) => ({
+      ...prev,
+      scrollOffset: 0,
+      selectedFolderIndex: 0,
+    }));
+  }, [browser.currentPath]);
+
+  useInput((input, key) => {
+    // Esc: go back to parent directory or cancel
+    if (key.escape) {
+      // If input ends with / (navigated into a directory), go back to parent
+      if (browser.inputBuffer.endsWith("/")) {
+        const parentPath = dirname(browser.currentPath);
+        setBrowser((prev) => ({
+          ...prev,
+          inputBuffer: "",
+          currentPath: parentPath,
+          entries: readDirectory(parentPath),
+          completions: [],
+          scrollOffset: 0,
+          selectedFolderIndex: 0,
+          error: null,
+        }));
+        return;
+      }
+
+      // If there's other input beyond ~, clear it (back to ~)
+      if (browser.inputBuffer.length > 1) {
+        setBrowser((prev) => ({
+          ...prev,
+          inputBuffer: "~",
+          completions: [],
+          selectedFolderIndex: 0,
+          scrollOffset: 0,
+          error: null,
+        }));
+        return;
+      }
+
+      // Otherwise cancel
+      onCancel();
+      return;
+    }
+
+    // Tab: cycle completions and update current path
+    if (key.tab && browser.completions.length > 0) {
+      const nextIndex = (browser.completionIndex + 1) % browser.completions.length;
+      const completedPath = browser.completions[nextIndex]!;
+
+      // Check if it's a directory and add trailing slash
+      const expanded = completedPath.replace(/^~/, homedir());
+      const isDirectory = existsSync(expanded) && statSync(expanded).isDirectory();
+
+      // Use ~ format for home directory paths in input (for backspace-ability)
+      const home = homedir();
+      const inputPath = completedPath.startsWith(home)
+        ? "~" + completedPath.slice(home.length)
+        : completedPath;
+      const inputWithSlash = isDirectory ? inputPath + "/" : inputPath;
+
+      setBrowser((prev) => ({
+        ...prev,
+        completionIndex: nextIndex,
+        inputBuffer: inputWithSlash,
+        currentPath: completedPath,
+        entries: readDirectory(completedPath),
+        scrollOffset: 0,
+        selectedFolderIndex: 0,
+        error: null,
+      }));
+      return;
+    }
+
+    // Compute filtered entries for navigation (only filter if not a path)
+    const isPathInput = browser.inputBuffer.includes("/");
+    const filteredEntries = (browser.inputBuffer.length > 0 && !isPathInput)
+      ? browser.entries.filter(e =>
+          e.name.toLowerCase().includes(browser.inputBuffer.toLowerCase())
+        )
+      : browser.entries;
+
+    // j/k or arrow keys for navigating filtered folder list
+    if (input === "j" || key.downArrow) {
+      const maxIndex = Math.max(filteredEntries.length - 1, 0);
+      setBrowser((prev) => ({
+        ...prev,
+        selectedFolderIndex: Math.min(prev.selectedFolderIndex + 1, maxIndex),
+        // Auto-scroll if selection goes below visible area
+        scrollOffset: Math.max(prev.scrollOffset,
+          Math.min(prev.selectedFolderIndex + 1 - MAX_DISPLAY_FOLDERS + 1,
+            Math.max(filteredEntries.length - MAX_DISPLAY_FOLDERS, 0))),
+      }));
+      return;
+    }
+
+    if (input === "k" || key.upArrow) {
+      setBrowser((prev) => ({
+        ...prev,
+        selectedFolderIndex: Math.max(prev.selectedFolderIndex - 1, 0),
+        // Auto-scroll if selection goes above visible area
+        scrollOffset: Math.min(prev.scrollOffset, prev.selectedFolderIndex - 1),
+      }));
+      return;
+    }
+
+    // Space or Enter: select folder from filtered list or navigate current path
+    if (input === " " || key.return) {
+      // If there's a selected folder in filtered list, navigate into it
+      if (filteredEntries.length > 0 && browser.selectedFolderIndex < filteredEntries.length) {
+        const selectedEntry = filteredEntries[browser.selectedFolderIndex]!;
+        // Use ~ format for home directory paths in input
+        const home = homedir();
+        const inputPath = selectedEntry.fullPath.startsWith(home)
+          ? "~" + selectedEntry.fullPath.slice(home.length)
+          : selectedEntry.fullPath;
+        setBrowser((prev) => ({
+          ...prev,
+          inputBuffer: inputPath + "/",
+          currentPath: selectedEntry.fullPath,
+          entries: readDirectory(selectedEntry.fullPath),
+          completions: [],
+          scrollOffset: 0,
+          selectedFolderIndex: 0,
+          error: null,
+        }));
+        return;
+      }
+
+      // Otherwise, accept current path
+      if (key.return) {
+        const targetPath = browser.inputBuffer.replace(/\/$/, "") || browser.currentPath;
+        const validation = validateDirectoryPath(targetPath);
+        if (validation.valid) {
+          onSelect(targetPath);
+        } else {
+          setBrowser((prev) => ({
+            ...prev,
+            error: validation.error || "Invalid path",
+          }));
+        }
+        return;
+      }
+
+      // Space on current path with no selection
+      onSelect(browser.currentPath);
+      return;
+    }
+
+    // Ctrl+U: clear input back to ~
+    if (key.ctrl && input === 'u') {
+      setBrowser((prev) => ({
+        ...prev,
+        inputBuffer: "~",
+        completions: [],
+        selectedFolderIndex: 0,
+        scrollOffset: 0,
+        error: null,
+      }));
+      return;
+    }
+
+    // Backspace/delete
+    if ((key as any).backspace || (key as any).delete) {
+      if (browser.inputBuffer.length > 0) {
+        setBrowser((prev) => ({
+          ...prev,
+          inputBuffer: prev.inputBuffer.slice(0, -1),
+          selectedFolderIndex: 0,
+          scrollOffset: 0,
+          error: null,
+        }));
+      }
+      return;
+    }
+
+    // Regular character input
+    if (input.length === 1 && /[a-zA-Z0-9_\/\.~-]/.test(input)) {
+      setBrowser((prev) => ({
+        ...prev,
+        inputBuffer: prev.inputBuffer + input,
+        selectedFolderIndex: 0,
+        scrollOffset: 0,
+        error: null,
+      }));
+      return;
+    }
+  });
+
+  return (
+    <Box flexDirection="column" flexGrow={1}>
+      {/* Text input */}
+      <Box marginBottom={1}>
+        <Box gap={1}>
+          <Text color="yellow">{"> "}</Text>
+          <Text color="yellow">
+            {browser.inputBuffer}
+          </Text>
+          <Text color="yellow" inverse>_</Text>
+        </Box>
+      </Box>
+
+      {/* Error message */}
+      {browser.error && (
+        <Box marginBottom={1}>
+          <Text color="red">{browser.error}</Text>
+        </Box>
+      )}
+
+      {/* Directory list - filtered and scrollable */}
+      <Box flexDirection="column" marginBottom={1}>
+        <Text dimColor>Folders in {formatDisplayPath(browser.currentPath)}:</Text>
+        {(() => {
+          // Only filter by name if input doesn't contain slashes (not a path)
+          const isPathInput = browser.inputBuffer.includes("/");
+          const filteredEntries = (browser.inputBuffer.length > 0 && !isPathInput)
+            ? browser.entries.filter(e =>
+                e.name.toLowerCase().includes(browser.inputBuffer.toLowerCase())
+              )
+            : browser.entries;
+
+          if (filteredEntries.length === 0) {
+            return <Text dimColor>No matching folders</Text>;
+          }
+
+          const visibleEntries = filteredEntries.slice(
+            browser.scrollOffset,
+            browser.scrollOffset + MAX_DISPLAY_FOLDERS
+          );
+
+          return (
+            <>
+              {browser.scrollOffset > 0 && (
+                <Text dimColor>▲ {browser.scrollOffset} more above</Text>
+              )}
+              {visibleEntries.map((item, idx) => {
+                const globalIndex = browser.scrollOffset + idx;
+                const isSelected = globalIndex === browser.selectedFolderIndex;
+                return (
+                  <Text key={item.fullPath}>
+                    {isSelected ? <Text color="cyan">●</Text> : <Text dimColor>○</Text>}
+                    {" "}{item.name}/
+                  </Text>
+                );
+              })}
+              {browser.scrollOffset + MAX_DISPLAY_FOLDERS < filteredEntries.length && (
+                <Text dimColor>▼ {filteredEntries.length - browser.scrollOffset - MAX_DISPLAY_FOLDERS} more below</Text>
+              )}
+            </>
+          );
+        })()}
+      </Box>
+
+      {/* Help text */}
+      <Box flexDirection="column" marginTop={1}>
+        <Box gap={2}>
+          <Text dimColor>Tab:</Text>
+          <Text dimColor>complete</Text>
+          <Text dimColor>j/k:</Text>
+          <Text dimColor>navigate</Text>
+          <Text dimColor>Space:</Text>
+          <Text dimColor>navigate folder</Text>
+        </Box>
+        <Box gap={2}>
+          <Text dimColor>Enter:</Text>
+          <Text dimColor>select</Text>
+          <Text dimColor>Esc:</Text>
+          <Text dimColor>go back</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export function DirectoriesStep({
+  directories,
+  onComplete,
+  onBack,
+  onCancel,
+}: DirectoriesStepProps) {
+  const [items, setItems] = useState<DirectoryItem[]>(
+    directories.map((d) => ({
+      ...d,
+      valid: true,
+    }))
+  );
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [mode, setMode] = useState<"list" | "browse" | "maxDepth" | "label">("list");
+  const [input, setInput] = useState<InputState>({
+    maxDepth: "2",
+    label: "",
+    showLabelInput: false,
+  });
+  const [selectedPath, setSelectedPath] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useInput((inputStr, key) => {
+    if (mode === "browse") {
+      // Handled by HybridDirectoryBrowser
+      return;
+    }
+
+    if (mode === "maxDepth" || mode === "label") {
+      handleDepthOrLabelInput(inputStr, key);
+      return;
+    }
+
+    // List mode
+    if (key.escape || inputStr === "q" || inputStr === "Q") {
+      onCancel();
+      return;
+    }
+
+    if ((key as any).backspace || (key as any).delete) {
+      onBack();
+      return;
+    }
+
+    if (key.return) {
+      if (items.length > 0) {
+        handleComplete();
+      }
+      return;
+    }
+
+    // Navigate items
+    if (inputStr === "j" || key.downArrow) {
+      setSelectedIndex((i) => Math.min(i + 1, Math.max(items.length - 1, 0)));
+      return;
+    }
+
+    if (inputStr === "k" || key.upArrow) {
+      setSelectedIndex((i) => Math.max(i - 1, 0));
+      return;
+    }
+
+    // Add directory
+    if (inputStr === "a" || inputStr === "A") {
+      setMode("browse");
+      setError(null);
+      return;
+    }
+
+    // Delete selected
+    if ((inputStr === "d" || inputStr === "D") && items.length > 0) {
+      setItems((prev) => prev.filter((_, i) => i !== selectedIndex));
+      if (selectedIndex >= items.length - 1) {
+        setSelectedIndex(Math.max(items.length - 2, 0));
+      }
+      return;
+    }
+
+    // Skip with defaults
+    if (inputStr === "s" || inputStr === "S") {
+      handleSkip();
+      return;
+    }
+
+    // Edit selected
+    if ((inputStr === "e" || inputStr === "E") && items.length > 0) {
+      const item = items[selectedIndex];
+      if (item) {
+        setSelectedPath(item.path);
+        setMode("maxDepth");
+        setInput({
+          maxDepth: String(item.maxDepth),
+          label: item.label || "",
+          showLabelInput: !!item.label,
+        });
+        setError(null);
+      }
+      return;
+    }
+  });
+
+  const handleDepthOrLabelInput = (inputStr: string, key: { return: boolean; escape: boolean; tab: boolean }) => {
+    if (key.escape) {
+      // In maxDepth mode, go back to browser
+      if (mode === "maxDepth") {
+        setMode("browse");
+        setError(null);
+        return;
+      }
+      // In label mode, go back to list
+      setMode("list");
+      setSelectedPath(null);
+      setInput({ maxDepth: "2", label: "", showLabelInput: false });
+      setError(null);
+      return;
+    }
+
+    if (key.return) {
+      if (mode === "maxDepth") {
+        const depth = parseInt(input.maxDepth, 10);
+        if (isNaN(depth) || depth < 0 || depth > 10) {
+          setError("Max depth must be between 0 and 10");
+          return;
+        }
+        setMode("label");
+        setError(null);
+      } else if (mode === "label") {
+        // Add or update the directory
+        if (!selectedPath) return;
+
+        const newItem: DirectoryItem = {
+          path: selectedPath,
+          maxDepth: parseInt(input.maxDepth, 10),
+          label: input.label || undefined,
+          valid: true,
+        };
+
+        setItems((prev) => {
+          const existingIndex = prev.findIndex((i) => i.path === selectedPath);
+          if (existingIndex >= 0) {
+            const updated = [...prev];
+            updated[existingIndex] = newItem;
+            return updated;
+          }
+          return [...prev, newItem];
+        });
+
+        setMode("list");
+        setSelectedPath(null);
+        setInput({ maxDepth: "2", label: "", showLabelInput: false });
+        setError(null);
+      }
+      return;
+    }
+
+    if (key.tab && mode === "maxDepth") {
+      setInput((prev) => ({ ...prev, showLabelInput: !prev.showLabelInput }));
+      return;
+    }
+
+    if (mode === "maxDepth") {
+      if ((key as any).backspace || (key as any).delete) {
+        setInput((prev) => ({ ...prev, maxDepth: prev.maxDepth.slice(0, -1) }));
+      } else if (/^[0-9]$/.test(inputStr)) {
+        setInput((prev) => ({ ...prev, maxDepth: prev.maxDepth + inputStr }));
+      }
+    } else if (mode === "label") {
+      if ((key as any).backspace || (key as any).delete) {
+        setInput((prev) => ({ ...prev, label: prev.label.slice(0, -1) }));
+      } else {
+        setInput((prev) => ({ ...prev, label: prev.label + inputStr }));
+      }
+    }
+  };
+
+  const handleBrowserSelect = (path: string) => {
+    setSelectedPath(path);
+    setMode("maxDepth");
+    setInput({ maxDepth: "2", label: "", showLabelInput: false });
+  };
+
+  const handleBrowserCancel = () => {
+    setMode("list");
+    setError(null);
+  };
+
+  const handleSkip = () => {
+    const defaultDir: DirectoryItem = {
+      path: `${homedir()}/projects`,
+      maxDepth: 2,
+      label: "Projects",
+      valid: true,
+    };
+    onComplete([{ path: defaultDir.path, maxDepth: defaultDir.maxDepth, label: defaultDir.label }]);
+  };
+
+  const handleComplete = () => {
+    const validItems = items.filter((i) => i.valid);
+    if (validItems.length === 0) {
+      setError("Add at least one directory");
+      return;
+    }
+    onComplete(
+      validItems.map((i) => ({
+        path: i.path,
+        maxDepth: i.maxDepth,
+        label: i.label,
+      }))
+    );
+  };
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="cyan"
+      paddingX={2}
+      paddingY={1}
+      width={80}
+    >
+      {/* Title */}
+      <Box marginBottom={1}>
+        <Text bold color="cyan">
+          Configure Project Directories
+        </Text>
+      </Box>
+
+      {/* Instructions */}
+      {mode === "list" && (
+        <Box marginBottom={1}>
+          <Text>Add the directories containing your git projects.</Text>
+        </Box>
+      )}
+
+      {/* Browser mode */}
+      {mode === "browse" && (
+        <HybridDirectoryBrowser
+          startingPath={homedir()}
+          onSelect={handleBrowserSelect}
+          onCancel={handleBrowserCancel}
+        />
+      )}
+
+      {/* MaxDepth input */}
+      {mode === "maxDepth" && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text>Max scan depth (0-10, default 2):</Text>
+          <Box gap={1}>
+            <Text color="yellow">{"> "}</Text>
+            <Text color="yellow">{input.maxDepth}</Text>
+            <Text color="yellow" inverse>_</Text>
+          </Box>
+          <Text dimColor>Path: {formatDisplayPath(selectedPath || "")}</Text>
+          <Text dimColor>Press Enter to confirm, Esc to cancel</Text>
+        </Box>
+      )}
+
+      {/* Label input */}
+      {mode === "label" && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text>Label (optional, press Enter to skip):</Text>
+          <Box gap={1}>
+            <Text color="yellow">{"> "}</Text>
+            <Text color="yellow">{input.label}</Text>
+            <Text color="yellow" inverse>_</Text>
+          </Box>
+          <Text dimColor>Path: {formatDisplayPath(selectedPath || "")}</Text>
+          <Text dimColor>Press Enter to confirm, Esc to cancel</Text>
+        </Box>
+      )}
+
+      {/* List mode */}
+      {mode === "list" && (
+        <>
+          {/* Current directories */}
+          {items.length > 0 && (
+            <Box flexDirection="column" marginBottom={1}>
+              <Text dimColor>Current directories:</Text>
+              {items.map((item, index) => (
+                <Box key={item.path} gap={2}>
+                  <Text color={index === selectedIndex ? "cyan" : "gray"}>
+                    {index === selectedIndex ? "●" : "○"}
+                  </Text>
+                  <Text color={index === selectedIndex ? "white" : "gray"}>
+                    {item.label || item.path}
+                  </Text>
+                  <Text dimColor>
+                    (depth: {item.maxDepth})
+                  </Text>
+                </Box>
+              ))}
+            </Box>
+          )}
+
+          {/* Empty state */}
+          {items.length === 0 && (
+            <Box flexDirection="column" marginBottom={1}>
+              <Text dimColor>No directories added yet.</Text>
+              <Text dimColor>Press 'a' to browse your filesystem.</Text>
+            </Box>
+          )}
+
+          {/* Error message */}
+          {error && (
+            <Box marginBottom={1}>
+              <Text color="red">{error}</Text>
+            </Box>
+          )}
+
+          {/* Actions */}
+          <Box gap={2} marginTop={1}>
+            <Text dimColor>Shortcuts:</Text>
+            <Text color="green" bold>
+              a
+            </Text>
+            <Text dimColor>Add</Text>
+            {items.length > 0 && (
+              <>
+                <Text color="green" bold>
+                  d
+                </Text>
+                <Text dimColor>Delete</Text>
+                <Text color="green" bold>
+                  e
+                </Text>
+                <Text dimColor>Edit</Text>
+              </>
+            )}
+            <Text color="green" bold>
+              s
+            </Text>
+            <Text dimColor>Skip (defaults)</Text>
+          </Box>
+          <Box gap={2}>
+            <Text dimColor>j/k</Text>
+            <Text dimColor>Navigate</Text>
+            <Text color="green" bold>
+              Enter
+            </Text>
+            <Text dimColor>Continue</Text>
+            <Text color="red" bold>
+              Backspace
+            </Text>
+            <Text dimColor>Back</Text>
+            <Text color="red" bold>
+              q
+            </Text>
+            <Text dimColor>Quit</Text>
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+}