feat: Mobile improvements and Add selective file staging and improve branch switching

2026-03-20 11:03:08 +00:00 · 2026-02-17 15:20:28 -08:00
parent de021f96bf
commit 7fcf3c1e1f
42 changed files with 2706 additions and 256 deletions
--- a/apps/ui/src/components/views/board-view/dialogs/commit-worktree-dialog.tsx
+++ b/apps/ui/src/components/views/board-view/dialogs/commit-worktree-dialog.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 import {
  Dialog,
  DialogContent,
@@ -10,11 +10,24 @@ import {
 import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
-import { GitCommit, Sparkles } from 'lucide-react';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  GitCommit,
+  Sparkles,
+  FilePlus,
+  FileX,
+  FilePen,
+  FileText,
+  File,
+  ChevronDown,
+  ChevronRight,
+} from 'lucide-react';
 import { Spinner } from '@/components/ui/spinner';
 import { getElectronAPI } from '@/lib/electron';
 import { toast } from 'sonner';
 import { useAppStore } from '@/store/app-store';
+import { cn } from '@/lib/utils';
+import type { FileStatus } from '@/types/electron';

 interface WorktreeInfo {
  path: string;
@@ -31,6 +44,229 @@ interface CommitWorktreeDialogProps {
  onCommitted: () => void;
 }

+interface ParsedDiffHunk {
+  header: string;
+  lines: {
+    type: 'context' | 'addition' | 'deletion' | 'header';
+    content: string;
+    lineNumber?: { old?: number; new?: number };
+  }[];
+}
+
+interface ParsedFileDiff {
+  filePath: string;
+  hunks: ParsedDiffHunk[];
+  isNew?: boolean;
+  isDeleted?: boolean;
+  isRenamed?: boolean;
+}
+
+const getFileIcon = (status: string) => {
+  switch (status) {
+    case 'A':
+    case '?':
+      return <FilePlus className="w-3.5 h-3.5 text-green-500 flex-shrink-0" />;
+    case 'D':
+      return <FileX className="w-3.5 h-3.5 text-red-500 flex-shrink-0" />;
+    case 'M':
+    case 'U':
+      return <FilePen className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />;
+    case 'R':
+    case 'C':
+      return <File className="w-3.5 h-3.5 text-blue-500 flex-shrink-0" />;
+    default:
+      return <FileText className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />;
+  }
+};
+
+const getStatusLabel = (status: string) => {
+  switch (status) {
+    case 'A':
+      return 'Added';
+    case '?':
+      return 'Untracked';
+    case 'D':
+      return 'Deleted';
+    case 'M':
+      return 'Modified';
+    case 'U':
+      return 'Updated';
+    case 'R':
+      return 'Renamed';
+    case 'C':
+      return 'Copied';
+    default:
+      return 'Changed';
+  }
+};
+
+const getStatusBadgeColor = (status: string) => {
+  switch (status) {
+    case 'A':
+    case '?':
+      return 'bg-green-500/20 text-green-400 border-green-500/30';
+    case 'D':
+      return 'bg-red-500/20 text-red-400 border-red-500/30';
+    case 'M':
+    case 'U':
+      return 'bg-amber-500/20 text-amber-400 border-amber-500/30';
+    case 'R':
+    case 'C':
+      return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+    default:
+      return 'bg-muted text-muted-foreground border-border';
+  }
+};
+
+/**
+ * Parse unified diff format into structured data
+ */
+function parseDiff(diffText: string): ParsedFileDiff[] {
+  if (!diffText) return [];
+
+  const files: ParsedFileDiff[] = [];
+  const lines = diffText.split('\n');
+  let currentFile: ParsedFileDiff | null = null;
+  let currentHunk: ParsedDiffHunk | null = null;
+  let oldLineNum = 0;
+  let newLineNum = 0;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    if (line.startsWith('diff --git')) {
+      if (currentFile) {
+        if (currentHunk) currentFile.hunks.push(currentHunk);
+        files.push(currentFile);
+      }
+      const match = line.match(/diff --git a\/(.*?) b\/(.*)/);
+      currentFile = {
+        filePath: match ? match[2] : 'unknown',
+        hunks: [],
+      };
+      currentHunk = null;
+      continue;
+    }
+
+    if (line.startsWith('new file mode')) {
+      if (currentFile) currentFile.isNew = true;
+      continue;
+    }
+    if (line.startsWith('deleted file mode')) {
+      if (currentFile) currentFile.isDeleted = true;
+      continue;
+    }
+    if (line.startsWith('rename from') || line.startsWith('rename to')) {
+      if (currentFile) currentFile.isRenamed = true;
+      continue;
+    }
+    if (line.startsWith('index ') || line.startsWith('--- ') || line.startsWith('+++ ')) {
+      continue;
+    }
+
+    if (line.startsWith('@@')) {
+      if (currentHunk && currentFile) currentFile.hunks.push(currentHunk);
+      const hunkMatch = line.match(/@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+      oldLineNum = hunkMatch ? parseInt(hunkMatch[1], 10) : 1;
+      newLineNum = hunkMatch ? parseInt(hunkMatch[2], 10) : 1;
+      currentHunk = {
+        header: line,
+        lines: [{ type: 'header', content: line }],
+      };
+      continue;
+    }
+
+    if (currentHunk) {
+      if (line.startsWith('+')) {
+        currentHunk.lines.push({
+          type: 'addition',
+          content: line.substring(1),
+          lineNumber: { new: newLineNum },
+        });
+        newLineNum++;
+      } else if (line.startsWith('-')) {
+        currentHunk.lines.push({
+          type: 'deletion',
+          content: line.substring(1),
+          lineNumber: { old: oldLineNum },
+        });
+        oldLineNum++;
+      } else if (line.startsWith(' ') || line === '') {
+        currentHunk.lines.push({
+          type: 'context',
+          content: line.substring(1) || '',
+          lineNumber: { old: oldLineNum, new: newLineNum },
+        });
+        oldLineNum++;
+        newLineNum++;
+      }
+    }
+  }
+
+  if (currentFile) {
+    if (currentHunk) currentFile.hunks.push(currentHunk);
+    files.push(currentFile);
+  }
+
+  return files;
+}
+
+function DiffLine({
+  type,
+  content,
+  lineNumber,
+}: {
+  type: 'context' | 'addition' | 'deletion' | 'header';
+  content: string;
+  lineNumber?: { old?: number; new?: number };
+}) {
+  const bgClass = {
+    context: 'bg-transparent',
+    addition: 'bg-green-500/10',
+    deletion: 'bg-red-500/10',
+    header: 'bg-blue-500/10',
+  };
+
+  const textClass = {
+    context: 'text-foreground-secondary',
+    addition: 'text-green-400',
+    deletion: 'text-red-400',
+    header: 'text-blue-400',
+  };
+
+  const prefix = {
+    context: ' ',
+    addition: '+',
+    deletion: '-',
+    header: '',
+  };
+
+  if (type === 'header') {
+    return (
+      <div className={cn('px-2 py-1 font-mono text-xs', bgClass[type], textClass[type])}>
+        {content}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('flex font-mono text-xs', bgClass[type])}>
+      <span className="w-10 flex-shrink-0 text-right pr-1.5 text-muted-foreground select-none border-r border-border-glass text-[10px]">
+        {lineNumber?.old ?? ''}
+      </span>
+      <span className="w-10 flex-shrink-0 text-right pr-1.5 text-muted-foreground select-none border-r border-border-glass text-[10px]">
+        {lineNumber?.new ?? ''}
+      </span>
+      <span className={cn('w-4 flex-shrink-0 text-center select-none', textClass[type])}>
+        {prefix[type]}
+      </span>
+      <span className={cn('flex-1 px-1.5 whitespace-pre-wrap break-all', textClass[type])}>
+        {content || '\u00A0'}
+      </span>
+    </div>
+  );
+}
+
 export function CommitWorktreeDialog({
  open,
  onOpenChange,
@@ -43,8 +279,85 @@ export function CommitWorktreeDialog({
  const [error, setError] = useState<string | null>(null);
  const enableAiCommitMessages = useAppStore((state) => state.enableAiCommitMessages);

+  // File selection state
+  const [files, setFiles] = useState<FileStatus[]>([]);
+  const [diffContent, setDiffContent] = useState('');
+  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set());
+  const [expandedFile, setExpandedFile] = useState<string | null>(null);
+  const [isLoadingDiffs, setIsLoadingDiffs] = useState(false);
+
+  // Parse diffs
+  const parsedDiffs = useMemo(() => parseDiff(diffContent), [diffContent]);
+
+  // Create a map of file path to parsed diff for quick lookup
+  const diffsByFile = useMemo(() => {
+    const map = new Map<string, ParsedFileDiff>();
+    for (const diff of parsedDiffs) {
+      map.set(diff.filePath, diff);
+    }
+    return map;
+  }, [parsedDiffs]);
+
+  // Load diffs when dialog opens
+  useEffect(() => {
+    if (open && worktree) {
+      setIsLoadingDiffs(true);
+      setFiles([]);
+      setDiffContent('');
+      setSelectedFiles(new Set());
+      setExpandedFile(null);
+
+      const loadDiffs = async () => {
+        try {
+          const api = getElectronAPI();
+          if (api?.git?.getDiffs) {
+            const result = await api.git.getDiffs(worktree.path);
+            if (result.success) {
+              const fileList = result.files ?? [];
+              setFiles(fileList);
+              setDiffContent(result.diff ?? '');
+              // Select all files by default
+              setSelectedFiles(new Set(fileList.map((f) => f.path)));
+            }
+          }
+        } catch (err) {
+          console.warn('Failed to load diffs for commit dialog:', err);
+        } finally {
+          setIsLoadingDiffs(false);
+        }
+      };
+
+      loadDiffs();
+    }
+  }, [open, worktree]);
+
+  const handleToggleFile = useCallback((filePath: string) => {
+    setSelectedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(filePath)) {
+        next.delete(filePath);
+      } else {
+        next.add(filePath);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleToggleAll = useCallback(() => {
+    setSelectedFiles((prev) => {
+      if (prev.size === files.length) {
+        return new Set();
+      }
+      return new Set(files.map((f) => f.path));
+    });
+  }, [files]);
+
+  const handleFileClick = useCallback((filePath: string) => {
+    setExpandedFile((prev) => (prev === filePath ? null : filePath));
+  }, []);
+
  const handleCommit = async () => {
-    if (!worktree || !message.trim()) return;
+    if (!worktree || !message.trim() || selectedFiles.size === 0) return;

    setIsLoading(true);
    setError(null);
@@ -55,7 +368,12 @@ export function CommitWorktreeDialog({
        setError('Worktree API not available');
        return;
      }
-      const result = await api.worktree.commit(worktree.path, message);
+
+      // Pass selected files if not all files are selected
+      const filesToCommit =
+        selectedFiles.size === files.length ? undefined : Array.from(selectedFiles);
+
+      const result = await api.worktree.commit(worktree.path, message, filesToCommit);

      if (result.success && result.result) {
        if (result.result.committed) {
@@ -81,8 +399,14 @@ export function CommitWorktreeDialog({
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
-    // Prevent commit while loading or while AI is generating a message
-    if (e.key === 'Enter' && e.metaKey && !isLoading && !isGenerating && message.trim()) {
+    if (
+      e.key === 'Enter' &&
+      e.metaKey &&
+      !isLoading &&
+      !isGenerating &&
+      message.trim() &&
+      selectedFiles.size > 0
+    ) {
      handleCommit();
    }
  };
@@ -94,7 +418,6 @@ export function CommitWorktreeDialog({
      setMessage('');
      setError(null);

-      // Only generate AI commit message if enabled
      if (!enableAiCommitMessages) {
        return;
      }
@@ -119,13 +442,11 @@ export function CommitWorktreeDialog({
          if (result.success && result.message) {
            setMessage(result.message);
          } else {
-            // Don't show error toast, just log it and leave message empty
            console.warn('Failed to generate commit message:', result.error);
            setMessage('');
          }
        } catch (err) {
          if (cancelled) return;
-          // Don't show error toast for generation failures
          console.warn('Error generating commit message:', err);
          setMessage('');
        } finally {
@@ -145,9 +466,11 @@ export function CommitWorktreeDialog({

  if (!worktree) return null;

+  const allSelected = selectedFiles.size === files.length && files.length > 0;
+
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[500px]">
+      <DialogContent className="sm:max-w-[700px] max-h-[85vh] flex flex-col">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <GitCommit className="w-5 h-5" />
@@ -156,17 +479,151 @@ export function CommitWorktreeDialog({
          <DialogDescription>
            Commit changes in the{' '}
            <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code> worktree.
-            {worktree.changedFilesCount && (
-              <span className="ml-1">
-                ({worktree.changedFilesCount} file
-                {worktree.changedFilesCount > 1 ? 's' : ''} changed)
-              </span>
-            )}
          </DialogDescription>
        </DialogHeader>

-        <div className="grid gap-4 py-4">
-          <div className="grid gap-2">
+        <div className="flex flex-col gap-3 py-2 min-h-0 flex-1 overflow-hidden">
+          {/* File Selection */}
+          <div className="flex flex-col min-h-0">
+            <div className="flex items-center justify-between mb-1.5">
+              <Label className="text-sm font-medium flex items-center gap-2">
+                Files to commit
+                {isLoadingDiffs ? (
+                  <Spinner size="sm" />
+                ) : (
+                  <span className="text-xs text-muted-foreground font-normal">
+                    ({selectedFiles.size}/{files.length} selected)
+                  </span>
+                )}
+              </Label>
+              {files.length > 0 && (
+                <button
+                  onClick={handleToggleAll}
+                  className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {allSelected ? 'Deselect all' : 'Select all'}
+                </button>
+              )}
+            </div>
+
+            {isLoadingDiffs ? (
+              <div className="flex items-center justify-center py-6 text-muted-foreground border border-border rounded-lg">
+                <Spinner size="sm" className="mr-2" />
+                <span className="text-sm">Loading changes...</span>
+              </div>
+            ) : files.length === 0 ? (
+              <div className="flex items-center justify-center py-6 text-muted-foreground border border-border rounded-lg">
+                <span className="text-sm">No changes detected</span>
+              </div>
+            ) : (
+              <div className="border border-border rounded-lg overflow-hidden max-h-[300px] overflow-y-auto scrollbar-visible">
+                {files.map((file) => {
+                  const isChecked = selectedFiles.has(file.path);
+                  const isExpanded = expandedFile === file.path;
+                  const fileDiff = diffsByFile.get(file.path);
+                  const additions = fileDiff
+                    ? fileDiff.hunks.reduce(
+                        (acc, hunk) => acc + hunk.lines.filter((l) => l.type === 'addition').length,
+                        0
+                      )
+                    : 0;
+                  const deletions = fileDiff
+                    ? fileDiff.hunks.reduce(
+                        (acc, hunk) => acc + hunk.lines.filter((l) => l.type === 'deletion').length,
+                        0
+                      )
+                    : 0;
+
+                  return (
+                    <div key={file.path} className="border-b border-border last:border-b-0">
+                      <div
+                        className={cn(
+                          'flex items-center gap-2 px-3 py-1.5 hover:bg-accent/50 transition-colors group',
+                          isExpanded && 'bg-accent/30'
+                        )}
+                      >
+                        {/* Checkbox */}
+                        <Checkbox
+                          checked={isChecked}
+                          onCheckedChange={() => handleToggleFile(file.path)}
+                          className="flex-shrink-0"
+                        />
+
+                        {/* Clickable file row to show diff */}
+                        <button
+                          onClick={() => handleFileClick(file.path)}
+                          className="flex items-center gap-2 flex-1 min-w-0 text-left"
+                        >
+                          {isExpanded ? (
+                            <ChevronDown className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+                          ) : (
+                            <ChevronRight className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+                          )}
+                          {getFileIcon(file.status)}
+                          <span className="text-xs font-mono truncate flex-1 text-foreground">
+                            {file.path}
+                          </span>
+                          <span
+                            className={cn(
+                              'text-[10px] px-1.5 py-0.5 rounded border font-medium flex-shrink-0',
+                              getStatusBadgeColor(file.status)
+                            )}
+                          >
+                            {getStatusLabel(file.status)}
+                          </span>
+                          {additions > 0 && (
+                            <span className="text-[10px] text-green-400 flex-shrink-0">
+                              +{additions}
+                            </span>
+                          )}
+                          {deletions > 0 && (
+                            <span className="text-[10px] text-red-400 flex-shrink-0">
+                              -{deletions}
+                            </span>
+                          )}
+                        </button>
+                      </div>
+
+                      {/* Expanded diff view */}
+                      {isExpanded && fileDiff && (
+                        <div className="bg-background border-t border-border max-h-[200px] overflow-y-auto scrollbar-visible">
+                          {fileDiff.hunks.map((hunk, hunkIndex) => (
+                            <div
+                              key={hunkIndex}
+                              className="border-b border-border-glass last:border-b-0"
+                            >
+                              {hunk.lines.map((line, lineIndex) => (
+                                <DiffLine
+                                  key={lineIndex}
+                                  type={line.type}
+                                  content={line.content}
+                                  lineNumber={line.lineNumber}
+                                />
+                              ))}
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                      {isExpanded && !fileDiff && (
+                        <div className="px-4 py-3 text-xs text-muted-foreground bg-background border-t border-border">
+                          {file.status === '?' ? (
+                            <span>New file - diff preview not available</span>
+                          ) : file.status === 'D' ? (
+                            <span>File deleted</span>
+                          ) : (
+                            <span>Diff content not available</span>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
+          {/* Commit Message */}
+          <div className="grid gap-1.5">
            <Label htmlFor="commit-message" className="flex items-center gap-2">
              Commit Message
              {isGenerating && (
@@ -187,7 +644,7 @@ export function CommitWorktreeDialog({
                setError(null);
              }}
              onKeyDown={handleKeyDown}
-              className="min-h-[100px] font-mono text-sm"
+              className="min-h-[80px] font-mono text-sm"
              autoFocus
              disabled={isGenerating}
            />
@@ -207,7 +664,10 @@ export function CommitWorktreeDialog({
          >
            Cancel
          </Button>
-          <Button onClick={handleCommit} disabled={isLoading || isGenerating || !message.trim()}>
+          <Button
+            onClick={handleCommit}
+            disabled={isLoading || isGenerating || !message.trim() || selectedFiles.size === 0}
+          >
            {isLoading ? (
              <>
                <Spinner size="sm" className="mr-2" />
@@ -217,6 +677,9 @@ export function CommitWorktreeDialog({
              <>
                <GitCommit className="w-4 h-4 mr-2" />
                Commit
+                {selectedFiles.size > 0 && selectedFiles.size < files.length
+                  ? ` (${selectedFiles.size} file${selectedFiles.size > 1 ? 's' : ''})`
+                  : ''}
              </>
            )}
          </Button>
--- a/apps/ui/src/components/views/board-view/dialogs/view-worktree-changes-dialog.tsx
+++ b/apps/ui/src/components/views/board-view/dialogs/view-worktree-changes-dialog.tsx
@@ -33,7 +33,7 @@ export function ViewWorktreeChangesDialog({

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-full h-full max-w-full max-h-full sm:w-[90vw] sm:max-w-[900px] sm:max-h-[100vh] sm:h-auto sm:rounded-xl rounded-none flex flex-col">
+      <DialogContent className="w-full h-full max-w-full max-h-full sm:w-[90vw] sm:max-w-[900px] sm:max-h-[100dvh] sm:h-auto sm:rounded-xl rounded-none flex flex-col">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <FileText className="w-5 h-5" />
--- a/apps/ui/src/components/views/board-view/hooks/use-board-actions.ts
+++ b/apps/ui/src/components/views/board-view/hooks/use-board-actions.ts
@@ -93,6 +93,7 @@ export function useBoardActions({
    isPrimaryWorktreeBranch,
    getPrimaryWorktreeBranch,
    getAutoModeState,
+    getMaxConcurrencyForWorktree,
  } = useAppStore();
  const autoMode = useAutoMode();

@@ -566,7 +567,11 @@ export function useBoardActions({
      const featureWorktreeState = currentProject
        ? getAutoModeState(currentProject.id, featureBranchName)
        : null;
-      const featureMaxConcurrency = featureWorktreeState?.maxConcurrency ?? autoMode.maxConcurrency;
+      // Use getMaxConcurrencyForWorktree which correctly falls back to global maxConcurrency
+      // instead of autoMode.maxConcurrency which only falls back to DEFAULT_MAX_CONCURRENCY (1)
+      const featureMaxConcurrency = currentProject
+        ? getMaxConcurrencyForWorktree(currentProject.id, featureBranchName)
+        : autoMode.maxConcurrency;
      const featureRunningCount = featureWorktreeState?.runningTasks?.length ?? 0;
      const canStartInWorktree = featureRunningCount < featureMaxConcurrency;

@@ -647,6 +652,7 @@ export function useBoardActions({
      handleRunFeature,
      currentProject,
      getAutoModeState,
+      getMaxConcurrencyForWorktree,
      isPrimaryWorktreeBranch,
    ]
  );
--- a/apps/ui/src/components/views/board-view/init-script-indicator.tsx
+++ b/apps/ui/src/components/views/board-view/init-script-indicator.tsx
@@ -191,7 +191,7 @@ export function InitScriptIndicator({ projectPath }: InitScriptIndicatorProps) {
    <div
      className={cn(
        'fixed bottom-4 right-4 z-50 flex flex-col gap-2',
-        'max-h-[calc(100vh-120px)] overflow-y-auto',
+        'max-h-[calc(100dvh-120px)] overflow-y-auto',
        'scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent'
      )}
    >
--- 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
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
@@ -8,7 +9,7 @@ import {
  DropdownMenuTrigger,
  DropdownMenuLabel,
 } from '@/components/ui/dropdown-menu';
-import { GitBranch, GitBranchPlus, Check, Search } from 'lucide-react';
+import { GitBranch, GitBranchPlus, Check, Search, Globe } from 'lucide-react';
 import { Spinner } from '@/components/ui/spinner';
 import { cn } from '@/lib/utils';
 import type { WorktreeInfo, BranchInfo } from '../types';
@@ -42,6 +43,43 @@ export function BranchSwitchDropdown({
  onSwitchBranch,
  onCreateBranch,
 }: BranchSwitchDropdownProps) {
+  // Separate local and remote branches, filtering out bare remotes without a branch
+  const { localBranches, remoteBranches } = useMemo(() => {
+    const local: BranchInfo[] = [];
+    const remote: BranchInfo[] = [];
+    for (const branch of filteredBranches) {
+      if (branch.isRemote) {
+        // Skip bare remote refs without a branch name (e.g. "origin" by itself)
+        if (!branch.name.includes('/')) continue;
+        remote.push(branch);
+      } else {
+        local.push(branch);
+      }
+    }
+    return { localBranches: local, remoteBranches: remote };
+  }, [filteredBranches]);
+
+  const renderBranchItem = (branch: BranchInfo) => {
+    const isCurrent = branch.name === worktree.branch;
+    return (
+      <DropdownMenuItem
+        key={branch.name}
+        onClick={() => onSwitchBranch(worktree, branch.name)}
+        disabled={isSwitching || isCurrent}
+        className="text-xs font-mono"
+      >
+        {isCurrent ? (
+          <Check className="w-3.5 h-3.5 mr-2 flex-shrink-0" />
+        ) : branch.isRemote ? (
+          <Globe className="w-3.5 h-3.5 mr-2 flex-shrink-0 text-muted-foreground" />
+        ) : (
+          <span className="w-3.5 mr-2 flex-shrink-0" />
+        )}
+        <span className="truncate">{branch.name}</span>
+      </DropdownMenuItem>
+    );
+  };
+
  return (
    <DropdownMenu onOpenChange={onOpenChange}>
      <DropdownMenuTrigger asChild>
@@ -60,7 +98,7 @@ export function BranchSwitchDropdown({
          <GitBranch className={standalone ? 'w-3.5 h-3.5' : 'w-3 h-3'} />
        </Button>
      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="w-64">
+      <DropdownMenuContent align="start" className="w-72">
        <DropdownMenuLabel className="text-xs">Switch Branch</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <div className="px-2 py-1.5">
@@ -73,13 +111,13 @@ export function BranchSwitchDropdown({
              onKeyDown={(e) => e.stopPropagation()}
              onKeyUp={(e) => e.stopPropagation()}
              onKeyPress={(e) => e.stopPropagation()}
-              className="h-7 pl-7 text-xs"
+              className="h-7 pl-7 text-base md:text-xs"
              autoFocus
            />
          </div>
        </div>
        <DropdownMenuSeparator />
-        <div className="max-h-[250px] overflow-y-auto">
+        <div className="max-h-[300px] overflow-y-auto overflow-x-hidden">
          {isLoadingBranches ? (
            <DropdownMenuItem disabled className="text-xs">
              <Spinner size="xs" className="mr-2" />
@@ -90,21 +128,28 @@ export function BranchSwitchDropdown({
              {branchFilter ? 'No matching branches' : 'No branches found'}
            </DropdownMenuItem>
          ) : (
-            filteredBranches.map((branch) => (
-              <DropdownMenuItem
-                key={branch.name}
-                onClick={() => onSwitchBranch(worktree, branch.name)}
-                disabled={isSwitching || branch.name === worktree.branch}
-                className="text-xs font-mono"
-              >
-                {branch.name === worktree.branch ? (
-                  <Check className="w-3.5 h-3.5 mr-2 flex-shrink-0" />
-                ) : (
-                  <span className="w-3.5 mr-2 flex-shrink-0" />
-                )}
-                <span className="truncate">{branch.name}</span>
-              </DropdownMenuItem>
-            ))
+            <>
+              {/* Local branches */}
+              {localBranches.length > 0 && (
+                <>
+                  <DropdownMenuLabel className="text-[10px] text-muted-foreground uppercase tracking-wider px-2 py-1">
+                    Local
+                  </DropdownMenuLabel>
+                  {localBranches.map(renderBranchItem)}
+                </>
+              )}
+
+              {/* Remote branches */}
+              {remoteBranches.length > 0 && (
+                <>
+                  {localBranches.length > 0 && <DropdownMenuSeparator />}
+                  <DropdownMenuLabel className="text-[10px] text-muted-foreground uppercase tracking-wider px-2 py-1">
+                    Remote
+                  </DropdownMenuLabel>
+                  {remoteBranches.map(renderBranchItem)}
+                </>
+              )}
+            </>
          )}
        </div>
        <DropdownMenuSeparator />
--- a/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-branches.ts
+++ b/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-branches.ts
@@ -17,7 +17,7 @@ export function useBranches() {
    data: branchData,
    isLoading: isLoadingBranches,
    refetch,
-  } = useWorktreeBranches(currentWorktreePath);
+  } = useWorktreeBranches(currentWorktreePath, true);

  const branches = branchData?.branches ?? [];
  const aheadCount = branchData?.aheadCount ?? 0;
--- 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
@@ -13,12 +13,23 @@ import type { WorktreeInfo } from '../types';

 const logger = createLogger('WorktreeActions');

-export function useWorktreeActions() {
+interface UseWorktreeActionsOptions {
+  /** Callback when merge conflicts occur after branch switch stash reapply */
+  onBranchSwitchConflict?: (info: {
+    worktreePath: string;
+    branchName: string;
+    previousBranch: string;
+  }) => void;
+}
+
+export function useWorktreeActions(options?: UseWorktreeActionsOptions) {
  const navigate = useNavigate();
  const [isActivating, setIsActivating] = useState(false);

  // Use React Query mutations
-  const switchBranchMutation = useSwitchBranch();
+  const switchBranchMutation = useSwitchBranch({
+    onConflict: options?.onBranchSwitchConflict,
+  });
  const pullMutation = usePullWorktree();
  const pushMutation = usePushWorktree();
  const openInEditorMutation = useOpenInEditor();
--- a/apps/ui/src/components/views/board-view/worktree-panel/types.ts
+++ b/apps/ui/src/components/views/board-view/worktree-panel/types.ts
@@ -80,6 +80,12 @@ export interface MergeConflictInfo {
  targetWorktreePath: string;
 }

+export interface BranchSwitchConflictInfo {
+  worktreePath: string;
+  branchName: string;
+  previousBranch: string;
+}
+
 export interface WorktreePanelProps {
  projectPath: string;
  onCreateWorktree: () => void;
@@ -90,6 +96,8 @@ export interface WorktreePanelProps {
  onAddressPRComments: (worktree: WorktreeInfo, prInfo: PRInfo) => void;
  onResolveConflicts: (worktree: WorktreeInfo) => void;
  onCreateMergeConflictResolutionFeature?: (conflictInfo: MergeConflictInfo) => void;
+  /** Called when branch switch stash reapply results in merge conflicts */
+  onBranchSwitchConflict?: (conflictInfo: BranchSwitchConflictInfo) => void;
  /** Called when a branch is deleted during merge - features should be reassigned to main */
  onBranchDeletedDuringMerge?: (branchName: string) => void;
  onRemovedWorktrees?: (removedWorktrees: Array<{ path: string; branch: string }>) => void;
--- 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
@@ -14,7 +14,12 @@ import type {
  TestRunnerOutputEvent,
  TestRunnerCompletedEvent,
 } from '@/types/electron';
-import type { WorktreePanelProps, WorktreeInfo, TestSessionInfo } from './types';
+import type {
+  WorktreePanelProps,
+  WorktreeInfo,
+  TestSessionInfo,
+  BranchSwitchConflictInfo,
+} from './types';
 import {
  useWorktrees,
  useDevServers,
@@ -50,6 +55,7 @@ export function WorktreePanel({
  onAddressPRComments,
  onResolveConflicts,
  onCreateMergeConflictResolutionFeature,
+  onBranchSwitchConflict,
  onBranchDeletedDuringMerge,
  onRemovedWorktrees,
  runningFeatureIds = [],
@@ -101,7 +107,9 @@ export function WorktreePanel({
    handleOpenInIntegratedTerminal,
    handleOpenInEditor,
    handleOpenInExternalTerminal,
-  } = useWorktreeActions();
+  } = useWorktreeActions({
+    onBranchSwitchConflict: onBranchSwitchConflict,
+  });

  const { hasRunningFeatures } = useRunningFeatures({
    runningFeatureIds,