Merge pull request #10580 from gitbutlerapp/message-queue

Boiler plate & useSendMessage

Author: Caleb-T-Owens

apps/desktop/src/components/codegen/CodegenInput.svelte

@@ -66,7 +66,7 @@
 		if (e.key === 'Enter' && !e.shiftKey) {
 			e.preventDefault();
 
-			if (loading || value.trim().length === 0) return;
+			if (value.trim().length === 0) return;
 
 			await handleSubmit();
 		}
@@ -125,15 +125,14 @@
 					<button
 						class="send-button"
 						type="button"
-						disabled={loading || value.trim().length === 0}
+						disabled={value.trim().length === 0}
 						class:loading
 						style="pop"
 						onclick={handleSubmit}
 						aria-label="Send"
 					>
 						<svg
 							class="circle-icon"
-							class:spinner={loading}
 							viewBox="0 0 18 18"
 							fill="none"
 							xmlns="http://www.w3.org/2000/svg"
@@ -149,7 +148,6 @@
 
 						<svg
 							class="arrow-icon"
-							class:spinner={loading}
 							viewBox="0 0 16 16"
 							fill="none"
 							xmlns="http://www.w3.org/2000/svg"

apps/desktop/src/components/codegen/CodegenPage.svelte

@@ -30,6 +30,8 @@
 	import vibecodingSvg from '$lib/assets/illustrations/vibecoding.svg?raw';
 	import { useAvailabilityChecking } from '$lib/codegen/availabilityChecking.svelte';
 	import { CLAUDE_CODE_SERVICE } from '$lib/codegen/claude';
+	import { useSendMessage } from '$lib/codegen/messageQueue.svelte';
+	import { messageQueueSelectors, messageQueueSlice } from '$lib/codegen/messageQueueSlice';
 	import {
 		currentStatus,
 		formatMessages,
@@ -49,15 +51,16 @@
 	import { RULES_SERVICE } from '$lib/rules/rulesService.svelte';
 	import { createWorktreeSelection } from '$lib/selection/key';
 	import { SETTINGS } from '$lib/settings/userSettings';
-	import { CODEGEN_ANALYTICS } from '$lib/soup/codegenAnalytics';
 	import { pushStatusToColor, pushStatusToIcon } from '$lib/stacks/stack';
 	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
+	import { CLIENT_STATE } from '$lib/state/clientState.svelte';
 	import { combineResults } from '$lib/state/helpers';
 	import { UI_STATE } from '$lib/state/uiState.svelte';
 	import { USER } from '$lib/user/user';
 	import { createBranchRef } from '$lib/utils/branch';
 	import { getEditorUri, URL_SERVICE } from '$lib/utils/url';
 	import { inject } from '@gitbutler/core/context';
+	import { reactive } from '@gitbutler/shared/reactiveUtils.svelte';
 	import {
 		Badge,
 		Button,
@@ -89,12 +92,12 @@
 	const stackService = inject(STACK_SERVICE);
 	const projectsService = inject(PROJECTS_SERVICE);
 	const rulesService = inject(RULES_SERVICE);
-	const codegenAnalytics = inject(CODEGEN_ANALYTICS);
 	const uiState = inject(UI_STATE);
 	const user = inject(USER);
 	const urlService = inject(URL_SERVICE);
 	const userSettings = inject(SETTINGS);
 	const settingsService = inject(SETTINGS_SERVICE);
+	const clientState = inject(CLIENT_STATE);
 	const claudeSettings = $derived($settingsService?.claude);
 
 	const stacks = $derived(stackService.stacks(projectId));
@@ -108,7 +111,6 @@
 			aiRules.some((rule) => rule.action.subject.subject.target.subject === stack.id)
 		);
 	});
-	const [sendClaudeMessage] = claudeCodeService.sendMessage;
 	const mcpConfig = $derived(claudeCodeService.mcpConfig({ projectId }));
 
 	let settingsModal: ClaudeCodeSettingsModal | undefined;
@@ -164,14 +166,6 @@
 		selectedBranch?.stackId ? uiState.lane(selectedBranch.stackId) : undefined
 	);
 
