animated-worktree-deletion (squashed)

Author: frenchie4111

src/main/index.ts

@@ -8,10 +8,11 @@ import { Store } from './store'
 import { registerStateTransport } from './transport-electron'
 import { PRPoller } from './pr-poller'
 import { WorktreesFSM } from './worktrees-fsm'
+import { WorktreeDeletionFSM } from './worktree-deletion-fsm'
 import { PanesFSM, stripTransientTabFields } from './panes-fsm'
 import { ActivityDeriver } from './activity-deriver'
 import type { TerminalTab, WorkspacePane } from '../shared/state/terminals'
-import { listWorktrees, listBranches, continueWorktree, removeWorktree, isWorktreeDirty, defaultWorktreeDir, getChangedFiles, getFileDiff, getBranchCommits, getCommitDiff, getMainWorktreeStatus, prepareMainForMerge, mergeWorktreeLocally, getBranchSha, previewMergeConflicts, getBranchDiffStats, listAllFiles, readWorktreeFile, runWorktreeScript, type MergeStrategy } from './worktree'
+import { listWorktrees, listBranches, continueWorktree, isWorktreeDirty, defaultWorktreeDir, getChangedFiles, getFileDiff, getBranchCommits, getCommitDiff, getMainWorktreeStatus, prepareMainForMerge, mergeWorktreeLocally, getBranchSha, previewMergeConflicts, getBranchDiffStats, listAllFiles, readWorktreeFile, type MergeStrategy } from './worktree'
 import { getPRStatus, testToken, starRepo, unstarRepo, isRepoStarred } from './github'
 import { AVAILABLE_EDITORS, DEFAULT_EDITOR_ID, openInEditor } from './editor'
 import { setSecret, hasSecret, deleteSecret } from './secrets'
@@ -191,6 +192,11 @@ const worktreesFSM = new WorktreesFSM(store, {
   }
 })
 
