llms-py 3.0.2__py3-none-any.whl → 3.0.3__py3-none-any.whl

llms/db.py

@@ -1,10 +1,11 @@
 import json
+import os
 import sqlite3
 import threading
 from queue import Empty, Queue
 from threading import Event, Thread
 
-POOL = True
+POOL = os.getenv("LLMS_POOL", "1") == "1"
 
 
 def create_reader_connection(db_path):
@@ -39,7 +40,7 @@ def writer_thread(ctx, db_path, task_queue, stop_event):
                 sql, args, callback = task  # Optional callback for results
 
                 try:
-                    ctx.dbg("SQL>" + ("\n" if "\n" in sql else " ") + sql + ("\n" if args else "") + str(args))
+                    ctx.dbg("SQL>" + ("\n" if "\n" in sql else " ") + sql + ("\n" if args else " ") + str(args))
                     cursor = conn.execute(sql, args)
                     conn.commit()
                     ctx.dbg(f"lastrowid {cursor.lastrowid}, rowcount {cursor.rowcount}")
@@ -172,7 +173,9 @@ class DbManager:
 
     def log_sql(self, sql, parameters=None):
         if self.ctx.debug:
-            self.ctx.dbg("SQL>" + ("\n" if "\n" in sql else " ") + sql + ("\n" if parameters else "") + str(parameters))
+            self.ctx.dbg(
+                "SQL>" + ("\n" if "\n" in sql else " ") + sql + ("\n" if parameters else " ") + str(parameters)
+            )
 
     def exec(self, connection, sql, parameters=None):
         self.log_sql(sql, parameters)
@@ -289,17 +292,20 @@ class DbManager:
     async def insert_async(self, table, columns, info):
         event = threading.Event()
 
-        ret = [None]
+        ret = [None, None]
 
         def cb(lastrowid, rowcount, error=None):
             nonlocal ret
             if error:
-                raise error
-            ret[0] = lastrowid
+                ret[1] = error
+            else:
+                ret[0] = lastrowid
             event.set()
 
         self.insert(table, columns, info, cb)
         event.wait()
+        if ret[1]:
+            raise ret[1]
         return ret[0]
 
     def update(self, table, columns, info, callback=None):
@@ -323,17 +329,20 @@ class DbManager:
     async def update_async(self, table, columns, info):
         event = threading.Event()
 
-        ret = [None]
+        ret = [None, None]
 
         def cb(lastrowid, rowcount, error=None):
             nonlocal ret
             if error:
-                raise error
-            ret[0] = rowcount
+                ret[1] = error
+            else:
+                ret[0] = rowcount
             event.set()
 
         self.update(table, columns, info, cb)
         event.wait()
+        if ret[1]:
+            raise ret[1]
         return ret[0]
 
     def close(self):

llms/extensions/app/__init__.py

@@ -38,6 +38,7 @@ def install(ctx):
         "modelInfo",
         "modalities",
         "messages",
+        "tools",
         "args",
         "cost",
         "inputTokens",

llms/extensions/app/ui/threadStore.mjs

@@ -116,6 +116,9 @@ function replaceThread(thread) {
     if (currentThread.value?.id === thread.id) {
         currentThread.value = thread
     }
+    if (thread.completedAt || thread.error) {
+        threadDetails.value[thread.id] = thread
+    }
     startWatchingThread()
     return thread
 }

llms/main.py

@@ -41,7 +41,7 @@ try:
 except ImportError:
     HAS_PIL = False
 
-VERSION = "3.0.2"
+VERSION = "3.0.3"
 _ROOT = None
 DEBUG = os.getenv("DEBUG") == "1"
 MOCK = os.getenv("MOCK") == "1"
@@ -1288,6 +1288,8 @@ def to_error_message(e):
     # check if has 'message' attribute
     if hasattr(e, "message"):
         return e.message
+    if hasattr(e, "status"):
+        return str(e.status)
     return str(e)
 
 

llms/ui/ai.mjs

@@ -6,7 +6,7 @@ const headers = { 'Accept': 'application/json' }
 const prefsKey = 'llms.prefs'
 
 export const o = {
-    version: '3.0.2',
+    version: '3.0.3',
     base,
     prefsKey,
     welcome: 'Welcome to llms.py',

llms/ui/app.css

@@ -18,6 +18,12 @@
     --color-red-700: oklch(50.5% 0.213 27.518);
     --color-red-800: oklch(44.4% 0.177 26.899);
     --color-red-900: oklch(39.6% 0.141 25.723);
+    --color-orange-100: oklch(95.4% 0.038 75.164);
+    --color-orange-200: oklch(90.1% 0.076 70.697);
+    --color-orange-400: oklch(75% 0.183 55.934);
+    --color-orange-600: oklch(64.6% 0.222 41.116);
+    --color-orange-800: oklch(47% 0.157 37.304);
+    --color-orange-900: oklch(40.8% 0.123 38.172);
     --color-yellow-50: oklch(98.7% 0.026 102.212);
     --color-yellow-100: oklch(97.3% 0.071 103.193);
     --color-yellow-200: oklch(94.5% 0.129 101.54);
@@ -1103,6 +1109,9 @@
   .cursor-default {
     cursor: default;
   }
+  .cursor-help {
+    cursor: help;
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1668,6 +1677,9 @@
   .bg-indigo-700 {
     background-color: var(--color-indigo-700);
   }
+  .bg-orange-100 {
+    background-color: var(--color-orange-100);
+  }
   .bg-purple-100 {
     background-color: var(--color-purple-100);
   }
@@ -1743,9 +1755,6 @@
   .bg-yellow-50 {
     background-color: var(--color-yellow-50);
   }
-  .bg-yellow-100 {
-    background-color: var(--color-yellow-100);
-  }
   .bg-yellow-400 {
     background-color: var(--color-yellow-400);
   }
@@ -2313,6 +2322,12 @@
   .text-indigo-700 {
     color: var(--color-indigo-700);
   }
+  .text-orange-600 {
+    color: var(--color-orange-600);
+  }
+  .text-orange-800 {
+    color: var(--color-orange-800);
+  }
   .text-purple-600 {
     color: var(--color-purple-600);
   }
@@ -2385,9 +2400,6 @@
   .text-yellow-700 {
     color: var(--color-yellow-700);
   }
-  .text-yellow-800 {
-    color: var(--color-yellow-800);
-  }
   .capitalize {
     text-transform: capitalize;
   }
@@ -4830,6 +4842,11 @@
       background-color: var(--color-indigo-900);
     }
   }
+  .dark\:bg-orange-900 {
+    &:where(.dark, .dark *) {
+      background-color: var(--color-orange-900);
+    }
+  }
   .dark\:bg-purple-600 {
     &:where(.dark, .dark *) {
       background-color: var(--color-purple-600);
@@ -4920,23 +4937,11 @@
       background-color: var(--color-yellow-200);
     }
   }
-  .dark\:bg-yellow-900 {
-    &:where(.dark, .dark *) {
-      background-color: var(--color-yellow-900);
-    }
-  }
   .dark\:fill-gray-300 {
     &:where(.dark, .dark *) {
       fill: var(--color-gray-300);
     }
   }
