Rewrite prompt templates

Author: Caleb-T-Owens

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

@@ -15,6 +15,7 @@
 	import CodegenClaudeMessage from '$components/codegen/CodegenClaudeMessage.svelte';
 	import CodegenInput from '$components/codegen/CodegenInput.svelte';
 	import CodegenMcpConfigModal from '$components/codegen/CodegenMcpConfigModal.svelte';
+	import CodegenPromptConfigModal from '$components/codegen/CodegenPromptConfigModal.svelte';
 	import CodegenServiceMessageThinking from '$components/codegen/CodegenServiceMessageThinking.svelte';
 	import CodegenServiceMessageUseTool from '$components/codegen/CodegenServiceMessageUseTool.svelte';
 	import CodegenSidebar from '$components/codegen/CodegenSidebar.svelte';
@@ -121,6 +122,7 @@
 	let templateContextMenu = $state<ContextMenu>();
 	let templateTrigger = $state<HTMLButtonElement>();
 	let mcpConfigModal = $state<CodegenMcpConfigModal>();
+	let promptConfigModal = $state<CodegenPromptConfigModal>();
 
 	const modelOptions: { label: string; value: ModelType }[] = [
 		{ label: 'Sonnet', value: 'sonnet' },
@@ -137,7 +139,19 @@
 		{ label: 'Accept edits', value: 'acceptEdits' }
 	];
 
-	const promptTemplates = $derived(claudeCodeService.promptTemplates(undefined));
+	const promptTemplates = $derived(claudeCodeService.promptTemplates(projectId));
+	const promptDirs = $derived(claudeCodeService.promptDirs(projectId));
+
+	async function openPromptConfigDir(path: string) {
+		await claudeCodeService.createPromptDir({ projectId, path });
+
+		const editorUri = getEditorUri({
+			schemeId: $userSettings.defaultCodeEditor.schemeIdentifer,
+			path: [path]
+		});
+
+		urlService.openExternalUrl(editorUri);
+	}
 
 	const projectState = uiState.project(projectId);
 	const selectedBranch = $derived(projectState.selectedClaudeSession.current);
@@ -334,21 +348,6 @@
 		templateContextMenu?.close();
 	}
 
