Merge branch 'add-fe-banner' of github.com:cline/cline into add-fe-banner

Co-authored-by: Bee <68532117+abeatrix@users.noreply.github.com>

src/core/controller/index.ts

@@ -898,6 +898,7 @@ export class Controller {
 		const lastDismissedModelBannerVersion = this.stateManager.getGlobalStateKey("lastDismissedModelBannerVersion") || 0
 		const lastDismissedCliBannerVersion = this.stateManager.getGlobalStateKey("lastDismissedCliBannerVersion") || 0
 		const subagentsEnabled = this.stateManager.getGlobalSettingsKey("subagentsEnabled")
+		const activeBanners = this.stateManager.getGlobalStateKey("activeBanners") || []
 
 		const localClineRulesToggles = this.stateManager.getWorkspaceStateKey("localClineRulesToggles")
 		const localWindsurfRulesToggles = this.stateManager.getWorkspaceStateKey("localWindsurfRulesToggles")
@@ -997,6 +998,7 @@ export class Controller {
 			lastDismissedModelBannerVersion,
 			remoteConfigSettings: this.stateManager.getRemoteConfigSettings(),
 			lastDismissedCliBannerVersion,
+			activeBanners,
 			subagentsEnabled,
 			nativeToolCallSetting: this.stateManager.getGlobalStateKey("nativeToolCallEnabled"),
 		}

src/core/controller/ui/initializeWebview.ts

@@ -216,6 +216,18 @@ export async function initializeWebview(controller: Controller, _request: EmptyR
 		// Silently refresh MCP marketplace catalog
 		controller.refreshMcpMarketplace(true /* sendCatalogEvent */)
 
+		controller
+			.fetchBannersForDisplay()
+			.then((banners) => {
+				controller.stateManager.setGlobalState("activeBanners", banners)
+				if (banners.length > 0) {
+					controller.postStateToWebview()
+				}
+			})
+			.catch((error) => {
+				console.error("Failed to fetch banners:", error)
+			})
+
 		// Initialize telemetry service with user's current setting
 		controller.getStateToPostToWebview().then((state) => {
 			const { telemetrySetting } = state

src/core/storage/utils/state-helpers.ts

@@ -674,6 +674,7 @@ export async function readGlobalStateFromDisk(context: ExtensionContext): Promis
 			lastDismissedModelBannerVersion: lastDismissedModelBannerVersion ?? 0,
 			lastDismissedCliBannerVersion: lastDismissedCliBannerVersion ?? 0,
 			dismissedBanners: dismissedBanners || [],
+			activeBanners: [],
 			nativeToolCallEnabled: nativeToolCallEnabled ?? true,
 			// Multi-root workspace support
 			workspaceRoots,

src/shared/ExtensionMessage.ts

@@ -6,6 +6,7 @@ import type { Environment } from "../config"
 import { AutoApprovalSettings } from "./AutoApprovalSettings"
 import { ApiConfiguration } from "./api"
 import { BrowserSettings } from "./BrowserSettings"
+import type { Banner } from "./ClineBanner"
 import { ClineFeatureSetting } from "./ClineFeatureSetting"
 import { ClineRulesToggles } from "./cline-rules"
 import { DictationSettings } from "./DictationSettings"
@@ -104,6 +105,7 @@ export interface ExtensionState {
 	remoteConfigSettings?: Partial<RemoteConfigFields>
 	subagentsEnabled?: boolean
 	nativeToolCallSetting?: boolean
+	activeBanners?: Banner[]
 }
 
 export interface ClineMessage {

src/shared/storage/state-keys.ts

@@ -1,6 +1,7 @@
 import { AutoApprovalSettings } from "@shared/AutoApprovalSettings"
 import { ApiProvider, ModelInfo, type OcaModelInfo } from "@shared/api"
 import { BrowserSettings } from "@shared/BrowserSettings"
+import type { Banner } from "@shared/ClineBanner"
 import { ClineRulesToggles } from "@shared/cline-rules"
 import { DictationSettings } from "@shared/DictationSettings"
 import { FocusChainSettings } from "@shared/FocusChainSettings"
@@ -57,6 +58,7 @@ export interface GlobalState {
 	remoteRulesToggles: ClineRulesToggles
 	remoteWorkflowToggles: ClineRulesToggles
 	dismissedBanners: Array<{ bannerId: string; dismissedAt: number }>
+	activeBanners: Banner[]
 }
 
 export interface Settings {

webview-ui/src/components/chat/chat-view/components/layout/WelcomeSection.tsx

@@ -1,5 +1,6 @@
-import React from "react"
+import React, { useMemo } from "react"
 import Announcement from "@/components/chat/Announcement"
+import ApiBanner from "@/components/common/ApiBanner"
 import CliInstallBanner, { CURRENT_CLI_BANNER_VERSION } from "@/components/common/CliInstallBanner"
 import InfoBanner, { CURRENT_INFO_BANNER_VERSION } from "@/components/common/InfoBanner"
 import NewModelBanner, { CURRENT_MODEL_BANNER_VERSION } from "@/components/common/NewModelBanner"
@@ -23,10 +24,12 @@ export const WelcomeSection: React.FC<WelcomeSectionProps> = ({
 	taskHistory,
 	shouldShowQuickWins,
 }) => {
-	const { lastDismissedInfoBannerVersion, lastDismissedCliBannerVersion, lastDismissedModelBannerVersion } = useExtensionState()
+	const { lastDismissedInfoBannerVersion, lastDismissedCliBannerVersion, lastDismissedModelBannerVersion, activeBanners } =
+		useExtensionState()
 
 	const shouldShowInfoBanner = lastDismissedInfoBannerVersion < CURRENT_INFO_BANNER_VERSION
 	const shouldShowNewModelBanner = lastDismissedModelBannerVersion < CURRENT_MODEL_BANNER_VERSION
+	const topBanners = useMemo(() => activeBanners?.filter((banner) => banner.placement === "top") || [], [activeBanners])
 
 	// Show CLI banner if not dismissed and platform is VSCode (not JetBrains/standalone)
 	const shouldShowCliBanner =
@@ -41,6 +44,9 @@ export const WelcomeSection: React.FC<WelcomeSectionProps> = ({
 				{showAnnouncement && <Announcement hideAnnouncement={hideAnnouncement} version={version} />}
 				{shouldShowNewModelBanner && <NewModelBanner />}
 				{shouldShowCliBanner && <CliInstallBanner />}
+				{topBanners?.map((banner) => (
+					<ApiBanner banner={banner} key={banner.id} />
+				))}
 				<HomeHeader shouldShowQuickWins={shouldShowQuickWins} />
 				{!shouldShowQuickWins && taskHistory.length > 0 && <HistoryPreview showHistoryView={showHistoryView} />}
 			</div>

webview-ui/src/components/common/ApiBanner.tsx

@@ -0,0 +1,70 @@
+import type { Banner } from "@shared/ClineBanner"
+import { XIcon } from "lucide-react"
+import { useCallback, useEffect } from "react"
+import { useRemark } from "react-remark"
+import { Button } from "@/components/ui/button"
+import { StateServiceClient } from "@/services/grpc-client"
+import { getAsVar, VSC_INACTIVE_SELECTION_BACKGROUND } from "@/utils/vscStyles"
+
+interface ApiBannerProps {
+	banner: Banner
+}
+
+export const ApiBanner: React.FC<ApiBannerProps> = ({ banner }) => {
+	const [titleContent, setTitleMarkdown] = useRemark()
+	const [bodyContent, setBodyMarkdown] = useRemark()
+
+	useEffect(() => {
+		setTitleMarkdown(banner.titleMd || "")
+	}, [banner.titleMd, setTitleMarkdown])
+
+	useEffect(() => {
+		setBodyMarkdown(banner.bodyMd || "")
+	}, [banner.bodyMd, setBodyMarkdown])
+
+	const handleDismiss = useCallback(
+		(e: React.MouseEvent) => {
+			e.preventDefault()
+			e.stopPropagation()
+			StateServiceClient.dismissBanner({ value: banner.id }).catch(console.error)
+		},
+		[banner.id],
+	)
+
+	const getAlertVariant = () => {
+		switch (banner.severity) {
+			case "warning":
+				return "warning"
+			case "success":
+			case "info":
+			default:
+				return "default"
+		}
+	}
+
+	return (
+		<div
+			className="px-4 py-3 flex flex-col shrink-0 mb-1 relative text-sm mt-1.5 m-4 transition-colors border-0 text-left w-auto rounded-sm"
+			style={{
+				backgroundColor: getAsVar(VSC_INACTIVE_SELECTION_BACKGROUND),
+			}}>
+			{/* Title */}
+			<div className="font-semibold mb-2 [&_p]:m-0 [&_h4]:m-0">{titleContent}</div>
+
+			{/* Body */}
+			<div className="[&_p]:m-0">{bodyContent}</div>
+
+			{/* Close button */}
+			<Button
+				className="absolute top-2.5 right-2"
+				data-testid={`api-banner-close-${banner.id}`}
+				onClick={handleDismiss}
+				size="icon"
+				variant="icon">
+				<XIcon />
+			</Button>
+		</div>
+	)
+}
+
+export default ApiBanner

webview-ui/src/context/ExtensionStateContext.tsx

@@ -242,6 +242,7 @@ export const ExtensionStateContextProvider: React.FC<{
 		backgroundCommandTaskId: undefined,
 		lastDismissedCliBannerVersion: 0,
 		subagentsEnabled: false,
+		activeBanners: [],
 
 		// NEW: Add workspace information with defaults
 		workspaceRoots: [],
@@ -730,6 +731,7 @@ export const ExtensionStateContextProvider: React.FC<{
 		remoteWorkflowToggles: state.remoteWorkflowToggles || {},
 		enableCheckpointsSetting: state.enableCheckpointsSetting,
 		currentFocusChainChecklist: state.currentFocusChainChecklist,
+		activeBanners: state.activeBanners || [],
 
 		// Navigation functions
 		navigateToMcp,