-	const prompt = $derived(
-		selectedBranch ? uiState.lane(selectedBranch.stackId).prompt.current : ''
-	);
-	function setPrompt(prompt: string) {
-		if (!selectedBranch) return;
-		uiState.lane(selectedBranch.stackId).prompt.set(prompt);
-	}
-
 	// File list data
 	const branchChanges = $derived(
 		selectedBranch
@@ -216,64 +210,6 @@
 		}
 	}
 
-	async function sendMessage() {
-		if (!selectedBranch) return;
-		if (!prompt) return;
-
-		if (prompt.startsWith('/compact')) {
-			compactContext();
-			return;
-		}
-
-		// Handle /add-dir command
-		if (prompt.startsWith('/add-dir ')) {
-			const path = prompt.slice('/add-dir '.length).trim();
-			if (path) {
-				const isValid = await claudeCodeService.verifyPath({ projectId, path });
-				if (isValid) {
-					laneState?.addedDirs.add(path);
-					chipToasts.success(`Added directory: ${path}`);
-				} else {
-					chipToasts.error(`Invalid directory path: ${path}`);
-				}
-			}
-			setPrompt('');
-			return;
-		}
-
-		if (prompt.startsWith('/')) {
-			chipToasts.warning('Slash commands are not yet supported');
-			setPrompt('');
-			return;
-		}
-
-		// Await analytics data before sending message
-		const analyticsProperties = await codegenAnalytics.getCodegenProperties({
-			projectId,
-			stackId: selectedBranch.stackId,
-			message: prompt,
-			thinkingLevel: selectedThinkingLevel,
-			model: selectedModel
-		});
-
-		const promise = sendClaudeMessage(
-			{
-				projectId,
-				stackId: selectedBranch.stackId,
-				message: prompt,
-				thinkingLevel: selectedThinkingLevel,
-				model: selectedModel,
-				permissionMode: selectedPermissionMode,
-				disabledMcpServers: uiState.lane(selectedBranch.stackId).disabledMcpServers.current,
-				addDirs: laneState?.addedDirs.current || []
-			},
-			{ properties: analyticsProperties }
-		);
-
-		setPrompt('');
-		await promise;
-	}
-
 	async function onApproval(id: string) {
 		await claudeCodeService.updatePermissionRequest({ projectId, requestId: id, approval: true });
 	}
@@ -343,6 +279,14 @@
 		}
 	}
 
+	const { prompt, setPrompt, sendMessage } = useSendMessage({
+		projectId: reactive(() => projectId),
+		selectedBranch: reactive(() => selectedBranch),
+		thinkingLevel: reactive(() => selectedThinkingLevel),
+		model: reactive(() => selectedModel),
+		permissionMode: reactive(() => selectedPermissionMode)
+	});
+
 	function insertTemplate(template: string) {
 		setPrompt(prompt + (prompt ? '\n\n' : '') + template);
 		templateContextMenu?.close();
@@ -454,6 +398,17 @@
 			cyclePermissionMode();
 		}
 	}
