fix: agent info not updating when switching routes

app/components/Sidenav/HeaderAgent.vue

@@ -3,7 +3,8 @@ const route = useRoute();
 const { agents, getAgent } = useAgents();
 const { openDropdown, dropdownState, closeDropdown } = useDropdown();
 
-const activeAgent = getAgent(route.params.id as string);
+const agentId = computed(() => route.params.id as string);
+const activeAgent = getAgent(agentId);
 
 const { isHovered } = useSidenavContext();
 

app/components/Sidenav/NavAgent.vue

@@ -9,8 +9,11 @@ const { getAgent } = useAgents();
 const triplit = useTriplitClient();
 
 const navRef = ref<HTMLElement | null>(null);
-const activeAgent = getAgent(route.params.id as string);
-watch(() => route.params.id, () => {
+const agentId = computed(() => route.params.id as string);
+
+console.log(agentId.value);
+const activeAgent = getAgent(agentId);
+watch(agentId, () => {
     if (navRef.value) {
         navRef.value.scrollTo({ top: 0, behavior: 'instant' });
     }
@@ -25,7 +28,7 @@ let activeAutoRenames = reactive(new Map<string, string>());
 
 const autoRenameTopic = async (topicId: string) => {
     const { setPage } = useSettings();
-    const { autoRename, AutoRenameError } = useChat(route.params.id as string);
+    const { autoRename, AutoRenameError } = useChat(agentId.value);
 
     const firstMessage = await triplit.fetchOne(triplit.query('messages').Where('topicId', '=', topicId).Order('createdAt', 'ASC').Limit(1));
     if (!firstMessage) return;
@@ -106,8 +109,8 @@ const cancelRename = () => {
 
 const deleteTopic = async (topicId: string) => {
     if (route.params.topicId === topicId) {
-        if (route.params.id) {
-            await navigateTo(`/agent/${route.params.id}`);
+        if (agentId.value) {
+            await navigateTo(`/agent/${agentId.value}`);
         } else {
             await navigateTo('/');
         }
@@ -129,7 +132,7 @@ const handleNavClick = (e: MouseEvent) => {
         case 'navigate':
             if (e.metaKey || e.ctrlKey || e.shiftKey) return;
             e.preventDefault();
-            return navigateTo(`/agent/${route.params.id}/topic/${topicId}`);
+            return navigateTo(`/agent/${agentId.value}/topic/${topicId}`);
 
         case 'toggle-dropdown':
             e.preventDefault();
@@ -157,7 +160,7 @@ const handleNavClick = (e: MouseEvent) => {
 
 onMounted(() => {
     // simply preload the topic page
-    preloadRouteComponents(`/agent/${route.params.id}/topic/42`);
+    preloadRouteComponents(`/agent/${agentId.value}/topic/42`);
 })
 </script>
 
@@ -167,7 +170,7 @@ onMounted(() => {
 
         <!-- Agent Info Link -->
         <div class="mt-2 flex flex-col">
-            <SidenavItem :to="`/agent/${route.params.id}/profile`" name="Agent Info" icon="mynaui:info-square"
+            <SidenavItem :to="`/agent/${agentId}/profile`" name="Agent Info" icon="mynaui:info-square"
                 :active="route.path.endsWith('/profile')" />
 
             <!-- Topics Section -->
@@ -183,7 +186,7 @@ onMounted(() => {
                         :item-size="40" :overscan="20">
                         <template v-slot="{ item: topic }">
                             <a :key="topic.id" data-action="navigate" :data-topic-id="topic.id"
-                                :href="`/agent/${route.params.id}/topic/${topic.id}`" :aria-label="topic.name"
+                                :href="`/agent/${agentId}/topic/${topic.id}`" :aria-label="topic.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)]"
                                 :class="{ 'bg-[var(--color-hover)]': route.params.topicId === topic.id }">
                                 <input v-if="renameTopicId === topic.id && !topic.renaming" id="topic-rename-input"

app/composables/useAgents.ts

@@ -39,7 +39,7 @@ export const useAgents = () => {
     };
 
     const getAgent = (id: MaybeRef<string>) => {
-        return computed(() => state.list.value.find((agent) => agent.id === id) || null);
+        return computed(() => state.list.value.find((agent) => agent.id === toRef(id).value) || null);
     }
 
     const createAgent = async () => {