@akiojin/gwt 2.0.0

package/src/cli/ui/components/parts/MergeStatusList.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { BranchMergeStatus } from "../../types.js";
+
+export interface MergeStatusListProps {
+  statuses: BranchMergeStatus[];
+  maxVisible?: number;
+}
+
+/**
+ * Get status icon and color based on merge status
+ */
+function getStatusDisplay(status: BranchMergeStatus["status"]): {
+  icon: string;
+  color: string;
+} {
+  switch (status) {
+    case "success":
+      return { icon: "✓", color: "green" };
+    case "skipped":
+      return { icon: "⊘", color: "yellow" };
+    case "failed":
+      return { icon: "✗", color: "red" };
+  }
+}
+
+/**
+ * MergeStatusList component - displays list of merge statuses
+ * Optimized with React.memo to prevent unnecessary re-renders
+ * @see specs/SPEC-ee33ca26/spec.md - FR-015
+ */
+export const MergeStatusList = React.memo(function MergeStatusList({
+  statuses,
+  maxVisible = 10,
+}: MergeStatusListProps) {
+  const visibleStatuses = statuses.slice(-maxVisible);
+  const hiddenCount = statuses.length - visibleStatuses.length;
+
+  return (
+    <Box flexDirection="column">
+      {hiddenCount > 0 && (
+        <Box marginBottom={1}>
+          <Text dimColor>... {hiddenCount} more branches above</Text>
+        </Box>
+      )}
+
+      {visibleStatuses.map((status) => {
+        const { icon, color } = getStatusDisplay(status.status);
+
+        return (
+          <Box key={status.branchName}>
+            <Text color={color}>{icon} </Text>
+            <Text>{status.branchName}</Text>
+            <Text dimColor> ({status.durationSeconds.toFixed(1)}s)</Text>
+
+            {status.status === "skipped" && status.conflictFiles && (
+              <Text color="yellow">
+                {" "}
+                - Conflicts: {status.conflictFiles.length} files
+              </Text>
+            )}
+
+            {status.status === "failed" && status.error && (
+              <Text color="red"> - {status.error}</Text>
+            )}
+
+            {status.worktreeCreated && (
+              <Text dimColor> [worktree created]</Text>
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+});

package/src/cli/ui/components/parts/ProgressBar.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { BatchMergeProgress } from "../../types.js";
+
+export interface ProgressBarProps {
+  progress: BatchMergeProgress;
+  width?: number;
+}
+
+/**
+ * Format seconds to human-readable time (e.g., "1m 23s", "45s")
+ */
+function formatTime(seconds: number): string {
+  if (seconds < 60) {
+    return `${Math.floor(seconds)}s`;
+  }
+
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = Math.floor(seconds % 60);
+  return `${minutes}m ${remainingSeconds}s`;
+}
+
+/**
+ * ProgressBar component - displays batch merge progress
+ * Optimized with React.memo to prevent unnecessary re-renders
+ * @see specs/SPEC-ee33ca26/spec.md - FR-009
+ */
+export const ProgressBar = React.memo(function ProgressBar({
+  progress,
+  width = 40,
+}: ProgressBarProps) {
+  const filledWidth = Math.floor((progress.percentage / 100) * width);
+  const emptyWidth = width - filledWidth;
+
+  const filledBar = "█".repeat(filledWidth);
+  const emptyBar = "░".repeat(emptyWidth);
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text dimColor>Current: </Text>
+        <Text bold color="cyan">
+          {progress.currentBranch}
+        </Text>
+        <Text dimColor>
+          {" "}
+          ({progress.currentIndex + 1}/{progress.totalBranches})
+        </Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color="green">{filledBar}</Text>
+        <Text dimColor>{emptyBar}</Text>
+        <Text dimColor> {progress.percentage}%</Text>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text dimColor>Phase: </Text>
+        <Text color="yellow">{progress.currentPhase}</Text>
+        <Text dimColor> | Elapsed: </Text>
+        <Text color="magenta">{formatTime(progress.elapsedSeconds)}</Text>
+        {progress.estimatedRemainingSeconds !== undefined && (
+          <>
+            <Text dimColor> | Remaining: </Text>
+            <Text color="gray">
+              ~{formatTime(progress.estimatedRemainingSeconds)}
+            </Text>
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+});

package/src/cli/ui/components/parts/ScrollableList.tsx

@@ -0,0 +1,24 @@
+import React, { type ReactNode } from "react";
+import { Box } from "ink";
+
+export interface ScrollableListProps {
+  children: ReactNode;
+  maxHeight?: number;
+}
+
+/**
+ * ScrollableList component - container for scrollable content
+ * Note: Actual scrolling is handled by ink-select-input's limit prop
+ * This component provides a consistent container for list content
+ */
+export function ScrollableList({ children, maxHeight }: ScrollableListProps) {
+  return (
+    <Box
+      flexDirection="column"
+      {...(maxHeight !== undefined && { height: maxHeight })}
+      overflow="hidden"
+    >
+      {children}
+    </Box>
+  );
+}

package/src/cli/ui/components/parts/Stats.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Statistics } from "../../types.js";
+
+export interface StatsProps {
+  stats: Statistics;
+  separator?: string;
+  lastUpdated?: Date | null;
+}
+
+/**
+ * Format relative time (e.g., "5s ago", "2m ago", "1h ago")
+ */
+function formatRelativeTime(date: Date): string {
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+
+  if (diffSec < 60) {
+    return `${diffSec}s ago`;
+  }
+
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) {
+    return `${diffMin}m ago`;
+  }
+
+  const diffHour = Math.floor(diffMin / 60);
+  return `${diffHour}h ago`;
+}
+
+/**
+ * Stats component - displays statistics in one line
+ * Optimized with React.memo to prevent unnecessary re-renders
+ */
+export const Stats = React.memo(function Stats({
+  stats,
+  separator = "  ",
+  lastUpdated = null,
+}: StatsProps) {
+  const items = [
+    { label: "Local", value: stats.localCount, color: "cyan" },
+    { label: "Remote", value: stats.remoteCount, color: "green" },
+    { label: "Worktrees", value: stats.worktreeCount, color: "yellow" },
+    { label: "Changes", value: stats.changesCount, color: "magenta" },
+  ];
+
+  return (
+    <Box>
+      {items.map((item) => (
+        <Box key={item.label}>
+          <Text dimColor>{item.label}: </Text>
+          <Text bold color={item.color}>
+            {item.value}
+          </Text>
+          <Text dimColor>{separator}</Text>
+        </Box>
+      ))}
+      {lastUpdated && (
+        <Box>
+          <Text dimColor>Updated: </Text>
+          <Text color="gray">{formatRelativeTime(lastUpdated)}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+});

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

@@ -0,0 +1,116 @@
+import React, { useState, useEffect } 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 { getAllTools } from '../../../../config/tools.js';
+import type { AIToolConfig } from '../../../../types/tools.js';
+
+export type AITool = string;
+
+export interface AIToolItem {
+  label: string;
+  value: AITool;
+  description: string;
+}
+
+export interface AIToolSelectorScreenProps {
+  onBack: () => void;
+  onSelect: (tool: AITool) => void;
+  version?: string | null;
+}
+
+/**
+ * AIToolSelectorScreen - Screen for selecting AI tool (Claude Code, Codex CLI, or custom tools)
+ * Layout: Header + Tool Selection + Footer
+ *
+ * This screen dynamically loads available tools from the configuration (builtin + custom).
+ */
+export function AIToolSelectorScreen({ onBack, onSelect, version }: AIToolSelectorScreenProps) {
+  const { rows } = useTerminalSize();
+  const [toolItems, setToolItems] = useState<AIToolItem[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Load tools from getAllTools()
+  useEffect(() => {
+    const loadTools = async () => {
+      try {
+        const tools = await getAllTools();
+
+        // Convert AIToolConfig[] to AIToolItem[]
+        const items: AIToolItem[] = tools.map((tool: AIToolConfig) => {
+          // Generate description based on whether it's builtin or custom
+          const description = tool.isBuiltin
+            ? `Official ${tool.displayName} tool`
+            : `Custom AI tool`;
+
+          // Add icon to label if present
+          const label = tool.icon
+            ? `${tool.icon} ${tool.displayName}`
+            : tool.displayName;
+
+          return {
+            label,
+            value: tool.id,
+            description,
+          };
+        });
+
+        setToolItems(items);
+      } catch (error) {
+        // If loading fails, show error in console but don't crash
+        console.error('Failed to load tools:', error);
+        // Fall back to empty array
+        setToolItems([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadTools();
+  }, []);
+
+  // Handle keyboard input
+  // Note: Select component handles Enter and arrow keys
+  useInput((input, key) => {
+    if (key.escape) {
+      onBack();
+    }
+  });
+
+  // Handle tool selection
+  const handleSelect = (item: AIToolItem) => {
+    onSelect(item.value);
+  };
+
+  // Footer actions
+  const footerActions = [
+    { key: 'enter', description: 'Select' },
+    { key: 'esc', description: 'Back' },
+  ];
+
+  return (
+    <Box flexDirection="column" height={rows}>
+      {/* Header */}
+      <Header title="AI Tool Selection" titleColor="blue" version={version} />
+
+      {/* Content */}
+      <Box flexDirection="column" flexGrow={1} marginTop={1}>
+        <Box marginBottom={1}>
+          <Text>Select AI tool to use:</Text>
+        </Box>
+        {isLoading ? (
+          <Text>Loading tools...</Text>
+        ) : toolItems.length === 0 ? (
+          <Text color="yellow">No tools available. Please check your configuration.</Text>
+        ) : (
+          <Select items={toolItems} onSelect={handleSelect} />
+        )}
+      </Box>
+
+      {/* Footer */}
+      <Footer actions={footerActions} />
+    </Box>
+  );
+}

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

@@ -0,0 +1,70 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import { Header } from "../parts/Header.js";
+import { Footer } from "../parts/Footer.js";
+import { ProgressBar } from "../parts/ProgressBar.js";
+import { MergeStatusList } from "../parts/MergeStatusList.js";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+import type { BatchMergeProgress, BranchMergeStatus } from "../../types.js";
+
+export interface BatchMergeProgressScreenProps {
+  progress: BatchMergeProgress;
+  statuses: BranchMergeStatus[];
+  onCancel?: () => void;
+}
+
+/**
+ * BatchMergeProgressScreen - Real-time progress display for batch merge
+ * Layout: Header + Progress Bar + Status List + Footer
+ * @see specs/SPEC-ee33ca26/spec.md - User Story 4
+ */
+export function BatchMergeProgressScreen({
+  progress,
+  statuses,
+  onCancel,
+}: BatchMergeProgressScreenProps) {
+  const { rows } = useTerminalSize();
+
+  // Handle keyboard input
+  useInput((input, key) => {
+    if ((input === "q" || key.escape) && onCancel) {
+      onCancel();
+    }
+  });
+
+  // Calculate available space for status list
+  const headerLines = 1;
+  const progressLines = 5; // Progress bar takes ~5 lines
+  const footerLines = 1;
+  const maxStatusLines = Math.max(
+    5,
+    rows - headerLines - progressLines - footerLines - 2,
+  );
+
+  return (
+    <Box flexDirection="column" height={rows}>
+      <Header title="Batch Merge in Progress" />
+
+      <Box flexDirection="column" paddingX={2} paddingY={1}>
+        <ProgressBar progress={progress} />
+
+        <Box marginTop={2}>
+          <Text bold>Recent Branches:</Text>
+        </Box>
+
+        <Box marginTop={1}>
+          <MergeStatusList statuses={statuses} maxVisible={maxStatusLines} />
+        </Box>
+      </Box>
+
+      <Footer
+        actions={[
+          {
+            key: "q",
+            description: `Cancel | Processing ${progress.currentIndex + 1}/${progress.totalBranches}`,
+          },
+        ]}
+      />
+    </Box>
+  );
+}

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

@@ -0,0 +1,104 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import { Header } from "../parts/Header.js";
+import { Footer } from "../parts/Footer.js";
+import { MergeStatusList } from "../parts/MergeStatusList.js";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+import type { BatchMergeResult } from "../../types.js";
+
+export interface BatchMergeResultScreenProps {
+  result: BatchMergeResult;
+  onBack?: () => void;
+  onQuit?: () => void;
+}
+
+/**
+ * BatchMergeResultScreen - Final result summary for batch merge
+ * Layout: Header + Summary + Status List + Footer
+ * @see specs/SPEC-ee33ca26/spec.md - FR-010
+ */
+export function BatchMergeResultScreen({
+  result,
+  onBack,
+  onQuit,
+}: BatchMergeResultScreenProps) {
+  const { rows } = useTerminalSize();
+
+  // Handle keyboard input
+  useInput((input, key) => {
+    if (input === "q" && onQuit) {
+      onQuit();
+    } else if (key.escape && onBack) {
+      onBack();
+    }
+  });
+
+  const { summary, totalDurationSeconds, cancelled } = result;
+
+  return (
+    <Box flexDirection="column" height={rows}>
+      <Header
+        title={cancelled ? "Batch Merge Cancelled" : "Batch Merge Complete"}
+      />
+
+      <Box flexDirection="column" paddingX={2} paddingY={1}>
+        {/* Summary Statistics */}
+        <Box flexDirection="column" marginBottom={2}>
+          <Text bold>Summary:</Text>
+          <Box marginTop={1}>
+            <Text color="green">✓ Success: {summary.successCount}</Text>
+            <Text dimColor> | </Text>
+            <Text color="yellow">⊘ Skipped: {summary.skippedCount}</Text>
+            <Text dimColor> | </Text>
+            <Text color="red">✗ Failed: {summary.failedCount}</Text>
+            <Text dimColor> | </Text>
+            <Text dimColor>Total: {totalDurationSeconds.toFixed(1)}s</Text>
+          </Box>
+
+          {summary.pushedCount > 0 && (
+            <Box marginTop={1}>
+              <Text color="cyan">↑ Pushed: {summary.pushedCount}</Text>
+              {summary.pushFailedCount > 0 && (
+                <>
+                  <Text dimColor> | </Text>
+                  <Text color="red">
+                    Push Failed: {summary.pushFailedCount}
+                  </Text>
+                </>
+              )}
+            </Box>
+          )}
+        </Box>
+
+        {/* Detailed Status List */}
+        <Box flexDirection="column">
+          <Text bold>Branch Details:</Text>
+          <Box marginTop={1}>
+            <MergeStatusList
+              statuses={result.statuses}
+              maxVisible={rows - 12}
+            />
+          </Box>
+        </Box>
+
+        {/* Messages for next actions */}
+        {summary.skippedCount > 0 && (
+          <Box marginTop={2}>
+            <Text color="yellow">
+              Note: {summary.skippedCount} branch
+              {summary.skippedCount > 1 ? "es" : ""} skipped due to conflicts.
+              Please resolve manually.
+            </Text>
+          </Box>
+        )}
+      </Box>
+
+      <Footer
+        actions={[
+          { key: "q", description: "Quit" },
+          ...(onBack ? [{ key: "ESC", description: "Back" }] : []),
+        ]}
+      />
+    </Box>
+  );
+}