Merge origin/main into refactor/frontend

Resolved conflict in apps/ui/tests/worktree-integration.spec.ts: - Kept assertion verifying worktreePath is undefined (consistent with pattern) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-01 20:23:36 +00:00 · 2025-12-19 10:17:35 -05:00
parent 17a2053e79 46c3dd252f
commit 9110693c75
17 changed files with 442 additions and 186 deletions
--- a/apps/ui/src/components/session-manager.tsx
+++ b/apps/ui/src/components/session-manager.tsx
@@ -1,11 +1,6 @@

 import { useState, useEffect } from "react";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { HotkeyButton } from "@/components/ui/hotkey-button";
 import { Input } from "@/components/ui/input";
@@ -115,8 +110,10 @@ export function SessionManager({
    new Set()
  );
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const [sessionToDelete, setSessionToDelete] = useState<SessionListItem | null>(null);
-  const [isDeleteAllArchivedDialogOpen, setIsDeleteAllArchivedDialogOpen] = useState(false);
+  const [sessionToDelete, setSessionToDelete] =
+    useState<SessionListItem | null>(null);
+  const [isDeleteAllArchivedDialogOpen, setIsDeleteAllArchivedDialogOpen] =
+    useState(false);

  // Check running state for all sessions
  const checkRunningSessions = async (sessionList: SessionListItem[]) => {
@@ -233,11 +230,7 @@ export function SessionManager({
    const api = getElectronAPI();
    if (!editingName.trim() || !api?.sessions) return;

-    const result = await api.sessions.update(
-      sessionId,
-      editingName,
-      undefined
-    );
+    const result = await api.sessions.update(sessionId, editingName, undefined);

    if (result.success) {
      setEditingSessionId(null);
--- a/apps/ui/src/components/ui/branch-autocomplete.tsx
+++ b/apps/ui/src/components/ui/branch-autocomplete.tsx
@@ -7,6 +7,7 @@ interface BranchAutocompleteProps {
  value: string;
  onChange: (value: string) => void;
  branches: string[];
+  branchCardCounts?: Record<string, number>; // Map of branch name to unarchived card count
  placeholder?: string;
  className?: string;
  disabled?: boolean;
@@ -18,6 +19,7 @@ export function BranchAutocomplete({
  value,
  onChange,
  branches,
+  branchCardCounts,
  placeholder = "Select a branch...",
  className,
  disabled = false,
@@ -27,12 +29,22 @@ export function BranchAutocomplete({
  // Always include "main" at the top of suggestions
  const branchOptions: AutocompleteOption[] = React.useMemo(() => {
    const branchSet = new Set(["main", ...branches]);
-    return Array.from(branchSet).map((branch) => ({
-      value: branch,
-      label: branch,
-      badge: branch === "main" ? "default" : undefined,
-    }));
-  }, [branches]);
+    return Array.from(branchSet).map((branch) => {
+      const cardCount = branchCardCounts?.[branch];
+      // Show card count if available, otherwise show "default" for main branch only
+      const badge = branchCardCounts !== undefined
+        ? String(cardCount ?? 0)
+        : branch === "main" 
+          ? "default" 
+          : undefined;
+      
+      return {
+        value: branch,
+        label: branch,
+        badge,
+      };
+    });
+  }, [branches, branchCardCounts]);

  return (
    <Autocomplete
--- a/apps/ui/src/components/views/board-view.tsx
+++ b/apps/ui/src/components/views/board-view.tsx
@@ -269,6 +269,17 @@ export function BoardView() {
    fetchBranches();
  }, [currentProject, worktreeRefreshKey]);

+  // Calculate unarchived card counts per branch
+  const branchCardCounts = useMemo(() => {
+    return hookFeatures.reduce((counts, feature) => {
+      if (feature.status !== "completed") {
+        const branch = feature.branchName ?? "main";
+        counts[branch] = (counts[branch] || 0) + 1;
+      }
+      return counts;
+    }, {} as Record<string, number>);
+  }, [hookFeatures]);
+
  // Custom collision detection that prioritizes columns over cards
  const collisionDetectionStrategy = useCallback((args: any) => {
    // First, check if pointer is within a column
@@ -301,14 +312,14 @@ export function BoardView() {
        });

        if (matchesRemovedWorktree) {
-          // Reset the feature's branch assignment
-          persistFeatureUpdate(feature.id, {
-            branchName: null as unknown as string | undefined,
-          });
+          // Reset the feature's branch assignment - update both local state and persist
+          const updates = { branchName: null as unknown as string | undefined };
+          updateFeature(feature.id, updates);
+          persistFeatureUpdate(feature.id, updates);
        }
      });
    },
-    [hookFeatures, persistFeatureUpdate]
+    [hookFeatures, updateFeature, persistFeatureUpdate]
  );

  // Get in-progress features for keyboard shortcuts (needed before actions hook)
@@ -417,6 +428,18 @@ export function BoardView() {
    hookFeaturesRef.current = hookFeatures;
  }, [hookFeatures]);

+  // Use a ref to track running tasks to avoid effect re-runs that clear pendingFeaturesRef
+  const runningAutoTasksRef = useRef(runningAutoTasks);
+  useEffect(() => {
+    runningAutoTasksRef.current = runningAutoTasks;
+  }, [runningAutoTasks]);
+
+  // Keep latest start handler without retriggering the auto mode effect
+  const handleStartImplementationRef = useRef(handleStartImplementation);
+  useEffect(() => {
+    handleStartImplementationRef.current = handleStartImplementation;
+  }, [handleStartImplementation]);
+
  // Track features that are pending (started but not yet confirmed running)
  const pendingFeaturesRef = useRef<Set<string>>(new Set());

@@ -484,8 +507,9 @@ export function BoardView() {
        }

        // Count currently running tasks + pending features
+        // Use ref to get the latest running tasks without causing effect re-runs
        const currentRunning =
-          runningAutoTasks.length + pendingFeaturesRef.current.size;
+          runningAutoTasksRef.current.length + pendingFeaturesRef.current.size;
        const availableSlots = maxConcurrency - currentRunning;

        // No available slots, skip check
@@ -540,6 +564,10 @@ export function BoardView() {

        // Start features up to available slots
        const featuresToStart = eligibleFeatures.slice(0, availableSlots);
+        const startImplementation = handleStartImplementationRef.current;
+        if (!startImplementation) {
+          return;
+        }

        for (const feature of featuresToStart) {
          // Check again before starting each feature
@@ -565,7 +593,7 @@ export function BoardView() {
          }

          // Start the implementation - server will derive workDir from feature.branchName
-          const started = await handleStartImplementation(feature);
+          const started = await startImplementation(feature);

          // If successfully started, track it as pending until we receive the start event
          if (started) {
@@ -579,7 +607,7 @@ export function BoardView() {

    // Check immediately, then every 3 seconds
    checkAndStartFeatures();
-    const interval = setInterval(checkAndStartFeatures, 3000);
+    const interval = setInterval(checkAndStartFeatures, 1000);

    return () => {
      // Mark as inactive to prevent any pending async operations from continuing
@@ -591,7 +619,8 @@ export function BoardView() {
  }, [
    autoMode.isRunning,
    currentProject,
-    runningAutoTasks,
+    // runningAutoTasks is accessed via runningAutoTasksRef to prevent effect re-runs
+    // that would clear pendingFeaturesRef and cause concurrency issues
    maxConcurrency,
    // hookFeatures is accessed via hookFeaturesRef to prevent effect re-runs
    currentWorktreeBranch,
@@ -600,7 +629,6 @@ export function BoardView() {
    isPrimaryWorktreeBranch,
    enableDependencyBlocking,
    persistFeatureUpdate,
-    handleStartImplementation,
  ]);

  // Use keyboard shortcuts hook (after actions hook)
@@ -639,7 +667,9 @@ export function BoardView() {
  // Find feature for pending plan approval
  const pendingApprovalFeature = useMemo(() => {
    if (!pendingPlanApproval) return null;
-    return hookFeatures.find((f) => f.id === pendingPlanApproval.featureId) || null;
+    return (
+      hookFeatures.find((f) => f.id === pendingPlanApproval.featureId) || null
+    );
  }, [pendingPlanApproval, hookFeatures]);

  // Handle plan approval
@@ -665,10 +695,10 @@ export function BoardView() {
        if (result.success) {
          // Immediately update local feature state to hide "Approve Plan" button
          // Get current feature to preserve version
-          const currentFeature = hookFeatures.find(f => f.id === featureId);
+          const currentFeature = hookFeatures.find((f) => f.id === featureId);
          updateFeature(featureId, {
            planSpec: {
-              status: 'approved',
+              status: "approved",
              content: editedPlan || pendingPlanApproval.planContent,
              version: currentFeature?.planSpec?.version || 1,
              approvedAt: new Date().toISOString(),
@@ -687,7 +717,14 @@ export function BoardView() {
        setPendingPlanApproval(null);
      }
    },
-    [pendingPlanApproval, currentProject, setPendingPlanApproval, updateFeature, loadFeatures, hookFeatures]
+    [
+      pendingPlanApproval,
+      currentProject,
+      setPendingPlanApproval,
+      updateFeature,
+      loadFeatures,
+      hookFeatures,
+    ]
  );

  // Handle plan rejection
@@ -714,11 +751,11 @@ export function BoardView() {
        if (result.success) {
          // Immediately update local feature state
          // Get current feature to preserve version
-          const currentFeature = hookFeatures.find(f => f.id === featureId);
+          const currentFeature = hookFeatures.find((f) => f.id === featureId);
          updateFeature(featureId, {
-            status: 'backlog',
+            status: "backlog",
            planSpec: {
-              status: 'rejected',
+              status: "rejected",
              content: pendingPlanApproval.planContent,
              version: currentFeature?.planSpec?.version || 1,
              reviewedByUser: true,
@@ -736,7 +773,14 @@ export function BoardView() {
        setPendingPlanApproval(null);
      }
    },
-    [pendingPlanApproval, currentProject, setPendingPlanApproval, updateFeature, loadFeatures, hookFeatures]
+    [
+      pendingPlanApproval,
+      currentProject,
+      setPendingPlanApproval,
+      updateFeature,
+      loadFeatures,
+      hookFeatures,
+    ]
  );

  // Handle opening approval dialog from feature card button
@@ -747,7 +791,7 @@ export function BoardView() {
      // Determine the planning mode for approval (skip should never have a plan requiring approval)
      const mode = feature.planningMode;
      const approvalMode: "lite" | "spec" | "full" =
-        mode === 'lite' || mode === 'spec' || mode === 'full' ? mode : 'spec';
+        mode === "lite" || mode === "spec" || mode === "full" ? mode : "spec";

      // Re-open the approval dialog with the feature's plan data
      setPendingPlanApproval({
@@ -832,6 +876,7 @@ export function BoardView() {
        }}
        onRemovedWorktrees={handleRemovedWorktrees}
        runningFeatureIds={runningAutoTasks}
+        branchCardCounts={branchCardCounts}
        features={hookFeatures.map((f) => ({
          id: f.id,
          branchName: f.branchName,
@@ -928,6 +973,7 @@ export function BoardView() {
        onAdd={handleAddFeature}
        categorySuggestions={categorySuggestions}
        branchSuggestions={branchSuggestions}
+        branchCardCounts={branchCardCounts}
        defaultSkipTests={defaultSkipTests}
        defaultBranch={selectedWorktreeBranch}
        currentBranch={currentWorktreeBranch || undefined}
@@ -943,6 +989,7 @@ export function BoardView() {
        onUpdate={handleUpdateFeature}
        categorySuggestions={categorySuggestions}
        branchSuggestions={branchSuggestions}
+        branchCardCounts={branchCardCounts}
        currentBranch={currentWorktreeBranch || undefined}
        isMaximized={isMaximized}
        showProfilesOnly={showProfilesOnly}
@@ -1064,15 +1111,24 @@ export function BoardView() {
        onOpenChange={setShowDeleteWorktreeDialog}
        projectPath={currentProject.path}
        worktree={selectedWorktreeForAction}
+        affectedFeatureCount={
+          selectedWorktreeForAction
+            ? hookFeatures.filter(
+                (f) => f.branchName === selectedWorktreeForAction.branch
+              ).length
+            : 0
+        }
        onDeleted={(deletedWorktree, _deletedBranch) => {
          // Reset features that were assigned to the deleted worktree (by branch)
          hookFeatures.forEach((feature) => {
            // Match by branch name since worktreePath is no longer stored
            if (feature.branchName === deletedWorktree.branch) {
-              // Reset the feature's branch assignment
-              persistFeatureUpdate(feature.id, {
+              // Reset the feature's branch assignment - update both local state and persist
+              const updates = {
                branchName: null as unknown as string | undefined,
-              });
+              };
+              updateFeature(feature.id, updates);
+              persistFeatureUpdate(feature.id, updates);
            }
          });

--- a/apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx
+++ b/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
--- a/apps/ui/src/components/views/board-view/dialogs/delete-worktree-dialog.tsx
+++ b/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" />
--- a/apps/ui/src/components/views/board-view/dialogs/edit-feature-dialog.tsx
+++ b/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"
--- 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
@@ -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(
--- a/apps/ui/src/components/views/board-view/shared/branch-selector.tsx
+++ b/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}
--- a/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx
+++ b/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx
@@ -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>
--- a/apps/ui/src/components/views/board-view/worktree-panel/types.ts
+++ b/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;
 }
--- 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
@@ -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"