continue scaffolding and refine the basic foundation

app/components/Sidenav/NavAgent.vue

@@ -1,32 +1,36 @@
 <script setup lang="ts">
-const route = useRoute()
+const route = useRoute();
 
 const routeParts = computed(() => {
-    return route.path.replace('/agent/', '').split('/')
+    return route.path.replace('/agent/', '').split('/');
 });
 
-if (routeParts.value.length < 1) navigateTo('/')
-if (!routeParts.value[0]!.match(/^agents_[0-9a-fA-F]{8}-(?:[0-9a-fA-F]{4}-){3}[0-9a-fA-F]{12}$/)) navigateTo('/')
+if (routeParts.value.length < 1) navigateTo('/');
 
 const pageInfo = computed(() => {
-    // `/agent/agent_[uuid]`
-    if (routeParts.value.length === 1) {
-        return 'new-conversation'
+    // `/agent/agent_[uuid]` or `/agent/agent_[uuid]/topic/...`
+    if (route.path.startsWith('/agent/') && !route.path.includes('/profile')) {
+        return 'conversation';
     }
 
     // `/agent/agent_[uuid]/profile`
-    if (routeParts.value.length === 2 && routeParts.value[1]! === 'profile') {
-        return 'agent-profile'
+    if (route.path.endsWith('/profile')) {
+        return 'agent-profile';
     }
-})
+});
 </script>
 
 <template>
     <nav class="flex flex-col gap-1">
+
+        <!-- Agent Info Link -->
         <div class="mt-2">
             <NuxtLink :to="`/agent/${routeParts[0]}/profile`" class="decoration-none text-[var(--color-subtle)]">
                 <SidenavItem name="Agent Info" icon="mynaui:info-square" :active="pageInfo === 'agent-profile'" />
             </NuxtLink>
         </div>
+
+        <!-- Topics Section -->
+        <SidenavNavAgentTopics />
     </nav>
-</template>
+</template>