feat: ditch triplit, move to postgresql + drizzle orm

app/pages/agent/[id]/profile.vue

@@ -1,35 +1,56 @@
 <script setup lang="ts">
-const { getAgent } = useAgents();
-const triplit = useTriplitClient();
+const { getAgent, patchAgentLocally } = await useAgents();
 
 const route = useRoute();
 
 const { open: sidebarOpen, openSidebar } = useSidebar();
 
 const agent = getAgent(route.params.id as string);
+let serverAgent = agent.value;
+
+const name = ref<string | null>(agent.value?.name ?? null);
+const systemPrompt = ref<string | null>(agent.value?.systemPrompt ?? null);
 
 if (agent.value === undefined) navigateTo('/');
 
-const handleInput = async (e: Event) => {
-    const target = e.target as HTMLInputElement;
-    if (target.value.trimStart().length === 0) {
-        return;
+let debounceTimeout: NodeJS.Timeout | null = null;
+const debouncedUpdate = async (updates: Partial<Agent>) => {
+    if (debounceTimeout !== null) {
+        clearTimeout(debounceTimeout);
     }
 
-    await triplit.update('agents', agent.value!.id, { name: target.value });
+    patchAgentLocally(route.params.id as string, updates);
+
+    debounceTimeout = setTimeout(async () => {
+        debounceTimeout = null;
+        try {
+            await $fetch(`/api/agent/${route.params.id}`, {
+                method: 'PATCH',
+                body: updates,
+            });
+        } catch (error) {
+            console.error('Failed to update agent:', error);
+
+            if (serverAgent) {
+                patchAgentLocally(route.params.id as string, serverAgent);
+                name.value = serverAgent.name;
+                systemPrompt.value = serverAgent.systemPrompt;
+            }
+        }
+    }, 700);
+};
+
+const handleNameInput = async (e: Event) => {
+    const name = (e.target as HTMLInputElement).value;
+    if (!name.trim()) return;
+
+    debouncedUpdate({ name });
 };
 
 const changeSystemPrompt = async (e: Event) => {
-    const target = e.target as HTMLTextAreaElement;
-    let value: string | undefined = target.value;
-
-    if (value.trimStart().length === 0) {
-        value = undefined;
-    }
-
-    await triplit.update('agents', agent.value!.id, {
-        systemPrompt: target.value,
-    });
+    let systemPrompt = (e.target as HTMLTextAreaElement).value as string | null;
+    if (!systemPrompt!.trim()) systemPrompt = null;
+    debouncedUpdate({ systemPrompt });
 };
 </script>
 
@@ -37,7 +58,7 @@ const changeSystemPrompt = async (e: Event) => {
     <div class="h-14 flex items-center justify-between px-4">
         <div class="flex items-center gap-2">
             <button v-if="!sidebarOpen" @click="openSidebar"
-                class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
+                class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent @hover:bg-[var(--color-hover)] transition-colors">
                 <span class="i-mynaui-panel-left-open text-5"></span>
             </button>
         </div>
@@ -49,15 +70,15 @@ const changeSystemPrompt = async (e: Event) => {
                 <img v-if="agent?.imageUrl" :src="agent.imageUrl" class="w-16 h-16 rounded-full object-cover" />
                 <span class="text-16 i-mynaui-check-hexagon"></span>
             </div>
-            <input @input="handleInput" placeholder="Agent Name..."
+            <input v-model="name" @input="handleNameInput" placeholder="Agent Name..."
                 class="placeholder:text-[var(--text-tertiary)] w-full bg-transparent rounded-none border-b-4 border-b-[var(--color-border)] text-12 p-0"
-                type="text" :value="agent?.name" />
+                type="text" />
         </div>
         <div class="flex flex-col gap-2 w-full h-full mb-14">
             <label class="text-sm text-[var(--text-secondary)]">System Message</label>
-            <textarea placeholder="You are a helpful assistant."
+            <textarea v-model="systemPrompt" placeholder="You are a helpful assistant."
                 class="p-4 w-full h-full resize-none bg-transparent rounded-lg border border-[var(--color-border)]"
-                :value="agent?.systemPrompt" @input="changeSystemPrompt"></textarea>
+                @input="changeSystemPrompt"></textarea>
         </div>
     </div>
 </template>