Merge pull request #9816 from gitbutlerapp/refactor-claude-session-template

Refactor: centralize Claude session descriptor logic

Author: estib-vega

apps/desktop/src/components/ClaudeSessionDescriptor.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import ReduxResult from '$components/ReduxResult.svelte';
+	import { CLAUDE_CODE_SERVICE } from '$lib/codegen/claude';
+	import { sessionMessage, type ClaudeSessionDetails } from '$lib/codegen/types';
+	import { inject } from '@gitbutler/shared/context';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		projectId: string;
+		sessionId: string;
+		fallback: Snippet;
+		children: Snippet<[string]>;
+	};
+
+	const { projectId, sessionId, children, fallback }: Props = $props();
+	const claudeCodeService = inject(CLAUDE_CODE_SERVICE);
+	const sessionDetails = $derived(claudeCodeService.sessionDetails(projectId, sessionId));
+</script>
+
+{#snippet loading()}
+	{@render fallback()}
+{/snippet}
+
+{#snippet error()}
+	{@render fallback()}
+{/snippet}
+
+{#snippet resultChildren(sessionDetails: ClaudeSessionDetails)}
+	{@const title = sessionMessage(sessionDetails) ?? sessionId}
+	{@render children(title)}
+{/snippet}
+
+<ReduxResult {projectId} result={sessionDetails.current} {loading} {error} children={resultChildren}
+></ReduxResult>

apps/desktop/src/components/Rule.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import ClaudeSessionDescriptor from '$components/ClaudeSessionDescriptor.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
-	import { CLAUDE_CODE_SERVICE } from '$lib/codegen/claude';
-	import { sessionMessage } from '$lib/codegen/types';
 	import {
 		semanticTypeToString,
 		treeStatusToShortString,
@@ -26,7 +25,6 @@
 
 	const stackService = inject(STACK_SERVICE);
 	const rulesService = inject(RULES_SERVICE);
-	const claudeCodeService = inject(CLAUDE_CODE_SERVICE);
 
 	const [deleteRule, deletingRule] = rulesService.deleteWorkspaceRule;
 
@@ -143,19 +141,14 @@
 	{@const config = getFilterConfig(filter)}
 
 	{#if filter.type === 'claudeCodeSessionId'}
-		{@const sessionDetails = claudeCodeService.sessionDetails(projectId, filter.subject)}
-		<ReduxResult {projectId} result={sessionDetails.current}>
-			{#snippet loading()}
+		<ClaudeSessionDescriptor {projectId} sessionId={filter.subject}>
+			{#snippet fallback()}
 				{@render renderBasicPill(config)}
 			{/snippet}
-			{#snippet error()}
-				{@render renderBasicPill(config)}
-			{/snippet}
-			{#snippet children(sessionDetails)}
-				{@const title = sessionMessage(sessionDetails) ?? filter.subject}
-				{@render renderSessionPill(`Code session: ${title}`, config.icon!, title)}
+			{#snippet children(descriptor)}
+				{@render renderSessionPill(`Code session: ${descriptor}`, config.icon!, descriptor)}
 			{/snippet}
-		</ReduxResult>
+		</ClaudeSessionDescriptor>
 	{:else if filter.type === 'fileChangeType'}
 		{@render renderFileChangePill(config, filter.subject)}
 	{:else}

apps/desktop/src/components/RuleFiltersEditor.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import ClaudeSessionDescriptor from '$components/ClaudeSessionDescriptor.svelte';
 	import NewRuleMenu from '$components/NewRuleMenu.svelte';
 	import {
 		type SemanticType,
@@ -17,12 +18,13 @@
 	const FILE_STATUS_OPTIONS: FileStatus[] = ['addition', 'modification', 'deletion', 'rename'];
 
 	type Props = {
+		projectId: string;
 		initialFilterValues: Partial<RuleFilterMap>;
 		addFilter: (type: RuleFilterType) => void;
 		deleteFilter: (type: RuleFilterType) => void;
 	};
 
-	const { initialFilterValues, addFilter, deleteFilter }: Props = $props();
+	const { projectId, initialFilterValues, addFilter, deleteFilter }: Props = $props();
 
 	let addFilterButton = $state<HTMLDivElement>();
 	let newFilterContextMenu = $state<NewRuleMenu>();
@@ -201,12 +203,25 @@
 {/snippet}
 
 <!-- Claude Code Session ID -->
-{#snippet claudeCodeSessionIdFilter()}
-	<Textbox value={claudeCodeSessionId} readonly>
-		{#snippet customIconLeft()}
-			<Icon name="ai" />
-		{/snippet}
-	</Textbox>
+{#snippet claudeCodeSessionIdFilter(sessionId: string)}
+	<div class="rule__pill expand">
+		<ClaudeSessionDescriptor {projectId} {sessionId}>
+			{#snippet fallback()}
+				<Textbox value={sessionId} readonly>
+					{#snippet customIconLeft()}
+						<Icon name="ai" />
+					{/snippet}
+				</Textbox>
+			{/snippet}
+			{#snippet children(descriptor)}
+				<Textbox value={descriptor} readonly>
+					{#snippet customIconLeft()}
+						<Icon name="ai" />
+					{/snippet}
+				</Textbox>
+			{/snippet}
+		</ClaudeSessionDescriptor>
+	</div>
 {/snippet}
 
 <!-- This is the parent component,
@@ -221,8 +236,8 @@
 			{@render fileChangeType()}
 		{:else if type === 'semanticType'}
 			{@render semanticTypeFilter()}
-		{:else if type === 'claudeCodeSessionId'}
-			{@render claudeCodeSessionIdFilter()}
+		{:else if type === 'claudeCodeSessionId' && claudeCodeSessionId}
+			{@render claudeCodeSessionIdFilter(claudeCodeSessionId)}
 		{/if}
 
 		{#if type !== 'claudeCodeSessionId'}

apps/desktop/src/components/RulesList.svelte

@@ -251,6 +251,7 @@
 			<div class="rules-list__filters">
 				<RuleFiltersEditor
 					bind:this={ruleFiltersEditor}
+					{projectId}
 					initialFilterValues={draftRuleFilterInitialValues}
 					addFilter={addDraftRuleFilter}
 					deleteFilter={removeDraftRuleFilter}