Add mock Claude client support for E2E testing

Introduces a testing framework for Claude integration that allows Playwright
tests to run with deterministic, pre-recorded Claude interactions instead of
the real Claude CLI. This enables reliable, fast E2E testing of permission
flows and user interactions without requiring an actual Claude API connection.

Key components:

- Mock scenario loader (mock_scenario.rs) that reads session snapshots from
  JSON files and creates mock transports for the Claude Agent SDK
- Three initial test scenarios covering common permission flows:
  * permission-bash-echo.json - Basic Bash tool approval
  * permission-wildcard-test.json - Wildcard permission scoping
  * ask-user-question.json - AskUserQuestion tool interaction
- Integration in session.rs via `testing` feature flag and CLAUDE_MOCK_SCENARIO
  environment variable
- E2E test suite (claudePermissions.spec.ts) demonstrating permission approval
  UI interactions
- Improved test stability with process cleanup and RUST_LOG passthrough

The mock scenarios use the SDK's SessionSnapshot format and handle permission
callback timing automatically - when a control_request appears in the scenario,
subsequent messages are held until the SDK responds with control_response.

Each test specifies its own scenario by passing CLAUDE_MOCK_SCENARIO to
startGitButler(), which spawns a fresh but-server process with that env
var.

Author: mtsgrd

Cargo.lock

