♻️ 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/HeaderAgent.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
 const route = useRoute();
-const { agents, getAgent, unsubscribe: unsubscribeAgents } = await useAgents();
+const { agents, getAgent } = useAgents();
 const { openDropdown, dropdownState, closeDropdown } = useDropdown();
 
-const activeAgent = computed(() => getAgent(route.params.id as string));
+const activeAgent = getAgent(route.params.id as string);
 
-const { isHovered, sidebarWidth } = useSidenavContext();
-
-onUnmounted(() => {
-    unsubscribeAgents?.();
-});
+const { isHovered } = useSidenavContext();
 
 const toggleDropdown = (e: MouseEvent) => {
     e.stopPropagation();
@@ -66,36 +62,5 @@ const toggleDropdown = (e: MouseEvent) => {
                 </div>
             </div>
         </button>
-
-        <!-- <Dropdown class="overflow-hidden" v-model="agentDropdownOpen" placement="center" width="calc(80% - 1rem)">
-            <template #trigger="{ toggle }">
-                <button
-                    class="flex max-w-full transition duration-200 gap-1.5 pr-2 items-center cursor-pointer hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg"
-                    @click="toggle">
-                    <div
-                        :class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', activeAgent?.imageUrl ? '' : 'border border-[var(--color-border)]']">
-                        <img v-if="activeAgent?.imageUrl" :src="activeAgent.imageUrl"
-                            class="w-full h-full object-cover" />
-                        <Icon v-else name="mynaui:check-hexagon" class="w-4 h-4 text-[var(--color-accent)]" />
-                    </div>
-                    <span
-                        class="text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
-                        {{ activeAgent?.name }}
-                    </span>
-                    <div class="w-4 h-4 text-[var(--text-secondary)]">
-                        <Icon
-                            class="text-4 transform-origin-center-left duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transition-all"
-                            name="mynaui:chevron-up-down" />
-                    </div>
-                </button>
-            </template>
-<template #content>
-                <div class="flex flex-col gap-1.5 max-h-[calc(2.25rem*4+0.375rem*3)] overflow-y-auto">
-                    <SidenavItem draggable="false" v-for="agent in agents" :to="`/agent/${agent.id}`" :name="agent.name"
-                        class="whitespace-nowrap" icon="mynaui:check-hexagon" :key="agent.id"
-                        :active="activeAgent?.id === agent.id" />
-                </div>
-            </template>
-</Dropdown> -->
     </header>
 </template>