llms-py 2.0.28__tar.gz → 2.0.30__tar.gz

{llms_py-2.0.28/llms_py.egg-info → llms_py-2.0.30}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: llms-py
-Version: 2.0.28
+Version: 2.0.30
 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
@@ -73,7 +73,7 @@ Access all your local all remote LLMs with a single ChatGPT-like UI:
 
 #### Dark Mode Support
 
-[![](https://servicestack.net/img/posts/llms-py-ui/dark-attach-image.webp)](https://servicestack.net/posts/llms-py-ui)
+[![](https://servicestack.net/img/posts/llms-py-ui/dark-attach-image.webp?)](https://servicestack.net/posts/llms-py-ui)
 
 #### Monthly Costs Analysis
 
@@ -81,7 +81,7 @@ Access all your local all remote LLMs with a single ChatGPT-like UI:
 
 #### Monthly Token Usage (Dark Mode)
 
-[![](https://servicestack.net/img/posts/llms-py-ui/dark-analytics-tokens.webp)](https://servicestack.net/posts/llms-py-ui)
+[![](https://servicestack.net/img/posts/llms-py-ui/dark-analytics-tokens.webp?)](https://servicestack.net/posts/llms-py-ui)
 
 #### Monthly Activity Log
 

{llms_py-2.0.28 → llms_py-2.0.30}/README.md

@@ -33,7 +33,7 @@ Access all your local all remote LLMs with a single ChatGPT-like UI:
 
 #### Dark Mode Support
 
-[![](https://servicestack.net/img/posts/llms-py-ui/dark-attach-image.webp)](https://servicestack.net/posts/llms-py-ui)
+[![](https://servicestack.net/img/posts/llms-py-ui/dark-attach-image.webp?)](https://servicestack.net/posts/llms-py-ui)
 
 #### Monthly Costs Analysis
 
@@ -41,7 +41,7 @@ Access all your local all remote LLMs with a single ChatGPT-like UI:
 
 #### Monthly Token Usage (Dark Mode)
 
-[![](https://servicestack.net/img/posts/llms-py-ui/dark-analytics-tokens.webp)](https://servicestack.net/posts/llms-py-ui)
+[![](https://servicestack.net/img/posts/llms-py-ui/dark-analytics-tokens.webp?)](https://servicestack.net/posts/llms-py-ui)
 
 #### Monthly Activity Log
 

{llms_py-2.0.28 → llms_py-2.0.30}/llms/main.py

@@ -31,7 +31,7 @@ try:
 except ImportError:
     HAS_PIL = False
 
-VERSION = "2.0.28"
+VERSION = "2.0.30"
 _ROOT = None
 g_config_path = None
 g_ui_path = None
@@ -1405,6 +1405,66 @@ async def save_home_configs():
         print("Could not create llms.json. Create one with --init or use --config <path>")
         exit(1)
 
+async def reload_providers():
+    global g_config, g_handlers
+    g_handlers = init_llms(g_config)
+    await load_llms()
+    _log(f"{len(g_handlers)} providers loaded")
+    return g_handlers
+
+async def watch_config_files(config_path, ui_path, interval=1):
+    """Watch config files and reload providers when they change"""
+    global g_config
+
+    config_path = Path(config_path)
+    ui_path = Path(ui_path) if ui_path else None
+
+    file_mtimes = {}
+
+    _log(f"Watching config files: {config_path}" + (f", {ui_path}" if ui_path else ""))
+
+    while True:
+        await asyncio.sleep(interval)
+
+        # Check llms.json
+        try:
+            if config_path.is_file():
+                mtime = config_path.stat().st_mtime
+
+                if str(config_path) not in file_mtimes:
+                    file_mtimes[str(config_path)] = mtime
+                elif file_mtimes[str(config_path)] != mtime:
+                    _log(f"Config file changed: {config_path.name}")
+                    file_mtimes[str(config_path)] = mtime
+
+                    try:
+                        # Reload llms.json
+                        with open(config_path, "r") as f:
+                            g_config = json.load(f)
+
+                        # Reload providers
+                        await reload_providers()
+                        _log("Providers reloaded successfully")
+                    except Exception as e:
+                        _log(f"Error reloading config: {e}")
+        except FileNotFoundError:
+            pass
+
+        # Check ui.json
+        if ui_path:
+            try:
+                if ui_path.is_file():
+                    mtime = ui_path.stat().st_mtime
+
+                    if str(ui_path) not in file_mtimes:
+                        file_mtimes[str(ui_path)] = mtime
+                    elif file_mtimes[str(ui_path)] != mtime:
+                        _log(f"Config file changed: {ui_path.name}")
+                        file_mtimes[str(ui_path)] = mtime
+                        _log("ui.json reloaded - reload page to update")
+            except FileNotFoundError:
+                pass
+
 def main():
     global _ROOT, g_verbose, g_default_model, g_logprefix, g_config, g_config_path, g_ui_path
 
@@ -1436,7 +1496,10 @@ def main():
     parser.add_argument('--verbose',      action='store_true', help='Verbose output')
 
     cli_args, extra_args = parser.parse_known_args()
-    if cli_args.verbose:
+
+    # Check for verbose mode from CLI argument or environment variables
+    verbose_env = os.environ.get('VERBOSE', '').lower()
+    if cli_args.verbose or verbose_env in ('1', 'true'):
         g_verbose = True
         # printdump(cli_args)
     if cli_args.model:
@@ -1492,8 +1555,7 @@ def main():
         g_ui_path = home_ui_path
         g_config = json.loads(text_from_file(g_config_path))
 
-    init_llms(g_config)
-    asyncio.run(load_llms())
+    asyncio.run(reload_providers())
 
     # print names
     _log(f"enabled providers: {', '.join(g_handlers.keys())}")
@@ -1935,6 +1997,14 @@ def main():
         # Serve index.html as fallback route (SPA routing)
         app.router.add_route('*', '/{tail:.*}', index_handler)
 
+        # Setup file watcher for config files
+        async def start_background_tasks(app):
+            """Start background tasks when the app starts"""
+            # Start watching config files in the background
+            asyncio.create_task(watch_config_files(g_config_path, g_ui_path))
+
+        app.on_startup.append(start_background_tasks)
+
         print(f"Starting server on port {port}...")
         web.run_app(app, host='0.0.0.0', port=port, print=_log)
         exit(0)

{llms_py-2.0.28 → llms_py-2.0.30}/llms/ui/Analytics.mjs

@@ -24,16 +24,17 @@ export const colors = [
 
 const MonthSelector = {
     template:`
-    <div class="flex gap-4 items-center">
+    <div class="flex flex-col sm:flex-row gap-2 sm:gap-4 items-stretch sm:items-center w-full sm:w-auto">
         <!-- Months Row -->
-        <div class="flex gap-2 flex-wrap justify-center">
+        <div class="flex gap-1 sm:gap-2 flex-wrap justify-center overflow-x-auto">
             <template v-for="month in availableMonthsForYear" :key="month">
                 <span v-if="selectedMonth === month"
-                    class="text-xs leading-5 font-semibold bg-indigo-600 text-white rounded-full py-1 px-3 flex items-center space-x-2">
-                    {{ new Date(selectedYear + '-' + month.toString().padStart(2,'0') + '-01').toLocaleString('default', { month: 'long' }) }}
+                    class="text-xs leading-5 font-semibold bg-indigo-600 text-white rounded-full py-1 px-2 sm:px-3 flex items-center space-x-2 whitespace-nowrap">
+                    <span class="hidden sm:inline">{{ new Date(selectedYear + '-' + month.toString().padStart(2,'0') + '-01').toLocaleString('default', { month: 'long' }) }}</span>
+                    <span class="sm:hidden">{{ new Date(selectedYear + '-' + month.toString().padStart(2,'0') + '-01').toLocaleString('default', { month: 'short' }) }}</span>
                 </span>
                 <button v-else type="button"
-                    class="text-xs leading-5 font-semibold bg-slate-400/10 rounded-full py-1 px-3 flex items-center space-x-2 hover:bg-slate-400/20 dark:highlight-white/5"
+                    class="text-xs leading-5 font-semibold bg-slate-400/10 rounded-full py-1 px-2 sm:px-3 flex items-center space-x-2 hover:bg-slate-400/20 dark:highlight-white/5 whitespace-nowrap"
                     @click="updateSelection(selectedYear, month)">
                     {{ new Date(selectedYear + '-' + month.toString().padStart(2,'0') + '-01').toLocaleString('default', { month: 'short' }) }}
                 </button>
@@ -42,7 +43,7 @@ const MonthSelector = {
 
         <!-- Year Dropdown -->
         <select :value="selectedYear" @change="(e) => updateSelection(parseInt(e.target.value), selectedMonth)"
-            class="border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 rounded-md text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+            class="border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 rounded-md text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 flex-shrink-0">
             <option v-for="year in availableYears" :key="year" :value="year">
                 {{ year }}
             </option>
@@ -115,9 +116,11 @@ export default {
     template: `
         <div class="flex flex-col h-full w-full">
             <!-- Header -->
-            <div class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-3 min-h-16">
-                <div class="max-w-6xl mx-auto flex items-center justify-between gap-3">
-                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            <div class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-2 sm:px-4 py-3">
+                <div
+                :class="!$ai.isSidebarOpen ? 'pl-3' : ''"
+                class="max-w-6xl mx-auto flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3">
+                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex-shrink-0">
                         <RouterLink to="/analytics">Analytics</RouterLink>
                     </h2>
                     <MonthSelector :dailyData="allDailyData" />
@@ -179,13 +182,13 @@ export default {
                     </div>
 
                     <!-- Cost Analysis Tab -->
-                    <div v-if="activeTab === 'cost'" class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-                        <div class="flex items-center justify-between mb-6">
-                            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Daily Costs</h3>
-                            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                    <div v-if="activeTab === 'cost'" class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-6">
+                        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-6">
+                            <h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100">Daily Costs</h3>
+                            <h3 class="text-sm sm:text-lg font-semibold text-gray-900 dark:text-gray-100">
                                 {{ new Date(selectedDay).toLocaleDateString(undefined, { year: 'numeric', month: 'long' }) }}
                             </h3>
-                            <select v-model="costChartType" class="px-3 pr-6 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 rounded-md text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-800">
+                            <select v-model="costChartType" class="px-3 pr-6 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 rounded-md text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-800 flex-shrink-0">
                                 <option value="bar">Bar Chart</option>
                                 <option value="line">Line Chart</option>
                             </select>
@@ -200,10 +203,10 @@ export default {
                     </div>
 
                     <!-- Token Usage Tab -->
-                    <div v-if="activeTab === 'tokens'" class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-                        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6 flex justify-between items-center">
+                    <div v-if="activeTab === 'tokens'" class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 sm:p-6">
+                        <h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
                             <span>Daily Token Usage</span>
-                            <span>
+                            <span class="text-sm sm:text-base">
                                 {{ new Date(selectedDay).toLocaleDateString(undefined, { year: 'numeric', month: 'long' }) }}
                             </span>
                         </h3>
@@ -216,16 +219,16 @@ export default {
                         </div>
                     </div>
 
-                    <div v-if="allDailyData[selectedDay]?.requests && ['cost', 'tokens'].includes(activeTab)" class="mt-8 px-2 text-gray-700 dark:text-gray-300 font-medium flex items-center justify-between">
+                    <div v-if="allDailyData[selectedDay]?.requests && ['cost', 'tokens'].includes(activeTab)" class="mt-8 px-2 text-sm sm:text-base text-gray-700 dark:text-gray-300 font-medium flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
                         <div>
                             {{ new Date(selectedDay).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }) }}
                         </div>
-                        <div>
-                           {{ formatCost(allDailyData[selectedDay]?.cost || 0) }}
-                           &#183;
-                           {{ allDailyData[selectedDay]?.requests || 0 }} Requests
-                           &#183;
-                           {{ humanifyNumber(allDailyData[selectedDay]?.inputTokens || 0) }} -> {{ humanifyNumber(allDailyData[selectedDay]?.outputTokens || 0) }} Tokens
+                        <div class="flex flex-wrap gap-x-2 gap-y-1">
+                           <span>{{ formatCost(allDailyData[selectedDay]?.cost || 0) }}</span>
+                           <span>&#183;</span>
+                           <span>{{ allDailyData[selectedDay]?.requests || 0 }} Requests</span>
+                           <span>&#183;</span>
+                           <span>{{ humanifyNumber(allDailyData[selectedDay]?.inputTokens || 0) }} -> {{ humanifyNumber(allDailyData[selectedDay]?.outputTokens || 0) }} Tokens</span>
                         </div>
                     </div>
 
@@ -290,10 +293,10 @@ export default {
                     <!-- Activity Tab - Full Page Layout -->
                     <div v-if="activeTab === 'activity'" class="h-full flex flex-col bg-white dark:bg-gray-800">
                         <!-- Filters Bar -->
-                        <div class="flex-shrink-0 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-6 py-4">
-                            <div class="flex flex-wrap gap-4 items-end">
-                                <div class="flex flex-col">
-                                    <select v-model="selectedModel" class="px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <div class="flex-shrink-0 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 sm:px-6 py-4">
+                            <div class="flex flex-wrap gap-2 sm:gap-4 items-end">
+                                <div class="flex flex-col flex-1 min-w-[120px] sm:flex-initial">
+                                    <select v-model="selectedModel" class="px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-full">
                                         <option value="">All Models</option>
                                         <option v-for="model in filterOptions.models" :key="model" :value="model">
                                             {{ model }}
@@ -301,8 +304,8 @@ export default {
                                     </select>
                                 </div>
 
-                                <div class="flex flex-col">
-                                    <select v-model="selectedProvider" class="px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <div class="flex flex-col flex-1 min-w-[120px] sm:flex-initial">
+                                    <select v-model="selectedProvider" class="px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-full">
                                         <option value="">All Providers</option>
                                         <option v-for="provider in filterOptions.providers" :key="provider" :value="provider">
                                             {{ provider }}
@@ -310,8 +313,8 @@ export default {
                                     </select>
                                 </div>
 
-                                <div class="flex flex-col">
-                                    <select v-model="sortBy" class="px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <div class="flex flex-col flex-1 min-w-[140px] sm:flex-initial">
+                                    <select v-model="sortBy" class="px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-full">
                                         <option value="created">Date (Newest)</option>
                                         <option value="cost">Cost (Highest)</option>
                                         <option value="duration">Duration (Longest)</option>
@@ -319,7 +322,7 @@ export default {
                                     </select>
                                 </div>
 
-                                <button v-if="hasActiveFilters" @click="clearActivityFilters" class="px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+                                <button v-if="hasActiveFilters" @click="clearActivityFilters" class="px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors whitespace-nowrap">
                                     Clear Filters
                                 </button>
                             </div>
@@ -339,30 +342,30 @@ export default {
                             </div>
 
                             <div v-else class="divide-y divide-gray-200 dark:divide-gray-700">
-                                <div v-for="request in activityRequests" :key="request.id" class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
-                                    <div class="flex items-start justify-between gap-4">
-                                        <div class="flex-1 min-w-0">
-                                            <div class="flex justify-between">
-                                                <div class="flex items-center gap-2 mb-2 flex-wrap">
+                                <div v-for="request in activityRequests" :key="request.id" class="px-3 sm:px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                                    <div class="flex flex-col lg:flex-row items-start justify-between gap-4">
+                                        <div class="flex-1 min-w-0 w-full">
+                                            <div class="flex flex-col sm:flex-row justify-between gap-2 mb-2">
+                                                <div class="flex items-center gap-2 flex-wrap">
                                                     <span class="text-xs px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 rounded font-medium">{{ request.model }}</span>
                                                     <span class="text-xs px-2 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 rounded font-medium">{{ request.provider }}</span>
                                                     <span v-if="request.providerRef" class="text-xs px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 rounded font-medium">{{ request.providerRef }}</span>
                                                     <span v-if="request.finishReason" class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300 rounded font-medium">{{ request.finishReason }}</span>
                                                 </div>
-                                                <div class="text-xs text-gray-500 dark:text-gray-400">
+                                                <div class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
                                                     {{ formatActivityDate(request.created) }}
                                                 </div>
                                             </div>
-                                            <div class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
+                                            <div class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate mb-3">
                                                 {{ request.title }}
                                             </div>
 
-                                            <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mt-3">
+                                            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
                                                 <div :title="request.cost">
                                                     <div class="text-xs text-gray-500 dark:text-gray-400 font-medium">Cost</div>
                                                     <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ formatCost(request.cost) }}</div>
                                                 </div>
-                                                <div>
+                                                <div class="col-span-2 sm:col-span-1">
                                                     <div class="text-xs text-gray-500 dark:text-gray-400 font-medium">Tokens</div>
                                                     <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                                                         {{ humanifyNumber(request.inputTokens) }} -> {{ humanifyNumber(request.outputTokens) }}
@@ -379,12 +382,12 @@ export default {
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="flex flex-col gap-2">
-                                            <button type="button" v-if="threadExists(request.threadId)" @click="openThread(request.threadId)" class="flex-shrink-0 px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 border border-blue-300 dark:border-blue-600 rounded hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-colors whitespace-nowrap">
-                                                View<span class="hidden lg:inline"> Thread</span>
+                                        <div class="flex flex-row lg:flex-col gap-2 w-full lg:w-auto">
+                                            <button type="button" v-if="threadExists(request.threadId)" @click="openThread(request.threadId)" class="flex-1 lg:flex-initial px-3 sm:px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 border border-blue-300 dark:border-blue-600 rounded hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-colors whitespace-nowrap">
+                                                View<span class="hidden sm:inline"> Thread</span>
                                             </button>
-                                            <button type="button" @click="deleteRequestLog(request.id)" class="flex-shrink-0 px-4 py-2 text-sm font-medium text-red-600 dark:text-red-500 hover:text-red-800 dark:hover:text-red-400 border border-red-300 dark:border-red-600 rounded hover:bg-red-50 dark:hover:bg-red-900/30 transition-colors whitespace-nowrap">
-                                                Delete<span class="hidden lg:inline"> Request</span>
+                                            <button type="button" @click="deleteRequestLog(request.id)" class="flex-1 lg:flex-initial px-3 sm:px-4 py-2 text-sm font-medium text-red-600 dark:text-red-500 hover:text-red-800 dark:hover:text-red-400 border border-red-300 dark:border-red-600 rounded hover:bg-red-50 dark:hover:bg-red-900/30 transition-colors whitespace-nowrap">
+                                                Delete<span class="hidden sm:inline"> Request</span>
                                             </button>
                                         </div>
                                     </div>

llms_py-2.0.30/llms/ui/App.mjs

@@ -0,0 +1,97 @@
+import { inject, ref, onMounted, onUnmounted } from "vue"
+import Sidebar from "./Sidebar.mjs"
+
+export default {
+    components: {
+        Sidebar,
+    },
+    setup() {
+        const ai = inject('ai')
+        const isMobile = ref(false)
+
+        const checkMobile = () => {
+            const wasMobile = isMobile.value
+            isMobile.value = window.innerWidth < 1024 // lg breakpoint
+
+            // Only auto-adjust sidebar state when transitioning between mobile/desktop
+            if (wasMobile !== isMobile.value) {
+                if (isMobile.value) {
+                    ai.isSidebarOpen = false
+                } else {
+                    ai.isSidebarOpen = true
+                }
+            }
+        }
+
+        const toggleSidebar = () => {
+            ai.isSidebarOpen = !ai.isSidebarOpen
+        }
+
+        const closeSidebar = () => {
+            if (isMobile.value) {
+                ai.isSidebarOpen = false
+            }
+        }
+
+        onMounted(() => {
+            checkMobile()
+            window.addEventListener('resize', checkMobile)
+        })
+
+        onUnmounted(() => {
+            window.removeEventListener('resize', checkMobile)
+        })
+
+        return { ai, isMobile, toggleSidebar, closeSidebar }
+    },
+    template: `
+        <div class="flex h-screen bg-white dark:bg-gray-900">
+            <!-- Mobile Overlay -->
+            <div
+                v-if="isMobile && ai.isSidebarOpen && !(ai.requiresAuth && !ai.auth)"
+                @click="closeSidebar"
+                class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
+            ></div>
+
+            <!-- Sidebar (hidden when auth required and not authenticated) -->
+            <div
+                v-if="!(ai.requiresAuth && !ai.auth) && ai.isSidebarOpen"
+                :class="[
+                    'transition-transform duration-300 ease-in-out z-50',
+                    'w-72 xl:w-80 flex-shrink-0',
+                    'lg:relative',
+                    'fixed inset-y-0 left-0'
+                ]"
+            >
+                <Sidebar @thread-selected="closeSidebar" @toggle-sidebar="toggleSidebar" />
+            </div>
+
+            <!-- Main Area -->
+            <div class="flex-1 flex flex-col">
+                <!-- Collapsed Sidebar Toggle Button -->
+                <div
+                    v-if="!(ai.requiresAuth && !ai.auth) && !ai.isSidebarOpen"
+                    class="fixed top-4 left-0"
+                >
+                    <button type="button"
+                        @click="toggleSidebar"
+                        class="group p-1 text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                        title="Open sidebar"
+                    >
+                        <div class="relative w-5 h-5">
+                            <!-- Default sidebar icon -->
+                            <svg class="absolute inset-0 group-hover:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                                <line x1="9" y1="3" x2="9" y2="21"></line>
+                            </svg>
+                            <!-- Hover state: |→ icon -->
+                            <svg class="absolute inset-0 hidden group-hover:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m17.172 11l-4.657-4.657l1.414-1.414L21 12l-7.071 7.071l-1.414-1.414L17.172 13H8v-2zM4 19V5h2v14z"/></svg>
+                        </div>
+                    </button>
+                </div>
+
+                <RouterView />
+            </div>
+        </div>
+    `,
+}

llms_py-2.0.30/llms/ui/Brand.mjs

@@ -0,0 +1,52 @@
+export default {
+    template:`
+    <div class="flex-shrink-0 pl-2 pr-4 py-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 min-h-16 select-none">
+        <div class="flex items-center justify-between">
+            <div class="flex items-center space-x-2">
+                <button type="button"
+                    @click="$emit('toggle-sidebar')"
+                    class="group relative text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors"
+                    title="Collapse sidebar"
+                >
+                    <div class="relative size-5">
+                        <!-- Default sidebar icon -->
+                        <svg class="absolute inset-0 group-hover:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                            <line x1="9" y1="3" x2="9" y2="21"></line>
+                        </svg>
+                        <!-- Hover state: |← icon -->
+                        <svg class="absolute inset-0 hidden group-hover:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m10.071 4.929l1.414 1.414L6.828 11H16v2H6.828l4.657 4.657l-1.414 1.414L3 12zM18.001 19V5h2v14z"/></svg>
+                    </div>
+                </button>
+
+                <button type="button"
+                    @click="$emit('home')"
+                    class="text-lg font-semibold text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors"
+                    title="Go back to initial state"
+                >
+                    History
+                </button>
+            </div>
+
+            <div class="flex items-center space-x-2">
+                <button type="button"
+                    @click="$emit('analytics')"
+                    class="text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors"
+                    title="Analytics"
+                >
+                    <svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M5 22a1 1 0 0 1-1-1v-8a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1m5 0a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v18a1 1 0 0 1-1 1m5 0a1 1 0 0 1-1-1V9a1 1 0 0 1 2 0v12a1 1 0 0 1-1 1m5 0a1 1 0 0 1-1-1v-4a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1"/></svg>
+                </button>
+
+                <button type="button"
+                    @click="$emit('new')"
+                    class="text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors"
+                    title="New Chat"
+                >
+                    <svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></g></svg>
+                </button>
+            </div>
+        </div>
+    </div>
+    `,
+    emits:['home','new','analytics','toggle-sidebar'],
+}