Merge pull request #3369 from Kilo-Org/cli-show-notifications

CLI: Add support for notifications

Author: kevinvandijk

.changeset/major-sloths-mix.md

@@ -0,0 +1,5 @@
+---
+"@kilocode/cli": patch
+---
+
+Add support for showing Kilo Code notifications

cli/src/cli.ts

@@ -7,11 +7,13 @@ import { App } from "./ui/App.js"
 import { logs } from "./services/logs.js"
 import { extensionServiceAtom } from "./state/atoms/service.js"
 import { initializeServiceEffectAtom } from "./state/atoms/effects.js"
-import { loadConfigAtom, mappedExtensionStateAtom } from "./state/atoms/config.js"
+import { loadConfigAtom, mappedExtensionStateAtom, providersAtom } from "./state/atoms/config.js"
 import { ciExitReasonAtom } from "./state/atoms/ci.js"
 import { requestRouterModelsAtom } from "./state/atoms/actions.js"
 import { loadHistoryAtom } from "./state/atoms/history.js"
 import { getTelemetryService, getIdentityManager } from "./services/telemetry/index.js"
+import { notificationsAtom, notificationsErrorAtom, notificationsLoadingAtom } from "./state/atoms/notifications.js"
+import { fetchKilocodeNotifications } from "./utils/notifications.js"
 
 export interface CLIOptions {
 	mode?: string
@@ -117,7 +119,12 @@ export class CLI {
 			logs.debug("CLI configuration injected into extension", "CLI")
 
 			// Request router models after configuration is injected
-			await this.requestRouterModels()
+			void this.requestRouterModels()
+
+			if (!this.options.ci && !this.options.prompt) {
+				// Fetch Kilocode notifications if provider is kilocode
+				void this.fetchNotifications()
+			}
 
 			this.isInitialized = true
 			logs.info("Kilo Code CLI initialized successfully", "CLI")
@@ -283,6 +290,39 @@ export class CLI {
 		}
 	}
 
+	/**
+	 * Fetch notifications from Kilocode backend if provider is kilocode
+	 */
+	private async fetchNotifications(): Promise<void> {
+		if (!this.store) {
+			logs.warn("Cannot fetch notifications: store not available", "CLI")
+			return
+		}
+
+		try {
+			const providers = this.store.get(providersAtom)
+
+			const provider = providers.find(({ provider }) => provider === "kilocode")
+
+			if (!provider) {
+				logs.debug("No provider configured, skipping notification fetch", "CLI")
+				return
+			}
+
+			this.store.set(notificationsLoadingAtom, true)
+
+			const notifications = await fetchKilocodeNotifications(provider)
+
+			this.store.set(notificationsAtom, notifications)
+		} catch (error) {
+			const err = error instanceof Error ? error : new Error(String(error))
+			this.store.set(notificationsErrorAtom, err)
+			logs.error("Failed to fetch notifications", "CLI", { error })
+		} finally {
+			this.store.set(notificationsLoadingAtom, false)
+		}
+	}
+
 	/**
 	 * Get the ExtensionService instance
 	 */

cli/src/state/atoms/index.ts

@@ -150,6 +150,16 @@ export {
 	syncConfigToExtensionEffectAtom,
 } from "./config-sync.js"
 
+// ============================================================================
+// Notifications Atoms - Kilocode notifications management
+// ============================================================================
+export {
+	// Core notifications atoms
+	notificationsAtom,
+	notificationsLoadingAtom,
+	notificationsErrorAtom,
+} from "./notifications.js"
+
 // ============================================================================
 // UI Atoms - Command-based UI state
 // ============================================================================
@@ -219,3 +229,4 @@ export type {
 export type { CliMessage } from "../../types/cli.js"
 export type { CommandSuggestion, ArgumentSuggestion } from "../../services/autocomplete.js"
 export type { FollowupSuggestion } from "./ui.js"
+export type { KilocodeNotification } from "./notifications.js"

cli/src/state/atoms/notifications.ts

@@ -0,0 +1,29 @@
+import { atom } from "jotai"
+
+/**
+ * Notification type matching the backend API response
+ */
+export interface KilocodeNotification {
+	id: string
+	title: string
+	message: string
+	action?: {
+		actionText: string
+		actionURL: string
+	}
+}
+
+/**
+ * Core notifications atom - holds the list of notifications
+ */
+export const notificationsAtom = atom<KilocodeNotification[]>([])
+
+/**
+ * Loading state atom for notification fetching
+ */
+export const notificationsLoadingAtom = atom<boolean>(false)
+
+/**
+ * Error state atom for notification fetching
+ */
+export const notificationsErrorAtom = atom<Error | null>(null)

cli/src/ui/UI.tsx

@@ -3,7 +3,7 @@
  * Refactored to use specialized hooks for better maintainability
  */
 
-import React, { useCallback, useEffect, useRef } from "react"
+import React, { useCallback, useEffect, useRef, useState } from "react"
 import { Box, Text } from "ink"
 import { useAtomValue, useSetAtom } from "jotai"
 import { isStreamingAtom, errorAtom, addMessageAtom, messageResetCounterAtom } from "../state/atoms/ui.js"
@@ -27,6 +27,8 @@ import { AppOptions } from "./App.js"
 import { logs } from "../services/logs.js"
 import { createConfigErrorInstructions, createWelcomeMessage } from "./utils/welcomeMessage.js"
 import { generateUpdateAvailableMessage, getAutoUpdateStatus } from "../utils/auto-update.js"
+import { generateNotificationMessage } from "../utils/notifications.js"
+import { notificationsAtom } from "../state/atoms/notifications.js"
 import { useTerminal } from "../state/hooks/useTerminal.js"
 
 // Initialize commands on module load
@@ -43,6 +45,8 @@ export const UI: React.FC<UIAppProps> = ({ options, onExit }) => {
 	const theme = useTheme()
 	const configValidation = useAtomValue(configValidationAtom)
 	const resetCounter = useAtomValue(messageResetCounterAtom)
+	const notifications = useAtomValue(notificationsAtom)
+	const [versionStatus, setVersionStatus] = useState<Awaited<ReturnType<typeof getAutoUpdateStatus>>>()
 
 	// Initialize CI mode configuration
 	const setCIMode = useSetAtom(setCIModeAtom)
@@ -164,21 +168,28 @@ export const UI: React.FC<UIAppProps> = ({ options, onExit }) => {
 		}
 	}, [options.ci, options.prompt, addMessage, configValidation])
 
-	// Auto-update check on mount
-	const checkVersion = async () => {
-		const status = await getAutoUpdateStatus()
-		if (status.isOutdated) {
-			addMessage(generateUpdateAvailableMessage(status))
+	useEffect(() => {
+		const checkVersion = async () => {
+			setVersionStatus(await getAutoUpdateStatus())
 		}
-	}
 
-	useEffect(() => {
 		if (!autoUpdatedCheckedRef.current && !options.ci) {
 			autoUpdatedCheckedRef.current = true
 			checkVersion()
 		}
 	}, [])
 
+	useEffect(() => {
+		if (!versionStatus) return
+
+		if (versionStatus.isOutdated) {
+			addMessage(generateUpdateAvailableMessage(versionStatus))
+		} else if (notifications.length > 0 && notifications[0]) {
+			// Only show notification if there's no pending update
+			addMessage(generateNotificationMessage(notifications[0]))
+		}
+	}, [notifications, versionStatus])
+
 	// Exit if provider configuration is invalid
 	useEffect(() => {
 		if (!configValidation.valid) {

cli/src/utils/notifications.ts

@@ -0,0 +1,89 @@
+import { getKiloUrlFromToken } from "@roo-code/types"
+import { logs } from "../services/logs.js"
+import type { KilocodeNotification } from "../state/atoms/notifications.js"
+import type { ProviderConfig } from "../config/types.js"
+
+/**
+ * Response from the Kilocode notifications API
+ */
+interface NotificationsResponse {
+	notifications: KilocodeNotification[]
+}
+
+/**
+ * Fetch notifications from the Kilocode backend
+ *
+ * @param provider - The provider configuration (must be a kilocode provider)
+ * @returns Array of notifications, or empty array if fetch fails or provider is not kilocode
+ */
+export async function fetchKilocodeNotifications({
+	provider,
+	kilocodeToken,
+}: ProviderConfig): Promise<KilocodeNotification[]> {
+	if (provider !== "kilocode") {
+		logs.debug("Provider is not kilocode, skipping notification fetch", "fetchKilocodeNotifications", {
+			provider,
+		})
+		return []
+	}
+
+	if (!kilocodeToken) {
+		logs.debug("No kilocode token found, skipping notification fetch", "fetchKilocodeNotifications")
+		return []
+	}
+
+	const url = getKiloUrlFromToken("https://api.kilocode.ai/api/users/notifications", kilocodeToken)
+
+	logs.debug("Fetching Kilocode notifications", "NotificationsUtil", { url })
+
+	const response = await fetch(url, {
+		headers: {
+			Authorization: `Bearer ${kilocodeToken}`,
+			"Content-Type": "application/json",
+		},
+	})
+
+	if (!response.ok) {
+		logs.error("Failed to fetch Kilocode notifications", "NotificationsUtil", {
+			status: response.status,
+		})
+		return []
+	}
+
+	const { notifications } = (await response.json()) as NotificationsResponse
+
+	return notifications
+}
+
+/**
+ * Check if a provider supports notifications
+ *
+ * @param provider - The provider configuration
+ * @returns true if the provider supports notifications
+ */
+export function supportsNotifications(provider: ProviderConfig): boolean {
+	return provider.provider === "kilocode" && !!provider.kilocodeToken
+}
+
+/**
+ * Generate a CLI message from a Kilocode notification
+ *
+ * @param notification - The notification to convert to a CLI message
+ * @returns A CLI message object
+ */
+export function generateNotificationMessage(notification: KilocodeNotification) {
+	const timestamp = Date.now()
+
+	let content = `## ${notification.title}\n\n${notification.message}`
+
+	if (notification.action) {
+		content += `\n\n[${notification.action.actionText}](${notification.action.actionURL})`
+	}
+
+	return {
+		id: `notification-${notification.id}-${timestamp}`,
+		ts: timestamp,
+		type: "system" as const,
+		content,
+	}
+}