Merge pull request #9119 from gitbutlerapp/action-source-editor-logos

action-source-editor-logos

Author: estib-vega

apps/desktop/src/components/v3/FeedItem.svelte

@@ -6,11 +6,12 @@
 	import { User } from '$lib/user/user';
 	import { getContext } from '@gitbutler/shared/context';
 	import { getContextStore } from '@gitbutler/shared/context';
+	import EditorLogo from '@gitbutler/ui/EditorLogo.svelte';
 	import Icon from '@gitbutler/ui/Icon.svelte';
 	import TimeAgo from '@gitbutler/ui/TimeAgo.svelte';
-	import Tooltip from '@gitbutler/ui/Tooltip.svelte';
 	import Markdown from '@gitbutler/ui/markdown/Markdown.svelte';
 	import toasts from '@gitbutler/ui/toasts';
+	import { isStr } from '@gitbutler/ui/utils/string';
 
 	type Props = {
 		projectId: string;
@@ -66,22 +67,27 @@
 
 <div class="action-item">
 	{#if action instanceof ButlerAction}
-		<div class="action-item__robot">
-			<Icon name="robot" />
-		</div>
+		{#if isStr(action.source) || !action.source.Mcp}
+			<div class="action-item__robot">
+				<Icon name="robot" />
+			</div>
+		{:else}
+			<div>
+				<EditorLogo name={action.source.Mcp?.name} />
+			</div>
+		{/if}
 		<div class="action-item__content">
 			<div class="action-item__content__header">
 				<div>
-					<p class="text-13 text-bold">Updated workspace</p>
+					<p class="text-13 text-bold">Recorded changes</p>
 					<p class="text-13 text-bold text-grey">(MCP call)</p>
 					<span class="text-13 text-greyer"
 						><TimeAgo date={new Date(action.createdAt)} addSuffix /></span
 					>
-					<Tooltip text={action.externalPrompt}><div class="pill text-12">Prompt</div></Tooltip>
 				</div>
 			</div>
 			<span class="text-14 text-darkgrey">
-				<Markdown content={action.externalSummary} />
+				<Markdown content={action.externalPrompt} />
 			</span>
 			{#if action.response && action.response.updatedBranches.length > 0}
 				<div class="action-item__content__metadata">
@@ -271,11 +277,4 @@
 	.text-greyer {
 		color: var(--clr-text-3);
 	}
-
-	.pill {
-		padding: 2px 6px;
-		border: 1px solid var(--clr-border-2);
-		border-radius: 99px;
-		background-color: var(--clr-bg-2);
-	}
 </style>

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

@@ -12,6 +12,17 @@ export type Outcome = {
 };
 
 export type ActionHandler = 'handleChangesSimple';
+
+export type ActionSource =
+	| 'ButCli'
+	| 'GitButler'
+	| 'Unknown'
+	| {
+			Mcp: {
+				name: string;
+				version: string;
+			} | null;
+	  };
 /** Represents a snapshot of an automatic action taken by a GitButler automation.  */
 export class ButlerAction {
 	/** UUID identifier of the action */
@@ -33,6 +44,8 @@ export class ButlerAction {
 	response?: Outcome;
 	/** An error message if the action failed. */
 	error?: string;
+	/** The source of the action, if known. */
+	source!: ActionSource;
 }
 
 export class ActionListing {

packages/ui/src/lib/EditorLogo.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import cursorLogoSvg from '$lib/assets/cursor.svg?raw';
+	import vsCodeInsidersLogoSvg from '$lib/assets/vscode-insiders.svg?raw';
+	import vsCodeLogoSvg from '$lib/assets/vscode.svg?raw';
+
+	type Props = {
+		name: string;
+	};
+
+	const { name }: Props = $props();
+	const isCursor = $derived(name.toLowerCase().includes('cursor'));
+	const vsCodeKeywords = ['vscode', 'visual studio code'];
+	const isVsCode = $derived(vsCodeKeywords.some((keyword) => name.toLowerCase().includes(keyword)));
+	const isVsCodeInsiders = $derived(isVsCode && name.toLowerCase().includes('insiders'));
+</script>
+
+<div class="editor-logo">
+	{#if isCursor}
+		{@html cursorLogoSvg}
+	{:else if isVsCodeInsiders}
+		{@html vsCodeInsidersLogoSvg}
+	{:else if isVsCode}
+		{@html vsCodeLogoSvg}
+	{/if}
+</div>
+
+<style lang="postcss">
+	.editor-logo {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 26px;
+		height: 26px;
+		padding: 2px;
+		border-radius: 8px;
+		background-color: var(--clr-core-ntrl-10);
+	}
+</style>