Merge pull request #9901 from gitbutlerapp/permissions-for-claude-code

Permissions for claude code

Author: Caleb-T-Owens

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

@@ -6,8 +6,10 @@
 
 	type Props = {
 		message: Message;
+		onApproval?: (id: string) => Promise<void>;
+		onRejection?: (id: string) => Promise<void>;
 	};
-	const { message }: Props = $props();
+	const { message, onApproval, onRejection }: Props = $props();
 
 	let toolCallsExpanded = $state(false);
 
@@ -74,6 +76,17 @@
 					</div>
 				{/if}
 			{/if}
+			{#if message.toolCallsPendingApproval.length > 0}
+				{#each message.toolCallsPendingApproval as toolCall}
+					<CodegenToolCall
+						{toolCall}
+						requiresApproval={{
+							onApproval: async (id) => await onApproval?.(id),
+							onRejection: async (id) => await onRejection?.(id)
+						}}
+					/>
+				{/each}
+			{/if}
 		{/snippet}
 	</CodegenMessage>
 {/if}

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

@@ -27,6 +27,7 @@
 	const stackService = inject(STACK_SERVICE);
 
 	const stacks = $derived(stackService.stacks(projectId));
+	const permissionRequests = $derived(claudeCodeService.permissionRequests({ projectId }));
 
 	let message = $state('');
 	let selectedBranch = $state<{ stackId: string; head: string }>();
@@ -77,6 +78,13 @@
 		await promise;
 	}
 
+	async function onApproval(id: string) {
+		await claudeCodeService.updatePermissionRequest({ projectId, requestId: id, approval: true });
+	}
+	async function onRejection(id: string) {
+		await claudeCodeService.updatePermissionRequest({ projectId, requestId: id, approval: false });
+	}
+
 	const events = $derived(
 		claudeCodeService.messages({ projectId, stackId: selectedBranch?.stackId || '' })
 	);
@@ -104,10 +112,13 @@
 					<Button disabled kind="ghost" size="tag" icon="kebab" />
 				{/snippet}
 				{#snippet messages()}
-					<ReduxResult result={events?.current} {projectId}>
-						{#snippet children(events, { projectId: _projectId })}
-							{#each formatMessages(events) as message}
-								<CodegenClaudeMessage {message} />
+					<ReduxResult
+						result={combineResults(events?.current, permissionRequests.current)}
+						{projectId}
+					>
+						{#snippet children([events, permissionRequests], { projectId: _projectId })}
+							{#each formatMessages(events, permissionRequests) as message}
+								<CodegenClaudeMessage {message} {onApproval} {onRejection} />
 							{/each}
 							{@const lastUserMessageSent = lastUserMessageSentAt(events)}
 							{#if currentStatus(events) === 'running' && lastUserMessageSent}

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

@@ -1,13 +1,19 @@
 <script lang="ts">
 	import { toolCallLoading, type ToolCall } from '$lib/codegen/messages';
-	import { Button, Icon, Markdown } from '@gitbutler/ui';
+	import { AsyncButton, Button, Icon, Markdown } from '@gitbutler/ui';
+
+	export type RequiresApproval = {
+		onApproval: (id: string) => Promise<void>;
+		onRejection: (id: string) => Promise<void>;
+	};
 
 	type Props = {
 		toolCall: ToolCall;
+		requiresApproval?: RequiresApproval;
 	};
-	const { toolCall }: Props = $props();
+	const { toolCall, requiresApproval = undefined }: Props = $props();
 
-	let expanded = $state(false);
+	let expanded = $derived(!!requiresApproval);
 </script>
 
 <div class="tool-call">
@@ -18,9 +24,25 @@
 			size="tag"
 			onclick={() => (expanded = !expanded)}
 		/>
-		<p>{toolCall.name}</p>
-		{#if toolCallLoading(toolCall)}
+		{#if requiresApproval}
+			<div class="flex items-center justify-between grow gap-12">
+				<p>{toolCall.name} requires approval</p>
+				<div class="flex gap-8">
+					<AsyncButton
+						kind="outline"
+						action={async () => await requiresApproval.onRejection(toolCall.id)}>Reject</AsyncButton
+					>
+					<AsyncButton
+						style="pop"
+						action={async () => await requiresApproval.onApproval(toolCall.id)}>Approve</AsyncButton
+					>
+				</div>
+			</div>
+		{:else if toolCallLoading(toolCall)}
+			<p>{toolCall.name}</p>
 			<Icon name="spinner" />
+		{:else}
+			<p>{toolCall.name}</p>
 		{/if}
 	</div>
 	{#if expanded}

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

@@ -1,6 +1,10 @@
-import { type ClaudeMessage, type ClaudeSessionDetails } from '$lib/codegen/types';
+import {
+	type ClaudeMessage,
+	type ClaudePermissionRequest,
+	type ClaudeSessionDetails
+} from '$lib/codegen/types';
 import { hasBackendExtra } from '$lib/state/backendQuery';
-import { providesItem, ReduxTag } from '$lib/state/tags';
+import { invalidatesItem, providesItem, ReduxTag } from '$lib/state/tags';
 import { InjectionToken } from '@gitbutler/shared/context';
 import type { ClientState } from '$lib/state/clientState.svelte';
 
@@ -21,6 +25,14 @@ export class ClaudeCodeService {
 		return this.api.endpoints.getMessages.useQuery;
 	}
 
+	get permissionRequests() {
+		return this.api.endpoints.getPermissionRequests.useQuery;
+	}
+
+	get updatePermissionRequest() {
+		return this.api.endpoints.updatePermissionRequest.mutate;
+	}
+
 	sessionDetails(projectId: string, sessionId: string) {
 		return this.api.endpoints.getSessionDetails.useQuery({
 			projectId,
@@ -79,6 +91,49 @@ function injectEndpoints(api: ClientState['backendApi']) {
 					await lifecycleApi.cacheEntryRemoved;
 					unsubscribe();
 				}
+			}),
+			getPermissionRequests: build.query<ClaudePermissionRequest[], { projectId: string }>({
+				extraOptions: { command: 'claude_list_permission_requests' },
+				query: (args) => args,
+				providesTags: (_result, _error, args) => [
+					...providesItem(ReduxTag.ClaudePermissionRequests, args.projectId)
+				],
+				async onCacheEntryAdded(arg, lifecycleApi) {
+					if (!hasBackendExtra(lifecycleApi.extra)) {
+						throw new Error('Redux dependency Backend not found!');
+					}
+					const { listen, invoke } = lifecycleApi.extra.backend;
+					await lifecycleApi.cacheDataLoaded;
+					const unsubscribe = listen<unknown>(
+						`project://${arg.projectId}/claude-permission-requests`,
+						async (_) => {
+							const value = await invoke<ClaudePermissionRequest[]>(
+								'claude_list_permission_requests',
+								{ projectId: arg.projectId }
+							);
+							lifecycleApi.updateCachedData(() => value);
+						}
+					);
+					await lifecycleApi.cacheEntryRemoved;
+					unsubscribe();
+				}
+			}),
+			updatePermissionRequest: build.mutation<
+				undefined,
+				{
+					projectId: string;
+					requestId: string;
+					approval: boolean;
+				}
+			>({
+				extraOptions: {
+					command: 'claude_update_permission_request',
+					actionName: 'Update Permission Request'
+				},
+				query: (args) => args,
+				invalidatesTags: (_result, _error, args) => [
+					invalidatesItem(ReduxTag.ClaudePermissionRequests, args.projectId)
+				]
 			})
 		})
 	});

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

@@ -3,7 +3,7 @@
  */
 
 import { isDefined } from '@gitbutler/ui/utils/typeguards';
-import type { ClaudeMessage, ClaudeStatus } from '$lib/codegen/types';
+import type { ClaudeMessage, ClaudePermissionRequest, ClaudeStatus } from '$lib/codegen/types';
 
 export type Message =
 	/* This is strictly only things that the real fleshy human has said */
@@ -16,6 +16,7 @@ export type Message =
 			type: 'claude';
 			message: string;
 			toolCalls: ToolCall[];
+			toolCallsPendingApproval: ToolCall[];
 	  };
 
 export type ToolCall = {
@@ -29,7 +30,15 @@ export function toolCallLoading(toolCall: ToolCall): boolean {
 	return toolCall.result === undefined;
 }
 
-export function formatMessages(events: ClaudeMessage[]): Message[] {
+export function formatMessages(
+	events: ClaudeMessage[],
+	permissionRequests: ClaudePermissionRequest[]
+): Message[] {
+	const permReqsById: Record<string, ClaudePermissionRequest> = {};
+	for (const request of permissionRequests) {
+		permReqsById[request.id] = request;
+	}
+
 	const out: Message[] = [];
 	// A mapping to better handle tool call responses when they come in.
 	const toolCalls: Record<string, ToolCall> = {};
@@ -41,6 +50,7 @@ export function formatMessages(events: ClaudeMessage[]): Message[] {
 				type: 'user',
 				message: event.content.subject.message
 			});
+			lastAssistantMessage = undefined;
 		} else if (event.content.type === 'claudeOutput') {
 			const subject = event.content.subject;
 			// We've either triggered a tool call, or sent a message
@@ -50,7 +60,8 @@ export function formatMessages(events: ClaudeMessage[]): Message[] {
 					lastAssistantMessage = {
 						type: 'claude',
 						message: message.content[0]!.text,
-						toolCalls: []
+						toolCalls: [],
+						toolCallsPendingApproval: []
 					};
 					out.push(lastAssistantMessage);
 				} else if (message.content[0]!.type === 'tool_use') {
@@ -65,11 +76,18 @@ export function formatMessages(events: ClaudeMessage[]): Message[] {
 						lastAssistantMessage = {
 							type: 'claude',
 							message: '',
-							toolCalls: []
+							toolCalls: [],
+							toolCallsPendingApproval: []
 						};
 						out.push(lastAssistantMessage);
 					}
-					lastAssistantMessage.toolCalls.push(toolCall);
+
+					const permReq = permReqsById[toolCall.id];
+					if (permReq && !isDefined(permReq.approved)) {
+						lastAssistantMessage.toolCallsPendingApproval.push(toolCall);
+					} else {
+						lastAssistantMessage.toolCalls.push(toolCall);
+					}
 					toolCalls[toolCall.id] = toolCall;
 				}
 			} else if (subject.type === 'user') {

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

@@ -120,3 +120,18 @@ export function sessionMessage(sessionDetails: ClaudeSessionDetails): string | u
 }
 
 export type ClaudeStatus = 'disabled' | 'enabled' | 'running' | 'completed';
+
+export type ClaudePermissionRequest = {
+	/** Maps to the tool_use_id from the MCP request */
+	id: string;
+	/** When the request was made */
+	createdAt: string;
+	/** When the request was updated */
+	updatedAt: string;
+	/** The tool for which permission is requested */
+	toolName: string;
+	/** The input for the tool */
+	input: unknown;
+	/** The status of the request or null if not yet handled */
+	approved?: boolean;
+};

apps/desktop/src/lib/state/tags.ts

@@ -24,6 +24,7 @@ export enum ReduxTag {
 	WorkspaceRules = 'WorkspaceRules',
 	Project = 'Project',
 	ClaudeCodeTranscript = 'ClaudeCodeTranscript',
+	ClaudePermissionRequests = 'ClaudePermissionPrompts',
 	ClaudeSessionDetails = 'ClaudeSessionDetails',
 	InitalEditListing = 'InitialEditListing',
 	EditChangesSinceInitial = 'EditChangesSinceInitial'

crates/but-api/src/commands/claude.rs

@@ -71,3 +71,39 @@ pub fn claude_get_session_details(
         last_prompt: transcript.prompt(),
     })
 }
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ListPermissionRequestsParams {
+    pub project_id: ProjectId,
+}
+
+pub fn claude_list_permission_requests(
+    app: &App,
+    params: ListPermissionRequestsParams,
+) -> Result<Vec<but_claude::ClaudePermissionRequest>, Error> {
+    let project = gitbutler_project::get(params.project_id)?;
+    let mut ctx = CommandContext::open(&project, app.app_settings.get()?.clone())?;
+    Ok(but_claude::db::list_all_permission_requests(&mut ctx)?)
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct UpdatePermissionRequestParams {
+    pub project_id: ProjectId,
+    pub request_id: String,
+    pub approval: bool,
+}
+
+pub fn claude_update_permission_request(
+    app: &App,
+    params: UpdatePermissionRequestParams,
+) -> Result<(), Error> {
+    let project = gitbutler_project::get(params.project_id)?;
+    let mut ctx = CommandContext::open(&project, app.app_settings.get()?.clone())?;
+    Ok(but_claude::db::update_permission_request(
+        &mut ctx,
+        &params.request_id,
+        params.approval,
+    )?)
+}

crates/but-claude/src/bridge.rs

@@ -21,7 +21,7 @@
 
 use crate::{
     ClaudeMessage, ClaudeMessageContent, UserInput,
-    claude_config::fmt_claude_config,
+    claude_config::{fmt_claude_mcp, fmt_claude_settings},
     db,
     rules::{create_claude_assignment_rule, list_claude_assignment_rules},
 };
@@ -171,7 +171,8 @@ fn spawn_command(
     project_path: std::path::PathBuf,
 ) -> Result<Child> {
     // Write and obtain our own claude hooks path.
-    let config = fmt_claude_config()?;
+    let settings = fmt_claude_settings()?;
+    let mcp_config = fmt_claude_mcp()?;
 
     let mut command = Command::new("claude");
     command.stdout(writer);
@@ -181,8 +182,11 @@ fn spawn_command(
         "-p",
         "--output-format=stream-json",
         "--verbose",
-        "--dangerously-skip-permissions",
-        &format!("--settings={config}"),
+        // "--dangerously-skip-permissions",
+        &format!("--settings={settings}"),
+        &format!("--mcp-config={mcp_config}"),
+        "--permission-prompt-tool=mcp__but-security__approval_prompt",
+        "--permission-mode=acceptEdits",
     ]);
     if create_new {
         command.arg(format!("--session-id={}", session.id));