@akiojin/gwt 2.0.0

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

@@ -0,0 +1,213 @@
+import React, { useState, useCallback, useEffect, useRef } 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 { Input } from '../common/Input.js';
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+import { BRANCH_PREFIXES } from '../../../../config/constants.js';
+
+type BranchType = 'feature' | 'hotfix' | 'release';
+type Step = 'type-selection' | 'name-input';
+
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧'];
+
+export interface BranchCreatorScreenProps {
+  onBack: () => void;
+  onCreate: (branchName: string) => Promise<void>;
+  baseBranch?: string;
+  version?: string | null;
+  disableAnimation?: boolean;
+}
+
+interface BranchTypeItem {
+  label: string;
+  value: BranchType;
+  description: string;
+}
+
+/**
+ * BranchCreatorScreen - Screen for creating new branches
+ * Layout: Header + Type Selection or Name Input + Footer
+ * Flow: Type Selection → Name Input → onCreate
+ */
+export function BranchCreatorScreen({
+  onBack,
+  onCreate,
+  baseBranch,
+  version,
+  disableAnimation = false,
+}: BranchCreatorScreenProps) {
+  const { rows } = useTerminalSize();
+  const [step, setStep] = useState<Step>('type-selection');
+  const [selectedType, setSelectedType] = useState<BranchType>('feature');
+  const [branchName, setBranchName] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
+  const [pendingBranchName, setPendingBranchName] = useState<string | null>(null);
+  const spinnerIndexRef = useRef(0);
+  const [spinnerIndex, setSpinnerIndex] = useState(0);
+
+  const spinnerFrame = SPINNER_FRAMES[spinnerIndex] ?? SPINNER_FRAMES[0];
+
+  // Handle keyboard input for back navigation
+  useInput((input, key) => {
+    if (isCreating) {
+      return;
+    }
+
+    if (key.escape) {
+      onBack();
+    }
+  });
+
+  // Branch type options
+  const branchTypeItems: BranchTypeItem[] = [
+    {
+      label: 'feature',
+      value: 'feature',
+      description: 'New feature development',
+    },
+    {
+      label: 'hotfix',
+      value: 'hotfix',
+      description: 'Critical bug fix',
+    },
+    {
+      label: 'release',
+      value: 'release',
+      description: 'Release preparation',
+    },
+  ];
+
+  // Handle branch type selection
+  const handleTypeSelect = useCallback((item: BranchTypeItem) => {
+    setSelectedType(item.value);
+    setStep('name-input');
+  }, []);
+
+  // Handle branch name input
+  const handleNameChange = useCallback((value: string) => {
+    if (isCreating) {
+      return;
+    }
+    setBranchName(value);
+  }, [isCreating]);
+
+  // Handle branch creation
+  const handleCreate = useCallback(async () => {
+    if (isCreating) {
+      return;
+    }
+
+    const trimmedName = branchName.trim();
+    if (!trimmedName) {
+      return;
+    }
+
+    const prefix = BRANCH_PREFIXES[selectedType.toUpperCase() as keyof typeof BRANCH_PREFIXES];
+    const fullBranchName = `${prefix}${trimmedName}`;
+
+    setIsCreating(true);
+    setPendingBranchName(fullBranchName);
+
+    try {
+      await onCreate(fullBranchName);
+    } catch (error) {
+      setPendingBranchName(null);
+      setIsCreating(false);
+      throw error;
+    }
+  }, [branchName, selectedType, onCreate, isCreating]);
+
+  // Footer actions
+  const footerActions =
+    isCreating
+      ? []
+      : step === 'type-selection'
+        ? [
+            { key: 'enter', description: 'Select' },
+            { key: 'esc', description: 'Back' },
+          ]
+        : [
+            { key: 'enter', description: 'Create' },
+            { key: 'esc', description: 'Back' },
+          ];
+
+  useEffect(() => {
+    if (!isCreating || disableAnimation) {
+      spinnerIndexRef.current = 0;
+      setSpinnerIndex(0);
+      return undefined;
+    }
+
+    const interval = setInterval(() => {
+      spinnerIndexRef.current = (spinnerIndexRef.current + 1) % SPINNER_FRAMES.length;
+      setSpinnerIndex(spinnerIndexRef.current);
+    }, 120);
+
+    return () => {
+      clearInterval(interval);
+      spinnerIndexRef.current = 0;
+      setSpinnerIndex(0);
+    };
+  }, [isCreating, disableAnimation]);
+
+  return (
+    <Box flexDirection="column" height={rows}>
+      {/* Header */}
+      <Header title="New Branch" titleColor="green" version={version} />
+
+      {/* Content */}
+      <Box flexDirection="column" flexGrow={1} marginTop={1}>
+        {baseBranch && (
+          <Box marginBottom={1}>
+            <Text>
+              Base branch: <Text bold color="cyan">{baseBranch}</Text>
+            </Text>
+          </Box>
+        )}
+        {isCreating ? (
+          <Box flexDirection="column">
+            <Box marginBottom={1}>
+              <Text>
+                {spinnerFrame}{' '}
+                <Text color="cyan">
+                  Creating branch{' '}
+                  <Text bold>
+                    {pendingBranchName ??
+                      `${BRANCH_PREFIXES[selectedType.toUpperCase() as keyof typeof BRANCH_PREFIXES]}${branchName.trim()}`}
+                  </Text>
+                </Text>
+              </Text>
+            </Box>
+            <Text color="gray">Please wait while the branch is being created...</Text>
+          </Box>
+        ) : step === 'type-selection' ? (
+          <Box flexDirection="column">
+            <Box marginBottom={1}>
+              <Text>Select branch type:</Text>
+            </Box>
+            <Select items={branchTypeItems} onSelect={handleTypeSelect} />
+          </Box>
+        ) : (
+          <Box flexDirection="column">
+            <Box marginBottom={1}>
+              <Text>
+                Branch name prefix: <Text bold>{BRANCH_PREFIXES[selectedType.toUpperCase() as keyof typeof BRANCH_PREFIXES]}</Text>
+              </Text>
+            </Box>
+            <Input
+              value={branchName}
+              onChange={handleNameChange}
+              onSubmit={handleCreate}
+              placeholder="Enter branch name (e.g., add-new-feature)"
+            />
+          </Box>
+        )}
+      </Box>
+
+      {/* Footer */}
+      <Footer actions={footerActions} />
+    </Box>
+  );
+}

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

