Add a UI Toggle to Enable/Disable Dev-Time Tracing in BI

workspaces/ballerina/ballerina-extension/src/utils/bi.ts

@@ -112,6 +112,10 @@ generated/
 # Contains configuration values used during development time.
 # See https://ballerina.io/learn/provide-values-to-configurable-variables/ for more details.
 Config.toml
+
+# File used to enable development-time tracing.
+# This should not be committed to version control.
+trace_enabled.bal
 `;
 
 export function getUsername(): string {

workspaces/ballerina/ballerina-visualizer/src/views/BI/DiagramWrapper/index.tsx

@@ -111,6 +111,8 @@ export function DiagramWrapper(param: DiagramWrapperProps) {
     const [functionModel, setFunctionModel] = useState<FunctionModel>();
     const [servicePosition, setServicePosition] = useState<NodePosition>();
     const [isSaving, setIsSaving] = useState(false);
+    const [isTracingEnabled, setIsTracingEnabled] = useState(false);
+    const [isToggling, setIsToggling] = useState(false);
 
     useEffect(() => {
         rpcClient.getVisualizerLocation().then((location) => {
@@ -164,6 +166,37 @@ export function DiagramWrapper(param: DiagramWrapperProps) {
     }, [rpcClient]);
 
 
+    useEffect(() => {
+        checkTracingStatus();
+    }, []);
+
+    const checkTracingStatus = async () => {
+        try {
+            const status = await rpcClient.getAgentChatRpcClient().getTracingStatus();
+            setIsTracingEnabled(status.enabled);
+        } catch (error) {
+            setIsTracingEnabled(false);
+        }
+    };
+
+    const handleToggleTracing = async () => {
+        if (isToggling) {
+            return;
+        }
+
+        setIsToggling(true);
+        try {
+            const command = isTracingEnabled ? "ballerina.disableTracing" : "ballerina.enableTracing";
+            await rpcClient.getCommonRpcClient().executeCommand({ commands: [command] });
+            await checkTracingStatus();
+        } catch (error) {
+            console.error("Failed to toggle tracing:", error);
+            throw error;
+        } finally {
+            setIsToggling(false);
+        }
+    };
+
     const handleFunctionClose = () => {
         setFunctionModel(undefined);
     };
@@ -269,25 +302,44 @@ export function DiagramWrapper(param: DiagramWrapperProps) {
 
     // Calculate actions based on conditions
     const getActions = () => {
+        const tracingButton = (
+            <ActionButton
+                appearance={isTracingEnabled ? "primary" : "secondary"}
+                onClick={handleToggleTracing}
+                disabled={isToggling}
+            >
+                <Icon
+                    name={isTracingEnabled ? "telescope" : "circle-slash"}
+                    isCodicon={true}
+                    sx={{ marginRight: 5, width: 16, height: 16, fontSize: 14 }}
+                />
+                {isTracingEnabled ? "Tracing: On" : "Tracing: Off"}
+            </ActionButton>
+        );
+
         if (isAgent) {
             return (
-                <ActionButton
-                    appearance="secondary"
-                    onClick={() => handleResourceTryIt(parentMetadata?.accessor || "", parentMetadata?.label || "")}
-                >
-                    <Icon
-                        name="comment-discussion"
-                        isCodicon={true}
-                        sx={{ marginRight: 5, width: 16, height: 16, fontSize: 14 }}
-                    />
-                    Chat
-                </ActionButton>
+                <>
+                    {tracingButton}
+                    <ActionButton
+                        appearance="secondary"
+                        onClick={() => handleResourceTryIt(parentMetadata?.accessor || "", parentMetadata?.label || "")}
+                    >
+                        <Icon
+                            name="comment-discussion"
+                            isCodicon={true}
+                            sx={{ marginRight: 5, width: 16, height: 16, fontSize: 14 }}
+                        />
+                        Chat
+                    </ActionButton>
+                </>
             );
         }
 
         if (isResource && serviceType === "http") {
             return (
                 <>
+                    {tracingButton}
                     <ActionButton id="bi-edit" appearance="secondary" onClick={() => getFunctionModel()}>
                         <Icon
                             name="bi-settings"