♻️ 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/Message/Agent/Reasoning.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import type { Entity } from '@triplit/client';
 import type schema from '#triplit/schema';
 
@@ -56,13 +56,13 @@ const toggleReasoning = async () => {
             'w-full hover:bg-[var(--color-hover)] rounded-lg p-1 flex justify-between items-center transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]',
             part.finished ? '' : 'cursor-default'
         ]">
-            <div class="flex items-center gap-1">
-                <div
+            <span class="flex items-center gap-1">
+                <span
                     class="w-[24px] h-[24px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center">
                     <Icon name="mynaui:atom" class="w-3 h-3 text-[var(--reasoning-accent)]" />
-                </div>
+                </span>
                 Deep Thinking
-            </div>
+            </span>
             <Icon name="mynaui:chevron-down" :class="['w-4 h-4', reasoningOpen ? '' : '-rotate-90']" />
         </button>
         <div v-if="reasoningOpen" ref="containerRef" @scroll="handleScroll"

app/components/Message/Agent/Tool/Debug.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import type { Entity } from '@triplit/client';
 import type schema from '#triplit/schema';
 

app/components/Message/Agent/Tool/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import type { Entity } from '@triplit/client';
 import type schema from '#triplit/schema';
 import Debug from './Debug.vue';

app/components/Message/Agent/index.vue

@@ -11,7 +11,6 @@ defineProps<{
 </script>
 
 <template>
-    <!-- <pre class="max-w-full overflow-x-auto">{{ JSON.stringify(message, null, 2) }}</pre> -->
     <div class="flex flex-col w-full gap-2">
         <div v-for="part in message.parts" :key="part.id">
             <Reasoning v-if="part.type === 'reasoning'" :part="part" />
@@ -36,10 +35,10 @@ defineProps<{
 
         <div class="flex flex-row justify-between text-[var(--text-tertiary)] text-xs"
             v-if="message.generation && message.generation.status !== 'pending'">
-            <span class="flex items-center gap-1">
+            <div class="flex items-center gap-1">
                 <ModelIcon :size="12" :model-id="message.generation.modelId" />
                 {{ message.generation.modelId }}
-            </span>
+            </div>
 
             <div class="flex gap-2">
                 <span class="flex gap-1 items-center" v-if="message.generation.tokens?.output">

app/components/Message/User.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import type { Entity } from '@triplit/client';
 import type schema from '#triplit/schema';