-  .dark\:dark\:text-gray-200 {
-    &:where(.dark, .dark *) {
-      &:where(.dark, .dark *) {
-        color: var(--color-gray-200);
-      }
-    }
-  }
   .dark\:text-black {
     &:where(.dark, .dark *) {
       color: var(--color-black);
@@ -5073,6 +5078,16 @@
       color: var(--color-indigo-500);
     }
   }
+  .dark\:text-orange-200 {
+    &:where(.dark, .dark *) {
+      color: var(--color-orange-200);
+    }
+  }
+  .dark\:text-orange-400 {
+    &:where(.dark, .dark *) {
+      color: var(--color-orange-400);
+    }
+  }
   .dark\:text-purple-300 {
     &:where(.dark, .dark *) {
       color: var(--color-purple-300);
@@ -5118,11 +5133,6 @@
       color: var(--color-white);
     }
   }
-  .dark\:text-yellow-200 {
-    &:where(.dark, .dark *) {
-      color: var(--color-yellow-200);
-    }
-  }
   .dark\:placeholder-gray-400 {
     &:where(.dark, .dark *) {
       &::placeholder {

llms/ui/ctx.mjs

@@ -30,6 +30,7 @@ export class ExtensionScope {
         return this.ctx.ai.get(combinePaths(this.baseUrl, url), options)
     }
     delete(url, options) {
+        this.ctx.clearError()
         return this.ctx.ai.get(combinePaths(this.baseUrl, url), {
             ...options,
             method: 'DELETE'
@@ -39,41 +40,49 @@ export class ExtensionScope {
         return this.ctx.ai.getJson(combinePaths(this.baseUrl, url), options)
     }
     async deleteJson(url, options) {
+        this.ctx.clearError()
         return this.ctx.ai.getJson(combinePaths(this.baseUrl, url), {
             ...options,
             method: 'DELETE'
         })
     }
     post(url, options) {
+        this.ctx.clearError()
         return this.ctx.ai.post(combinePaths(this.baseUrl, url), options)
     }
     put(url, options) {
+        this.ctx.clearError()
         return this.ctx.ai.post(combinePaths(this.baseUrl, url), {
             ...options,
             method: 'PUT'
         })
     }
     patch(url, options) {
+        this.ctx.clearError()
         return this.ctx.ai.post(combinePaths(this.baseUrl, url), {
             ...options,
             method: 'PATCH'
         })
     }
     async postForm(url, options) {
+        this.ctx.clearError()
         return await this.ctx.ai.postForm(combinePaths(this.baseUrl, url), options)
     }
     async postJson(url, body) {
+        this.ctx.clearError()
         return this.ctx.ai.postJson(combinePaths(this.baseUrl, url), {
             body: body instanceof FormData ? body : JSON.stringify(body)
         })
     }
     async putJson(url, body) {
+        this.ctx.clearError()
         return this.ctx.ai.postJson(combinePaths(this.baseUrl, url), {
             method: 'PUT',
             body: body instanceof FormData ? body : JSON.stringify(body)
         })
     }
     async patchJson(url, body) {
+        this.ctx.clearError()
         return this.ctx.ai.postJson(combinePaths(this.baseUrl, url), {
             method: 'PATCH',
             body: body instanceof FormData ? body : JSON.stringify(body)
@@ -136,6 +145,7 @@ export class AppContext {
         this.chatErrorFilters = []
         this.createThreadFilters = []
         this.updateThreadFilters = []
+        this.threadHeaderComponents = {}
         this.threadFooterComponents = {}
         this.top = {}
         this.left = {}
@@ -297,6 +307,9 @@ export class AppContext {
         this.toggleLayout('left', toggle)
         return toggle
     }
+    setThreadHeaders(components) {
+        Object.assign(this.threadHeaderComponents, components)
+    }
     setThreadFooters(components) {
         Object.assign(this.threadFooterComponents, components)
     }

llms/ui/modules/chat/ChatBody.mjs

@@ -70,6 +70,7 @@ export default {
             <!-- Messages Area -->
             <div class="flex-1 overflow-y-auto" ref="messagesContainer">
                 <div class="mx-auto max-w-6xl px-4 py-6">
+
                     <div v-if="!$ai.hasAccess">
                         <OAuthSignIn v-if="$ai.authType === 'oauth'" @done="$ai.signIn($event)" />
                         <SignIn v-else @done="$ai.signIn($event)" />
@@ -81,291 +82,287 @@ export default {
                     </div>
 
                     <!-- Messages -->
-                    <div v-else-if="currentThread?.messages?.length" class="space-y-2">
-                        <div v-if="currentThread?.messages.length && currentThread?.model" class="flex items-center justify-center select-none">
-                            <span @click="$chat.setSelectedModel({ name: currentThread.model})" 
-                                class="flex items-center cursor-pointer px-1.5 py-0.5 text-xs rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 transition-colors border hover:border-gray-300 dark:hover:border-gray-700">
-                                <ProviderIcon class="size-4 mr-1" :provider="$chat.getProviderForModel(currentThread.model)" />
-                                {{currentThread.model}}
-                            </span>
-                        </div>
-                        <div
-                            v-for="message in currentThread.messages.filter(x => x.role !== 'system')"
-                            :key="message.id"
-                            v-show="!(message.role === 'tool' && isToolLinked(message))"
-                            class="flex items-start space-x-3 group"
-                            :class="message.role === 'user' ? 'flex-row-reverse space-x-reverse' : ''"
-                        >
-                            <!-- Avatar outside the bubble -->
-                            <div class="flex-shrink-0 flex flex-col justify-center">
-                                <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium"
-                                     :class="message.role === 'user'
-                                        ? 'bg-blue-100 dark:bg-blue-900 text-gray-900 dark:text-gray-100 border border-blue-200 dark:border-blue-700'
-                                        : message.role === 'tool'
-                                            ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800'
-                                            : 'bg-gray-600 dark:bg-gray-500 text-white'"
-                                >
-                                    <span v-if="message.role === 'user'">U</span>
-                                    <svg v-else-if="message.role === 'tool'" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
-                                    </svg>
-                                    <span v-else>AI</span>
-                                </div>
-
-                                <!-- Delete button (shown on hover) -->
-                                <button type="button" @click.stop="$threads.deleteMessageFromThread(currentThread.id, message.id)"
-                                    class="mx-auto opacity-0 group-hover:opacity-100 mt-2 rounded text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 transition-all"
-                                    title="Delete message">
-                                    <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
-                                    </svg>
-                                </button>
-                            </div>
-
-                            <!-- Message bubble -->
+                    <div v-else-if="currentThread">
+                        <ThreadHeader v-if="currentThread" :thread="currentThread" class="mb-2" />
+                        <div class="space-y-2" v-if="currentThread?.messages?.length">
                             <div
-                                class="message rounded-lg px-4 py-3 relative group"
-                                :class="message.role === 'user'
-                                    ? 'bg-blue-100 dark:bg-blue-900 text-gray-900 dark:text-gray-100 border border-blue-200 dark:border-blue-700'
-                                    : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700'"
+                                v-for="message in currentThread.messages.filter(x => x.role !== 'system')"
+                                :key="message.id"
+                                v-show="!(message.role === 'tool' && isToolLinked(message))"
+                                class="flex items-start space-x-3 group"
+                                :class="message.role === 'user' ? 'flex-row-reverse space-x-reverse' : ''"
                             >
-                                <!-- Copy button in top right corner -->
-                                <button
-                                    type="button"
-                                    @click="copyMessageContent(message)"
-                                    class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1 rounded hover:bg-black/10 dark:hover:bg-white/10 focus:outline-none focus:ring-0"
-                                    :class="message.role === 'user' ? 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'"
-                                    title="Copy message content"
-                                >
-                                    <svg v-if="copying === message" class="size-4 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
-                                    <svg v-else class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
-                                        <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
-                                    </svg>
-                                </button>
+                                <!-- Avatar outside the bubble -->
+                                <div class="flex-shrink-0 flex flex-col justify-center">
+                                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium"
+                                        :class="message.role === 'user'
+                                            ? 'bg-blue-100 dark:bg-blue-900 text-gray-900 dark:text-gray-100 border border-blue-200 dark:border-blue-700'
+                                            : message.role === 'tool'
+                                                ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800'
+                                                : 'bg-gray-600 dark:bg-gray-500 text-white'"
+                                    >
+                                        <span v-if="message.role === 'user'">U</span>
+                                        <svg v-else-if="message.role === 'tool'" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
+                                        </svg>
+                                        <span v-else>AI</span>
+                                    </div>
+
+                                    <!-- Delete button (shown on hover) -->
+                                    <button type="button" @click.stop="$threads.deleteMessageFromThread(currentThread.id, message.id)"
+                                        class="mx-auto opacity-0 group-hover:opacity-100 mt-2 rounded text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 transition-all"
+                                        title="Delete message">
+                                        <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                                        </svg>
+                                    </button>
+                                </div>
 
+                                <!-- Message bubble -->
                                 <div
-                                    v-if="message.role === 'assistant'"
-                                    v-html="$fmt.markdown(message.content)"
-                                    class="prose prose-sm max-w-none dark:prose-invert"
-                                ></div>
-
-                                <!-- Collapsible reasoning section -->
-                                <MessageReasoning v-if="message.role === 'assistant' && (message.reasoning || message.thinking || message.reasoning_content)" 
-                                    :reasoning="message.reasoning || message.thinking || message.reasoning_content" :message="message" />
-
-                                <!-- Tool Calls & Outputs -->
-                                <div v-if="message.tool_calls && message.tool_calls.length > 0" class="mb-3 space-y-4">
-                                    <div v-for="(tool, i) in message.tool_calls" :key="i" class="rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 overflow-hidden">
-                                        <!-- Tool Call Header -->
-                                        <div class="px-3 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between bg-gray-50/30 dark:bg-gray-800 space-x-4">
-                                            <div class="flex items-center gap-2">
-                                                <svg class="size-3.5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>
-                                                <span class="font-mono text-xs font-bold text-gray-700 dark:text-gray-300">{{ tool.function.name }}</span>
+                                    class="message rounded-lg px-4 py-3 relative group"
+                                    :class="message.role === 'user'
+                                        ? 'bg-blue-100 dark:bg-blue-900 text-gray-900 dark:text-gray-100 border border-blue-200 dark:border-blue-700'
+                                        : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700'"
+                                >
+                                    <!-- Copy button in top right corner -->
+                                    <button
+                                        type="button"
+                                        @click="copyMessageContent(message)"
+                                        class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1 rounded hover:bg-black/10 dark:hover:bg-white/10 focus:outline-none focus:ring-0"
+                                        :class="message.role === 'user' ? 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'"
+                                        title="Copy message content"
+                                    >
+                                        <svg v-if="copying === message" class="size-4 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                                        <svg v-else class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
+                                            <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
+                                        </svg>
+                                    </button>
+
+                                    <div
+                                        v-if="message.role === 'assistant'"
+                                        v-html="$fmt.markdown(message.content)"
+                                        class="prose prose-sm max-w-none dark:prose-invert"
+                                    ></div>
+
+                                    <!-- Collapsible reasoning section -->
+                                    <MessageReasoning v-if="message.role === 'assistant' && (message.reasoning || message.thinking || message.reasoning_content)" 
+                                        :reasoning="message.reasoning || message.thinking || message.reasoning_content" :message="message" />
+
+                                    <!-- Tool Calls & Outputs -->
+                                    <div v-if="message.tool_calls && message.tool_calls.length > 0" class="mb-3 space-y-4">
+                                        <div v-for="(tool, i) in message.tool_calls" :key="i" class="rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 overflow-hidden">
+                                            <!-- Tool Call Header -->
+                                            <div class="px-3 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between bg-gray-50/30 dark:bg-gray-800 space-x-4">
+                                                <div class="flex items-center gap-2">
+                                                    <svg class="size-3.5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>
+                                                    <span class="font-mono text-xs font-bold text-gray-700 dark:text-gray-300">{{ tool.function.name }}</span>
+                                                </div>
+                                                <span class="text-[10px] uppercase tracking-wider text-gray-400 font-medium">Tool Call</span>
+                                            </div>
+                                            
+                                            <!-- Arguments -->
+                                            <div v-if="tool.function.arguments && tool.function.arguments != '{}'" class="not-prose px-3 py-2">
+                                                <HtmlFormat v-if="hasJsonStructure(tool.function.arguments)" :value="tryParseJson(tool.function.arguments)" :classes="customHtmlClasses" />
+                                                <pre v-else class="tool-arguments">{{ tool.function.arguments }}</pre>
                                             </div>
-                                            <span class="text-[10px] uppercase tracking-wider text-gray-400 font-medium">Tool Call</span>
-                                        </div>
-                                        
-                                        <!-- Arguments -->
-                                        <div v-if="tool.function.arguments && tool.function.arguments != '{}'" class="not-prose px-3 py-2">
-                                            <HtmlFormat v-if="hasJsonStructure(tool.function.arguments)" :value="tryParseJson(tool.function.arguments)" :classes="customHtmlClasses" />
-                                            <pre v-else class="tool-arguments">{{ tool.function.arguments }}</pre>
-                                        </div>
 
-                                        <!-- Tool Output (Nested) -->
-                                        <div v-if="getToolOutput(tool.id)" class="border-t border-gray-200 dark:border-gray-700">
-                                            <div class="px-3 py-1.5 flex justify-between items-center border-b border-gray-200 dark:border-gray-800 bg-gray-50/30 dark:bg-gray-800">
-                                                <div class="flex items-center gap-2 ">
-                                                    <svg class="size-3.5 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
-                                                    <span class="text-[10px] uppercase tracking-wider text-gray-400 font-medium">Output</span>
-                                                </div>    
-                                                <div v-if="hasJsonStructure(getToolOutput(tool.id).content)" class="flex items-center gap-2 text-[10px] uppercase tracking-wider font-medium select-none">
-                                                    <span @click="setPrefs({ toolFormat: 'text' })" 
-                                                          class="cursor-pointer transition-colors"
-                                                          :class="prefs.toolFormat !== 'preview' ? 'text-gray-600 dark:text-gray-300' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'">
-                                                        text
-                                                    </span>
-                                                    <span class="text-gray-300 dark:text-gray-700">|</span>
-                                                    <span @click="setPrefs({ toolFormat: 'preview' })" 
-                                                          class="cursor-pointer transition-colors"
-                                                          :class="prefs.toolFormat == 'preview' ? 'text-gray-600 dark:text-gray-300' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'">
-                                                        preview
-                                                    </span>
+                                            <!-- Tool Output (Nested) -->
+                                            <div v-if="getToolOutput(tool.id)" class="border-t border-gray-200 dark:border-gray-700">
+                                                <div class="px-3 py-1.5 flex justify-between items-center border-b border-gray-200 dark:border-gray-800 bg-gray-50/30 dark:bg-gray-800">
+                                                    <div class="flex items-center gap-2 ">
+                                                        <svg class="size-3.5 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+                                                        <span class="text-[10px] uppercase tracking-wider text-gray-400 font-medium">Output</span>
+                                                    </div>    
+                                                    <div v-if="hasJsonStructure(getToolOutput(tool.id).content)" class="flex items-center gap-2 text-[10px] uppercase tracking-wider font-medium select-none">
+                                                        <span @click="setPrefs({ toolFormat: 'text' })" 
+                                                            class="cursor-pointer transition-colors"
+                                                            :class="prefs.toolFormat !== 'preview' ? 'text-gray-600 dark:text-gray-300' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'">
+                                                            text
+                                                        </span>
+                                                        <span class="text-gray-300 dark:text-gray-700">|</span>
+                                                        <span @click="setPrefs({ toolFormat: 'preview' })" 
+                                                            class="cursor-pointer transition-colors"
+                                                            :class="prefs.toolFormat == 'preview' ? 'text-gray-600 dark:text-gray-300' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'">
+                                                            preview
+                                                        </span>
+                                                    </div>
                                                 </div>
-                                            </div>
-                                            <div class="not-prose px-3 py-2">
-                                                <pre v-if="prefs.toolFormat !== 'preview' || !hasJsonStructure(getToolOutput(tool.id).content)" class="tool-output">{{ getToolOutput(tool.id).content }}</pre>
-                                                <div v-else class="text-xs">
-                                                    <HtmlFormat v-if="tryParseJson(getToolOutput(tool.id).content)" :value="tryParseJson(getToolOutput(tool.id).content)" :classes="customHtmlClasses" />
-                                                    <div v-else class="text-gray-500 italic p-2">Invalid JSON content</div>
+                                                <div class="not-prose px-3 py-2">
+                                                    <pre v-if="prefs.toolFormat !== 'preview' || !hasJsonStructure(getToolOutput(tool.id).content)" class="tool-output">{{ getToolOutput(tool.id).content }}</pre>
+                                                    <div v-else class="text-xs">
+                                                        <HtmlFormat v-if="tryParseJson(getToolOutput(tool.id).content)" :value="tryParseJson(getToolOutput(tool.id).content)" :classes="customHtmlClasses" />
+                                                        <div v-else class="text-gray-500 italic p-2">Invalid JSON content</div>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
-                                </div>
 
-                                <!-- Tool Output (Orphaned) -->
-                                <div v-if="message.role === 'tool' && !isToolLinked(message)" class="text-sm">
-                                    <div class="flex items-center gap-2 mb-1 opacity-70">
-                                        <div class="flex items-center text-xs font-mono font-medium text-gray-500 uppercase tracking-wider">
-                                            <svg class="size-3 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
-                                            Tool Output
-                                        </div>
-                                        <div v-if="message.name" class="text-xs font-mono bg-gray-200 dark:bg-gray-700 px-1.5 rounded text-gray-700 dark:text-gray-300">
-                                            {{ message.name }}
+                                    <!-- Tool Output (Orphaned) -->
+                                    <div v-if="message.role === 'tool' && !isToolLinked(message)" class="text-sm">
+                                        <div class="flex items-center gap-2 mb-1 opacity-70">
+                                            <div class="flex items-center text-xs font-mono font-medium text-gray-500 uppercase tracking-wider">
+                                                <svg class="size-3 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+                                                Tool Output
+                                            </div>
+                                            <div v-if="message.name" class="text-xs font-mono bg-gray-200 dark:bg-gray-700 px-1.5 rounded text-gray-700 dark:text-gray-300">
+                                                {{ message.name }}
+                                            </div>
+                                            <div v-if="message.tool_call_id" class="text-[10px] font-mono text-gray-400">
+                                                {{ message.tool_call_id.slice(0,8) }}
+                                            </div>
                                         </div>
-                                        <div v-if="message.tool_call_id" class="text-[10px] font-mono text-gray-400">
-                                            {{ message.tool_call_id.slice(0,8) }}
+                                        <div class="not-prose bg-white dark:bg-gray-900 rounded border border-gray-200 dark:border-gray-800 p-2 overflow-x-auto">
+                                            <pre class="tool-output">{{ message.content }}</pre>
                                         </div>
                                     </div>
-                                    <div class="not-prose bg-white dark:bg-gray-900 rounded border border-gray-200 dark:border-gray-800 p-2 overflow-x-auto">
-                                        <pre class="tool-output">{{ message.content }}</pre>
-                                    </div>
-                                </div>
-
-                                <!-- Assistant Images -->
-                                <div v-if="message.images && message.images.length > 0" class="mt-2 flex flex-wrap gap-2">
-                                    <template v-for="(img, i) in message.images" :key="i">
-                                        <div v-if="img.type === 'image_url'" class="group relative cursor-pointer" @click="openLightbox(resolveUrl(img.image_url.url))">
-                                            <img :src="resolveUrl(img.image_url.url)" class="max-w-[400px] max-h-96 rounded-lg border border-gray-200 dark:border-gray-700 object-contain bg-gray-50 dark:bg-gray-900 shadow-sm transition-transform hover:scale-[1.02]" />
-                                        </div>
-                                    </template>
-                                </div>
-
-                                <!-- Assistant Audios -->
-                                <div v-if="message.audios && message.audios.length > 0" class="mt-2 flex flex-wrap gap-2">
-                                    <template v-for="(audio, i) in message.audios" :key="i">
-                                        <div v-if="audio.type === 'audio_url'" class="flex items-center gap-2 p-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
-                                            <audio controls :src="resolveUrl(audio.audio_url.url)" class="h-8 w-64"></audio>
-                                        </div>
-                                    </template>
-                                </div>
 
-                                <!-- User Message with separate attachments -->
-                                <div v-else-if="message.role !== 'assistant' && message.role !== 'tool'">
-                                    <div v-html="$fmt.markdown(message.content)" class="prose prose-sm max-w-none dark:prose-invert break-words"></div>
-                                    
-                                    <!-- Attachments Grid -->
-                                    <div v-if="hasAttachments(message)" class="mt-2 flex flex-wrap gap-2">
-                                        <template v-for="(part, i) in getAttachments(message)" :key="i">
-                                            <!-- Image -->
-                                            <div v-if="part.type === 'image_url'" class="group relative cursor-pointer" @click="openLightbox(part.image_url.url)">
-                                                <img :src="part.image_url.url" class="max-w-[400px] max-h-96 rounded-lg border border-gray-200 dark:border-gray-700 object-contain bg-gray-50 dark:bg-gray-900 shadow-sm transition-transform hover:scale-[1.02]" />
+                                    <!-- Assistant Images -->
+                                    <div v-if="message.images && message.images.length > 0" class="mt-2 flex flex-wrap gap-2">
+                                        <template v-for="(img, i) in message.images" :key="i">
+                                            <div v-if="img.type === 'image_url'" class="group relative cursor-pointer" @click="openLightbox(resolveUrl(img.image_url.url))">
+                                                <img :src="resolveUrl(img.image_url.url)" class="max-w-[400px] max-h-96 rounded-lg border border-gray-200 dark:border-gray-700 object-contain bg-gray-50 dark:bg-gray-900 shadow-sm transition-transform hover:scale-[1.02]" />
                                             </div>
-                                            <!-- Audio -->
-                                            <div v-else-if="part.type === 'input_audio'" class="flex items-center gap-2 p-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
-                                                <svg class="w-5 h-5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
-                                                <audio controls :src="part.input_audio.data" class="h-8 w-48"></audio>
+                                        </template>
+                                    </div>
+
+                                    <!-- Assistant Audios -->
+                                    <div v-if="message.audios && message.audios.length > 0" class="mt-2 flex flex-wrap gap-2">
+                                        <template v-for="(audio, i) in message.audios" :key="i">
+                                            <div v-if="audio.type === 'audio_url'" class="flex items-center gap-2 p-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+                                                <audio controls :src="resolveUrl(audio.audio_url.url)" class="h-8 w-64"></audio>
                                             </div>
-                                            <!-- File -->
-                                            <a v-else-if="part.type === 'file'" :href="part.file.file_data" target="_blank" 
-                                            class="flex items-center gap-2 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-sm text-blue-600 dark:text-blue-400 hover:underline">
-                                                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
-                                                <span class="max-w-xs truncate">{{ part.file.filename || 'Attachment' }}</span>
-                                            </a>
                                         </template>
                                     </div>
+
+                                    <!-- User Message with separate attachments -->
+                                    <div v-else-if="message.role !== 'assistant' && message.role !== 'tool'">
+                                        <div v-html="$fmt.markdown(message.content)" class="prose prose-sm max-w-none dark:prose-invert break-words"></div>
+                                        
+                                        <!-- Attachments Grid -->
+                                        <div v-if="hasAttachments(message)" class="mt-2 flex flex-wrap gap-2">
+                                            <template v-for="(part, i) in getAttachments(message)" :key="i">
+                                                <!-- Image -->
+                                                <div v-if="part.type === 'image_url'" class="group relative cursor-pointer" @click="openLightbox(part.image_url.url)">
+                                                    <img :src="part.image_url.url" class="max-w-[400px] max-h-96 rounded-lg border border-gray-200 dark:border-gray-700 object-contain bg-gray-50 dark:bg-gray-900 shadow-sm transition-transform hover:scale-[1.02]" />
+                                                </div>
+                                                <!-- Audio -->
+                                                <div v-else-if="part.type === 'input_audio'" class="flex items-center gap-2 p-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+                                                    <svg class="w-5 h-5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
+                                                    <audio controls :src="part.input_audio.data" class="h-8 w-48"></audio>
+                                                </div>
+                                                <!-- File -->
+                                                <a v-else-if="part.type === 'file'" :href="part.file.file_data" target="_blank" 
+                                                class="flex items-center gap-2 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-sm text-blue-600 dark:text-blue-400 hover:underline">
+                                                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
+                                                    <span class="max-w-xs truncate">{{ part.file.filename || 'Attachment' }}</span>
+                                                </a>
+                                            </template>
+                                        </div>
+                                    </div>
+
+                                    <MessageUsage :message="message" :usage="getMessageUsage(message)" />
                                 </div>
 
-                                <MessageUsage :message="message" :usage="getMessageUsage(message)" />
+                                <!-- Edit and Redo buttons (shown on hover for user messages, outside bubble) -->
+                                <div v-if="message.role === 'user'" class="flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity mt-1">
+                                    <button type="button" @click.stop="editMessage(message)"
+                                        class="whitespace-nowrap text-xs px-2 py-1 rounded text-gray-400 dark:text-gray-500 hover:text-green-600 dark:hover:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/30 transition-all"
+                                        title="Edit message">
+                                        <svg class="size-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                                        </svg>
+                                        Edit
+                                    </button>
+                                    <button type="button" @click.stop="redoMessage(message)"
+                                        class="whitespace-nowrap text-xs px-2 py-1 rounded text-gray-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-all"
+                                        title="Redo message (clears all responses after this message and re-runs it)">
+                                        <svg class="size-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                                        </svg>
+                                        Redo
+                                    </button>
+                                </div>
                             </div>
 
-                            <!-- Edit and Redo buttons (shown on hover for user messages, outside bubble) -->
-                            <div v-if="message.role === 'user'" class="flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity mt-1">
-                                <button type="button" @click.stop="editMessage(message)"
-                                    class="whitespace-nowrap text-xs px-2 py-1 rounded text-gray-400 dark:text-gray-500 hover:text-green-600 dark:hover:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/30 transition-all"
-                                    title="Edit message">
-                                    <svg class="size-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
-                                    </svg>
-                                    Edit
-                                </button>
-                                <button type="button" @click.stop="redoMessage(message)"
-                                    class="whitespace-nowrap text-xs px-2 py-1 rounded text-gray-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-all"
-                                    title="Redo message (clears all responses after this message and re-runs it)">
-                                    <svg class="size-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
-                                    </svg>
-                                    Redo
-                                </button>
+                            <div v-if="currentThread.stats && currentThread.stats.outputTokens" class="text-center text-gray-500 dark:text-gray-400 text-sm">
+                                <span :title="$fmt.statsTitle(currentThread.stats)">
+                                    {{ currentThread.stats.cost ? $fmt.costLong(currentThread.stats.cost) + '  for ' : '' }} {{ $fmt.humanifyNumber(currentThread.stats.inputTokens) }} → {{ $fmt.humanifyNumber(currentThread.stats.outputTokens) }} tokens over {{ currentThread.stats.requests }} request{{currentThread.stats.requests===1?'':'s'}} in {{ $fmt.humanifyMs(currentThread.stats.duration) }}
+                                </span>
                             </div>
-                        </div>
-
-                        <div v-if="currentThread.stats && currentThread.stats.outputTokens" class="text-center text-gray-500 dark:text-gray-400 text-sm">
-                            <span :title="$fmt.statsTitle(currentThread.stats)">
-                                {{ currentThread.stats.cost ? $fmt.costLong(currentThread.stats.cost) + '  for ' : '' }} {{ $fmt.humanifyNumber(currentThread.stats.inputTokens) }} → {{ $fmt.humanifyNumber(currentThread.stats.outputTokens) }} tokens over {{ currentThread.stats.requests }} request{{currentThread.stats.requests===1?'':'s'}} in {{ $fmt.humanifyMs(currentThread.stats.duration) }}
-                            </span>
-                        </div>
 
-                        <!-- Loading indicator -->
-                        <div v-if="$threads.watchingThread" class="flex items-start space-x-3 group">
-                            <!-- Avatar outside the bubble -->
-                            <div class="flex-shrink-0">
-                                <div class="w-8 h-8 rounded-full bg-gray-600 dark:bg-gray-500 text-white flex items-center justify-center text-sm font-medium">
-                                    AI
+                            <!-- Loading indicator -->
+                            <div v-if="$threads.watchingThread" class="flex items-start space-x-3 group">
+                                <!-- Avatar outside the bubble -->
+                                <div class="flex-shrink-0">
+                                    <div class="w-8 h-8 rounded-full bg-gray-600 dark:bg-gray-500 text-white flex items-center justify-center text-sm font-medium">
+                                        AI
+                                    </div>
                                 </div>
-                            </div>
 
-                            <!-- Loading bubble -->
-                            <div class="rounded-lg px-4 py-3 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
-                                <div class="flex space-x-1">
-                                    <div class="w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce"></div>
-                                    <div class="w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
-                                    <div class="w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
+                                <!-- Loading bubble -->
+                                <div class="rounded-lg px-4 py-3 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+                                    <div class="flex space-x-1">
+                                        <div class="w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce"></div>
+                                        <div class="w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
+                                        <div class="w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
+                                    </div>
                                 </div>
-                            </div>
 
-                            <!-- Cancel button -->
-                            <button type="button" @click="$threads.cancelThread()"
-                                class="px-3 py-1 rounded text-sm text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 border border-transparent hover:border-red-300 dark:hover:border-red-600 transition-all"
-                                title="Cancel request">
-                                cancel
-                            </button>
-                        </div>
+                                <!-- Cancel button -->
+                                <button type="button" @click="$threads.cancelThread()"
+                                    class="px-3 py-1 rounded text-sm text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 border border-transparent hover:border-red-300 dark:hover:border-red-600 transition-all"
+                                    title="Cancel request">
+                                    cancel
+                                </button>
+                            </div>
 
-                        <!-- Thread error message bubble -->
-                        <div v-if="currentThread?.error" class="mt-8 flex items-center space-x-3">
-                            <!-- Avatar outside the bubble -->
-                            <div class="flex-shrink-0">
-                                <div class="size-8 rounded-full bg-red-600 dark:bg-red-500 text-white flex items-center justify-center text-lg font-bold">
-                                    !
+                            <!-- Thread error message bubble -->
+                            <div v-if="currentThread?.error" class="mt-8 flex items-center space-x-3">
+                                <!-- Avatar outside the bubble -->
+                                <div class="flex-shrink-0">
+                                    <div class="size-8 rounded-full bg-red-600 dark:bg-red-500 text-white flex items-center justify-center text-lg font-bold">
+                                        !
+                                    </div>
                                 </div>
-                            </div>
-                            <!-- Error bubble -->
-                            <div class="max-w-[85%] rounded-lg px-3 py-1 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 shadow-sm">
-                                <div class="flex items-start space-x-2">
-                                    <div class="flex-1 min-w-0">
-                                        <div v-if="currentThread.error" class="text-base mb-1">{{ currentThread.error }}</div>
+                                <!-- Error bubble -->
+                                <div class="max-w-[85%] rounded-lg px-3 py-1 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 shadow-sm">
+                                    <div class="flex items-start space-x-2">
+                                        <div class="flex-1 min-w-0">
+                                            <div v-if="currentThread.error" class="text-base mb-1">{{ currentThread.error }}</div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
 
-                        <!-- Error message bubble -->
-                        <div v-if="$state.error" class="mt-8 flex items-start space-x-3">
-                            <!-- Avatar outside the bubble -->
-                            <div class="flex-shrink-0">
-                                <div class="size-8 rounded-full bg-red-600 dark:bg-red-500 text-white flex items-center justify-center text-lg font-bold">
-                                    !
+                            <!-- Error message bubble -->
+                            <div v-if="$state.error" class="mt-8 flex items-start space-x-3">
+                                <!-- Avatar outside the bubble -->
+                                <div class="flex-shrink-0">
+                                    <div class="size-8 rounded-full bg-red-600 dark:bg-red-500 text-white flex items-center justify-center text-lg font-bold">
+                                        !
+                                    </div>
                                 </div>
-                            </div>
 
-                            <!-- Error bubble -->
-                            <div class="max-w-[85%] rounded-lg px-4 py-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 shadow-sm">
-                                <div class="flex items-start space-x-2">
-                                    <div class="flex-1 min-w-0">
-                                        <div class="flex justify-between items-start">
-                                            <div class="text-base font-medium mb-1">{{ $state.error?.errorCode || 'Error' }}</div>
-                                            <button type="button" @click="$ctx.clearError()" title="Clear Error"
-                                                class="text-red-400 dark:text-red-300 hover:text-red-600 dark:hover:text-red-100 flex-shrink-0">
-                                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                                                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-                                                </svg>
-                                            </button>
-                                        </div>
-                                        <div v-if="$state.error?.message" class="text-base mb-1">{{ $state.error.message }}</div>
-                                        <div v-if="$state.error?.stackTrace" class="mt-2 text-sm whitespace-pre-wrap break-words max-h-80 overflow-y-auto font-mono p-2 border border-red-200/70 dark:border-red-800/70">
-                                            {{ $state.error.stackTrace }}
+                                <!-- Error bubble -->
+                                <div class="max-w-[85%] rounded-lg px-4 py-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 shadow-sm">
+                                    <div class="flex items-start space-x-2">
+                                        <div class="flex-1 min-w-0">
+                                            <div class="flex justify-between items-start">
+                                                <div class="text-base font-medium mb-1">{{ $state.error?.errorCode || 'Error' }}</div>
+                                                <button type="button" @click="$ctx.clearError()" title="Clear Error"
+                                                    class="text-red-400 dark:text-red-300 hover:text-red-600 dark:hover:text-red-100 flex-shrink-0">
+                                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                                                    </svg>
+                                                </button>
+                                            </div>
+                                            <div v-if="$state.error?.message" class="text-base mb-1">{{ $state.error.message }}</div>
+                                            <div v-if="$state.error?.stackTrace" class="mt-2 text-sm whitespace-pre-wrap break-words max-h-80 overflow-y-auto font-mono p-2 border border-red-200/70 dark:border-red-800/70">
+                                                {{ $state.error.stackTrace }}
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -374,7 +371,6 @@ export default {
                         <ThreadFooter v-if="$threads.threadDetails.value[currentThread.id]" :thread="$threads.threadDetails.value[currentThread.id]" />
                     </div>
                 </div>
-
             </div>
 
             <!-- Input Area -->

llms/ui/modules/chat/index.mjs

@@ -1,5 +1,5 @@
 
-import { ref, watch, nextTick, inject } from 'vue'
+import { ref, watch, computed, nextTick, inject } from 'vue'
 import { $$, createElement, lastRightPart, ApiResult, createErrorStatus, pick } from "@servicestack/client"
 import SettingsDialog, { useSettings } from './SettingsDialog.mjs'
 import ChatBody from './ChatBody.mjs'
@@ -782,18 +782,79 @@ const HomeTools = {
     `,
 }
 
+const ThreadHeader = {
+    template: `
+    <div v-if="showComponents.length" class="flex items-center justify-center gap-2">
+        <div v-for="component in showComponents">
+            <component :is="component" :thread="thread" />
+        </div>
+    </div>
+    `,
+    props: { thread: Object },
+    setup(props) {
+        const ctx = inject('ctx')
+        const showComponents = computed(() => {
+            const args = { thread: props.thread }
+            return Object.values(ctx.threadHeaderComponents).filter(def => def.show(args)).map(def => def.component)
+        })
+        return {
+            showComponents,
+        }
+    }
+}
+
 const ThreadFooter = {
     template: `
-    <div>
-        <div v-for="(componentDef,id) in $ctx.threadFooterComponents">
-            <component v-if="componentDef.show(thread)" :is="componentDef.component" :thread="thread" />
+    <div v-if="showComponents.length">
+        <div v-for="component in showComponents">
+            <component :is="component" :thread="thread" />
         </div>
     </div>
     `,
-    props: {
-        thread: Object,
-    },
+    props: { thread: Object },
+    setup(props) {
+        const ctx = inject('ctx')
+        const showComponents = computed(() => {
+            const args = { thread: props.thread }
+            return Object.values(ctx.threadFooterComponents).filter(def => def.show(args)).map(def => def.component)
+        })
+        return {
+            showComponents,
+        }
+    }
+}
+
+const ThreadModel = {
+    template: `
+    <span @click="$chat.setSelectedModel({ name: thread.model})" 
+        class="flex items-center cursor-pointer px-1.5 py-0.5 text-xs rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 transition-colors border hover:border-gray-300 dark:hover:border-gray-700">
+        <ProviderIcon class="size-4 mr-1" :provider="$chat.getProviderForModel(thread.model)" />
+        {{thread.model}}
+    </span>
+    `,
+    props: { thread: Object },
+}
+
+const ThreadTools = {
+    template: `
+    <div class="text-sm flex items-center gap-1 flex items-center px-1.5 py-0.5 text-xs rounded text-gray-600 dark:text-gray-300 border cursor-help" :title="title">
+        <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10h3V7L6.5 3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1-3 3l-6-6a6 6 0 0 1-8-8z"/></svg>
+        <span v-if="toolFns.length==1">{{toolFns[0].function.name}}</span>
+        <span v-else-if="toolFns.length>1">{{toolFns.length}} Tools</span>
+    </div>
+    `,
+    props: { thread: Object },
     setup(props) {
+        const toolFns = computed(() => props.thread.tools.filter(x => x.type === 'function'))
+        const title = computed(() => toolFns.value.length == 1
+            ? toolFns.value[0].function.name
+            : toolFns.value.length > 1
+                ? toolFns.value.map(x => x.function.name).join('\n')
+                : '')
+        return {
+            toolFns,
+            title,
+        }
     }
 }
 
@@ -807,6 +868,7 @@ export default {
             ChatBody,
             HomeTools,
             Home,
+            ThreadHeader,
             ThreadFooter,
         })
         ctx.setGlobals({
@@ -835,6 +897,17 @@ export default {
             { path: '/c/:id', component: ChatBody, meta },
         ])
 
+        ctx.setThreadHeaders({
+            model: {
+                component: ThreadModel,
+                show({ thread }) { return thread.model }
+            },
+            tools: {
+                component: ThreadTools,
+                show({ thread }) { return (thread.tools || []).filter(x => x.type === 'function').length }
+            }
+        })
+
         const prefs = ctx.getPrefs()
         if (prefs.model) {
             ctx.state.selectedModel = prefs.model

llms/ui/tailwind.input.css

@@ -2,7 +2,7 @@
 @import "tailwindcss";
 @source "./lib/servicestack-vue.mjs";
 @source "../../extensions";
-@source "../../llms-home/extensions";
+@source "../../llms-home/extensions/";
 
 @custom-variant dark (&:where(.dark, .dark *));
 

{llms_py-3.0.2.dist-info → llms_py-3.0.3.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: llms-py
-Version: 3.0.2
+Version: 3.0.3
 Summary: A lightweight CLI tool and OpenAI-compatible server for querying multiple Large Language Model (LLM) providers
 Home-page: https://github.com/ServiceStack/llms
 Author: ServiceStack

{llms_py-3.0.2.dist-info → llms_py-3.0.3.dist-info}/RECORD

@@ -1,18 +1,18 @@
 llms/__init__.py,sha256=DKwTZDsyYL_wHe7yvLw49Nf8PSgPSyWaeVdotUqSvrQ,84
 llms/__main__.py,sha256=hrBulHIt3lmPm1BCyAEVtB6DQ0Hvc3gnIddhHCmJasg,151
-llms/db.py,sha256=UGbdnzYLId6qtAOeUAYSJCmkiJuZfqcGRaLyZSRs8tA,11465
+llms/db.py,sha256=BEwBSh7AOc6seylB6Q5k1ru07Zx8WDkSHkto0YWNDSg,11687
 llms/index.html,sha256=nGk1Djtn9p7l6LuKp4Kg0JIB9fCzxtTWXFfmDb4ggpc,1658
 llms/llms.json,sha256=gebw9PNWf5UTpU7RDIwo6QcBaJEkU0z3k9EeXR4hQiI,11147
-llms/main.py,sha256=otLS2Wq-3UTW_jbyY2FyWEaO6e07Rx3MoowagH5Amws,156220
+llms/main.py,sha256=W9h1UX95pvcCb2gGm9eXHZUHXlb_u28zuGs2N5VHsPE,156278
 llms/providers-extra.json,sha256=w7_5gB0YUPK0PJNeViM7vRDfNGChXUKMHfGHenVxEkM,10165
 llms/providers.json,sha256=Hc1STJW9hqM_MWBjeJljs_0I3bTo6qhGlEsL0o-dUuA,285221
 llms/extensions/analytics/ui/index.mjs,sha256=cr9dPmEJjha2xX6A_7xbJxkOolWFP1p6TgIoO8M8juI,69540
 llms/extensions/app/README.md,sha256=TKoblZpHlheLCh_dfXOxqTc5OvxlgMBa-vKo8Hqb2gg,1370
-llms/extensions/app/__init__.py,sha256=yQ-yw_g0ierrOkCiPCvQn4dYrrMXOydHcK2xoUmJbT0,20795
+llms/extensions/app/__init__.py,sha256=eOdIGG7jrQhBZ-ndNlvbTFOhZlH9n1tG-WvqJw8cakA,20812
 llms/extensions/app/db.py,sha256=CqpHReXXjrLXXNxINo-wsnBJenKZVVHKlWlhtXFWj08,21503
 llms/extensions/app/ui/Recents.mjs,sha256=HT9R2IEus3dGEqtKPGrgX1eMp4EQ2j2jLwv-Fn1Us5E,9253
 llms/extensions/app/ui/index.mjs,sha256=sB9176LLNuKFsZ28yL-tROA6J4xePNtvxtSrzFcinRo,13271
-llms/extensions/app/ui/threadStore.mjs,sha256=Lf2wR5DYAMLzJFu35lRnc1W28w7_0bUkMpM509xdEBY,12092
+llms/extensions/app/ui/threadStore.mjs,sha256=5qZv3maUfpLXnoEQN6EPYXUbe3B_OCgT_ttoBpvA4Dk,12192
 llms/extensions/core_tools/CALCULATOR.md,sha256=pJRtCVF01BgxFrSNh2Ys_lrRi3SFwLgJzAX93AGh93Q,1944
 llms/extensions/core_tools/__init__.py,sha256=nYeQH20Iy_Yl9S8qGcgLmU7x4e2C43BsiOMG8XYfPM4,23086
 llms/extensions/core_tools/ui/index.mjs,sha256=KycJ2FcQ6BieBY7fjWGxVBGHN6WuFx712OFrO6flXww,31770
@@ -140,13 +140,13 @@ llms/extensions/system_prompts/ui/prompts.json,sha256=t5DD3bird-87wFa4OlW-bC2wdo
 llms/extensions/tools/__init__.py,sha256=yfIK7dVqYiZGX5VeJ3x7HQWLPQfuPqeNYJsd0lpZUM4,120
 llms/extensions/tools/ui/index.mjs,sha256=Nu69U6odCUh8uu1i8d5f8ryO4Lj_OFbPX2LnVyYu1fk,9602
 llms/ui/App.mjs,sha256=zU-GtbcSMREizjUS9nWiMK6m_oT14MNJ-p_RCz2RVqA,7445
-llms/ui/ai.mjs,sha256=F5JXpruePVvlBFiLoGW1x87fC5yL1pMMWtwnfs9QTxk,6540
-llms/ui/app.css,sha256=_sRdNrUkYtfjt5nBDsCA5oTT0XjdcadF3RUqjQHVAME,175928
-llms/ui/ctx.mjs,sha256=pd_VAnJ6DEmocuMKvIbzw3UdsLBA54AW43_OM1njS8c,11922
+llms/ui/ai.mjs,sha256=W3l-b0tNhGq6B-0joEUgPMMylp_N6rNohLb2j7OAff0,6540
+llms/ui/app.css,sha256=L0ZiQ0yN3fyIluZz-t94Qe4yac6u4m5TqBOekb3HK9c,176286
+llms/ui/ctx.mjs,sha256=eFTkWzVBKRU5YDFFVUq3ZDd6eMPa4VRQpE3q0O5Sfgg,12337
 llms/ui/fav.svg,sha256=_R6MFeXl6wBFT0lqcUxYQIDWgm246YH_3hSTW0oO8qw,734
 llms/ui/index.mjs,sha256=o-J2GVYYGFtfV4Pzlj-kjK4UrVP6ovTre5jD44gAiIc,4316
 llms/ui/markdown.mjs,sha256=ZeGXxX4_UEUCVkLZzmwXlqWBfReSFzBivdxNu8uSgFk,6648
-llms/ui/tailwind.input.css,sha256=fJInSAoAoF-fhLiWFlocuP5i3b4eWp8grIfG6LyvtVw,15785
+llms/ui/tailwind.input.css,sha256=ZneSjo_uNcvqMT8cAU837yUZoLZ_sWfgr5Gto7TNJPc,15786
 llms/ui/typography.css,sha256=6o7pbMIamRVlm2GfzSStpcOG4T5eFCK_WcQ3RIHKAsU,19587
 llms/ui/utils.mjs,sha256=Vv2YsKaOJCNYrxv19q-gU1wSuuMhEcTcm6M7_g9Ff0Y,6664
 llms/ui/lib/chart.js,sha256=dx8FdDX0Rv6OZtZjr9FQh5h-twFsKjfnb-FvFlQ--cU,196176
@@ -163,12 +163,12 @@ llms/ui/lib/vue.mjs,sha256=75FuLhUTPk19sncwNIrm0BGEL0_Qw298-_v01fPWYoI,542872
 llms/ui/modules/icons.mjs,sha256=LGcH0ys0QLS2ZKCO42qHpwPYbBV_EssoWLezU4XZEzU,27751
 llms/ui/modules/layout.mjs,sha256=8pAxs8bedQI3b3eRA9nrfpLZznLmrpp4BZvigYAQjpQ,12572
 llms/ui/modules/model-selector.mjs,sha256=6U4rAZ7vmQELFRQGWk4YEtq02v3lyHdMq6yUOp-ArXg,43184
-llms/ui/modules/chat/ChatBody.mjs,sha256=DCEjXpXJBW3tg2IZr39-ab1NGoy2WDsqGJa5gCAQ4x4,42441
+llms/ui/modules/chat/ChatBody.mjs,sha256=YbpIEl6OeBi1RqCPkW5UFbUk6qNi5B_GfRUK5Pmfms8,42875
 llms/ui/modules/chat/SettingsDialog.mjs,sha256=HMBJTwrapKrRIAstIIqp0QlJL5O-ho4hzgvfagPfsX8,19930
-llms/ui/modules/chat/index.mjs,sha256=d_BSYXQvlNRK3A0L1GOigFxl66FXlTw9TTQAJx34JAU,34062
-llms_py-3.0.2.dist-info/licenses/LICENSE,sha256=bus9cuAOWeYqBk2OuhSABVV1P4z7hgrEFISpyda_H5w,1532
-llms_py-3.0.2.dist-info/METADATA,sha256=hbUYmI79etmIMdHIrxeingjIjTiG3y_O9AV5KsBfBe4,2191
-llms_py-3.0.2.dist-info/WHEEL,sha256=_zCd3N1l69ArxyTb8rzEoP9TpbYXkqRFSNOD5OuxnTs,91
-llms_py-3.0.2.dist-info/entry_points.txt,sha256=WswyE7PfnkZMIxboC-MS6flBD6wm-CYU7JSUnMhqMfM,40
-llms_py-3.0.2.dist-info/top_level.txt,sha256=gC7hk9BKSeog8gyg-EM_g2gxm1mKHwFRfK-10BxOsa4,5
-llms_py-3.0.2.dist-info/RECORD,,
+llms/ui/modules/chat/index.mjs,sha256=NA_9R7JEqHKZRnYGqte_J7qoDbG3RY8969TTNXqZa1k,37011
+llms_py-3.0.3.dist-info/licenses/LICENSE,sha256=bus9cuAOWeYqBk2OuhSABVV1P4z7hgrEFISpyda_H5w,1532
+llms_py-3.0.3.dist-info/METADATA,sha256=NUThc-W_gsTuY1CbwnHiAuIS2MuqgksPmDFmMBhq2MM,2191
+llms_py-3.0.3.dist-info/WHEEL,sha256=_zCd3N1l69ArxyTb8rzEoP9TpbYXkqRFSNOD5OuxnTs,91
+llms_py-3.0.3.dist-info/entry_points.txt,sha256=WswyE7PfnkZMIxboC-MS6flBD6wm-CYU7JSUnMhqMfM,40
+llms_py-3.0.3.dist-info/top_level.txt,sha256=gC7hk9BKSeog8gyg-EM_g2gxm1mKHwFRfK-10BxOsa4,5
+llms_py-3.0.3.dist-info/RECORD,,