Adds telemetry for modes: mode created, mode modified, mode settings opened

Author: Bruno Bergher

packages/telemetry/src/TelemetryService.ts

@@ -152,6 +152,30 @@ export class TelemetryService {
 		this.captureEvent(TelemetryEventName.CONSECUTIVE_MISTAKE_ERROR, { taskId })
 	}
 
+	/**
+	 * Captures when the ModesView settings UI is shown
+	 */
+	public captureModesViewShown(): void {
+		this.captureEvent(TelemetryEventName.MODE_SETTINGS_SHOWN)
+	}
+
+	/**
+	 * Captures when a setting is changed in ModesView
+	 * @param settingName The name of the setting that was changed
+	 */
+	public captureModeSettingChanged(settingName: string): void {
+		this.captureEvent(TelemetryEventName.MODE_SETTINGS_CHANGED, { settingName })
+	}
+
+	/**
+	 * Captures when a user creates a new custom mode
+	 * @param modeSlug The slug of the custom mode
+	 * @param modeName The name of the custom mode
+	 */
+	public captureCustomModeCreated(modeSlug: string, modeName: string): void {
+		this.captureEvent(TelemetryEventName.CUSTOM_MODE_CREATED, { modeSlug, modeName })
+	}
+
 	/**
 	 * Captures a marketplace item installation event
 	 * @param itemId The unique identifier of the marketplace item

packages/types/src/telemetry.ts

@@ -31,6 +31,10 @@ export enum TelemetryEventName {
 	CHECKPOINT_RESTORED = "Checkpoint Restored",
 	CHECKPOINT_DIFFED = "Checkpoint Diffed",
 
+	MODE_SETTINGS_SHOWN = "Mode Settings Shown",
+	MODE_SETTINGS_CHANGED = "Mode Setting Changed",
+	CUSTOM_MODE_CREATED = "Custom Mode Created",
+
 	CONTEXT_CONDENSED = "Context Condensed",
 	SLIDING_WINDOW_TRUNCATION = "Sliding Window Truncation",
 
@@ -119,6 +123,9 @@ export const rooCodeTelemetryEventSchema = z.discriminatedUnion("type", [
 			TelemetryEventName.CONSECUTIVE_MISTAKE_ERROR,
 			TelemetryEventName.CONTEXT_CONDENSED,
 			TelemetryEventName.SLIDING_WINDOW_TRUNCATION,
+			TelemetryEventName.MODE_SETTINGS_SHOWN,
+			TelemetryEventName.MODE_SETTINGS_CHANGED,
+			TelemetryEventName.CUSTOM_MODE_CREATED,
 		]),
 		properties: telemetryPropertiesSchema,
 	}),

src/core/webview/webviewMessageHandler.ts

@@ -862,6 +862,21 @@ export const webviewMessageHandler = async (
 					hasOpenedModeSelector: currentState.hasOpenedModeSelector ?? false,
 				}
 				provider.postMessageToWebview({ type: "state", state: stateWithPrompts })
+
+				if (TelemetryService.hasInstance()) {
+					// Determine which setting was changed by comparing objects
+					const oldPrompt = existingPrompts[message.promptMode] || {}
+					const newPrompt = message.customPrompt
+					const changedSettings = Object.keys(newPrompt).filter(
+						(key) =>
+							JSON.stringify((oldPrompt as Record<string, unknown>)[key]) !==
+							JSON.stringify((newPrompt as Record<string, unknown>)[key]),
+					)
+
+					if (changedSettings.length > 0) {
+						TelemetryService.instance.captureModeSettingChanged(changedSettings[0])
+					}
+				}
 			}
 			break
 		case "deleteMessage": {
@@ -1326,12 +1341,41 @@ export const webviewMessageHandler = async (
 			break
 		case "updateCustomMode":
 			if (message.modeConfig) {
+				// Check if this is a new mode or an update to an existing mode
+				const existingModes = await provider.customModesManager.getCustomModes()
+				const isNewMode = !existingModes.some((mode) => mode.slug === message.modeConfig?.slug)
+
 				await provider.customModesManager.updateCustomMode(message.modeConfig.slug, message.modeConfig)
 				// Update state after saving the mode
 				const customModes = await provider.customModesManager.getCustomModes()
 				await updateGlobalState("customModes", customModes)
 				await updateGlobalState("mode", message.modeConfig.slug)
 				await provider.postStateToWebview()
+
+				// Track telemetry for custom mode creation or update
+				if (TelemetryService.hasInstance()) {
+					if (isNewMode) {
+						// This is a new custom mode
+						TelemetryService.instance.captureCustomModeCreated(
+							message.modeConfig.slug,
+							message.modeConfig.name,
+						)
+					} else {
+						// Determine which setting was changed by comparing objects
+						const existingMode = existingModes.find((mode) => mode.slug === message.modeConfig?.slug)
+						const changedSettings = existingMode
+							? Object.keys(message.modeConfig).filter(
+									(key) =>
+										JSON.stringify((existingMode as Record<string, unknown>)[key]) !==
+										JSON.stringify((message.modeConfig as Record<string, unknown>)[key]),
+								)
+							: []
+
+						if (changedSettings.length > 0) {
+							TelemetryService.instance.captureModeSettingChanged(changedSettings[0])
+						}
+					}
+				}
 			}
 			break
 		case "deleteCustomMode":
@@ -1510,6 +1554,7 @@ export const webviewMessageHandler = async (
 					)
 					await provider.postStateToWebview()
 					console.log(`Marketplace item installed and config file opened: ${configFilePath}`)
+
 					// Send success message to webview
 					provider.postMessageToWebview({
 						type: "marketplaceInstallResult",
@@ -1562,7 +1607,11 @@ export const webviewMessageHandler = async (
 
 		case "switchTab": {
 			if (message.tab) {
-				// Send a message to the webview to switch to the specified tab
+				// This could be more generic, but keeping it specific for now
+				if (message.tab === "modes" && TelemetryService.hasInstance()) {
+					TelemetryService.instance.captureModesViewShown()
+				}
+
 				await provider.postMessageToWebview({ type: "action", action: "switchTab", tab: message.tab })
 			}
 			break

webview-ui/src/components/modes/ModesView.tsx

@@ -125,6 +125,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 
 	const updateCustomMode = useCallback((slug: string, modeConfig: ModeConfig) => {
 		const source = modeConfig.source || "global"
+
 		vscode.postMessage({
 			type: "updateCustomMode",
 			slug,
@@ -269,6 +270,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 		const newMode: ModeConfig = {
 			slug: newModeSlug,
 			name: newModeName,
+			description: newModeDescription.trim() || undefined,
 			roleDefinition: newModeRoleDefinition.trim(),
 			whenToUse: newModeWhenToUse.trim() || undefined,
 			customInstructions: newModeCustomInstructions.trim() || undefined,
@@ -314,6 +316,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 	}, [
 		newModeName,
 		newModeSlug,
+		newModeDescription,
 		newModeRoleDefinition,
 		newModeWhenToUse, // Add whenToUse dependency
 		newModeCustomInstructions,
@@ -361,6 +364,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 				}
 				if (customMode) {
 					const source = customMode.source || "global"
+
 					updateCustomMode(customMode.slug, {
 						...customMode,
 						groups: newGroups,