@akiojin/gwt 2.1.1 → 2.3.0

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import { Select, type SelectItem } from './Select.js';
+import React from "react";
+import { Box, Text } from "ink";
+import { Select, type SelectItem } from "./Select.js";
 
 export interface ConfirmProps {
   message: string;
@@ -16,17 +16,17 @@ export interface ConfirmProps {
 export function Confirm({
   message,
   onConfirm,
-  yesLabel = 'Yes',
-  noLabel = 'No',
+  yesLabel = "Yes",
+  noLabel = "No",
   defaultNo = false,
 }: ConfirmProps) {
   const items: SelectItem[] = [
-    { label: yesLabel, value: 'yes' },
-    { label: noLabel, value: 'no' },
+    { label: yesLabel, value: "yes" },
+    { label: noLabel, value: "no" },
   ];
 
   const handleSelect = (item: SelectItem) => {
-    onConfirm(item.value === 'yes');
+    onConfirm(item.value === "yes");
   };
 
   return (
@@ -34,7 +34,11 @@ export function Confirm({
       <Box marginBottom={1}>
         <Text>{message}</Text>
       </Box>
-      <Select items={items} onSelect={handleSelect} initialIndex={defaultNo ? 1 : 0} />
+      <Select
+        items={items}
+        onSelect={handleSelect}
+        initialIndex={defaultNo ? 1 : 0}
+      />
     </Box>
   );
 }

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

@@ -1,5 +1,5 @@
-import React, { Component, type ReactNode } from 'react';
-import { Box, Text } from 'ink';
+import React, { Component, type ReactNode } from "react";
+import { Box, Text } from "ink";
 
 interface ErrorBoundaryProps {
   children: ReactNode;
@@ -14,7 +14,10 @@ interface ErrorBoundaryState {
 /**
  * Error Boundary component to catch and display errors
  */
-export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+export class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
   constructor(props: ErrorBoundaryProps) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -25,7 +28,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
   }
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
-    console.error('ErrorBoundary caught an error:', error, errorInfo);
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
   }
 
   componentDidUpdate(prevProps: ErrorBoundaryProps): void {
@@ -46,7 +49,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
       return (
         <Box flexDirection="column" padding={1}>
           <Text color="red" bold>
-            Error: {this.state.error.message || 'Unknown error'}
+            Error: {this.state.error.message || "Unknown error"}
           </Text>
         </Box>
       );

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import TextInput from 'ink-text-input';
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
 
 export interface InputProps {
   value: string;
@@ -9,12 +9,34 @@ export interface InputProps {
   placeholder?: string;
   label?: string;
   mask?: string;
+  /**
+   * Block specific key bindings to prevent parent handlers from processing them
+   * Useful for blocking shortcuts like 'c', 'r', 'm' while typing
+   */
+  blockKeys?: string[];
 }
 
 /**
  * Input component - wrapper around ink-text-input with optional label
  */
-export function Input({ value, onChange, onSubmit, placeholder, label, mask }: InputProps) {
+export function Input({
+  value,
+  onChange,
+  onSubmit,
+  placeholder,
+  label,
+  mask,
+  blockKeys,
+}: InputProps) {
+  // Block specific keys from being processed by parent useInput handlers
+  // This prevents shortcuts (c/r/m) from triggering while typing in the input
+  useInput((input) => {
+    if (blockKeys && blockKeys.includes(input)) {
+      // Consume the key - don't let it propagate to parent handlers
+      return;
+    }
+  });
+
   return (
     <Box flexDirection="column">
       {label && (

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Box, Text } from 'ink';
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text } from "ink";
 
 export interface LoadingIndicatorProps {
   /** true にするとローディング表示を開始する */
@@ -14,7 +14,7 @@ export interface LoadingIndicatorProps {
   frames?: string[];
 }
 
-const DEFAULT_FRAMES = ['|', '/', '-', '\\'];
+const DEFAULT_FRAMES = ["|", "/", "-", "\\"];
 
 /**
  * ローディング中に簡易スピナーとメッセージを表示するコンポーネント。
@@ -23,7 +23,7 @@ const DEFAULT_FRAMES = ['|', '/', '-', '\\'];
 export function LoadingIndicator({
   isLoading,
   delay = 300,
-  message = 'Loading... please wait',
+  message = "Loading... please wait",
   interval = 80,
   frames = DEFAULT_FRAMES,
 }: LoadingIndicatorProps) {
@@ -33,7 +33,10 @@ export function LoadingIndicator({
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   // スピナーに使用するフレームをキャッシュ
-  const safeFrames = useMemo(() => (frames.length > 0 ? frames : DEFAULT_FRAMES), [frames]);
+  const safeFrames = useMemo(
+    () => (frames.length > 0 ? frames : DEFAULT_FRAMES),
+    [frames],
+  );
 
   useEffect(() => {
     // ローディングが開始したら、delay後に表示を有効化

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { Box, Text, useInput, useStdout } from 'ink';
+import React, { useEffect, useState } from "react";
+import { Box, Text, useInput, useStdout } from "ink";
 
 export interface SelectItem {
   label: string;
@@ -16,7 +16,7 @@ export interface SelectProps<T extends SelectItem = SelectItem> {
   renderItem?: (
     item: T,
     isSelected: boolean,
-    context: { columns: number }
+    context: { columns: number },
   ) => React.ReactNode;
   // Optional controlled component props for cursor position
   selectedIndex?: number;
@@ -29,7 +29,7 @@ export interface SelectProps<T extends SelectItem = SelectItem> {
  */
 function arePropsEqual<T extends SelectItem = SelectItem>(
   prevProps: SelectProps<T>,
-  nextProps: SelectProps<T>
+  nextProps: SelectProps<T>,
 ): boolean {
   // Check if non-array props are the same
   if (
@@ -59,7 +59,10 @@ function arePropsEqual<T extends SelectItem = SelectItem>(
       return false;
     }
 
-    if (prevItem.value !== nextItem.value || prevItem.label !== nextItem.label) {
+    if (
+      prevItem.value !== nextItem.value ||
+      prevItem.label !== nextItem.label
+    ) {
       return false;
     }
   }
@@ -73,7 +76,7 @@ function arePropsEqual<T extends SelectItem = SelectItem>(
  * Cursor stops at top and bottom instead of wrapping around
  * Wrapped with React.memo for performance optimization
  */
-const SelectComponent = <T extends SelectItem = SelectItem,>({
+const SelectComponent = <T extends SelectItem = SelectItem>({
   items,
   onSelect,
   limit,
@@ -85,15 +88,18 @@ const SelectComponent = <T extends SelectItem = SelectItem,>({
   onSelectedIndexChange,
 }: SelectProps<T>) => {
   // Support both controlled and uncontrolled modes
-  const [internalSelectedIndex, setInternalSelectedIndex] = useState(initialIndex);
+  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 selectedIndex = isControlled
+    ? externalSelectedIndex
+    : internalSelectedIndex;
 
   const updateSelectedIndex = (value: number | ((prev: number) => number)) => {
-    const newIndex = typeof value === 'function' ? value(selectedIndex) : value;
+    const newIndex = typeof value === "function" ? value(selectedIndex) : value;
 
     if (!isControlled) {
       setInternalSelectedIndex(newIndex);
@@ -134,7 +140,7 @@ const SelectComponent = <T extends SelectItem = SelectItem,>({
 
     // Only handle navigation and selection keys
     // Let other keys (q, m, n, c, etc.) propagate to parent components
-    if (key.upArrow || input === 'k') {
+    if (key.upArrow || input === "k") {
       // Move up but don't loop - stop at 0
       updateSelectedIndex((current) => {
         const newIndex = Math.max(0, current - 1);
@@ -146,7 +152,7 @@ const SelectComponent = <T extends SelectItem = SelectItem,>({
 
         return newIndex;
       });
-    } else if (key.downArrow || input === 'j') {
+    } 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);
@@ -189,11 +195,13 @@ const SelectComponent = <T extends SelectItem = SelectItem,>({
           );
         }
 
-        const indicatorElement = renderIndicator
-          ? renderIndicator(item, isSelected)
-          : isSelected
-            ? <Text color="cyan">›</Text>
-            : <Text> </Text>;
+        const indicatorElement = renderIndicator ? (
+          renderIndicator(item, isSelected)
+        ) : isSelected ? (
+          <Text color="cyan">›</Text>
+        ) : (
+          <Text> </Text>
+        );
 
         return (
           <Box key={item.value} flexDirection="row">
@@ -213,4 +221,7 @@ const SelectComponent = <T extends SelectItem = SelectItem,>({
 /**
  * Export memoized Select component
  */
-export const Select = React.memo(SelectComponent, arePropsEqual) as typeof SelectComponent;
+export const Select = React.memo(
+  SelectComponent,
+  arePropsEqual,
+) as typeof SelectComponent;

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

@@ -5,9 +5,7 @@ import { Header } from "./Header.js";
 
 describe("Header Component", () => {
   it("正常系: versionプロップありの場合、タイトルとバージョンを表示する", () => {
-    const { lastFrame } = render(
-      <Header title="gwt" version="1.12.3" />
-    );
+    const { lastFrame } = render(<Header title="gwt" version="1.12.3" />);
 
     const output = lastFrame();
 
@@ -27,9 +25,7 @@ describe("Header Component", () => {
   });
 
   it("正常系: version={null}の場合、タイトルのみ表示する", () => {
-    const { lastFrame } = render(
-      <Header title="gwt" version={null} />
-    );
+    const { lastFrame } = render(<Header title="gwt" version={null} />);
 
     const output = lastFrame();
 
@@ -46,7 +42,7 @@ describe("Header Component", () => {
         version="1.12.3"
         showDivider={true}
         dividerChar="─"
-      />
+      />,
     );
 
     const output = lastFrame();
@@ -57,11 +53,7 @@ describe("Header Component", () => {
 
   it("正常系: showDivider=falseの場合、区切り線が表示されない", () => {
     const { lastFrame } = render(
-      <Header
-        title="gwt"
-        version="1.12.3"
-        showDivider={false}
-      />
+      <Header title="gwt" version="1.12.3" showDivider={false} />,
     );
 
     const output = lastFrame();
@@ -73,9 +65,7 @@ describe("Header Component", () => {
   });
 
   it("正常系: プレリリースバージョンも正しく表示される", () => {
-    const { lastFrame } = render(
-      <Header title="gwt" version="2.0.0-beta.1" />
-    );
+    const { lastFrame } = render(<Header title="gwt" version="2.0.0-beta.1" />);
 
     const output = lastFrame();
 

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

@@ -1,11 +1,11 @@
-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';
+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;
 
@@ -27,7 +27,11 @@ export interface AIToolSelectorScreenProps {
  *
  * This screen dynamically loads available tools from the configuration (builtin + custom).
  */
-export function AIToolSelectorScreen({ onBack, onSelect, version }: AIToolSelectorScreenProps) {
+export function AIToolSelectorScreen({
+  onBack,
+  onSelect,
+  version,
+}: AIToolSelectorScreenProps) {
   const { rows } = useTerminalSize();
   const [toolItems, setToolItems] = useState<AIToolItem[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -60,7 +64,7 @@ export function AIToolSelectorScreen({ onBack, onSelect, version }: AIToolSelect
         setToolItems(items);
       } catch (error) {
         // If loading fails, show error in console but don't crash
-        console.error('Failed to load tools:', error);
+        console.error("Failed to load tools:", error);
         // Fall back to empty array
         setToolItems([]);
       } finally {
@@ -86,8 +90,8 @@ export function AIToolSelectorScreen({ onBack, onSelect, version }: AIToolSelect
 
   // Footer actions
   const footerActions = [
-    { key: 'enter', description: 'Select' },
-    { key: 'esc', description: 'Back' },
+    { key: "enter", description: "Select" },
+    { key: "esc", description: "Back" },
   ];
 
   return (
@@ -103,7 +107,9 @@ export function AIToolSelectorScreen({ onBack, onSelect, version }: AIToolSelect
         {isLoading ? (
           <Text>Loading tools...</Text>
         ) : toolItems.length === 0 ? (
-          <Text color="yellow">No tools available. Please check your configuration.</Text>
+          <Text color="yellow">
+            No tools available. Please check your configuration.
+          </Text>
         ) : (
           <Select items={toolItems} onSelect={handleSelect} />
         )}

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

@@ -1,16 +1,16 @@
-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';
+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' | 'bugfix' | 'hotfix' | 'release';
-type Step = 'type-selection' | 'name-input';
+type BranchType = "feature" | "bugfix" | "hotfix" | "release";
+type Step = "type-selection" | "name-input";
 
-const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧'];
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧"];
 
 export interface BranchCreatorScreenProps {
   onBack: () => void;
@@ -39,11 +39,13 @@ export function BranchCreatorScreen({
   disableAnimation = false,
 }: BranchCreatorScreenProps) {
   const { rows } = useTerminalSize();
-  const [step, setStep] = useState<Step>('type-selection');
-  const [selectedType, setSelectedType] = useState<BranchType>('feature');
-  const [branchName, setBranchName] = useState('');
+  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 [pendingBranchName, setPendingBranchName] = useState<string | null>(
+    null,
+  );
   const spinnerIndexRef = useRef(0);
   const [spinnerIndex, setSpinnerIndex] = useState(0);
 
@@ -63,40 +65,43 @@ export function BranchCreatorScreen({
   // Branch type options
   const branchTypeItems: BranchTypeItem[] = [
     {
-      label: 'feature',
-      value: 'feature',
-      description: 'New feature development',
+      label: "feature",
+      value: "feature",
+      description: "New feature development",
     },
     {
-      label: 'bugfix',
-      value: 'bugfix',
-      description: 'Bug fix',
+      label: "bugfix",
+      value: "bugfix",
+      description: "Bug fix",
     },
     {
-      label: 'hotfix',
-      value: 'hotfix',
-      description: 'Critical bug fix',
+      label: "hotfix",
+      value: "hotfix",
+      description: "Critical bug fix",
     },
     {
-      label: 'release',
-      value: 'release',
-      description: 'Release preparation',
+      label: "release",
+      value: "release",
+      description: "Release preparation",
     },
   ];
 
   // Handle branch type selection
   const handleTypeSelect = useCallback((item: BranchTypeItem) => {
     setSelectedType(item.value);
-    setStep('name-input');
+    setStep("name-input");
   }, []);
 
   // Handle branch name input
-  const handleNameChange = useCallback((value: string) => {
-    if (isCreating) {
-      return;
-    }
-    setBranchName(value);
-  }, [isCreating]);
+  const handleNameChange = useCallback(
+    (value: string) => {
+      if (isCreating) {
+        return;
+      }
+      setBranchName(value);
+    },
+    [isCreating],
+  );
 
   // Handle branch creation
   const handleCreate = useCallback(async () => {
@@ -109,7 +114,10 @@ export function BranchCreatorScreen({
       return;
     }
 
-    const prefix = BRANCH_PREFIXES[selectedType.toUpperCase() as keyof typeof BRANCH_PREFIXES];
+    const prefix =
+      BRANCH_PREFIXES[
+        selectedType.toUpperCase() as keyof typeof BRANCH_PREFIXES
+      ];
     const fullBranchName = `${prefix}${trimmedName}`;
 
     setIsCreating(true);
@@ -125,18 +133,17 @@ export function BranchCreatorScreen({
   }, [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' },
-          ];
+  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) {
@@ -146,7 +153,8 @@ export function BranchCreatorScreen({
     }
 
     const interval = setInterval(() => {
-      spinnerIndexRef.current = (spinnerIndexRef.current + 1) % SPINNER_FRAMES.length;
+      spinnerIndexRef.current =
+        (spinnerIndexRef.current + 1) % SPINNER_FRAMES.length;
       setSpinnerIndex(spinnerIndexRef.current);
     }, 120);
 
@@ -167,7 +175,10 @@ export function BranchCreatorScreen({
         {baseBranch && (
           <Box marginBottom={1}>
             <Text>
-              Base branch: <Text bold color="cyan">{baseBranch}</Text>
+              Base branch:{" "}
+              <Text bold color="cyan">
+                {baseBranch}
+              </Text>
             </Text>
           </Box>
         )}
@@ -175,9 +186,9 @@ export function BranchCreatorScreen({
           <Box flexDirection="column">
             <Box marginBottom={1}>
               <Text>
-                {spinnerFrame}{' '}
+                {spinnerFrame}{" "}
                 <Text color="cyan">
-                  Creating branch{' '}
+                  Creating branch{" "}
                   <Text bold>
                     {pendingBranchName ??
                       `${BRANCH_PREFIXES[selectedType.toUpperCase() as keyof typeof BRANCH_PREFIXES]}${branchName.trim()}`}
@@ -185,9 +196,11 @@ export function BranchCreatorScreen({
                 </Text>
               </Text>
             </Box>
-            <Text color="gray">Please wait while the branch is being created...</Text>
+            <Text color="gray">
+              Please wait while the branch is being created...
+            </Text>
           </Box>
-        ) : step === 'type-selection' ? (
+        ) : step === "type-selection" ? (
           <Box flexDirection="column">
             <Box marginBottom={1}>
               <Text>Select branch type:</Text>
@@ -198,7 +211,14 @@ export function BranchCreatorScreen({
           <Box flexDirection="column">
             <Box marginBottom={1}>
               <Text>
-                Branch name prefix: <Text bold>{BRANCH_PREFIXES[selectedType.toUpperCase() as keyof typeof BRANCH_PREFIXES]}</Text>
+                Branch name prefix:{" "}
+                <Text bold>
+                  {
+                    BRANCH_PREFIXES[
+                      selectedType.toUpperCase() as keyof typeof BRANCH_PREFIXES
+                    ]
+                  }
+                </Text>
               </Text>
             </Box>
             <Input