Fixed index increasing and allow block name changes

app/w/components/workflow-block/workflow-block.tsx

@@ -34,6 +34,9 @@ export function WorkflowBlock({
   const horizontalHandles = useWorkflowStore(
     (state) => state.blocks[id]?.horizontalHandles ?? false
   )
+  const [isEditing, setIsEditing] = useState(false)
+  const [editedName, setEditedName] = useState('')
+  const updateBlockName = useWorkflowStore((state) => state.updateBlockName)
 
   function groupSubBlocks(subBlocks: SubBlockConfig[]) {
     const rows: SubBlockConfig[][] = []
@@ -61,6 +64,26 @@ export function WorkflowBlock({
 
   const subBlockRows = groupSubBlocks(workflow.subBlocks)
 
+  const handleNameClick = () => {
+    setEditedName(name)
+    setIsEditing(true)
+  }
+
+  const handleNameSubmit = () => {
+    if (editedName.trim()) {
+      updateBlockName(id, editedName.trim())
+      setIsEditing(false)
+    }
+  }
+
+  const handleNameKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleNameSubmit()
+    } else if (e.key === 'Escape') {
+      setIsEditing(false)
+    }
+  }
+
   return (
     <Card
       className={cn(
@@ -92,7 +115,25 @@ export function WorkflowBlock({
           >
             <toolbar.icon className="w-5 h-5 text-white" />
           </div>
-          <span className="font-medium text-md">{name}</span>
+          {isEditing ? (
+            <input
+              type="text"
+              value={editedName}
+              onChange={(e) => setEditedName(e.target.value.slice(0, 40))}
+              onBlur={handleNameSubmit}
+              onKeyDown={handleNameKeyDown}
+              autoFocus
+              className="font-medium text-md bg-transparent border-none outline-none p-0 w-[200px]"
+              maxLength={40}
+            />
+          ) : (
+            <span
+              className="font-medium text-md hover:text-muted-foreground cursor-text"
+              onClick={handleNameClick}
+            >
+              {name}
+            </span>
+          )}
         </div>
         {!isEnabled && (
           <Badge

stores/workflow/types.ts

@@ -47,6 +47,7 @@ export interface WorkflowActions {
   toggleBlockEnabled: (id: string) => void
   duplicateBlock: (id: string) => void
   toggleBlockHandles: (id: string) => void
+  updateBlockName: (id: string, name: string) => void
 }
 
 export type WorkflowStore = WorkflowState & WorkflowActions 

stores/workflow/workflow-store.ts

@@ -208,17 +208,22 @@ export const useWorkflowStore = create<WorkflowStoreWithHistory>()(
 
         const newId = crypto.randomUUID()
         const offsetPosition = {
-          x: block.position.x + 250, // Offset to the right
-          y: block.position.y + 20,  // Slight offset down
+          x: block.position.x + 250,
+          y: block.position.y + 20,
         }
 
-        // Deep clone the block's subBlocks
+        // More efficient name handling
+        const match = block.name.match(/(.*?)(\d+)?$/)
+        const newName = match && match[2] 
+          ? `${match[1]}${parseInt(match[2]) + 1}`
+          : `${block.name} 1`
+
         const newSubBlocks = Object.entries(block.subBlocks).reduce(
           (acc, [subId, subBlock]) => ({
             ...acc,
             [subId]: {
               ...subBlock,
-              value: JSON.parse(JSON.stringify(subBlock.value)), // Deep clone values
+              value: JSON.parse(JSON.stringify(subBlock.value)),
             },
           }),
           {}
@@ -230,7 +235,7 @@ export const useWorkflowStore = create<WorkflowStoreWithHistory>()(
             [newId]: {
               ...block,
               id: newId,
-              name: `${block.name}`,
+              name: newName,
               position: offsetPosition,
               subBlocks: newSubBlocks,
             },
@@ -258,6 +263,23 @@ export const useWorkflowStore = create<WorkflowStoreWithHistory>()(
         set(newState)
         get().updateLastSaved()
       },
+
+      updateBlockName: (id: string, name: string) => {
+        const newState = {
+          blocks: {
+            ...get().blocks,
+            [id]: {
+              ...get().blocks[id],
+              name,
+            },
+          },
+          edges: [...get().edges],
+        }
+        
+        set(newState)
+        pushHistory(set, get, newState, `${name} block name updated`)
+        get().updateLastSaved()
+      },
     })),
     { name: 'workflow-store' }
   )