+const worktreeDeletionFSM = new WorktreeDeletionFSM(store, {
+  getGlobalTeardownCmd: () => config.worktreeTeardownCommand || '',
+  worktreesFSM
+})
+
 const activityDeriver = new ActivityDeriver(store)
 
 /** Install Claude Code hooks into any worktree that's missing them, but only
@@ -343,7 +349,9 @@ function registerIpcHandlers(): void {
     removeMeta?: { prNumber?: number; prState?: PRState }
   ) => {
     if (!repoRoot) throw new Error('No repo root provided')
-    // Drop any locally-merged flag for the branch at this path
+    // Drop any locally-merged flag for the branch at this path. We still
+    // need the worktree record for its branch name *before* kicking off
+    // the async deletion.
     const trees = await listWorktrees(repoRoot)
     const wt = trees.find((t) => t.path === path)
     if (wt && config.locallyMerged && wt.branch && config.locallyMerged[wt.branch]) {
@@ -358,18 +366,22 @@ function registerIpcHandlers(): void {
       prNumber: removeMeta?.prNumber,
       prState: removeMeta?.prState
     })
-    const teardownRepoCfg = loadRepoConfig(repoRoot)
-    const teardownCmd = teardownRepoCfg.teardownCommand || config.worktreeTeardownCommand || ''
-    if (teardownCmd) {
-      await runWorktreeScript('teardown', teardownCmd, {
-        worktreePath: path,
-        branch: wt?.branch || '',
-        repoRoot
-      })
-    }
-    const result = await removeWorktree(repoRoot, path, force)
-    void worktreesFSM.refreshList()
-    return result
+    // Fire-and-forget: the WorktreeDeletionFSM runs the teardown script
+    // and git worktree remove in the background, streaming progress
+    // through the store. Returns immediately so the renderer can animate
+    // the deletion card instead of freezing on the row.
+    worktreeDeletionFSM.enqueue({
+      repoRoot,
+      path,
+      branch: wt?.branch || '',
+      force
+    })
+    return { queued: true }
+  })
+
+  ipcMain.handle('worktree:dismissPendingDeletion', (_, path: string) => {
+    worktreeDeletionFSM.dismiss(path)
+    return true
   })
 
   ipcMain.handle('worktree:dir', async (_, repoRoot: string) => {

src/main/worktree-deletion-fsm.ts

@@ -0,0 +1,104 @@
+import { removeWorktree, runWorktreeScript } from './worktree'
+import { loadRepoConfig } from './repo-config'
+import { log } from './debug'
+import type { Store } from './store'
+import type { WorktreesFSM } from './worktrees-fsm'
+import type { PendingDeletion } from '../shared/state/worktrees'
+
+interface WorktreeDeletionFSMOptions {
+  getGlobalTeardownCmd: () => string
+  worktreesFSM: WorktreesFSM
+}
+
+/** Owns the pending-deletion state machine. Each enqueue runs independently
+ * (parallel deletions are fine — they touch disjoint paths), streams
+ * teardown script output into the store, and refreshes the worktree list
+ * on completion. Lives entirely in main so deletions keep running if the
+ * user navigates away; the renderer just reads state. */
+export class WorktreeDeletionFSM {
+  private store: Store
+  private opts: WorktreeDeletionFSMOptions
+
+  constructor(store: Store, opts: WorktreeDeletionFSMOptions) {
+    this.store = store
+    this.opts = opts
+  }
+
+  /** Kick off a deletion. Returns immediately after seeding the pending
+   * entry; the actual work runs in the background. */
+  enqueue(params: {
+    repoRoot: string
+    path: string
+    branch: string
+    force?: boolean
+  }): void {
+    void this.run(params)
+  }
+
+  dismiss(path: string): void {
+    this.store.dispatch({ type: 'worktrees/pendingDeletionRemoved', payload: path })
+  }
+
+  private async run(params: {
+    repoRoot: string
+    path: string
+    branch: string
+    force?: boolean
+  }): Promise<void> {
+    const { repoRoot, path, branch, force } = params
+    const repoCfg = loadRepoConfig(repoRoot)
+    const teardownCmd = repoCfg.teardownCommand || this.opts.getGlobalTeardownCmd() || ''
+    const hasTeardown = Boolean(teardownCmd.trim())
+
+    const initial: PendingDeletion = {
+      path,
+      repoRoot,
+      branch,
+      phase: hasTeardown ? 'running-teardown' : 'removing-worktree',
+      teardownLog: hasTeardown ? '' : undefined
+    }
+    this.store.dispatch({ type: 'worktrees/pendingDeletionStarted', payload: initial })
+
+    try {
+      if (hasTeardown) {
+        let buffered = ''
+        const result = await runWorktreeScript(
+          'teardown',
+          teardownCmd,
+          { worktreePath: path, branch, repoRoot },
+          (_stream, chunk) => {
+            buffered += chunk
+            this.store.dispatch({
+              type: 'worktrees/pendingDeletionUpdated',
+              payload: { path, patch: { teardownLog: buffered } }
+            })
+          }
+        )
+        this.store.dispatch({
+          type: 'worktrees/pendingDeletionUpdated',
+          payload: { path, patch: { teardownExitCode: result.exitCode } }
+        })
+        // Teardown failure is non-fatal — we still want to remove the
+        // worktree, matching the previous synchronous behavior.
+      }
+
+      this.store.dispatch({
+        type: 'worktrees/pendingDeletionUpdated',
+        payload: { path, patch: { phase: 'removing-worktree' } }
+      })
+      await removeWorktree(repoRoot, path, force)
+
+      // Clear the pending entry and refresh the list so the sidebar row
+      // disappears in one render.
+      this.store.dispatch({ type: 'worktrees/pendingDeletionRemoved', payload: path })
+      await this.opts.worktreesFSM.refreshList()
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      log('worktree-deletion-fsm', `deletion failed for ${path}: ${message}`)
+      this.store.dispatch({
+        type: 'worktrees/pendingDeletionUpdated',
+        payload: { path, patch: { phase: 'failed', error: message } }
+      })
+    }
+  }
+}

src/preload/index.ts

