♻️ refactor: optimize state management, switch to @tanstack/vue-virtual, and improve performance

- Centralize `useAgents` and `useModels` state within the Nuxt app context to prevent data leaks and improve initialization.
- Migrate virtualization from `vue-virtual-scroller` to `@tanstack/vue-virtual` with new `RowVirtualizerFixed` and `RowVirtualizerDynamic` components.
- Upgrade Nuxt to v4.3.1 and remove `@vue-macros/nuxt`.
- Replace `big.js` with an optimized custom `lshDecimal` string manipulation logic for pricing calculations in the provider API.
- Implement automatic focus redirection in `ChatInput` to capture standard keyboard input.
- Refactor Sidenav and Settings components to utilize virtualization for long lists (topics, agents, models).
- Enhance theme colors and mobile experience. More work to come on both of these.

app/components/Sidenav/NavHome.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-const { agents, unsubscribe, createAgent } = await useAgents();
+const { agents, createAgent } = useAgents();
 const agentsOpen = ref(true);
 const creatingAgent = ref(false);
 
+const { openDropdown, dropdownState, closeDropdown } = useDropdown();
+
+const navRef = ref<HTMLElement | null>(null);
 const toggleAgentsList = () => {
     agentsOpen.value = !agentsOpen.value;
 };
@@ -11,17 +14,62 @@ const newAgent = async () => {
     creatingAgent.value = true;
     try {
         const agent = await createAgent();
-        if (agent) return navigateTo(`/agent/${agent.id}`);
+        return navigateTo(`/agent/${agent.id}`);
     } finally {
         creatingAgent.value = false;
     }
 };
 
-onUnmounted(() => unsubscribe?.());
+const handleNavClick = (e: MouseEvent) => {
+    const trigger = (e.target as HTMLElement).closest('[data-action]') as HTMLElement | null;
+    if (!trigger) return;
+
+    const agentId = trigger.dataset.agentId || (trigger.closest('[data-agent-id]') as HTMLElement | null)?.dataset.agentId;
+    if (!agentId) return;
+
+    const action = trigger.dataset.action;
+    switch (action) {
+        case 'navigate':
+            if (e.metaKey || e.ctrlKey || e.shiftKey) return;
+            e.preventDefault();
+            return navigateTo(`/agent/${agentId}`);
+
+        case 'toggle-dropdown':
+            e.preventDefault();
+            e.stopPropagation();
+            if (dropdownState.open) {
+                closeDropdown();
+                return;
+            }
+
+            // openDropdown(e, () => {
+            //     const agent = agents.value.find(a => a.id === agentId);
+            //     if (agent) {
+            //         const isRenaming = activeAutoRenames.has(agentId) && agent?.renaming;
+
+            //         return [
+            //             isRenaming
+            //                 ? { 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;
+    }
+}
+
+onMounted(() => {
+    // simply preload the topic page
+    preloadRouteComponents(`/agent/42`);
+})
 </script>
 
 <template>
-    <nav class="flex flex-col gap-1">
+    <nav ref="navRef" class="flex flex-col gap-1 overflow-auto">
         <SidenavItem name="Search" icon="mynaui:search" />
         <SidenavItem to="/" name="Home" icon="mynaui:home" />
 
@@ -46,8 +94,32 @@ onUnmounted(() => unsubscribe?.());
                     <span>New Agent</span>
                 </button>
 
-                <SidenavItem v-for="agent in agents" :key="agent.id" :to="`/agent/${agent.id}`" :name="agent.name"
-                    icon="mynaui:check-hexagon" />
+                <div @click="handleNavClick" class="flex flex-col">
+                    <RowVirtualizerFixed :scroll-element="navRef" key-field="id" :items="agents" :prerender="50"
+                        :item-size="40" :overscan="20">
+                        <template v-slot="{ item: agent }">
+                            <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"
+                                    v-model="newTopicName" @keydown.enter="saveRename" @keydown.escape="cancelRename"
+                                    @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>
+
+                                <div data-action="toggle-dropdown"
+                                    class="text-[var(--text-secondary)] shrink-0 opacity-0 group-hover:opacity-100 p-1 flex items-center justify-center rounded-md hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+                                    <span class="h-4.5 w-4.5 i-tabler:dots"></span>
+                                </div>
+                            </a>
+                        </template>
+                    </RowVirtualizerFixed>
+                </div>
             </div>
         </Collapsible>
     </nav>