gitforest 0.1.0

package/src/components/StatusBar.tsx

@@ -0,0 +1,188 @@
+import React, { useState, useEffect, useRef } from "react";
+import { Box, Text } from "ink";
+import { useStore } from "../state/store.tsx";
+import { ProgressBar } from "./ProgressBar.tsx";
+import { palette } from "../ui/theme.ts";
+import type { QuickFilter } from "../types/index.ts";
+
+// Animated spinner for refresh indicator
+function RefreshSpinner() {
+  const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+  const [frameIndex, setFrameIndex] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setFrameIndex((prev) => (prev + 1) % frames.length);
+    }, 80);
+    return () => clearInterval(timer);
+  }, []);
+
+  return <Text color="blue">{frames[frameIndex]} Syncing</Text>;
+}
+
+interface StatusBarProps {
+  projectCount: number;
+  dirtyCount: number;
+  unpushedCount: number;
+  localOnlyCount?: number;
+  githubOnlyCount?: number;
+  syncedCount?: number;
+}
+
+const QUICK_FILTER_LABELS: Record<QuickFilter, string | null> = {
+  all: null,
+  dirty: "dirty",
+  unpushed: "unpushed",
+  "no-remote": "no-remote",
+  "github-only": "github-only",
+  "local-only": "local-only",
+  private: "private",
+  public: "public",
+  archived: "archived",
+  forks: "forks",
+};
+
+export function StatusBar({ 
+  projectCount, 
+  dirtyCount, 
+  unpushedCount,
+  localOnlyCount = 0,
+  githubOnlyCount = 0,
+  syncedCount = 0,
+}: StatusBarProps) {
+  const { state } = useStore();
+  const { 
+    actionInProgress, 
+    actionProgress, 
+    message, 
+    error, 
+    sortBy, 
+    sortDirection, 
+    quickFilter,
+    viewMode,
+    isLoadingGitHub,
+    githubError,
+    isRefreshing,
+    isLoading,
+  } = state;
+
+  // Debounce + hysteresis for spinner: avoid flicker but keep visible for real work
+  const [showRefreshSpinner, setShowRefreshSpinner] = useState(false);
+  const visibleSinceRef = useRef<number | null>(null);
+  const timersRef = useRef<{ show?: ReturnType<typeof setTimeout>; hide?: ReturnType<typeof setTimeout> }>({});
+
+  useEffect(() => {
+    const clearTimers = () => {
+      if (timersRef.current.show) clearTimeout(timersRef.current.show);
+      if (timersRef.current.hide) clearTimeout(timersRef.current.hide);
+      timersRef.current = {};
+    };
+
+    const spinnerActive = actionInProgress || isLoadingGitHub || isRefreshing;
+
+    // Immediate show for explicit actions; delayed show for background loading
+    if (spinnerActive) {
+      clearTimers();
+      if (actionInProgress) {
+        if (!showRefreshSpinner) visibleSinceRef.current = Date.now();
+        setShowRefreshSpinner(true);
+        return;
+      }
+      timersRef.current.show = setTimeout(() => {
+        if (!showRefreshSpinner) visibleSinceRef.current = Date.now();
+        setShowRefreshSpinner(true);
+      }, 400);
+      return () => clearTimers();
+    }
+
+    // spinnerActive is false: hide after minimum visible time (500ms) to prevent flicker
+    clearTimers();
+    const elapsed = visibleSinceRef.current ? Date.now() - visibleSinceRef.current : 0;
+    const remaining = elapsed < 500 ? 500 - elapsed : 0;
+    timersRef.current.hide = setTimeout(() => {
+      setShowRefreshSpinner(false);
+      visibleSinceRef.current = null;
+    }, remaining);
+
+    return () => clearTimers();
+  }, [actionInProgress, isLoadingGitHub, isRefreshing, showRefreshSpinner]);
+
+  const quickFilterLabel = QUICK_FILTER_LABELS[quickFilter];
+  const showLocalStats = viewMode === "local" || viewMode === "combined";
+  const showRemoteStats = viewMode === "github" || viewMode === "combined";
+
+  // Build static segments with separators for stability
+  const segments: { text: string; color?: string }[] = [];
+  segments.push({ text: `${projectCount} repos`, color: palette.text.muted });
+  if (showLocalStats && syncedCount > 0) {
+    segments.push({ text: "•", color: palette.text.muted });
+    segments.push({ text: `${syncedCount} synced`, color: palette.text.info });
+  }
+  if (showLocalStats && localOnlyCount > 0) {
+    segments.push({ text: "•", color: palette.text.muted });
+    segments.push({ text: `${localOnlyCount} local`, color: palette.text.success });
+  }
+  if (showRemoteStats && githubOnlyCount > 0) {
+    segments.push({ text: "•", color: palette.text.muted });
+    segments.push({ text: `${githubOnlyCount} remote`, color: palette.text.muted });
+  }
+  if (showLocalStats && dirtyCount > 0) {
+    segments.push({ text: "•", color: palette.text.muted });
+    segments.push({ text: `${dirtyCount} dirty`, color: palette.text.warning });
+  }
+  if (showLocalStats && unpushedCount > 0) {
+    segments.push({ text: "•", color: palette.text.muted });
+    segments.push({ text: `${unpushedCount} unpushed`, color: palette.badge.push.bg });
+  }
+  if (quickFilterLabel) {
+    segments.push({ text: "•", color: palette.text.muted });
+    segments.push({ text: `[${quickFilterLabel}]`, color: palette.text.warning });
+  }
+
+  // Show action in progress with progress bar
+  if (actionInProgress) {
+    if (actionProgress) {
+      return (
+        <ProgressBar
+          label={actionInProgress}
+          current={actionProgress.current}
+          total={actionProgress.total}
+        />
+      );
+    }
+    return (
+      <Box paddingX={1}>
+        <Text color={palette.text.warning}>{actionInProgress}...</Text>
+      </Box>
+    );
+  }
+
+  const sortArrow = sortDirection === "desc" ? "↓" : "↑";
+
+  return (
+    <Box flexDirection="column" paddingX={1} width="100%">
+      <Box gap={2} alignItems="center" justifyContent="space-between" width="100%" flexWrap="wrap">
+        <Box gap={1} alignItems="center" flexWrap="wrap">
+          {error && <Text color={palette.text.danger}>⚠ {error}</Text>}
+          {message && !error && <Text color={palette.text.success}>{message}</Text>}
+          {isLoadingGitHub && <Text color={palette.text.warning}>⟳ GitHub</Text>}
+          {showRefreshSpinner && <RefreshSpinner />}
+          {githubError && !isLoadingGitHub && <Text color={palette.text.danger}>⚠ {githubError}</Text>}
+          {segments.map((seg, idx) => (
+            <Text key={idx} color={seg.color}>
+              {seg.text}
+            </Text>
+          ))}
+        </Box>
+
+        <Text dimColor>
+          sort: {sortBy} {sortArrow}
+        </Text>
+      </Box>
+
+      <Box justifyContent="flex-end" width="100%">
+        <Text dimColor>Tab:view D:clone ?:help</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/UnifiedProjectItem.tsx

@@ -0,0 +1,436 @@
+import { Box, Text } from "ink";
+import type { UnifiedRepo } from "../types/index.ts";
+import { palette } from "../ui/theme.ts";
+
+interface UnifiedProjectItemProps {
+  repo: UnifiedRepo;
+  isSelected: boolean;
+  isCursor: boolean;
+}
+
+// Nerd Font icons using Unicode escape sequences
+// Reference: https://github.com/ryanoasis/nerd-fonts/wiki/Glyph-Sets-and-Code-Points
+export const NF = {
+  // Devicons (e700-e8ef)
+  github: '\ue709',       // nf-dev-github_badge
+  git_branch: '\ue725',   // nf-dev-git_branch
+  python: '\ue73c',       // nf-dev-python
+  rust: '\ue7a8',         // nf-dev-rust
+  ruby: '\ue791',         // nf-dev-ruby
+  java: '\ue738',         // nf-dev-java
+  html5: '\ue736',        // nf-dev-html5
+  css3: '\ue749',         // nf-dev-css3
+  terminal: '\ue795',     // nf-dev-terminal
+  php: '\ue73d',          // nf-dev-php
+  swift: '\ue755',        // nf-dev-swift
+  scala: '\ue737',        // nf-dev-scala
+  haskell: '\ue777',      // nf-dev-haskell
+  erlang: '\ue7b1',       // nf-dev-erlang
+  clojure: '\ue768',      // nf-dev-clojure
+  perl: '\ue769',         // nf-dev-perl
+  docker: '\ue7b0',       // nf-dev-docker
+  markdown: '\ue73e',     // nf-dev-markdown
+  vim: '\ue7c5',          // nf-dev-vim
+  react: '\ue7ba',        // nf-dev-react
+  
+  // Font Awesome (f000-f2ff)
+  star: '\uf005',         // nf-fa-star
+  star_empty: '\uf006',   // nf-fa-star_o
+  lock: '\uf023',         // nf-fa-lock  
+  unlock: '\uf09c',       // nf-fa-unlock_alt
+  folder: '\uf07b',       // nf-fa-folder
+  folder_open: '\uf07c',  // nf-fa-folder_open
+  cloud: '\uf0c2',        // nf-fa-cloud
+  check: '\uf00c',        // nf-fa-check
+  times: '\uf00d',        // nf-fa-times
+  circle: '\uf111',       // nf-fa-circle
+  circle_o: '\uf10c',     // nf-fa-circle_o
+  arrow_up: '\uf062',     // nf-fa-arrow_up
+  arrow_down: '\uf063',   // nf-fa-arrow_down
+  globe: '\uf0ac',        // nf-fa-globe
+  file: '\uf15b',         // nf-fa-file
+  code: '\uf121',         // nf-fa-code
+  clock: '\uf017',        // nf-fa-clock_o
+  database: '\uf1c0',     // nf-fa-database
+  
+  // Octicons (f400-f533)
+  git_branch_oct: '\uf418', // nf-oct-git_branch
+  repo: '\uf401',           // nf-oct-repo
+  repo_forked: '\uf402',    // nf-oct-repo_forked
+  git_commit: '\uf417',     // nf-oct-git_commit
+  sync: '\uf46a',           // nf-oct-sync
+  alert: '\uf421',          // nf-oct-alert (triangle warning)
+  x: '\uf467',              // nf-oct-x (x mark)
+  issue: '\uf41b',          // nf-oct-issue_opened
+  
+  // Seti-UI + Custom (e5fa-e6b7)
+  typescript: '\ue628',   // nf-seti-typescript
+  javascript: '\ue60c',   // nf-seti-javascript
+  go: '\ue627',           // nf-seti-go2
+  json: '\ue60b',         // nf-seti-json
+  lua: '\ue620',          // nf-seti-lua
+  vue: '\ue6a0',          // nf-seti-vue
+  
+  // Powerline symbols
+  branch: '\ue0a0',       // nf-pl-branch
+  
+  // Custom/MDI
+  source_branch: '\uf062c', // source branch
+};
+
+// Column widths - must match header widths exactly
+// Note: Icons often display wider than their character count
+export const COL = {
+  sel: 4,         // "[ ] " selection with trailing space
+  status: 10,     // status: "⚠  warn" or "✓  ok"
+  name: 22,       // repo name
+  branch: 14,     // branch name
+  sync: 10,       // sync status
+  lang: 3,        // language icon only
+  stars: 5,       // star count
+  forks: 5,       // fork count  
+  updated: 8,     // last updated (shorter)
+  size: 6,        // repo size
+};
+
+// Map language names to Nerd Font icons
+const LANG_ICONS: Record<string, string> = {
+  'typescript': NF.typescript,
+  'javascript': NF.javascript,
+  'python': NF.python,
+  'rust': NF.rust,
+  'go': NF.go,
+  'ruby': NF.ruby,
+  'java': NF.java,
+  'php': NF.php,
+  'swift': NF.swift,
+  'scala': NF.scala,
+  'html': NF.html5,
+  'css': NF.css3,
+  'vue': NF.vue,
+  'haskell': NF.haskell,
+  'erlang': NF.erlang,
+  'clojure': NF.clojure,
+  'lua': NF.lua,
+  'perl': NF.perl,
+  'shell': NF.terminal,
+  'bash': NF.terminal,
+  'dockerfile': NF.docker,
+  'markdown': NF.markdown,
+  'vim': NF.vim,
+  'viml': NF.vim,
+  'jsx': NF.react,
+  'tsx': NF.react,
+};
+
+/**
+ * Get Nerd Font icon for language
+ */
+function getLangIcon(language: string | null): string {
+  if (!language) return ' ';
+  return LANG_ICONS[language.toLowerCase()] || NF.code;
+}
+
+/**
+ * Format size - compact
+ */
+function formatSize(sizeKB: number | undefined): string {
+  if (!sizeKB) return '—'.padStart(COL.size);
+  if (sizeKB < 1024) return `${sizeKB}K`.padStart(COL.size);
+  if (sizeKB < 1024 * 1024) return `${Math.round(sizeKB / 1024)}M`.padStart(COL.size);
+  return `${(sizeKB / 1024 / 1024).toFixed(0)}G`.padStart(COL.size);
+}
+
+/**
+ * Format count (stars/forks) - compact
+ */
+function formatCount(count: number | undefined): string {
+  if (count === undefined || count === 0) return '—';
+  if (count >= 1000) return `${(count / 1000).toFixed(0)}k`;
+  return String(count);
+}
+
+/**
+ * Format relative date - uses lastModified for non-git/empty repos
+ */
+function formatDate(repo: UnifiedRepo): string {
+  // Try git commit date first, then lastModified for non-git/empty repos, then GitHub date
+  const date = repo.local?.status?.lastLocalCommit 
+    || repo.local?.lastModified 
+    || repo.github?.pushedAt;
+  
+  if (!date) return '—'.padStart(COL.updated);
+  
+  const dateObj = typeof date === 'string' ? new Date(date) : date;
+  if (isNaN(dateObj.getTime())) return '—'.padStart(COL.updated);
+  
+  const days = Math.floor((Date.now() - dateObj.getTime()) / (1000 * 60 * 60 * 24));
+  
+  let text: string;
+  if (days === 0) text = 'today';
+  else if (days === 1) text = '1d';
+  else if (days < 7) text = `${days}d`;
+  else if (days < 30) text = `${Math.floor(days / 7)}w`;
+  else if (days < 365) text = `${Math.floor(days / 30)}mo`;
+  else text = `${Math.floor(days / 365)}y`;
+  
+  return text.padStart(COL.updated);
+}
+
+/**
+ * Format sync status with icon - compact
+ */
+function formatSync(repo: UnifiedRepo): { text: string; color: string } {
+  const status = repo.local?.status;
+  if (!status) return { text: '—'.padEnd(COL.sync), color: palette.text.muted };
+  if (!status.hasRemote) return { text: '—'.padEnd(COL.sync), color: palette.text.muted };  // Status column shows "local"
+  
+  const ahead = status.isAhead && status.unpushedCommits > 0;
+  const behind = status.isBehind && status.unpulledCommits > 0;
+  
+  if (ahead && behind) {
+    return { text: `↑${status.unpushedCommits}↓${status.unpulledCommits}`.padEnd(COL.sync), color: palette.badge.dirty.fg };
+  }
+  if (ahead) {
+    return { text: `↑${status.unpushedCommits} push`.padEnd(COL.sync), color: palette.badge.push.fg };
+  }
+  if (behind) {
+    return { text: `↓${status.unpulledCommits} pull`.padEnd(COL.sync), color: palette.badge.pull.fg };
+  }
+  return { text: `${NF.check} synced`.padEnd(COL.sync), color: palette.badge.ok.fg };
+}
+
+/**
+ * Truncate string to max length
+ */
+function truncate(str: string, max: number): string {
+  if (str.length <= max) return str;
+  return str.slice(0, max - 1) + '…';
+}
+
+/**
+ * Health status for a repo - determines what needs attention
+ * Priority order (highest first):
+ * 1. NO_GIT - folder has no git setup at all
+ * 2. NO_COMMITS - git init but no commits
+ * 3. NO_REMOTE - has commits but no remote configured
+ * 4. DIRTY - has uncommitted changes
+ * 5. UNSYNCED - ahead/behind remote
+ * 6. OK - everything is good
+ */
+type RepoHealth = 'NO_GIT' | 'NO_COMMITS' | 'NO_REMOTE' | 'DIRTY' | 'UNSYNCED' | 'NOT_CLONED' | 'OK';
+
+interface HealthInfo {
+  status: RepoHealth;
+  icon: string;
+  label: string;
+  color: string;
+  bgColor?: string;
+}
+
+function getRepoHealth(repo: UnifiedRepo): HealthInfo {
+  const status = repo.local?.status;
+  const isNonGit = repo.local?.type === 'non-git';
+  
+  // Not cloned (GitHub only)
+  if (repo.source === 'github') {
+    return {
+      status: 'NOT_CLONED',
+      icon: NF.cloud,
+      label: '',
+      color: palette.text.muted,
+    };
+  }
+  
+  // No git at all (has package.json etc but no .git)
+  if (isNonGit) {
+    return {
+      status: 'NO_GIT',
+      icon: NF.alert,
+      label: 'init',
+      color: palette.badge.local.fg,
+    };
+  }
+  
+  // Git repo but no commits
+  if (status && !status.hasCommits) {
+    return {
+      status: 'NO_COMMITS',
+      icon: NF.alert,
+      label: 'empty',
+      color: palette.badge.local.fg,
+    };
+  }
+  
+  // Has commits but no remote
+  if (status && !status.hasRemote) {
+    return {
+      status: 'NO_REMOTE',
+      icon: NF.alert,
+      label: 'local',
+      color: palette.badge.local.fg,
+    };
+  }
+  
+  // Has dirty working tree
+  if (status?.isDirty) {
+    return {
+      status: 'DIRTY',
+      icon: NF.circle,
+      label: '',
+      color: palette.badge.dirty.fg,
+    };
+  }
+  
+  // Out of sync with remote
+  if (status?.isOutOfSync) {
+    return {
+      status: 'UNSYNCED',
+      icon: NF.sync,
+      label: '',
+      color: status.isAhead ? palette.badge.push.fg : palette.badge.pull.fg,
+    };
+  }
+  
+  // All good
+  return {
+    status: 'OK',
+    icon: NF.check,
+    label: '',
+    color: palette.badge.ok.fg,
+  };
+}
+
+/**
+ * Get source indicator icon (local/github/both)
+ */
+function getSourceIcon(repo: UnifiedRepo): { icon: string; color: string } {
+  const isPrivate = repo.github?.isPrivate ?? false;
+  
+  if (isPrivate) {
+    return { icon: NF.lock, color: palette.text.warning };
+  }
+  
+  if (repo.source === 'github') {
+    return { icon: NF.cloud, color: palette.text.muted };
+  } else if (repo.source === 'local') {
+    return { icon: NF.folder, color: palette.text.info };
+  } else {
+    return { icon: NF.github, color: palette.text.success };
+  }
+}
+
+export function UnifiedProjectItem({ repo, isSelected, isCursor }: UnifiedProjectItemProps) {
+  const bg = isCursor ? palette.bg.accent : isSelected ? palette.bg.surface : undefined;
+  const fg = isCursor || isSelected ? palette.text.primary : undefined;
+  
+  // Get health status (most important info)
+  const health = getRepoHealth(repo);
+  
+  // Source icon (local/github/both)
+  const src = getSourceIcon(repo);
+  
+  // Language icon  
+  const langIcon = getLangIcon(repo.github?.language || null);
+  
+  // Branch
+  const branch = repo.local?.status?.currentBranch;
+  const branchText = branch ? truncate(branch, COL.branch - 2) : '—';
+  
+  // Sync status
+  const sync = formatSync(repo);
+  
+  // Date (simple string now, no color)
+  const dateText = formatDate(repo);
+  
+  // Selection checkbox (only for local repos)
+  const checkbox = repo.source === 'github' ? '  '
+    : isSelected ? '[x]' : '[ ]';
+  const checkColor = isSelected ? palette.text.success : fg;
+
+  return (
+    <Box>
+      {/* Cursor */}
+      <Text color={fg} backgroundColor={bg}>
+        {isCursor ? '>' : ' '}
+      </Text>
+      
+      {/* Selection "[x] " or "[ ] " */}
+      <Text color={checkColor} backgroundColor={bg}>
+        {checkbox.padEnd(COL.sel)}
+      </Text>
+      
+      {/* STATUS - icon + optional short label */}
+      <Text color={isCursor ? fg : health.color} backgroundColor={bg} bold={isCursor || isSelected}>
+        {`${health.label ? `${health.icon} ${health.label} ` : `${health.icon}   `}`.padEnd(COL.status)}
+      </Text>
+      
+      {/* Source icon (local/github/both/private) */}
+      <Text color={isCursor ? fg : src.color} backgroundColor={bg}>
+        {src.icon}
+      </Text>
+      <Text backgroundColor={bg}>{' '}</Text>
+      
+      {/* Name */}
+      <Text color={fg || palette.text.primary} backgroundColor={bg} bold={isCursor || isSelected}>
+        {truncate(repo.name, COL.name - 2).padEnd(COL.name - 2)}
+      </Text>
+      
+      {/* Gap */}
+      <Text backgroundColor={bg}>{'  '}</Text>
+      
+      {/* Branch */}
+      <Text color={isCursor ? fg : palette.text.info} backgroundColor={bg}>
+        {branchText.padEnd(COL.branch)}
+      </Text>
+      
+      {/* Gap */}
+      <Text backgroundColor={bg}>{'  '}</Text>
+      
+      {/* Sync status */}
+      <Text color={isCursor ? fg : sync.color} backgroundColor={sync.bgColor || bg} bold={!!sync.bgColor}>
+        {sync.text}
+      </Text>
+      
+      {/* Gap */}
+      <Text backgroundColor={bg}>{'  '}</Text>
+      
+      {/* Language icon */}
+      <Text color={isCursor ? fg : palette.text.info} backgroundColor={bg}>
+        {langIcon.padStart(COL.lang)}
+      </Text>
+      
+      {/* Gap */}
+      <Text backgroundColor={bg}>{'  '}</Text>
+      
+      {/* Stars */}
+      <Text color={isCursor ? fg : 'yellow'} backgroundColor={bg}>
+        {formatCount(repo.github?.stargazersCount).padStart(COL.stars)}
+      </Text>
+      
+      {/* Gap */}
+      <Text backgroundColor={bg}>{'  '}</Text>
+      
+      {/* Forks */}
+      <Text color={isCursor ? fg : palette.text.muted} backgroundColor={bg}>
+        {formatCount(repo.github?.forksCount).padStart(COL.forks)}
+      </Text>
+      
+      {/* Gap */}
+      <Text backgroundColor={bg}>{'  '}</Text>
+      
+       {/* Updated date */}
+      <Text color={isCursor ? fg : palette.text.muted} backgroundColor={bg}>
+        {dateText}
+      </Text>
+      
+      {/* Gap */}
+      <Text backgroundColor={bg}>{'  '}</Text>
+      
+      {/* Size */}
+      <Text color={isCursor ? fg : palette.text.muted} backgroundColor={bg}>
+        {formatSize(repo.github?.size)}
+      </Text>
+    </Box>
+  );
+}

package/src/components/ViewModeIndicator.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { ViewMode } from "../types/index.ts";
+
+interface ViewModeIndicatorProps {
+  mode: ViewMode;
+  isLoadingGitHub?: boolean;
+  githubError?: string | null;
+}
+
+const MODE_CONFIG: Record<ViewMode, { label: string; color: string; icon: string }> = {
+  local: { label: "Local", color: "green", icon: "💻" },
+  github: { label: "GitHub", color: "magenta", icon: "☁" },
+  combined: { label: "All", color: "cyan", icon: "🔗" },
+};
+
+export function ViewModeIndicator({ mode, isLoadingGitHub, githubError }: ViewModeIndicatorProps) {
+  const config = MODE_CONFIG[mode];
+
+  return (
+    <Box gap={1}>
+      <Text color={config.color}>
+        {config.icon} [{config.label}]
+      </Text>
+      
+      {isLoadingGitHub && (
+        <Text color="yellow">⟳</Text>
+      )}
+      
+      {githubError && !isLoadingGitHub && (
+        <Text color="red">⚠</Text>
+      )}
+      
+      <Text dimColor>(Tab)</Text>
+    </Box>
+  );
+}