gitforest 0.1.0

package/src/components/HelpOverlay.tsx

@@ -0,0 +1,120 @@
+import { Box, Text } from "ink";
+import type { CommandConfig } from "../types/index.ts";
+
+interface HelpOverlayProps {
+  commands?: CommandConfig[];
+}
+
+const HELP_SECTIONS = [
+  {
+    title: "Navigation",
+    keys: [
+      { key: "j / ↓", desc: "Move down" },
+      { key: "k / ↑", desc: "Move up" },
+      { key: "g", desc: "Go to top" },
+      { key: "G", desc: "Go to bottom" },
+    ],
+  },
+  {
+    title: "Selection",
+    keys: [
+      { key: "space", desc: "Toggle selection" },
+      { key: "a", desc: "Select all / deselect all" },
+    ],
+  },
+  {
+    title: "View Mode",
+    keys: [
+      { key: "Tab", desc: "Cycle view (local/github/all)" },
+      { key: "0", desc: "Show all" },
+      { key: "1", desc: "Show dirty" },
+      { key: "2", desc: "Show unpushed" },
+      { key: "3", desc: "Show no-remote" },
+      { key: "4", desc: "Show GitHub-only" },
+      { key: "5", desc: "Show local-only" },
+    ],
+  },
+  {
+    title: "Git Operations",
+    keys: [
+      { key: "p", desc: "Push selected" },
+      { key: "P", desc: "Pull all repos" },
+      { key: "f", desc: "Fetch all remotes" },
+      { key: "i", desc: "Init git in selected" },
+    ],
+  },
+  {
+    title: "GitHub",
+    keys: [
+      { key: "D", desc: "Clone GitHub repos" },
+      { key: "c", desc: "Create GitHub repo" },
+      { key: "C", desc: "Setup (init + create + push)" },
+      { key: "A", desc: "Archive GitHub repo" },
+    ],
+  },
+  {
+    title: "General",
+    keys: [
+      { key: "/", desc: "Filter projects" },
+      { key: "s", desc: "Cycle sort field" },
+      { key: "x", desc: "Command palette" },
+      { key: "r", desc: "Refresh" },
+      { key: "?", desc: "Toggle help" },
+      { key: "Esc", desc: "Cancel / exit mode" },
+      { key: "q", desc: "Quit" },
+    ],
+  },
+];
+
+export function HelpOverlay({ commands = [] }: HelpOverlayProps) {
+  // Build sections including custom commands if configured
+  const sections = [...HELP_SECTIONS];
+  
+  if (commands.length > 0) {
+    sections.push({
+      title: "Custom Commands",
+      keys: commands.map((cmd) => ({
+        key: cmd.key,
+        desc: cmd.name,
+      })),
+    });
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="cyan"
+      paddingX={2}
+      paddingY={1}
+    >
+      <Box marginBottom={1}>
+        <Text bold color="cyan">
+          Keyboard Shortcuts
+        </Text>
+      </Box>
+
+      <Box flexDirection="row" flexWrap="wrap" gap={4}>
+        {sections.map((section) => (
+          <Box key={section.title} flexDirection="column" width={30}>
+            <Text bold underline>
+              {section.title}
+            </Text>
+            {section.keys.map(({ key, desc }) => (
+              <Box key={key} gap={1}>
+                <Box width={14}>
+                  <Text color="yellow">{key}</Text>
+                </Box>
+                <Text>{desc}</Text>
+              </Box>
+            ))}
+          </Box>
+        ))}
+      </Box>
+
+      <Box marginTop={1}>
+        <Text dimColor>Press any key to close</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/Layout.tsx

@@ -0,0 +1,379 @@
+import { Box, Text, useStdout } from "ink";
+import { StatusBar } from "./StatusBar.tsx";
+import { FilterBar } from "./FilterBar.tsx";
+import { ProjectList } from "./ProjectList.tsx";
+import { HelpOverlay } from "./HelpOverlay.tsx";
+import { ConfirmDialog } from "./ConfirmDialog.tsx";
+import { CloneDialog } from "./CloneDialog.tsx";
+import { RepoDetailModal } from "./RepoDetailModal.tsx";
+import { CommandPalette } from "./CommandPalette.tsx";
+import { useStore, useFilteredUnifiedRepos, useSelectedUnifiedRepos } from "../state/store.tsx";
+import { useConfirmDialogActions } from "../hooks/useConfirmDialogActions.ts";
+import { startAction, endAction, setMessage } from "../state/actions.ts";
+import { executeCommand } from "../operations/commands.ts";
+import { errorToString } from "../utils/errors.ts";
+import { UI } from "../constants.ts";
+import type { GitforestConfig, CommandConfig } from "../types/index.ts";
+
+interface LayoutProps {
+  config: GitforestConfig;
+  onRefresh: () => Promise<void>;
+  onClone?: (repos: any[], targetDir: string, useSSH: boolean) => Promise<void>;
+}
+
+export function Layout({ config, onRefresh, onClone }: LayoutProps) {
+  const { state, dispatch } = useStore();
+  const { mode, confirmDialog, cloneDialog } = state;
+  const filteredRepos = useFilteredUnifiedRepos();
+  const selectedRepos = useSelectedUnifiedRepos();
+  const { stdout } = useStdout();
+
+  const { handleConfirm, handleCancel } = useConfirmDialogActions({
+    config,
+    onRefresh,
+  });
+
+  // Calculate available height
+  const terminalHeight = stdout?.rows ?? UI.DEFAULT_TERMINAL_HEIGHT;
+  const listHeight = terminalHeight - UI.LAYOUT_OVERHEAD;
+
+  // Calculate stats for status bar
+  const dirtyCount = filteredRepos.filter((r) => r.local?.status?.isDirty).length;
+  const unpushedCount = filteredRepos.filter((r) => r.local?.status?.isAhead).length;
+  const localOnlyCount = filteredRepos.filter((r) => r.source === "local").length;
+  const githubOnlyCount = filteredRepos.filter((r) => r.source === "github").length;
+  const syncedCount = filteredRepos.filter((r) => r.source === "both").length;
+
+  // Clone dialog handlers
+  const handleCloneConfirm = async (targetDir: string, useSSH: boolean) => {
+    dispatch({ type: "HIDE_CLONE_DIALOG" });
+    if (onClone && cloneDialog) {
+      await onClone(cloneDialog.repos, targetDir, useSSH);
+    }
+  };
+
+  const handleCloneCancel = () => {
+    dispatch({ type: "HIDE_CLONE_DIALOG" });
+  };
+
+  const handleCloneSelectDir = (index: number) => {
+    dispatch({ type: "UPDATE_CLONE_DIALOG", payload: { selectedDirIndex: index } });
+  };
+
+  const handleCloneToggleSSH = () => {
+    if (cloneDialog) {
+      dispatch({ type: "UPDATE_CLONE_DIALOG", payload: { useSSH: !cloneDialog.useSSH } });
+    }
+  };
+
+  // Show help overlay
+  if (mode === "help") {
+    return (
+      <Box flexDirection="column" height={terminalHeight}>
+        <HelpOverlay commands={config.commands} />
+      </Box>
+    );
+  }
+
+  // Show command palette
+  if (mode === "command-palette") {
+    return (
+      <Box flexDirection="column" height={terminalHeight} justifyContent="center" alignItems="center">
+        <CommandPalette
+          commands={config.commands}
+          selectedRepos={selectedRepos}
+          onClose={() => dispatch({ type: "SET_MODE", payload: "normal" })}
+        />
+      </Box>
+    );
+  }
+
+  // Show confirm dialog
+  if (mode === "confirm" && confirmDialog) {
+    return (
+      <Box flexDirection="column" height={terminalHeight} justifyContent="center" alignItems="center">
+        <ConfirmDialog
+          title={confirmDialog.title}
+          message={confirmDialog.message}
+          items={confirmDialog.items}
+          showVisibilityToggle={confirmDialog.showVisibilityToggle}
+          defaultVisibility={config.github.defaultVisibility}
+          onConfirm={handleConfirm}
+          onCancel={handleCancel}
+        />
+      </Box>
+    );
+  }
+
+  // Show clone dialog
+  if (mode === "clone" && cloneDialog) {
+    return (
+      <Box flexDirection="column" height={terminalHeight} justifyContent="center" alignItems="center">
+        <CloneDialog
+          repos={cloneDialog.repos}
+          directories={cloneDialog.directories}
+          selectedDirIndex={cloneDialog.selectedDirIndex}
+          useSSH={cloneDialog.useSSH}
+          onConfirm={handleCloneConfirm}
+          onCancel={handleCloneCancel}
+          onSelectDir={handleCloneSelectDir}
+          onToggleSSH={handleCloneToggleSSH}
+        />
+      </Box>
+    );
+  }
+
+  // Show detail modal
+  if (mode === "detail" && state.detailModal) {
+    const handleDetailClose = () => {
+      dispatch({ type: "HIDE_DETAIL_MODAL" });
+    };
+
+    const handleDetailAction = async (action: string) => {
+      const repo = state.detailModal?.repo;
+      if (!repo) return;
+
+      switch (action) {
+        case "clone": {
+          dispatch({
+            type: "SHOW_CLONE_DIALOG",
+            payload: {
+              repos: [repo],
+              directories: config.directories,
+              selectedDirIndex: 0,
+              useSSH: true,
+            },
+          });
+          return;
+        }
+        case "primary": {
+          if (repo.localPath) {
+            // Fallthrough to editor logic
+            await handleDetailAction("editor");
+          } else if (repo.github?.htmlUrl) {
+            await handleDetailAction("browser");
+          }
+          return;
+        }
+        case "push":
+          if (repo.local && repo.local.status?.isAhead) {
+            dispatch(startAction("Pushing"));
+            // Push logic would be implemented here
+            dispatch(endAction());
+          }
+          break;
+        case "pull":
+          if (repo.local && repo.local.status?.hasRemote) {
+            dispatch(startAction("Pulling"));
+            // Pull logic would be implemented here
+            dispatch(endAction());
+          }
+          break;
+        case "fetch":
+          if (repo.local && repo.local.status?.hasRemote) {
+            dispatch(startAction("Fetching"));
+            // Fetch logic would be implemented here
+            dispatch(endAction());
+          }
+          break;
+        case "browser":
+          if (repo.github?.htmlUrl) {
+            try {
+              Bun.spawn(["open", repo.github.htmlUrl], {
+                stdout: "ignore",
+                stderr: "ignore",
+              });
+            } catch (error) {
+              dispatch(setMessage(`Failed to open browser: ${errorToString(error)}`));
+            }
+          } else {
+            dispatch(setMessage("No GitHub URL available for this repository"));
+          }
+          break;
+        case "editor":
+          if (repo.localPath) {
+            // Resolve editor: Project > Global > Env > Default
+            let editor = config.editor;
+
+            // Check for project-specific editor
+            if (repo.localPath) {
+              const matchedDir = config.directories.find(d =>
+                repo.localPath!.startsWith(d.path.replace(/^~/, process.env.HOME || ""))
+              );
+              if (matchedDir?.editor) {
+                editor = matchedDir.editor;
+              }
+            }
+
+            if (!editor) {
+              editor = process.env.EDITOR || "code";
+            }
+
+            // Split command and args once
+            const parts = editor.split(" ");
+            const cmd = parts[0]!;
+            const args = parts.slice(1);
+
+            // Check if it's a known terminal editor
+            const terminalEditors = ["vim", "nvim", "nano", "vi", "emacs", "hx", "helix"];
+            const isTerminal = terminalEditors.includes(cmd);
+
+            try {
+              if (isTerminal) {
+                // Suspends Ink's raw mode to allow the editor to take over
+                if (process.stdin.setRawMode) {
+                  process.stdin.setRawMode(false);
+                }
+
+                // Spawn with inherit to take over terminal
+                // IMPORTANT: Use split cmd and args
+                const proc = Bun.spawn([cmd, ...args, repo.localPath], {
+                  stdin: "inherit",
+                  stdout: "inherit",
+                  stderr: "inherit",
+                });
+
+                await proc.exited;
+
+                // Resume raw mode
+                if (process.stdin.setRawMode) {
+                  process.stdin.setRawMode(true);
+                }
+              } else {
+                // GUI Editor
+
+                // Use 'open' command for macOS GUI editors (VS Code, Cursor) specific optimization
+                if (process.platform === "darwin" && (cmd === "code" || cmd === "cursor")) {
+                  const appName = cmd === "code" ? "Visual Studio Code" : "Cursor";
+
+                  const openArgs = ["open", "-a", appName, repo.localPath];
+                  openArgs.push("--args", "-n"); // Force new window
+
+                  const subprocess = Bun.spawn(openArgs, {
+                    stdin: "ignore",
+                    stdout: "ignore",
+                    stderr: "ignore",
+                  });
+                  subprocess.unref();
+
+                } else {
+                  // Fallback for other GUI editors
+
+                  // Auto-inject -n for code/cursor if not using 'open' strategy or on other platforms
+                  if ((cmd === "code" || cmd === "cursor") && !args.includes("-n") && !args.includes("--new-window")) {
+                    args.push("-n");
+                  }
+
+                  const subprocess = Bun.spawn([cmd, ...args, repo.localPath], {
+                    stdin: "ignore",
+                    stdout: "ignore",
+                    stderr: "ignore",
+                  });
+                  subprocess.unref();
+                }
+              }
+            } catch (error) {
+              dispatch(setMessage(`Failed to open editor: ${errorToString(error)}`));
+              // Ensure raw mode is back if we failed mid-flight
+              if (process.stdin.setRawMode) process.stdin.setRawMode(true);
+            }
+          } else {
+            dispatch(setMessage("No local path available for this repository"));
+          }
+          break;
+      }
+    };
+
+    const handleDetailScroll = (offset: number) => {
+      dispatch({ type: "UPDATE_DETAIL_MODAL", payload: { readmeScrollOffset: offset } });
+    };
+
+    const handleDetailCommand = async (command: CommandConfig) => {
+      const repo = state.detailModal?.repo;
+      if (!repo) return;
+
+      const projectPath = repo.localPath || repo.local?.path;
+      if (!projectPath) {
+        dispatch(setMessage("No local path for this repo"));
+        return;
+      }
+
+      dispatch(startAction(`Running: ${command.name}`));
+      try {
+        const result = await executeCommand(command, projectPath);
+        dispatch(endAction());
+        if (result.success) {
+          const shortOutput = result.output && result.output.length > 50
+            ? result.output.slice(0, 50) + "..."
+            : result.output || "Done";
+          dispatch(setMessage(`${command.name}: ${shortOutput}`));
+        } else {
+          dispatch(setMessage(`${command.name} failed: ${result.error}`));
+        }
+      } catch (error) {
+        dispatch(endAction());
+        dispatch(setMessage(`${command.name} failed: ${error instanceof Error ? error.message : String(error)}`));
+      }
+    };
+
+    return (
+      <Box flexDirection="column" height={terminalHeight}>
+        <RepoDetailModal
+          repo={state.detailModal.repo}
+          readmeContent={state.detailModal.readmeContent}
+          readmeLoading={state.detailModal.readmeLoading}
+          readmeError={state.detailModal.readmeError}
+          scrollOffset={state.detailModal.readmeScrollOffset}
+          commands={config.commands}
+          onClose={handleDetailClose}
+          onAction={handleDetailAction}
+          onScroll={handleDetailScroll}
+          onCommand={handleDetailCommand}
+        />
+      </Box>
+    );
+  }
+
+  // Show filter options overlay
+  if (mode === "filter-options") {
+    return (
+      <Box flexDirection="column" height={terminalHeight}>
+        <Text>Filter Options Overlay - To be implemented</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" height={terminalHeight}>
+      {/* Header */}
+      <Box borderStyle="single" borderBottom borderColor="gray" paddingX={1}>
+        <Text bold color="cyan">
+          gitforest
+        </Text>
+        <Text> - Git Repository Manager</Text>
+      </Box>
+
+      {/* Filter bar */}
+      <Box paddingX={1} paddingY={0}>
+        <FilterBar />
+      </Box>
+
+      {/* Project list */}
+      <Box flexGrow={1} flexDirection="column" paddingX={1}>
+        <ProjectList height={listHeight} />
+      </Box>
+
+      {/* Status bar */}
+      <Box borderStyle="single" borderTop borderColor="gray" paddingX={1}>
+        <StatusBar
+          projectCount={filteredRepos.length}
+          dirtyCount={dirtyCount}
+          unpushedCount={unpushedCount}
+          localOnlyCount={localOnlyCount}
+          githubOnlyCount={githubOnlyCount}
+          syncedCount={syncedCount}
+        />
+      </Box>
+    </Box>
+  );
+}

package/src/components/MarkdownRenderer.tsx

@@ -0,0 +1,127 @@
+import { Box, Text } from 'ink';
+import { parseMarkdown, truncateMarkdown, type MarkdownNode } from '../utils/markdown';
+
+interface MarkdownRendererProps {
+  content: string;
+  maxHeight?: number;
+  scrollOffset?: number;
+}
+
+export function MarkdownRenderer({ content, maxHeight, scrollOffset = 0 }: MarkdownRendererProps): JSX.Element {
+  const nodes = parseMarkdown(content);
+  const displayNodes = maxHeight ? truncateMarkdown(nodes, maxHeight) : nodes;
+  
+  let lineCount = 0;
+  
+  function renderNode(node: MarkdownNode, indentLevel = 0): JSX.Element[] {
+    const indent = '  '.repeat(indentLevel);
+    
+    switch (node.type) {
+      case 'heading':
+        const headingText = node.content || '';
+        if (node.level === 1) {
+          return [
+            <Text key={`h1-${lineCount++}`} bold color="cyan">
+              {headingText}
+            </Text>
+          ];
+        } else if (node.level === 2) {
+          return [
+            <Text key={`h2-${lineCount++}`} bold color="blue">
+              {headingText}
+            </Text>
+          ];
+        } else {
+          return [
+            <Text key={`h${node.level}-${lineCount++}`} bold>
+              {headingText}
+            </Text>
+          ];
+        }
+      
+      case 'paragraph':
+        return [
+          <Text key={`p-${lineCount++}`}>
+            {node.children?.map((child, idx) => renderInline(child, `${lineCount}-${idx}`))}
+          </Text>
+        ];
+      
+      case 'code':
+        return [
+          <Text key={`code-${lineCount++}`} inverse>
+            {node.content || ''}
+          </Text>
+        ];
+      
+      case 'codeblock':
+        return [
+          <Box key={`codeblock-${lineCount++}`} borderStyle="single" borderColor="gray" paddingX={1} marginY={1}>
+            <Text>{node.content || ''}</Text>
+          </Box>
+        ];
+      
+      case 'list':
+        return node.children?.map((item, idx) => (
+          <Text key={`list-${lineCount++}-${idx}`}>
+            {indent}• {item.content || ''}
+          </Text>
+        )) || [];
+      
+      case 'blockquote':
+        return [
+          <Text key={`bq-${lineCount++}`} dimColor>
+            {indent}│ {node.content || ''}
+          </Text>
+        ];
+      
+      case 'hr':
+        return [
+          <Text key={`hr-${lineCount++}`}>
+            {'─'.repeat(80)}
+          </Text>
+        ];
+      
+      default:
+        return [];
+    }
+  }
+  
+  function renderInline(node: MarkdownNode, key: string): JSX.Element {
+    switch (node.type) {
+      case 'text':
+        return <Text key={key}>{node.content || ''}</Text>;
+      
+      case 'bold':
+        return <Text key={key} bold>{node.content || ''}</Text>;
+      
+      case 'italic':
+        return <Text key={key} dimColor>{node.content || ''}</Text>;
+      
+      case 'code':
+        return <Text key={key} inverse>{node.content || ''}</Text>;
+      
+      case 'link':
+        return <Text key={key} color="cyan" underline>{node.content || ''}</Text>;
+      
+      default:
+        return <Text key={key}>{node.content || ''}</Text>;
+    }
+  }
+  
+  // Render all nodes
+  const allLines: JSX.Element[] = [];
+  for (const node of displayNodes) {
+    allLines.push(...renderNode(node));
+  }
+  
+  // Apply scroll offset
+  const visibleLines = scrollOffset > 0 ? allLines.slice(scrollOffset) : allLines;
+  
+  return (
+    <Box flexDirection="column">
+      {visibleLines.map((line, idx) => (
+        <Box key={idx}>{line}</Box>
+      ))}
+    </Box>
+  );
+}

package/src/components/ProgressBar.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+interface ProgressBarProps {
+  label: string;
+  current: number;
+  total: number;
+  width?: number;
+}
+
+/**
+ * Render a progress bar with label and percentage
+ */
+export function ProgressBar({ label, current, total, width = 20 }: ProgressBarProps) {
+  const percent = total > 0 ? Math.round((current / total) * 100) : 0;
+  const filled = Math.round((percent / 100) * width);
+  const empty = width - filled;
+
+  const bar = "█".repeat(filled) + "░".repeat(empty);
+
+  return (
+    <Box gap={1}>
+      <Text color="yellow">{label}</Text>
+      <Text color="cyan">[{bar}]</Text>
+      <Text dimColor>
+        {current}/{total} ({percent}%)
+      </Text>
+    </Box>
+  );
+}
+
+/**
+ * Simple spinner for indeterminate progress
+ */
+export function Spinner({ label }: { label: string }) {
+  const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+  const [frameIndex, setFrameIndex] = React.useState(0);
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setFrameIndex((prev) => (prev + 1) % frames.length);
+    }, 80);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <Box gap={1}>
+      <Text color="yellow">{frames[frameIndex]}</Text>
+      <Text color="yellow">{label}</Text>
+    </Box>
+  );
+}