@akiojin/gwt 2.0.0

package/src/cli/ui/components/screens/PRCleanupScreen.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import { Box, Text, useInput } from 'ink';
+import { Header } from '../parts/Header.js';
+import { Footer } from '../parts/Footer.js';
+import { Select } from '../common/Select.js';
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+import type { CleanupTarget } from '../../types.js';
+
+export interface PRItem {
+  label: string;
+  value: string;
+  target: CleanupTarget;
+}
+
+export interface PRCleanupScreenProps {
+  targets: CleanupTarget[];
+  loading: boolean;
+  error: Error | null;
+  statusMessage?: string | null;
+  onBack: () => void;
+  onRefresh: () => void;
+  onCleanup: (target: CleanupTarget) => void;
+  version?: string | null;
+}
+
+/**
+ * PRCleanupScreen - Screen for cleaning up merged pull requests
+ * Layout: Header + Stats + PR List + Footer
+ */
+export function PRCleanupScreen({
+  targets,
+  loading,
+  error,
+  statusMessage,
+  onBack,
+  onRefresh,
+  onCleanup,
+  version,
+}: PRCleanupScreenProps) {
+  const { rows } = useTerminalSize();
+
+  // Handle keyboard input
+  // Note: Select component handles Enter and arrow keys
+  useInput((input, key) => {
+    if (key.escape) {
+      onBack();
+    } else if (input === 'r') {
+      onRefresh();
+    }
+  });
+
+  // Format pull requests for Select component
+  const prItems: PRItem[] = targets.map((target) => {
+    const pr = target.pullRequest;
+    const flags: string[] = [];
+    if (target.cleanupType === 'worktree-and-branch') {
+      flags.push('worktree');
+    } else {
+      flags.push('branch');
+    }
+    if (target.reasons?.includes('merged-pr')) {
+      flags.push('merged');
+    }
+    if (target.reasons?.includes('no-diff-with-base')) {
+      flags.push('base');
+    }
+    if (target.hasUncommittedChanges) {
+      flags.push('changes');
+    }
+    if (target.hasUnpushedCommits) {
+      flags.push('unpushed');
+    }
+    if (target.isAccessible === false) {
+      flags.push('inaccessible');
+    }
+
+    const flagText = flags.length > 0 ? ` [${flags.join(', ')}]` : '';
+
+    const label = pr
+      ? `${target.branch} - #${pr.number} ${pr.title}${flagText}`
+      : `${target.branch}${flagText}`;
+
+    return {
+      label,
+      value: target.branch,
+      target,
+    };
+  });
+
+  // Calculate available space for PR list
+  const headerLines = 2;
+  const statsLines = 1;
+  const emptyLine = 1;
+  const footerLines = 1;
+  const fixedLines = headerLines + statsLines + emptyLine + footerLines;
+  const contentHeight = rows - fixedLines;
+  const limit = Math.max(5, contentHeight);
+
+  // Footer actions
+  const footerActions = [
+    { key: 'enter', description: 'Cleanup' },
+    { key: 'r', description: 'Refresh' },
+    { key: 'esc', description: 'Back' },
+  ];
+
+  return (
+    <Box flexDirection="column" height={rows}>
+      {/* Header */}
+      <Header title="Branch Cleanup" titleColor="yellow" version={version} />
+
+      {/* Stats */}
+      <Box marginTop={1}>
+        <Box flexDirection="row">
+          <Box marginRight={2}>
+            <Text>
+              Total: <Text bold>{targets.length}</Text>
+            </Text>
+          </Box>
+          {loading && (
+            <Box marginRight={2}>
+              <Text color="cyan">Loading...</Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+
+      {error && (
+        <Box marginTop={1}>
+          <Text color="red">
+            Error: <Text bold>{error.message}</Text>
+          </Text>
+        </Box>
+      )}
+
+      {statusMessage && (
+        <Box marginTop={1}>
+          <Text color="green">{statusMessage}</Text>
+        </Box>
+      )}
+
+      {/* Empty line */}
+      <Box height={1} />
+
+      {/* Content */}
+      <Box flexDirection="column" flexGrow={1}>
+        {loading ? (
+          <Box>
+            <Text dimColor>Loading cleanup targets...</Text>
+          </Box>
+        ) : targets.length === 0 ? (
+          <Box>
+            <Text dimColor>No cleanup targets found</Text>
+          </Box>
+        ) : (
+          <Select<PRItem>
+            items={prItems}
+            onSelect={(item) => onCleanup(item.target)}
+            limit={limit}
+          />
+        )}
+      </Box>
+
+      {/* Footer */}
+      <Footer actions={footerActions} />
+    </Box>
+  );
+}

package/src/cli/ui/components/screens/SessionSelectorScreen.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Box, Text, useInput } from 'ink';
+import { Header } from '../parts/Header.js';
+import { Footer } from '../parts/Footer.js';
+import { Select } from '../common/Select.js';
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+
+export interface SessionItem {
+  label: string;
+  value: string;
+}
+
+export interface SessionSelectorScreenProps {
+  sessions: string[];
+  onBack: () => void;
+  onSelect: (session: string) => void;
+  version?: string | null;
+}
+
+/**
+ * SessionSelectorScreen - Screen for selecting a session
+ * Layout: Header + Stats + Session List + Footer
+ */
+export function SessionSelectorScreen({
+  sessions,
+  onBack,
+  onSelect,
+  version,
+}: SessionSelectorScreenProps) {
+  const { rows } = useTerminalSize();
+
+  // Handle keyboard input
+  // Note: Select component handles Enter and arrow keys
+  useInput((input, key) => {
+    if (key.escape) {
+      onBack();
+    }
+  });
+
+  // Format sessions for Select component
+  const sessionItems: SessionItem[] = sessions.map((session) => ({
+    label: session,
+    value: session,
+  }));
+
+  // Handle session selection
+  const handleSelect = (item: SessionItem) => {
+    onSelect(item.value);
+  };
+
+  // Calculate available space for session list
+  const headerLines = 2;
+  const statsLines = 1;
+  const emptyLine = 1;
+  const footerLines = 1;
+  const fixedLines = headerLines + statsLines + emptyLine + footerLines;
+  const contentHeight = rows - fixedLines;
+  const limit = Math.max(5, contentHeight);
+
+  // Footer actions
+  const footerActions = [
+    { key: 'enter', description: 'Select' },
+    { key: 'esc', description: 'Back' },
+  ];
+
+  return (
+    <Box flexDirection="column" height={rows}>
+      {/* Header */}
+      <Header title="Session Selection" titleColor="cyan" version={version} />
+
+      {/* Stats */}
+      <Box marginTop={1}>
+        <Box flexDirection="row">
+          <Box marginRight={2}>
+            <Text>
+              Total: <Text bold>{sessions.length}</Text>
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+
+      {/* Empty line */}
+      <Box height={1} />
+
+      {/* Content */}
+      <Box flexDirection="column" flexGrow={1}>
+        {sessions.length === 0 ? (
+          <Box>
+            <Text dimColor>No sessions found</Text>
+          </Box>
+        ) : (
+          <Select items={sessionItems} onSelect={handleSelect} limit={limit} />
+        )}
+      </Box>
+
+      {/* Footer */}
+      <Footer actions={footerActions} />
+    </Box>
+  );
+}

package/src/cli/ui/components/screens/WorktreeManagerScreen.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Box, Text, useInput } from 'ink';
+import { Header } from '../parts/Header.js';
+import { Footer } from '../parts/Footer.js';
+import { Select } from '../common/Select.js';
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+
+export interface WorktreeItem {
+  branch: string;
+  path: string;
+  isAccessible: boolean;
+  label?: string;
+  value?: string;
+}
+
+export interface WorktreeManagerScreenProps {
+  worktrees: WorktreeItem[];
+  onBack: () => void;
+  onSelect: (worktree: WorktreeItem) => void;
+  version?: string | null;
+}
+
+/**
+ * WorktreeManagerScreen - Screen for managing worktrees
+ * Layout: Header + Stats + Worktree List + Footer
+ */
+export function WorktreeManagerScreen({
+  worktrees,
+  onBack,
+  onSelect,
+  version,
+}: WorktreeManagerScreenProps) {
+  const { rows } = useTerminalSize();
+
+  // Handle keyboard input
+  // Note: Select component handles Enter and arrow keys
+  useInput((input, key) => {
+    if (key.escape) {
+      onBack();
+    }
+  });
+
+  // Calculate accessible and inaccessible counts
+  const accessibleCount = worktrees.filter((w) => w.isAccessible).length;
+  const inaccessibleCount = worktrees.filter((w) => !w.isAccessible).length;
+
+  // Format worktrees for Select component
+  const worktreeItems = worktrees.map((wt) => ({
+    ...wt,
+    label: wt.isAccessible
+      ? `${wt.branch} (${wt.path})`
+      : `${wt.branch} (${wt.path}) [Inaccessible]`,
+    value: wt.branch,
+  }));
+
+  // Calculate available space for worktree list
+  const headerLines = 2;
+  const statsLines = 1;
+  const emptyLine = 1;
+  const footerLines = 1;
+  const fixedLines = headerLines + statsLines + emptyLine + footerLines;
+  const contentHeight = rows - fixedLines;
+  const limit = Math.max(5, contentHeight);
+
+  // Footer actions
+  const footerActions = [
+    { key: 'enter', description: 'Select' },
+    { key: 'esc', description: 'Back' },
+  ];
+
+  return (
+    <Box flexDirection="column" height={rows}>
+      {/* Header */}
+      <Header title="Worktree Manager" titleColor="magenta" version={version} />
+
+      {/* Stats */}
+      <Box marginTop={1}>
+        <Box flexDirection="row">
+          <Box marginRight={2}>
+            <Text>
+              Total: <Text bold>{worktrees.length}</Text>
+            </Text>
+          </Box>
+          <Box marginRight={2}>
+            <Text color="green">
+              Accessible: <Text bold>{accessibleCount}</Text>
+            </Text>
+          </Box>
+          {inaccessibleCount > 0 && (
+            <Box>
+              <Text color="red">
+                Inaccessible: <Text bold>{inaccessibleCount}</Text>
+              </Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+
+      {/* Empty line */}
+      <Box height={1} />
+
+      {/* Content */}
+      <Box flexDirection="column" flexGrow={1}>
+        {worktrees.length === 0 ? (
+          <Box>
+            <Text dimColor>No worktrees found</Text>
+          </Box>
+        ) : (
+          <Select items={worktreeItems} onSelect={onSelect} limit={limit} />
+        )}
+      </Box>
+
+      {/* Footer */}
+      <Footer actions={footerActions} />
+    </Box>
+  );
+}

package/src/cli/ui/hooks/useBatchMerge.ts

@@ -0,0 +1,96 @@
+import { useState, useCallback } from "react";
+import { BatchMergeService } from "../../../services/BatchMergeService.js";
+import type {
+  BatchMergeConfig,
+  BatchMergeProgress,
+  BatchMergeResult,
+  BranchMergeStatus,
+} from "../types.js";
+
+/**
+ * useBatchMerge hook - Manages batch merge state and execution
+ * @see specs/SPEC-ee33ca26/plan.md - Service layer integration
+ */
+export function useBatchMerge() {
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [progress, setProgress] = useState<BatchMergeProgress | null>(null);
+  const [statuses, setStatuses] = useState<BranchMergeStatus[]>([]);
+  const [result, setResult] = useState<BatchMergeResult | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+
+  const service = new BatchMergeService();
+
+  /**
+   * Execute batch merge
+   */
+  const executeBatchMerge = useCallback(
+    async (config: BatchMergeConfig) => {
+      try {
+        setIsExecuting(true);
+        setProgress(null);
+        setStatuses([]);
+        setResult(null);
+        setError(null);
+
+        const mergeResult = await service.executeBatchMerge(
+          config,
+          (progressUpdate) => {
+            setProgress(progressUpdate);
+
+            // Update statuses as branches are processed
+            // This is a simplified version; real implementation would track completed branches
+          },
+        );
+
+        setResult(mergeResult);
+        setStatuses(mergeResult.statuses);
+        return mergeResult;
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setError(error);
+        throw error;
+      } finally {
+        setIsExecuting(false);
+        setProgress(null);
+      }
+    },
+    [service],
+  );
+
+  /**
+   * Determine source branch automatically
+   */
+  const determineSourceBranch = useCallback(async () => {
+    return await service.determineSourceBranch();
+  }, [service]);
+
+  /**
+   * Get target branches
+   */
+  const getTargetBranches = useCallback(async () => {
+    return await service.getTargetBranches();
+  }, [service]);
+
+  /**
+   * Reset state
+   */
+  const reset = useCallback(() => {
+    setIsExecuting(false);
+    setProgress(null);
+    setStatuses([]);
+    setResult(null);
+    setError(null);
+  }, []);
+
+  return {
+    isExecuting,
+    progress,
+    statuses,
+    result,
+    error,
+    executeBatchMerge,
+    determineSourceBranch,
+    getTargetBranches,
+    reset,
+  };
+}

package/src/cli/ui/hooks/useGitData.ts

@@ -0,0 +1,157 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  getAllBranches,
+  hasUnpushedCommitsInRepo,
+  getRepositoryRoot,
+} from "../../../git.js";
+import { listAdditionalWorktrees } from "../../../worktree.js";
+import { getPullRequestByBranch } from "../../../github.js";
+import type { BranchInfo, WorktreeInfo } from "../types.js";
+import type { WorktreeInfo as GitWorktreeInfo } from "../../../worktree.js";
+
+export interface UseGitDataOptions {
+  enableAutoRefresh?: boolean;
+  refreshInterval?: number; // milliseconds (default: 5000ms = 5s)
+}
+
+export interface UseGitDataResult {
+  branches: BranchInfo[];
+  worktrees: GitWorktreeInfo[];
+  loading: boolean;
+  error: Error | null;
+  refresh: () => void;
+  lastUpdated: Date | null;
+}
+
+/**
+ * Hook to fetch and manage Git data (branches and worktrees)
+ * @param options - Configuration options for auto-refresh and polling interval
+ */
+export function useGitData(options?: UseGitDataOptions): UseGitDataResult {
+  const { enableAutoRefresh = false, refreshInterval = 5000 } = options || {};
+  const [branches, setBranches] = useState<BranchInfo[]>([]);
+  const [worktrees, setWorktrees] = useState<GitWorktreeInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
+
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const [branchesData, worktreesData] = await Promise.all([
+        getAllBranches(),
+        listAdditionalWorktrees(),
+      ]);
+
+      // Store worktrees separately
+      setWorktrees(worktreesData);
+
+      // Map worktrees to branches
+      const worktreeMap = new Map<string, WorktreeInfo>();
+      for (const worktree of worktreesData) {
+        // Convert worktree.ts WorktreeInfo to ui/types.ts WorktreeInfo
+        const uiWorktreeInfo: WorktreeInfo = {
+          path: worktree.path,
+          locked: false, // worktree.ts doesn't expose locked status
+          prunable: worktree.isAccessible === false,
+          isAccessible: worktree.isAccessible ?? true, // Default to true if undefined
+        };
+        worktreeMap.set(worktree.branch, uiWorktreeInfo);
+      }
+
+      // Get repository root for unpushed commits check
+      const repoRoot = await getRepositoryRoot();
+
+      // Attach worktree info and check unpushed/PR status for local branches
+      const enrichedBranches = await Promise.all(
+        branchesData.map(async (branch) => {
+          const worktreeInfo = worktreeMap.get(branch.name);
+          let hasUnpushed = false;
+          let prInfo = null;
+
+          // Only check unpushed commits and PR status for local branches
+          if (branch.type === "local") {
+            try {
+              // Check for unpushed commits
+              hasUnpushed = await hasUnpushedCommitsInRepo(
+                branch.name,
+                repoRoot,
+              );
+
+              // Check for PR status
+              prInfo = await getPullRequestByBranch(branch.name);
+            } catch (error) {
+              // Silently ignore errors to avoid breaking the UI
+              if (process.env.DEBUG) {
+                console.error(
+                  `Failed to check status for ${branch.name}:`,
+                  error,
+                );
+              }
+            }
+          }
+
+          return {
+            ...branch,
+            ...(worktreeInfo ? { worktree: worktreeInfo } : {}),
+            ...(hasUnpushed ? { hasUnpushedCommits: true } : {}),
+            ...(prInfo?.state === "OPEN"
+              ? { openPR: { number: prInfo.number, title: prInfo.title } }
+              : {}),
+            ...(prInfo?.state === "MERGED" && prInfo.mergedAt
+              ? {
+                  mergedPR: {
+                    number: prInfo.number,
+                    mergedAt: prInfo.mergedAt,
+                  },
+                }
+              : {}),
+          };
+        }),
+      );
+
+      setBranches(enrichedBranches);
+      setLastUpdated(new Date());
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setBranches([]);
+      setWorktrees([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const refresh = useCallback(() => {
+    loadData();
+  }, [loadData]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  // Auto-refresh polling (if enabled)
+  useEffect(() => {
+    if (!enableAutoRefresh) {
+      return;
+    }
+
+    const intervalId = setInterval(() => {
+      loadData();
+    }, refreshInterval);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [enableAutoRefresh, refreshInterval, loadData]);
+
+  return {
+    branches,
+    worktrees,
+    loading,
+    error,
+    refresh,
+    lastUpdated,
+  };
+}

package/src/cli/ui/hooks/useScreenState.ts

@@ -0,0 +1,44 @@
+import { useState, useCallback } from "react";
+import type { ScreenType } from "../types.js";
+
+export interface ScreenStateResult {
+  currentScreen: ScreenType;
+  navigateTo: (screen: ScreenType) => void;
+  goBack: () => void;
+  reset: () => void;
+}
+
+const INITIAL_SCREEN: ScreenType = "branch-list";
+
+/**
+ * Hook to manage screen navigation state with history
+ */
+export function useScreenState(): ScreenStateResult {
+  const [history, setHistory] = useState<ScreenType[]>([INITIAL_SCREEN]);
+
+  const currentScreen = history[history.length - 1] ?? INITIAL_SCREEN;
+
+  const navigateTo = useCallback((screen: ScreenType) => {
+    setHistory((prev) => [...prev, screen]);
+  }, []);
+
+  const goBack = useCallback(() => {
+    setHistory((prev) => {
+      if (prev.length <= 1) {
+        return prev; // Stay at initial screen
+      }
+      return prev.slice(0, -1);
+    });
+  }, []);
+
+  const reset = useCallback(() => {
+    setHistory([INITIAL_SCREEN]);
+  }, []);
+
+  return {
+    currentScreen,
+    navigateTo,
+    goBack,
+    reset,
+  };
+}