Add json editor support to client side tool

Fix the minor bugs of client side tool

Remove atom agent from boot-strap and support remember me prerequisite dialog

Author: dharam1291

ui/src/components/AiPlayground.tsx

@@ -1006,7 +1006,20 @@ const AiPlayground: React.FC = () => {
       console.log('Has client-side tools:', hasClientSideTools(agent));
 
       // Check if agent has client-side tools and show prerequisite dialog
+      // Skip showing dialog if user has dismissed it within the last 14 days
       if (hasClientSideTools(agent)) {
+        const dismissedUntil = localStorage.getItem('clientSideToolsPrerequisiteDismissed');
+        if (dismissedUntil) {
+          const expiryDate = new Date(dismissedUntil);
+          const now = new Date();
+          if (now < expiryDate) {
+            console.log('Prerequisite dialog dismissed until:', expiryDate);
+            return;
+          } else {
+            // Expired, remove from localStorage
+            localStorage.removeItem('clientSideToolsPrerequisiteDismissed');
+          }
+        }
         console.log('Showing prerequisite dialog for agent:', agent.name);
         setPrerequisiteDialogOpen(true);
       }

ui/src/components/ArrayItemsModal.tsx

@@ -51,7 +51,8 @@ const ArrayItemsModal: React.FC<ArrayItemsModalProps> = ({
     if (open) {
       if (initialItems) {
         setItems(initialItems);
-        setPropertyType(initialItems.type);
+        // If property has enum values, treat it as enum type in UI (even if saved type is 'string')
+        setPropertyType(initialItems.enum && initialItems.enum.length > 0 ? 'enum' : initialItems.type);
         setPropertyDescription(initialItems.description || '');
         setPropertyDefaultValue(initialItems.default !== undefined ? JSON.stringify(initialItems.default) : '');
         setPropertyEnumValues(initialItems.enum || []);
@@ -120,7 +121,7 @@ const ArrayItemsModal: React.FC<ArrayItemsModalProps> = ({
     const parsedDefaultValue = parseDefaultValue(propertyDefaultValue, propertyType);
 
     const newItems: PropertyDefinition = {
-      type: propertyType,
+      type: propertyType === 'enum' ? 'string' : propertyType,
       description: propertyDescription.trim() || undefined,
       ...(parsedDefaultValue !== undefined && { default: parsedDefaultValue }),
       ...(propertyType === 'enum' && propertyEnumValues.length > 0 && { enum: propertyEnumValues }),
@@ -134,7 +135,8 @@ const ArrayItemsModal: React.FC<ArrayItemsModalProps> = ({
   const handleCancel = () => {
     if (initialItems) {
       setItems(initialItems);
-      setPropertyType(initialItems.type);
+      // If property has enum values, treat it as enum type in UI (even if saved type is 'string')
+      setPropertyType(initialItems.enum && initialItems.enum.length > 0 ? 'enum' : initialItems.type);
       setPropertyDescription(initialItems.description || '');
       setPropertyDefaultValue(initialItems.default !== undefined ? JSON.stringify(initialItems.default) : '');
       setPropertyEnumValues(initialItems.enum || []);

ui/src/components/ClientSideToolsPrerequisiteDialog.tsx

@@ -9,6 +9,9 @@ import {
 import { AlertTriangle, Eye, EyeOff, Copy, Check } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
 import { apiClient } from '@/lib/api';
 
 interface ClientSideToolsPrerequisiteDialogProps {
@@ -27,6 +30,7 @@ const ClientSideToolsPrerequisiteDialog: React.FC<ClientSideToolsPrerequisiteDia
   const [isLoading, setIsLoading] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
   const [isCopied, setIsCopied] = React.useState(false);
+  const [rememberMe, setRememberMe] = React.useState(false);
 
   const fetchCredentials = async () => {
     setIsLoading(true);
@@ -45,6 +49,8 @@ const ClientSideToolsPrerequisiteDialog: React.FC<ClientSideToolsPrerequisiteDia
   React.useEffect(() => {
     if (open && agentName) {
       fetchCredentials();
+      // Reset checkbox state when dialog opens
+      setRememberMe(false);
     }
   }, [open, agentName]);
 
@@ -59,8 +65,18 @@ const ClientSideToolsPrerequisiteDialog: React.FC<ClientSideToolsPrerequisiteDia
     }
   };
 
+  const handleClose = (open: boolean) => {
+    if (!open && rememberMe) {
+      // Store the preference in localStorage with timestamp (14 days from now)
+      const expiryDate = new Date();
+      expiryDate.setDate(expiryDate.getDate() + 14);
+      localStorage.setItem('clientSideToolsPrerequisiteDismissed', expiryDate.toISOString());
+    }
+    onOpenChange(open);
+  };
+
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-2xl">
         <DialogHeader>
           <div className="flex items-center gap-2">
@@ -198,6 +214,22 @@ const ClientSideToolsPrerequisiteDialog: React.FC<ClientSideToolsPrerequisiteDia
             </div>
           </div>
         </div>
+
+        <Separator className="my-4" />
+
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="remember-me"
+            checked={rememberMe}
+            onCheckedChange={(checked) => setRememberMe(checked === true)}
+          />
+          <Label
+            htmlFor="remember-me"
+            className="text-sm font-normal cursor-pointer text-muted-foreground"
+          >
+            Don't show this again for 14 days
+          </Label>
+        </div>
       </DialogContent>
     </Dialog>
   );