Add claude config change event

Author: colinmcneil

src/extension/ui/src/Usage.tsx

@@ -2,21 +2,40 @@
  * Anonymous tracking event for registry changes
  */
 
-type Record = {
+interface Record {
     event: string;
     properties: object;
     event_timestamp: number;
     source: string;
 };
 
+export interface RegistryChangedRecord extends Record {
+    event: 'registry-changed';
+    properties: {
+        name: string;
+        ref: string;
+        action: 'remove' | 'add';
+    };
+};
+
+export interface ClaudeConfigChangedRecord extends Record {
+    event: 'claude-config-changed';
+    properties: {
+        action: 'add' | 'remove';
+    };
+};
+
 const eventsQueue: Record[] = [];
 
 let processInterval: NodeJS.Timeout;
 
-export const registryChanged = (name: string, ref: string, action: 'remove' | 'add') => {
+type Event = (RegistryChangedRecord | ClaudeConfigChangedRecord)['event'];
+type Properties = (RegistryChangedRecord | ClaudeConfigChangedRecord)['properties'];
+
+export const trackEvent = (event: Event, properties: Properties) => {
     const record: Record = {
-        event: 'registry-changed',
-        properties: { name, ref, action },
+        event,
+        properties,
         event_timestamp: Date.now(),
         source: 'labs-ai-tools-for-devs-dd'
     };
@@ -38,7 +57,7 @@ const processEventsQueue = () => {
     sendRecords(events);
 };
 
-const sendRecords = (records: any[]) => {
+const sendRecords = (records: Record[]) => {
     const url = 'https://nd14xwptgj.execute-api.us-east-1.amazonaws.com/stage/v1/track';
     const apiKey = '1234567890';
 

src/extension/ui/src/components/ClaudeConfigSyncStatus.tsx

@@ -2,6 +2,7 @@ import { v1 } from "@docker/extension-api-client-types";
 import { Badge, Button, Dialog, DialogContent, DialogContentText, DialogTitle, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 import { writeFilesToHost } from "../FileWatcher";
+import { trackEvent } from "../Usage";
 
 const DOCKER_MCP_CONFIG = {
     "command": "docker",
@@ -94,6 +95,7 @@ export const ClaudeConfigSyncStatus = ({ client }: { client: v1.DockerDesktopCli
         return <Dialog open={showConfigModal} onClose={() => setShowConfigModal(false)} maxWidth="lg">
             <DialogTitle>Current Claude Desktop Config</DialogTitle>
             {status.state === 'has docker_mcp' && <Button onClick={async () => {
+                trackEvent('claude-config-changed', { action: 'remove' })
                 // Remove docker_mcp from config
                 if (claudeConfig && claudeConfig.mcpServers) {
                     const newConfig = { ...claudeConfig }
@@ -104,6 +106,7 @@ export const ClaudeConfigSyncStatus = ({ client }: { client: v1.DockerDesktopCli
                 }
             }}>Remove Docker MCP</Button>}
             {status.state === 'missing docker_mcp' && <Button onClick={() => {
+                trackEvent('claude-config-changed', { action: 'add' })
                 // Add docker_mcp to config
                 if (claudeConfig && claudeConfig.mcpServers) {
                     const newConfig = { ...claudeConfig }

src/extension/ui/src/components/PromptCard.tsx

@@ -1,11 +1,9 @@
 import { CircularProgress, Stack } from "@mui/material";
 import Button from '@mui/material/Button';
-
-
 import { Card, CardActions, CardContent, CardMedia, Typography } from "@mui/material";
 import { Ref } from "../Refs";
 import { useState } from "react";
-import { registryChanged } from "../Usage";
+import { trackEvent } from "../Usage";
 
 export interface CatalogItem {
     description?: string;
@@ -43,7 +41,7 @@ export function CatalogItemCard({ openUrl, item, canRegister, registered, regist
                 <Button
                     size="small"
                     onClick={() => {
-                        registryChanged(item.name, item.ref, registered ? 'remove' : 'add');
+                        trackEvent('registry-changed', { name: item.name, ref: item.ref, action: registered ? 'remove' : 'add' });
                         setIsRegistering(true)
                         if (registered) {
                             unregister(item).then(() => {