@akiojin/gwt 2.0.4 → 2.2.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Text } from 'ink';
+import { Box, Text, useInput } from 'ink';
 import TextInput from 'ink-text-input';
 
 export interface InputProps {
@@ -9,12 +9,26 @@ 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/screens/BranchCreatorScreen.tsx

@@ -7,7 +7,7 @@ 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 BranchType = 'feature' | 'bugfix' | 'hotfix' | 'release';
 type Step = 'type-selection' | 'name-input';
 
 const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧'];
@@ -67,6 +67,11 @@ export function BranchCreatorScreen({
       value: 'feature',
       description: 'New feature development',
     },
+    {
+      label: 'bugfix',
+      value: 'bugfix',
+      description: 'Bug fix',
+    },
     {
       label: 'hotfix',
       value: 'hotfix',

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

@@ -1,9 +1,10 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState, useMemo } 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 { Input } from '../common/Input.js';
 import { LoadingIndicator } from '../common/LoadingIndicator.js';
 import { useTerminalSize } from '../../hooks/useTerminalSize.js';
 import type { BranchItem, Statistics } from '../../types.js';
@@ -61,6 +62,11 @@ export interface BranchListScreenProps {
   cleanupUI?: CleanupUIState;
   version?: string | null;
   workingDirectory?: string;
+  // Test support: allow external control of filter mode and query
+  testFilterMode?: boolean;
+  testOnFilterModeChange?: (mode: boolean) => void;
+  testFilterQuery?: string;
+  testOnFilterQueryChange?: (query: string) => void;
 }
 
 /**
@@ -81,16 +87,65 @@ export function BranchListScreen({
   cleanupUI,
   version,
   workingDirectory,
+  testFilterMode,
+  testOnFilterModeChange,
+  testFilterQuery,
+  testOnFilterQueryChange,
 }: BranchListScreenProps) {
   const { rows } = useTerminalSize();
 
+  // Filter state - allow test control via props
+  const [internalFilterQuery, setInternalFilterQuery] = useState('');
+  const filterQuery = testFilterQuery !== undefined ? testFilterQuery : internalFilterQuery;
+  const setFilterQuery = useCallback(
+    (query: string) => {
+      setInternalFilterQuery(query);
+      testOnFilterQueryChange?.(query);
+    },
+    [testOnFilterQueryChange]
+  );
+
+  // Focus management: true = filter mode, false = branch selection mode
+  // Allow test control via props
+  const [internalFilterMode, setInternalFilterMode] = useState(false);
+  const filterMode = testFilterMode !== undefined ? testFilterMode : internalFilterMode;
+  const setFilterMode = useCallback(
+    (mode: boolean) => {
+      setInternalFilterMode(mode);
+      testOnFilterModeChange?.(mode);
+    },
+    [testOnFilterModeChange]
+  );
+
   // Handle keyboard input
-  // Note: Select component handles Enter and arrow keys
-  useInput((input) => {
+  // Note: Input component blocks specific keys (c/r/m/f) using blockKeys prop
+  // This prevents shortcuts from triggering while typing in the filter
+  useInput((input, key) => {
     if (cleanupUI?.inputLocked) {
       return;
     }
 
+    // Escape key handling
+    if (key.escape) {
+      if (filterQuery) {
+        // Clear filter query first
+        setFilterQuery('');
+        return;
+      }
+      if (filterMode) {
+        // Exit filter mode if query is empty
+        setFilterMode(false);
+        return;
+      }
+    }
+
+    // Enter filter mode with 'f' key (only in branch selection mode)
+    if (input === 'f' && !filterMode) {
+      setFilterMode(true);
+      return;
+    }
+
+    // Global shortcuts (blocked by Input component when typing in filter mode)
     if (input === 'm' && onNavigate) {
       onNavigate('worktree-manager');
     } else if (input === 'c') {
@@ -100,23 +155,48 @@ export function BranchListScreen({
     }
   });
 
+  // Filter branches based on query
+  const filteredBranches = useMemo(() => {
+    if (!filterQuery.trim()) {
+      return branches;
+    }
+
+    const query = filterQuery.toLowerCase();
+    return branches.filter((branch) => {
+      // Search in branch name
+      if (branch.name.toLowerCase().includes(query)) {
+        return true;
+      }
+
+      // Search in PR title if available (only openPR has title)
+      if (branch.openPR?.title?.toLowerCase().includes(query)) {
+        return true;
+      }
+
+      return false;
+    });
+  }, [branches, filterQuery]);
+
   // Calculate available space for branch list
   // Header: 2 lines (title + divider)
+  // Filter input: 1 line
   // Stats: 1 line
   // Empty line: 1 line
   // Footer: 1 line
-  // Total fixed: 5 lines
+  // Total fixed: 6 lines
   const headerLines = 2;
+  const filterLines = 1;
   const statsLines = 1;
   const emptyLine = 1;
   const footerLines = 1;
-  const fixedLines = headerLines + statsLines + emptyLine + footerLines;
+  const fixedLines = headerLines + filterLines + 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: 'f', description: 'Filter' },
     { key: 'r', description: 'Refresh' },
     { key: 'm', description: 'Manage worktrees' },
     { key: 'c', description: 'Cleanup branches' },
@@ -219,7 +299,7 @@ export function BranchListScreen({
       }
 
       const output = isSelected
-        ? `${line}`
+        ? `\u001b[46m\u001b[30m${line}\u001b[0m`
         : line;
       return <Text>{output}</Text>;
     },
@@ -236,8 +316,30 @@ export function BranchListScreen({
         {...(workingDirectory !== undefined && { workingDirectory })}
       />
 
+      {/* Filter Input - Always visible */}
+      <Box>
+        <Text dimColor>Filter: </Text>
+        {filterMode ? (
+          <Input
+            value={filterQuery}
+            onChange={setFilterQuery}
+            onSubmit={() => {}} // No-op: filter is applied in real-time
+            placeholder="Type to search..."
+            blockKeys={['c', 'r', 'm', 'f']} // Block shortcuts while typing
+          />
+        ) : (
+          <Text dimColor>{filterQuery || '(press f to filter)'}</Text>
+        )}
+        {filterQuery && (
+          <Text dimColor>
+            {' '}
+            (Showing {filteredBranches.length} of {branches.length})
+          </Text>
+        )}
+      </Box>
+
       {/* Stats */}
-      <Box marginTop={1}>
+      <Box>
         <Stats stats={stats} lastUpdated={lastUpdated} />
       </Box>
 
@@ -268,9 +370,15 @@ export function BranchListScreen({
           </Box>
         )}
 
-        {!loading && !error && branches.length > 0 && (
+        {!loading && !error && branches.length > 0 && filteredBranches.length === 0 && filterQuery && (
+          <Box>
+            <Text dimColor>No branches match your filter</Text>
+          </Box>
+        )}
+
+        {!loading && !error && branches.length > 0 && filteredBranches.length > 0 && (
           <Select
-            items={branches}
+            items={filteredBranches}
             onSelect={onSelect}
             limit={limit}
             disabled={Boolean(cleanupUI?.inputLocked)}

package/src/cli/ui/types.ts

@@ -8,7 +8,7 @@ export interface WorktreeInfo {
 export interface BranchInfo {
   name: string;
   type: "local" | "remote";
-  branchType: "feature" | "hotfix" | "release" | "main" | "develop" | "other";
+  branchType: "feature" | "bugfix" | "hotfix" | "release" | "main" | "develop" | "other";
   isCurrent: boolean;
   description?: string;
   worktree?: WorktreeInfo;
@@ -35,6 +35,7 @@ export interface EnhancedBranchChoice extends BranchChoice {
 
 export type BranchType =
   | "feature"
+  | "bugfix"
   | "hotfix"
   | "release"
   | "main"

package/src/cli/ui/utils/branchFormatter.ts

@@ -12,6 +12,7 @@ const branchIcons: Record<BranchType, string> = {
   main: "⚡",
   develop: "⚡",
   feature: "✨",
+  bugfix: "🐛",
   hotfix: "🔥",
   release: "🚀",
   other: "📌",

package/src/config/constants.ts

@@ -5,6 +5,7 @@
 // ブランチタイプ
 export const BRANCH_TYPES = {
   FEATURE: "feature",
+  BUGFIX: "bugfix",
   HOTFIX: "hotfix",
   RELEASE: "release",
   MAIN: "main",
@@ -15,6 +16,7 @@ export const BRANCH_TYPES = {
 // ブランチプレフィックス
 export const BRANCH_PREFIXES = {
   FEATURE: "feature/",
+  BUGFIX: "bugfix/",
   HOTFIX: "hotfix/",
   RELEASE: "release/",
 } as const;

package/src/git.ts

@@ -351,6 +351,7 @@ function getBranchType(branchName: string): BranchInfo["branchType"] {
   if (branchName === "main" || branchName === "master") return "main";
   if (branchName === "develop" || branchName === "dev") return "develop";
   if (branchName.startsWith("feature/")) return "feature";
+  if (branchName.startsWith("bugfix/") || branchName.startsWith("bug/")) return "bugfix";
   if (branchName.startsWith("hotfix/")) return "hotfix";
   if (branchName.startsWith("release/")) return "release";
   return "other";

package/src/services/git.service.ts

@@ -52,6 +52,7 @@ export class GitService {
 
   private getBranchType(branchName: string): BranchInfo["branchType"] {
     if (branchName.startsWith("feature/")) return "feature";
+    if (branchName.startsWith("bugfix/") || branchName.startsWith("bug/")) return "bugfix";
     if (branchName.startsWith("hotfix/")) return "hotfix";
     if (branchName.startsWith("release/")) return "release";
     if (branchName === "main" || branchName === "master") return "main";