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

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

@@ -1,24 +1,29 @@
-import { ref, watch, nextTick, computed, inject, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, watch, nextTick, computed } 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">
@@ -46,7 +51,7 @@ const MonthSelector = {
     </div>
     `,
     props: {
-        dailyData: Object,
+        dailyData: Array,
     },
     setup(props) {
         const router = useRouter()
@@ -104,9 +109,12 @@ const MonthSelector = {
     }
 }
 
-export const Analytics = {
+export default {
+    components: {
+        MonthSelector,
+    },
     template: `
-        <div class="flex flex-col w-full">
+        <div class="flex flex-col h-full w-full">
             <!-- Header -->
             <div class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-2 sm:px-4 py-3">
                 <div
@@ -150,14 +158,14 @@ export const Analytics = {
             </div>
 
             <!-- Content -->
-            <div class="flex-1 bg-gray-50 dark:bg-gray-900" :class="activeTab === 'activity' ? 'p-0' : 'p-4'">
+            <div class="flex-1 overflow-auto bg-gray-50 dark:bg-gray-900" :class="activeTab === 'activity' ? 'p-0' : 'p-4'">
 
-                <div :class="activeTab === 'activity' ? '' : 'max-w-6xl mx-auto'">
+                <div :class="activeTab === 'activity' ? 'h-full' : '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">{{ $fmt.cost(totalCost) }}</div>
+                            <div class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">{{ formatCost(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>
@@ -165,11 +173,11 @@ export const Analytics = {
                         </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 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">{{ 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">{{ $fmt.humanifyNumber(totalOutputTokens) }}</div>
+                            <div class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">{{ humanifyNumber(totalOutputTokens) }}</div>
                         </div>
                     </div>
 
@@ -216,11 +224,11 @@ export const Analytics = {
                             {{ new Date(selectedDay).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }) }}
                         </div>
                         <div class="flex flex-wrap gap-x-2 gap-y-1">
-                           <span>{{ $fmt.cost(allDailyData[selectedDay]?.cost || 0) }}</span>
+                           <span>{{ formatCost(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>
+                           <span>{{ humanifyNumber(allDailyData[selectedDay]?.inputTokens || 0) }} -> {{ humanifyNumber(allDailyData[selectedDay]?.outputTokens || 0) }} Tokens</span>
                         </div>
                     </div>
 
@@ -283,7 +291,7 @@ export const Analytics = {
                     </div>
 
                     <!-- Activity Tab - Full Page Layout -->
-                    <div v-if="activeTab === 'activity'" class="flex flex-col bg-white dark:bg-gray-800">
+                    <div v-if="activeTab === 'activity'" class="h-full flex flex-col bg-white dark:bg-gray-800">
                         <!-- Filters Bar -->
                         <div class="flex-shrink-0 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 sm:px-6 py-4">
                             <div class="flex flex-wrap gap-2 sm:gap-4 items-end">
@@ -307,7 +315,7 @@ export const Analytics = {
 
                                 <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="created">Date (Newest)</option>
                                         <option value="cost">Cost (Highest)</option>
                                         <option value="duration">Duration (Longest)</option>
                                         <option value="totalTokens">Tokens (Most)</option>
@@ -321,15 +329,15 @@ export const Analytics = {
                         </div>
 
                         <!-- Requests List with Infinite Scroll -->
-                        <div class="flex-1">
-                            <div v-if="isActivityLoading && activityRequests.length === 0" class="mt-8 flex items-center justify-center h-full">
+                        <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="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="mt-4 flex items-center justify-center h-full">
+                            <div v-else-if="activityRequests.length === 0" class="flex items-center justify-center h-full">
                                 <p class="text-gray-500 dark:text-gray-400">No requests found</p>
                             </div>
 
@@ -339,42 +347,38 @@ export const Analytics = {
                                         <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 class="text-xs px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 rounded font-medium">{{ request.model }}</span>
+                                                    <span class="text-xs px-2 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 rounded font-medium">{{ request.provider }}</span>
                                                     <span v-if="request.providerRef" class="text-xs px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 rounded font-medium">{{ request.providerRef }}</span>
                                                     <span v-if="request.finishReason" class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300 rounded font-medium">{{ request.finishReason }}</span>
                                                 </div>
                                                 <div class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
-                                                    {{ formatActivityDate(request.createdAt) }}
+                                                    {{ formatActivityDate(request.created) }}
                                                 </div>
                                             </div>
                                             <div class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate mb-3">
                                                 {{ request.title }}
                                             </div>
 
-                                            <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 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">{{ $fmt.costLong(request.cost) }}</div>
+                                                    <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ formatCost(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 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 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>
                                                 </div>
                                                 <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) }}</div>
+                                                    <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ request.duration ? humanifyMs(request.duration) : '—' }}</div>
                                                 </div>
                                                 <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 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>
                                             </div>
                                         </div>
@@ -397,7 +401,6 @@ export const Analytics = {
                                     No more requests to load
                                 </div>
                             </div>
-                            <div ref="scrollSentinel" class="h-4 w-full"></div>
                         </div>
                     </div>
                 </div>
@@ -405,10 +408,10 @@ export const Analytics = {
         </div>
     `,
     setup() {
-        const ctx = inject('ctx')
         const router = useRouter()
         const route = useRoute()
-        const analyticsData = ref()
+        const threads = useThreadStore()
+        const { initDB } = threads
 
         // Initialize activeTab from URL query parameter, default to 'cost'
         const activeTab = ref(route.query.tab || 'cost')
@@ -434,9 +437,6 @@ export const Analytics = {
         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,18 +532,52 @@ export const Analytics = {
 
         const selectedModel = ref('')
         const selectedProvider = ref('')
-        const sortBy = ref('createdAt')
+        const sortBy = ref('created')
         const filterOptions = ref({ models: [], providers: [] })
-        const scrollSentinel = ref(null)
-        let observer = null
+        const activityScrollContainer = ref(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
-                analyticsData.value = await ctx.requests.getSummary()
-                allDailyData.value = analyticsData.value.dailyData
+                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
 
                 // Update chart data based on selected month/year
                 updateChartData()
@@ -620,8 +654,36 @@ export const Analytics = {
             }
 
             try {
-                const dailySummary = await ctx.requests.getDailySummary(dateKey)
-                const { modelData, providerData } = dailySummary
+                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
+                })
 
                 // Prepare model pie chart data
                 const modelLabels = Object.keys(modelData).sort()
@@ -665,8 +727,38 @@ export const Analytics = {
             }
 
             try {
-                const dailySummary = await ctx.requests.getDailySummary(dateKey)
-                const { modelData, providerData } = dailySummary
+                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
+                })
 
                 // Prepare model pie chart data
                 const modelLabels = Object.keys(modelData).sort()
@@ -710,7 +802,7 @@ export const Analytics = {
                 costChartInstance.destroy()
             }
 
-            const ctx2d = costChartCanvas.value.getContext('2d')
+            const ctx = costChartCanvas.value.getContext('2d')
             const chartTypeValue = costChartType.value
 
             // Find the index of the selected day
@@ -741,7 +833,7 @@ export const Analytics = {
                 }]
             }
 
-            costChartInstance = new Chart(ctx2d, {
+            costChartInstance = new Chart(ctx, {
                 type: chartTypeValue,
                 data: chartDataWithColors,
                 options: {
@@ -767,14 +859,14 @@ export const Analytics = {
                         },
                         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: ${ctx.fmt.cost(context.parsed.y)}`
+                                label: function(context) {
+                                    return `Cost: ${formatCost(context.parsed.y)}`
                                 }
                             }
                         }
@@ -783,7 +875,7 @@ export const Analytics = {
                         y: {
                             beginAtZero: true,
                             ticks: {
-                                callback: function (value) {
+                                callback: function(value) {
                                     return '$' + value.toFixed(4)
                                 }
                             }
@@ -801,7 +893,7 @@ export const Analytics = {
                 tokenChartInstance.destroy()
             }
 
-            const ctx2d = tokenChartCanvas.value.getContext('2d')
+            const ctx = tokenChartCanvas.value.getContext('2d')
 
             // Find the index of the selected day
             const selectedDayIndex = tokenChartData.value.dateKeys.indexOf(selectedDay.value)
@@ -852,7 +944,7 @@ export const Analytics = {
                 ]
             }
 
-            tokenChartInstance = new Chart(ctx2d, {
+            tokenChartInstance = new Chart(ctx, {
                 type: 'bar',
                 data: chartDataWithColors,
                 options: {
@@ -880,8 +972,8 @@ export const Analytics = {
                             stacked: true,
                             beginAtZero: true,
                             ticks: {
-                                callback: function (value) {
-                                    return ctx.fmt.humanifyNumber(value)
+                                callback: function(value) {
+                                    return humanifyNumber(value)
                                 }
                             }
                         }
@@ -893,14 +985,14 @@ export const Analytics = {
                         },
                         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}: ${ctx.fmt.humanifyNumber(context.parsed.y)}`
+                                label: function(context) {
+                                    return `${context.dataset.label}: ${humanifyNumber(context.parsed.y)}`
                                 }
                             }
                         }
@@ -917,7 +1009,7 @@ export const Analytics = {
                 modelPieChartInstance.destroy()
             }
 
-            const ctx2d = modelPieCanvas.value.getContext('2d')
+            const ctx = modelPieCanvas.value.getContext('2d')
 
             // Custom plugin to draw percentage labels on pie slices
             const percentagePlugin = {
@@ -944,7 +1036,7 @@ export const Analytics = {
                 }
             }
 
-            modelPieChartInstance = new Chart(ctx2d, {
+            modelPieChartInstance = new Chart(ctx, {
                 type: 'pie',
                 data: modelPieData.value,
                 options: {
@@ -957,8 +1049,8 @@ export const Analytics = {
                         },
                         tooltip: {
                             callbacks: {
-                                label: function (context) {
-                                    return `${context.label}: ${ctx.fmt.cost(context.parsed)}`
+                                label: function(context) {
+                                    return `${context.label}: ${formatCost(context.parsed)}`
                                 }
                             }
                         }
@@ -976,7 +1068,7 @@ export const Analytics = {
                 providerPieChartInstance.destroy()
             }
 
-            const ctx2d = providerPieCanvas.value.getContext('2d')
+            const ctx = providerPieCanvas.value.getContext('2d')
 
             // Custom plugin to draw percentage labels on pie slices
             const percentagePlugin = {
@@ -1003,7 +1095,7 @@ export const Analytics = {
                 }
             }
 
-            providerPieChartInstance = new Chart(ctx2d, {
+            providerPieChartInstance = new Chart(ctx, {
                 type: 'pie',
                 data: providerPieData.value,
                 options: {
@@ -1016,8 +1108,8 @@ export const Analytics = {
                         },
                         tooltip: {
                             callbacks: {
-                                label: function (context) {
-                                    return `${context.label}: ${ctx.fmt.cost(context.parsed)}`
+                                label: function(context) {
+                                    return `${context.label}: ${formatCost(context.parsed)}`
                                 }
                             }
                         }
@@ -1035,7 +1127,7 @@ export const Analytics = {
                 tokenModelPieChartInstance.destroy()
             }
 
-            const ctx2d = tokenModelPieCanvas.value.getContext('2d')
+            const ctx = tokenModelPieCanvas.value.getContext('2d')
 
             // Custom plugin to draw percentage labels on pie slices
             const percentagePlugin = {
@@ -1062,7 +1154,7 @@ export const Analytics = {
                 }
             }
 
-            tokenModelPieChartInstance = new Chart(ctx2d, {
+            tokenModelPieChartInstance = new Chart(ctx, {
                 type: 'pie',
                 data: tokenModelPieData.value,
                 options: {
@@ -1075,8 +1167,8 @@ export const Analytics = {
                         },
                         tooltip: {
                             callbacks: {
-                                label: function (context) {
-                                    return `${context.label}: ${ctx.fmt.humanifyNumber(context.parsed)}`
+                                label: function(context) {
+                                    return `${context.label}: ${humanifyNumber(context.parsed)}`
                                 }
                             }
                         }
@@ -1094,7 +1186,7 @@ export const Analytics = {
                 tokenProviderPieChartInstance.destroy()
             }
 
-            const ctx2d = tokenProviderPieCanvas.value.getContext('2d')
+            const ctx = tokenProviderPieCanvas.value.getContext('2d')
 
             // Custom plugin to draw percentage labels on pie slices
             const percentagePlugin = {
@@ -1121,7 +1213,7 @@ export const Analytics = {
                 }
             }
 
-            tokenProviderPieChartInstance = new Chart(ctx2d, {
+            tokenProviderPieChartInstance = new Chart(ctx, {
                 type: 'pie',
                 data: tokenProviderPieData.value,
                 options: {
@@ -1134,8 +1226,8 @@ export const Analytics = {
                         },
                         tooltip: {
                             callbacks: {
-                                label: function (context) {
-                                    return `${context.label}: ${ctx.fmt.humanifyNumber(context.parsed)}`
+                                label: function(context) {
+                                    return `${context.label}: ${humanifyNumber(context.parsed)}`
                                 }
                             }
                         }
@@ -1148,7 +1240,7 @@ export const Analytics = {
         // Activity tab functions
         const loadActivityFilterOptions = async () => {
             try {
-                filterOptions.value = await ctx.requests.getFilterOptions()
+                filterOptions.value = await threads.getFilterOptions()
             } catch (error) {
                 console.error('Failed to load filter options:', error)
             }
@@ -1156,9 +1248,24 @@ export const Analytics = {
 
         const loadExistingThreadIds = async () => {
             try {
-                existingThreadIds.value = new Set(await ctx.requests.getThreadIds({
-                    month: selectedYearMonth.value,
-                }))
+                // 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))
             } catch (error) {
                 console.error('Failed to load existing thread IDs:', error)
                 existingThreadIds.value = new Set()
@@ -1181,24 +1288,28 @@ export const Analytics = {
             }
 
             try {
-                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,
-                })
+                // 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 hasMore = requests.length >= activityPageSize
+                const result = await threads.getRequests(filters, activityPageSize, activityOffset.value)
 
                 if (reset) {
-                    activityRequests.value = requests
+                    activityRequests.value = result.requests
                 } else {
-                    activityRequests.value.push(...requests)
+                    activityRequests.value.push(...result.requests)
                 }
 
-                activityHasMore.value = hasMore
+                activityHasMore.value = result.hasMore
                 activityOffset.value += activityPageSize
             } catch (error) {
                 console.error('Failed to load requests:', error)
@@ -1208,32 +1319,29 @@ export const Analytics = {
             }
         }
 
-        const setupObserver = () => {
-            if (observer) observer.disconnect()
+        const onActivityScroll = async () => {
+            if (!activityScrollContainer.value) return
 
-            observer = new IntersectionObserver((entries) => {
-                if (entries[0].isIntersecting && activityHasMore.value && !isActivityLoadingMore.value && !isActivityLoading.value) {
-                    loadActivityRequests(false)
-                }
-            }, { rootMargin: '200px' })
+            const { scrollTop, scrollHeight, clientHeight } = activityScrollContainer.value
+            const isNearBottom = scrollHeight - scrollTop - clientHeight < 200
 
-            if (scrollSentinel.value) {
-                observer.observe(scrollSentinel.value)
+            if (isNearBottom && activityHasMore.value && !isActivityLoadingMore.value && !isActivityLoading.value) {
+                await loadActivityRequests(false)
             }
         }
 
         const clearActivityFilters = async () => {
             selectedModel.value = ''
             selectedProvider.value = ''
-            sortBy.value = 'createdAt'
+            sortBy.value = 'created'
             await loadActivityRequests(true)
         }
 
-        const formatActivityDate = (d) => {
-            const date = new Date(d)
-            return date.toLocaleTimeString(undefined, { hour12: false }) + ' '
-                + date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
-
+        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 openThread = (threadId) => {
@@ -1241,12 +1349,17 @@ export const Analytics = {
         }
 
         const deleteRequestLog = async (requestId) => {
-            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()
+            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')
+                }
             }
         }
 
@@ -1329,8 +1442,6 @@ export const Analytics = {
             } else if (newTab === 'activity') {
                 await loadActivityFilterOptions()
                 await loadActivityRequests(true)
-                await nextTick()
-                setupObserver()
             }
         })
 
@@ -1363,15 +1474,9 @@ export const Analytics = {
             if (activeTab.value === 'activity') {
                 await loadActivityFilterOptions()
                 await loadActivityRequests(true)
-                await nextTick()
-                setupObserver()
             }
         })
 
-        onUnmounted(() => {
-            if (observer) observer.disconnect()
-        })
-
         return {
             activeTab,
             costChartType,
@@ -1392,6 +1497,9 @@ export const Analytics = {
             totalRequests,
             totalInputTokens,
             totalOutputTokens,
+            formatCost,
+            humanifyNumber,
+            humanifyMs,
             // Month/Year selection
             selectedMonth,
             selectedYear,
@@ -1406,8 +1514,8 @@ export const Analytics = {
             sortBy,
             filterOptions,
             hasActiveFilters,
-            hasActiveFilters,
-            scrollSentinel,
+            activityScrollContainer,
+            onActivityScroll,
             clearActivityFilters,
             formatActivityDate,
             threadExists,
@@ -1418,27 +1526,3 @@ export const Analytics = {
         }
     }
 }
-
-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' } })
-    }
-}