@akiojin/gwt 4.3.0 → 4.4.0

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

@@ -833,4 +833,212 @@ describe("BranchListScreen", () => {
       expect(container.textContent).toContain("feature/add-filter");
     });
   });
+
+  describe("Branch View Mode Toggle (TAB key)", () => {
+    const mixedBranches: BranchItem[] = [
+      {
+        name: "main",
+        type: "local",
+        branchType: "main",
+        isCurrent: true,
+        icons: ["⚡"],
+        hasChanges: false,
+        label: "⚡ main",
+        value: "main",
+        latestCommitTimestamp: 1_700_000_000,
+      },
+      {
+        name: "feature/test",
+        type: "local",
+        branchType: "feature",
+        isCurrent: false,
+        icons: ["✨"],
+        hasChanges: false,
+        label: "✨ feature/test",
+        value: "feature/test",
+        latestCommitTimestamp: 1_699_000_000,
+      },
+      {
+        name: "origin/main",
+        type: "remote",
+        branchType: "main",
+        isCurrent: false,
+        icons: ["🌐"],
+        hasChanges: false,
+        label: "🌐 origin/main",
+        value: "origin/main",
+        remoteName: "origin/main",
+        latestCommitTimestamp: 1_698_000_000,
+      },
+      {
+        name: "origin/feature/remote-test",
+        type: "remote",
+        branchType: "feature",
+        isCurrent: false,
+        icons: ["🌐"],
+        hasChanges: false,
+        label: "🌐 origin/feature/remote-test",
+        value: "origin/feature/remote-test",
+        remoteName: "origin/feature/remote-test",
+        latestCommitTimestamp: 1_697_000_000,
+      },
+    ];
+
+    it("should default to 'all' view mode and display Mode: All in stats", () => {
+      const onSelect = vi.fn();
+      const { container } = render(
+        <BranchListScreen
+          branches={mixedBranches}
+          stats={mockStats}
+          onSelect={onSelect}
+        />,
+      );
+
+      expect(container.textContent).toContain("Mode: All");
+    });
+
+    it("should filter to local branches only when view mode is 'local'", () => {
+      const onSelect = vi.fn();
+      const { container } = render(
+        <BranchListScreen
+          branches={mixedBranches}
+          stats={mockStats}
+          onSelect={onSelect}
+          testViewMode="local"
+        />,
+      );
+
+      expect(container.textContent).toContain("Mode: Local");
+      expect(container.textContent).toContain("main");
+      expect(container.textContent).toContain("feature/test");
+      expect(container.textContent).not.toContain("origin/main");
+      expect(container.textContent).not.toContain("origin/feature/remote-test");
+    });
+
+    it("should filter to remote branches only when view mode is 'remote'", () => {
+      const onSelect = vi.fn();
+      const { container } = render(
+        <BranchListScreen
+          branches={mixedBranches}
+          stats={mockStats}
+          onSelect={onSelect}
+          testViewMode="remote"
+        />,
+      );
+
+      expect(container.textContent).toContain("Mode: Remote");
+      expect(container.textContent).not.toContain("feature/test");
+      expect(container.textContent).toContain("origin/main");
+      expect(container.textContent).toContain("origin/feature/remote-test");
+    });
+
+    it("should toggle view mode from all to local when TAB is pressed", () => {
+      const onSelect = vi.fn();
+      const onViewModeChange = vi.fn();
+
+      const inkApp = inkRender(
+        <BranchListScreen
+          branches={mixedBranches}
+          stats={mockStats}
+          onSelect={onSelect}
+          testOnViewModeChange={onViewModeChange}
+        />,
+      );
+
+      act(() => {
+        inkApp.stdin.write("\t"); // TAB key
+      });
+
+      expect(onViewModeChange).toHaveBeenCalledWith("local");
+
+      inkApp.unmount();
+    });
+
+    it("should toggle view mode from local to remote when TAB is pressed", () => {
+      const onSelect = vi.fn();
+      const onViewModeChange = vi.fn();
+
+      const inkApp = inkRender(
+        <BranchListScreen
+          branches={mixedBranches}
+          stats={mockStats}
+          onSelect={onSelect}
+          testViewMode="local"
+          testOnViewModeChange={onViewModeChange}
+        />,
+      );
+
+      act(() => {
+        inkApp.stdin.write("\t"); // TAB key
+      });
+
+      expect(onViewModeChange).toHaveBeenCalledWith("remote");
+
+      inkApp.unmount();
+    });
+
+    it("should toggle view mode from remote to all when TAB is pressed", () => {
+      const onSelect = vi.fn();
+      const onViewModeChange = vi.fn();
+
+      const inkApp = inkRender(
+        <BranchListScreen
+          branches={mixedBranches}
+          stats={mockStats}
+          onSelect={onSelect}
+          testViewMode="remote"
+          testOnViewModeChange={onViewModeChange}
+        />,
+      );
+
+      act(() => {
+        inkApp.stdin.write("\t"); // TAB key
+      });
+
+      expect(onViewModeChange).toHaveBeenCalledWith("all");
+
+      inkApp.unmount();
+    });
+
+    it("should not toggle view mode when in filter mode", () => {
+      const onSelect = vi.fn();
+      const onViewModeChange = vi.fn();
+
+      const inkApp = inkRender(
+        <BranchListScreen
+          branches={mixedBranches}
+          stats={mockStats}
+          onSelect={onSelect}
+          testFilterMode={true}
+          testOnViewModeChange={onViewModeChange}
+        />,
+      );
+
+      act(() => {
+        inkApp.stdin.write("\t"); // TAB key
+      });
+
+      expect(onViewModeChange).not.toHaveBeenCalled();
+
+      inkApp.unmount();
+    });
+
+    it("should combine view mode filter with search filter (AND condition)", () => {
+      const onSelect = vi.fn();
+      const { container } = render(
+        <BranchListScreen
+          branches={mixedBranches}
+          stats={mockStats}
+          onSelect={onSelect}
+          testViewMode="local"
+          testFilterQuery="feature"
+        />,
+      );
+
+      // Only local branches matching "feature"
+      expect(container.textContent).toContain("feature/test");
+      expect(container.textContent).not.toContain("main");
+      expect(container.textContent).not.toContain("origin/feature/remote-test");
+    });
+  });
 });

