system notification like kilocode

Author: NaccOll

packages/types/src/global-settings.ts

@@ -101,6 +101,7 @@ export const globalSettingsSchema = z.object({
 	ttsSpeed: z.number().optional(),
 	soundEnabled: z.boolean().optional(),
 	soundVolume: z.number().optional(),
+	systemNotificationsEnabled: z.boolean().optional(),
 
 	maxOpenTabsContext: z.number().optional(),
 	maxWorkspaceFiles: z.number().optional(),
@@ -281,6 +282,7 @@ export const EVALS_SETTINGS: RooCodeSettings = {
 	ttsSpeed: 1,
 	soundEnabled: false,
 	soundVolume: 0.5,
+	systemNotificationsEnabled: false,
 
 	terminalOutputLineLimit: 500,
 	terminalOutputCharacterLimit: DEFAULT_TERMINAL_OUTPUT_CHARACTER_LIMIT,

src/core/webview/ClineProvider.ts

@@ -1579,6 +1579,7 @@ export class ClineProvider
 			soundEnabled,
 			ttsEnabled,
 			ttsSpeed,
+			systemNotificationsEnabled,
 			diffEnabled,
 			enableCheckpoints,
 			taskHistory,
@@ -1689,6 +1690,7 @@ export class ClineProvider
 			soundEnabled: soundEnabled ?? false,
 			ttsEnabled: ttsEnabled ?? false,
 			ttsSpeed: ttsSpeed ?? 1.0,
+			systemNotificationsEnabled: systemNotificationsEnabled ?? false,
 			diffEnabled: diffEnabled ?? true,
 			enableCheckpoints: enableCheckpoints ?? true,
 			shouldShowAnnouncement:
@@ -1897,6 +1899,7 @@ export class ClineProvider
 			soundEnabled: stateValues.soundEnabled ?? false,
 			ttsEnabled: stateValues.ttsEnabled ?? false,
 			ttsSpeed: stateValues.ttsSpeed ?? 1.0,
+			systemNotificationsEnabled: stateValues.systemNotificationsEnabled ?? false,
 			diffEnabled: stateValues.diffEnabled ?? true,
 			enableCheckpoints: stateValues.enableCheckpoints ?? true,
 			soundVolume: stateValues.soundVolume,

src/core/webview/webviewMessageHandler.ts

@@ -33,6 +33,7 @@ import { checkExistKey } from "../../shared/checkExistApiConfig"
 import { experimentDefault } from "../../shared/experiments"
 import { Terminal } from "../../integrations/terminal/Terminal"
 import { openFile } from "../../integrations/misc/open-file"
+import { showSystemNotification } from "../../integrations/notifications"
 import { openImage, saveImage } from "../../integrations/misc/image-handler"
 import { selectImages } from "../../integrations/misc/process-images"
 import { getTheme } from "../../integrations/theme/getTheme"
@@ -992,6 +993,20 @@ export const webviewMessageHandler = async (
 			await updateGlobalState("soundVolume", soundVolume)
 			await provider.postStateToWebview()
 			break
+		case "showSystemNotification":
+			const isSystemNotificationsEnabled = getGlobalState("systemNotificationsEnabled") ?? false
+			if (!isSystemNotificationsEnabled) {
+				break
+			}
+			if (message.notificationOptions) {
+				showSystemNotification(message.notificationOptions)
+			}
+			break
+		case "systemNotificationsEnabled":
+			const systemNotificationsEnabled = message.bool ?? true
+			await updateGlobalState("systemNotificationsEnabled", systemNotificationsEnabled)
+			await provider.postStateToWebview()
+			break
 		case "ttsEnabled":
 			const ttsEnabled = message.bool ?? true
 			await updateGlobalState("ttsEnabled", ttsEnabled)

src/integrations/notifications/index.ts

@@ -0,0 +1,97 @@
+import { execa } from "execa"
+import { platform } from "os"
+
+interface NotificationOptions {
+	title?: string
+	subtitle?: string
+	message: string
+}
+
+async function showMacOSNotification(options: NotificationOptions): Promise<void> {
+	const { title, subtitle = "", message } = options
+
+	const script = `display notification "${message}" with title "${title}" subtitle "${subtitle}" sound name "Tink"`
+
+	try {
+		await execa("osascript", ["-e", script])
+	} catch (error) {
+		throw new Error(`Failed to show macOS notification: ${error}`)
+	}
+}
+
+async function showWindowsNotification(options: NotificationOptions): Promise<void> {
+	const { subtitle, message } = options
+
+	const script = `
+    [Windows.UI.Notifications.ToastNotificationManager, Windows.UI.Notifications, ContentType = WindowsRuntime] | Out-Null
+    [Windows.Data.Xml.Dom.XmlDocument, Windows.Data.Xml.Dom.XmlDocument, ContentType = WindowsRuntime] | Out-Null
+
+    $template = @"
+    <toast>
+        <visual>
+            <binding template="ToastText02">
+                <text id="1">${subtitle}</text>
+                <text id="2">${message}</text>
+            </binding>
+        </visual>
+    </toast>
+"@
+
+    $xml = New-Object Windows.Data.Xml.Dom.XmlDocument
+    $xml.LoadXml($template)
+    $toast = [Windows.UI.Notifications.ToastNotification]::new($xml)
+    [Windows.UI.Notifications.ToastNotificationManager]::CreateToastNotifier("Roo Code").Show($toast)
+    `
+
+	try {
+		await execa("powershell", ["-Command", script])
+	} catch (error) {
+		throw new Error(`Failed to show Windows notification: ${error}`)
+	}
+}
+
+async function showLinuxNotification(options: NotificationOptions): Promise<void> {
+	const { title = "", subtitle = "", message } = options
+
+	// Combine subtitle and message if subtitle exists
+	const fullMessage = subtitle ? `${subtitle}\n${message}` : message
+
+	try {
+		await execa("notify-send", [title, fullMessage])
+	} catch (error) {
+		throw new Error(`Failed to show Linux notification: ${error}`)
+	}
+}
+
+export async function showSystemNotification(options: NotificationOptions): Promise<void> {
+	try {
+		const { title = "Roo Code", message } = options
+
+		if (!message) {
+			throw new Error("Message is required")
+		}
+
+		const escapedOptions = {
+			...options,
+			title: title.replace(/"/g, '\\"'),
+			message: message.replace(/"/g, '\\"'),
+			subtitle: options.subtitle?.replace(/"/g, '\\"') || "",
+		}
+
+		switch (platform()) {
+			case "darwin":
+				await showMacOSNotification(escapedOptions)
+				break
+			case "win32":
+				await showWindowsNotification(escapedOptions)
+				break
+			case "linux":
+				await showLinuxNotification(escapedOptions)
+				break
+			default:
+				throw new Error("Unsupported platform")
+		}
+	} catch (error) {
+		console.error("Could not show system notification", error)
+	}
+}

src/shared/ExtensionMessage.ts

@@ -99,6 +99,7 @@ export interface ExtensionMessage {
 		| "remoteBrowserEnabled"
 		| "ttsStart"
 		| "ttsStop"
+		| "showSystemNotification"
 		| "maxReadFileLine"
 		| "fileSearchResults"
 		| "toggleApiConfigPin"
@@ -240,6 +241,7 @@ export type ExtensionState = Pick<
 	| "ttsSpeed"
 	| "soundEnabled"
 	| "soundVolume"
+	| "systemNotificationsEnabled"
 	// | "maxOpenTabsContext" // Optional in GlobalSettings, required here.
 	// | "maxWorkspaceFiles" // Optional in GlobalSettings, required here.
 	// | "showRooIgnoredFiles" // Optional in GlobalSettings, required here.

src/shared/WebviewMessage.ts

@@ -97,6 +97,8 @@ export interface WebviewMessage {
 		| "ttsEnabled"
 		| "ttsSpeed"
 		| "soundVolume"
+		| "showSystemNotification"
+		| "systemNotificationsEnabled"
 		| "diffEnabled"
 		| "enableCheckpoints"
 		| "browserViewportSize"
@@ -291,6 +293,11 @@ export interface WebviewMessage {
 		codebaseIndexMistralApiKey?: string
 		codebaseIndexVercelAiGatewayApiKey?: string
 	}
+	notificationOptions?: {
+		title?: string
+		subtitle?: string
+		message: string
+	}
 }
 
 export const checkoutDiffPayloadSchema = z.object({

webview-ui/src/components/chat/ChatView.tsx

@@ -41,6 +41,7 @@ import RooCloudCTA from "@src/components/welcome/RooCloudCTA"
 import { StandardTooltip } from "@src/components/ui"
 import { useAutoApprovalState } from "@src/hooks/useAutoApprovalState"
 import { useAutoApprovalToggles } from "@src/hooks/useAutoApprovalToggles"
+import { showSystemNotification } from "@src/utils/showSystemNotification"
 
 import TelemetryBanner from "../common/TelemetryBanner"
 import VersionIndicator from "../common/VersionIndicator"
@@ -56,7 +57,6 @@ import SystemPromptWarning from "./SystemPromptWarning"
 import ProfileViolationWarning from "./ProfileViolationWarning"
 import { CheckpointWarning } from "./CheckpointWarning"
 import { QueuedMessages } from "./QueuedMessages"
-
 export interface ChatViewProps {
 	isHidden: boolean
 	showAnnouncement: boolean
@@ -280,6 +280,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 					switch (lastMessage.ask) {
 						case "api_req_failed":
 							playSound("progress_loop")
+							showSystemNotification(t("settings:notifications.system.apiReqFailed"))
 							setSendingDisabled(true)
 							setClineAsk("api_req_failed")
 							setEnableButtons(true)
@@ -288,6 +289,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 							break
 						case "mistake_limit_reached":
 							playSound("progress_loop")
+							showSystemNotification(t("settings:notifications.system.mistakeLimitReached"))
 							setSendingDisabled(false)
 							setClineAsk("mistake_limit_reached")
 							setEnableButtons(true)
@@ -297,6 +299,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 						case "followup":
 							if (!isPartial) {
 								playSound("notification")
+								showSystemNotification(t("settings:notifications.system.followup"))
 							}
 							setSendingDisabled(isPartial)
 							setClineAsk("followup")
@@ -311,6 +314,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 						case "tool":
 							if (!isAutoApproved(lastMessage) && !isPartial) {
 								playSound("notification")
+								showSystemNotification(t("settings:notifications.system.toolRequest"))
 							}
 							setSendingDisabled(isPartial)
 							setClineAsk("tool")
@@ -347,6 +351,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 						case "browser_action_launch":
 							if (!isAutoApproved(lastMessage) && !isPartial) {
 								playSound("notification")
+								showSystemNotification(t("settings:notifications.system.browserAction"))
 							}
 							setSendingDisabled(isPartial)
 							setClineAsk("browser_action_launch")
@@ -357,6 +362,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 						case "command":
 							if (!isAutoApproved(lastMessage) && !isPartial) {
 								playSound("notification")
+								showSystemNotification(t("settings:notifications.system.command"))
 							}
 							setSendingDisabled(isPartial)
 							setClineAsk("command")
@@ -374,6 +380,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 						case "use_mcp_server":
 							if (!isAutoApproved(lastMessage) && !isPartial) {
 								playSound("notification")
+								showSystemNotification(t("settings:notifications.system.useMcpServer"))
 							}
 							setSendingDisabled(isPartial)
 							setClineAsk("use_mcp_server")
@@ -385,6 +392,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 							// extension waiting for feedback. but we can just present a new task button
 							if (!isPartial) {
 								playSound("celebration")
+								showSystemNotification(t("settings:notifications.system.completionResult"))
 							}
 							setSendingDisabled(isPartial)
 							setClineAsk("completion_result")

webview-ui/src/components/settings/NotificationSettings.tsx

@@ -1,30 +1,47 @@
 import { HTMLAttributes } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
-import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeCheckbox, VSCodeButton } from "@vscode/webview-ui-toolkit/react"
 import { Bell } from "lucide-react"
 
 import { SetCachedStateField } from "./types"
 import { SectionHeader } from "./SectionHeader"
 import { Section } from "./Section"
 import { Slider } from "../ui"
+import { vscode } from "../../utils/vscode"
 
 type NotificationSettingsProps = HTMLAttributes<HTMLDivElement> & {
 	ttsEnabled?: boolean
 	ttsSpeed?: number
 	soundEnabled?: boolean
 	soundVolume?: number
-	setCachedStateField: SetCachedStateField<"ttsEnabled" | "ttsSpeed" | "soundEnabled" | "soundVolume">
+	systemNotificationsEnabled?: boolean
+	setCachedStateField: SetCachedStateField<
+		"ttsEnabled" | "ttsSpeed" | "soundEnabled" | "soundVolume" | "systemNotificationsEnabled"
+	>
+	isChangeDetected: boolean
 }
 
 export const NotificationSettings = ({
 	ttsEnabled,
 	ttsSpeed,
 	soundEnabled,
 	soundVolume,
+	systemNotificationsEnabled,
+	isChangeDetected,
 	setCachedStateField,
 	...props
 }: NotificationSettingsProps) => {
 	const { t } = useAppTranslation()
+
+	const onTestNotificationClick = () => {
+		vscode.postMessage({
+			type: "showSystemNotification",
+			notificationOptions: {
+				title: t("settings.notifications.system.testTitle"),
+				message: t("settings.notifications.system.testMessage"),
+			},
+		})
+	}
 	return (
 		<div {...props}>
 			<SectionHeader>
@@ -35,6 +52,26 @@ export const NotificationSettings = ({
 			</SectionHeader>
 
 			<Section>
+				<div>
+					<VSCodeCheckbox
+						checked={systemNotificationsEnabled}
+						onChange={(e: any) => setCachedStateField("systemNotificationsEnabled", e.target.checked)}
+						data-testid="system-notifications-enabled-checkbox">
+						<span className="font-medium">{t("settings:notifications.system.label")}</span>
+					</VSCodeCheckbox>
+					<div className="text-vscode-descriptionForeground text-sm mt-1 mb-2">
+						{t("settings:notifications.system.description")}
+					</div>
+					{systemNotificationsEnabled && !isChangeDetected && (
+						<VSCodeButton
+							appearance="secondary"
+							onClick={onTestNotificationClick}
+							data-testid="test-system-notification-button">
+							{t("settings:notifications.system.testButton")}
+						</VSCodeButton>
+					)}
+				</div>
+
 				<div>
 					<VSCodeCheckbox
 						checked={ttsEnabled}

webview-ui/src/components/settings/SettingsView.tsx

@@ -157,6 +157,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 		ttsEnabled,
 		ttsSpeed,
 		soundVolume,
+		systemNotificationsEnabled,
 		telemetrySetting,
 		terminalOutputLineLimit,
 		terminalOutputCharacterLimit,
@@ -319,6 +320,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			vscode.postMessage({ type: "ttsEnabled", bool: ttsEnabled })
 			vscode.postMessage({ type: "ttsSpeed", value: ttsSpeed })
 			vscode.postMessage({ type: "soundVolume", value: soundVolume })
+			vscode.postMessage({ type: "systemNotificationsEnabled", bool: systemNotificationsEnabled })
 			vscode.postMessage({ type: "diffEnabled", bool: diffEnabled })
 			vscode.postMessage({ type: "enableCheckpoints", bool: enableCheckpoints })
 			vscode.postMessage({ type: "browserViewportSize", text: browserViewportSize })
@@ -695,7 +697,9 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 							ttsSpeed={ttsSpeed}
 							soundEnabled={soundEnabled}
 							soundVolume={soundVolume}
+							systemNotificationsEnabled={systemNotificationsEnabled}
 							setCachedStateField={setCachedStateField}
+							isChangeDetected={isChangeDetected}
 						/>
 					)}