@akiojin/gwt 4.3.1 → 4.4.1

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

@@ -1,11 +1,12 @@
 import React from "react";
 import { Box, Text } from "ink";
-import type { Statistics } from "../../types.js";
+import type { Statistics, BranchViewMode } from "../../types.js";
 
 export interface StatsProps {
   stats: Statistics;
   separator?: string;
   lastUpdated?: Date | null;
+  viewMode?: BranchViewMode;
 }
 
 /**
@@ -30,13 +31,24 @@ function formatRelativeTime(date: Date): string {
 }
 
 /**
- * Stats component - displays statistics in one line
- * Optimized with React.memo to prevent unnecessary re-renders
+ * Format view mode label for display
  */
+function formatViewModeLabel(mode: BranchViewMode): string {
+  switch (mode) {
+    case "all":
+      return "All";
+    case "local":
+      return "Local";
+    case "remote":
+      return "Remote";
+  }
+}
+
 export const Stats = React.memo(function Stats({
   stats,
   separator = "  ",
   lastUpdated = null,
+  viewMode,
 }: StatsProps) {
   const items = [
     { label: "Local", value: stats.localCount, color: "cyan" },
@@ -47,6 +59,15 @@ export const Stats = React.memo(function Stats({
 
   return (
     <Box>
+      {viewMode && (
+        <Box>
+          <Text dimColor>Mode: </Text>
+          <Text bold color="white">
+            {formatViewModeLabel(viewMode)}
+          </Text>
+          <Text dimColor>{separator}</Text>
+        </Box>
+      )}
       {items.map((item) => (
         <Box key={item.label}>
           <Text dimColor>{item.label}: </Text>

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

@@ -6,9 +6,10 @@ 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 { useSpinnerFrame } from "../common/SpinnerIcon.js";
 import { useAppInput } from "../../hooks/useAppInput.js";
 import { useTerminalSize } from "../../hooks/useTerminalSize.js";
-import type { BranchItem, Statistics } from "../../types.js";
+import type { BranchItem, Statistics, BranchViewMode } from "../../types.js";
 import stringWidth from "string-width";
 import stripAnsi from "strip-ansi";
 import chalk from "chalk";
@@ -64,11 +65,13 @@ type IndicatorColor = "cyan" | "green" | "yellow" | "red";
 
 interface CleanupIndicator {
   icon: string;
+  isSpinning?: boolean;
   color?: IndicatorColor;
 }
 
 interface CleanupFooterMessage {
   text: string;
+  isSpinning?: boolean;
   color?: IndicatorColor;
 }
 
@@ -102,6 +105,8 @@ export interface BranchListScreenProps {
   testOnFilterModeChange?: (mode: boolean) => void;
   testFilterQuery?: string;
   testOnFilterQueryChange?: (query: string) => void;
+  testViewMode?: BranchViewMode;
+  testOnViewModeChange?: (mode: BranchViewMode) => void;
   selectedBranches?: string[];
   onToggleSelect?: (branchName: string) => void;
 }
@@ -129,16 +134,31 @@ export function BranchListScreen({
   testOnFilterModeChange,
   testFilterQuery,
   testOnFilterQueryChange,
+  testViewMode,
+  testOnViewModeChange,
   selectedBranches = [],
   onToggleSelect,
 }: BranchListScreenProps) {
   const { rows } = useTerminalSize();
-  const headerText = "  Legend: [ ]/[ * ] select  🟢/🔴/⚪ worktree  🛡/⚠ safe";
   const selectedSet = useMemo(
     () => new Set(selectedBranches),
     [selectedBranches],
   );
 
+  // Check if any indicator needs spinner animation
+  const hasSpinningIndicator = useMemo(() => {
+    if (!cleanupUI?.indicators) return false;
+    return Object.values(cleanupUI.indicators).some((ind) => ind.isSpinning);
+  }, [cleanupUI?.indicators]);
+
+  // Also check footer message for spinner
+  const hasSpinningFooter = cleanupUI?.footerMessage?.isSpinning ?? false;
+
+  // Get spinner frame for all spinning elements
+  const spinnerFrame = useSpinnerFrame(
+    hasSpinningIndicator || hasSpinningFooter,
+  );
+
   // Filter state - allow test control via props
   const [internalFilterQuery, setInternalFilterQuery] = useState("");
   const filterQuery =
@@ -164,6 +184,29 @@ export function BranchListScreen({
     [testOnFilterModeChange],
   );
 
+  // View mode state for filtering by local/remote
+  const [internalViewMode, setInternalViewMode] =
+    useState<BranchViewMode>("all");
+  const viewMode = testViewMode !== undefined ? testViewMode : internalViewMode;
+  const setViewMode = useCallback(
+    (mode: BranchViewMode) => {
+      setInternalViewMode(mode);
+      testOnViewModeChange?.(mode);
+    },
+    [testOnViewModeChange],
+  );
+
+  // Cycle view mode: all → local → remote → all
+  const cycleViewMode = useCallback(() => {
+    const modes: BranchViewMode[] = ["all", "local", "remote"];
+    const currentIndex = modes.indexOf(viewMode);
+    const nextIndex = (currentIndex + 1) % modes.length;
+    const nextMode = modes[nextIndex];
+    if (nextMode !== undefined) {
+      setViewMode(nextMode);
+    }
+  }, [viewMode, setViewMode]);
+
   // Cursor position for Select (controlled to enable space toggle)
   const [selectedIndex, setSelectedIndex] = useState(0);
 
@@ -204,6 +247,13 @@ export function BranchListScreen({
       return;
     }
 
+    // Tab key to cycle view mode (only in branch selection mode)
+    if (key.tab && !filterMode) {
+      cycleViewMode();
+      setSelectedIndex(0); // Reset cursor position on mode change
+      return;
+    }
+
     // Disable global shortcuts while in filter mode
     if (filterMode) {
       return;
@@ -219,27 +269,35 @@ export function BranchListScreen({
     }
   });
 
-  // Filter branches based on query
+  // Filter branches based on view mode and query
   const filteredBranches = useMemo(() => {
-    if (!filterQuery.trim()) {
-      return branches;
+    let result = branches;
+
+    // Apply view mode filter
+    if (viewMode !== "all") {
+      result = result.filter((branch) => branch.type === viewMode);
     }
 
-    const query = filterQuery.toLowerCase();
-    return branches.filter((branch) => {
-      // Search in branch name
-      if (branch.name.toLowerCase().includes(query)) {
-        return true;
-      }
+    // Apply search filter
+    if (filterQuery.trim()) {
+      const query = filterQuery.toLowerCase();
+      result = result.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;
-      }
+        // Search in PR title if available (only openPR has title)
+        if (branch.openPR?.title?.toLowerCase().includes(query)) {
+          return true;
+        }
 
-      return false;
-    });
-  }, [branches, filterQuery]);
+        return false;
+      });
+    }
+
+    return result;
+  }, [branches, viewMode, filterQuery]);
 
   useEffect(() => {
     setSelectedIndex((prev) => {
@@ -271,6 +329,7 @@ export function BranchListScreen({
   const footerActions = [
     { key: "enter", description: "Select" },
     { key: "f", description: "Filter" },
+    { key: "tab", description: "Mode" },
     { key: "r", description: "Refresh" },
     { key: "c", description: "Cleanup" },
     { key: "p", description: "Profiles" },
@@ -348,7 +407,6 @@ export function BranchListScreen({
       const columns = Math.max(20, context.columns - 1);
       const visibleWidth = (value: string) =>
         measureDisplayWidth(stripAnsi(value));
-      const arrow = isSelected ? ">" : " ";
       let commitText = "---";
       if (item.latestCommitTimestamp) {
         commitText = formatLatestCommit(item.latestCommitTimestamp);
@@ -384,27 +442,38 @@ export function BranchListScreen({
       )} | ${paddedDate}`;
       const timestampWidth = measureDisplayWidth(timestampText);
 
+      // Determine the leading indicator (cursor or cleanup status)
       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;
+      let leadingIndicator: string;
+      if (indicatorInfo) {
+        // Use spinner frame if isSpinning, otherwise use static icon
+        let indicatorIcon =
+          indicatorInfo.isSpinning && spinnerFrame
+            ? spinnerFrame
+            : 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;
+          }
         }
+        leadingIndicator = indicatorIcon;
+      } else {
+        // Normal cursor
+        leadingIndicator = isSelected ? ">" : " ";
       }
-      const indicatorPrefix = indicatorIcon ? `${indicatorIcon} ` : "";
 
       const isChecked = selectedSet.has(item.name);
       const isWarning = Boolean(item.hasUnpushedCommits) || !item.mergedPR;
@@ -423,7 +492,7 @@ export function BranchListScreen({
         item.safeToCleanup === true ? chalk.green("🛡") : chalk.yellow("⚠");
       const stateCluster = `${selectionIcon} ${worktreeIcon} ${safeIcon}`;
 
-      const staticPrefix = `${arrow} ${indicatorPrefix}${stateCluster} `;
+      const staticPrefix = `${leadingIndicator} ${stateCluster} `;
       const staticPrefixWidth = visibleWidth(staticPrefix);
       const maxLeftDisplayWidth = Math.max(0, columns - timestampWidth - 1);
       const maxLabelWidth = Math.max(
@@ -519,6 +588,7 @@ export function BranchListScreen({
       truncateToWidth,
       selectedSet,
       colorToolLabel,
+      spinnerFrame,
     ],
   );
 
@@ -557,7 +627,7 @@ export function BranchListScreen({
 
       {/* Stats */}
       <Box>
-        <Stats stats={stats} lastUpdated={lastUpdated} />
+        <Stats stats={stats} lastUpdated={lastUpdated} viewMode={viewMode} />
       </Box>
 
       {/* Content */}
@@ -602,10 +672,6 @@ export function BranchListScreen({
           branches.length > 0 &&
           filteredBranches.length > 0 && (
             <>
-              {/* Column labels */}
-              <Box>
-                <Text dimColor>{headerText}</Text>
-              </Box>
               <Select
                 items={filteredBranches}
                 onSelect={onSelect}
@@ -624,10 +690,16 @@ export function BranchListScreen({
         <Box marginBottom={1}>
           {cleanupUI.footerMessage.color ? (
             <Text color={cleanupUI.footerMessage.color}>
-              {cleanupUI.footerMessage.text}
+              {cleanupUI.footerMessage.isSpinning && spinnerFrame
+                ? `${spinnerFrame} ${cleanupUI.footerMessage.text}`
+                : cleanupUI.footerMessage.text}
             </Text>
           ) : (
-            <Text>{cleanupUI.footerMessage.text}</Text>
+            <Text>
+              {cleanupUI.footerMessage.isSpinning && spinnerFrame
+                ? `${spinnerFrame} ${cleanupUI.footerMessage.text}`
+                : cleanupUI.footerMessage.text}
+            </Text>
           )}
         </Box>
       )}

package/src/cli/ui/hooks/useAppInput.ts

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useRef } from "react";
 import { useInput, type Key } from "ink";
 
-const ESCAPE_SEQUENCE_TIMEOUT_MS = 25;
+// WSL/Windows can emit split escape sequences with higher latency.
+export const ESCAPE_SEQUENCE_TIMEOUT_MS = 80;
 
 type InputHandler = (input: string, key: Key) => void;
 type Options = { isActive?: boolean };

package/src/cli/ui/hooks/useGitData.ts

@@ -7,6 +7,7 @@ import {
   collectUpstreamMap,
   getBranchDivergenceStatuses,
 } from "../../../git.js";
+import { GIT_CONFIG } from "../../../config/constants.js";
 import { listAdditionalWorktrees } from "../../../worktree.js";
 import { getPullRequestByBranch } from "../../../github.js";
 import type { BranchInfo, WorktreeInfo } from "../types.js";
@@ -28,6 +29,45 @@ export interface UseGitDataResult {
   lastUpdated: Date | null;
 }
 
+export const GIT_DATA_TIMEOUT_MS = 3000;
+const PER_BRANCH_TIMEOUT_MS = 1000;
+
+async function withTimeout<T>(
+  label: string,
+  promise: Promise<T>,
+  timeoutMs: number,
+  fallback: T,
+): Promise<T> {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  let timedOut = false;
+
+  const timeoutPromise = new Promise<T>((resolve) => {
+    timeoutId = setTimeout(() => {
+      timedOut = true;
+      resolve(fallback);
+    }, timeoutMs);
+  });
+
+  const guarded = promise.catch((error) => {
+    if (process.env.DEBUG) {
+      console.warn(`Failed to resolve ${label}`, error);
+    }
+    return fallback;
+  });
+
+  const result = await Promise.race([guarded, timeoutPromise]);
+
+  if (timedOut && process.env.DEBUG) {
+    console.warn(`Timed out waiting for ${label}`);
+  }
+
+  if (timeoutId) {
+    clearTimeout(timeoutId);
+  }
+
+  return result;
+}
+
 /**
  * Hook to fetch and manage Git data (branches and worktrees)
  * @param options - Configuration options for auto-refresh and polling interval
@@ -45,21 +85,37 @@ export function useGitData(options?: UseGitDataOptions): UseGitDataResult {
     setError(null);
 
     try {
-      const repoRoot = await getRepositoryRoot();
+      const repoRoot = await withTimeout(
+        "repository root",
+        getRepositoryRoot(),
+        GIT_DATA_TIMEOUT_MS,
+        process.cwd(),
+      );
 
       // リモートブランチの最新情報を取得（失敗してもローカル表示は継続）
-      try {
-        await fetchAllRemotes({ cwd: repoRoot });
-      } catch (fetchError) {
+      void fetchAllRemotes({
+        cwd: repoRoot,
+        timeoutMs: GIT_CONFIG.FETCH_TIMEOUT,
+      }).catch((fetchError) => {
         if (process.env.DEBUG) {
           console.warn("Failed to fetch remote branches", fetchError);
         }
-      }
+      });
 
-      const branchesData = await getAllBranches();
+      const branchesData = await withTimeout(
+        "branches",
+        getAllBranches(repoRoot),
+        GIT_DATA_TIMEOUT_MS,
+        [],
+      );
       let worktreesData: GitWorktreeInfo[] = [];
       try {
-        worktreesData = await listAdditionalWorktrees();
+        worktreesData = await withTimeout(
+          "worktrees",
+          listAdditionalWorktrees(),
+          GIT_DATA_TIMEOUT_MS,
+          [],
+        );
       } catch (err) {
         if (process.env.DEBUG) {
           console.error("Failed to list additional worktrees:", err);
@@ -74,7 +130,12 @@ export function useGitData(options?: UseGitDataOptions): UseGitDataResult {
             return wt;
           }
           try {
-            const hasUncommitted = await hasUncommittedChanges(wt.path);
+            const hasUncommitted = await withTimeout(
+              "worktree status",
+              hasUncommittedChanges(wt.path),
+              PER_BRANCH_TIMEOUT_MS,
+              false,
+            );
             return { ...wt, hasUncommittedChanges: hasUncommitted };
           } catch {
             return wt;
@@ -82,12 +143,27 @@ export function useGitData(options?: UseGitDataOptions): UseGitDataResult {
         }),
       );
 
-      const lastToolUsageMap = await getLastToolUsageMap(repoRoot);
+      const lastToolUsageMap = await withTimeout(
+        "last tool usage",
+        getLastToolUsageMap(repoRoot),
+        GIT_DATA_TIMEOUT_MS,
+        new Map(),
+      );
 
       // upstream情報とdivergence情報を取得
       const [upstreamMap, divergenceStatuses] = await Promise.all([
-        collectUpstreamMap(repoRoot),
-        getBranchDivergenceStatuses({ cwd: repoRoot }).catch(() => []),
+        withTimeout(
+          "upstream map",
+          collectUpstreamMap(repoRoot),
+          GIT_DATA_TIMEOUT_MS,
+          new Map<string, string>(),
+        ),
+        withTimeout(
+          "divergence",
+          getBranchDivergenceStatuses({ cwd: repoRoot }).catch(() => []),
+          GIT_DATA_TIMEOUT_MS,
+          [],
+        ),
       ]);
 
       // divergenceをMapに変換
@@ -153,13 +229,20 @@ export function useGitData(options?: UseGitDataOptions): UseGitDataResult {
           if (branch.type === "local") {
             try {
               // Check for unpushed commits
-              hasUnpushed = await hasUnpushedCommitsInRepo(
-                branch.name,
-                repoRoot,
-              );
-
-              // Check for PR status
-              prInfo = await getPullRequestByBranch(branch.name);
+              [hasUnpushed, prInfo] = await Promise.all([
+                withTimeout(
+                  "unpushed commits",
+                  hasUnpushedCommitsInRepo(branch.name, repoRoot),
+                  PER_BRANCH_TIMEOUT_MS,
+                  false,
+                ),
+                withTimeout(
+                  "pull request",
+                  getPullRequestByBranch(branch.name),
+                  PER_BRANCH_TIMEOUT_MS,
+                  null,
+                ),
+              ]);
             } catch (error) {
               // Silently ignore errors to avoid breaking the UI
               if (process.env.DEBUG) {

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

@@ -6,6 +6,7 @@ import { act, render } from "@testing-library/react";
 import { render as inkRender } from "ink-testing-library";
 import React from "react";
 import { BranchActionSelectorScreen } from "../BranchActionSelectorScreen.js";
+import { ESCAPE_SEQUENCE_TIMEOUT_MS } from "../../hooks/useAppInput.js";
 import { Window } from "happy-dom";
 
 describe("BranchActionSelectorScreen", () => {
@@ -182,6 +183,50 @@ describe("BranchActionSelectorScreen", () => {
     inkApp.unmount();
   });
 
+  it("should treat delayed split down-arrow sequence as navigation (WSL2) and not as Escape", () => {
+    vi.useFakeTimers();
+    let inkApp: ReturnType<typeof inkRender> | undefined;
+
+    try {
+      const onUseExisting = vi.fn();
+      const onCreateNew = vi.fn();
+      const onBack = vi.fn();
+
+      inkApp = inkRender(
+        <BranchActionSelectorScreen
+          selectedBranch="feature-test"
+          onUseExisting={onUseExisting}
+          onCreateNew={onCreateNew}
+          onBack={onBack}
+        />,
+      );
+
+      act(() => {
+        inkApp.stdin.write("\u001b");
+      });
+
+      act(() => {
+        vi.advanceTimersByTime(ESCAPE_SEQUENCE_TIMEOUT_MS - 10);
+      });
+
+      act(() => {
+        inkApp.stdin.write("[");
+        inkApp.stdin.write("B");
+      });
+
+      act(() => {
+        inkApp.stdin.write("\r");
+      });
+
+      expect(onBack).not.toHaveBeenCalled();
+      expect(onCreateNew).toHaveBeenCalledTimes(1);
+      expect(onUseExisting).not.toHaveBeenCalled();
+    } finally {
+      inkApp?.unmount();
+      vi.useRealTimers();
+    }
+  });
+
   it("should still handle Escape key as back navigation", () => {
     vi.useFakeTimers();
     let inkApp: ReturnType<typeof inkRender> | undefined;
@@ -205,7 +250,7 @@ describe("BranchActionSelectorScreen", () => {
       });
 
       act(() => {
-        vi.advanceTimersByTime(25);
+        vi.advanceTimersByTime(ESCAPE_SEQUENCE_TIMEOUT_MS);
       });
 
       expect(onBack).toHaveBeenCalledTimes(1);

package/src/cli/ui/types.ts

@@ -12,6 +12,11 @@ export interface WorktreeInfo {
 export type AITool = string;
 export type InferenceLevel = "low" | "medium" | "high" | "xhigh";
 
+/**
+ * Branch view mode for filtering branch list by type
+ */
+export type BranchViewMode = "all" | "local" | "remote";
+
 export interface ModelOption {
   id: string;
   label: string;