gitforest 0.1.0

package/src/components/ColumnHeader.tsx

@@ -0,0 +1,128 @@
+import { Box, Text } from "ink";
+import { NF, COL } from "./UnifiedProjectItem.tsx";
+import { palette } from "../ui/theme.ts";
+import type { SortField, SortDirection } from "../types/index.ts";
+
+interface ColumnHeaderProps {
+  sortBy?: SortField;
+  sortDirection?: SortDirection;
+}
+
+/**
+ * Column headers for the project list
+ * Matches column widths from UnifiedProjectItem exactly
+ * Highlights the currently sorted column
+ */
+export function ColumnHeader({ sortBy = 'status', sortDirection = 'desc' }: ColumnHeaderProps) {
+  // Helper to get header styling based on sort state
+  const getStyle = (field: SortField) => {
+    const isSorted = sortBy === field;
+    return {
+      color: isSorted ? palette.text.warning : palette.text.muted,
+      bold: isSorted,
+      underline: isSorted,
+      arrow: isSorted ? (sortDirection === 'desc' ? '↓' : '↑') : '',
+      bgColor: undefined,
+    };
+  };
+
+  const formatHeader = (
+    label: string,
+    style: ReturnType<typeof getStyle>,
+    width: number,
+    padStart = false
+  ) => {
+    const text = `${label}${style.arrow ? ` ${style.arrow}` : ''}`;
+    const padded = padStart ? text.padStart(width) : text.padEnd(width);
+    return (
+      <Text
+        color={style.color}
+        bold={style.bold}
+        underline={style.underline}
+        backgroundColor={style.bgColor}
+      >
+        {padded}
+      </Text>
+    );
+  };
+
+  const nameStyle = getStyle('name');
+  const statusStyle = getStyle('status');
+  const branchStyle = getStyle('branch');
+  const syncStyle = getStyle('sync');
+  const langStyle = getStyle('language');
+  const starsStyle = getStyle('stars');
+  const forksStyle = getStyle('forks');
+  const activityStyle = getStyle('lastActivity');
+  const sizeStyle = getStyle('size');
+
+  return (
+    <Box>
+      {/* Cursor space */}
+      <Text color="gray">{' '}</Text>
+      
+      {/* Selection "Sel " */}
+      <Text color="gray">{'Sel '.padEnd(COL.sel)}</Text>
+      
+      {/* Status header - just icon */}
+      <Text color={statusStyle.color} bold={statusStyle.bold} backgroundColor={statusStyle.bgColor}>
+        {`${statusStyle.arrow || '●'}`.padEnd(COL.status)}
+      </Text>
+      
+      {/* Source icon + Name header */}
+      <Text color="gray">{NF.repo}</Text>
+      <Text color="gray">{' '}</Text>
+      {formatHeader('Name', nameStyle, COL.name - 2)}
+      
+      {/* Gap */}
+      <Text>{'  '}</Text>
+      
+      {/* Branch header */}
+      {formatHeader(`${NF.git_branch_oct} Branch`, branchStyle, COL.branch)}
+      
+      {/* Gap */}
+      <Text>{'  '}</Text>
+      
+      {/* Sync header */}
+      {formatHeader('Sync', syncStyle, COL.sync)}
+      
+      {/* Gap */}
+      <Text>{'  '}</Text>
+      
+      {/* Language icon */}
+      {formatHeader(NF.code, langStyle, COL.lang, true)}
+      
+      {/* Gap */}
+      <Text>{'  '}</Text>
+      
+      {/* Stars header */}
+      {formatHeader(NF.star, starsStyle, COL.stars, true)}
+      
+      {/* Gap */}
+      <Text>{'  '}</Text>
+      
+      {/* Forks header */}
+      {formatHeader(NF.repo_forked, forksStyle, COL.forks, true)}
+      
+      {/* Gap */}
+      <Text>{'  '}</Text>
+      
+      {/* Updated header */}
+      {formatHeader(NF.clock, activityStyle, COL.updated, true)}
+      
+      {/* Gap */}
+      <Text>{'  '}</Text>
+      
+      {/* Size header */}
+      {formatHeader(NF.database, sizeStyle, COL.size, true)}
+    </Box>
+  );
+}
+
+/**
+ * Separator line under headers
+ * No longer needed - cleaner without it
+ */
+export function ColumnSeparator() {
+  return null;
+}

