feat: Introduce default delete branch option for worktrees

This commit adds a new feature allowing users to set a default value for the "delete branch" checkbox when deleting a worktree. Key changes include: 1. **State Management**: Introduced `defaultDeleteBranchByProject` to manage the default delete branch setting per project. 2. **UI Components**: Updated the WorktreesSection to include a toggle for the default delete branch option, enhancing user control during worktree deletion. 3. **Dialog Updates**: Modified the DeleteWorktreeDialog to respect the default delete branch setting, improving the user experience by streamlining the deletion process. These enhancements provide users with more flexibility and control over worktree management, improving overall project workflows.
2026-01-30 06:12:03 +00:00 · 2026-01-10 23:18:39 +01:00
parent aeb5bd829f
commit e902e8ea4c
7 changed files with 204 additions and 63 deletions
--- a/apps/ui/src/components/views/board-view.tsx
+++ b/apps/ui/src/components/views/board-view.tsx
@@ -119,6 +119,7 @@ export function BoardView() {
    (state) => state.showInitScriptIndicatorByProject
  );
  const getShowInitScriptIndicator = useAppStore((state) => state.getShowInitScriptIndicator);
+  const getDefaultDeleteBranch = useAppStore((state) => state.getDefaultDeleteBranch);
  const shortcuts = useKeyboardShortcutsConfig();
  const {
    features: hookFeatures,
@@ -1513,6 +1514,7 @@ export function BoardView() {
            ? hookFeatures.filter((f) => f.branchName === selectedWorktreeForAction.branch).length
            : 0
        }
+        defaultDeleteBranch={getDefaultDeleteBranch(currentProject.path)}
        onDeleted={(deletedWorktree, _deletedBranch) => {
          // Reset features that were assigned to the deleted worktree (by branch)
          hookFeatures.forEach((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
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import {
  Dialog,
  DialogContent,
@@ -30,6 +30,8 @@ interface DeleteWorktreeDialogProps {
  onDeleted: (deletedWorktree: WorktreeInfo, deletedBranch: boolean) => void;
  /** Number of features assigned to this worktree's branch */
  affectedFeatureCount?: number;
+  /** Default value for the "delete branch" checkbox */
+  defaultDeleteBranch?: boolean;
 }

 export function DeleteWorktreeDialog({
@@ -39,10 +41,18 @@ export function DeleteWorktreeDialog({
  worktree,
  onDeleted,
  affectedFeatureCount = 0,
+  defaultDeleteBranch = false,
 }: DeleteWorktreeDialogProps) {
-  const [deleteBranch, setDeleteBranch] = useState(false);
+  const [deleteBranch, setDeleteBranch] = useState(defaultDeleteBranch);
  const [isLoading, setIsLoading] = useState(false);

+  // Reset deleteBranch to default when dialog opens
+  useEffect(() => {
+    if (open) {
+      setDeleteBranch(defaultDeleteBranch);
+    }
+  }, [open, defaultDeleteBranch]);
+
  const handleDelete = async () => {
    if (!worktree) return;

--- a/apps/ui/src/components/views/board-view/init-script-indicator.tsx
+++ b/apps/ui/src/components/views/board-view/init-script-indicator.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import { Terminal, Check, X, Loader2, ChevronDown, ChevronUp } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useAppStore, type InitScriptState } from '@/store/app-store';
@@ -8,45 +8,38 @@ interface InitScriptIndicatorProps {
  projectPath: string;
 }

-export function InitScriptIndicator({ projectPath }: InitScriptIndicatorProps) {
-  const initScriptState = useAppStore((s) => s.initScriptState[projectPath]);
-  const clearInitScriptState = useAppStore((s) => s.clearInitScriptState);
+interface SingleIndicatorProps {
+  stateKey: string;
+  state: InitScriptState;
+  onDismiss: (key: string) => void;
+  isOnlyOne: boolean; // Whether this is the only indicator shown
+}
+
+function SingleIndicator({ stateKey, state, onDismiss, isOnlyOne }: SingleIndicatorProps) {
  const [showLogs, setShowLogs] = useState(false);
-  const [dismissed, setDismissed] = useState(false);
  const logsEndRef = useRef<HTMLDivElement>(null);

+  const { status, output, branch, error } = state;
+
  // Auto-scroll to bottom when new output arrives
  useEffect(() => {
    if (showLogs && logsEndRef.current) {
      logsEndRef.current.scrollIntoView({ behavior: 'smooth' });
    }
-  }, [initScriptState?.output, showLogs]);
+  }, [output, showLogs]);

-  // Reset dismissed state when a new script starts
+  // Auto-expand logs when script starts (only if it's the only one or running)
  useEffect(() => {
-    if (initScriptState?.status === 'running') {
-      setDismissed(false);
+    if (status === 'running' && isOnlyOne) {
      setShowLogs(true);
    }
-  }, [initScriptState?.status]);
+  }, [status, isOnlyOne]);

-  if (!initScriptState || dismissed) return null;
-  if (initScriptState.status === 'idle') return null;
-
-  const { status, output, branch, error } = initScriptState;
-
-  const handleDismiss = () => {
-    setDismissed(true);
-    // Clear state after a delay to allow for future scripts
-    setTimeout(() => {
-      clearInitScriptState(projectPath);
-    }, 100);
-  };
+  if (status === 'idle') return null;

  return (
    <div
      className={cn(
-        'fixed bottom-4 right-4 z-50',
        'bg-card border border-border rounded-lg shadow-lg',
        'min-w-[350px] max-w-[500px]',
        'animate-in slide-in-from-right-5 duration-200'
@@ -55,18 +48,12 @@ export function InitScriptIndicator({ projectPath }: InitScriptIndicatorProps) {
      {/* Header */}
      <div className="flex items-center justify-between p-3 border-b border-border/50">
        <div className="flex items-center gap-2">
-          {status === 'running' && (
-            <Loader2 className="w-4 h-4 animate-spin text-blue-500" />
-          )}
+          {status === 'running' && <Loader2 className="w-4 h-4 animate-spin text-blue-500" />}
          {status === 'success' && <Check className="w-4 h-4 text-green-500" />}
          {status === 'failed' && <X className="w-4 h-4 text-red-500" />}
          <span className="font-medium text-sm">
            Init Script{' '}
-            {status === 'running'
-              ? 'Running'
-              : status === 'success'
-                ? 'Completed'
-                : 'Failed'}
+            {status === 'running' ? 'Running' : status === 'success' ? 'Completed' : 'Failed'}
          </span>
        </div>
        <div className="flex items-center gap-1">
@@ -83,7 +70,7 @@ export function InitScriptIndicator({ projectPath }: InitScriptIndicatorProps) {
          </button>
          {status !== 'running' && (
            <button
-              onClick={handleDismiss}
+              onClick={() => onDismiss(stateKey)}
              className="p-1 hover:bg-accent rounded transition-colors"
              title="Dismiss"
            >
@@ -110,11 +97,7 @@ export function InitScriptIndicator({ projectPath }: InitScriptIndicatorProps) {
                {status === 'running' ? 'Waiting for output...' : 'No output'}
              </div>
            )}
-            {error && (
-              <div className="mt-2 text-red-500 text-xs font-medium">
-                Error: {error}
-              </div>
-            )}
+            {error && <div className="mt-2 text-red-500 text-xs font-medium">Error: {error}</div>}
            <div ref={logsEndRef} />
          </div>
        </div>
@@ -125,9 +108,7 @@ export function InitScriptIndicator({ projectPath }: InitScriptIndicatorProps) {
        <div
          className={cn(
            'px-3 py-2 text-xs',
-            status === 'success'
-              ? 'bg-green-500/10 text-green-600'
-              : 'bg-red-500/10 text-red-600'
+            status === 'success' ? 'bg-green-500/10 text-green-600' : 'bg-red-500/10 text-red-600'
          )}
        >
          {status === 'success'
@@ -138,3 +119,69 @@ export function InitScriptIndicator({ projectPath }: InitScriptIndicatorProps) {
    </div>
  );
 }
+
+export function InitScriptIndicator({ projectPath }: InitScriptIndicatorProps) {
+  const getInitScriptStatesForProject = useAppStore((s) => s.getInitScriptStatesForProject);
+  const clearInitScriptState = useAppStore((s) => s.clearInitScriptState);
+  const [dismissedKeys, setDismissedKeys] = useState<Set<string>>(new Set());
+
+  // Get all init script states for this project
+  const allStates = getInitScriptStatesForProject(projectPath);
+
+  // Filter out dismissed and idle states
+  const activeStates = allStates.filter(
+    ({ key, state }) => !dismissedKeys.has(key) && state.status !== 'idle'
+  );
+
+  // Reset dismissed keys when a new script starts for a branch
+  useEffect(() => {
+    const runningKeys = allStates
+      .filter(({ state }) => state.status === 'running')
+      .map(({ key }) => key);
+
+    if (runningKeys.length > 0) {
+      setDismissedKeys((prev) => {
+        const newSet = new Set(prev);
+        runningKeys.forEach((key) => newSet.delete(key));
+        return newSet;
+      });
+    }
+  }, [allStates]);
+
+  const handleDismiss = useCallback(
+    (key: string) => {
+      setDismissedKeys((prev) => new Set(prev).add(key));
+      // Extract branch from key (format: "projectPath::branch")
+      const branch = key.split('::')[1];
+      if (branch) {
+        // Clear state after a delay to allow for future scripts
+        setTimeout(() => {
+          clearInitScriptState(projectPath, branch);
+        }, 100);
+      }
+    },
+    [projectPath, clearInitScriptState]
+  );
+
+  if (activeStates.length === 0) return null;
+
+  return (
+    <div
+      className={cn(
+        'fixed bottom-4 right-4 z-50 flex flex-col gap-2',
+        'max-h-[calc(100vh-120px)] overflow-y-auto',
+        'scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent'
+      )}
+    >
+      {activeStates.map(({ key, state }) => (
+        <SingleIndicator
+          key={key}
+          stateKey={key}
+          state={state}
+          onDismiss={handleDismiss}
+          isOnlyOne={activeStates.length === 1}
+        />
+      ))}
+    </div>
+  );
+}
--- a/apps/ui/src/components/views/settings-view/worktrees/worktrees-section.tsx
+++ b/apps/ui/src/components/views/settings-view/worktrees/worktrees-section.tsx
@@ -35,6 +35,8 @@ export function WorktreesSection({ useWorktrees, onUseWorktreesChange }: Worktre
  const currentProject = useAppStore((s) => s.currentProject);
  const getShowInitScriptIndicator = useAppStore((s) => s.getShowInitScriptIndicator);
  const setShowInitScriptIndicator = useAppStore((s) => s.setShowInitScriptIndicator);
+  const getDefaultDeleteBranch = useAppStore((s) => s.getDefaultDeleteBranch);
+  const setDefaultDeleteBranch = useAppStore((s) => s.setDefaultDeleteBranch);
  const [scriptContent, setScriptContent] = useState('');
  const [originalContent, setOriginalContent] = useState('');
  const [scriptExists, setScriptExists] = useState(false);
@@ -47,6 +49,11 @@ export function WorktreesSection({ useWorktrees, onUseWorktreesChange }: Worktre
    ? getShowInitScriptIndicator(currentProject.path)
    : true;

+  // Get the default delete branch setting
+  const defaultDeleteBranch = currentProject?.path
+    ? getDefaultDeleteBranch(currentProject.path)
+    : false;
+
  // Check if there are unsaved changes
  const hasChanges = scriptContent !== originalContent;

@@ -226,6 +233,34 @@ export function WorktreesSection({ useWorktrees, onUseWorktreesChange }: Worktre
          </div>
        )}

+        {/* Default Delete Branch Toggle */}
+        {currentProject && (
+          <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+            <Checkbox
+              id="default-delete-branch"
+              checked={defaultDeleteBranch}
+              onCheckedChange={(checked) => {
+                if (currentProject?.path) {
+                  setDefaultDeleteBranch(currentProject.path, checked === true);
+                }
+              }}
+              className="mt-1"
+            />
+            <div className="space-y-1.5">
+              <Label
+                htmlFor="default-delete-branch"
+                className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+              >
+                <Trash2 className="w-4 h-4 text-brand-500" />
+                Delete Branch by Default
+              </Label>
+              <p className="text-xs text-muted-foreground/80 leading-relaxed">
+                When deleting a worktree, automatically check the "Also delete the branch" option.
+              </p>
+            </div>
+          </div>
+        )}
+
        {/* Separator */}
        <div className="border-t border-border/30" />

--- a/apps/ui/src/hooks/use-init-script-events.ts
+++ b/apps/ui/src/hooks/use-init-script-events.ts
@@ -50,7 +50,7 @@ export function useInitScriptEvents(projectPath: string | null) {
      switch (event.type) {
        case 'worktree:init-started': {
          const startPayload = payload as InitScriptStartedPayload;
-          setInitScriptState(projectPath, {
+          setInitScriptState(projectPath, startPayload.branch, {
            status: 'running',
            branch: startPayload.branch,
            output: [],
@@ -60,12 +60,12 @@ export function useInitScriptEvents(projectPath: string | null) {
        }
        case 'worktree:init-output': {
          const outputPayload = payload as InitScriptOutputPayload;
-          appendInitScriptOutput(projectPath, outputPayload.content);
+          appendInitScriptOutput(projectPath, outputPayload.branch, outputPayload.content);
          break;
        }
        case 'worktree:init-completed': {
          const completePayload = payload as InitScriptCompletedPayload;
-          setInitScriptState(projectPath, {
+          setInitScriptState(projectPath, completePayload.branch, {
            status: completePayload.success ? 'success' : 'failed',
            error: completePayload.error,
          });
--- a/apps/ui/src/store/app-store.ts
+++ b/apps/ui/src/store/app-store.ts
@@ -669,6 +669,10 @@ export interface AppState {
  // Whether to show the floating init script indicator panel (default: true)
  showInitScriptIndicatorByProject: Record<string, boolean>;

+  // Default Delete Branch With Worktree (per-project, keyed by project path)
+  // Whether to default the "delete branch" checkbox when deleting a worktree (default: false)
+  defaultDeleteBranchByProject: Record<string, boolean>;
+
  // UI State (previously in localStorage, now synced via API)
  /** Whether worktree panel is collapsed in board view */
  worktreePanelCollapsed: boolean;
@@ -677,7 +681,7 @@ export interface AppState {
  /** Recently accessed folders for quick access */
  recentFolders: string[];

-  // Init Script State (per-project, keyed by project path)
+  // Init Script State (keyed by "projectPath::branch" to support concurrent scripts)
  initScriptState: Record<string, InitScriptState>;
 }

@@ -1086,6 +1090,10 @@ export interface AppActions {
  setShowInitScriptIndicator: (projectPath: string, visible: boolean) => void;
  getShowInitScriptIndicator: (projectPath: string) => boolean;

+  // Default Delete Branch actions (per-project)
+  setDefaultDeleteBranch: (projectPath: string, deleteBranch: boolean) => void;
+  getDefaultDeleteBranch: (projectPath: string) => boolean;
+
  // UI State actions (previously in localStorage, now synced via API)
  setWorktreePanelCollapsed: (collapsed: boolean) => void;
  setLastProjectDir: (dir: string) => void;
@@ -1114,11 +1122,18 @@ export interface AppActions {
    }>
  ) => void;

-  // Init Script State actions
-  setInitScriptState: (projectPath: string, state: Partial<InitScriptState>) => void;
-  appendInitScriptOutput: (projectPath: string, content: string) => void;
-  clearInitScriptState: (projectPath: string) => void;
-  getInitScriptState: (projectPath: string) => InitScriptState | null;
+  // Init Script State actions (keyed by projectPath::branch to support concurrent scripts)
+  setInitScriptState: (
+    projectPath: string,
+    branch: string,
+    state: Partial<InitScriptState>
+  ) => void;
+  appendInitScriptOutput: (projectPath: string, branch: string, content: string) => void;
+  clearInitScriptState: (projectPath: string, branch: string) => void;
+  getInitScriptState: (projectPath: string, branch: string) => InitScriptState | null;
+  getInitScriptStatesForProject: (
+    projectPath: string
+  ) => Array<{ key: string; state: InitScriptState }>;

  // Reset
  reset: () => void;
@@ -1217,6 +1232,7 @@ const initialState: AppState = {
  pipelineConfigByProject: {},
  worktreePanelVisibleByProject: {},
  showInitScriptIndicatorByProject: {},
+  defaultDeleteBranchByProject: {},
  // UI State (previously in localStorage, now synced via API)
  worktreePanelCollapsed: false,
  lastProjectDir: '',
@@ -3148,6 +3164,21 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
    return get().showInitScriptIndicatorByProject[projectPath] ?? true;
  },

+  // Default Delete Branch actions (per-project)
+  setDefaultDeleteBranch: (projectPath, deleteBranch) => {
+    set({
+      defaultDeleteBranchByProject: {
+        ...get().defaultDeleteBranchByProject,
+        [projectPath]: deleteBranch,
+      },
+    });
+  },
+
+  getDefaultDeleteBranch: (projectPath) => {
+    // Default to false (don't delete branch) if not set
+    return get().defaultDeleteBranchByProject[projectPath] ?? false;
+  },
+
  // UI State actions (previously in localStorage, now synced via API)
  setWorktreePanelCollapsed: (collapsed) => set({ worktreePanelCollapsed: collapsed }),
  setLastProjectDir: (dir) => set({ lastProjectDir: dir }),
@@ -3161,28 +3192,30 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
    set({ recentFolders: updated });
  },

-  // Init Script State actions
-  setInitScriptState: (projectPath, state) => {
-    const current = get().initScriptState[projectPath] || {
+  // Init Script State actions (keyed by "projectPath::branch")
+  setInitScriptState: (projectPath, branch, state) => {
+    const key = `${projectPath}::${branch}`;
+    const current = get().initScriptState[key] || {
      status: 'idle',
-      branch: '',
+      branch,
      output: [],
    };
    set({
      initScriptState: {
        ...get().initScriptState,
-        [projectPath]: { ...current, ...state },
+        [key]: { ...current, ...state },
      },
    });
  },

-  appendInitScriptOutput: (projectPath, content) => {
-    const current = get().initScriptState[projectPath];
+  appendInitScriptOutput: (projectPath, branch, content) => {
+    const key = `${projectPath}::${branch}`;
+    const current = get().initScriptState[key];
    if (!current) return;
    set({
      initScriptState: {
        ...get().initScriptState,
-        [projectPath]: {
+        [key]: {
          ...current,
          output: [...current.output, content],
        },
@@ -3190,13 +3223,23 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
    });
  },

-  clearInitScriptState: (projectPath) => {
-    const { [projectPath]: _, ...rest } = get().initScriptState;
+  clearInitScriptState: (projectPath, branch) => {
+    const key = `${projectPath}::${branch}`;
+    const { [key]: _, ...rest } = get().initScriptState;
    set({ initScriptState: rest });
  },

-  getInitScriptState: (projectPath) => {
-    return get().initScriptState[projectPath] || null;
+  getInitScriptState: (projectPath, branch) => {
+    const key = `${projectPath}::${branch}`;
+    return get().initScriptState[key] || null;
+  },
+
+  getInitScriptStatesForProject: (projectPath) => {
+    const prefix = `${projectPath}::`;
+    const states = get().initScriptState;
+    return Object.entries(states)
+      .filter(([key]) => key.startsWith(prefix))
+      .map(([key, state]) => ({ key, state }));
  },

  // Reset
--- a/libs/types/src/settings.ts
+++ b/libs/types/src/settings.ts
@@ -598,6 +598,10 @@ export interface ProjectSettings {
  /** Whether to show the init script indicator panel (default: true) */
  showInitScriptIndicator?: boolean;

+  // Worktree Behavior
+  /** Default value for "delete branch" checkbox when deleting a worktree (default: false) */
+  defaultDeleteBranchWithWorktree?: boolean;
+
  // Session Tracking
  /** Last chat session selected in this project */
  lastSelectedSessionId?: string;