gitforest 0.1.0

package/src/components/ProjectItem.tsx

@@ -0,0 +1,143 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Project } from "../types/index.ts";
+
+interface ProjectItemProps {
+  project: Project;
+  isSelected: boolean;
+  isCursor: boolean;
+}
+
+/**
+ * Get status icon for a project
+ */
+function getStatusIcon(project: Project): { icon: string; color: string } {
+  if (project.type === "non-git") {
+    return { icon: "-", color: "gray" };
+  }
+
+  if (project.type === "git-submodule") {
+    return { icon: "○", color: "magenta" };
+  }
+
+  if (!project.status) {
+    return { icon: "?", color: "gray" };
+  }
+
+  if (project.status.isDirty) {
+    return { icon: "●", color: "yellow" };
+  }
+
+  return { icon: "✓", color: "green" };
+}
+
+/**
+ * Format sync status badges
+ */
+function getSyncBadges(project: Project): React.ReactNode[] {
+  const badges: React.ReactNode[] = [];
+
+  if (!project.status) return badges;
+
+  if (project.status.isAhead && project.status.unpushedCommits > 0) {
+    badges.push(
+      <Text key="ahead" color="blue">
+        ↑{project.status.unpushedCommits}
+      </Text>
+    );
+  }
+
+  if (project.status.isBehind && project.status.unpulledCommits > 0) {
+    badges.push(
+      <Text key="behind" color="magenta">
+        ↓{project.status.unpulledCommits}
+      </Text>
+    );
+  }
+
+  if (!project.status.hasRemote && project.type === "git") {
+    badges.push(
+      <Text key="noremote" color="gray">
+        no-remote
+      </Text>
+    );
+  }
+
+  return badges;
+}
+
+/**
+ * Format the last activity date
+ */
+function formatLastActivity(date: Date | null | undefined): string {
+  if (!date) return "";
+
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+  if (days === 0) return "today";
+  if (days === 1) return "yesterday";
+  if (days < 7) return `${days}d ago`;
+  if (days < 30) return `${Math.floor(days / 7)}w ago`;
+  if (days < 365) return `${Math.floor(days / 30)}mo ago`;
+  return `${Math.floor(days / 365)}y ago`;
+}
+
+export function ProjectItem({ project, isSelected, isCursor }: ProjectItemProps) {
+  const { icon, color } = getStatusIcon(project);
+  const syncBadges = getSyncBadges(project);
+  const lastActivity = formatLastActivity(project.status?.lastLocalCommit);
+
+  const bgColor = isCursor ? "blue" : undefined;
+  const textColor = isCursor ? "white" : undefined;
+
+  return (
+    <Box>
+      {/* Cursor indicator */}
+      <Box width={2}>
+        <Text color={textColor} backgroundColor={bgColor}>{isCursor ? ">" : " "}</Text>
+      </Box>
+
+      {/* Selection checkbox */}
+      <Box width={4}>
+        <Text color={isSelected ? "green" : textColor} backgroundColor={bgColor}>
+          {isSelected ? "[x]" : "[ ]"}
+        </Text>
+      </Box>
+
+      {/* Status icon */}
+      <Box width={3}>
+        <Text color={isCursor ? textColor : color} backgroundColor={bgColor}>{icon}</Text>
+      </Box>
+
+      {/* Project name */}
+      <Box flexGrow={1}>
+        <Text color={textColor} backgroundColor={bgColor} bold={isCursor}>
+          {project.name}
+        </Text>
+        {project.status?.currentBranch && (
+          <Text color={isCursor ? textColor : "cyan"} backgroundColor={bgColor}> ⎇ {project.status.currentBranch}</Text>
+        )}
+        {project.type === "git-submodule" && (
+          <Text color={isCursor ? textColor : "gray"} backgroundColor={bgColor}> (sub)</Text>
+        )}
+        {project.projectMarker && project.type === "non-git" && (
+          <Text color={isCursor ? textColor : "gray"} backgroundColor={bgColor}> [{project.projectMarker}]</Text>
+        )}
+      </Box>
+
+      {/* Sync badges */}
+      <Box width={12} gap={1}>
+        {syncBadges.map((badge, i) => (
+          <Text key={i} backgroundColor={bgColor}>{badge}</Text>
+        ))}
+      </Box>
+
+      {/* Last activity */}
+      <Box width={12} justifyContent="flex-end">
+        <Text color={isCursor ? textColor : "gray"} backgroundColor={bgColor}>{lastActivity}</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/ProjectList.tsx

@@ -0,0 +1,90 @@
+import { Box, Text } from "ink";
+import { Spinner } from "@inkjs/ui";
+import { UnifiedProjectItem } from "./UnifiedProjectItem.tsx";
+import { ColumnHeader, ColumnSeparator } from "./ColumnHeader.tsx";
+import { useStore, useFilteredUnifiedRepos } from "../state/store.tsx";
+
+interface ProjectListProps {
+  height?: number;
+}
+
+export function ProjectList({ height = 20 }: ProjectListProps) {
+  const { state } = useStore();
+  const { cursorIndex, selectedIndices, isLoading, sortBy, sortDirection } = state;
+  const filteredRepos = useFilteredUnifiedRepos();
+
+  if (isLoading) {
+    return (
+      <Box flexDirection="column" alignItems="center" justifyContent="center" height={height}>
+        <Spinner label="Scanning projects..." />
+      </Box>
+    );
+  }
+
+  if (filteredRepos.length === 0) {
+    return (
+      <Box flexDirection="column">
+        {/* Always show headers */}
+        <ColumnHeader sortBy={sortBy} sortDirection={sortDirection} />
+        <ColumnSeparator />
+        <Box flexDirection="column" alignItems="center" justifyContent="center" height={height - 2}>
+          <Text color="gray">No repositories found</Text>
+          {state.filterText && (
+            <Text color="gray">Try a different filter</Text>
+          )}
+          {state.viewMode === "github" && !state.githubRepos.length && (
+            <>
+              {state.githubError ? (
+                <Text color="red">GitHub error: {state.githubError}</Text>
+              ) : (
+                <Text color="yellow">Set GITHUB_TOKEN to see GitHub repos</Text>
+              )}
+            </>
+          )}
+        </Box>
+      </Box>
+    );
+  }
+
+  // Reserve space for header (2 lines: header + separator)
+  const listHeight = height - 2;
+  
+  // Calculate visible range with scroll offset
+  const visibleCount = Math.min(listHeight, filteredRepos.length);
+  let startIndex = Math.max(0, cursorIndex - Math.floor(visibleCount / 2));
+
+  // Adjust if we're near the end
+  if (startIndex + visibleCount > filteredRepos.length) {
+    startIndex = Math.max(0, filteredRepos.length - visibleCount);
+  }
+
+  const visibleRepos = filteredRepos.slice(startIndex, startIndex + visibleCount);
+
+  return (
+    <Box flexDirection="column">
+      {/* Persistent column headers */}
+      <ColumnHeader sortBy={sortBy} sortDirection={sortDirection} />
+      <ColumnSeparator />
+      
+      {/* Repository list */}
+      {visibleRepos.map((repo, idx) => {
+        const realIndex = startIndex + idx;
+        return (
+          <UnifiedProjectItem
+            key={repo.id}
+            repo={repo}
+            isSelected={selectedIndices.has(realIndex)}
+            isCursor={realIndex === cursorIndex}
+          />
+        );
+      })}
+
+      {/* Scroll indicator at bottom */}
+      {startIndex + visibleCount < filteredRepos.length && (
+        <Box>
+          <Text color="gray">    ↓ {filteredRepos.length - startIndex - visibleCount} more below</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/components/RepoDetailModal.tsx

@@ -0,0 +1,367 @@
+import { useState, useEffect } from "react";
+import { Box, Text, useInput, useStdout } from "ink";
+import type { UnifiedRepo, CommandConfig } from "../types/index.ts";
+import { MarkdownRenderer } from "./MarkdownRenderer.tsx";
+
+export interface RepoDetailModalProps {
+  repo: UnifiedRepo;
+  readmeContent: string | null;
+  readmeLoading: boolean;
+  readmeError: string | null;
+  scrollOffset: number;
+  commands?: CommandConfig[];
+  onClose: () => void;
+  onAction: (action: string) => void;
+  onScroll: (offset: number) => void;
+  onCommand?: (command: CommandConfig) => void;
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+
+export function RepoDetailModal({
+  repo,
+  readmeContent,
+  readmeLoading,
+  readmeError,
+  scrollOffset,
+  commands = [],
+  onClose,
+  onAction,
+  onScroll,
+  onCommand,
+}: RepoDetailModalProps) {
+  const { stdout } = useStdout();
+  const [dimensions, setDimensions] = useState({ width: 80, height: 24 });
+  const [selectedSection, setSelectedSection] = useState<"actions" | "readme">("actions");
+
+  useEffect(() => {
+    if (stdout) {
+      const updateDimensions = () => {
+        setDimensions({
+          width: stdout.columns || 80,
+          height: stdout.rows || 24,
+        });
+      };
+
+      updateDimensions();
+      stdout.on("resize", updateDimensions);
+      return () => {
+        stdout.off("resize", updateDimensions);
+      };
+    }
+  }, [stdout]);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onClose();
+      return;
+    }
+
+    if (input === "j" || key.downArrow) {
+      if (selectedSection === "readme" && readmeContent) {
+        onScroll(scrollOffset + 1);
+      }
+      return;
+    }
+
+    if (input === "k" || key.upArrow) {
+      if (selectedSection === "readme" && readmeContent) {
+        onScroll(Math.max(0, scrollOffset - 1));
+      }
+      return;
+    }
+
+    if (input === "\t" || key.tab) {
+      setSelectedSection(selectedSection === "actions" ? "readme" : "actions");
+      return;
+    }
+
+    if (selectedSection === "actions") {
+      if (key.return) {
+        if (canClone) {
+          onAction("clone");
+        } else {
+          onAction("primary");
+        }
+        return;
+      }
+
+      switch (input) {
+        case "p":
+          if (hasLocal) onAction("push");
+          break;
+        case "P":
+          if (hasLocal) onAction("pull");
+          break;
+        case "f":
+          if (hasLocal) onAction("fetch");
+          break;
+        case "o":
+          onAction("browser");
+          break;
+        case "d":
+          if (hasLocal) onAction("editor");
+          break;
+        default:
+          // Check if it's a custom command key
+          if (onCommand && commands.length > 0) {
+            const command = commands.find((c) => c.key === input);
+            if (command) {
+              onCommand(command);
+            }
+          }
+          break;
+      }
+    }
+  });
+
+  const maxWidth = Math.min(100, dimensions.width - 4);
+  const maxHeight = dimensions.height - 4;
+  const readmeHeight = Math.max(10, maxHeight - 20);
+
+  const githubInfo = repo.github;
+  const localInfo = repo.local;
+  const status = localInfo?.status;
+
+  // Derive local path from multiple sources for robustness
+  const localPath = repo.localPath || localInfo?.path;
+
+  // Determine if we have local and remote presence
+  const hasLocal = !!(localPath || repo.source === "local" || repo.source === "both");
+  const hasRemote = !!(githubInfo?.htmlUrl || repo.source === "github" || repo.source === "both");
+
+  // Action availability based on state
+  const canClone = !hasLocal && hasRemote;
+  const canPush = hasLocal && !!(status?.isAhead && status.unpushedCommits > 0);
+  const canPull = hasLocal && !!(status?.hasRemote && status.unpulledCommits > 0);
+  const canFetch = hasLocal && !!status?.hasRemote;
+  const canOpenBrowser = hasRemote && !!githubInfo?.htmlUrl;
+  const canOpenEditor = hasLocal && !!localPath;
+
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="cyan"
+      paddingX={1}
+      paddingY={1}
+      width={maxWidth}
+      height={maxHeight}
+    >
+      {/* Header */}
+      <Box justifyContent="center" marginBottom={1}>
+        <Text bold color="cyan">
+          {githubInfo?.fullName || repo.name}
+        </Text>
+      </Box>
+
+      {/* Repository Info */}
+      <Box flexDirection="column" marginBottom={1}>
+        <Box justifyContent="space-between" flexDirection="row" gap={2}>
+          <Box flexDirection="column" gap={1}>
+            {githubInfo && (
+              <Box gap={1}>
+                <Text color="cyan">☁ GitHub</Text>
+                <Text color="magenta">{githubInfo.fullName}</Text>
+              </Box>
+            )}
+            {localInfo && (
+              <Box gap={1}>
+                <Text color="green">💻 Local</Text>
+                <Text color="blue">{localInfo.path}</Text>
+              </Box>
+            )}
+          </Box>
+          <Box flexDirection="column" gap={1} alignItems="flex-end">
+            {githubInfo && (
+              <Box gap={1}>
+                {githubInfo.isPrivate && <Text color="yellow">🔒 Private</Text>}
+                <Text color="yellow">★{githubInfo.stargazersCount || 0}</Text>
+                <Text color="yellow">🍴{githubInfo.forksCount || 0}</Text>
+              </Box>
+            )}
+            {status && (
+              <Box gap={1}>
+                <Text color="magenta">⎇ {status.currentBranch}</Text>
+                {localInfo?.type === "git-submodule" && (
+                  <Text color="yellow">(submodule)</Text>
+                )}
+                {githubInfo && (
+                  <Text color="gray">{formatSize(githubInfo.size)}</Text>
+                )}
+              </Box>
+            )}
+          </Box>
+        </Box>
+      </Box>
+
+      {/* Status Section */}
+      {status && (
+        <Box
+          borderStyle="round"
+          borderColor="gray"
+          paddingX={1}
+          paddingY={1}
+          marginBottom={1}
+          flexDirection="column"
+          gap={1}
+        >
+          <Box gap={2} flexWrap="wrap">
+            <Text color={status.isDirty ? "red" : "green"}>
+              {status.isDirty ? "● Dirty" : "○ Clean"}
+            </Text>
+            <Text color="yellow">{status.modifiedCount} modified</Text>
+            {status.stagedCount > 0 && (
+              <Text color="green">{status.stagedCount} staged</Text>
+            )}
+            {status.untrackedCount > 0 && (
+              <Text color="gray">{status.untrackedCount} untracked</Text>
+            )}
+          </Box>
+          <Box gap={2} flexWrap="wrap">
+            <Text color={status.isAhead ? "yellow" : "gray"}>
+              ↑ {status.unpushedCommits} to push
+            </Text>
+            <Text color={status.isBehind ? "yellow" : "gray"}>
+              ↓ {status.unpulledCommits} to pull
+            </Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Actions Section */}
+      <Box
+        borderStyle="round"
+        borderColor={selectedSection === "actions" ? "cyan" : "gray"}
+        paddingX={1}
+        paddingY={1}
+        marginBottom={1}
+        flexDirection="column"
+        gap={1}
+      >
+        <Box gap={3} flexWrap="wrap">
+          <Box gap={1}>
+            <Text color={canClone ? "yellow" : "gray"}>[Enter]</Text>
+            <Text dimColor={!canClone}>Clone</Text>
+            {canClone && <Text dimColor> (picker)</Text>}
+          </Box>
+          <Box gap={1}>
+            <Text color={canPush ? "yellow" : "gray"}>[p]</Text>
+            <Text dimColor={!canPush}>Push</Text>
+          </Box>
+          <Box gap={1}>
+            <Text color={canPull ? "yellow" : "gray"}>[P]</Text>
+            <Text dimColor={!canPull}>Pull</Text>
+          </Box>
+          <Box gap={1}>
+            <Text color={canFetch ? "yellow" : "gray"}>[f]</Text>
+            <Text dimColor={!canFetch}>Fetch</Text>
+          </Box>
+          <Box gap={1}>
+            <Text color={canOpenBrowser ? "yellow" : "gray"}>[o]</Text>
+            <Text dimColor={!canOpenBrowser}>Open Browser</Text>
+          </Box>
+          <Box gap={1}>
+            <Text color={canOpenEditor ? "yellow" : "gray"}>[d]</Text>
+            <Text dimColor={!canOpenEditor}>Editor</Text>
+          </Box>
+        </Box>
+
+        {!hasLocal && (
+          <Box>
+            <Text dimColor>Clone to enable push, pull, fetch, and editor.</Text>
+          </Box>
+        )}
+        {commands.length > 0 && (
+          <Box gap={1} flexWrap="wrap">
+            {commands.slice(0, 5).map((cmd) => (
+              <Box key={cmd.key} gap={0}>
+                <Text color="magenta">[{cmd.key}]</Text>
+                <Text>{cmd.name}</Text>
+                <Text> </Text>
+              </Box>
+            ))}
+            {commands.length > 5 && (
+              <Text dimColor>+{commands.length - 5} more</Text>
+            )}
+          </Box>
+        )}
+      </Box>
+
+      {/* README Section */}
+      <Box
+        flexDirection="column"
+        flexGrow={1}
+        borderStyle="round"
+        borderColor={selectedSection === "readme" ? "cyan" : "gray"}
+        paddingX={1}
+        paddingY={1}
+        minHeight={readmeHeight}
+      >
+        <Box marginBottom={1}>
+          <Text bold color="cyan">
+            README.md
+          </Text>
+        </Box>
+
+        <Box flexDirection="column" flexGrow={1}>
+          {readmeLoading && (
+            <Text color="yellow">Loading README...</Text>
+          )}
+
+          {readmeError && (
+            <Text color="red">Error: {readmeError}</Text>
+          )}
+
+          {readmeContent && !readmeLoading && !readmeError && (
+            <MarkdownRenderer
+              content={readmeContent}
+              maxHeight={readmeHeight - 2}
+              scrollOffset={scrollOffset}
+            />
+          )}
+
+          {!readmeContent && !readmeLoading && !readmeError && (
+            <Text dimColor>No README available</Text>
+          )}
+        </Box>
+      </Box>
+
+      {/* Footer */}
+      <Box justifyContent="space-between" marginTop={1}>
+        <Box gap={1}>
+          {githubInfo?.topics && githubInfo.topics.length > 0 && (
+            <>
+              <Text>Topics:</Text>
+              <Text color="blue">{githubInfo.topics.join(", ")}</Text>
+            </>
+          )}
+          {githubInfo?.license && (
+            <>
+              <Text>License:</Text>
+              <Text color="blue">{githubInfo.license}</Text>
+            </>
+          )}
+          {githubInfo?.language && (
+            <>
+              <Text>Language:</Text>
+              <Text color="blue">{githubInfo.language}</Text>
+            </>
+          )}
+        </Box>
+
+        <Box gap={2}>
+          <Text dimColor>[Esc] Close</Text>
+          <Text dimColor>[j/k] Scroll</Text>
+          <Text dimColor>[Tab] Next section</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}