-	async function configureTemplates() {
-		templateContextMenu?.close();
-
-		const templatesPath = await claudeCodeService.fetchPromptTemplatesPath(undefined);
-
-		if (templatesPath) {
-			const editorUri = getEditorUri({
-				schemeId: $userSettings.defaultCodeEditor.schemeIdentifer,
-				path: [templatesPath]
-			});
-
-			urlService.openExternalUrl(editorUri);
-		}
-	}
-
 	function showInWorkspace() {
 		if (!selectedBranch) return;
 		goto(`${workspacePath(projectId)}?stackId=${selectedBranch.stackId}`);
@@ -1151,7 +1150,7 @@
 	<ContextMenuSection>
 		<ReduxResult result={promptTemplates.result} {projectId}>
 			{#snippet children(promptTemplates, { projectId: _projectId })}
-				{#each promptTemplates.templates as template}
+				{#each promptTemplates as template}
 					<ContextMenuItem
 						label={template.label}
 						onclick={() => insertTemplate(template.template)}
@@ -1162,13 +1161,21 @@
 	</ContextMenuSection>
 	<ContextMenuSection>
 		<ContextMenuItem
-			label="Edit in {$userSettings.defaultCodeEditor.displayName}"
+			label="Edit templates"
 			icon="open-editor"
-			onclick={configureTemplates}
+			onclick={() => promptConfigModal?.show()}
 		/>
 	</ContextMenuSection>
 </ContextMenu>
 
+{#if promptDirs.response}
+	<CodegenPromptConfigModal
+		bind:this={promptConfigModal}
+		promptDirs={promptDirs.response}
+		{openPromptConfigDir}
+	/>
+{/if}
+
 <style lang="postcss">
 	.page {
 		display: flex;

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

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { Button, Modal, SectionCard } from '@gitbutler/ui';
+	import type { PromptDir } from '$lib/codegen/types';
+
+	type Props = {
+		promptDirs: PromptDir[];
+		openPromptConfigDir: (path: string) => void;
+	};
+
+	let modal = $state<Modal>();
+
+	export function show() {
+		modal?.show();
+	}
+
+	const { promptDirs, openPromptConfigDir }: Props = $props();
+</script>
+
+<Modal bind:this={modal} title="Configure prompt templates">
+	<div class="flex flex-col gap-16">
+		<p class="text-13">
+			We have a tierd prompt configuration setup. Prompts are expected to be found in the following
+			locations.
+		</p>
+		<p class="text-13">
+			Project prompts take precidence over global prompts, and local prompts take precidence over
+			project prompts.
+		</p>
+
+		<div>
+			{#each promptDirs as dir, idx}
+				<SectionCard
+					roundedTop={idx === 0}
+					roundedBottom={idx === promptDirs.length - 1}
+					orientation="row"
+				>
+					{#snippet title()}
+						{dir.label}
+					{/snippet}
+
+					{#snippet caption()}
+						<div class="flex flex-col gap-6">
+							<p class="text-11">{dir.path}{dir.path.endsWith('/') ? '' : '/'}</p>
+							<p class="text-13">
+								Looks for files ending with: <span class="clr-text-1"
+									>{dir.filters.join(' or ')}</span
+								>
+							</p>
+						</div>
+					{/snippet}
+
+					{#snippet actions()}
+						<Button onclick={() => openPromptConfigDir(dir.path)}>Open in Editor</Button>
+					{/snippet}
+				</SectionCard>
+			{/each}
+		</div>
+	</div>
+</Modal>

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

@@ -6,7 +6,8 @@ import {
 	type ThinkingLevel,
 	type ModelType,
 	type PermissionMode,
-	type PromptTemplates,
+	type PromptTemplate,
+	type PromptDir,
 	type McpConfig,
 	type SubAgent
 } from '$lib/codegen/types';
@@ -88,24 +89,24 @@ export class ClaudeCodeService {
 		return this.api.endpoints.getSessionDetails.fetch;
 	}
 
-	get promptTemplates() {
-		return this.api.endpoints.getPromptTemplates.useQuery;
+	promptTemplates(projectId: string) {
+		return this.api.endpoints.listPromptTemplates.useQuery({ projectId });
 	}
 
 	get fetchPromptTemplates() {
-		return this.api.endpoints.getPromptTemplates.fetch;
+		return this.api.endpoints.listPromptTemplates.fetch;
 	}
 
-	get writePromptTemplates() {
-		return this.api.endpoints.writePromptTemplates.mutate;
+	promptDirs(projectId: string) {
+		return this.api.endpoints.getPromptDirs.useQuery({ projectId });
 	}
 
-	get promptTemplatesPath() {
-		return this.api.endpoints.getPromptTemplatesPath.useQuery;
+	get fetchPromptDirs() {
+		return this.api.endpoints.getPromptDirs.fetch;
 	}
 
-	get fetchPromptTemplatesPath() {
-		return this.api.endpoints.getPromptTemplatesPath.fetch;
+	get createPromptDir() {
+		return this.api.endpoints.createPromptDir.mutate;
 	}
 
 	get mcpConfig() {
@@ -280,26 +281,21 @@ function injectEndpoints(api: ClientState['backendApi']) {
 					unsubscribe();
 				}
 			}),
-			getPromptTemplates: build.query<PromptTemplates, undefined>({
-				extraOptions: { command: 'claude_get_prompt_templates' },
-				query: () => undefined
+			listPromptTemplates: build.query<PromptTemplate[], { projectId: string }>({
+				extraOptions: { command: 'claude_list_prompt_templates' },
+				query: (args) => args
 			}),
-			writePromptTemplates: build.mutation<
-				undefined,
-				{
-					templates: PromptTemplates;
-				}
-			>({
+			getPromptDirs: build.query<PromptDir[], { projectId: string }>({
+				extraOptions: { command: 'claude_get_prompt_dirs' },
+				query: (args) => args
+			}),
+			createPromptDir: build.mutation<undefined, { projectId: string; path: string }>({
 				extraOptions: {
-					command: 'claude_write_prompt_templates',
-					actionName: 'Write Prompt Templates'
+					command: 'claude_maybe_create_prompt_dir',
+					actionName: 'Create Prompt Directory'
 				},
 				query: (args) => args
 			}),
-			getPromptTemplatesPath: build.query<string, undefined>({
-				extraOptions: { command: 'claude_get_prompt_templates_path' },
-				query: () => undefined
-			}),
 			getMcpConfig: build.query<McpConfig, { projectId: string }>({
 				extraOptions: { command: 'claude_get_mcp_config' },
 				query: (args) => args

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

@@ -195,8 +195,10 @@ export type PromptTemplate = {
 	template: string;
 };
 
-export type PromptTemplates = {
-	templates: PromptTemplate[];
+export type PromptDir = {
+	label: string;
+	path: string;
+	filters: string[];
 };
 
 export type McpConfig = {

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

@@ -172,27 +172,32 @@ pub async fn claude_compact_history(app: &App, params: CompactHistoryParams) ->
 #[api_cmd]
 #[tauri::command(async)]
 #[instrument(err(Debug))]
-pub fn claude_get_prompt_templates() -> Result<prompt_templates::PromptTemplates, Error> {
-    let templates = prompt_templates::load_prompt_templates()?;
+pub fn claude_list_prompt_templates(
+    project_id: ProjectId,
+) -> Result<Vec<prompt_templates::PromptTemplate>, Error> {
+    let project = gitbutler_project::get(project_id)?;
+    let templates = prompt_templates::list_templates(&project)?;
     Ok(templates)
 }
 
 #[api_cmd]
 #[tauri::command(async)]
 #[instrument(err(Debug))]
-pub fn claude_write_prompt_templates(
-    templates: prompt_templates::PromptTemplates,
-) -> Result<(), Error> {
-    prompt_templates::write_prompt_templates(&templates)?;
-    Ok(())
+pub fn claude_get_prompt_dirs(
+    project_id: ProjectId,
+) -> Result<Vec<prompt_templates::PromptDir>, Error> {
+    let project = gitbutler_project::get(project_id)?;
+    let dirs = prompt_templates::prompt_dirs(&project)?;
+    Ok(dirs)
 }
 
 #[api_cmd]
 #[tauri::command(async)]
 #[instrument(err(Debug))]
-pub fn claude_get_prompt_templates_path() -> Result<String, Error> {
-    let path = prompt_templates::get_prompt_templates_path_string()?;
-    Ok(path)
+pub fn claude_maybe_create_prompt_dir(project_id: ProjectId, path: String) -> Result<(), Error> {
+    let project = gitbutler_project::get(project_id)?;
+    prompt_templates::maybe_create_dir(&project, &path)?;
+    Ok(())
 }
 
 #[tauri::command(async)]