@@ -327,6 +327,7 @@
 						/>
 						{#if !$codegenDisabled && first && codegenQuery?.response?.length === 0}
 							<Button
+								testId={TestId.BranchHeaderContextMenu_StartCodegenAgent}
 								icon="ai-small"
 								style="gray"
 								size="tag"

apps/desktop/src/components/BranchList.svelte

@@ -319,13 +319,21 @@
 
 	let mcpConfigModal = $state<CodegenMcpConfigModal>();
 
-	const mcpConfigQuery = $derived(claudeCodeService.mcpConfig({ projectId }));
-	const isStackActiveQuery = $derived(claudeCodeService.isStackActive(projectId, stackId));
+	const mcpConfigQuery = $derived(claudeCodeService.mcpConfig({ projectId: stableProjectId }));
+	const isStackActiveQuery = $derived(
+		claudeCodeService.isStackActive(stableProjectId, stableStackId)
+	);
 	const isStackActive = $derived(isStackActiveQuery?.response || false);
-	const events = $derived(claudeCodeService.messages({ projectId, stackId }));
-	const sessionId = $derived(rulesService.aiSessionId(projectId, stackId));
-	const hasRulesToClear = $derived(rulesService.hasRulesToClear(projectId, stackId));
-	const permissionRequests = $derived(claudeCodeService.permissionRequests({ projectId }));
+	const events = $derived(
+		stableStackId
+			? claudeCodeService.messages({ projectId: stableProjectId, stackId: stableStackId })
+			: undefined
+	);
+	const sessionId = $derived(rulesService.aiSessionId(stableProjectId, stableStackId));
+	const hasRulesToClear = $derived(rulesService.hasRulesToClear(stableProjectId, stableStackId));
+	const permissionRequests = $derived(
+		claudeCodeService.permissionRequests({ projectId: stableProjectId })
+	);
 	const attachments = $derived(attachmentService.getByBranch(branchName));
 
 	const selectedThinkingLevel = $derived(projectState.thinkingLevel.current);
@@ -404,14 +412,14 @@
 >
 	<ReduxResult
 		projectId={stableProjectId}
-		result={combineResults(branchesQuery.result, hasRulesToClear.result)}
+		result={combineResults(branchesQuery.result, hasRulesToClear.result, permissionRequests.result)}
 	>
 		{#snippet loading()}
 			<div style:width="{$persistedStackWidth}rem" class="lane-skeleton">
 				<FullviewLoading />
 			</div>
 		{/snippet}
-		{#snippet children([branches, hasRulesToClear])}
+		{#snippet children([branches, hasRulesToClear, permissionRequests])}
 			<ConfigurableScrollableContainer childrenWrapHeight="100%" enableDragScroll>
 				<div
 					class="stack-view"
@@ -542,18 +550,18 @@
 				>
 					{#if stableStackId && selection?.branchName && selection?.codegen}
 						<CodegenMessages
-							projectId={stableProjectId}
-							stackId={stableStackId}
+							{projectId}
+							{stackId}
 							{laneId}
-							branchName={selection.branchName}
+							branchName={selection.branchName!}
 							onclose={onclosePreview}
 							onMcpSettings={() => {
 								mcpConfigModal?.open();
 							}}
 							{onAbort}
 							{initialPrompt}
-							events={events.response || []}
-							permissionRequests={permissionRequests.response || []}
+							events={events?.response || []}
+							permissionRequests={permissionRequests || []}
 							onSubmit={sendMessage}
 							onChange={(prompt) => messageSender?.setPrompt(prompt)}
 							sessionId={sessionId.response}

apps/desktop/src/components/StackView.svelte

@@ -10,6 +10,7 @@
 		Button,
 		Icon
 	} from '@gitbutler/ui';
+	import { TestId } from '@gitbutler/ui/utils/testIds';
 	import type { PermissionDecision } from '$lib/codegen/types';
 
 	type Props = {
@@ -91,7 +92,7 @@
 	});
 </script>
 
-<div class="tool-call">
+<div class="tool-call" data-testid={TestId.CodegenPermissionApproval}>
 	<div class="tool-call__details">
 		<div class="tool-call__header">
 			<Icon name={getToolIcon(toolCall.name)} color="var(--clr-text-3)" />
@@ -117,6 +118,7 @@
 				kind="outline"
 				icon="select-chevron"
 				shrinkable
+				testId={TestId.CodegenPermissionApproval_WildcardButton}
 				onclick={() => {
 					wildcardContextMenu?.toggle();
 				}}
@@ -145,6 +147,7 @@
 			bind:this={denyDropdownButton}
 			style="danger"
 			kind="outline"
+			testId={TestId.CodegenPermissionApproval_DenyButton}
 			onclick={async () => {
 				await onPermissionDecision(
 					toolCall.id,
@@ -192,6 +195,7 @@
 		<DropdownButton
 			bind:this={allowDropdownButton}
 			style="pop"
+			testId={TestId.CodegenPermissionApproval_AllowButton}
 			onclick={async () => {
 				await onPermissionDecision(
 					toolCall.id,

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { AsyncButton, Icon, Textbox } from '@gitbutler/ui';
+	import { TestId } from '@gitbutler/ui/utils/testIds';
 	import type { AskUserQuestion } from '$lib/codegen/types';
 
 	type Props = {
@@ -106,7 +107,7 @@
 	}
 </script>
 
-<div class="ask-user-question">
+<div class="ask-user-question" data-testid={TestId.CodegenAskUserQuestion}>
 	<div class="ask-user-question__header">
 		<Icon name="ai-small" color="var(--clr-text-3)" />
 		<span class="text-13 header-text">Claude needs your input</span>
@@ -126,6 +127,7 @@
 							type="button"
 							class="option"
 							class:selected={isOptionSelected(q.question, option.label)}
+							data-testid={TestId.CodegenAskUserQuestion_Option}
 							disabled={answered}
 							onclick={() => {
 								if (q.multiSelect) {
@@ -219,7 +221,12 @@
 				Answered
 			</span>
 		{:else}
-			<AsyncButton style="pop" disabled={!allAnswered} action={handleSubmit}>
+			<AsyncButton
+				style="pop"
+				disabled={!allAnswered}
+				testId={TestId.CodegenAskUserQuestion_SubmitButton}
+				action={handleSubmit}
+			>
 				Submit answers
 			</AsyncButton>
 		{/if}

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

@@ -17,6 +17,7 @@
 	import { showError } from '$lib/notifications/toasts';
 	import { inject } from '@gitbutler/core/context';
 	import { Tooltip, AsyncButton, RichTextEditor, FilePlugin, UpDownPlugin } from '@gitbutler/ui';
+	import { TestId } from '@gitbutler/ui/utils/testIds';
 	import { tick, type Snippet } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import type { FileSuggestionUpdate } from '@gitbutler/ui/richText/plugins/FilePlugin.svelte';
@@ -222,6 +223,7 @@
 
 	<div
 		class="text-input dialog-input"
+		data-testid={TestId.CodegenInput}
 		data-remove-from-panning
 		role="button"
 		tabindex="-1"
@@ -330,6 +332,7 @@
 							type="button"
 							class:loading
 							style="pop"
+							data-testid={TestId.CodegenInputSendButton}
 							onclick={handleSubmit}
 							aria-label="Send"
 						>

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

@@ -47,6 +47,7 @@
 
 	import VirtualList from '@gitbutler/ui/components/VirtualList.svelte';
 	import { focusable } from '@gitbutler/ui/focus/focusable';
+	import { TestId } from '@gitbutler/ui/utils/testIds';
 	import type {
 		ClaudeMessage,
 		ThinkingLevel,
@@ -409,7 +410,7 @@
 				{/snippet}
 			</PreviewHeader>
 
-			<div class="chat-container">
+			<div class="chat-container" data-testid={TestId.CodegenMessages}>
 				{#if claudeAvailable.status !== 'available' && formattedMessages.length === 0}
 					<ConfigurableScrollableContainer childrenWrapDisplay="contents">
 						<div class="no-agent-placeholder">

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

@@ -2,6 +2,7 @@
 	// import ConfigurableScrollableContainer from '$components/ConfigurableScrollableContainer.svelte';
 	import Resizer from '$components/Resizer.svelte';
 	import { focusable } from '@gitbutler/ui/focus/focusable';
+	import { TestId } from '@gitbutler/ui/utils/testIds';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
@@ -13,7 +14,12 @@
 	let sidebarViewportRef = $state<HTMLDivElement>();
 </script>
 
-<div class="sidebar" bind:this={sidebarViewportRef} use:focusable={{ vertical: true }}>
+<div
+	class="sidebar"
+	data-testid={TestId.CodegenSidebar}
+	bind:this={sidebarViewportRef}
+	use:focusable={{ vertical: true }}
+>
 	<div class="sidebar-header" use:focusable>
 		<p class="text-14 text-semibold">Current sessions</p>
 		<div class="sidebar-header-actions">

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

@@ -165,6 +165,7 @@ export function formatMessages(
 					} else if (contentBlock.type === 'tool_use') {
 						const content = contentBlock;
 
+						// Handle AskUserQuestion tool calls specially - render as a question UI
 						if (content.name === 'AskUserQuestion') {
 							const input = content.input as { questions: AskUserQuestion[] };
 							const askMessage: Message = {

apps/desktop/src/lib/codegen/messages.ts

@@ -9,6 +9,13 @@ rust-version.workspace = true
 [lib]
 doctest = false
 
+[features]
+default = []
+# Enable mock client support for E2E testing. With this feature enabled,
+# set CLAUDE_MOCK_SCENARIO env var to a scenario file path to use MockClient.
+# If the env var is not set, the real Claude CLI is used.
+testing = ["claude-agent-sdk-rs/testing"]
+
 [dependencies]
 but-core.workspace = true
 but-action.workspace = true