Merge branch 'main' into refactor/frontend

apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx

@@ -73,6 +73,7 @@ interface AddFeatureDialogProps {
   }) => void;
   categorySuggestions: string[];
   branchSuggestions: string[];
+  branchCardCounts?: Record<string, number>; // Map of branch name to unarchived card count
   defaultSkipTests: boolean;
   defaultBranch?: string;
   currentBranch?: string;
@@ -87,6 +88,7 @@ export function AddFeatureDialog({
   onAdd,
   categorySuggestions,
   branchSuggestions,
+  branchCardCounts,
   defaultSkipTests,
   defaultBranch = "main",
   currentBranch,
@@ -116,11 +118,16 @@ export function AddFeatureDialog({
   const [enhancementMode, setEnhancementMode] = useState<
     "improve" | "technical" | "simplify" | "acceptance"
   >("improve");
-  const [planningMode, setPlanningMode] = useState<PlanningMode>('skip');
+  const [planningMode, setPlanningMode] = useState<PlanningMode>("skip");
   const [requirePlanApproval, setRequirePlanApproval] = useState(false);
 
   // Get enhancement model, planning mode defaults, and worktrees setting from store
-  const { enhancementModel, defaultPlanningMode, defaultRequirePlanApproval, useWorktrees } = useAppStore();
+  const {
+    enhancementModel,
+    defaultPlanningMode,
+    defaultRequirePlanApproval,
+    useWorktrees,
+  } = useAppStore();
 
   // Sync defaults when dialog opens
   useEffect(() => {
@@ -134,7 +141,13 @@ export function AddFeatureDialog({
       setPlanningMode(defaultPlanningMode);
       setRequirePlanApproval(defaultRequirePlanApproval);
     }
-  }, [open, defaultSkipTests, defaultBranch, defaultPlanningMode, defaultRequirePlanApproval]);
+  }, [
+    open,
+    defaultSkipTests,
+    defaultBranch,
+    defaultPlanningMode,
+    defaultRequirePlanApproval,
+  ]);
 
   const handleAdd = () => {
     if (!newFeature.description.trim()) {
@@ -158,7 +171,7 @@ export function AddFeatureDialog({
     // If currentBranch is provided (non-primary worktree), use it
     // Otherwise (primary worktree), use empty string which means "unassigned" (show only on primary)
     const finalBranchName = useCurrentBranch
-      ? (currentBranch || "")
+      ? currentBranch || ""
       : newFeature.branchName || "";
 
     onAdd({
@@ -399,6 +412,7 @@ export function AddFeatureDialog({
                   setNewFeature({ ...newFeature, branchName: value })
                 }
                 branchSuggestions={branchSuggestions}
+                branchCardCounts={branchCardCounts}
                 currentBranch={currentBranch}
                 testIdPrefix="feature"
               />
@@ -481,7 +495,10 @@ export function AddFeatureDialog({
           </TabsContent>
 
           {/* Options Tab */}
-          <TabsContent value="options" className="space-y-4 overflow-y-auto cursor-default">
+          <TabsContent
+            value="options"
+            className="space-y-4 overflow-y-auto cursor-default"
+          >
             {/* Planning Mode Section */}
             <PlanningModeSelector
               mode={planningMode}
@@ -516,9 +533,7 @@ export function AddFeatureDialog({
             hotkeyActive={open}
             data-testid="confirm-add-feature"
             disabled={
-              useWorktrees &&
-              !useCurrentBranch &&
-              !newFeature.branchName.trim()
+              useWorktrees && !useCurrentBranch && !newFeature.branchName.trim()
             }
           >
             Add Feature

apps/ui/src/components/views/board-view/dialogs/delete-worktree-dialog.tsx

@@ -11,7 +11,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
-import { Loader2, Trash2, AlertTriangle } from "lucide-react";
+import { Loader2, Trash2, AlertTriangle, FileWarning } from "lucide-react";
 import { getElectronAPI } from "@/lib/electron";
 import { toast } from "sonner";
 
@@ -29,6 +29,8 @@ interface DeleteWorktreeDialogProps {
   projectPath: string;
   worktree: WorktreeInfo | null;
   onDeleted: (deletedWorktree: WorktreeInfo, deletedBranch: boolean) => void;
+  /** Number of features assigned to this worktree's branch */
+  affectedFeatureCount?: number;
 }
 
 export function DeleteWorktreeDialog({
@@ -37,6 +39,7 @@ export function DeleteWorktreeDialog({
   projectPath,
   worktree,
   onDeleted,
+  affectedFeatureCount = 0,
 }: DeleteWorktreeDialogProps) {
   const [deleteBranch, setDeleteBranch] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -99,6 +102,18 @@ export function DeleteWorktreeDialog({
               ?
             </span>
 
+            {affectedFeatureCount > 0 && (
+              <div className="flex items-start gap-2 p-3 rounded-md bg-orange-500/10 border border-orange-500/20 mt-2">
+                <FileWarning className="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" />
+                <span className="text-orange-500 text-sm">
+                  {affectedFeatureCount} feature{affectedFeatureCount !== 1 ? "s" : ""}{" "}
+                  {affectedFeatureCount !== 1 ? "are" : "is"} assigned to this
+                  branch. {affectedFeatureCount !== 1 ? "They" : "It"} will be
+                  unassigned and moved to the main worktree.
+                </span>
+              </div>
+            )}
+
             {worktree.hasChanges && (
               <div className="flex items-start gap-2 p-3 rounded-md bg-yellow-500/10 border border-yellow-500/20 mt-2">
                 <AlertTriangle className="w-4 h-4 text-yellow-500 mt-0.5 flex-shrink-0" />

apps/ui/src/components/views/board-view/dialogs/edit-feature-dialog.tsx

@@ -76,6 +76,7 @@ interface EditFeatureDialogProps {
   ) => void;
   categorySuggestions: string[];
   branchSuggestions: string[];
+  branchCardCounts?: Record<string, number>; // Map of branch name to unarchived card count
   currentBranch?: string;
   isMaximized: boolean;
   showProfilesOnly: boolean;
@@ -89,6 +90,7 @@ export function EditFeatureDialog({
   onUpdate,
   categorySuggestions,
   branchSuggestions,
+  branchCardCounts,
   currentBranch,
   isMaximized,
   showProfilesOnly,
@@ -388,6 +390,7 @@ export function EditFeatureDialog({
                   })
                 }
                 branchSuggestions={branchSuggestions}
+                branchCardCounts={branchCardCounts}
                 currentBranch={currentBranch}
                 disabled={editingFeature.status !== "backlog"}
                 testIdPrefix="edit-feature"

apps/ui/src/components/views/board-view/hooks/use-board-actions.ts

@@ -82,8 +82,8 @@ export function useBoardActions({
   } = useAppStore();
   const autoMode = useAutoMode();
 
-  // Note: getOrCreateWorktreeForFeature removed - worktrees are now created server-side
-  // at execution time based on feature.branchName
+  // Worktrees are created when adding/editing features with a branch name
+  // This ensures the worktree exists before the feature starts execution
 
   const handleAddFeature = useCallback(
     async (featureData: {
@@ -100,24 +100,58 @@ export function useBoardActions({
       planningMode: PlanningMode;
       requirePlanApproval: boolean;
     }) => {
-      // Simplified: Only store branchName, no worktree creation on add
-      // Worktrees are created at execution time (when feature starts)
       // Empty string means "unassigned" (show only on primary worktree) - convert to undefined
       // Non-empty string is the actual branch name (for non-primary worktrees)
       const finalBranchName = featureData.branchName || undefined;
 
+      // If worktrees enabled and a branch is specified, create the worktree now
+      // This ensures the worktree exists before the feature starts
+      if (useWorktrees && finalBranchName && currentProject) {
+        try {
+          const api = getElectronAPI();
+          if (api?.worktree?.create) {
+            const result = await api.worktree.create(
+              currentProject.path,
+              finalBranchName
+            );
+            if (result.success) {
+              console.log(
+                `[Board] Worktree for branch "${finalBranchName}" ${
+                  result.worktree?.isNew ? "created" : "already exists"
+                }`
+              );
+              // Refresh worktree list in UI
+              onWorktreeCreated?.();
+            } else {
+              console.error(
+                `[Board] Failed to create worktree for branch "${finalBranchName}":`,
+                result.error
+              );
+              toast.error("Failed to create worktree", {
+                description: result.error || "An error occurred",
+              });
+            }
+          }
+        } catch (error) {
+          console.error("[Board] Error creating worktree:", error);
+          toast.error("Failed to create worktree", {
+            description:
+              error instanceof Error ? error.message : "An error occurred",
+          });
+        }
+      }
+
       const newFeatureData = {
         ...featureData,
         status: "backlog" as const,
         branchName: finalBranchName,
-        // No worktreePath - derived at runtime from branchName
       };
       const createdFeature = addFeature(newFeatureData);
       // Must await to ensure feature exists on server before user can drag it
       await persistFeatureCreate(createdFeature);
       saveCategory(featureData.category);
     },
-    [addFeature, persistFeatureCreate, saveCategory]
+    [addFeature, persistFeatureCreate, saveCategory, useWorktrees, currentProject, onWorktreeCreated]
   );
 
   const handleUpdateFeature = useCallback(
@@ -139,6 +173,43 @@ export function useBoardActions({
     ) => {
       const finalBranchName = updates.branchName || undefined;
 
+      // If worktrees enabled and a branch is specified, create the worktree now
+      // This ensures the worktree exists before the feature starts
+      if (useWorktrees && finalBranchName && currentProject) {
+        try {
+          const api = getElectronAPI();
+          if (api?.worktree?.create) {
+            const result = await api.worktree.create(
+              currentProject.path,
+              finalBranchName
+            );
+            if (result.success) {
+              console.log(
+                `[Board] Worktree for branch "${finalBranchName}" ${
+                  result.worktree?.isNew ? "created" : "already exists"
+                }`
+              );
+              // Refresh worktree list in UI
+              onWorktreeCreated?.();
+            } else {
+              console.error(
+                `[Board] Failed to create worktree for branch "${finalBranchName}":`,
+                result.error
+              );
+              toast.error("Failed to create worktree", {
+                description: result.error || "An error occurred",
+              });
+            }
+          }
+        } catch (error) {
+          console.error("[Board] Error creating worktree:", error);
+          toast.error("Failed to create worktree", {
+            description:
+              error instanceof Error ? error.message : "An error occurred",
+          });
+        }
+      }
+
       const finalUpdates = {
         ...updates,
         branchName: finalBranchName,
@@ -151,7 +222,7 @@ export function useBoardActions({
       }
       setEditingFeature(null);
     },
-    [updateFeature, persistFeatureUpdate, saveCategory, setEditingFeature]
+    [updateFeature, persistFeatureUpdate, saveCategory, setEditingFeature, useWorktrees, currentProject, onWorktreeCreated]
   );
 
   const handleDeleteFeature = useCallback(

apps/ui/src/components/views/board-view/shared/branch-selector.tsx

@@ -10,6 +10,7 @@ interface BranchSelectorProps {
   branchName: string;
   onBranchNameChange: (branchName: string) => void;
   branchSuggestions: string[];
+  branchCardCounts?: Record<string, number>; // Map of branch name to unarchived card count
   currentBranch?: string;
   disabled?: boolean;
   testIdPrefix?: string;
@@ -21,6 +22,7 @@ export function BranchSelector({
   branchName,
   onBranchNameChange,
   branchSuggestions,
+  branchCardCounts,
   currentBranch,
   disabled = false,
   testIdPrefix = "branch",
@@ -69,6 +71,7 @@ export function BranchSelector({
             value={branchName}
             onChange={onBranchNameChange}
             branches={branchSuggestions}
+            branchCardCounts={branchCardCounts}
             placeholder="Select or create branch..."
             data-testid={`${testIdPrefix}-input`}
             disabled={disabled}

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

@@ -8,6 +8,7 @@ import { WorktreeActionsDropdown } from "./worktree-actions-dropdown";
 
 interface WorktreeTabProps {
   worktree: WorktreeInfo;
+  cardCount?: number; // Number of unarchived cards for this branch
   isSelected: boolean;
   isRunning: boolean;
   isActivating: boolean;
@@ -43,6 +44,7 @@ interface WorktreeTabProps {
 
 export function WorktreeTab({
   worktree,
+  cardCount,
   isSelected,
   isRunning,
   isActivating,
@@ -96,9 +98,9 @@ export function WorktreeTab({
               <RefreshCw className="w-3 h-3 animate-spin" />
             )}
             {worktree.branch}
-            {worktree.hasChanges && (
+            {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">
-                {worktree.changedFilesCount}
+                {cardCount}
               </span>
             )}
           </Button>
@@ -139,9 +141,9 @@ export function WorktreeTab({
             <RefreshCw className="w-3 h-3 animate-spin" />
           )}
           {worktree.branch}
-          {worktree.hasChanges && (
+          {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">
-              {worktree.changedFilesCount}
+              {cardCount}
             </span>
           )}
         </Button>

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

@@ -35,5 +35,6 @@ export interface WorktreePanelProps {
   onRemovedWorktrees?: (removedWorktrees: Array<{ path: string; branch: string }>) => void;
   runningFeatureIds?: string[];
   features?: FeatureInfo[];
+  branchCardCounts?: Record<string, number>; // Map of branch name to unarchived card count
   refreshTrigger?: number;
 }

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

@@ -23,6 +23,7 @@ export function WorktreePanel({
   onRemovedWorktrees,
   runningFeatureIds = [],
   features = [],
+  branchCardCounts,
   refreshTrigger = 0,
 }: WorktreePanelProps) {
   const {
@@ -109,43 +110,47 @@ export function WorktreePanel({
       <span className="text-sm text-muted-foreground mr-2">Branch:</span>
 
       <div className="flex items-center gap-1 flex-wrap">
-        {worktrees.map((worktree) => (
-          <WorktreeTab
-            key={worktree.path}
-            worktree={worktree}
-            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}
-            onDeleteWorktree={onDeleteWorktree}
-            onStartDevServer={handleStartDevServer}
-            onStopDevServer={handleStopDevServer}
-            onOpenDevServerUrl={handleOpenDevServerUrl}
-          />
-        ))}
+        {worktrees.map((worktree) => {
+          const cardCount = branchCardCounts?.[worktree.branch];
+          return (
+            <WorktreeTab
+              key={worktree.path}
+              worktree={worktree}
+              cardCount={cardCount}
+              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}
+              onDeleteWorktree={onDeleteWorktree}
+              onStartDevServer={handleStartDevServer}
+              onStopDevServer={handleStopDevServer}
+              onOpenDevServerUrl={handleOpenDevServerUrl}
+            />
+          );
+        })}
 
         <Button
           variant="ghost"