@@ -0,0 +1,299 @@
+import React, { useCallback } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { Header } from '../parts/Header.js';
+import { Stats } from '../parts/Stats.js';
+import { Footer } from '../parts/Footer.js';
+import { Select } from '../common/Select.js';
+import { LoadingIndicator } from '../common/LoadingIndicator.js';
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+import type { BranchItem, Statistics } from '../../types.js';
+import stringWidth from 'string-width';
+import chalk from 'chalk';
+
+const WIDTH_OVERRIDES: Record<string, number> = {
+  '⬆': 1,
+  '☁': 1,
+};
+
+const measureDisplayWidth = (value: string): number => {
+  let width = 0;
+  for (const char of Array.from(value)) {
+    const override = WIDTH_OVERRIDES[char];
+    if (override !== undefined) {
+      width += override;
+      continue;
+    }
+    width += stringWidth(char);
+  }
+  return width;
+};
+
+type IndicatorColor = 'cyan' | 'green' | 'yellow' | 'red';
+
+interface CleanupIndicator {
+  icon: string;
+  color?: IndicatorColor;
+}
+
+interface CleanupFooterMessage {
+  text: string;
+  color?: IndicatorColor;
+}
+
+interface CleanupUIState {
+  indicators: Record<string, CleanupIndicator>;
+  footerMessage: CleanupFooterMessage | null;
+  inputLocked: boolean;
+}
+
+export interface BranchListScreenProps {
+  branches: BranchItem[];
+  stats: Statistics;
+  onSelect: (branch: BranchItem) => void;
+  onNavigate?: (screen: string) => void;
+  onQuit?: () => void;
+  onCleanupCommand?: () => void;
+  onRefresh?: () => void;
+  loading?: boolean;
+  error?: Error | null;
+  lastUpdated?: Date | null;
+  loadingIndicatorDelay?: number;
+  cleanupUI?: CleanupUIState;
+  version?: string | null;
+  workingDirectory?: string;
+}
+
+/**
+ * BranchListScreen - Main screen for branch selection
+ * Layout: Header + Stats + Branch List + Footer
+ */
+export function BranchListScreen({
+  branches,
+  stats,
+  onSelect,
+  onNavigate,
+  onCleanupCommand,
+  onRefresh,
+  loading = false,
+  error = null,
+  lastUpdated = null,
+  loadingIndicatorDelay = 300,
+  cleanupUI,
+  version,
+  workingDirectory,
+}: BranchListScreenProps) {
+  const { rows } = useTerminalSize();
+
+  // Handle keyboard input
+  // Note: Select component handles Enter and arrow keys
+  useInput((input) => {
+    if (cleanupUI?.inputLocked) {
+      return;
+    }
+
+    if (input === 'm' && onNavigate) {
+      onNavigate('worktree-manager');
+    } else if (input === 'c') {
+      onCleanupCommand?.();
+    } else if (input === 'r' && onRefresh) {
+      onRefresh();
+    }
+  });
+
+  // Calculate available space for branch list
+  // Header: 2 lines (title + divider)
+  // Stats: 1 line
+  // Empty line: 1 line
+  // Footer: 1 line
+  // Total fixed: 5 lines
+  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); // Minimum 5 items visible
+
+  // Footer actions
+  const footerActions = [
+    { key: 'enter', description: 'Select' },
+    { key: 'r', description: 'Refresh' },
+    { key: 'm', description: 'Manage worktrees' },
+    { key: 'c', description: 'Cleanup branches' },
+  ];
+
+  const formatLatestCommit = useCallback((timestamp?: number) => {
+    if (!timestamp || Number.isNaN(timestamp)) {
+      return '---';
+    }
+
+    const date = new Date(timestamp * 1000);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+
+    return `${year}-${month}-${day} ${hours}:${minutes}`;
+  }, []);
+
+  const truncateToWidth = useCallback((value: string, maxWidth: number) => {
+    if (maxWidth <= 0) {
+      return '';
+    }
+
+    if (stringWidth(value) <= maxWidth) {
+      return value;
+    }
+
+    const ellipsis = '…';
+    const ellipsisWidth = stringWidth(ellipsis);
+    if (ellipsisWidth >= maxWidth) {
+      return ellipsis;
+    }
+
+    let currentWidth = 0;
+    let result = '';
+
+    for (const char of value) {
+      const charWidth = stringWidth(char);
+      if (currentWidth + charWidth + ellipsisWidth > maxWidth) {
+        break;
+      }
+      result += char;
+      currentWidth += charWidth;
+    }
+
+    return result + ellipsis;
+  }, []);
+
+  const renderBranchRow = useCallback(
+    (item: BranchItem, isSelected: boolean, context: { columns: number }) => {
+      const columns = Math.max(20, context.columns);
+      const arrow = isSelected ? '>' : ' ';
+      const timestampText = formatLatestCommit(item.latestCommitTimestamp);
+      const timestampWidth = stringWidth(timestampText);
+
+      const indicatorInfo = cleanupUI?.indicators?.[item.name];
+      let indicatorIcon = indicatorInfo?.icon ?? '';
+      if (indicatorIcon && indicatorInfo?.color && !isSelected) {
+        switch (indicatorInfo.color) {
+          case 'cyan':
+            indicatorIcon = chalk.cyan(indicatorIcon);
+            break;
+          case 'green':
+            indicatorIcon = chalk.green(indicatorIcon);
+            break;
+          case 'yellow':
+            indicatorIcon = chalk.yellow(indicatorIcon);
+            break;
+          case 'red':
+            indicatorIcon = chalk.red(indicatorIcon);
+            break;
+          default:
+            break;
+        }
+      }
+      const indicatorPrefix = indicatorIcon ? `${indicatorIcon} ` : '';
+      const staticPrefix = `${arrow} ${indicatorPrefix}`;
+      const staticPrefixWidth = stringWidth(staticPrefix);
+
+      const availableLeftWidth = Math.max(staticPrefixWidth, columns - timestampWidth - 1);
+      const maxLabelWidth = Math.max(0, availableLeftWidth - staticPrefixWidth);
+      const truncatedLabel = truncateToWidth(item.label, maxLabelWidth);
+      const leftText = `${staticPrefix}${truncatedLabel}`;
+
+      const leftMeasuredWidth = stringWidth(leftText);
+      const leftDisplayWidth = measureDisplayWidth(leftText);
+      const baseGapWidth = Math.max(1, columns - leftMeasuredWidth - timestampWidth);
+      const displayGapWidth = Math.max(1, columns - leftDisplayWidth - timestampWidth);
+      const cursorShift = Math.max(0, displayGapWidth - baseGapWidth);
+
+      const gap = ' '.repeat(baseGapWidth);
+      const cursorAdjust = cursorShift > 0 ? `\u001b[${cursorShift}C` : '';
+
+      let line = `${leftText}${gap}${cursorAdjust}${timestampText}`;
+      const paddingWidth = Math.max(0, columns - stringWidth(line));
+      if (paddingWidth > 0) {
+        line += ' '.repeat(paddingWidth);
+      }
+
+      const output = isSelected
+        ? `${line}`
+        : line;
+      return <Text>{output}</Text>;
+    },
+    [cleanupUI, formatLatestCommit, truncateToWidth]
+  );
+
+  return (
+    <Box flexDirection="column" height={rows}>
+      {/* Header */}
+      <Header
+        title="gwt - Branch Selection"
+        titleColor="cyan"
+        version={version}
+        {...(workingDirectory !== undefined && { workingDirectory })}
+      />
+
+      {/* Stats */}
+      <Box marginTop={1}>
+        <Stats stats={stats} lastUpdated={lastUpdated} />
+      </Box>
+
+      {/* Content */}
+      <Box flexDirection="column" flexGrow={1}>
+        <LoadingIndicator
+          isLoading={Boolean(loading)}
+          delay={loadingIndicatorDelay}
+          message="Loading Git information..."
+        />
+
+        {error && (
+          <Box flexDirection="column">
+            <Text color="red" bold>
+              Error: {error.message}
+            </Text>
+            {process.env.DEBUG && error.stack && (
+              <Box marginTop={1}>
+                <Text color="gray">{error.stack}</Text>
+              </Box>
+            )}
+          </Box>
+        )}
+
+        {!loading && !error && branches.length === 0 && (
+          <Box>
+            <Text dimColor>No branches found</Text>
+          </Box>
+        )}
+
+        {!loading && !error && branches.length > 0 && (
+          <Select
+            items={branches}
+            onSelect={onSelect}
+            limit={limit}
+            disabled={Boolean(cleanupUI?.inputLocked)}
+            renderIndicator={() => null}
+            renderItem={renderBranchRow}
+          />
+        )}
+      </Box>
+
+      {cleanupUI?.footerMessage && (
+        <Box marginBottom={1}>
+          {cleanupUI.footerMessage.color ? (
+            <Text color={cleanupUI.footerMessage.color}>
+              {cleanupUI.footerMessage.text}
+            </Text>
+          ) : (
+            <Text>{cleanupUI.footerMessage.text}</Text>
+          )}
+        </Box>
+      )}
+
+      {/* Footer */}
+      <Footer actions={footerActions} />
+    </Box>
+  );
+}

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