+
+	const queue = $derived(
+		messageQueueSelectors
+			.selectAll(clientState.messageQueue)
+			.find(
+				(q) =>
+					q.head === selectedBranch?.head &&
+					q.stackId === selectedBranch?.stackId &&
+					q.projectId === projectId
+			)
+	);
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
@@ -668,7 +623,7 @@
 							{#if claudeAvailable.response?.status === 'available'}
 								{@const status = currentStatus(events, isStackActive)}
 								<CodegenInput
-									value={prompt}
+									value={prompt.current}
 									onChange={(prompt) => setPrompt(prompt)}
 									loading={['running', 'compacting'].includes(status)}
 									compacting={status === 'compacting'}
@@ -753,8 +708,9 @@
 
 {#snippet rightSidebar(events: ClaudeMessage[])}
 	{@const addedDirs = laneState?.addedDirs.current || []}
+	{@const queueLength = queue?.messages.length || 0}
 	<div class="right-sidebar" bind:this={rightSidebarRef}>
-		{#if !branchChanges || !selectedBranch || (branchChanges.response && branchChanges.response.changes.length === 0 && getTodos(events).length === 0 && addedDirs.length === 0)}
+		{#if !branchChanges || !selectedBranch || (branchChanges.response && branchChanges.response.changes.length === 0 && getTodos(events).length === 0 && addedDirs.length === 0 && queueLength === 0)}
 			<div class="right-sidebar__placeholder">
 				<EmptyStatePlaceholder
 					image={filesAndChecksSvg}
@@ -773,7 +729,7 @@
 				<ReduxResult result={branchChanges.result} {projectId}>
 					{#snippet children({ changes }, { projectId })}
 						<Drawer
-							bottomBorder={todos.length > 0 || addedDirs.length > 0}
+							bottomBorder={todos.length > 0 || addedDirs.length > 0 || queueLength > 0}
 							grow
 							defaultCollapsed={todos.length > 0}
 							notFoldable
@@ -811,7 +767,11 @@
 			{/if}
 
 			{#if todos.length > 0}
-				<Drawer defaultCollapsed={false} noshrink>
+				<Drawer
+					defaultCollapsed={false}
+					noshrink
+					bottomBorder={addedDirs.length > 0 || queueLength > 0}
+				>
 					{#snippet header()}
 						<h4 class="text-14 text-semibold truncate">Todos</h4>
 						<Badge>{todos.length}</Badge>
@@ -826,7 +786,7 @@
 			{/if}
 
 			{#if addedDirs.length > 0}
-				<Drawer defaultCollapsed={false} noshrink>
+				<Drawer defaultCollapsed={false} noshrink bottomBorder={queueLength > 0}>
 					{#snippet header()}
 						<h4 class="text-14 text-semibold truncate">Added Directories</h4>
 						<Badge>{addedDirs.length}</Badge>
@@ -853,6 +813,38 @@
 					</div>
 				</Drawer>
 			{/if}
+
+			{#if queue && queue.messages.length > 0}
+				<Drawer defaultCollapsed={false} noshrink>
+					{#snippet header()}
+						<h4 class="text-14 text-semibold truncate">Queued Message</h4>
+					{/snippet}
+
+					<div class="right-sidebar-list right-sidebar-list--small-gap">
+						{#each queue.messages as message}
+							<div class="message-queue-item">
+								<span class="text-13 grow-1 message-queue-item-text">{message.prompt}</span>
+								<Button
+									kind="ghost"
+									icon="bin"
+									shrinkable
+									onclick={() => {
+										if (selectedBranch) {
+											clientState.dispatch(
+												messageQueueSlice.actions.upsert({
+													...queue,
+													messages: queue.messages.filter((m) => m !== message)
+												})
+											);
+										}
+									}}
+									tooltip="Remove prompt from queue"
+								/>
+							</div>
+						{/each}
+					</div>
+				</Drawer>
+			{/if}
 		{/if}
 
 		<Resizer
@@ -926,7 +918,7 @@
 			projectId,
 			stackId
 		})}
-		{@const sidebarIsStackActive = claudeCodeService.isStackActive(projectId, stackId)}
+		{@const isActive = claudeCodeService.isStackActive(projectId, stackId)}
 		{@const rule = rulesService.aiRuleForStack({ projectId, stackId })}
 
 		<ReduxResult
@@ -935,7 +927,7 @@
 				commits.result,
 				branchDetails.result,
 				events.result,
-				sidebarIsStackActive.result,
+				isActive.result,
 				rule.result
 			)}
 			{projectId}
@@ -1054,7 +1046,7 @@
 	<div class="not-available">
 		<DecorativeSplitView hideDetails img={vibecodingSvg}>
 			<div class="not-available__content">
-				<h1 class="text-serif-42">Set up <i>Claude Code</i></h1>
+				<h1 class="text-serif-40">Set up <i>Claude Code</i></h1>
 				<ClaudeCheck
 					claudeExecutable={claudeExecutable.current}
 					recheckedAvailability={recheckedAvailability.current}
@@ -1293,6 +1285,18 @@
 		justify-content: space-between;
 	}
 
+	.message-queue-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.message-queue-item-text {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
 	.right-sidebar-list--small-gap {
 		gap: 4px;
 	}

apps/desktop/src/components/codegen/CodegenSidebarEntry.svelte

@@ -153,8 +153,6 @@
 	<div class="vibe-icon {status}">
 		{#if status === 'running'}
 			<Icon name="spinner" />
-		{:else if status === 'completed'}
-			<Icon name="success" />
 		{/if}
 	</div>
 {/snippet}
@@ -293,10 +291,6 @@
 
 	.vibe-icon {
 		display: flex;
-
-		&.completed {
-			color: var(--clr-theme-succ-element);
-		}
 	}
 
 	.active-indicator {