Mode: Listen for head and mode

Update the way that the FE listens for the head and mode updates.
Additionally, listen for changes in the git SHA that the head points to, updating the stacks and stack details alongside

Author: estib-vega

apps/desktop/src/components/ChromeHeader.svelte

@@ -44,7 +44,7 @@
 	const useCustomTitleBar = $derived(!($settingsStore?.ui.useNativeTitleBar ?? false));
 	const backend = inject(BACKEND);
 
-	const mode = $derived(modeService.mode({ projectId }));
+	const mode = $derived(modeService.mode(projectId));
 	const currentMode = $derived(mode.response);
 	const currentBranchName = $derived.by(() => {
 		if (currentMode?.type === 'OpenWorkspace') {

apps/desktop/src/components/NotOnGitButlerBranch.svelte

@@ -25,7 +25,7 @@
 	const [setBaseBranchTarget, targetBranchSwitch] = baseBranchService.setTarget;
 
 	const modeService = inject(MODE_SERVICE);
-	const mode = $derived(modeService.mode({ projectId }));
+	const mode = $derived(modeService.mode(projectId));
 
 	const worktreeService = inject(WORKTREE_SERVICE);
 	const changes = $derived(worktreeService.treeChanges(projectId));

apps/desktop/src/components/SnapshotCard.svelte

@@ -168,7 +168,7 @@
 	const operation = mapOperation(entry.details);
 
 	const modeService = inject(MODE_SERVICE);
-	const mode = $derived(modeService.mode({ projectId }));
+	const mode = $derived(modeService.mode(projectId));
 
 	const historyService = inject(HISTORY_SERVICE);
 	const snapshotDiff = $derived(historyService.snapshotDiff({ projectId, snapshotId: entry.id }));

apps/desktop/src/lib/mode/modeService.ts

@@ -32,6 +32,10 @@ interface HeadAndMode {
 	operatingMode?: Mode;
 }
 
+interface HeadSha {
+	headSha?: string;
+}
+
 export const MODE_SERVICE = new InjectionToken<ModeService>('ModeService');
 
 export class ModeService {
@@ -69,8 +73,18 @@ export class ModeService {
 		return this.api.endpoints.changesSinceInitialEditState.useQuery;
 	}
 
-	get mode() {
-		return this.api.endpoints.mode.useQuery;
+	mode(projectId: string) {
+		return this.api.endpoints.headAndMode.useQuery(
+			{ projectId },
+			{ transform: (response) => response.operatingMode }
+		);
+	}
+
+	head(projectId: string) {
+		return this.api.endpoints.headSha.useQuery(
+			{ projectId },
+			{ transform: (response) => response.headSha }
+		);
 	}
 }
 
@@ -136,7 +150,7 @@ function injectEndpoints(api: ClientState['backendApi']) {
 					unsubscribe();
 				}
 			}),
-			mode: build.query<Mode, { projectId: string }>({
+			headAndMode: build.query<HeadAndMode, { projectId: string }>({
 				extraOptions: { command: 'operating_mode' },
 				query: (args) => args,
 				providesTags: [providesList(ReduxTag.HeadMetadata)],
@@ -148,7 +162,26 @@ function injectEndpoints(api: ClientState['backendApi']) {
 					const unsubscribe = lifecycleApi.extra.backend.listen<HeadAndMode>(
 						`project://${arg.projectId}/git/head`,
 						(event) => {
-							lifecycleApi.updateCachedData(() => event.payload.operatingMode);
+							lifecycleApi.updateCachedData(() => event.payload);
+						}
+					);
+					await lifecycleApi.cacheEntryRemoved;
+					unsubscribe();
+				}
+			}),
+			headSha: build.query<HeadSha, { projectId: string }>({
+				extraOptions: { command: 'head_sha' },
+				query: (args) => args,
+				providesTags: [providesList(ReduxTag.HeadMetadata)],
+				async onCacheEntryAdded(arg, lifecycleApi) {
+					if (!hasBackendExtra(lifecycleApi.extra)) {
+						throw new Error('Redux dependency Backend not found!');
+					}
+					await lifecycleApi.cacheDataLoaded;
+					const unsubscribe = lifecycleApi.extra.backend.listen<HeadSha>(
+						`project://${arg.projectId}/git/activity`,
+						(event) => {
+							lifecycleApi.updateCachedData(() => event.payload);
 						}
 					);
 					await lifecycleApi.cacheEntryRemoved;

apps/desktop/src/lib/stacks/stackService.svelte.ts

@@ -929,10 +929,20 @@ export class StackService {
 			])
 		);
 	}
+
 	invalidateStacks() {
 		this.dispatch(this.api.util.invalidateTags([invalidatesList(ReduxTag.Stacks)]));
 	}
 
+	invalidateStacksAndDetails() {
+		this.dispatch(
+			this.api.util.invalidateTags([
+				invalidatesList(ReduxTag.Stacks),
+				invalidatesList(ReduxTag.StackDetails)
+			])
+		);
+	}
+
 	templates(projectId: string, forgeName: string) {
 		return this.api.endpoints.templates.useQuery({ projectId, forge: forgeName });
 	}

apps/desktop/src/routes/[projectId]/+layout.svelte

@@ -82,7 +82,7 @@
 	const stackService = inject(STACK_SERVICE);
 	const worktreeService = inject(WORKTREE_SERVICE);
 
-	const modeQuery = $derived(modeService.mode({ projectId }));
+	const modeQuery = $derived(modeService.mode(projectId));
 	const mode = $derived(modeQuery.response);
 
 	// Invalidate stacks when switching branches outside workspace
@@ -214,6 +214,16 @@
 		stackService.stackDetailsUpdateListener(projectId);
 	});
 
+	const headResponse = $derived(modeService.head(projectId));
+	const head = $derived(headResponse.response);
+
+	// If the head changes, invalidate stacks and details
+	$effect(() => {
+		if (head) {
+			stackService.invalidateStacksAndDetails();
+		}
+	});
+
 	// =============================================================================
 	// AUTO-REFRESH & SYNCHRONIZATION
 	// =============================================================================

apps/desktop/src/routes/[projectId]/edit/+page.svelte

@@ -9,7 +9,7 @@
 	// TODO: Refactor so we don't need non-null assertion.
 	const projectId = $derived(page.params.projectId!);
 	const modeService = inject(MODE_SERVICE);
-	const mode = $derived(modeService.mode({ projectId }));
+	const mode = $derived(modeService.mode(projectId));
 
 	let editModeMetadata = $state<EditModeMetadata>();
 

apps/desktop/src/routes/[projectId]/workspace/+page.svelte

@@ -10,7 +10,7 @@
 	const modeService = inject(MODE_SERVICE);
 
 	const projectId = $derived(page.params.projectId!);
-	const mode = $derived(modeService.mode({ projectId }));
+	const mode = $derived(modeService.mode(projectId));
 	const uiState = inject(UI_STATE);
 	const stackService = inject(STACK_SERVICE);
 	const projectState = $derived(uiState.project(projectId));