perf(staged): centralize branch event listeners

apps/staged/src/lib/features/branches/BranchCard.svelte

@@ -41,15 +41,13 @@
   import Spinner from '../../shared/Spinner.svelte';
   import { isSessionActive } from '../../shared/sessionStatus';
   import { deleteSessionLinkedItem } from '../../shared/deleteSessionLinkedItem';
-  import { listenToEvent } from '../../transport';
   import { subscribeDragDrop } from './dragDrop';
   import type {
     Branch,
     BranchGitState,
     BranchTimeline as BranchTimelineData,
     HashtagItem,
     ProjectRepo,
-    SessionStatusPayload,
     WorkspaceStatus,
   } from '../../types';
   import * as commands from '../../api/commands';
@@ -82,6 +80,11 @@
   import { getPreferredAgent } from '../settings/preferences.svelte';
   import { agentState, REMOTE_AGENTS } from '../agents/agent.svelte';
   import { pushStateStore } from '../../stores/pushState.svelte';
+  import {
+    onBranchGitStateUpdated,
+    onBranchSetupProgress,
+    onSessionStatusChanged,
+  } from '../../services/branchEventService';
   import type { WorktreeChangesPreview } from '../../commands';
   import type { LinkedNoteContext, NoteClickInfo } from '../sessions/noteFreshness';
 
@@ -218,22 +221,12 @@
   let setupDetail: string | null = $state(null);
 
   $effect(() => {
-    const eventNames = ['worktree-setup-progress', 'workspace-setup-progress'] as const;
-    const unlisteners = eventNames.map((eventName) =>
-      listenToEvent<{ branchId: string; phase: string; detail: string | null }>(
-        eventName,
-        (payload) => {
-          if (payload.branchId === branch.id) {
-            setupPhase = payload.phase;
-            setupDetail = payload.detail;
-          }
-        }
-      )
-    );
+    const unlisten = onBranchSetupProgress(branch.id, (payload) => {
+      setupPhase = payload.phase;
+      setupDetail = payload.detail;
+    });
 
-    return () => {
-      for (const fn of unlisteners) fn();
-    };
+    return () => unlisten();
   });
 
   // Reset setup state when provisioning completes