@@ -35,6 +35,8 @@ contextBridge.exposeInMainWorld('api', {
     force?: boolean,
     removeMeta?: { prNumber?: number; prState?: 'open' | 'draft' | 'merged' | 'closed' }
   ) => ipcRenderer.invoke('worktree:remove', repoRoot, path, force, removeMeta),
+  dismissPendingDeletion: (path: string) =>
+    ipcRenderer.invoke('worktree:dismissPendingDeletion', path),
   getWorktreeDir: (repoRoot: string) => ipcRenderer.invoke('worktree:dir', repoRoot),
   // Repos (multi-repo session state)
   listRepos: () => ipcRenderer.invoke('repo:list'),

src/renderer/App.tsx

@@ -10,6 +10,7 @@ import { Sidebar } from './components/Sidebar'
 import { ResizeHandle } from './components/ResizeHandle'
 import { NewWorktreeScreen } from './components/NewWorktreeScreen'
 import { CreatingWorktreeScreen } from './components/CreatingWorktreeScreen'
+import { DeletingWorktreeScreen } from './components/DeletingWorktreeScreen'
 import { QuestCard } from './components/QuestCard'
 import { WorkspaceView } from './components/WorkspaceView'
 import { ChangedFilesPanel } from './components/ChangedFilesPanel'
@@ -37,6 +38,12 @@ export default function App(): JSX.Element {
   const wtState = useWorktrees()
   const worktrees = wtState.list
   const pendingWorktrees = wtState.pending
+  const pendingDeletions = wtState.pendingDeletions ?? []
+  const pendingDeletionByPath = useMemo(() => {
+    const m: Record<string, (typeof pendingDeletions)[number]> = {}
+    for (const d of pendingDeletions) m[d.path] = d
+    return m
+  }, [pendingDeletions])
   const worktreeRepoByPath = useMemo(() => {
     const m: Record<string, string> = {}
     for (const w of worktrees) m[w.path] = w.repoRoot
@@ -317,6 +324,21 @@ const setQuestStep = useCallback((next: QuestStep) => {
     fetchPRStatusIfStale(activeWorktreeId)
   }, [activeWorktreeId, fetchPRStatusIfStale])
 
+  // If the active id points at something that no longer exists — a
+  // finished deletion, a dismissed pending creation, a stale focus after
+  // a refresh — route focus to a neighbor so the center pane doesn't
+  // collapse into an empty region.
+  useEffect(() => {
+    if (!activeWorktreeId) return
+    if (isPendingId(activeWorktreeId)) {
+      if (pendingWorktrees.some((p) => p.id === activeWorktreeId)) return
+    } else {
+      if (worktrees.some((w) => w.path === activeWorktreeId)) return
+      if (pendingDeletions.some((d) => d.path === activeWorktreeId)) return
+    }
+    setActiveWorktreeId(worktrees[0]?.path ?? null)
+  }, [activeWorktreeId, worktrees, pendingWorktrees, pendingDeletions])
+
   const handleAcceptHooks = useCallback(() => {
     void window.api.acceptHooks()
   }, [])
@@ -347,7 +369,8 @@ const setQuestStep = useCallback((next: QuestStep) => {
     handleContinuePendingWorktree,
     handleContinueWorktree,
     handleDeleteWorktree,
-    handleBulkDeleteWorktrees
+    handleBulkDeleteWorktrees,
+    handleDismissPendingDeletion
   } = useWorktreeHandlers({
     worktrees,
     pendingWorktrees,
@@ -584,6 +607,7 @@ const setQuestStep = useCallback((next: QuestStep) => {
           <Sidebar
             worktrees={worktrees}
             pendingWorktrees={pendingWorktrees}
+            pendingDeletions={pendingDeletions}
             activeWorktreeId={activeWorktreeId}
             statuses={worktreeStatuses}
             pendingTools={worktreePendingTools}
@@ -632,7 +656,7 @@ const setQuestStep = useCallback((next: QuestStep) => {
         {worktrees.map((wt) => {
           const paneList = panes[wt.path]
           if (!paneList || paneList.length === 0) return null
-          const isVisible = !showNewWorktree && !showActivity && !showCleanup && !showCommandCenter && wt.path === activeWorktreeId
+          const isVisible = !showNewWorktree && !showActivity && !showCleanup && !showCommandCenter && wt.path === activeWorktreeId && !pendingDeletionByPath[wt.path]
           return (
             <div
               key={wt.path}
@@ -730,6 +754,12 @@ const setQuestStep = useCallback((next: QuestStep) => {
             />
           )
         })()}
+        {!showNewWorktree && !showActivity && !showCleanup && !showCommandCenter && activeWorktreeId && pendingDeletionByPath[activeWorktreeId] && (
+          <DeletingWorktreeScreen
+            deletion={pendingDeletionByPath[activeWorktreeId]}
+            onDismiss={handleDismissPendingDeletion}
+          />
+        )}
         <QuestCard
           step={questStep}
           onDismiss={() => setQuestStep('done')}

src/renderer/components/CreatingWorktreeScreen.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useRef, useState } from 'react'
+import { useState } from 'react'
 import { AlertCircle, ChevronDown, ChevronRight, Terminal as TerminalIcon } from 'lucide-react'
 import type { PendingWorktree } from '../types'
+import { PendingLoader, ScriptLogViewer } from './PendingScreenParts'
 
 interface CreatingWorktreeScreenProps {
   pending: PendingWorktree
@@ -9,52 +10,6 @@ interface CreatingWorktreeScreenProps {
   onContinue: (id: string) => void
 }
 
-function Loader(): JSX.Element {
-  return (
-    <div className="claude-loader" aria-label="Creating worktree">
-      <div className="claude-loader-halo" />
-      <div className="claude-loader-pulser">
-        <div className="claude-loader-rotator">
-          <svg viewBox="0 0 56 56" width="56" height="56">
-            <defs>
-              <linearGradient id="creatingWtGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-                <stop offset="0%" stopColor="#f59e0b" />
-                <stop offset="55%" stopColor="#ef4444" />
-                <stop offset="100%" stopColor="#a855f7" />
-              </linearGradient>
-            </defs>
-            <g fill="url(#creatingWtGrad)" transform="translate(28 28)">
-              {[0, 45, 90, 135].map((deg) => (
-                <path
-                  key={deg}
-                  d="M 0 -24 Q 3 0 0 24 Q -3 0 0 -24 Z"
-                  transform={`rotate(${deg})`}
-                />
-              ))}
-            </g>
-          </svg>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function SetupLogViewer({ log }: { log: string }): JSX.Element {
-  const ref = useRef<HTMLPreElement>(null)
-  useEffect(() => {
-    const el = ref.current
-    if (el) el.scrollTop = el.scrollHeight
-  }, [log])
-  return (
-    <pre
-      ref={ref}
-      className="text-[11px] leading-snug text-muted bg-app border border-border rounded p-3 whitespace-pre-wrap break-words max-h-72 overflow-auto font-mono"
-    >
-      {log || <span className="text-faint">Waiting for output…</span>}
-    </pre>
-  )
-}
-
 export function CreatingWorktreeScreen({
   pending,
   onRetry,
@@ -115,7 +70,7 @@ export function CreatingWorktreeScreen({
             created successfully, but the setup command didn't exit cleanly. You
             can continue into the worktree or dismiss this screen.
           </p>
-          <SetupLogViewer log={pending.setupLog || ''} />
+          <ScriptLogViewer log={pending.setupLog || ''} />
           <div className="flex gap-2 justify-end mt-4">
             <button
               onClick={() => onDismiss(pending.id)}
@@ -139,7 +94,7 @@ export function CreatingWorktreeScreen({
 
   return (
     <div className="flex-1 min-w-0 flex flex-col items-center justify-center gap-4 p-8">
-      <Loader />
+      <PendingLoader label="Creating worktree" />
       <div className="text-sm text-muted text-center">
         {inSetup ? (
           <>
@@ -161,7 +116,7 @@ export function CreatingWorktreeScreen({
             <TerminalIcon size={12} />
             {logsOpen ? 'Hide setup logs' : 'Show setup logs'}
           </button>
-          {logsOpen && <SetupLogViewer log={pending.setupLog || ''} />}
+          {logsOpen && <ScriptLogViewer log={pending.setupLog || ''} />}
         </div>
       )}
     </div>