llms-py 2.0.20__py3-none-any.whl → 3.0.18__py3-none-any.whl

llms/{ui/Analytics.mjs → extensions/analytics/ui/index.mjs}

@@ -1,39 +1,35 @@
-import { ref, onMounted, watch, nextTick, computed } from 'vue'
+import { ref, watch, nextTick, computed, inject, onMounted, onUnmounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { useFormatters } from "@servicestack/vue"
 import { leftPart } from '@servicestack/client'
 import { Chart, registerables } from "chart.js"
-import { useThreadStore } from './threadStore.mjs'
-import { formatCost } from './utils.mjs'
 Chart.register(...registerables)
 
-const { humanifyNumber, humanifyMs } = useFormatters()
-
 export const colors = [
-    { background: 'rgba(54, 162, 235, 0.2)',  border: 'rgb(54, 162, 235)' }, //blue
-    { background: 'rgba(255, 99, 132, 0.2)',  border: 'rgb(255, 99, 132)' },
+    { background: 'rgba(54, 162, 235, 0.2)', border: 'rgb(54, 162, 235)' }, //blue
+    { background: 'rgba(255, 99, 132, 0.2)', border: 'rgb(255, 99, 132)' },
     { background: 'rgba(153, 102, 255, 0.2)', border: 'rgb(153, 102, 255)' },
-    { background: 'rgba(54, 162, 235, 0.2)',  border: 'rgb(54, 162, 235)' },
-    { background: 'rgba(255, 159, 64, 0.2)',  border: 'rgb(255, 159, 64)' },
-    { background: 'rgba(67, 56, 202, 0.2)',   border: 'rgb(67, 56, 202)' },
-    { background: 'rgba(255, 99, 132, 0.2)',  border: 'rgb(255, 99, 132)' },
-    { background: 'rgba(14, 116, 144, 0.2)',  border: 'rgb(14, 116, 144)' },
-    { background: 'rgba(162, 28, 175, 0.2)',  border: 'rgb(162, 28, 175)' },
+    { background: 'rgba(54, 162, 235, 0.2)', border: 'rgb(54, 162, 235)' },
+    { background: 'rgba(255, 159, 64, 0.2)', border: 'rgb(255, 159, 64)' },
+    { background: 'rgba(67, 56, 202, 0.2)', border: 'rgb(67, 56, 202)' },
+    { background: 'rgba(255, 99, 132, 0.2)', border: 'rgb(255, 99, 132)' },
+    { background: 'rgba(14, 116, 144, 0.2)', border: 'rgb(14, 116, 144)' },
+    { background: 'rgba(162, 28, 175, 0.2)', border: 'rgb(162, 28, 175)' },
     { background: 'rgba(201, 203, 207, 0.2)', border: 'rgb(201, 203, 207)' },
 ]
 
 const MonthSelector = {
-    template:`
-    <div class="flex gap-4 items-center">
+    template: `
+    <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 +38,7 @@ const MonthSelector = {
 
         <!-- Year Dropdown -->
         <select :value="selectedYear" @change="(e) => updateSelection(parseInt(e.target.value), selectedMonth)"
-            class="border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 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>
@@ -50,7 +46,7 @@ const MonthSelector = {
     </div>
     `,
     props: {
-        dailyData: Array,
+        dailyData: Object,
     },
     setup(props) {
         const router = useRouter()
@@ -108,16 +104,15 @@ const MonthSelector = {
     }
 }
 
-export default {
-    components: {
-        MonthSelector,
-    },
+export const Analytics = {
     template: `
-        <div class="flex flex-col h-full w-full">
+        <div class="flex flex-col w-full">
             <!-- Header -->
-            <div class="border-b border-gray-200 bg-white 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">
+            <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" />
@@ -125,67 +120,67 @@ export default {
             </div>
 
             <!-- Tabs -->
-            <div class="border-b border-gray-200 bg-white px-4">
+            <div class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4">
                 <div class="max-w-6xl mx-auto flex gap-8">
                     <button type="button"
                         @click="activeTab = 'cost'"
                         :class="['py-3 px-1 border-b-2 font-medium text-sm transition-colors',
                                  activeTab === 'cost'
-                                    ? 'border-blue-500 text-blue-600'
-                                    : 'border-transparent text-gray-600 hover:text-gray-900']">
+                                    ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                                    : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200']">
                         Cost Analysis
                     </button>
                     <button type="button"
                         @click="activeTab = 'tokens'"
                         :class="['py-3 px-1 border-b-2 font-medium text-sm transition-colors',
                                  activeTab === 'tokens'
-                                    ? 'border-blue-500 text-blue-600'
-                                    : 'border-transparent text-gray-600 hover:text-gray-900']">
+                                    ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                                    : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200']">
                         Token Usage
                     </button>
                     <button type="button"
                         @click="activeTab = 'activity'"
                         :class="['py-3 px-1 border-b-2 font-medium text-sm transition-colors',
                                  activeTab === 'activity'
-                                    ? 'border-blue-500 text-blue-600'
-                                    : 'border-transparent text-gray-600 hover:text-gray-900']">
+                                    ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                                    : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200']">
                         Activity
                     </button>
                 </div>
             </div>
 
             <!-- Content -->
-            <div class="flex-1 overflow-auto bg-gray-50" :class="activeTab === 'activity' ? 'p-0' : 'p-4'">
+            <div class="flex-1 bg-gray-50 dark:bg-gray-900" :class="activeTab === 'activity' ? 'p-0' : 'p-4'">
 
-                <div :class="activeTab === 'activity' ? 'h-full' : 'max-w-6xl mx-auto'">
+                <div :class="activeTab === 'activity' ? '' : 'max-w-6xl mx-auto'">
                     <!-- Stats Summary (hidden for Activity tab) -->
                     <div v-if="activeTab !== 'activity'" class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-                        <div class="bg-white rounded-lg shadow p-4">
-                            <div class="text-sm font-medium text-gray-600">Total Cost</div>
-                            <div class="text-2xl font-bold text-gray-900 mt-1">{{ formatCost(totalCost) }}</div>
+                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
+                            <div class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Cost</div>
+                            <div class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">{{ $fmt.cost(totalCost) }}</div>
                         </div>
-                        <div class="bg-white rounded-lg shadow p-4">
-                            <div class="text-sm font-medium text-gray-600">Total Requests</div>
-                            <div class="text-2xl font-bold text-gray-900 mt-1">{{ totalRequests }}</div>
+                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
+                            <div class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Requests</div>
+                            <div class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">{{ totalRequests }}</div>
                         </div>
-                        <div class="bg-white rounded-lg shadow p-4">
-                            <div class="text-sm font-medium text-gray-600">Total Input Tokens</div>
-                            <div class="text-2xl font-bold text-gray-900 mt-1">{{ humanifyNumber(totalInputTokens) }}</div>
+                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
+                            <div class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Input Tokens</div>
+                            <div class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">{{ $fmt.humanifyNumber(totalInputTokens) }}</div>
                         </div>
-                        <div class="bg-white rounded-lg shadow p-4">
-                            <div class="text-sm font-medium text-gray-600">Total Output Tokens</div>
-                            <div class="text-2xl font-bold text-gray-900 mt-1">{{ humanifyNumber(totalOutputTokens) }}</div>
+                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
+                            <div class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Output Tokens</div>
+                            <div class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">{{ $fmt.humanifyNumber(totalOutputTokens) }}</div>
                         </div>
                     </div>
 
                     <!-- Cost Analysis Tab -->
-                    <div v-if="activeTab === 'cost'" class="bg-white rounded-lg shadow p-6">
-                        <div class="flex items-center justify-between mb-6">
-                            <h3 class="text-lg font-semibold text-gray-900">Daily Costs</h3>
-                            <h3 class="text-lg font-semibold text-gray-900">
+                    <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 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">
+                            <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>
@@ -194,16 +189,16 @@ export default {
                         <div v-if="chartData.labels.length > 0" class="relative h-96">
                             <canvas ref="costChartCanvas"></canvas>
                         </div>
-                        <div v-else class="flex items-center justify-center h-96 text-gray-500">
+                        <div v-else class="flex items-center justify-center h-96 text-gray-500 dark:text-gray-400">
                             <p>No request data available</p>
                         </div>
                     </div>
 
                     <!-- Token Usage Tab -->
-                    <div v-if="activeTab === 'tokens'" class="bg-white rounded-lg shadow p-6">
-                        <h3 class="text-lg font-semibold text-gray-900 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>
@@ -211,48 +206,48 @@ export default {
                         <div v-if="tokenChartData.labels.length > 0" class="relative h-96">
                             <canvas ref="tokenChartCanvas"></canvas>
                         </div>
-                        <div v-else class="flex items-center justify-center h-96 text-gray-500">
+                        <div v-else class="flex items-center justify-center h-96 text-gray-500 dark:text-gray-400">
                             <p>No request data available</p>
                         </div>
                     </div>
 
-                    <div v-if="allDailyData[selectedDay]?.requests && ['cost', 'tokens'].includes(activeTab)" class="mt-8 px-2 text-gray-700 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' }) }} 
+                            {{ 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>{{ $fmt.cost(allDailyData[selectedDay]?.cost || 0) }}</span>
+                           <span>&#183;</span>
+                           <span>{{ allDailyData[selectedDay]?.requests || 0 }} Requests</span>
+                           <span>&#183;</span>
+                           <span>{{ $fmt.humanifyNumber(allDailyData[selectedDay]?.inputTokens || 0) }} -> {{ $fmt.humanifyNumber(allDailyData[selectedDay]?.outputTokens || 0) }} Tokens</span>
                         </div>
                     </div>
 
                     <!-- Pie Charts for Selected Day -->
                     <div v-if="allDailyData[selectedDay]?.requests && activeTab === 'cost' && selectedDay" class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
                         <!-- Model Pie Chart -->
-                        <div class="bg-white rounded-lg shadow p-6">
-                            <h3 class="text-lg font-semibold text-gray-900 mb-4">
+                        <div 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-4">
                                 Cost by Model
                             </h3>
                             <div v-if="modelPieData.labels.length > 0" class="relative h-80">
                                 <canvas ref="modelPieCanvas"></canvas>
                             </div>
-                            <div v-else class="flex items-center justify-center h-80 text-gray-500">
+                            <div v-else class="flex items-center justify-center h-80 text-gray-500 dark:text-gray-400">
                                 <p>No data for selected day</p>
                             </div>
                         </div>
 
                         <!-- Provider Pie Chart -->
-                        <div class="bg-white rounded-lg shadow p-6">
-                            <h3 class="text-lg font-semibold text-gray-900 mb-4">
+                        <div 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-4">
                                 Cost by Provider
                             </h3>
                             <div v-if="providerPieData.labels.length > 0" class="relative h-80">
                                 <canvas ref="providerPieCanvas"></canvas>
                             </div>
-                            <div v-else class="flex items-center justify-center h-80 text-gray-500">
+                            <div v-else class="flex items-center justify-center h-80 text-gray-500 dark:text-gray-400">
                                 <p>No data for selected day</p>
                             </div>
                         </div>
@@ -261,39 +256,39 @@ export default {
                     <!-- Token Pie Charts for Selected Day -->
                     <div v-if="allDailyData[selectedDay]?.requests && activeTab === 'tokens' && selectedDay" class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
                         <!-- Token Model Pie Chart -->
-                        <div class="bg-white rounded-lg shadow p-6">
-                            <h3 class="text-lg font-semibold text-gray-900 mb-4">
+                        <div 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-4">
                                 Tokens by Model
                             </h3>
                             <div v-if="tokenModelPieData.labels.length > 0" class="relative h-80">
                                 <canvas ref="tokenModelPieCanvas"></canvas>
                             </div>
-                            <div v-else class="flex items-center justify-center h-80 text-gray-500">
+                            <div v-else class="flex items-center justify-center h-80 text-gray-500 dark:text-gray-400">
                                 <p>No data for selected day</p>
                             </div>
                         </div>
 
                         <!-- Token Provider Pie Chart -->
-                        <div class="bg-white rounded-lg shadow p-6">
-                            <h3 class="text-lg font-semibold text-gray-900 mb-4">
+                        <div 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-4">
                                 Tokens by Provider
                             </h3>
                             <div v-if="tokenProviderPieData.labels.length > 0" class="relative h-80">
                                 <canvas ref="tokenProviderPieCanvas"></canvas>
                             </div>
-                            <div v-else class="flex items-center justify-center h-80 text-gray-500">
+                            <div v-else class="flex items-center justify-center h-80 text-gray-500 dark:text-gray-400">
                                 <p>No data for selected day</p>
                             </div>
                         </div>
                     </div>
 
                     <!-- Activity Tab - Full Page Layout -->
-                    <div v-if="activeTab === 'activity'" class="h-full flex flex-col bg-white">
+                    <div v-if="activeTab === 'activity'" class="flex flex-col bg-white dark:bg-gray-800">
                         <!-- Filters Bar -->
-                        <div class="flex-shrink-0 border-b border-gray-200 bg-white 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 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 +296,8 @@ export default {
                                     </select>
                                 </div>
 
-                                <div class="flex flex-col">
-                                    <select v-model="selectedProvider" class="px-3 py-2 border border-gray-300 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,81 +305,85 @@ export default {
                                     </select>
                                 </div>
 
-                                <div class="flex flex-col">
-                                    <select v-model="sortBy" class="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
-                                        <option value="created">Date (Newest)</option>
+                                <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="createdAt">Date (Newest)</option>
                                         <option value="cost">Cost (Highest)</option>
                                         <option value="duration">Duration (Longest)</option>
                                         <option value="totalTokens">Tokens (Most)</option>
                                     </select>
                                 </div>
 
-                                <button v-if="hasActiveFilters" @click="clearActivityFilters" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-900 border border-gray-300 rounded-md hover:bg-gray-100 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>
                         </div>
 
                         <!-- Requests List with Infinite Scroll -->
-                        <div class="flex-1 overflow-y-auto" @scroll="onActivityScroll" ref="activityScrollContainer">
-                            <div v-if="isActivityLoading && activityRequests.length === 0" class="flex items-center justify-center h-full">
+                        <div class="flex-1">
+                            <div v-if="isActivityLoading && activityRequests.length === 0" class="mt-8 flex items-center justify-center h-full">
                                 <div class="text-center">
                                     <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
-                                    <p class="mt-4 text-gray-600">Loading requests...</p>
+                                    <p class="mt-4 text-gray-600 dark:text-gray-400">Loading requests...</p>
                                 </div>
                             </div>
 
-                            <div v-else-if="activityRequests.length === 0" class="flex items-center justify-center h-full">
-                                <p class="text-gray-500">No requests found</p>
+                            <div v-else-if="activityRequests.length === 0" class="mt-4 flex items-center justify-center h-full">
+                                <p class="text-gray-500 dark:text-gray-400">No requests found</p>
                             </div>
 
-                            <div v-else class="divide-y divide-gray-200">
-                                <div v-for="request in activityRequests" :key="request.id" class="px-6 py-4 hover:bg-gray-50 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">
-                                                    <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded font-medium">{{ request.model }}</span>
-                                                    <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded font-medium">{{ request.provider }}</span>
-                                                    <span v-if="request.providerRef" class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded font-medium">{{ request.providerRef }}</span>
-                                                    <span v-if="request.finishReason" class="text-xs px-2 py-1 bg-gray-100 text-gray-800 rounded font-medium">{{ request.finishReason }}</span>
+                            <div v-else class="divide-y divide-gray-200 dark:divide-gray-700">
+                                <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 v-if="request.model" 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 v-if="request.provider" 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">
-                                                    {{ formatActivityDate(request.created) }}
+                                                <div class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                                                    {{ formatActivityDate(request.createdAt) }}
                                                 </div>
                                             </div>
-                                            <div class="text-sm font-semibold text-gray-900 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 v-if="request.error" class="rounded-lg px-2 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 text-sm"
+                                                :title="request.error + '\\n' + (request.stacktrace || '')">
+                                                {{ request.error }}
+                                            </div>
+                                            <div v-else 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 font-medium">Cost</div>
-                                                    <div class="text-sm font-semibold text-gray-900">{{ formatCost(request.cost) }}</div>
+                                                    <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">{{ $fmt.costLong(request.cost) }}</div>
                                                 </div>
-                                                <div>
-                                                    <div class="text-xs text-gray-500 font-medium">Tokens</div>
-                                                    <div class="text-sm font-semibold text-gray-900">
-                                                        {{ humanifyNumber(request.inputTokens) }} -> {{ humanifyNumber(request.outputTokens) }}
-                                                        <span v-if="request.inputCachedTokens" class="ml-1 text-xs text-gray-500">({{ humanifyNumber(request.inputCachedTokens) }} cached)</span>
+                                                <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 v-if="request.inputTokens || request.outputTokens" class="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                                                        {{ $fmt.humanifyNumber(request.inputTokens || 0) }} -> {{ $fmt.humanifyNumber(request.outputTokens || 0) }}
+                                                        <span v-if="request.inputCachedTokens" class="ml-1 text-xs text-gray-500 dark:text-gray-400">({{ $fmt.humanifyNumber(request.inputCachedTokens || 0) }} cached)</span>
                                                     </div>
                                                 </div>
                                                 <div>
-                                                    <div class="text-xs text-gray-500 font-medium">Duration</div>
-                                                    <div class="text-sm font-semibold text-gray-900">{{ request.duration ? humanifyMs(request.duration) : '—' }}</div>
+                                                    <div class="text-xs text-gray-500 dark:text-gray-400 font-medium">Duration</div>
+                                                    <div v-if="request.duration" class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ $fmt.humanifyMs(request.duration * 1000) }}</div>
                                                 </div>
                                                 <div>
-                                                    <div class="text-xs text-gray-500 font-medium">Speed</div>
-                                                    <div class="text-sm font-semibold text-gray-900">{{ request.duration && request.outputTokens ? (request.outputTokens / (request.duration / 1000)).toFixed(1) + ' tok/s' : '—' }}</div>
+                                                    <div class="text-xs text-gray-500 dark:text-gray-400 font-medium">Speed</div>
+                                                    <div v-if="request.duration && request.outputTokens" class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ (request.outputTokens / (request.duration / 1000)).toFixed(1) + ' tok/s' }}</div>
                                                 </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 hover:text-blue-800 border border-blue-300 rounded hover:bg-blue-50 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 hover:text-red-800 border border-red-300 rounded hover:bg-red-50 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>
@@ -394,10 +393,11 @@ export default {
                                     <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
                                 </div>
 
-                                <div v-if="!activityHasMore && activityRequests.length > 0" class="px-6 py-8 text-center text-gray-500 text-sm">
+                                <div v-if="!activityHasMore && activityRequests.length > 0" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400 text-sm">
                                     No more requests to load
                                 </div>
                             </div>
+                            <div ref="scrollSentinel" class="h-4 w-full"></div>
                         </div>
                     </div>
                 </div>
@@ -405,10 +405,10 @@ export default {
         </div>
     `,
     setup() {
+        const ctx = inject('ctx')
         const router = useRouter()
         const route = useRoute()
-        const threads = useThreadStore()
-        const { initDB } = threads
+        const analyticsData = ref()
 
         // Initialize activeTab from URL query parameter, default to 'cost'
         const activeTab = ref(route.query.tab || 'cost')
@@ -434,6 +434,9 @@ export default {
         const selectedYear = computed(() => {
             return route.query.year !== undefined ? parseInt(route.query.year) : currentDate.getFullYear()
         })
+        const selectedYearMonth = computed(() => {
+            return `${selectedYear.value}-${selectedMonth.value < 10 ? '0' + selectedMonth.value : selectedMonth.value}`
+        })
         const allDailyData = ref({}) // Store all data for filtering
 
         // Selected day - read from URL, default to today
@@ -529,52 +532,18 @@ export default {
 
         const selectedModel = ref('')
         const selectedProvider = ref('')
-        const sortBy = ref('created')
+        const sortBy = ref('createdAt')
         const filterOptions = ref({ models: [], providers: [] })
-        const activityScrollContainer = ref(null)
+        const scrollSentinel = ref(null)
+        let observer = null
 
         const hasActiveFilters = computed(() => selectedModel.value || selectedProvider.value)
 
         async function loadAnalyticsData() {
             try {
-                const db = await initDB()
-                const tx = db.transaction(['requests'], 'readonly')
-                const store = tx.objectStore('requests')
-                const allRequests = await store.getAll()
-
                 // Group requests by date
-                const dailyData = {}
-                let totalCostSum = 0
-                let totalInputSum = 0
-                let totalOutputSum = 0
-                const yearsSet = new Set()
-
-                allRequests.forEach(req => {
-                    const date = new Date(req.created * 1000)
-                    const dateKey = date.toISOString().split('T')[0] // YYYY-MM-DD
-                    yearsSet.add(date.getFullYear())
-
-                    if (!dailyData[dateKey]) {
-                        dailyData[dateKey] = {
-                            cost: 0,
-                            requests: 0,
-                            inputTokens: 0,
-                            outputTokens: 0
-                        }
-                    }
-
-                    dailyData[dateKey].cost += req.cost || 0
-                    dailyData[dateKey].requests += 1
-                    dailyData[dateKey].inputTokens += req.inputTokens || 0
-                    dailyData[dateKey].outputTokens += req.outputTokens || 0
-
-                    totalCostSum += req.cost || 0
-                    totalInputSum += req.inputTokens || 0
-                    totalOutputSum += req.outputTokens || 0
-                })
-
-                // Store all daily data for filtering
-                allDailyData.value = dailyData
+                analyticsData.value = await ctx.requests.getSummary()
+                allDailyData.value = analyticsData.value.dailyData
 
                 // Update chart data based on selected month/year
                 updateChartData()
@@ -651,36 +620,8 @@ export default {
             }
 
             try {
-                const db = await initDB()
-                const tx = db.transaction(['requests'], 'readonly')
-                const store = tx.objectStore('requests')
-                const allRequests = await store.getAll()
-
-                // Filter requests for the selected day
-                const dayStart = Math.floor(new Date(dateKey + 'T00:00:00Z').getTime() / 1000)
-                const dayEnd = Math.floor(new Date(dateKey + 'T23:59:59Z').getTime() / 1000)
-
-                const dayRequests = allRequests.filter(req => req.created >= dayStart && req.created <= dayEnd)
-
-                // Aggregate by model
-                const modelData = {}
-                const providerData = {}
-
-                dayRequests.forEach(req => {
-                    // Model aggregation
-                    if (!modelData[req.model]) {
-                        modelData[req.model] = { cost: 0, count: 0 }
-                    }
-                    modelData[req.model].cost += req.cost || 0
-                    modelData[req.model].count += 1
-
-                    // Provider aggregation
-                    if (!providerData[req.provider]) {
-                        providerData[req.provider] = { cost: 0, count: 0 }
-                    }
-                    providerData[req.provider].cost += req.cost || 0
-                    providerData[req.provider].count += 1
-                })
+                const dailySummary = await ctx.requests.getDailySummary(dateKey)
+                const { modelData, providerData } = dailySummary
 
                 // Prepare model pie chart data
                 const modelLabels = Object.keys(modelData).sort()
@@ -724,38 +665,8 @@ export default {
             }
 
             try {
-                const db = await initDB()
-                const tx = db.transaction(['requests'], 'readonly')
-                const store = tx.objectStore('requests')
-                const allRequests = await store.getAll()
-
-                // Filter requests for the selected day
-                const dayStart = Math.floor(new Date(dateKey + 'T00:00:00Z').getTime() / 1000)
-                const dayEnd = Math.floor(new Date(dateKey + 'T23:59:59Z').getTime() / 1000)
-
-                const dayRequests = allRequests.filter(req => req.created >= dayStart && req.created <= dayEnd)
-
-                // Aggregate by model and provider (using tokens)
-                const modelData = {}
-                const providerData = {}
-
-                dayRequests.forEach(req => {
-                    const totalTokens = (req.inputTokens || 0) + (req.outputTokens || 0)
-
-                    // Model aggregation
-                    if (!modelData[req.model]) {
-                        modelData[req.model] = { tokens: 0, count: 0 }
-                    }
-                    modelData[req.model].tokens += totalTokens
-                    modelData[req.model].count += 1
-
-                    // Provider aggregation
-                    if (!providerData[req.provider]) {
-                        providerData[req.provider] = { tokens: 0, count: 0 }
-                    }
-                    providerData[req.provider].tokens += totalTokens
-                    providerData[req.provider].count += 1
-                })
+                const dailySummary = await ctx.requests.getDailySummary(dateKey)
+                const { modelData, providerData } = dailySummary
 
                 // Prepare model pie chart data
                 const modelLabels = Object.keys(modelData).sort()
@@ -799,7 +710,7 @@ export default {
                 costChartInstance.destroy()
             }
 
-            const ctx = costChartCanvas.value.getContext('2d')
+            const ctx2d = costChartCanvas.value.getContext('2d')
             const chartTypeValue = costChartType.value
 
             // Find the index of the selected day
@@ -830,7 +741,7 @@ export default {
                 }]
             }
 
-            costChartInstance = new Chart(ctx, {
+            costChartInstance = new Chart(ctx2d, {
                 type: chartTypeValue,
                 data: chartDataWithColors,
                 options: {
@@ -856,14 +767,14 @@ export default {
                         },
                         tooltip: {
                             callbacks: {
-                                title: function(context) {
+                                title: function (context) {
                                     const index = context[0].dataIndex
                                     const dateKey = chartData.value.dateKeys[index]
                                     const date = new Date(dateKey + 'T00:00:00Z')
                                     return date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
                                 },
-                                label: function(context) {
-                                    return `Cost: ${formatCost(context.parsed.y)}`
+                                label: function (context) {
+                                    return `Cost: ${ctx.fmt.cost(context.parsed.y)}`
                                 }
                             }
                         }
@@ -872,7 +783,7 @@ export default {
                         y: {
                             beginAtZero: true,
                             ticks: {
-                                callback: function(value) {
+                                callback: function (value) {
                                     return '$' + value.toFixed(4)
                                 }
                             }
@@ -890,7 +801,7 @@ export default {
                 tokenChartInstance.destroy()
             }
 
-            const ctx = tokenChartCanvas.value.getContext('2d')
+            const ctx2d = tokenChartCanvas.value.getContext('2d')
 
             // Find the index of the selected day
             const selectedDayIndex = tokenChartData.value.dateKeys.indexOf(selectedDay.value)
@@ -941,7 +852,7 @@ export default {
                 ]
             }
 
-            tokenChartInstance = new Chart(ctx, {
+            tokenChartInstance = new Chart(ctx2d, {
                 type: 'bar',
                 data: chartDataWithColors,
                 options: {
@@ -969,8 +880,8 @@ export default {
                             stacked: true,
                             beginAtZero: true,
                             ticks: {
-                                callback: function(value) {
-                                    return humanifyNumber(value)
+                                callback: function (value) {
+                                    return ctx.fmt.humanifyNumber(value)
                                 }
                             }
                         }
@@ -982,14 +893,14 @@ export default {
                         },
                         tooltip: {
                             callbacks: {
-                                title: function(context) {
+                                title: function (context) {
                                     const index = context[0].dataIndex
                                     const dateKey = tokenChartData.value.dateKeys[index]
                                     const date = new Date(dateKey + 'T00:00:00Z')
                                     return date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
                                 },
-                                label: function(context) {
-                                    return `${context.dataset.label}: ${humanifyNumber(context.parsed.y)}`
+                                label: function (context) {
+                                    return `${context.dataset.label}: ${ctx.fmt.humanifyNumber(context.parsed.y)}`
                                 }
                             }
                         }
@@ -1006,7 +917,7 @@ export default {
                 modelPieChartInstance.destroy()
             }
 
-            const ctx = modelPieCanvas.value.getContext('2d')
+            const ctx2d = modelPieCanvas.value.getContext('2d')
 
             // Custom plugin to draw percentage labels on pie slices
             const percentagePlugin = {
@@ -1021,7 +932,9 @@ export default {
 
                         // Only display label if percentage > 1%
                         if (parseFloat(percentage) > 1) {
-                            chartCtx.fillStyle = '#000'
+                            // Use white color in dark mode, black in light mode
+                            const isDarkMode = document.documentElement.classList.contains('dark')
+                            chartCtx.fillStyle = isDarkMode ? '#fff' : '#000'
                             chartCtx.font = 'bold 12px Arial'
                             chartCtx.textAlign = 'center'
                             chartCtx.textBaseline = 'middle'
@@ -1031,7 +944,7 @@ export default {
                 }
             }
 
-            modelPieChartInstance = new Chart(ctx, {
+            modelPieChartInstance = new Chart(ctx2d, {
                 type: 'pie',
                 data: modelPieData.value,
                 options: {
@@ -1044,8 +957,8 @@ export default {
                         },
                         tooltip: {
                             callbacks: {
-                                label: function(context) {
-                                    return `${context.label}: ${formatCost(context.parsed)}`
+                                label: function (context) {
+                                    return `${context.label}: ${ctx.fmt.cost(context.parsed)}`
                                 }
                             }
                         }
@@ -1063,7 +976,7 @@ export default {
                 providerPieChartInstance.destroy()
             }
 
-            const ctx = providerPieCanvas.value.getContext('2d')
+            const ctx2d = providerPieCanvas.value.getContext('2d')
 
             // Custom plugin to draw percentage labels on pie slices
             const percentagePlugin = {
@@ -1078,7 +991,9 @@ export default {
 
                         // Only display label if percentage > 1%
                         if (parseFloat(percentage) > 1) {
-                            chartCtx.fillStyle = '#000'
+                            // Use white color in dark mode, black in light mode
+                            const isDarkMode = document.documentElement.classList.contains('dark')
+                            chartCtx.fillStyle = isDarkMode ? '#fff' : '#000'
                             chartCtx.font = 'bold 12px Arial'
                             chartCtx.textAlign = 'center'
                             chartCtx.textBaseline = 'middle'
@@ -1088,7 +1003,7 @@ export default {
                 }
             }
 
-            providerPieChartInstance = new Chart(ctx, {
+            providerPieChartInstance = new Chart(ctx2d, {
                 type: 'pie',
                 data: providerPieData.value,
                 options: {
@@ -1101,8 +1016,8 @@ export default {
                         },
                         tooltip: {
                             callbacks: {
-                                label: function(context) {
-                                    return `${context.label}: ${formatCost(context.parsed)}`
+                                label: function (context) {
+                                    return `${context.label}: ${ctx.fmt.cost(context.parsed)}`
                                 }
                             }
                         }
@@ -1120,7 +1035,7 @@ export default {
                 tokenModelPieChartInstance.destroy()
             }
 
-            const ctx = tokenModelPieCanvas.value.getContext('2d')
+            const ctx2d = tokenModelPieCanvas.value.getContext('2d')
 
             // Custom plugin to draw percentage labels on pie slices
             const percentagePlugin = {
@@ -1135,7 +1050,9 @@ export default {
 
                         // Only display label if percentage > 1%
                         if (parseFloat(percentage) > 1) {
-                            chartCtx.fillStyle = '#000'
+                            // Use white color in dark mode, black in light mode
+                            const isDarkMode = document.documentElement.classList.contains('dark')
+                            chartCtx.fillStyle = isDarkMode ? '#fff' : '#000'
                             chartCtx.font = 'bold 12px Arial'
                             chartCtx.textAlign = 'center'
                             chartCtx.textBaseline = 'middle'
@@ -1145,7 +1062,7 @@ export default {
                 }
             }
 
-            tokenModelPieChartInstance = new Chart(ctx, {
+            tokenModelPieChartInstance = new Chart(ctx2d, {
                 type: 'pie',
                 data: tokenModelPieData.value,
                 options: {
@@ -1158,8 +1075,8 @@ export default {
                         },
                         tooltip: {
                             callbacks: {
-                                label: function(context) {
-                                    return `${context.label}: ${humanifyNumber(context.parsed)}`
+                                label: function (context) {
+                                    return `${context.label}: ${ctx.fmt.humanifyNumber(context.parsed)}`
                                 }
                             }
                         }
@@ -1177,7 +1094,7 @@ export default {
                 tokenProviderPieChartInstance.destroy()
             }
 
-            const ctx = tokenProviderPieCanvas.value.getContext('2d')
+            const ctx2d = tokenProviderPieCanvas.value.getContext('2d')
 
             // Custom plugin to draw percentage labels on pie slices
             const percentagePlugin = {
@@ -1192,7 +1109,9 @@ export default {
 
                         // Only display label if percentage > 1%
                         if (parseFloat(percentage) > 1) {
-                            chartCtx.fillStyle = '#000'
+                            // Use white color in dark mode, black in light mode
+                            const isDarkMode = document.documentElement.classList.contains('dark')
+                            chartCtx.fillStyle = isDarkMode ? '#fff' : '#000'
                             chartCtx.font = 'bold 12px Arial'
                             chartCtx.textAlign = 'center'
                             chartCtx.textBaseline = 'middle'
@@ -1202,7 +1121,7 @@ export default {
                 }
             }
 
-            tokenProviderPieChartInstance = new Chart(ctx, {
+            tokenProviderPieChartInstance = new Chart(ctx2d, {
                 type: 'pie',
                 data: tokenProviderPieData.value,
                 options: {
@@ -1215,8 +1134,8 @@ export default {
                         },
                         tooltip: {
                             callbacks: {
-                                label: function(context) {
-                                    return `${context.label}: ${humanifyNumber(context.parsed)}`
+                                label: function (context) {
+                                    return `${context.label}: ${ctx.fmt.humanifyNumber(context.parsed)}`
                                 }
                             }
                         }
@@ -1229,7 +1148,7 @@ export default {
         // Activity tab functions
         const loadActivityFilterOptions = async () => {
             try {
-                filterOptions.value = await threads.getFilterOptions()
+                filterOptions.value = await ctx.requests.getFilterOptions()
             } catch (error) {
                 console.error('Failed to load filter options:', error)
             }
@@ -1237,24 +1156,9 @@ export default {
 
         const loadExistingThreadIds = async () => {
             try {
-                // Calculate date range for selected month/year
-                const startDate = new Date(selectedYear.value, selectedMonth.value - 1, 1)
-                const endDate = new Date(selectedYear.value, selectedMonth.value, 0, 23, 59, 59)
-
-                // Convert to timestamp strings (threadId format)
-                const startThreadId = startDate.getTime().toString()
-                const endThreadId = endDate.getTime().toString()
-
-                const db = await initDB()
-                const tx = db.transaction(['threads'], 'readonly')
-                const store = tx.objectStore('threads')
-
-                // Use IDBKeyRange to only load threads within the month's timestamp range
-                const range = IDBKeyRange.bound(startThreadId, endThreadId)
-                const monthThreads = await store.getAll(range)
-
-                // Create a Set of existing thread IDs for the month
-                existingThreadIds.value = new Set(monthThreads.map(thread => thread.id))
+                existingThreadIds.value = new Set(await ctx.requests.getThreadIds({
+                    month: selectedYearMonth.value,
+                }))
             } catch (error) {
                 console.error('Failed to load existing thread IDs:', error)
                 existingThreadIds.value = new Set()
@@ -1277,28 +1181,24 @@ export default {
             }
 
             try {
-                // Calculate date range for selected month/year
-                const startDate = new Date(selectedYear.value, selectedMonth.value - 1, 1)
-                const endDate = new Date(selectedYear.value, selectedMonth.value, 0, 23, 59, 59)
-
-                const filters = {
-                    model: selectedModel.value || null,
-                    provider: selectedProvider.value || null,
-                    sortBy: sortBy.value,
-                    sortOrder: 'desc',
-                    startDate: Math.floor(startDate.getTime() / 1000),
-                    endDate: Math.floor(endDate.getTime() / 1000)
-                }
+                const requests = await ctx.requests.query({
+                    model: selectedModel.value || undefined,
+                    provider: selectedProvider.value || undefined,
+                    sort: `-${sortBy.value}`,
+                    take: activityPageSize,
+                    skip: activityOffset.value,
+                    month: selectedYearMonth.value,
+                })
 
-                const result = await threads.getRequests(filters, activityPageSize, activityOffset.value)
+                const hasMore = requests.length >= activityPageSize
 
                 if (reset) {
-                    activityRequests.value = result.requests
+                    activityRequests.value = requests
                 } else {
-                    activityRequests.value.push(...result.requests)
+                    activityRequests.value.push(...requests)
                 }
 
-                activityHasMore.value = result.hasMore
+                activityHasMore.value = hasMore
                 activityOffset.value += activityPageSize
             } catch (error) {
                 console.error('Failed to load requests:', error)
@@ -1308,29 +1208,32 @@ export default {
             }
         }
 
-        const onActivityScroll = async () => {
-            if (!activityScrollContainer.value) return
+        const setupObserver = () => {
+            if (observer) observer.disconnect()
 
-            const { scrollTop, scrollHeight, clientHeight } = activityScrollContainer.value
-            const isNearBottom = scrollHeight - scrollTop - clientHeight < 200
+            observer = new IntersectionObserver((entries) => {
+                if (entries[0].isIntersecting && activityHasMore.value && !isActivityLoadingMore.value && !isActivityLoading.value) {
+                    loadActivityRequests(false)
+                }
+            }, { rootMargin: '200px' })
 
-            if (isNearBottom && activityHasMore.value && !isActivityLoadingMore.value && !isActivityLoading.value) {
-                await loadActivityRequests(false)
+            if (scrollSentinel.value) {
+                observer.observe(scrollSentinel.value)
             }
         }
 
         const clearActivityFilters = async () => {
             selectedModel.value = ''
             selectedProvider.value = ''
-            sortBy.value = 'created'
+            sortBy.value = 'createdAt'
             await loadActivityRequests(true)
         }
 
-        const formatActivityDate = (timestamp) => {
-            const date = new Date(timestamp * 1000)
-            return date.toLocaleTimeString(undefined, { hour12: false }) + ' ' 
-                + date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }) 
-                
+        const formatActivityDate = (d) => {
+            const date = new Date(d)
+            return date.toLocaleTimeString(undefined, { hour12: false }) + ' '
+                + date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
+
         }
 
         const openThread = (threadId) => {
@@ -1338,17 +1241,12 @@ export default {
         }
 
         const deleteRequestLog = async (requestId) => {
-            if (confirm('Are you sure you want to delete this request log?')) {
-                try {
-                    await threads.deleteRequest(requestId)
-                    // Remove from the list
-                    activityRequests.value = activityRequests.value.filter(r => r.id !== requestId)
-                    // Reload analytics data
-                    await loadAnalyticsData()
-                } catch (error) {
-                    console.error('Failed to delete request:', error)
-                    alert('Failed to delete request')
-                }
+            if (confirm(`Are you sure you want to delete this request log ${requestId}?`)) {
+                await ctx.requests.deleteById(requestId)
+                // Remove from the list
+                activityRequests.value = activityRequests.value.filter(r => r.id !== requestId)
+                // Reload analytics data
+                await loadAnalyticsData()
             }
         }
 
@@ -1431,6 +1329,8 @@ export default {
             } else if (newTab === 'activity') {
                 await loadActivityFilterOptions()
                 await loadActivityRequests(true)
+                await nextTick()
+                setupObserver()
             }
         })
 
@@ -1463,9 +1363,15 @@ export default {
             if (activeTab.value === 'activity') {
                 await loadActivityFilterOptions()
                 await loadActivityRequests(true)
+                await nextTick()
+                setupObserver()
             }
         })
 
+        onUnmounted(() => {
+            if (observer) observer.disconnect()
+        })
+
         return {
             activeTab,
             costChartType,
@@ -1486,9 +1392,6 @@ export default {
             totalRequests,
             totalInputTokens,
             totalOutputTokens,
-            formatCost,
-            humanifyNumber,
-            humanifyMs,
             // Month/Year selection
             selectedMonth,
             selectedYear,
@@ -1503,8 +1406,8 @@ export default {
             sortBy,
             filterOptions,
             hasActiveFilters,
-            activityScrollContainer,
-            onActivityScroll,
+            hasActiveFilters,
+            scrollSentinel,
             clearActivityFilters,
             formatActivityDate,
             threadExists,
@@ -1515,3 +1418,27 @@ export default {
         }
     }
 }
+
+export default {
+    order: 20 - 100,
+
+    install(ctx) {
+        ctx.components({
+            MonthSelector,
+            Analytics,
+        })
+
+        ctx.setLeftIcons({
+            analytics: {
+                component: {
+                    template: `<svg @click="$ctx.togglePath('/analytics')" 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>`
+                },
+                isActive({ path }) {
+                    return path === '/analytics'
+                }
+            }
+        })
+
+        ctx.routes.push({ path: '/analytics', component: Analytics, meta: { title: 'Analytics' } })
+    }
+}