Merge branch 'v0.13.0rc' into feat/react-query

Merged latest changes from v0.13.0rc into feat/react-query while preserving React Query migration. Key merge decisions: - Kept React Query hooks for data fetching (useRunningAgents, useStopFeature, etc.) - Added backlog plan handling to running-agents-view stop functionality - Imported both SkeletonPulse and Spinner for CLI status components - Used Spinner for refresh buttons across all settings sections - Preserved isBacklogPlan check in agent-output-modal TaskProgressPanel - Added handleOpenInIntegratedTerminal to worktree actions while keeping React Query mutations
2026-02-02 20:43:36 +00:00 · 2026-01-19 13:28:43 +01:00
parent 361cb06bf0 63b8eb0991
commit f987fc1f10
387 changed files with 28102 additions and 6881 deletions
--- a/apps/ui/src/components/views/board-view/worktree-panel/components/branch-switch-dropdown.tsx
+++ b/apps/ui/src/components/views/board-view/worktree-panel/components/branch-switch-dropdown.tsx
@@ -8,7 +8,8 @@ import {
  DropdownMenuTrigger,
  DropdownMenuLabel,
 } from '@/components/ui/dropdown-menu';
-import { GitBranch, RefreshCw, GitBranchPlus, Check, Search } from 'lucide-react';
+import { GitBranch, GitBranchPlus, Check, Search } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
 import { cn } from '@/lib/utils';
 import type { WorktreeInfo, BranchInfo } from '../types';

