Updates banner when gk mcp can be auto registered

Author: d13

src/plus/gk/utils/-webview/mcp.utils.ts

@@ -4,9 +4,9 @@ import type { Container } from '../../../../container';
 import { getHostAppName } from '../../../../system/-webview/vscode';
 import { satisfies } from '../../../../system/version';
 
-export async function isMcpBannerEnabled(container: Container): Promise<boolean> {
+export async function isMcpBannerEnabled(container: Container, showAutoRegistration = false): Promise<boolean> {
 	// Check if running on web or automatically registrable
-	if (isWeb || supportsMcpExtensionRegistration()) {
+	if (isWeb || (!showAutoRegistration && supportsMcpExtensionRegistration())) {
 		return false;
 	}
 

src/webviews/apps/home/home.ts

@@ -92,6 +92,7 @@ export class GlHomeApp extends GlAppHost<State> {
 							<gl-mcp-banner
 								.layout=${'responsive'}
 								.source=${'home'}
+								.canAutoRegister=${this.state?.mcpCanAutoRegister ?? false}
 								.collapsed=${this.state?.mcpBannerCollapsed ?? true}
 							></gl-mcp-banner>
 							<gl-active-work></gl-active-work>

src/webviews/apps/home/stateProvider.ts

@@ -97,7 +97,8 @@ export class HomeStateProvider implements StateProvider<State> {
 					host.requestUpdate();
 					break;
 				case DidChangeMcpBanner.is(msg):
-					this._state.mcpBannerCollapsed = msg.params;
+					this._state.mcpBannerCollapsed = msg.params.mcpBannerCollapsed;
+					this._state.mcpCanAutoRegister = msg.params.mcpCanAutoRegister;
 					this._state.timestamp = Date.now();
 
 					this.provider.setValue(this._state, true);

src/webviews/apps/shared/components/banner/banner.css.ts

@@ -212,13 +212,15 @@ export const bannerStyles = css`
 		font-weight: bold;
 		color: var(--gl-banner-text-color);
 		margin: 0;
+		text-wrap: pretty;
 	}
 
 	.banner__body {
 		font-size: 1em;
 		color: var(--gl-banner-text-color);
 		margin: 0;
 		line-height: 1.4;
+		text-wrap: pretty;
 	}
 
 	.banner__buttons {

src/webviews/apps/shared/components/mcp-banner.ts

@@ -1,5 +1,5 @@
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { urls } from '../../../../constants';
 import { createCommandLink } from '../../../../system/commands';
 import './banner/banner';
@@ -40,14 +40,36 @@ export class GlMcpBanner extends LitElement {
 	@property()
 	layout: 'default' | 'responsive' = 'default';
 
-	@state()
-	private collapsed: boolean = false;
+	@property({ type: Boolean })
+	collapsed: boolean = false;
+
+	@property({ type: Boolean })
+	private canAutoRegister: boolean = false;
 
 	override render(): unknown {
 		if (this.collapsed) {
 			return nothing;
 		}
 
+		if (this.canAutoRegister) {
+			const bodyHtml = `GitKraken MCP is now active in Copilot chat. Ask Copilot to "start work on issue PROJ-123" or "create a PR for my commits" to see Git workflows powered by AI. <a href="${urls.helpCenterMCP}">Learn more</a>`;
+
+			return html`
+				<gl-banner
+					exportparts="base"
+					display="gradient-purple"
+					layout="${this.layout}"
+					banner-title="GitKraken MCP for GitLens is Here!"
+					body="${bodyHtml}"
+					dismissible
+					dismiss-href="${createCommandLink('gitlens.storage.store', {
+						key: 'mcp:banner:dismissed',
+						value: true,
+					})}"
+				></gl-banner>
+			`;
+		}
+
 		const bodyHtml = `Leverage Git and Integration information from GitLens in AI chat. <a href="${urls.helpCenterMCP}">Learn more</a>`;
 
 		return html`

src/webviews/home/homeWebview.ts

@@ -51,7 +51,7 @@ import type { AIModelChangeEvent } from '../../plus/ai/aiProviderService';
 import { showPatchesView } from '../../plus/drafts/actions';
 import type { Subscription } from '../../plus/gk/models/subscription';
 import type { SubscriptionChangeEvent } from '../../plus/gk/subscriptionService';
-import { isMcpBannerEnabled } from '../../plus/gk/utils/-webview/mcp.utils';
+import { isMcpBannerEnabled, supportsMcpExtensionRegistration } from '../../plus/gk/utils/-webview/mcp.utils';
 import { isAiAllAccessPromotionActive } from '../../plus/gk/utils/-webview/promo.utils';
 import { isSubscriptionTrialOrPaidFromState } from '../../plus/gk/utils/subscription.utils';
 import type { ConfiguredIntegrationsChangeEvent } from '../../plus/integrations/authentication/configuredIntegrationService';
@@ -803,7 +803,11 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 	}
 
 	private async getMcpBannerCollapsed() {
-		return !(await isMcpBannerEnabled(this.container));
+		return !(await isMcpBannerEnabled(this.container, true));
+	}
+
+	private getMcpCanAutoRegister() {
+		return supportsMcpExtensionRegistration();
 	}
 
 	private getIntegrationBannerCollapsed() {
@@ -898,6 +902,7 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 			newInstall: getContext('gitlens:install:new', false),
 			amaBannerCollapsed: this.getAmaBannerCollapsed(),
 			mcpBannerCollapsed: await this.getMcpBannerCollapsed(),
+			mcpCanAutoRegister: this.getMcpCanAutoRegister(),
 		};
 	}
 
@@ -1134,7 +1139,10 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 	private async onMcpBannerChanged() {
 		if (!this.host.visible) return;
 
-		void this.host.notify(DidChangeMcpBanner, await this.getMcpBannerCollapsed());
+		void this.host.notify(DidChangeMcpBanner, {
+			mcpBannerCollapsed: await this.getMcpBannerCollapsed(),
+			mcpCanAutoRegister: this.getMcpCanAutoRegister(),
+		});
 	}
 
 	private getSelectedRepository() {

src/webviews/home/protocol.ts

@@ -36,6 +36,7 @@ export interface State extends WebviewState {
 	integrationBannerCollapsed: boolean;
 	aiAllAccessBannerCollapsed: boolean;
 	mcpBannerCollapsed: boolean;
+	mcpCanAutoRegister: boolean;
 	hasAnyIntegrationConnected: boolean;
 	integrations: IntegrationState[];
 	ai: { model: AIModel | undefined };
@@ -253,7 +254,11 @@ export const CollapseSectionCommand = new IpcCommand<CollapseSectionParams>(scop
 export const DismissWalkthroughSection = new IpcCommand<void>(scope, 'walkthrough/dismiss');
 
 export const DidChangeAiAllAccessBanner = new IpcNotification<boolean>(scope, 'ai/allAccess/didChange');
-export const DidChangeMcpBanner = new IpcNotification<boolean>(scope, 'mcp/didChange');
+export interface DidChangeMcpBannerParams {
+	mcpBannerCollapsed: boolean;
+	mcpCanAutoRegister: boolean;
+}
+export const DidChangeMcpBanner = new IpcNotification<DidChangeMcpBannerParams>(scope, 'mcp/didChange');
 export const DismissAiAllAccessBannerCommand = new IpcCommand<void>(scope, 'ai/allAccess/dismiss');
 
 export const SetOverviewFilter = new IpcCommand<OverviewFilters>(scope, 'overview/filter/set');