feat: enhance token usage tracking and history management

- Updated HTML assets for improved loading.
- Integrated token usage tracking in chat processing, appending usage details to transcripts.
- Enhanced OpenAIProvider to include usage data in chat completion responses.
- Implemented asynchronous retrieval of recent token usage history.
- Added utility functions for managing transcript files and parsing usage data.
- Updated UI components to reflect changes in usage status handling.
- Ensured consistent usage status definitions across the application.

src/pages/agents/index.vue

@@ -128,7 +128,7 @@
                   </div>
                 </div>
                 <div class="mt-3 flex flex-wrap gap-x-4 gap-y-1.5 text-[12.5px] font-medium text-[#99A0AE]">
-                  <template v-if="entry.usageStatus === 'available' || entry.usageStatus === undefined">
+                  <template v-if="entry.usageStatus === 'available'">
                     <span class="flex items-center gap-1.5"><div class="w-2 h-2 rounded-full bg-sky-500"></div>{{ t('models.recentTokenHistory.input', `Input: ${formatTokenCount(entry.inputTokens)}`) }}</span>
                     <span class="flex items-center gap-1.5"><div class="w-2 h-2 rounded-full bg-violet-500"></div>{{ t('models.recentTokenHistory.output', `Output: ${formatTokenCount(entry.outputTokens)}`) }}</span>
                     <span v-if="entry.cacheReadTokens > 0" class="flex items-center gap-1.5"><div class="w-2 h-2 rounded-full bg-amber-500"></div>{{ t('models.recentTokenHistory.cacheRead', `Cache Read: ${formatTokenCount(entry.cacheReadTokens)}`) }}</span>
@@ -247,7 +247,7 @@ const fetchUsage = async () => {
   try {
     const entries = await hostApiFetch<UsageHistoryEntry[]>('/api/usage/recent-token-history');
     const normalized = Array.isArray(entries) ? entries : [];
-    fetchState.value.stableData = resolveStableUsageHistory(fetchState.value.stableData, normalized);
+    fetchState.value.stableData = resolveStableUsageHistory(fetchState.value.stableData, normalized, { preservePreviousOnEmpty: true });
     fetchState.value.data = normalized;
     fetchState.value.status = 'done';
   } catch (error) {

src/pages/agents/usage-history.ts

@@ -5,7 +5,7 @@ export type UsageHistoryEntry = {
   model?: string;
   provider?: string;
   content?: string;
-  usageStatus?: 'available' | 'missing' | 'error';
+  usageStatus: 'available' | 'missing' | 'error';
   inputTokens: number;
   outputTokens: number;
   cacheReadTokens: number;