@@ -81,7 +82,7 @@ export function BranchSwitchDropdown({
        <div className="max-h-[250px] overflow-y-auto">
          {isLoadingBranches ? (
            <DropdownMenuItem disabled className="text-xs">
-              <RefreshCw className="w-3.5 h-3.5 mr-2 animate-spin" />
+              <Spinner size="xs" className="mr-2" />
              Loading branches...
            </DropdownMenuItem>
          ) : filteredBranches.length === 0 ? (
--- a/apps/ui/src/components/views/board-view/worktree-panel/components/dev-server-logs-panel.tsx
+++ b/apps/ui/src/components/views/board-view/worktree-panel/components/dev-server-logs-panel.tsx
@@ -2,7 +2,6 @@ import { useEffect, useRef, useCallback, useState } from 'react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import {
-  Loader2,
  Terminal,
  ArrowDown,
  ExternalLink,
@@ -12,6 +11,7 @@ import {
  Clock,
  GitBranch,
 } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
 import { cn } from '@/lib/utils';
 import { XtermLogViewer, type XtermLogViewerRef } from '@/components/ui/xterm-log-viewer';
 import { useDevServerLogs } from '../hooks/use-dev-server-logs';
@@ -183,7 +183,7 @@ export function DevServerLogsPanel({
                onClick={() => fetchLogs()}
                title="Refresh logs"
              >
-                <RefreshCw className={cn('w-3.5 h-3.5', isLoading && 'animate-spin')} />
+                {isLoading ? <Spinner size="xs" /> : <RefreshCw className="w-3.5 h-3.5" />}
              </Button>
            </div>
          </div>
@@ -234,7 +234,7 @@ export function DevServerLogsPanel({
        >
          {isLoading && !logs ? (
            <div className="flex items-center justify-center h-full min-h-[300px] text-muted-foreground">
-              <Loader2 className="w-5 h-5 animate-spin mr-2" />
+              <Spinner size="md" className="mr-2" />
              <span className="text-sm">Loading logs...</span>
            </div>
          ) : !logs && !isRunning ? (
@@ -245,7 +245,7 @@ export function DevServerLogsPanel({
            </div>
          ) : !logs ? (
            <div className="flex flex-col items-center justify-center h-full min-h-[300px] text-muted-foreground p-8">
-              <div className="w-8 h-8 mb-3 rounded-full border-2 border-muted-foreground/20 border-t-muted-foreground/60 animate-spin" />
+              <Spinner size="xl" className="mb-3" />
              <p className="text-sm">Waiting for output...</p>
              <p className="text-xs mt-1 opacity-60">
                Logs will appear as the server generates output
@@ -256,7 +256,6 @@ export function DevServerLogsPanel({
              ref={xtermRef}
              className="h-full"
              minHeight={280}
-              fontSize={13}
              autoScroll={autoScrollEnabled}
              onScrollAwayFromBottom={() => setAutoScrollEnabled(false)}
              onScrollToBottom={() => setAutoScrollEnabled(true)}
--- a/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-actions-dropdown.tsx
+++ b/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-actions-dropdown.tsx
@@ -26,13 +26,22 @@ import {
  RefreshCw,
  Copy,
  ScrollText,
+  Terminal,
+  SquarePlus,
+  SplitSquareHorizontal,
 } from 'lucide-react';
 import { toast } from 'sonner';
 import { cn } from '@/lib/utils';
 import type { WorktreeInfo, DevServerInfo, PRInfo, GitRepoStatus } from '../types';
 import { TooltipWrapper } from './tooltip-wrapper';
 import { useAvailableEditors, useEffectiveDefaultEditor } from '../hooks/use-available-editors';
+import {
+  useAvailableTerminals,
+  useEffectiveDefaultTerminal,
+} from '../hooks/use-available-terminals';
 import { getEditorIcon } from '@/components/icons/editor-icons';
+import { getTerminalIcon } from '@/components/icons/terminal-icons';
+import { useAppStore } from '@/store/app-store';

 interface WorktreeActionsDropdownProps {
  worktree: WorktreeInfo;
@@ -51,6 +60,8 @@ interface WorktreeActionsDropdownProps {
  onPull: (worktree: WorktreeInfo) => void;
  onPush: (worktree: WorktreeInfo) => void;
  onOpenInEditor: (worktree: WorktreeInfo, editorCommand?: string) => void;
+  onOpenInIntegratedTerminal: (worktree: WorktreeInfo, mode?: 'tab' | 'split') => void;
+  onOpenInExternalTerminal: (worktree: WorktreeInfo, terminalId?: string) => void;
  onCommit: (worktree: WorktreeInfo) => void;
  onCreatePR: (worktree: WorktreeInfo) => void;
  onAddressPRComments: (worktree: WorktreeInfo, prInfo: PRInfo) => void;
@@ -81,6 +92,8 @@ export function WorktreeActionsDropdown({
  onPull,
  onPush,
  onOpenInEditor,
+  onOpenInIntegratedTerminal,
+  onOpenInExternalTerminal,
  onCommit,
  onCreatePR,
  onAddressPRComments,
@@ -108,6 +121,20 @@ export function WorktreeActionsDropdown({
    ? getEditorIcon(effectiveDefaultEditor.command)
    : null;

+  // Get available terminals for the "Open In Terminal" submenu
+  const { terminals, hasExternalTerminals } = useAvailableTerminals();
+
+  // Use shared hook for effective default terminal (null = integrated terminal)
+  const effectiveDefaultTerminal = useEffectiveDefaultTerminal(terminals);
+
+  // Get the user's preferred mode for opening terminals (new tab vs split)
+  const openTerminalMode = useAppStore((s) => s.terminalState.openTerminalMode);
+
+  // Get icon component for the effective terminal
+  const DefaultTerminalIcon = effectiveDefaultTerminal
+    ? getTerminalIcon(effectiveDefaultTerminal.id)
+    : Terminal;
+
  // Check if there's a PR associated with this worktree from stored metadata
  const hasPR = !!worktree.pr;

@@ -303,6 +330,77 @@ export function WorktreeActionsDropdown({
            </DropdownMenuSubContent>
          </DropdownMenuSub>
        )}
+        {/* Open in terminal - always show with integrated + external options */}
+        <DropdownMenuSub>
+          <div className="flex items-center">
+            {/* Main clickable area - opens in default terminal (integrated or external) */}
+            <DropdownMenuItem
+              onClick={() => {
+                if (effectiveDefaultTerminal) {
+                  // External terminal is the default
+                  onOpenInExternalTerminal(worktree, effectiveDefaultTerminal.id);
+                } else {
+                  // Integrated terminal is the default - use user's preferred mode
+                  const mode = openTerminalMode === 'newTab' ? 'tab' : 'split';
+                  onOpenInIntegratedTerminal(worktree, mode);
+                }
+              }}
+              className="text-xs flex-1 pr-0 rounded-r-none"
+            >
+              <DefaultTerminalIcon className="w-3.5 h-3.5 mr-2" />
+              Open in {effectiveDefaultTerminal?.name ?? 'Terminal'}
+            </DropdownMenuItem>
+            {/* Chevron trigger for submenu with all terminals */}
+            <DropdownMenuSubTrigger className="text-xs px-1 rounded-l-none border-l border-border/30 h-8" />
+          </div>
+          <DropdownMenuSubContent>
+            {/* Automaker Terminal - with submenu for new tab vs split */}
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger className="text-xs">
+                <Terminal className="w-3.5 h-3.5 mr-2" />
+                Terminal
+                {!effectiveDefaultTerminal && (
+                  <span className="ml-auto mr-2 text-[10px] text-muted-foreground">(default)</span>
+                )}
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem
+                  onClick={() => onOpenInIntegratedTerminal(worktree, 'tab')}
+                  className="text-xs"
+                >
+                  <SquarePlus className="w-3.5 h-3.5 mr-2" />
+                  New Tab
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => onOpenInIntegratedTerminal(worktree, 'split')}
+                  className="text-xs"
+                >
+                  <SplitSquareHorizontal className="w-3.5 h-3.5 mr-2" />
+                  Split
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+            {/* External terminals */}
+            {terminals.length > 0 && <DropdownMenuSeparator />}
+            {terminals.map((terminal) => {
+              const TerminalIcon = getTerminalIcon(terminal.id);
+              const isDefault = terminal.id === effectiveDefaultTerminal?.id;
+              return (
+                <DropdownMenuItem
+                  key={terminal.id}
+                  onClick={() => onOpenInExternalTerminal(worktree, terminal.id)}
+                  className="text-xs"
+                >
+                  <TerminalIcon className="w-3.5 h-3.5 mr-2" />
+                  {terminal.name}
+                  {isDefault && (
+                    <span className="ml-auto text-[10px] text-muted-foreground">(default)</span>
+                  )}
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
        {!worktree.isMain && hasInitScript && (
          <DropdownMenuItem onClick={() => onRunInitScript(worktree)} className="text-xs">
            <RefreshCw className="w-3.5 h-3.5 mr-2" />
--- a/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-mobile-dropdown.tsx
+++ b/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-mobile-dropdown.tsx
@@ -7,7 +7,8 @@ import {
  DropdownMenuSeparator,
  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { GitBranch, ChevronDown, Loader2, CircleDot, Check } from 'lucide-react';
+import { GitBranch, ChevronDown, CircleDot, Check } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
 import { cn } from '@/lib/utils';
 import type { WorktreeInfo } from '../types';

@@ -44,7 +45,7 @@ export function WorktreeMobileDropdown({
          <GitBranch className="w-3.5 h-3.5 shrink-0" />
          <span className="truncate">{displayBranch}</span>
          {isActivating ? (
-            <Loader2 className="w-3 h-3 animate-spin shrink-0" />
+            <Spinner size="xs" className="shrink-0" />
          ) : (
            <ChevronDown className="w-3 h-3 shrink-0 ml-auto" />
          )}
@@ -74,7 +75,7 @@ export function WorktreeMobileDropdown({
                ) : (
                  <div className="w-3.5 h-3.5 shrink-0" />
                )}
-                {isRunning && <Loader2 className="w-3 h-3 animate-spin shrink-0" />}
+                {isRunning && <Spinner size="xs" className="shrink-0" />}
                <span className={cn('font-mono text-xs truncate', isSelected && 'font-medium')}>
                  {worktree.branch}
                </span>
--- a/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx
+++ b/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx
@@ -1,6 +1,7 @@
 import type { JSX } from 'react';
 import { Button } from '@/components/ui/button';
-import { RefreshCw, Globe, Loader2, CircleDot, GitPullRequest } from 'lucide-react';
+import { Globe, CircleDot, GitPullRequest } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
 import { cn } from '@/lib/utils';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import type { WorktreeInfo, BranchInfo, DevServerInfo, PRInfo, GitRepoStatus } from '../types';
@@ -37,6 +38,8 @@ interface WorktreeTabProps {
  onPull: (worktree: WorktreeInfo) => void;
  onPush: (worktree: WorktreeInfo) => void;
  onOpenInEditor: (worktree: WorktreeInfo, editorCommand?: string) => void;
+  onOpenInIntegratedTerminal: (worktree: WorktreeInfo, mode?: 'tab' | 'split') => void;
+  onOpenInExternalTerminal: (worktree: WorktreeInfo, terminalId?: string) => void;
  onCommit: (worktree: WorktreeInfo) => void;
  onCreatePR: (worktree: WorktreeInfo) => void;
  onAddressPRComments: (worktree: WorktreeInfo, prInfo: PRInfo) => void;
@@ -81,6 +84,8 @@ export function WorktreeTab({
  onPull,
  onPush,
  onOpenInEditor,
+  onOpenInIntegratedTerminal,
+  onOpenInExternalTerminal,
  onCommit,
  onCreatePR,
  onAddressPRComments,
@@ -197,8 +202,8 @@ export function WorktreeTab({
            aria-label={worktree.branch}
            data-testid={`worktree-branch-${worktree.branch}`}
          >
-            {isRunning && <Loader2 className="w-3 h-3 animate-spin" />}
-            {isActivating && !isRunning && <RefreshCw className="w-3 h-3 animate-spin" />}
+            {isRunning && <Spinner size="xs" />}
+            {isActivating && !isRunning && <Spinner size="xs" />}
            {worktree.branch}
            {cardCount !== undefined && cardCount > 0 && (
              <span className="inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded bg-background/80 text-foreground border border-border">
@@ -264,8 +269,8 @@ export function WorktreeTab({
              : 'Click to switch to this branch'
          }
        >
-          {isRunning && <Loader2 className="w-3 h-3 animate-spin" />}
-          {isActivating && !isRunning && <RefreshCw className="w-3 h-3 animate-spin" />}
+          {isRunning && <Spinner size="xs" />}
+          {isActivating && !isRunning && <Spinner size="xs" />}
          {worktree.branch}
          {cardCount !== undefined && cardCount > 0 && (
            <span className="inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded bg-background/80 text-foreground border border-border">
@@ -342,6 +347,8 @@ export function WorktreeTab({
        onPull={onPull}
        onPush={onPush}
        onOpenInEditor={onOpenInEditor}
+        onOpenInIntegratedTerminal={onOpenInIntegratedTerminal}
+        onOpenInExternalTerminal={onOpenInExternalTerminal}
        onCommit={onCommit}
        onCreatePR={onCreatePR}
        onAddressPRComments={onAddressPRComments}
--- a/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-available-terminals.ts
+++ b/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-available-terminals.ts
@@ -0,0 +1,99 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { getElectronAPI } from '@/lib/electron';
+import { useAppStore } from '@/store/app-store';
+import type { TerminalInfo } from '@automaker/types';
+
+const logger = createLogger('AvailableTerminals');
+
+// Re-export TerminalInfo for convenience
+export type { TerminalInfo };
+
+export function useAvailableTerminals() {
+  const [terminals, setTerminals] = useState<TerminalInfo[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const fetchAvailableTerminals = useCallback(async () => {
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.getAvailableTerminals) {
+        setIsLoading(false);
+        return;
+      }
+      const result = await api.worktree.getAvailableTerminals();
+      if (result.success && result.result?.terminals) {
+        setTerminals(result.result.terminals);
+      }
+    } catch (error) {
+      logger.error('Failed to fetch available terminals:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  /**
+   * Refresh terminals by clearing the server cache and re-detecting
+   * Use this when the user has installed/uninstalled terminals
+   */
+  const refresh = useCallback(async () => {
+    setIsRefreshing(true);
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.refreshTerminals) {
+        // Fallback to regular fetch if refresh not available
+        await fetchAvailableTerminals();
+        return;
+      }
+      const result = await api.worktree.refreshTerminals();
+      if (result.success && result.result?.terminals) {
+        setTerminals(result.result.terminals);
+        logger.info(`Terminal cache refreshed, found ${result.result.terminals.length} terminals`);
+      }
+    } catch (error) {
+      logger.error('Failed to refresh terminals:', error);
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, [fetchAvailableTerminals]);
+
+  useEffect(() => {
+    fetchAvailableTerminals();
+  }, [fetchAvailableTerminals]);
+
+  return {
+    terminals,
+    isLoading,
+    isRefreshing,
+    refresh,
+    // Convenience property: has external terminals available
+    hasExternalTerminals: terminals.length > 0,
+    // The first terminal is the "default" one (highest priority)
+    defaultTerminal: terminals[0] ?? null,
+  };
+}
+
+/**
+ * Hook to get the effective default terminal based on user settings
+ * Returns null if user prefers integrated terminal (defaultTerminalId is null)
+ * Falls back to: user preference > first available external terminal
+ */
+export function useEffectiveDefaultTerminal(terminals: TerminalInfo[]): TerminalInfo | null {
+  const defaultTerminalId = useAppStore((s) => s.defaultTerminalId);
+
+  return useMemo(() => {
+    // If user hasn't set a preference (null/undefined), they prefer integrated terminal
+    if (defaultTerminalId == null) {
+      return null;
+    }
+
+    // If user has set a preference, find it in available terminals
+    if (defaultTerminalId) {
+      const found = terminals.find((t) => t.id === defaultTerminalId);
+      if (found) return found;
+    }
+
+    // If the saved preference doesn't exist anymore, fall back to first available
+    return terminals[0] ?? null;
+  }, [terminals, defaultTerminalId]);
+}
--- a/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-server-logs.ts
+++ b/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-server-logs.ts
@@ -93,7 +93,7 @@ export function useDevServerLogs({ worktreePath, autoSubscribe = true }: UseDevS
          isRunning: true,
          isLoading: false,
          port: result.result!.port,
-          url: `http://localhost:${result.result!.port}`,
+          url: result.result!.url,
          startedAt: result.result!.startedAt,
          error: null,
        }));
--- a/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-worktree-actions.ts
+++ b/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-worktree-actions.ts
@@ -1,4 +1,8 @@
 import { useState, useCallback } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import { createLogger } from '@automaker/utils/logger';
+import { getElectronAPI } from '@/lib/electron';
+import { toast } from 'sonner';
 import {
  useSwitchBranch,
  usePullWorktree,
@@ -7,7 +11,10 @@ import {
 } from '@/hooks/mutations';
 import type { WorktreeInfo } from '../types';

+const logger = createLogger('WorktreeActions');
+
 export function useWorktreeActions() {
+  const navigate = useNavigate();
  const [isActivating, setIsActivating] = useState(false);

  // Use React Query mutations
@@ -45,6 +52,19 @@ export function useWorktreeActions() {
    [pushMutation]
  );

+  const handleOpenInIntegratedTerminal = useCallback(
+    (worktree: WorktreeInfo, mode?: 'tab' | 'split') => {
+      // Navigate to the terminal view with the worktree path and branch name
+      // The terminal view will handle creating the terminal with the specified cwd
+      // Include nonce to allow opening the same worktree multiple times
+      navigate({
+        to: '/terminal',
+        search: { cwd: worktree.path, branch: worktree.branch, mode, nonce: Date.now() },
+      });
+    },
+    [navigate]
+  );
+
  const handleOpenInEditor = useCallback(
    async (worktree: WorktreeInfo, editorCommand?: string) => {
      openInEditorMutation.mutate({
@@ -55,6 +75,27 @@ export function useWorktreeActions() {
    [openInEditorMutation]
  );

+  const handleOpenInExternalTerminal = useCallback(
+    async (worktree: WorktreeInfo, terminalId?: string) => {
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.openInExternalTerminal) {
+          logger.warn('Open in external terminal API not available');
+          return;
+        }
+        const result = await api.worktree.openInExternalTerminal(worktree.path, terminalId);
+        if (result.success && result.result) {
+          toast.success(result.result.message);
+        } else if (result.error) {
+          toast.error(result.error);
+        }
+      } catch (error) {
+        logger.error('Open in external terminal failed:', error);
+      }
+    },
+    []
+  );
+
  return {
    isPulling: pullMutation.isPending,
    isPushing: pushMutation.isPending,
@@ -64,6 +105,8 @@ export function useWorktreeActions() {
    handleSwitchBranch,
    handlePull,
    handlePush,
+    handleOpenInIntegratedTerminal,
    handleOpenInEditor,
+    handleOpenInExternalTerminal,
  };
 }
--- a/apps/ui/src/components/views/board-view/worktree-panel/types.ts
+++ b/apps/ui/src/components/views/board-view/worktree-panel/types.ts
@@ -1,10 +1,6 @@
-export interface WorktreePRInfo {
-  number: number;
-  url: string;
-  title: string;
-  state: string;
-  createdAt: string;
-}
+// Re-export shared types from @automaker/types
+export type { PRState, WorktreePRInfo } from '@automaker/types';
+import type { PRState, WorktreePRInfo } from '@automaker/types';

 export interface WorktreeInfo {
  path: string;
@@ -43,7 +39,8 @@ export interface PRInfo {
  number: number;
  title: string;
  url: string;
-  state: string;
+  /** PR state: OPEN, MERGED, or CLOSED */
+  state: PRState;
  author: string;
  body: string;
  comments: Array<{
--- a/apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx
+++ b/apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useCallback, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { GitBranch, Plus, RefreshCw } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
 import { cn, pathsEqual } from '@/lib/utils';
 import { toast } from 'sonner';
 import { getHttpApiClient } from '@/lib/http-api-client';
@@ -79,7 +80,9 @@ export function WorktreePanel({
    handleSwitchBranch,
    handlePull,
    handlePush,
+    handleOpenInIntegratedTerminal,
    handleOpenInEditor,
+    handleOpenInExternalTerminal,
  } = useWorktreeActions();

  const { hasRunningFeatures } = useRunningFeatures({
@@ -225,6 +228,8 @@ export function WorktreePanel({
            onPull={handlePull}
            onPush={handlePush}
            onOpenInEditor={handleOpenInEditor}
+            onOpenInIntegratedTerminal={handleOpenInIntegratedTerminal}
+            onOpenInExternalTerminal={handleOpenInExternalTerminal}
            onCommit={onCommit}
            onCreatePR={onCreatePR}
            onAddressPRComments={onAddressPRComments}
@@ -265,7 +270,7 @@ export function WorktreePanel({
              disabled={isLoading}
              title="Refresh worktrees"
            >
-              <RefreshCw className={cn('w-3.5 h-3.5', isLoading && 'animate-spin')} />
+              {isLoading ? <Spinner size="xs" /> : <RefreshCw className="w-3.5 h-3.5" />}
            </Button>
          </>
        )}
@@ -312,6 +317,8 @@ export function WorktreePanel({
            onPull={handlePull}
            onPush={handlePush}
            onOpenInEditor={handleOpenInEditor}
+            onOpenInIntegratedTerminal={handleOpenInIntegratedTerminal}
+            onOpenInExternalTerminal={handleOpenInExternalTerminal}
            onCommit={onCommit}
            onCreatePR={onCreatePR}
            onAddressPRComments={onAddressPRComments}
@@ -370,6 +377,8 @@ export function WorktreePanel({
                  onPull={handlePull}
                  onPush={handlePush}
                  onOpenInEditor={handleOpenInEditor}
+                  onOpenInIntegratedTerminal={handleOpenInIntegratedTerminal}
+                  onOpenInExternalTerminal={handleOpenInExternalTerminal}
                  onCommit={onCommit}
                  onCreatePR={onCreatePR}
                  onAddressPRComments={onAddressPRComments}
@@ -409,7 +418,7 @@ export function WorktreePanel({
              disabled={isLoading}
              title="Refresh worktrees"
            >
-              <RefreshCw className={cn('w-3.5 h-3.5', isLoading && 'animate-spin')} />
+              {isLoading ? <Spinner size="xs" /> : <RefreshCw className="w-3.5 h-3.5" />}
            </Button>
          </div>
        </>