@akiojin/gwt 2.1.1 → 2.3.0

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

@@ -1,18 +1,19 @@
-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';
+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";
+import stringWidth from "string-width";
+import chalk from "chalk";
 
 const WIDTH_OVERRIDES: Record<string, number> = {
-  '⬆': 1,
-  '☁': 1,
+  "⬆": 1,
+  "☁": 1,
 };
 
 const measureDisplayWidth = (value: string): number => {
@@ -28,7 +29,7 @@ const measureDisplayWidth = (value: string): number => {
   return width;
 };
 
-type IndicatorColor = 'cyan' | 'green' | 'yellow' | 'red';
+type IndicatorColor = "cyan" | "green" | "yellow" | "red";
 
 interface CleanupIndicator {
   icon: string;
@@ -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,79 +87,156 @@ 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;
     }
 
-    if (input === 'm' && onNavigate) {
-      onNavigate('worktree-manager');
-    } else if (input === 'c') {
+    // 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") {
       onCleanupCommand?.();
-    } else if (input === 'r' && onRefresh) {
+    } else if (input === "r" && onRefresh) {
       onRefresh();
     }
   });
 
+  // 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: 'r', description: 'Refresh' },
-    { key: 'm', description: 'Manage worktrees' },
-    { key: 'c', description: 'Cleanup branches' },
+    { key: "enter", description: "Select" },
+    { key: "f", description: "Filter" },
+    { 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 '---';
+      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');
+    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 '';
+      return "";
     }
 
     if (stringWidth(value) <= maxWidth) {
       return value;
     }
 
-    const ellipsis = '…';
+    const ellipsis = "…";
     const ellipsisWidth = stringWidth(ellipsis);
     if (ellipsisWidth >= maxWidth) {
       return ellipsis;
     }
 
     let currentWidth = 0;
