feat(sidebar): add agent management actions

app/components/Sidenav/NavHome.vue

@@ -5,6 +5,8 @@ const creatingAgent = ref(false);
 
 const { openDropdown, dropdownState, closeDropdown } = useDropdown();
 
+const triplit = useTriplitClient();
+
 const navRef = ref<HTMLElement | null>(null);
 const toggleAgentsList = () => {
     agentsOpen.value = !agentsOpen.value;
@@ -20,6 +22,38 @@ const newAgent = async () => {
     }
 };
 
+const renameAgentId = ref<string | null>(null);
+const newAgentName = ref('');
+
+const startRename = (agentId: string, currentName: string) => {
+    renameAgentId.value = agentId;
+    newAgentName.value = currentName;
+    nextTick(() => {
+        const input = document.getElementById('agent-rename-input') as HTMLInputElement | null;
+        if (input) {
+            input.focus();
+        }
+    })
+};
+
+const saveRename = async () => {
+    if (renameAgentId.value && newAgentName.value.trim()) {
+        await triplit.update('agents', renameAgentId.value, {
+            name: newAgentName.value.trim()
+        });
+    }
+    cancelRename();
+};
+
+const cancelRename = () => {
+    renameAgentId.value = null;
+    newAgentName.value = '';
+};
+
+const deleteAgent = async (agentId: string) => {
+    await triplit.delete('agents', agentId);
+}
+
 const handleNavClick = (e: MouseEvent) => {
     const trigger = (e.target as HTMLElement).closest('[data-action]') as HTMLElement | null;
     if (!trigger) return;
@@ -42,22 +76,17 @@ const handleNavClick = (e: MouseEvent) => {
                 return;
             }
 
-            // openDropdown(e, () => {
+            openDropdown(e, () => {
-            //     const agent = agents.value.find(a => a.id === agentId);
+                const agent = agents.value.find(a => a.id === agentId);
-            //     if (agent) {
+                if (agent) {
-            //         const isRenaming = activeAutoRenames.has(agentId) && agent?.renaming;
+                    return [
+                        { label: 'Rename', onClick: () => startRename(agentId, agent?.name || '') },
+                        { label: 'Delete', danger: true, onClick: () => deleteAgent(agentId) }
+                    ];
+                }
 
-            //         return [
+                return [];
-            //             isRenaming
+            }, { minWidth: '120px', placement: 'right' });
-            //                 ? { label: 'Cancel Auto Rename', onClick: () => cancelAutoRename(agentId) }
-            //                 : { label: 'Auto Rename', onClick: () => autoRenameAgent(agentId) },
-            //             { label: 'Rename', disabled: isRenaming ?? false, onClick: () => startRename(agentId, agent?.name || '') },
-            //             { label: 'Delete', danger: true, onClick: () => deleteAgent(agentId) }
-            //         ];
-            //     }
-
-            //     return [];
-            // }, { minWidth: '120px', placement: 'right' });
             break;
     }
 }
@@ -101,13 +130,9 @@ onMounted(() => {
                             <a data-action="navigate" :data-agent-id="agent.id" :href="`/agent/${agent.id}`"
                                 :aria-label="agent.name"
                                 class="mt-1 group px-2 decoration-none flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9 text-[var(--text-secondary)] hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] focus:text-[var(--text-primary)]">
-                                <!-- <input v-if="renameTopicId === topic.id && !topic.renaming" id="topic-rename-input"
+                                <input v-if="renameAgentId === agent.id" id="agent-rename-input" v-model="newAgentName"
-                                    v-model="newTopicName" @keydown.enter="saveRename" @keydown.escape="cancelRename"
+                                    @keydown.enter="saveRename" @keydown.escape="cancelRename" @blur="saveRename"
-                                    @blur="saveRename"
                                     class="flex-1 bg-transparent border-none outline-none text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
-                                <div v-else-if="topic.renaming" class="flex w-full">
-                                    <Icon name="svg-spinners:3-dots-fade" class="text-6" />
-                                </div> -->
                                 <span class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
                                     {{ agent.name }}
                                 </span>