feat: add external terminal support with cross-platform detection

Add support for opening worktree directories in external terminals
(iTerm2, Warp, Ghostty, System Terminal, etc.) while retaining the
integrated terminal as the default option.

Changes:
- Add terminal detection for macOS, Windows, and Linux
- Add "Open in Terminal" split-button in worktree dropdown
- Add external terminal selection in Settings > Terminal
- Add default open mode setting (new tab vs split)
- Display branch name in terminal panel header
- Support 20+ terminals across platforms

Part of #558, Closes #550

apps/ui/src/components/views/settings-view/terminal/terminal-section.tsx

@@ -2,6 +2,7 @@ import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { Slider } from '@/components/ui/slider';
 import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
 import {
   Select,
   SelectContent,
@@ -9,12 +10,20 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { SquareTerminal } from 'lucide-react';
+import {
+  SquareTerminal,
+  RefreshCw,
+  Terminal,
+  SquarePlus,
+  SplitSquareHorizontal,
+} from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useAppStore } from '@/store/app-store';
 import { toast } from 'sonner';
 import { TERMINAL_FONT_OPTIONS } from '@/config/terminal-themes';
 import { DEFAULT_FONT_VALUE } from '@/config/ui-font-options';
+import { useAvailableTerminals } from '@/components/views/board-view/worktree-panel/hooks/use-available-terminals';
+import { getTerminalIcon } from '@/components/icons/terminal-icons';
 
 export function TerminalSection() {
   const {
@@ -25,6 +34,8 @@ export function TerminalSection() {
     setTerminalScrollbackLines,
     setTerminalLineHeight,
     setTerminalDefaultFontSize,
+    defaultTerminalId,
+    setDefaultTerminalId,
     setOpenTerminalMode,
   } = useAppStore();
 
@@ -38,6 +49,9 @@ export function TerminalSection() {
     openTerminalMode,
   } = terminalState;
 
+  // Get available external terminals
+  const { terminals, isRefreshing, refresh } = useAvailableTerminals();
+
   return (
     <div
       className={cn(
@@ -60,6 +74,102 @@ export function TerminalSection() {
         </p>
       </div>
       <div className="p-6 space-y-6">
+        {/* Default External Terminal */}
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <Label className="text-foreground font-medium">Default External Terminal</Label>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0"
+              onClick={refresh}
+              disabled={isRefreshing}
+              title="Refresh available terminals"
+            >
+              <RefreshCw className={cn('w-3.5 h-3.5', isRefreshing && 'animate-spin')} />
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Terminal to use when selecting "Open in Terminal" from the worktree menu
+          </p>
+          <Select
+            value={defaultTerminalId ?? 'integrated'}
+            onValueChange={(value) => {
+              setDefaultTerminalId(value === 'integrated' ? null : value);
+              toast.success(
+                value === 'integrated'
+                  ? 'Integrated terminal set as default'
+                  : 'Default terminal changed'
+              );
+            }}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Select a terminal" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="integrated">
+                <span className="flex items-center gap-2">
+                  <Terminal className="w-4 h-4" />
+                  Integrated Terminal
+                </span>
+              </SelectItem>
+              {terminals.map((terminal) => {
+                const TerminalIcon = getTerminalIcon(terminal.id);
+                return (
+                  <SelectItem key={terminal.id} value={terminal.id}>
+                    <span className="flex items-center gap-2">
+                      <TerminalIcon className="w-4 h-4" />
+                      {terminal.name}
+                    </span>
+                  </SelectItem>
+                );
+              })}
+            </SelectContent>
+          </Select>
+          {terminals.length === 0 && (
+            <p className="text-xs text-muted-foreground italic">
+              No external terminals detected. Click refresh to re-scan.
+            </p>
+          )}
+        </div>
+
+        {/* Default Open Mode */}
+        <div className="space-y-3">
+          <Label className="text-foreground font-medium">Default Open Mode</Label>
+          <p className="text-xs text-muted-foreground">
+            How to open the integrated terminal when using "Open in Terminal" from the worktree menu
+          </p>
+          <Select
+            value={openTerminalMode}
+            onValueChange={(value: 'newTab' | 'split') => {
+              setOpenTerminalMode(value);
+              toast.success(
+                value === 'newTab'
+                  ? 'New terminals will open in new tabs'
+                  : 'New terminals will split the current tab'
+              );
+            }}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="newTab">
+                <span className="flex items-center gap-2">
+                  <SquarePlus className="w-4 h-4" />
+                  New Tab
+                </span>
+              </SelectItem>
+              <SelectItem value="split">
+                <span className="flex items-center gap-2">
+                  <SplitSquareHorizontal className="w-4 h-4" />
+                  Split Current Tab
+                </span>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
         {/* Font Family */}
         <div className="space-y-3">
           <Label className="text-foreground font-medium">Font Family</Label>
@@ -167,26 +277,6 @@ export function TerminalSection() {
           />
         </div>
 
-        {/* Open in Terminal Mode */}
-        <div className="space-y-3">
-          <Label className="text-foreground font-medium">Open in Terminal Mode</Label>
-          <p className="text-xs text-muted-foreground">
-            How to open terminals from the "Open in Terminal" action in the worktree menu
-          </p>
-          <Select
-            value={openTerminalMode}
-            onValueChange={(value: 'newTab' | 'split') => setOpenTerminalMode(value)}
-          >
-            <SelectTrigger className="w-full">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="newTab">New Tab</SelectItem>
-              <SelectItem value="split">Split Current Tab</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-
         {/* Screen Reader Mode */}
         <div className="flex items-center justify-between">
           <div className="space-y-1">