Merge main into massive-terminal-upgrade

Resolves merge conflicts:
- apps/server/src/routes/terminal/common.ts: Keep randomBytes import, use @automaker/utils for createLogger
- apps/ui/eslint.config.mjs: Use main's explicit globals list with XMLHttpRequest and MediaQueryListEvent additions
- apps/ui/src/components/views/terminal-view.tsx: Keep our terminal improvements (killAllSessions, beforeunload, better error handling)
- apps/ui/src/config/terminal-themes.ts: Keep our search highlight colors for all themes
- apps/ui/src/store/app-store.ts: Keep our terminal settings persistence improvements (merge function)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/ui/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx

@@ -1,16 +1,10 @@
-
-import { Button } from "@/components/ui/button";
-import { RefreshCw, Globe, Loader2, CircleDot, GitPullRequest } from "lucide-react";
-import { cn } from "@/lib/utils";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import type { WorktreeInfo, BranchInfo, DevServerInfo, PRInfo } from "../types";
-import { BranchSwitchDropdown } from "./branch-switch-dropdown";
-import { WorktreeActionsDropdown } from "./worktree-actions-dropdown";
+import { Button } from '@/components/ui/button';
+import { RefreshCw, Globe, Loader2, CircleDot, GitPullRequest } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import type { WorktreeInfo, BranchInfo, DevServerInfo, PRInfo } from '../types';
+import { BranchSwitchDropdown } from './branch-switch-dropdown';
+import { WorktreeActionsDropdown } from './worktree-actions-dropdown';
 
 interface WorktreeTabProps {
   worktree: WorktreeInfo;
@@ -91,93 +85,88 @@ export function WorktreeTab({
   onStopDevServer,
   onOpenDevServerUrl,
 }: WorktreeTabProps) {
-
   let prBadge: JSX.Element | null = null;
   if (worktree.pr) {
-    const prState = worktree.pr.state?.toLowerCase() ?? "open";
+    const prState = worktree.pr.state?.toLowerCase() ?? 'open';
     const prStateClasses = (() => {
       // When selected (active tab), use high contrast solid background (paper-like)
       if (isSelected) {
-        return "bg-background text-foreground border-transparent shadow-sm";
+        return 'bg-background text-foreground border-transparent shadow-sm';
       }
 
       // When not selected, use the colored variants
       switch (prState) {
-        case "open":
-        case "reopened":
-          return "bg-emerald-500/15 dark:bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 border-emerald-500/30 dark:border-emerald-500/40 hover:bg-emerald-500/25";
-        case "draft":
-          return "bg-amber-500/15 dark:bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30 dark:border-amber-500/40 hover:bg-amber-500/25";
-        case "merged":
-          return "bg-purple-500/15 dark:bg-purple-500/20 text-purple-600 dark:text-purple-400 border-purple-500/30 dark:border-purple-500/40 hover:bg-purple-500/25";
-        case "closed":
-          return "bg-rose-500/15 dark:bg-rose-500/20 text-rose-600 dark:text-rose-400 border-rose-500/30 dark:border-rose-500/40 hover:bg-rose-500/25";
+        case 'open':
+        case 'reopened':
+          return 'bg-emerald-500/15 dark:bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 border-emerald-500/30 dark:border-emerald-500/40 hover:bg-emerald-500/25';
+        case 'draft':
+          return 'bg-amber-500/15 dark:bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30 dark:border-amber-500/40 hover:bg-amber-500/25';
+        case 'merged':
+          return 'bg-purple-500/15 dark:bg-purple-500/20 text-purple-600 dark:text-purple-400 border-purple-500/30 dark:border-purple-500/40 hover:bg-purple-500/25';
+        case 'closed':
+          return 'bg-rose-500/15 dark:bg-rose-500/20 text-rose-600 dark:text-rose-400 border-rose-500/30 dark:border-rose-500/40 hover:bg-rose-500/25';
         default:
-          return "bg-muted text-muted-foreground border-border/60 hover:bg-muted/80";
+          return 'bg-muted text-muted-foreground border-border/60 hover:bg-muted/80';
       }
     })();
 
-    const prLabel = `Pull Request #${worktree.pr.number}, ${prState}${worktree.pr.title ? `: ${worktree.pr.title}` : ""}`;
+    const prLabel = `Pull Request #${worktree.pr.number}, ${prState}${worktree.pr.title ? `: ${worktree.pr.title}` : ''}`;
 
     // Helper to get status icon color for the selected state
     const getStatusColorClass = () => {
-      if (!isSelected) return "";
+      if (!isSelected) return '';
       switch (prState) {
-        case "open":
-        case "reopened":
-          return "text-emerald-600 dark:text-emerald-500";
-        case "draft":
-          return "text-amber-600 dark:text-amber-500";
-        case "merged":
-          return "text-purple-600 dark:text-purple-500";
-        case "closed":
-          return "text-rose-600 dark:text-rose-500";
+        case 'open':
+        case 'reopened':
+          return 'text-emerald-600 dark:text-emerald-500';
+        case 'draft':
+          return 'text-amber-600 dark:text-amber-500';
+        case 'merged':
+          return 'text-purple-600 dark:text-purple-500';
+        case 'closed':
+          return 'text-rose-600 dark:text-rose-500';
         default:
-          return "text-muted-foreground";
+          return 'text-muted-foreground';
       }
     };
 
     prBadge = (
-      <button
-        type="button"
+      <span
+        role="button"
+        tabIndex={0}
         className={cn(
-          "ml-1.5 inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium transition-colors",
-          "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 focus:ring-offset-background",
-          "appearance-none cursor-pointer hover:opacity-80 active:opacity-70", // Reset button appearance but keep cursor, add hover/active states
+          'ml-1.5 inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium transition-colors',
+          'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 focus:ring-offset-background',
+          'cursor-pointer hover:opacity-80 active:opacity-70',
           prStateClasses
         )}
-        style={{
-          // Override any inherited button styles
-          backgroundImage: "none",
-          boxShadow: "none",
-        }}
         title={`${prLabel} - Click to open`}
         aria-label={`${prLabel} - Click to open pull request`}
         onClick={(e) => {
           e.stopPropagation(); // Prevent triggering worktree selection
           if (worktree.pr?.url) {
-            window.open(worktree.pr.url, "_blank", "noopener,noreferrer");
+            window.open(worktree.pr.url, '_blank', 'noopener,noreferrer');
           }
         }}
         onKeyDown={(e) => {
           // Prevent event from bubbling to parent button
           e.stopPropagation();
-          if (e.key === "Enter" || e.key === " ") {
+          if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
             if (worktree.pr?.url) {
-              window.open(worktree.pr.url, "_blank", "noopener,noreferrer");
+              window.open(worktree.pr.url, '_blank', 'noopener,noreferrer');
             }
           }
         }}
       >
-        <GitPullRequest className={cn("w-3 h-3", getStatusColorClass())} aria-hidden="true" />
-        <span aria-hidden="true" className={isSelected ? "text-foreground font-semibold" : ""}>
+        <GitPullRequest className={cn('w-3 h-3', getStatusColorClass())} aria-hidden="true" />
+        <span aria-hidden="true" className={isSelected ? 'text-foreground font-semibold' : ''}>
           PR #{worktree.pr.number}
         </span>
-        <span className={cn("capitalize", getStatusColorClass())} aria-hidden="true">
+        <span className={cn('capitalize', getStatusColorClass())} aria-hidden="true">
           {prState}
         </span>
-      </button>
+      </span>
     );
   }
 
@@ -186,21 +175,21 @@ export function WorktreeTab({
       {worktree.isMain ? (
         <>
           <Button
-            variant={isSelected ? "default" : "outline"}
+            variant={isSelected ? 'default' : 'outline'}
             size="sm"
             className={cn(
-              "h-7 px-3 text-xs font-mono gap-1.5 border-r-0 rounded-l-md rounded-r-none",
-              isSelected && "bg-primary text-primary-foreground",
-              !isSelected && "bg-secondary/50 hover:bg-secondary"
+              'h-7 px-3 text-xs font-mono gap-1.5 border-r-0 rounded-l-md rounded-r-none',
+              isSelected && 'bg-primary text-primary-foreground',
+              !isSelected && 'bg-secondary/50 hover:bg-secondary'
             )}
             onClick={() => onSelectWorktree(worktree)}
             disabled={isActivating}
-            title="Click to preview main"
+            title={`Click to preview ${worktree.branch}`}
+            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" />
-            )}
+            {isActivating && !isRunning && <RefreshCw className="w-3 h-3 animate-spin" />}
             {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">
@@ -211,18 +200,23 @@ export function WorktreeTab({
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <span className={cn(
-                      "inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded border",
-                      isSelected
-                        ? "bg-amber-500 text-amber-950 border-amber-400"
-                        : "bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30"
-                    )}>
+                    <span
+                      className={cn(
+                        'inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded border',
+                        isSelected
+                          ? 'bg-amber-500 text-amber-950 border-amber-400'
+                          : 'bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30'
+                      )}
+                    >
                       <CircleDot className="w-2.5 h-2.5 mr-0.5" />
-                      {changedFilesCount ?? "!"}
+                      {changedFilesCount ?? '!'}
                     </span>
                   </TooltipTrigger>
                   <TooltipContent>
-                    <p>{changedFilesCount ?? "Some"} uncommitted file{changedFilesCount !== 1 ? "s" : ""}</p>
+                    <p>
+                      {changedFilesCount ?? 'Some'} uncommitted file
+                      {changedFilesCount !== 1 ? 's' : ''}
+                    </p>
                   </TooltipContent>
                 </Tooltip>
               </TooltipProvider>
@@ -245,26 +239,24 @@ export function WorktreeTab({
         </>
       ) : (
         <Button
-          variant={isSelected ? "default" : "outline"}
+          variant={isSelected ? 'default' : 'outline'}
           size="sm"
           className={cn(
-            "h-7 px-3 text-xs font-mono gap-1.5 rounded-l-md rounded-r-none border-r-0",
-            isSelected && "bg-primary text-primary-foreground",
-            !isSelected && "bg-secondary/50 hover:bg-secondary",
-            !worktree.hasWorktree && !isSelected && "opacity-70"
+            'h-7 px-3 text-xs font-mono gap-1.5 rounded-l-md rounded-r-none border-r-0',
+            isSelected && 'bg-primary text-primary-foreground',
+            !isSelected && 'bg-secondary/50 hover:bg-secondary',
+            !worktree.hasWorktree && !isSelected && 'opacity-70'
           )}
           onClick={() => onSelectWorktree(worktree)}
           disabled={isActivating}
           title={
             worktree.hasWorktree
               ? "Click to switch to this worktree's branch"
-              : "Click to switch to this branch"
+              : '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" />
-          )}
+          {isActivating && !isRunning && <RefreshCw className="w-3 h-3 animate-spin" />}
           {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">
@@ -275,18 +267,23 @@ export function WorktreeTab({
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <span className={cn(
-                    "inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded border",
-                    isSelected
-                      ? "bg-amber-500 text-amber-950 border-amber-400"
-                      : "bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30"
-                  )}>
+                  <span
+                    className={cn(
+                      'inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded border',
+                      isSelected
+                        ? 'bg-amber-500 text-amber-950 border-amber-400'
+                        : 'bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30'
+                    )}
+                  >
                     <CircleDot className="w-2.5 h-2.5 mr-0.5" />
-                    {changedFilesCount ?? "!"}
+                    {changedFilesCount ?? '!'}
                   </span>
                 </TooltipTrigger>
                 <TooltipContent>
-                  <p>{changedFilesCount ?? "Some"} uncommitted file{changedFilesCount !== 1 ? "s" : ""}</p>
+                  <p>
+                    {changedFilesCount ?? 'Some'} uncommitted file
+                    {changedFilesCount !== 1 ? 's' : ''}
+                  </p>
                 </TooltipContent>
               </Tooltip>
             </TooltipProvider>
@@ -297,13 +294,13 @@ export function WorktreeTab({
 
       {isDevServerRunning && (
         <Button
-          variant={isSelected ? "default" : "outline"}
+          variant={isSelected ? 'default' : 'outline'}
           size="sm"
           className={cn(
-            "h-7 w-7 p-0 rounded-none border-r-0",
-            isSelected && "bg-primary text-primary-foreground",
-            !isSelected && "bg-secondary/50 hover:bg-secondary",
-            "text-green-500"
+            'h-7 w-7 p-0 rounded-none border-r-0',
+            isSelected && 'bg-primary text-primary-foreground',
+            !isSelected && 'bg-secondary/50 hover:bg-secondary',
+            'text-green-500'
           )}
           onClick={() => onOpenDevServerUrl(worktree)}
           title={`Open dev server (port ${devServerInfo?.port})`}

apps/ui/src/components/views/board-view/worktree-panel/hooks/use-worktrees.ts

@@ -1,9 +1,8 @@
-
-import { useState, useEffect, useCallback } from "react";
-import { useAppStore } from "@/store/app-store";
-import { getElectronAPI } from "@/lib/electron";
-import { pathsEqual } from "@/lib/utils";
-import type { WorktreeInfo } from "../types";
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { getElectronAPI } from '@/lib/electron';
+import { pathsEqual } from '@/lib/utils';
+import type { WorktreeInfo } from '../types';
 
 interface UseWorktreesOptions {
   projectPath: string;
@@ -11,7 +10,11 @@ interface UseWorktreesOptions {
   onRemovedWorktrees?: (removedWorktrees: Array<{ path: string; branch: string }>) => void;
 }
 
-export function useWorktrees({ projectPath, refreshTrigger = 0, onRemovedWorktrees }: UseWorktreesOptions) {
+export function useWorktrees({
+  projectPath,
+  refreshTrigger = 0,
+  onRemovedWorktrees,
+}: UseWorktreesOptions) {
   const [isLoading, setIsLoading] = useState(false);
   const [worktrees, setWorktrees] = useState<WorktreeInfo[]>([]);
 
@@ -20,29 +23,37 @@ export function useWorktrees({ projectPath, refreshTrigger = 0, onRemovedWorktre
   const setWorktreesInStore = useAppStore((s) => s.setWorktrees);
   const useWorktreesEnabled = useAppStore((s) => s.useWorktrees);
 
-  const fetchWorktrees = useCallback(async () => {
-    if (!projectPath) return;
-    setIsLoading(true);
-    try {
-      const api = getElectronAPI();
-      if (!api?.worktree?.listAll) {
-        console.warn("Worktree API not available");
-        return;
+  const fetchWorktrees = useCallback(
+    async (options?: { silent?: boolean }) => {
+      if (!projectPath) return;
+      const silent = options?.silent ?? false;
+      if (!silent) {
+        setIsLoading(true);
       }
-      const result = await api.worktree.listAll(projectPath, true);
-      if (result.success && result.worktrees) {
-        setWorktrees(result.worktrees);
-        setWorktreesInStore(projectPath, result.worktrees);
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.listAll) {
+          console.warn('Worktree API not available');
+          return;
+        }
+        const result = await api.worktree.listAll(projectPath, true);
+        if (result.success && result.worktrees) {
+          setWorktrees(result.worktrees);
+          setWorktreesInStore(projectPath, result.worktrees);
+        }
+        // Return removed worktrees so they can be handled by the caller
+        return result.removedWorktrees;
+      } catch (error) {
+        console.error('Failed to fetch worktrees:', error);
+        return undefined;
+      } finally {
+        if (!silent) {
+          setIsLoading(false);
+        }
       }
-      // Return removed worktrees so they can be handled by the caller
-      return result.removedWorktrees;
-    } catch (error) {
-      console.error("Failed to fetch worktrees:", error);
-      return undefined;
-    } finally {
-      setIsLoading(false);
-    }
-  }, [projectPath, setWorktreesInStore]);
+    },
+    [projectPath, setWorktreesInStore]
+  );
 
   useEffect(() => {
     fetchWorktrees();
@@ -58,30 +69,38 @@ export function useWorktrees({ projectPath, refreshTrigger = 0, onRemovedWorktre
     }
   }, [refreshTrigger, fetchWorktrees, onRemovedWorktrees]);
 
+  // Use a ref to track the current worktree to avoid running validation
+  // when selection changes (which could cause a race condition with stale worktrees list)
+  const currentWorktreeRef = useRef(currentWorktree);
+  useEffect(() => {
+    currentWorktreeRef.current = currentWorktree;
+  }, [currentWorktree]);
+
+  // Validation effect: only runs when worktrees list changes (not on selection change)
+  // This prevents a race condition where the selection is reset because the
+  // local worktrees state hasn't been updated yet from the async fetch
   useEffect(() => {
     if (worktrees.length > 0) {
-      const currentPath = currentWorktree?.path;
-      const currentWorktreeExists = currentPath === null
-        ? true
-        : worktrees.some((w) => !w.isMain && pathsEqual(w.path, currentPath));
+      const current = currentWorktreeRef.current;
+      const currentPath = current?.path;
+      const currentWorktreeExists =
+        currentPath === null
+          ? true
+          : worktrees.some((w) => !w.isMain && pathsEqual(w.path, currentPath));
 
-      if (currentWorktree == null || (currentPath !== null && !currentWorktreeExists)) {
+      if (current == null || (currentPath !== null && !currentWorktreeExists)) {
         // Find the primary worktree and get its branch name
         // Fallback to "main" only if worktrees haven't loaded yet
         const mainWorktree = worktrees.find((w) => w.isMain);
-        const mainBranch = mainWorktree?.branch || "main";
+        const mainBranch = mainWorktree?.branch || 'main';
         setCurrentWorktree(projectPath, null, mainBranch);
       }
     }
-  }, [worktrees, currentWorktree, projectPath, setCurrentWorktree]);
+  }, [worktrees, projectPath, setCurrentWorktree]);
 
   const handleSelectWorktree = useCallback(
     (worktree: WorktreeInfo) => {
-      setCurrentWorktree(
-        projectPath,
-        worktree.isMain ? null : worktree.path,
-        worktree.branch
-      );
+      setCurrentWorktree(projectPath, worktree.isMain ? null : worktree.path, worktree.branch);
     },
     [projectPath, setCurrentWorktree]
   );

apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx

@@ -1,8 +1,9 @@
-import { useState, useEffect } from "react";
-import { Button } from "@/components/ui/button";
-import { GitBranch, Plus, RefreshCw, ChevronDown, ChevronUp } from "lucide-react";
-import { cn, pathsEqual } from "@/lib/utils";
-import type { WorktreePanelProps, WorktreeInfo } from "./types";
+import { useState, useEffect, useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import { GitBranch, Plus, RefreshCw, PanelLeftOpen, PanelLeftClose } from 'lucide-react';
+import { cn, pathsEqual } from '@/lib/utils';
+import { getItem, setItem } from '@/lib/storage';
+import type { WorktreePanelProps, WorktreeInfo } from './types';
 import {
   useWorktrees,
   useDevServers,
@@ -10,10 +11,10 @@ import {
   useWorktreeActions,
   useDefaultEditor,
   useRunningFeatures,
-} from "./hooks";
-import { WorktreeTab } from "./components";
+} from './hooks';
+import { WorktreeTab } from './components';
 
-const WORKTREE_PANEL_COLLAPSED_KEY = "worktree-panel-collapsed";
+const WORKTREE_PANEL_COLLAPSED_KEY = 'worktree-panel-collapsed';
 
 export function WorktreePanel({
   projectPath,
@@ -85,20 +86,38 @@ export function WorktreePanel({
 
   // Collapse state with localStorage persistence
   const [isCollapsed, setIsCollapsed] = useState(() => {
-    if (typeof window === "undefined") return false;
-    const saved = localStorage.getItem(WORKTREE_PANEL_COLLAPSED_KEY);
-    return saved === "true";
+    const saved = getItem(WORKTREE_PANEL_COLLAPSED_KEY);
+    return saved === 'true';
   });
 
   useEffect(() => {
-    localStorage.setItem(WORKTREE_PANEL_COLLAPSED_KEY, String(isCollapsed));
+    setItem(WORKTREE_PANEL_COLLAPSED_KEY, String(isCollapsed));
   }, [isCollapsed]);
 
   const toggleCollapsed = () => setIsCollapsed((prev) => !prev);
 
+  // Periodic interval check (5 seconds) to detect branch changes on disk
+  // Reduced from 1s to 5s to minimize GPU/CPU usage from frequent re-renders
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  useEffect(() => {
+    intervalRef.current = setInterval(() => {
+      fetchWorktrees({ silent: true });
+    }, 5000);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [fetchWorktrees]);
+
   // Get the currently selected worktree for collapsed view
   const selectedWorktree = worktrees.find((w) => {
-    if (currentWorktree === null || currentWorktree === undefined || currentWorktree.path === null) {
+    if (
+      currentWorktree === null ||
+      currentWorktree === undefined ||
+      currentWorktree.path === null
+    ) {
       return w.isMain;
     }
     return pathsEqual(w.path, currentWorktreePath);
@@ -106,9 +125,7 @@ export function WorktreePanel({
 
   const isWorktreeSelected = (worktree: WorktreeInfo) => {
     return worktree.isMain
-      ? currentWorktree === null ||
-          currentWorktree === undefined ||
-          currentWorktree.path === null
+      ? currentWorktree === null || currentWorktree === undefined || currentWorktree.path === null
       : pathsEqual(worktree.path, currentWorktreePath);
   };
 
@@ -125,9 +142,8 @@ export function WorktreePanel({
     }
   };
 
-  if (!useWorktreesEnabled) {
-    return null;
-  }
+  const mainWorktree = worktrees.find((w) => w.isMain);
+  const nonMainWorktrees = worktrees.filter((w) => !w.isMain);
 
   // Collapsed view - just show current branch and toggle
   if (isCollapsed) {
@@ -140,16 +156,14 @@ export function WorktreePanel({
           onClick={toggleCollapsed}
           title="Expand worktree panel"
         >
-          <ChevronDown className="w-4 h-4" />
+          <PanelLeftOpen className="w-4 h-4" />
         </Button>
         <GitBranch className="w-4 h-4 text-muted-foreground" />
         <span className="text-sm text-muted-foreground">Branch:</span>
-        <span className="text-sm font-mono font-medium">
-          {selectedWorktree?.branch ?? "main"}
-        </span>
+        <span className="text-sm font-mono font-medium">{selectedWorktree?.branch ?? 'main'}</span>
         {selectedWorktree?.hasChanges && (
           <span className="inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded border bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30">
-            {selectedWorktree.changedFilesCount ?? "!"}
+            {selectedWorktree.changedFilesCount ?? '!'}
           </span>
         )}
       </div>
@@ -166,86 +180,139 @@ export function WorktreePanel({
         onClick={toggleCollapsed}
         title="Collapse worktree panel"
       >
-        <ChevronUp className="w-4 h-4" />
+        <PanelLeftClose className="w-4 h-4" />
       </Button>
+
       <GitBranch className="w-4 h-4 text-muted-foreground" />
       <span className="text-sm text-muted-foreground mr-2">Branch:</span>
 
-      <div className="flex items-center gap-2 flex-wrap">
-        {worktrees.map((worktree) => {
-          const cardCount = branchCardCounts?.[worktree.branch];
-          return (
-            <WorktreeTab
-              key={worktree.path}
-              worktree={worktree}
-              cardCount={cardCount}
-              hasChanges={worktree.hasChanges}
-              changedFilesCount={worktree.changedFilesCount}
-              isSelected={isWorktreeSelected(worktree)}
-              isRunning={hasRunningFeatures(worktree)}
-              isActivating={isActivating}
-              isDevServerRunning={isDevServerRunning(worktree)}
-              devServerInfo={getDevServerInfo(worktree)}
-              defaultEditorName={defaultEditorName}
-              branches={branches}
-              filteredBranches={filteredBranches}
-              branchFilter={branchFilter}
-              isLoadingBranches={isLoadingBranches}
-              isSwitching={isSwitching}
-              isPulling={isPulling}
-              isPushing={isPushing}
-              isStartingDevServer={isStartingDevServer}
-              aheadCount={aheadCount}
-              behindCount={behindCount}
-              onSelectWorktree={handleSelectWorktree}
-              onBranchDropdownOpenChange={handleBranchDropdownOpenChange(worktree)}
-              onActionsDropdownOpenChange={handleActionsDropdownOpenChange(worktree)}
-              onBranchFilterChange={setBranchFilter}
-              onSwitchBranch={handleSwitchBranch}
-              onCreateBranch={onCreateBranch}
-              onPull={handlePull}
-              onPush={handlePush}
-              onOpenInEditor={handleOpenInEditor}
-              onCommit={onCommit}
-              onCreatePR={onCreatePR}
-              onAddressPRComments={onAddressPRComments}
-              onResolveConflicts={onResolveConflicts}
-              onDeleteWorktree={onDeleteWorktree}
-              onStartDevServer={handleStartDevServer}
-              onStopDevServer={handleStopDevServer}
-              onOpenDevServerUrl={handleOpenDevServerUrl}
-            />
-          );
-        })}
-
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
-          onClick={onCreateWorktree}
-          title="Create new worktree"
-        >
-          <Plus className="w-4 h-4" />
-        </Button>
-
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
-          onClick={async () => {
-            const removedWorktrees = await fetchWorktrees();
-            if (removedWorktrees && removedWorktrees.length > 0 && onRemovedWorktrees) {
-              onRemovedWorktrees(removedWorktrees);
-            }
-          }}
-          disabled={isLoading}
-          title="Refresh worktrees"
-        >
-          <RefreshCw
-            className={cn("w-3.5 h-3.5", isLoading && "animate-spin")}
+      <div className="flex items-center gap-2">
+        {mainWorktree && (
+          <WorktreeTab
+            key={mainWorktree.path}
+            worktree={mainWorktree}
+            cardCount={branchCardCounts?.[mainWorktree.branch]}
+            hasChanges={mainWorktree.hasChanges}
+            changedFilesCount={mainWorktree.changedFilesCount}
+            isSelected={isWorktreeSelected(mainWorktree)}
+            isRunning={hasRunningFeatures(mainWorktree)}
+            isActivating={isActivating}
+            isDevServerRunning={isDevServerRunning(mainWorktree)}
+            devServerInfo={getDevServerInfo(mainWorktree)}
+            defaultEditorName={defaultEditorName}
+            branches={branches}
+            filteredBranches={filteredBranches}
+            branchFilter={branchFilter}
+            isLoadingBranches={isLoadingBranches}
+            isSwitching={isSwitching}
+            isPulling={isPulling}
+            isPushing={isPushing}
+            isStartingDevServer={isStartingDevServer}
+            aheadCount={aheadCount}
+            behindCount={behindCount}
+            onSelectWorktree={handleSelectWorktree}
+            onBranchDropdownOpenChange={handleBranchDropdownOpenChange(mainWorktree)}
+            onActionsDropdownOpenChange={handleActionsDropdownOpenChange(mainWorktree)}
+            onBranchFilterChange={setBranchFilter}
+            onSwitchBranch={handleSwitchBranch}
+            onCreateBranch={onCreateBranch}
+            onPull={handlePull}
+            onPush={handlePush}
+            onOpenInEditor={handleOpenInEditor}
+            onCommit={onCommit}
+            onCreatePR={onCreatePR}
+            onAddressPRComments={onAddressPRComments}
+            onResolveConflicts={onResolveConflicts}
+            onDeleteWorktree={onDeleteWorktree}
+            onStartDevServer={handleStartDevServer}
+            onStopDevServer={handleStopDevServer}
+            onOpenDevServerUrl={handleOpenDevServerUrl}
           />
-        </Button>
+        )}
       </div>
+
+      {/* Worktrees section - only show if enabled */}
+      {useWorktreesEnabled && (
+        <>
+          <div className="w-px h-5 bg-border mx-2" />
+          <GitBranch className="w-4 h-4 text-muted-foreground" />
+          <span className="text-sm text-muted-foreground mr-2">Worktrees:</span>
+
+          <div className="flex items-center gap-2 flex-wrap">
+            {nonMainWorktrees.map((worktree) => {
+              const cardCount = branchCardCounts?.[worktree.branch];
+              return (
+                <WorktreeTab
+                  key={worktree.path}
+                  worktree={worktree}
+                  cardCount={cardCount}
+                  hasChanges={worktree.hasChanges}
+                  changedFilesCount={worktree.changedFilesCount}
+                  isSelected={isWorktreeSelected(worktree)}
+                  isRunning={hasRunningFeatures(worktree)}
+                  isActivating={isActivating}
+                  isDevServerRunning={isDevServerRunning(worktree)}
+                  devServerInfo={getDevServerInfo(worktree)}
+                  defaultEditorName={defaultEditorName}
+                  branches={branches}
+                  filteredBranches={filteredBranches}
+                  branchFilter={branchFilter}
+                  isLoadingBranches={isLoadingBranches}
+                  isSwitching={isSwitching}
+                  isPulling={isPulling}
+                  isPushing={isPushing}
+                  isStartingDevServer={isStartingDevServer}
+                  aheadCount={aheadCount}
+                  behindCount={behindCount}
+                  onSelectWorktree={handleSelectWorktree}
+                  onBranchDropdownOpenChange={handleBranchDropdownOpenChange(worktree)}
+                  onActionsDropdownOpenChange={handleActionsDropdownOpenChange(worktree)}
+                  onBranchFilterChange={setBranchFilter}
+                  onSwitchBranch={handleSwitchBranch}
+                  onCreateBranch={onCreateBranch}
+                  onPull={handlePull}
+                  onPush={handlePush}
+                  onOpenInEditor={handleOpenInEditor}
+                  onCommit={onCommit}
+                  onCreatePR={onCreatePR}
+                  onAddressPRComments={onAddressPRComments}
+                  onResolveConflicts={onResolveConflicts}
+                  onDeleteWorktree={onDeleteWorktree}
+                  onStartDevServer={handleStartDevServer}
+                  onStopDevServer={handleStopDevServer}
+                  onOpenDevServerUrl={handleOpenDevServerUrl}
+                />
+              );
+            })}
+
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
+              onClick={onCreateWorktree}
+              title="Create new worktree"
+            >
+              <Plus className="w-4 h-4" />
+            </Button>
+
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
+              onClick={async () => {
+                const removedWorktrees = await fetchWorktrees();
+                if (removedWorktrees && removedWorktrees.length > 0 && onRemovedWorktrees) {
+                  onRemovedWorktrees(removedWorktrees);
+                }
+              }}
+              disabled={isLoading}
+              title="Refresh worktrees"
+            >
+              <RefreshCw className={cn('w-3.5 h-3.5', isLoading && 'animate-spin')} />
+            </Button>
+          </div>
+        </>
+      )}
     </div>
   );
 }