llms-py 2.0.34__py3-none-any.whl → 3.0.0__py3-none-any.whl

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

@@ -1,29 +1,24 @@
-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:`
+    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-1 sm:gap-2 flex-wrap justify-center overflow-x-auto">
@@ -51,7 +46,7 @@ const MonthSelector = {
     </div>
     `,
     props: {
-        dailyData: Array,
+        dailyData: Object,
     },
     setup(props) {
         const router = useRouter()
@@ -109,12 +104,9 @@ 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 dark:border-gray-700 bg-white dark:bg-gray-800 px-2 sm:px-4 py-3">
                 <div
@@ -158,14 +150,14 @@ export default {
             </div>
 
             <!-- Content -->
-            <div class="flex-1 overflow-auto bg-gray-50 dark:bg-gray-900" :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 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">{{ formatCost(totalCost) }}</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 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>
@@ -173,11 +165,11 @@ export default {
                         </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">{{ humanifyNumber(totalInputTokens) }}</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 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">{{ humanifyNumber(totalOutputTokens) }}</div>
+                            <div class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">{{ $fmt.humanifyNumber(totalOutputTokens) }}</div>
                         </div>
                     </div>
 
@@ -224,11 +216,11 @@ export default {
                             {{ new Date(selectedDay).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }) }}
                         </div>
                         <div class="flex flex-wrap gap-x-2 gap-y-1">
-                           <span>{{ formatCost(allDailyData[selectedDay]?.cost || 0) }}</span>
+                           <span>{{ $fmt.cost(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>
+                           <span>{{ $fmt.humanifyNumber(allDailyData[selectedDay]?.inputTokens || 0) }} -> {{ $fmt.humanifyNumber(allDailyData[selectedDay]?.outputTokens || 0) }} Tokens</span>
                         </div>
                     </div>
 
@@ -291,7 +283,7 @@ export default {
                     </div>
 
                     <!-- Activity Tab - Full Page Layout -->
-                    <div v-if="activeTab === 'activity'" class="h-full flex flex-col bg-white dark:bg-gray-800">
+                    <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 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">
@@ -315,7 +307,7 @@ export default {
 
                                 <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="createdAt">Date (Newest)</option>
                                         <option value="cost">Cost (Highest)</option>
                                         <option value="duration">Duration (Longest)</option>
                                         <option value="totalTokens">Tokens (Most)</option>
@@ -329,15 +321,15 @@ export default {
                         </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 dark:text-gray-400">Loading requests...</p>
                                 </div>
                             </div>
 
-                            <div v-else-if="activityRequests.length === 0" class="flex items-center justify-center h-full">
+                            <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>
 
@@ -347,38 +339,42 @@ export default {
                                         <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.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 dark:text-gray-400 whitespace-nowrap">
-                                                    {{ formatActivityDate(request.created) }}
+                                                    {{ formatActivityDate(request.createdAt) }}
                                                 </div>
                                             </div>
                                             <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 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
+                                            <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 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 class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ $fmt.costLong(request.cost) }}</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) }}
-                                                        <span v-if="request.inputCachedTokens" class="ml-1 text-xs text-gray-500 dark:text-gray-400">({{ humanifyNumber(request.inputCachedTokens) }} cached)</span>
+                                                    <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 dark:text-gray-400 font-medium">Duration</div>
-                                                    <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ request.duration ? humanifyMs(request.duration) : '—' }}</div>
+                                                    <div v-if="request.duration" class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ $fmt.humanifyMs(request.duration) }}</div>
                                                 </div>
                                                 <div>
                                                     <div class="text-xs text-gray-500 dark:text-gray-400 font-medium">Speed</div>
-                                                    <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ request.duration && request.outputTokens ? (request.outputTokens / (request.duration / 1000)).toFixed(1) + ' tok/s' : '—' }}</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>
@@ -401,6 +397,7 @@ export default {
                                     No more requests to load
                                 </div>
                             </div>
+                            <div ref="scrollSentinel" class="h-4 w-full"></div>
                         </div>
                     </div>
                 </div>
@@ -408,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')
@@ -437,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
@@ -532,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()
@@ -654,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()
@@ -727,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()
@@ -802,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
@@ -833,7 +741,7 @@ export default {
                 }]
             }
 