-    let result = '';
+    let result = "";
 
     for (const char of value) {
       const charWidth = stringWidth(char);
@@ -170,60 +253,67 @@ export function BranchListScreen({
   const renderBranchRow = useCallback(
     (item: BranchItem, isSelected: boolean, context: { columns: number }) => {
       const columns = Math.max(20, context.columns);
-      const arrow = isSelected ? '>' : ' ';
+      const arrow = isSelected ? ">" : " ";
       const timestampText = formatLatestCommit(item.latestCommitTimestamp);
       const timestampWidth = stringWidth(timestampText);
 
       const indicatorInfo = cleanupUI?.indicators?.[item.name];
-      let indicatorIcon = indicatorInfo?.icon ?? '';
+      let indicatorIcon = indicatorInfo?.icon ?? "";
       if (indicatorIcon && indicatorInfo?.color && !isSelected) {
         switch (indicatorInfo.color) {
-          case 'cyan':
+          case "cyan":
             indicatorIcon = chalk.cyan(indicatorIcon);
             break;
-          case 'green':
+          case "green":
             indicatorIcon = chalk.green(indicatorIcon);
             break;
-          case 'yellow':
+          case "yellow":
             indicatorIcon = chalk.yellow(indicatorIcon);
             break;
-          case 'red':
+          case "red":
             indicatorIcon = chalk.red(indicatorIcon);
             break;
           default:
             break;
         }
       }
-      const indicatorPrefix = indicatorIcon ? `${indicatorIcon} ` : '';
+      const indicatorPrefix = indicatorIcon ? `${indicatorIcon} ` : "";
       const staticPrefix = `${arrow} ${indicatorPrefix}`;
       const staticPrefixWidth = stringWidth(staticPrefix);
 
-      const availableLeftWidth = Math.max(staticPrefixWidth, columns - timestampWidth - 1);
+      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 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` : '';
+      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);
+        line += " ".repeat(paddingWidth);
       }
 
-      const output = isSelected
-        ? `${line}`
-        : line;
+      const output = isSelected ? `\u001b[46m\u001b[30m${line}\u001b[0m` : line;
       return <Text>{output}</Text>;
     },
-    [cleanupUI, formatLatestCommit, truncateToWidth]
+    [cleanupUI, formatLatestCommit, truncateToWidth],
   );
 
   return (
@@ -236,8 +326,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,16 +380,29 @@ export function BranchListScreen({
           </Box>
         )}
 
-        {!loading && !error && branches.length > 0 && (
-          <Select
-            items={branches}
-            onSelect={onSelect}
-            limit={limit}
-            disabled={Boolean(cleanupUI?.inputLocked)}
-            renderIndicator={() => null}
-            renderItem={renderBranchRow}
-          />
-        )}
+        {!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={filteredBranches}
+              onSelect={onSelect}
+              limit={limit}
+              disabled={Boolean(cleanupUI?.inputLocked)}
+              renderIndicator={() => null}
+              renderItem={renderBranchRow}
+            />
+          )}
       </Box>
 
       {cleanupUI?.footerMessage && (

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

@@ -1,11 +1,11 @@
-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';
+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 type ExecutionMode = "normal" | "continue" | "resume";
 
 export interface ExecutionModeItem {
   label: string;
@@ -62,33 +62,34 @@ export function ExecutionModeSelectorScreen({
   // Execution mode options (Step 1)
   const modeItems: ExecutionModeItem[] = [
     {
-      label: 'Normal',
-      value: 'normal',
-      description: 'Start fresh session',
+      label: "Normal",
+      value: "normal",
+      description: "Start fresh session",
     },
     {
-      label: 'Continue',
-      value: 'continue',
-      description: 'Continue from last session',
+      label: "Continue",
+      value: "continue",
+      description: "Continue from last session",
     },
     {
-      label: 'Resume',
-      value: 'resume',
-      description: 'Resume specific 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: "No",
+      value: "no",
+      description: "Normal permission checks",
     },
     {
-      label: 'Yes',
-      value: 'yes',
-      description: 'Skip permission checks (--dangerously-skip-permissions / --yolo)',
+      label: "Yes",
+      value: "yes",
+      description:
+        "Skip permission checks (--dangerously-skip-permissions / --yolo)",
     },
   ];
 
@@ -103,22 +104,22 @@ export function ExecutionModeSelectorScreen({
     if (selectedMode) {
       onSelect({
         mode: selectedMode,
-        skipPermissions: item.value === 'yes',
+        skipPermissions: item.value === "yes",
       });
     }
   };
 
   // Footer actions
   const footerActions = [
-    { key: 'enter', description: 'Select' },
-    { key: 'esc', description: step === 2 ? 'Back to mode selection' : 'Back' },
+    { 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'}
+        title={step === 1 ? "Execution Mode" : "Skip Permissions"}
         titleColor="magenta"
         version={version}
       />
@@ -135,9 +136,15 @@ export function ExecutionModeSelectorScreen({
         ) : (
           <>
             <Box marginBottom={1}>
-              <Text>Skip permission checks? (--dangerously-skip-permissions / --yolo)</Text>
+              <Text>
+                Skip permission checks? (--dangerously-skip-permissions /
+                --yolo)
+              </Text>
             </Box>
-            <Select items={skipPermissionsItems} onSelect={handleSkipPermissionsSelect} />
+            <Select
+              items={skipPermissionsItems}
+              onSelect={handleSkipPermissionsSelect}
+            />
           </>
         )}
       </Box>

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

@@ -1,10 +1,10 @@
-import React 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 type { CleanupTarget } from '../../types.js';
+import React 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 type { CleanupTarget } from "../../types.js";
 
 export interface PRItem {
   label: string;
@@ -44,7 +44,7 @@ export function PRCleanupScreen({
   useInput((input, key) => {
     if (key.escape) {
       onBack();
-    } else if (input === 'r') {
+    } else if (input === "r") {
       onRefresh();
     }
   });
@@ -53,28 +53,28 @@ export function PRCleanupScreen({
   const prItems: PRItem[] = targets.map((target) => {
     const pr = target.pullRequest;
     const flags: string[] = [];
-    if (target.cleanupType === 'worktree-and-branch') {
-      flags.push('worktree');
+    if (target.cleanupType === "worktree-and-branch") {
+      flags.push("worktree");
     } else {
-      flags.push('branch');
+      flags.push("branch");
     }
-    if (target.reasons?.includes('merged-pr')) {
-      flags.push('merged');
+    if (target.reasons?.includes("merged-pr")) {
+      flags.push("merged");
     }
-    if (target.reasons?.includes('no-diff-with-base')) {
-      flags.push('base');
+    if (target.reasons?.includes("no-diff-with-base")) {
+      flags.push("base");
     }
     if (target.hasUncommittedChanges) {
-      flags.push('changes');
+      flags.push("changes");
     }
     if (target.hasUnpushedCommits) {
-      flags.push('unpushed');
+      flags.push("unpushed");
     }
     if (target.isAccessible === false) {
-      flags.push('inaccessible');
+      flags.push("inaccessible");
     }
 
-    const flagText = flags.length > 0 ? ` [${flags.join(', ')}]` : '';
+    const flagText = flags.length > 0 ? ` [${flags.join(", ")}]` : "";
 
     const label = pr
       ? `${target.branch} - #${pr.number} ${pr.title}${flagText}`
@@ -98,9 +98,9 @@ export function PRCleanupScreen({
 
   // Footer actions
   const footerActions = [
-    { key: 'enter', description: 'Cleanup' },
-    { key: 'r', description: 'Refresh' },
-    { key: 'esc', description: 'Back' },
+    { key: "enter", description: "Cleanup" },
+    { key: "r", description: "Refresh" },
+    { key: "esc", description: "Back" },
   ];
 
   return (

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

@@ -1,9 +1,9 @@
-import React 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 React 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 interface SessionItem {
   label: string;
@@ -59,8 +59,8 @@ export function SessionSelectorScreen({
 
   // Footer actions
   const footerActions = [
-    { key: 'enter', description: 'Select' },
-    { key: 'esc', description: 'Back' },
+    { key: "enter", description: "Select" },
+    { key: "esc", description: "Back" },
   ];
 
   return (

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

@@ -1,9 +1,9 @@
-import React 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 React 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 interface WorktreeItem {
   branch: string;
@@ -64,8 +64,8 @@ export function WorktreeManagerScreen({
 
   // Footer actions
   const footerActions = [
-    { key: 'enter', description: 'Select' },
-    { key: 'esc', description: 'Back' },
+    { key: "enter", description: "Select" },
+    { key: "esc", description: "Back" },
   ];
 
   return (

package/src/cli/ui/screens/BranchActionSelectorScreen.tsx

@@ -46,7 +46,9 @@ export function BranchActionSelectorScreen({
     (mode === "protected" ? "Switch to root branch" : "Use existing branch");
   const secondaryActionLabel =
     secondaryLabel ??
-    (mode === "protected" ? "Create new branch from this branch" : "Create new branch");
+    (mode === "protected"
+      ? "Create new branch from this branch"
+      : "Create new branch");
 
   const items: SelectItem[] = [
     {
@@ -74,15 +76,18 @@ export function BranchActionSelectorScreen({
 
   // Footer actions
   const footerActions = [
-    { key: 'enter', description: 'Select' },
-    { key: 'esc', description: 'Back' },
+    { key: "enter", description: "Select" },
+    { key: "esc", description: "Back" },
   ];
 
   return (
     <Box flexDirection="column">
       <Box marginBottom={1}>
         <Text>
-          Selected branch: <Text bold color="cyan">{selectedBranch}</Text>
+          Selected branch:{" "}
+          <Text bold color="cyan">
+            {selectedBranch}
+          </Text>
         </Text>
       </Box>
       {infoMessage ? (