@@ -606,71 +599,63 @@
   $effect(() => {
     const branchId = branch.id;
 
-    const unlistenStatus = listenToEvent<SessionStatusPayload>(
-      'session-status-changed',
-      (payload) => {
-        const {
-          sessionId: eventSessionId,
-          status,
-          branchId: eventBranchId,
-          isAutoReview,
-        } = payload;
-        if (status === 'completed' || status === 'error' || status === 'cancelled') {
-          // If this is the auto review session completing, just clear tracking
-          if (eventSessionId === sessionMgr.autoReviewSessionId) {
-            sessionMgr.autoReviewSessionId = null;
-            return;
-          }
+    const unlistenStatus = onSessionStatusChanged((payload) => {
+      const { sessionId: eventSessionId, status, branchId: eventBranchId, isAutoReview } = payload;
+      if (status === 'completed' || status === 'error' || status === 'cancelled') {
+        // If this is the auto review session completing, just clear tracking
+        if (eventSessionId === sessionMgr.autoReviewSessionId) {
+          sessionMgr.autoReviewSessionId = null;
+          return;
+        }
 
-          // Push/force-push session tracking lives in pushStateStore and is
-          // cleared centrally by sessionStatusListener.handlePushCompletion.
+        // Push/force-push session tracking lives in pushStateStore and is
+        // cleared centrally by sessionStatusListener.handlePushCompletion.
 
-          // Skip normal completion handling for any auto review session
-          if (isAutoReview) {
-            return;
-          }
+        // Skip normal completion handling for any auto review session
+        if (isAutoReview) {
+          return;
+        }
 
-          // Skip reload for the adopted auto-review session completing —
-          // the timeline was already updated optimistically during adoption.
-          if (eventSessionId === sessionMgr.adoptedSessionId) {
-            sessionMgr.adoptedSessionId = null;
-            return;
-          }
+        // Skip reload for the adopted auto-review session completing —
+        // the timeline was already updated optimistically during adoption.
+        if (eventSessionId === sessionMgr.adoptedSessionId) {
+          sessionMgr.adoptedSessionId = null;
+          return;
+        }
 
-          // Only reload if this session belongs to our branch
-          if (eventBranchId && eventBranchId !== branchId) return;
+        // Only reload if this session belongs to our branch
+        if (eventBranchId && eventBranchId !== branchId) return;
 
-          commands.invalidateBranchTimeline(branch.id);
+        commands.invalidateBranchTimeline(branch.id);
+        loadTimeline();
+        // Handle PR session completion
+        if (prButton && eventSessionId === prButton.getPrSessionId()) {
+          prButton.handlePrSessionComplete(status);
+        }
+        // Handle push session completion
+        if (prButton && eventSessionId === prButton.getPushSessionId()) {
+          prButton.handlePushSessionComplete(status);
+        }
+      } else if (status === 'running' && eventBranchId === branchId) {
+        // Track auto review sessions started by the backend
+        if (isAutoReview) {
+          sessionMgr.autoReviewSessionId = eventSessionId;
+          commands.findFreshAutoReview(branchId).then((review) => {
+            if (review) {
+              sessionMgr.autoReviewId = review.id;
+            }
+          });
+        }
+        // Refresh the timeline so the pending note/commit stub appears immediately.
+        // Skip if a session start is in-flight (pending item has no sessionId yet),
+        // because startBranchSessionWithPendingItem will call loadTimeline after
+        // it gets the sessionId — otherwise pruning can't match the pending item
+        // and both the pending and real items briefly render simultaneously.
+        if (!isAutoReview && !sessionMgr.isSessionStartPending) {
           loadTimeline();
-          // Handle PR session completion
-          if (prButton && eventSessionId === prButton.getPrSessionId()) {
-            prButton.handlePrSessionComplete(status);
-          }
-          // Handle push session completion
-          if (prButton && eventSessionId === prButton.getPushSessionId()) {
-            prButton.handlePushSessionComplete(status);
-          }
-        } else if (status === 'running' && eventBranchId === branchId) {
-          // Track auto review sessions started by the backend
-          if (isAutoReview) {
-            sessionMgr.autoReviewSessionId = eventSessionId;
-            commands.findFreshAutoReview(branchId).then((review) => {
-              if (review) {
-                sessionMgr.autoReviewId = review.id;
-              }
-            });
-          }
-          // Refresh the timeline so the pending note/commit stub appears immediately.
-          // Skip if a session start is in-flight (pending item has no sessionId yet),
-          // because startBranchSessionWithPendingItem will call loadTimeline after
-          // it gets the sessionId — otherwise pruning can't match the pending item
-          // and both the pending and real items briefly render simultaneously.
-          if (!isAutoReview && !sessionMgr.isSessionStartPending) {
-            loadTimeline();
-          }
         }
       }
-    );
+    });
 
     return () => {
       unlistenStatus();
@@ -682,16 +667,12 @@
   $effect(() => {
     const branchId = branch.id;
 
-    const unlistenGitState = listenToEvent<{ branchId: string; gitState: BranchGitState }>(
-      'git-state-updated',
-      (payload) => {
-        if (payload.branchId !== branchId) return;
-        if (timeline) {
-          timeline = { ...timeline, gitState: payload.gitState };
-        }
-        refreshingGitState = false;
+    const unlistenGitState = onBranchGitStateUpdated(branchId, (payload) => {
+      if (timeline) {
+        timeline = { ...timeline, gitState: payload.gitState };
       }
-    );
+      refreshingGitState = false;
+    });
 
     return () => {
       unlistenGitState();

apps/staged/src/lib/features/branches/BranchCardActionsBar.svelte

@@ -26,7 +26,7 @@
   import Spinner from '../../shared/Spinner.svelte';
   import SineWave from '../../shared/SineWave.svelte';
   import ActionOutputModal from '../actions/ActionOutputModal.svelte';
-  import { listenToEvent, type UnlistenFn } from '../../transport';
+  import type { UnlistenFn } from '../../transport';
   import type { Branch, ProjectRepo } from '../../types';
   import * as commands from '../../api/commands';
   import type { ProjectAction } from '../../api/commands';
@@ -36,7 +36,6 @@
     clearActionExecution,
     stopBranchAction,
     getRunPhase,
-    listenToRunPhaseChanged,
     listenToRepoActionsDetection,
     type ActionStatusEvent,
     type ActionType,
@@ -54,6 +53,7 @@
   import { bloxEnv } from '../../stores/bloxEnv.svelte';
   import { getPreferredAgent } from '../settings/preferences.svelte';
   import { agentState } from '../agents/agent.svelte';
+  import { onBranchActionStatus, onBranchRunPhaseChanged } from '../../services/branchEventService';
   import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
   import { Button } from '$lib/components/ui/button';
   import * as Tooltip from '$lib/components/ui/tooltip';
@@ -226,12 +226,7 @@
   $effect(() => {
     const branchId = branch.id;
 
-    const unlistenActionStatus = listenToEvent<ActionStatusEvent>('action_status', (payload) => {
-      // Only process events for this branch
-      if (payload.branchId !== branchId) {
-        return;
-      }
-
+    const unlistenActionStatus = onBranchActionStatus(branchId, (payload: ActionStatusEvent) => {
       const existingIndex = runningActions.findIndex((a) => a.executionId === payload.executionId);
 
       if (payload.status === 'running') {
@@ -299,11 +294,9 @@
       }
     });
 
-    const unlistenRunPhaseChanged = listenToRunPhaseChanged((event) => {
-      if (event.branchId === branchId) {
-        runPhases.set(event.executionId, event.phase);
-        runPhases = new Map(runPhases);
-      }
+    const unlistenRunPhaseChanged = onBranchRunPhaseChanged(branchId, (event) => {
+      runPhases.set(event.executionId, event.phase);
+      runPhases = new Map(runPhases);
     });
 
     return () => {

apps/staged/src/lib/features/branches/BranchCardPrButton.svelte

@@ -16,12 +16,10 @@
   import { Button } from '$lib/components/ui/button';
   import * as Tooltip from '$lib/components/ui/tooltip';
   import { minuteNow, secondNow } from '../../shared/relativeTime.svelte';
-  import { listenToEvent } from '../../transport';
   import type {
     Branch,
     BranchTimeline as BranchTimelineData,
     PrFailedCheck,
-    PrStatusChangedEvent,
     Session,
   } from '../../types';
   import * as commands from '../../api/commands';
@@ -39,6 +37,10 @@
   import { prStateStore, type PrState } from '../../stores/prState.svelte';
   import { pushStateStore, type PushState } from '../../stores/pushState.svelte';
   import * as prPollingService from '../../services/prPollingService';
+  import {
+    onBranchPrStatusChanged,
+    onBranchPrStatusCleared,
+  } from '../../services/branchEventService';
 
   interface Props {
     branch: Branch;
@@ -171,39 +173,35 @@
   $effect(() => {
     const branchId = branch.id;
 
-    const unlistenStatus = listenToEvent<PrStatusChangedEvent>('pr-status-changed', (payload) => {
-      if (payload.branchId === branchId) {
-        prStatusState = payload.prState;
-        prStatusChecks = payload.prChecksStatus;
-        prStatusReviewDecision = payload.prReviewDecision;
-        prStatusMergeable = payload.prMergeable;
-        prStatusDraft = payload.prDraft;
-        prHeadSha = payload.prHeadSha;
-        prFetchedAt = payload.prFetchedAt;
-        failedChecks = payload.failedChecks ?? [];
-        prStatusCleared = false;
-        // Update the polling service with the new checks status
-        prPollingService.updateChecksStatus(
-          branchId,
-          branch.projectId,
-          payload.prChecksStatus === 'PENDING'
-        );
-      }
+    const unlistenStatus = onBranchPrStatusChanged(branchId, (payload) => {
+      prStatusState = payload.prState;
+      prStatusChecks = payload.prChecksStatus;
+      prStatusReviewDecision = payload.prReviewDecision;
+      prStatusMergeable = payload.prMergeable;
+      prStatusDraft = payload.prDraft;
+      prHeadSha = payload.prHeadSha;
+      prFetchedAt = payload.prFetchedAt;
+      failedChecks = payload.failedChecks ?? [];
+      prStatusCleared = false;
+      // Update the polling service with the new checks status
+      prPollingService.updateChecksStatus(
+        branchId,
+        branch.projectId,
+        payload.prChecksStatus === 'PENDING'
+      );
     });
 
-    const unlistenCleared = listenToEvent<string>('pr-status-cleared', (clearedBranchId) => {
-      if (clearedBranchId === branchId) {
-        prStatusState = null;
-        prStatusChecks = null;
-        prStatusReviewDecision = null;
-        prStatusMergeable = null;
-        prStatusDraft = null;
-        prHeadSha = null;
-        prFetchedAt = null;
-        failedChecks = [];
-        prStatusCleared = true;
-        prPollingService.updateChecksStatus(branchId, branch.projectId, false);
-      }
+    const unlistenCleared = onBranchPrStatusCleared(branchId, () => {
+      prStatusState = null;
+      prStatusChecks = null;
+      prStatusReviewDecision = null;
+      prStatusMergeable = null;
+      prStatusDraft = null;
+      prHeadSha = null;
+      prFetchedAt = null;
+      failedChecks = [];
+      prStatusCleared = true;
+      prPollingService.updateChecksStatus(branchId, branch.projectId, false);
     });
 
     return () => {

apps/staged/src/lib/features/branches/ParentBranchCommitsHover.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
   import { onDestroy, tick } from 'svelte';
   import type { Snippet } from 'svelte';
-  import { listenToEvent } from '../../transport';
   import { listParentBranchCommits, type ParentBranchCommit } from '../../commands';
   import { formatRelativeTimeSeconds } from '../../shared/relativeTime.svelte';
   import * as Tooltip from '$lib/components/ui/tooltip';
-  import type { BranchGitState } from '../../types';
+  import { onBranchGitStateUpdated } from '../../services/branchEventService';
 
   interface Props {
     branchId: string;
@@ -131,17 +130,13 @@
   }
 
   $effect(() => {
-    const unlisten = listenToEvent<{ branchId: string; gitState: BranchGitState }>(
-      'git-state-updated',
-      (payload) => {
-        if (payload.branchId !== branchId) return;
-        commits = null;
-        loadVersion++;
-        if (open) {
-          void loadCommits();
-        }
+    const unlisten = onBranchGitStateUpdated(branchId, () => {
+      commits = null;
+      loadVersion++;
+      if (open) {
+        void loadCommits();
       }
-    );
+    });
     return () => unlisten();
   });