@@ -0,0 +1,149 @@
+import React, { useState } 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 type ExecutionMode = 'normal' | 'continue' | 'resume';
+
+export interface ExecutionModeItem {
+  label: string;
+  value: ExecutionMode;
+  description: string;
+}
+
+export interface SkipPermissionsItem {
+  label: string;
+  value: string; // "yes" or "no"
+  description: string;
+}
+
+export interface ExecutionModeResult {
+  mode: ExecutionMode;
+  skipPermissions: boolean;
+}
+
+export interface ExecutionModeSelectorScreenProps {
+  onBack: () => void;
+  onSelect: (result: ExecutionModeResult) => void;
+  version?: string | null;
+}
+
+/**
+ * ExecutionModeSelectorScreen - Screen for selecting execution mode (2-step)
+ * Step 1: Select mode (Normal/Continue/Resume)
+ * Step 2: Select skip permissions (Yes/No)
+ * Layout: Header + Selection + Footer
+ */
+export function ExecutionModeSelectorScreen({
+  onBack,
+  onSelect,
+  version,
+}: ExecutionModeSelectorScreenProps) {
+  const { rows } = useTerminalSize();
+  const [step, setStep] = useState<1 | 2>(1);
+  const [selectedMode, setSelectedMode] = useState<ExecutionMode | null>(null);
+
+  // Handle keyboard input
+  useInput((input, key) => {
+    if (key.escape) {
+      if (step === 2) {
+        // Go back to step 1
+        setStep(1);
+        setSelectedMode(null);
+      } else {
+        // Go back to previous screen
+        onBack();
+      }
+    }
+  });
+
+  // Execution mode options (Step 1)
+  const modeItems: ExecutionModeItem[] = [
+    {
+      label: 'Normal',
+      value: 'normal',
+      description: 'Start fresh session',
+    },
+    {
+      label: 'Continue',
+      value: 'continue',
+      description: 'Continue from last session',
+    },
+    {
+      label: 'Resume',
+      value: 'resume',
+      description: 'Resume specific session',
+    },
+  ];
+
+  // Skip permissions options (Step 2)
+  const skipPermissionsItems: SkipPermissionsItem[] = [
+    {
+      label: 'No',
+      value: 'no',
+      description: 'Normal permission checks',
+    },
+    {
+      label: 'Yes',
+      value: 'yes',
+      description: 'Skip permission checks (--dangerously-skip-permissions / --yolo)',
+    },
+  ];
+
+  // Handle mode selection (Step 1)
+  const handleModeSelect = (item: ExecutionModeItem) => {
+    setSelectedMode(item.value);
+    setStep(2);
+  };
+
+  // Handle skip permissions selection (Step 2)
+  const handleSkipPermissionsSelect = (item: SkipPermissionsItem) => {
+    if (selectedMode) {
+      onSelect({
+        mode: selectedMode,
+        skipPermissions: item.value === 'yes',
+      });
+    }
+  };
+
+  // Footer actions
+  const footerActions = [
+    { key: 'enter', description: 'Select' },
+    { key: 'esc', description: step === 2 ? 'Back to mode selection' : 'Back' },
+  ];
+
+  return (
+    <Box flexDirection="column" height={rows}>
+      {/* Header */}
+      <Header
+        title={step === 1 ? 'Execution Mode' : 'Skip Permissions'}
+        titleColor="magenta"
+        version={version}
+      />
+
+      {/* Content */}
+      <Box flexDirection="column" flexGrow={1} marginTop={1}>
+        {step === 1 ? (
+          <>
+            <Box marginBottom={1}>
+              <Text>Select execution mode:</Text>
+            </Box>
+            <Select items={modeItems} onSelect={handleModeSelect} />
+          </>
+        ) : (
+          <>
+            <Box marginBottom={1}>
+              <Text>Skip permission checks? (--dangerously-skip-permissions / --yolo)</Text>
+            </Box>
+            <Select items={skipPermissionsItems} onSelect={handleSkipPermissionsSelect} />
+          </>
+        )}
+      </Box>
+
+      {/* Footer */}
+      <Footer actions={footerActions} />
+    </Box>
+  );
+}