-            costChartInstance = new Chart(ctx, {
+            costChartInstance = new Chart(ctx2d, {
                 type: chartTypeValue,
                 data: chartDataWithColors,
                 options: {
@@ -859,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)}`
                                 }
                             }
                         }
@@ -875,7 +783,7 @@ export default {
                         y: {
                             beginAtZero: true,
                             ticks: {
-                                callback: function(value) {
+                                callback: function (value) {
                                     return '$' + value.toFixed(4)
                                 }
                             }
@@ -893,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)
@@ -944,7 +852,7 @@ export default {
                 ]
             }
 
-            tokenChartInstance = new Chart(ctx, {
+            tokenChartInstance = new Chart(ctx2d, {
                 type: 'bar',
                 data: chartDataWithColors,
                 options: {
@@ -972,8 +880,8 @@ export default {
                             stacked: true,
                             beginAtZero: true,
                             ticks: {
-                                callback: function(value) {
-                                    return humanifyNumber(value)
+                                callback: function (value) {
+                                    return ctx.fmt.humanifyNumber(value)
                                 }
                             }
                         }
@@ -985,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)}`
                                 }
                             }
                         }
@@ -1009,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 = {
@@ -1036,7 +944,7 @@ export default {
                 }
             }
 
-            modelPieChartInstance = new Chart(ctx, {
+            modelPieChartInstance = new Chart(ctx2d, {
                 type: 'pie',
                 data: modelPieData.value,
                 options: {
@@ -1049,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)}`
                                 }
                             }
                         }
@@ -1068,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 = {
@@ -1095,7 +1003,7 @@ export default {
                 }
             }
 
-            providerPieChartInstance = new Chart(ctx, {
+            providerPieChartInstance = new Chart(ctx2d, {
                 type: 'pie',
                 data: providerPieData.value,
                 options: {
@@ -1108,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)}`
                                 }
                             }
                         }
@@ -1127,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 = {
@@ -1154,7 +1062,7 @@ export default {
                 }
             }
 
-            tokenModelPieChartInstance = new Chart(ctx, {
+            tokenModelPieChartInstance = new Chart(ctx2d, {
                 type: 'pie',
                 data: tokenModelPieData.value,
                 options: {
@@ -1167,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)}`
                                 }
                             }
                         }
@@ -1186,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 = {
@@ -1213,7 +1121,7 @@ export default {
                 }
             }
 
-            tokenProviderPieChartInstance = new Chart(ctx, {
+            tokenProviderPieChartInstance = new Chart(ctx2d, {
                 type: 'pie',
                 data: tokenProviderPieData.value,
                 options: {
@@ -1226,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)}`
                                 }
                             }
                         }
@@ -1240,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)
             }
@@ -1248,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()
@@ -1288,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)
@@ -1319,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) => {
@@ -1349,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()
             }
         }
 
@@ -1442,6 +1329,8 @@ export default {
             } else if (newTab === 'activity') {
                 await loadActivityFilterOptions()
                 await loadActivityRequests(true)
+                await nextTick()
+                setupObserver()
             }
         })
 
@@ -1474,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,
@@ -1497,9 +1392,6 @@ export default {
             totalRequests,
             totalInputTokens,
             totalOutputTokens,
-            formatCost,
-            humanifyNumber,
-            humanifyMs,
             // Month/Year selection
             selectedMonth,
             selectedYear,
@@ -1514,8 +1406,8 @@ export default {
             sortBy,
             filterOptions,
             hasActiveFilters,
-            activityScrollContainer,
-            onActivityScroll,
+            hasActiveFilters,
+            scrollSentinel,
             clearActivityFilters,
             formatActivityDate,
             threadExists,
@@ -1526,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' } })
+    }
+}