♻️ 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/composables/useAgents.ts

@@ -1,26 +1,55 @@
-import type schema from "#triplit/schema";
 import type { Entity } from "@triplit/client";
+import type schema from "#triplit/schema";
+import { nanoid } from "nanoid";
+import { assert } from "~~/utils/assert";
 
-export const useAgents = async () => {
+export type Agent = Readonly<Entity<typeof schema, 'agents'> & { topics: Readonly<Entity<typeof schema, 'topics'>>[] }>;
+
+export const useAgents = () => {
+    const nuxtApp = useNuxtApp();
     const triplit = useTriplitClient();
 
-    const { results: agents, unsubscribe } = await useQuery(
-        'agents',
-        triplit,
-        triplit
-            .query('agents')
-            .Include('topics', (rel) => rel('topics').Order('createdAt', 'DESC'))
-            .Order('createdAt', 'ASC')
-    );
+    // dont leaking between different users/requests
+    if (!nuxtApp._agentsState) {
+        nuxtApp._agentsState = {
+            list: ref<Agent[]>([]),
+            initPromise: null as Promise<void> | null,
+        };
+    }
 
-    const createAgent = async (): Promise<Readonly<Entity<typeof schema, 'agents'>> | null> => {
+    const state = nuxtApp._agentsState as {
+        list: Ref<Agent[]>;
+        initPromise: Promise<void> | null;
+    };
+
+    const init = () => {
+        if (state.initPromise) return;
+
+        state.initPromise = (async () => {
+            const query = triplit.query('agents')
+                .Include('topics', (rel) => rel('topics').Order('createdAt', 'DESC'))
+                .Order('createdAt', 'ASC');
+
+            const { results } = await useQuery('agents', triplit, query)
+            watch(results, (newAgents) => {
+                console.log("newAgents", newAgents);
+                state.list.value = newAgents as unknown as Agent[] || [];
+            }, { immediate: true, flush: 'sync' });
+        })();
+    };
+
+    const getAgent = (id: MaybeRef<string>) => {
+        return computed(() => state.list.value.find((agent) => agent.id === id) || null);
+    }
+
+    const createAgent = async () => {
+        const triplit = useTriplitClient();
         const { user } = useAuth();
-        if (!user.value) {
-            console.error('No user');
-            return null;
-        }
+        if (!user.value) throw new Error('No user');
 
-        return triplit.insert('agents', {
+        const id = nanoid();
+        await triplit.insert('agents', {
+            id,
             name: 'New Agent',
             userId: user.value.id,
             systemPrompt: 'You are a helpful assistant.',
@@ -28,14 +57,16 @@ export const useAgents = async () => {
             imageUrl: null,
             createdAt: new Date().toISOString(),
         });
-    };
 
+        assert('flush' in triplit);
+        await triplit.flush();
+
+        return state.list.value.find((agent) => agent.id === id)!;
+    };
     return {
-        agents,
-        unsubscribe,
-        getAgent: (id: string) => {
-            return agents.value?.find((a: any) => a.id === id);
-        },
-        createAgent,
+        init,
+        agents: state.list,
+        getAgent,
+        createAgent
     };
 };