@akiojin/gwt 2.0.0

package/src/cli/ui/components/common/Confirm.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { Select, type SelectItem } from './Select.js';
+
+export interface ConfirmProps {
+  message: string;
+  onConfirm: (confirmed: boolean) => void;
+  yesLabel?: string;
+  noLabel?: string;
+  defaultNo?: boolean;
+}
+
+/**
+ * Confirm component - Yes/No confirmation dialog
+ */
+export function Confirm({
+  message,
+  onConfirm,
+  yesLabel = 'Yes',
+  noLabel = 'No',
+  defaultNo = false,
+}: ConfirmProps) {
+  const items: SelectItem[] = [
+    { label: yesLabel, value: 'yes' },
+    { label: noLabel, value: 'no' },
+  ];
+
+  const handleSelect = (item: SelectItem) => {
+    onConfirm(item.value === 'yes');
+  };
+
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={1}>
+        <Text>{message}</Text>
+      </Box>
+      <Select items={items} onSelect={handleSelect} initialIndex={defaultNo ? 1 : 0} />
+    </Box>
+  );
+}

package/src/cli/ui/components/common/ErrorBoundary.tsx

@@ -0,0 +1,57 @@
+import React, { Component, type ReactNode } from 'react';
+import { Box, Text } from 'ink';
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: React.ComponentType<{ error: Error }>;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * Error Boundary component to catch and display errors
+ */
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  componentDidUpdate(prevProps: ErrorBoundaryProps): void {
+    // Reset error state when children change
+    if (this.state.hasError && prevProps.children !== this.props.children) {
+      this.setState({ hasError: false, error: null });
+    }
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError && this.state.error) {
+      const { fallback: Fallback } = this.props;
+
+      if (Fallback) {
+        return <Fallback error={this.state.error} />;
+      }
+
+      return (
+        <Box flexDirection="column" padding={1}>
+          <Text color="red" bold>
+            Error: {this.state.error.message || 'Unknown error'}
+          </Text>
+        </Box>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/cli/ui/components/common/Input.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+
+export interface InputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: (value: string) => void;
+  placeholder?: string;
+  label?: string;
+  mask?: string;
+}
+
+/**
+ * Input component - wrapper around ink-text-input with optional label
+ */
+export function Input({ value, onChange, onSubmit, placeholder, label, mask }: InputProps) {
+  return (
+    <Box flexDirection="column">
+      {label && (
+        <Box marginBottom={0}>
+          <Text>{label}</Text>
+        </Box>
+      )}
+      <Box>
+        <TextInput
+          value={value}
+          onChange={onChange}
+          onSubmit={onSubmit}
+          {...(placeholder !== undefined && { placeholder })}
+          {...(mask !== undefined && { mask })}
+        />
+      </Box>
+    </Box>
+  );
+}

package/src/cli/ui/components/common/LoadingIndicator.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Box, Text } from 'ink';
+
+export interface LoadingIndicatorProps {
+  /** true にするとローディング表示を開始する */
+  isLoading: boolean;
+  /** 表示までの遅延時間 (ms)。デフォルトは 300ms */
+  delay?: number;
+  /** 表示するメッセージ */
+  message?: string;
+  /** スピナーの更新間隔 (ms)。デフォルトは 80ms */
+  interval?: number;
+  /** 使用するスピナーフレーム。ASCII のみを想定 */
+  frames?: string[];
+}
+
+const DEFAULT_FRAMES = ['|', '/', '-', '\\'];
+
+/**
+ * ローディング中に簡易スピナーとメッセージを表示するコンポーネント。
+ * delay で指定した時間を超えるまでスピナーを表示しないことで、短時間の処理ではちらつきを抑える。
+ */
+export function LoadingIndicator({
+  isLoading,
+  delay = 300,
+  message = 'Loading... please wait',
+  interval = 80,
+  frames = DEFAULT_FRAMES,
+}: LoadingIndicatorProps) {
+  const [visible, setVisible] = useState(false);
+  const [frameIndex, setFrameIndex] = useState(0);
+  const delayTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  // スピナーに使用するフレームをキャッシュ
+  const safeFrames = useMemo(() => (frames.length > 0 ? frames : DEFAULT_FRAMES), [frames]);
+
+  useEffect(() => {
+    // ローディングが開始したら、delay後に表示を有効化
+    if (isLoading) {
+      delayTimerRef.current = setTimeout(() => {
+        setVisible(true);
+      }, delay);
+    } else {
+      setVisible(false);
+      setFrameIndex(0);
+    }
+
+    return () => {
+      if (delayTimerRef.current) {
+        clearTimeout(delayTimerRef.current);
+        delayTimerRef.current = null;
+      }
+    };
+  }, [isLoading, delay]);
+
+  useEffect(() => {
+    // 表示中のみスピナーを回転
+    if (visible && isLoading) {
+      intervalRef.current = setInterval(() => {
+        setFrameIndex((current) => (current + 1) % safeFrames.length);
+      }, interval);
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [visible, isLoading, interval, safeFrames.length]);
+
+  // ローディングが解消されたらタイマーをクリア
+  useEffect(() => {
+    if (!isLoading && delayTimerRef.current) {
+      clearTimeout(delayTimerRef.current);
+      delayTimerRef.current = null;
+    }
+  }, [isLoading]);
+
+  if (!isLoading || !visible) {
+    return null;
+  }
+
+  return (
+    <Box gap={1}>
+      <Text color="yellow" data-testid="loading-indicator-frame">
+        {safeFrames[frameIndex]}
+      </Text>
+      <Text color="yellow" data-testid="loading-indicator-message">
+        {message}
+      </Text>
+    </Box>
+  );
+}

package/src/cli/ui/components/common/Select.tsx

@@ -0,0 +1,216 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Text, useInput, useStdout } from 'ink';
+
+export interface SelectItem {
+  label: string;
+  value: string;
+}
+
+export interface SelectProps<T extends SelectItem = SelectItem> {
+  items: T[];
+  onSelect: (item: T) => void;
+  limit?: number;
+  initialIndex?: number;
+  disabled?: boolean;
+  renderIndicator?: (item: T, isSelected: boolean) => React.ReactNode;
+  renderItem?: (
+    item: T,
+    isSelected: boolean,
+    context: { columns: number }
+  ) => React.ReactNode;
+  // Optional controlled component props for cursor position
+  selectedIndex?: number;
+  onSelectedIndexChange?: (index: number) => void;
+}
+
+/**
+ * Custom comparison function for React.memo
+ * Compares items array by content (value and label) instead of reference
+ */
+function arePropsEqual<T extends SelectItem = SelectItem>(
+  prevProps: SelectProps<T>,
+  nextProps: SelectProps<T>
+): boolean {
+  // Check if non-array props are the same
+  if (
+    prevProps.limit !== nextProps.limit ||
+    prevProps.disabled !== nextProps.disabled ||
+    prevProps.initialIndex !== nextProps.initialIndex ||
+    prevProps.selectedIndex !== nextProps.selectedIndex ||
+    prevProps.onSelect !== nextProps.onSelect ||
+    prevProps.onSelectedIndexChange !== nextProps.onSelectedIndexChange ||
+    prevProps.renderIndicator !== nextProps.renderIndicator ||
+    prevProps.renderItem !== nextProps.renderItem
+  ) {
+    return false;
+  }
+
+  // Check if items arrays have the same length
+  if (prevProps.items.length !== nextProps.items.length) {
+    return false;
+  }
+
+  // Compare items by content (value and label)
+  for (let i = 0; i < prevProps.items.length; i++) {
+    const prevItem = prevProps.items[i];
+    const nextItem = nextProps.items[i];
+
+    if (!prevItem || !nextItem) {
+      return false;
+    }
+
+    if (prevItem.value !== nextItem.value || prevItem.label !== nextItem.label) {
+      return false;
+    }
+  }
+
+  // All props are equal
+  return true;
+}
+
+/**
+ * Select component - custom implementation with no looping
+ * Cursor stops at top and bottom instead of wrapping around
+ * Wrapped with React.memo for performance optimization
+ */
+const SelectComponent = <T extends SelectItem = SelectItem,>({
+  items,
+  onSelect,
+  limit,
+  initialIndex = 0,
+  disabled = false,
+  renderIndicator,
+  renderItem,
+  selectedIndex: externalSelectedIndex,
+  onSelectedIndexChange,
+}: SelectProps<T>) => {
+  // Support both controlled and uncontrolled modes
+  const [internalSelectedIndex, setInternalSelectedIndex] = useState(initialIndex);
+  const [offset, setOffset] = useState(0);
+
+  // Use external selectedIndex if provided (controlled mode), otherwise use internal state
+  const isControlled = externalSelectedIndex !== undefined;
+  const selectedIndex = isControlled ? externalSelectedIndex : internalSelectedIndex;
+
+  const updateSelectedIndex = (value: number | ((prev: number) => number)) => {
+    const newIndex = typeof value === 'function' ? value(selectedIndex) : value;
+
+    if (!isControlled) {
+      setInternalSelectedIndex(newIndex);
+    }
+
+    if (onSelectedIndexChange) {
+      onSelectedIndexChange(newIndex);
+    }
+  };
+
+  useEffect(() => {
+    if (items.length === 0) {
+      updateSelectedIndex(0);
+      setOffset(0);
+      return;
+    }
+
+    updateSelectedIndex((current) => {
+      const clamped = Math.min(current, items.length - 1);
+      return clamped < 0 ? 0 : clamped;
+    });
+
+    if (limit) {
+      setOffset((current) => {
+        if (current <= items.length - limit) {
+          return current < 0 ? 0 : current;
+        }
+        const newOffset = Math.max(0, items.length - limit);
+        return newOffset;
+      });
+    }
+  }, [items, limit]);
+
+  useInput((input, key) => {
+    if (disabled) {
+      return;
+    }
+
+    // Only handle navigation and selection keys
+    // Let other keys (q, m, n, c, etc.) propagate to parent components
+    if (key.upArrow || input === 'k') {
+      // Move up but don't loop - stop at 0
+      updateSelectedIndex((current) => {
+        const newIndex = Math.max(0, current - 1);
+
+        // Adjust offset if needed for scrolling
+        if (limit && newIndex < offset) {
+          setOffset(newIndex);
+        }
+
+        return newIndex;
+      });
+    } else if (key.downArrow || input === 'j') {
+      // Move down but don't loop - stop at last item
+      updateSelectedIndex((current) => {
+        const newIndex = Math.min(items.length - 1, current + 1);
+
+        // Adjust offset if needed for scrolling
+        if (limit && newIndex >= offset + limit) {
+          setOffset(newIndex - limit + 1);
+        }
+
+        return newIndex;
+      });
+    } else if (key.return) {
+      // Select current item
+      const selectedItem = items[selectedIndex];
+      if (selectedItem && !disabled) {
+        onSelect(selectedItem);
+      }
+    }
+    // All other keys are ignored and will propagate to parent components
+  });
+
+  // Determine visible items based on limit
+  const visibleItems = limit ? items.slice(offset, offset + limit) : items;
+  const visibleStartIndex = limit ? offset : 0;
+
+  const { stdout } = useStdout();
+  const columns = stdout?.columns ?? 80;
+
+  return (
+    <Box flexDirection="column">
+      {visibleItems.map((item, index) => {
+        const actualIndex = visibleStartIndex + index;
+        const isSelected = actualIndex === selectedIndex;
+
+        if (renderItem) {
+          return (
+            <Box key={item.value} flexDirection="row">
+              {renderItem(item, isSelected, { columns })}
+            </Box>
+          );
+        }
+
+        const indicatorElement = renderIndicator
+          ? renderIndicator(item, isSelected)
+          : isSelected
+            ? <Text color="cyan">›</Text>
+            : <Text> </Text>;
+
+        return (
+          <Box key={item.value} flexDirection="row">
+            <Box marginRight={1}>{indicatorElement ?? <Text> </Text>}</Box>
+            {isSelected ? (
+              <Text color="cyan">{item.label}</Text>
+            ) : (
+              <Text>{item.label}</Text>
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
+
+/**
+ * Export memoized Select component
+ */
+export const Select = React.memo(SelectComponent, arePropsEqual) as typeof SelectComponent;

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+export interface FooterAction {
+  key: string;
+  description: string;
+}
+
+export interface FooterProps {
+  actions: FooterAction[];
+  separator?: string;
+}
+
+/**
+ * Footer component - displays keyboard actions
+ * Optimized with React.memo to prevent unnecessary re-renders
+ */
+export const Footer = React.memo(function Footer({
+  actions,
+  separator = "  ",
+}: FooterProps) {
+  if (actions.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box>
+      {actions.map((action, index) => (
+        <Box key={`${action.key}-${index}`}>
+          <Text dimColor>[</Text>
+          <Text bold color="cyan">
+            {action.key}
+          </Text>
+          <Text dimColor>]</Text>
+          <Text> {action.description}</Text>
+          {index < actions.length - 1 && <Text dimColor>{separator}</Text>}
+        </Box>
+      ))}
+    </Box>
+  );
+});

package/src/cli/ui/components/parts/Header.test.tsx

@@ -0,0 +1,85 @@
+import { describe, it, expect } from "vitest";
+import { render } from "ink-testing-library";
+import React from "react";
+import { Header } from "./Header.js";
+
+describe("Header Component", () => {
+  it("正常系: versionプロップありの場合、タイトルとバージョンを表示する", () => {
+    const { lastFrame } = render(
+      <Header title="gwt" version="1.12.3" />
+    );
+
+    const output = lastFrame();
+
+    // タイトルとバージョンが含まれることを確認
+    expect(output).toContain("gwt v1.12.3");
+  });
+
+  it("正常系: versionプロップなし（undefined）の場合、タイトルのみ表示する", () => {
+    const { lastFrame } = render(<Header title="gwt" />);
+
+    const output = lastFrame();
+
+    // タイトルのみが含まれることを確認
+    expect(output).toContain("gwt");
+    // "v"が含まれていないことを確認（バージョンが表示されていない）
+    expect(output).not.toMatch(/v\d+\.\d+\.\d+/);
+  });
+
+  it("正常系: version={null}の場合、タイトルのみ表示する", () => {
+    const { lastFrame } = render(
+      <Header title="gwt" version={null} />
+    );
+
+    const output = lastFrame();
+
+    // タイトルのみが含まれることを確認
+    expect(output).toContain("gwt");
+    // "v"が含まれていないことを確認（バージョンが表示されていない）
+    expect(output).not.toMatch(/v\d+\.\d+\.\d+/);
+  });
+
+  it("正常系: showDivider=trueの場合、区切り線が表示される", () => {
+    const { lastFrame } = render(
+      <Header
+        title="gwt"
+        version="1.12.3"
+        showDivider={true}
+        dividerChar="─"
+      />
+    );
+
+    const output = lastFrame();
+
+    // 区切り線が含まれることを確認
+    expect(output).toContain("─");
+  });
+
+  it("正常系: showDivider=falseの場合、区切り線が表示されない", () => {
+    const { lastFrame } = render(
+      <Header
+        title="gwt"
+        version="1.12.3"
+        showDivider={false}
+      />
+    );
+
+    const output = lastFrame();
+
+    // タイトルとバージョンは含まれる
+    expect(output).toContain("gwt v1.12.3");
+    // 区切り線が含まれないことを確認（または最小限）
+    // 注: Inkのレンダリング結果によっては、完全に区切り線がないとは限らない
+  });
+
+  it("正常系: プレリリースバージョンも正しく表示される", () => {
+    const { lastFrame } = render(
+      <Header title="gwt" version="2.0.0-beta.1" />
+    );
+
+    const output = lastFrame();
+
+    // プレリリースバージョンが含まれることを確認
+    expect(output).toContain("gwt v2.0.0-beta.1");
+  });
+});

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

@@ -0,0 +1,63 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+export interface HeaderProps {
+  title: string;
+  titleColor?: string;
+  dividerChar?: string;
+  showDivider?: boolean;
+  width?: number;
+  /**
+   * アプリケーションのバージョン文字列
+   * - string: バージョンが利用可能（例: "1.12.3"）
+   * - null: バージョン取得失敗
+   * - undefined: バージョン未提供（後方互換性のため）
+   * @default undefined
+   */
+  version?: string | null | undefined;
+  /**
+   * 起動時の作業ディレクトリの絶対パス
+   * - string: ディレクトリパスが利用可能
+   * - undefined: ディレクトリ情報未提供
+   * @default undefined
+   */
+  workingDirectory?: string;
+}
+
+/**
+ * Header component - displays title and optional divider
+ * Optimized with React.memo to prevent unnecessary re-renders
+ */
+export const Header = React.memo(function Header({
+  title,
+  titleColor = "cyan",
+  dividerChar = "─",
+  showDivider = true,
+  width = 80,
+  version,
+  workingDirectory,
+}: HeaderProps) {
+  const divider = dividerChar.repeat(width);
+  const displayTitle = version ? `${title} v${version}` : title;
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text bold color={titleColor}>
+          {displayTitle}
+        </Text>
+      </Box>
+      {showDivider && (
+        <Box>
+          <Text dimColor>{divider}</Text>
+        </Box>
+      )}
+      {workingDirectory && (
+        <Box>
+          <Text dimColor>Working Directory: </Text>
+          <Text>{workingDirectory}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+});