merge

frontend/src/app/(dashboard)/agents/config/[agentId]/page.tsx

@@ -201,6 +201,49 @@ export default function AgentConfigurationPage() {
     setFormData(prev => ({ ...prev, [field]: value }));
   }, [isViewingOldVersion]);
 
+  // Dedicated name save handler that saves immediately
+  const handleNameSave = useCallback(async (name: string) => {
+    if (!agent || isViewingOldVersion || isSaving) {
+      return;
+    }
+    
+    const isSunaAgent = agent?.metadata?.is_suna_default || false;
+    const restrictions = agent?.metadata?.restrictions || {};
+    
+    if (isSunaAgent && restrictions.name_editable === false) {
+      toast.error("Name cannot be edited", {
+        description: "Suna's name is managed centrally and cannot be changed.",
+      });
+      return;
+    }
+    
+    // Update form data immediately
+    setFormData(prev => ({ ...prev, name }));
+    
+    setIsSaving(true);
+    
+    try {
+      await updateAgentMutation.mutateAsync({
+        agentId,
+        name,
+        description: formData.description,
+        is_default: formData.is_default,
+        profile_image_url: formData.profile_image_url || undefined,
+      });
+      
+      // Update original data to reflect the save
+      setOriginalData(prev => ({ ...prev, name }));
+      toast.success('Agent name saved');
+    } catch (error) {
+      console.error('❌ Name save error:', error);
+      toast.error('Failed to save agent name');
+      // Revert the name change on error
+      setFormData(prev => ({ ...prev, name: formData.name }));
+    } finally {
+      setIsSaving(false);
+    }
+  }, [isViewingOldVersion, formData, agent, agentId, updateAgentMutation, isSaving]);
+
   const handleSystemPromptSave = useCallback(async (value: string) => {
     if (!agent || isViewingOldVersion || isSaving) {
       return;

frontend/src/components/agents/agent-version-switcher.tsx

@@ -112,7 +112,6 @@ export function AgentVersionSwitcher({
     return (
       <div className="flex items-center gap-2 px-3 py-2">
         <Loader2 className="h-4 w-4 animate-spin" />
-        <span className="text-sm text-muted-foreground">Loading versions...</span>
       </div>
     );
   }

frontend/src/components/thread/thread-site-header.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Button } from "@/components/ui/button"
-import { FolderOpen, Link, PanelRightOpen, Check, X, Menu, Share2, Book } from "lucide-react"
+import { FolderOpen, Link, PanelRightOpen, Menu, Share2, Book } from "lucide-react"
 import { usePathname } from "next/navigation"
 import { toast } from "sonner"
 import {
@@ -152,33 +152,15 @@ export function SiteHeader({
 
         <div className="flex flex-1 items-center gap-2 px-3">
           {isEditing ? (
-            <div className="flex items-center gap-1">
+            <Input
-              <Input
+              ref={inputRef}
-                ref={inputRef}
+              value={editName}
-                value={editName}
+              onChange={(e) => setEditName(e.target.value)}
-                onChange={(e) => setEditName(e.target.value)}
+              onKeyDown={handleKeyDown}
-                onKeyDown={handleKeyDown}
+              onBlur={saveNewName}
-                onBlur={saveNewName}
+              className="h-8 w-auto min-w-[180px] text-base font-medium"
-                className="h-8 w-auto min-w-[180px] text-base font-medium"
+              maxLength={50}
-                maxLength={50}
+            />
-              />
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-7 w-7"
-                onClick={saveNewName}
-              >
-                <Check className="h-3.5 w-3.5" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-7 w-7"
-                onClick={cancelEditing}
-              >
-                <X className="h-3.5 w-3.5" />
-              </Button>
-            </div>
           ) : !projectName || projectName === 'Project' ? (
             <Skeleton className="h-5 w-32" />
           ) : (