package/src/components/CommandPalette.tsx

@@ -0,0 +1,120 @@
+import { Box, Text } from "ink";
+import type { CommandConfig, UnifiedRepo } from "../types/index.ts";
+
+export interface CommandPaletteProps {
+  commands: CommandConfig[];
+  selectedRepos: UnifiedRepo[];
+  onClose: () => void;
+}
+
+export function CommandPalette({
+  commands,
+  selectedRepos,
+  onClose: _onClose,
+}: CommandPaletteProps) {
+  // onClose is handled by parent through keybindings
+  void _onClose;
+  const repoCount = selectedRepos.length;
+  const repoNames = selectedRepos.slice(0, 3).map((r) => r.name);
+  const moreCount = repoCount > 3 ? repoCount - 3 : 0;
+
+  // Get the first local path for context
+  const targetPath = selectedRepos[0]?.localPath || selectedRepos[0]?.local?.path;
+
+  if (commands.length === 0) {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor="cyan"
+        paddingX={2}
+        paddingY={1}
+      >
+        <Box marginBottom={1}>
+          <Text bold color="cyan">
+            Command Palette
+          </Text>
+        </Box>
+
+        <Text dimColor>
+          No custom commands configured.
+        </Text>
+        <Text dimColor>
+          Add commands to your config file:
+        </Text>
+        <Box marginTop={1} flexDirection="column">
+          <Text color="gray">commands:</Text>
+          <Text color="gray">  - name: "Open in Editor"</Text>
+          <Text color="gray">    key: "e"</Text>
+          <Text color="gray">    command: "code ."</Text>
+        </Box>
+
+        <Box marginTop={1}>
+          <Text dimColor>[Esc] Close</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="cyan"
+      paddingX={2}
+      paddingY={1}
+    >
+      {/* Header */}
+      <Box marginBottom={1}>
+        <Text bold color="cyan">
+          Command Palette
+        </Text>
+      </Box>
+
+      {/* Target info */}
+      <Box marginBottom={1} flexDirection="column">
+        <Box gap={1}>
+          <Text>Target:</Text>
+          <Text color="green">
+            {repoNames.join(", ")}
+            {moreCount > 0 && <Text dimColor> +{moreCount} more</Text>}
+          </Text>
+        </Box>
+        {targetPath && (
+          <Box gap={1}>
+            <Text dimColor>Path:</Text>
+            <Text dimColor>{targetPath}</Text>
+          </Box>
+        )}
+      </Box>
+
+      {/* Commands list */}
+      <Box flexDirection="column" gap={0}>
+        <Box marginBottom={1}>
+          <Text bold underline>
+            Available Commands
+          </Text>
+        </Box>
+        {commands.map((cmd) => (
+          <Box key={cmd.key} gap={1}>
+            <Box width={6}>
+              <Text color="yellow">[{cmd.key}]</Text>
+            </Box>
+            <Box width={24}>
+              <Text>{cmd.name}</Text>
+            </Box>
+            <Text dimColor>{cmd.command}</Text>
+            {cmd.confirm && <Text color="red"> (confirm)</Text>}
+            {cmd.background && <Text color="blue"> (bg)</Text>}
+          </Box>
+        ))}
+      </Box>
+
+      {/* Footer */}
+      <Box marginTop={1} gap={2}>
+        <Text dimColor>[key] Execute</Text>
+        <Text dimColor>[Esc] Close</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/ConfirmDialog.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+
+export interface ConfirmDialogProps {
+  title: string;
+  message: string;
+  items: string[];
+  showVisibilityToggle?: boolean;
+  defaultVisibility?: "private" | "public";
+  onConfirm: (options: { visibility?: "private" | "public" }) => void;
+  onCancel: () => void;
+}
+
+export function ConfirmDialog({
+  title,
+  message,
+  items,
+  showVisibilityToggle = false,
+  defaultVisibility = "private",
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) {
+  const [visibility, setVisibility] = useState<"private" | "public">(
+    defaultVisibility
+  );
+
+  useInput((input, key) => {
+    if (input === "y" || input === "Y") {
+      onConfirm({ visibility: showVisibilityToggle ? visibility : undefined });
+    } else if (input === "n" || input === "N" || key.escape) {
+      onCancel();
+    } else if (showVisibilityToggle && (input === "v" || input === "V")) {
+      setVisibility((prev) => (prev === "private" ? "public" : "private"));
+    }
+  });
+
+  const maxItems = 5;
+  const displayItems = items.slice(0, maxItems);
+  const remainingCount = items.length - maxItems;
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="yellow"
+      paddingX={2}
+      paddingY={1}
+      width={50}
+    >
+      <Box marginBottom={1}>
+        <Text bold color="yellow">
+          {title}
+        </Text>
+      </Box>
+
+      <Box marginBottom={1}>
+        <Text>{message}</Text>
+      </Box>
+
+      <Box flexDirection="column" marginBottom={1}>
+        {displayItems.map((item) => (
+          <Text key={item} color="cyan">
+            {"  • "}
+            {item}
+          </Text>
+        ))}
+        {remainingCount > 0 && (
+          <Text dimColor>{"  "}...and {remainingCount} more</Text>
+        )}
+      </Box>
+
+      {showVisibilityToggle && (
+        <Box marginBottom={1}>
+          <Text>Visibility: </Text>
+          <Text
+            bold
+            color={visibility === "private" ? "green" : "yellow"}
+          >
+            {visibility === "private" ? "[●] Private" : "[ ] Private"}
+          </Text>
+          <Text> </Text>
+          <Text
+            bold
+            color={visibility === "public" ? "green" : "yellow"}
+          >
+            {visibility === "public" ? "[●] Public" : "[ ] Public"}
+          </Text>
+          <Text dimColor> (v to toggle)</Text>
+        </Box>
+      )}
+
+      <Box>
+        <Text dimColor>Press </Text>
+        <Text color="green" bold>
+          y
+        </Text>
+        <Text dimColor> to confirm, </Text>
+        <Text color="red" bold>
+          n
+        </Text>
+        <Text dimColor> to cancel</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,128 @@
+import React, { Component, type ReactNode } from "react";
+import { Box, Text, useInput } from "ink";
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onRetry?: () => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: React.ErrorInfo | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  override componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("Error caught by ErrorBoundary:", error);
+    console.error("Error info:", errorInfo);
+    
+    this.setState({
+      error,
+      errorInfo,
+    });
+  }
+
+  handleRetry = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+    
+    if (this.props.onRetry) {
+      this.props.onRetry();
+    }
+  };
+
+  override render() {
+    if (this.state.hasError && this.state.error) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <ErrorFallback 
+          error={this.state.error} 
+          onRetry={this.handleRetry}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+interface ErrorFallbackProps {
+  error: Error;
+  onRetry: () => void;
+}
+
+function ErrorFallback({ error, onRetry }: ErrorFallbackProps) {
+  useInput(() => {
+    onRetry();
+  });
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="red"
+      paddingX={2}
+      paddingY={1}
+    >
+      <Box marginBottom={1}>
+        <Text bold color="red">
+          ⚠️  An Error Occurred
+        </Text>
+      </Box>
+
+      <Box marginBottom={1}>
+        <Text color="yellow" bold>
+          Error: 
+        </Text>
+        <Text>{error.message}</Text>
+      </Box>
+
+      {error.stack && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Box marginBottom={1}>
+            <Text dimColor>
+              Stack trace (first 5 lines):
+            </Text>
+          </Box>
+          <Box flexDirection="column">
+            {error.stack.split('\n').slice(0, 5).map((line, index) => (
+              <Text key={index} dimColor>
+                {line.trim()}
+              </Text>
+            ))}
+          </Box>
+        </Box>
+      )}
+
+      <Box marginTop={1}>
+        <Text dimColor>
+          Press any key to retry
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/FilterBar.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { TextInput } from "@inkjs/ui";
+import { useStore } from "../state/store.tsx";
+import { setFilter, setMode } from "../state/actions.ts";
+import { ViewModeIndicator } from "./ViewModeIndicator.tsx";
+import { palette } from "../ui/theme.ts";
+
+export function FilterBar() {
+  const { state, dispatch } = useStore();
+  const {
+    filterText,
+    mode,
+    sortBy,
+    sortDirection,
+    viewMode,
+    isLoadingGitHub,
+    githubError,
+    quickFilter,
+    languageFilter,
+  } = state;
+
+  const isFilterMode = mode === "filter";
+  const sortArrow = sortDirection === "desc" ? "↓" : "↑";
+
+  return (
+    <Box gap={2} alignItems="center" flexWrap="wrap">
+      {/* View mode indicator */}
+      <ViewModeIndicator 
+        mode={viewMode} 
+        isLoadingGitHub={isLoadingGitHub}
+        githubError={githubError}
+      />
+
+      {/* Filter input */}
+      <Box>
+        <Text color={isFilterMode ? "cyan" : "gray"}>Filter: </Text>
+        {isFilterMode ? (
+          <TextInput
+            key={filterText} // Force remount when filter text changes externally
+            defaultValue={filterText}
+            onChange={(value) => dispatch(setFilter(value))}
+            placeholder="type to filter..."
+          />
+        ) : (
+          <Text color={filterText ? "white" : "gray"}>
+            {filterText || "(press / to filter)"}
+          </Text>
+        )}
+      </Box>
+
+      {/* Active filters summary */}
+      <Box gap={1} alignItems="center" flexWrap="wrap">
+        {quickFilter !== "all" && (
+          <Text color={palette.text.warning}>[{quickFilter}]</Text>
+        )}
+        {languageFilter && (
+          <Text color={palette.text.info}>Lang:{languageFilter}</Text>
+        )}
+      </Box>
+
+      {/* Sort indicator */}
+      <Box flexGrow={1} justifyContent="flex-end" gap={1} alignItems="center">
+        <Text color={palette.text.muted} bold>
+          Sort: {sortBy} {sortArrow}
+        </Text>
+        <Text color="gray">(press s to change)</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/FilterOptionsOverlay.tsx

@@ -0,0 +1,131 @@
+import { Box, Text } from "ink";
+import { useStore } from "../state/store.tsx";
+
+export function FilterOptionsOverlay() {
+  const { state } = useStore();
+  const { quickFilter, viewMode, sortBy, languageFilter } = state;
+  
+  // Highlight the currently active filter
+  const isActive = (filter: string) => quickFilter === filter;
+  
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="cyan"
+      paddingX={2}
+      paddingY={1}
+    >
+      {/* Title */}
+      <Box marginBottom={1}>
+        <Text bold color="cyan">Filter Options</Text>
+      </Box>
+      
+      {/* Quick Filters section */}
+      <Box marginBottom={1}>
+        <Text bold underline>Quick Filters:</Text>
+      </Box>
+      <Box flexDirection="column" marginBottom={1}>
+        <Box gap={2}>
+          <FilterKey num="0" label="All repos" active={isActive("all")} />
+          <FilterKey num="1" label="Dirty (uncommitted)" active={isActive("dirty")} />
+        </Box>
+        <Box gap={2}>
+          <FilterKey num="2" label="Unpushed commits" active={isActive("unpushed")} />
+          <FilterKey num="3" label="No remote configured" active={isActive("no-remote")} />
+        </Box>
+        <Box gap={2}>
+          <FilterKey num="4" label="GitHub-only" active={isActive("github-only")} />
+          <FilterKey num="5" label="Local-only" active={isActive("local-only")} />
+        </Box>
+        <Box gap={2}>
+          <FilterKey num="6" label="Private repos" active={isActive("private")} />
+          <FilterKey num="7" label="Public repos" active={isActive("public")} />
+        </Box>
+        <Box gap={2}>
+          <FilterKey num="8" label="Archived" active={isActive("archived")} />
+          <FilterKey num="9" label="Forks" active={isActive("forks")} />
+        </Box>
+      </Box>
+      
+      {/* View Modes */}
+      <Box marginBottom={1}>
+        <Text bold underline>View Modes:</Text>
+        <Text dimColor> (Tab to cycle)</Text>
+      </Box>
+      <Box marginBottom={1}>
+        <ViewModeOption mode="local" current={viewMode} />
+        <Text dimColor> → </Text>
+        <ViewModeOption mode="github" current={viewMode} />
+        <Text dimColor> → </Text>
+        <ViewModeOption mode="combined" current={viewMode} />
+      </Box>
+      
+      {/* Sort */}
+      <Box marginBottom={1}>
+        <Text bold underline>Sort:</Text>
+        <Text dimColor> (s to cycle)</Text>
+      </Box>
+      <Box marginBottom={1}>
+        <SortOption field="status" current={sortBy} />
+        <Text dimColor> → </Text>
+        <SortOption field="name" current={sortBy} />
+        <Text dimColor> → </Text>
+        <SortOption field="lastActivity" current={sortBy} />
+        <Text dimColor> → </Text>
+        <SortOption field="stars" current={sortBy} />
+        <Text dimColor> → </Text>
+        <SortOption field="size" current={sortBy} />
+      </Box>
+      
+      {/* Search */}
+      <Box marginBottom={1}>
+        <Text bold underline>Search:</Text>
+      </Box>
+      <Box marginBottom={1}>
+        <Text color="yellow">/</Text>
+        <Text>  Start text search (by name, description, path)</Text>
+      </Box>
+      
+      {/* Language Filter */}
+      <Box marginBottom={1}>
+        <Text bold underline>Language Filter:</Text>
+      </Box>
+      <Box marginBottom={1}>
+        <Text>Type language name to filter (e.g., typescript, rust)</Text>
+      </Box>
+      <Box marginBottom={1}>
+        <Text>Current: </Text>
+        <Text color={languageFilter ? "cyan" : "gray"}>
+          {languageFilter || "[none]"}
+        </Text>
+      </Box>
+      
+      {/* Footer */}
+      <Box marginTop={1}>
+        <Text dimColor>Press any key to close</Text>
+      </Box>
+    </Box>
+  );
+}
+
+// Helper components
+function FilterKey({ num, label, active }: { num: string; label: string; active: boolean }) {
+  return (
+    <Box width={24}>
+      <Text color="yellow">{num}</Text>
+      <Text color={active ? "cyan" : undefined}> {label}</Text>
+      {active && <Text color="green"> ✓</Text>}
+    </Box>
+  );
+}
+
+function ViewModeOption({ mode, current }: { mode: string; current: string }) {
+  const isActive = mode === current;
+  return <Text color={isActive ? "cyan" : "gray"}>{mode}</Text>;
+}
+
+function SortOption({ field, current }: { field: string; current: string }) {
+  const isActive = field === current;
+  return <Text color={isActive ? "cyan" : "gray"}>{field}</Text>;
+}