package/src/cli/ui/__tests__/hooks/useGitData.nonblocking.test.tsx

@@ -0,0 +1,158 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { renderHook, waitFor } from "@testing-library/react";
+import { GIT_DATA_TIMEOUT_MS, useGitData } from "../../hooks/useGitData.js";
+import { Window } from "happy-dom";
+
+vi.mock("../../../git.js", () => ({
+  getAllBranches: vi.fn(),
+  fetchAllRemotes: vi.fn(),
+  getRepositoryRoot: vi.fn(),
+  collectUpstreamMap: vi.fn(),
+  getBranchDivergenceStatuses: vi.fn(),
+  hasUnpushedCommitsInRepo: vi.fn(),
+  hasUncommittedChanges: vi.fn(),
+}));
+
+vi.mock("../../../worktree.js", () => ({
+  listAdditionalWorktrees: vi.fn(),
+}));
+
+vi.mock("../../../github.js", () => ({
+  getPullRequestByBranch: vi.fn(),
+}));
+
+vi.mock("../../../config/index.js", () => ({
+  getLastToolUsageMap: vi.fn(),
+}));
+
+import {
+  getAllBranches,
+  fetchAllRemotes,
+  getRepositoryRoot,
+  collectUpstreamMap,
+  getBranchDivergenceStatuses,
+  hasUnpushedCommitsInRepo,
+  hasUncommittedChanges,
+} from "../../../git.js";
+import { listAdditionalWorktrees } from "../../../worktree.js";
+import { getPullRequestByBranch } from "../../../github.js";
+import { getLastToolUsageMap } from "../../../config/index.js";
+
+const advanceTimersBy = async (ms: number) => {
+  if (typeof vi.advanceTimersByTimeAsync === "function") {
+    await vi.advanceTimersByTimeAsync(ms);
+  } else if (typeof vi.advanceTimersByTime === "function") {
+    vi.advanceTimersByTime(ms);
+  }
+};
+
+describe("useGitData non-blocking fetch", () => {
+  beforeEach(() => {
+    const window = new Window();
+    globalThis.window = window as unknown as typeof globalThis.window;
+    globalThis.document =
+      window.document as unknown as typeof globalThis.document;
+
+    (getAllBranches as ReturnType<typeof vi.fn>).mockReset();
+    (fetchAllRemotes as ReturnType<typeof vi.fn>).mockReset();
+    (getRepositoryRoot as ReturnType<typeof vi.fn>).mockReset();
+    (collectUpstreamMap as ReturnType<typeof vi.fn>).mockReset();
+    (getBranchDivergenceStatuses as ReturnType<typeof vi.fn>).mockReset();
+    (hasUnpushedCommitsInRepo as ReturnType<typeof vi.fn>).mockReset();
+    (hasUncommittedChanges as ReturnType<typeof vi.fn>).mockReset();
+    (listAdditionalWorktrees as ReturnType<typeof vi.fn>).mockReset();
+    (getPullRequestByBranch as ReturnType<typeof vi.fn>).mockReset();
+    (getLastToolUsageMap as ReturnType<typeof vi.fn>).mockReset();
+  });
+
+  afterEach(() => {
+    if (typeof vi.useRealTimers === "function") {
+      vi.useRealTimers();
+    }
+  });
+
+  it("does not block loading on fetchAllRemotes", async () => {
+    const pending = new Promise<void>(() => {});
+
+    (getRepositoryRoot as ReturnType<typeof vi.fn>).mockResolvedValue("/repo");
+    (fetchAllRemotes as ReturnType<typeof vi.fn>).mockReturnValue(pending);
+    (getAllBranches as ReturnType<typeof vi.fn>).mockResolvedValue([]);
+    (listAdditionalWorktrees as ReturnType<typeof vi.fn>).mockResolvedValue([]);
+    (getLastToolUsageMap as ReturnType<typeof vi.fn>).mockResolvedValue(
+      new Map(),
+    );
+    (collectUpstreamMap as ReturnType<typeof vi.fn>).mockResolvedValue(
+      new Map(),
+    );
+    (getBranchDivergenceStatuses as ReturnType<typeof vi.fn>).mockResolvedValue(
+      [],
+    );
+    (hasUnpushedCommitsInRepo as ReturnType<typeof vi.fn>).mockResolvedValue(
+      false,
+    );
+    (hasUncommittedChanges as ReturnType<typeof vi.fn>).mockResolvedValue(
+      false,
+    );
+    (getPullRequestByBranch as ReturnType<typeof vi.fn>).mockResolvedValue(
+      null,
+    );
+
+    const { result } = renderHook(() => useGitData());
+
+    await waitFor(
+      () => {
+        expect(result.current.loading).toBe(false);
+      },
+      { timeout: 1000 },
+    );
+
+    expect(fetchAllRemotes).toHaveBeenCalled();
+  });
+
+  it("releases loading state when branch fetch stalls", async () => {
+    if (typeof vi.useFakeTimers === "function") {
+      vi.useFakeTimers();
+    }
+
+    const pending = new Promise<void>(() => {});
+
+    (getRepositoryRoot as ReturnType<typeof vi.fn>).mockResolvedValue("/repo");
+    (fetchAllRemotes as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
+    (getAllBranches as ReturnType<typeof vi.fn>).mockReturnValue(
+      pending as unknown as Promise<unknown>,
+    );
+    (listAdditionalWorktrees as ReturnType<typeof vi.fn>).mockResolvedValue([]);
+    (getLastToolUsageMap as ReturnType<typeof vi.fn>).mockResolvedValue(
+      new Map(),
+    );
+    (collectUpstreamMap as ReturnType<typeof vi.fn>).mockResolvedValue(
+      new Map(),
+    );
+    (getBranchDivergenceStatuses as ReturnType<typeof vi.fn>).mockResolvedValue(
+      [],
+    );
+    (hasUnpushedCommitsInRepo as ReturnType<typeof vi.fn>).mockResolvedValue(
+      false,
+    );
+    (hasUncommittedChanges as ReturnType<typeof vi.fn>).mockResolvedValue(
+      false,
+    );
+    (getPullRequestByBranch as ReturnType<typeof vi.fn>).mockResolvedValue(
+      null,
+    );
+
+    const { result } = renderHook(() => useGitData());
+
+    await advanceTimersBy(GIT_DATA_TIMEOUT_MS + 10);
+
+    await waitFor(
+      () => {
+        expect(result.current.loading).toBe(false);
+      },
+      { timeout: 1000 },
+    );
+  });
+});

package/src/cli/ui/components/App.tsx

@@ -67,19 +67,10 @@ import {
 } from "../../../utils/session.js";
 import type { ToolSessionEntry } from "../../../config/index.js";
 
-const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧"];
 const COMPLETION_HOLD_DURATION_MS = 3000;
 const PROTECTED_BRANCH_WARNING =
   "Root branches operate directly in the repository root. Create a new branch if you need a dedicated worktree.";
 
-const getSpinnerFrame = (index: number): string => {
-  const frame = SPINNER_FRAMES[index];
-  if (typeof frame === "string") {
-    return frame;
-  }
-  return SPINNER_FRAMES[0] ?? "⠋";
-};
-
 export interface SelectionResult {
   branch: string; // Local branch name (without remote prefix)
   displayName: string; // Name that was selected in the UI (may include remote prefix)
@@ -153,21 +144,24 @@ export function App({ onExit, loadingIndicatorDelay = 300 }: AppProps) {
   const [cleanupIndicators, setCleanupIndicators] = useState<
     Record<
       string,
-      { icon: string; color?: "cyan" | "green" | "yellow" | "red" }
+      {
+        icon: string;
+        isSpinning?: boolean;
+        color?: "cyan" | "green" | "yellow" | "red";
+      }
     >
   >({});
-  const [cleanupProcessingBranch, setCleanupProcessingBranch] = useState<
+  const [_cleanupProcessingBranch, setCleanupProcessingBranch] = useState<
     string | null
   >(null);
   const [cleanupInputLocked, setCleanupInputLocked] = useState(false);
   const [cleanupFooterMessage, setCleanupFooterMessage] = useState<{
     text: string;
+    isSpinning?: boolean;
     color?: "cyan" | "green" | "yellow" | "red";
   } | null>(null);
   const [hiddenBranches, setHiddenBranches] = useState<string[]>([]);
   const [selectedBranches, setSelectedBranches] = useState<string[]>([]);
-  const spinnerFrameIndexRef = useRef(0);
-  const [spinnerFrameIndex, setSpinnerFrameIndex] = useState(0);
   const completionTimerRef = useRef<NodeJS.Timeout | null>(null);
 
   // Fetch version on mount
@@ -184,55 +178,6 @@ export function App({ onExit, loadingIndicatorDelay = 300 }: AppProps) {
       .catch(() => setRepoRoot(null));
   }, []);
 
-  useEffect(() => {
-    if (!cleanupInputLocked) {
-      spinnerFrameIndexRef.current = 0;
-      setSpinnerFrameIndex(0);
-      return undefined;
-    }
-
-    const interval = setInterval(() => {
-      spinnerFrameIndexRef.current =
-        (spinnerFrameIndexRef.current + 1) % SPINNER_FRAMES.length;
-      setSpinnerFrameIndex(spinnerFrameIndexRef.current);
-    }, 120);
-
-    return () => {
-      clearInterval(interval);
-      spinnerFrameIndexRef.current = 0;
-      setSpinnerFrameIndex(0);
-    };
-  }, [cleanupInputLocked]);
-
-  useEffect(() => {
-    if (!cleanupInputLocked) {
-      return;
-    }
-
-    const frame = getSpinnerFrame(spinnerFrameIndex);
-
-    if (cleanupProcessingBranch) {
-      setCleanupIndicators((prev) => {
-        const current = prev[cleanupProcessingBranch];
-        if (current && current.icon === frame && current.color === "cyan") {
-          return prev;
-        }
-
-        const next: Record<
-          string,
-          { icon: string; color?: "cyan" | "green" | "yellow" | "red" }
-        > = {
-          ...prev,
-          [cleanupProcessingBranch]: { icon: frame, color: "cyan" },
-        };
-
-        return next;
-      });
-    }
-
-    setCleanupFooterMessage({ text: `Processing... ${frame}`, color: "cyan" });
-  }, [cleanupInputLocked, cleanupProcessingBranch, spinnerFrameIndex]);
-
   useEffect(() => {
     if (!hiddenBranches.length) {
       return;
@@ -872,14 +817,12 @@ export function App({ onExit, loadingIndicatorDelay = 300 }: AppProps) {
     // Provide immediate feedback before fetching targets
     setCleanupInputLocked(true);
     setCleanupIndicators({});
-    const initialFrame = getSpinnerFrame(0);
     setCleanupFooterMessage({
-      text: `Processing... ${initialFrame}`,
+      text: "Processing...",
+      isSpinning: true,
       color: "cyan",
     });
     setCleanupProcessingBranch(null);
-    spinnerFrameIndexRef.current = 0;
-    setSpinnerFrameIndex(0);
 
     const branchMap = new Map(branches.map((branch) => [branch.name, branch]));
     const worktreeMap = new Map(
@@ -944,23 +887,27 @@ export function App({ onExit, loadingIndicatorDelay = 300 }: AppProps) {
     const initialIndicators = targets.reduce<
       Record<
         string,
-        { icon: string; color?: "cyan" | "green" | "yellow" | "red" }
+        {
+          icon: string;
+          isSpinning?: boolean;
+          color?: "cyan" | "green" | "yellow" | "red";
+        }
       >
     >((acc, target, index) => {
-      const icon = index === 0 ? getSpinnerFrame(0) : "⏳";
-      const color: "cyan" | "green" | "yellow" | "red" =
-        index === 0 ? "cyan" : "yellow";
-      acc[target.branch] = { icon, color };
+      if (index === 0) {
+        acc[target.branch] = { icon: "", isSpinning: true, color: "cyan" };
+      } else {
+        acc[target.branch] = { icon: "⏳", color: "yellow" };
+      }
       return acc;
     }, {});
 
     setCleanupIndicators(initialIndicators);
     const firstTarget = targets.length > 0 ? targets[0] : undefined;
     setCleanupProcessingBranch(firstTarget ? firstTarget.branch : null);
-    spinnerFrameIndexRef.current = 0;
-    setSpinnerFrameIndex(0);
     setCleanupFooterMessage({
-      text: `Processing... ${getSpinnerFrame(0)}`,
+      text: "Processing...",
+      isSpinning: true,
       color: "cyan",
     });
 
@@ -972,12 +919,10 @@ export function App({ onExit, loadingIndicatorDelay = 300 }: AppProps) {
       const target = currentTarget;
 
       setCleanupProcessingBranch(target.branch);
-      spinnerFrameIndexRef.current = 0;
-      setSpinnerFrameIndex(0);
 
       setCleanupIndicators((prev) => {
         const updated = { ...prev };
-        updated[target.branch] = { icon: getSpinnerFrame(0), color: "cyan" };
+        updated[target.branch] = { icon: "", isSpinning: true, color: "cyan" };
         for (const pending of targets.slice(index + 1)) {
           const current = updated[pending.branch];
           if (!current || current.icon !== "⏳") {

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

@@ -0,0 +1,86 @@
+import React, { useEffect, useState, useRef } from "react";
+import { Text } from "ink";
+
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧"];
+
+export interface SpinnerIconProps {
+  /** true にするとスピナーを回転させる */
+  isSpinning: boolean;
+  /** スピナーの色 */
+  color?: "cyan" | "green" | "yellow" | "red";
+  /** スピナーの更新間隔 (ms)。デフォルトは 120ms */
+  interval?: number;
+}
+
+/**
+ * インラインで使用できるスピナーアイコンコンポーネント。
+ * 自身の内部で状態を管理するため、親コンポーネントの再レンダリングを引き起こさない。
+ */
+export function SpinnerIcon({
+  isSpinning,
+  color = "cyan",
+  interval = 120,
+}: SpinnerIconProps) {
+  const [frameIndex, setFrameIndex] = useState(0);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    if (isSpinning) {
+      intervalRef.current = setInterval(() => {
+        setFrameIndex((current) => (current + 1) % SPINNER_FRAMES.length);
+      }, interval);
+    } else {
+      setFrameIndex(0);
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [isSpinning, interval]);
+
+  if (!isSpinning) {
+    return null;
+  }
+
+  const frame = SPINNER_FRAMES[frameIndex] ?? SPINNER_FRAMES[0];
+
+  return <Text color={color}>{frame}</Text>;
+}
+
+/**
+ * スピナーを文字列として取得するためのフック。
+ * Textコンポーネントでラップせず、文字列として使用したい場合に使用。
+ */
+export function useSpinnerFrame(
+  isSpinning: boolean,
+  interval = 120,
+): string | null {
+  const [frameIndex, setFrameIndex] = useState(0);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    if (isSpinning) {
+      intervalRef.current = setInterval(() => {
+        setFrameIndex((current) => (current + 1) % SPINNER_FRAMES.length);
+      }, interval);
+    } else {
+      setFrameIndex(0);
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [isSpinning, interval]);
+
+  if (!isSpinning) {
+    return null;
+  }
+
+  return SPINNER_FRAMES[frameIndex] ?? SPINNER_FRAMES[0] ?? null;
+}

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>