Add AI usage dashboard
This commit is contained in:
rcourtman
parent
96af101c98
commit
935b4da7ac
4 changed files with 210 additions and 1 deletions
|
|
@ -7,6 +7,7 @@ import type {
|
|||
AIExecuteRequest,
|
||||
AIExecuteResponse,
|
||||
AIStreamEvent,
|
||||
AICostSummary,
|
||||
} from '@/types/ai';
|
||||
|
||||
export class AIAPI {
|
||||
|
|
@ -44,6 +45,11 @@ export class AIAPI {
|
|||
return apiFetchJSON(`${this.baseUrl}/ai/models`) as Promise<{ models: { id: string; name: string; description?: string }[]; error?: string }>;
|
||||
}
|
||||
|
||||
// Get AI cost/usage summary
|
||||
static async getCostSummary(days = 30): Promise<AICostSummary> {
|
||||
return apiFetchJSON(`${this.baseUrl}/ai/cost/summary?days=${days}`) as Promise<AICostSummary>;
|
||||
}
|
||||
|
||||
// Start OAuth flow for Claude Pro/Max subscription
|
||||
// Returns the authorization URL to redirect the user to
|
||||
static async startOAuth(): Promise<{ auth_url: string; state: string }> {
|
||||
|
|
|
|||
176
frontend-modern/src/components/AI/AICostDashboard.tsx
Normal file
176
frontend-modern/src/components/AI/AICostDashboard.tsx
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
import { Component, Show, createSignal, onMount, For } from 'solid-js';
|
||||
import { Card } from '@/components/shared/Card';
|
||||
import { SectionHeader } from '@/components/shared/SectionHeader';
|
||||
import { AIAPI } from '@/api/ai';
|
||||
import { formatNumber } from '@/utils/format';
|
||||
import { logger } from '@/utils/logger';
|
||||
import { notificationStore } from '@/stores/notifications';
|
||||
import type { AICostSummary } from '@/types/ai';
|
||||
import { PROVIDER_NAMES } from '@/types/ai';
|
||||
|
||||
export const AICostDashboard: Component = () => {
|
||||
const [days, setDays] = createSignal(30);
|
||||
const [loading, setLoading] = createSignal(false);
|
||||
const [summary, setSummary] = createSignal<AICostSummary | null>(null);
|
||||
|
||||
const loadSummary = async (rangeDays: number) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await AIAPI.getCostSummary(rangeDays);
|
||||
setSummary(data);
|
||||
} catch (err) {
|
||||
logger.error('[AICostDashboard] Failed to load cost summary:', err);
|
||||
notificationStore.error('Failed to load AI cost summary');
|
||||
setSummary(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
loadSummary(days());
|
||||
});
|
||||
|
||||
const handleRangeClick = (rangeDays: number) => {
|
||||
setDays(rangeDays);
|
||||
loadSummary(rangeDays);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card padding="none" class="overflow-hidden border border-gray-200 dark:border-gray-700" border={false}>
|
||||
<div class="bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-emerald-100 dark:bg-emerald-900/40 rounded-lg">
|
||||
<svg class="w-5 h-5 text-emerald-600 dark:text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 1.343-3 3v1a3 3 0 006 0v-1c0-1.657-1.343-3-3-3zM5 12a7 7 0 0114 0v3a2 2 0 01-2 2H7a2 2 0 01-2-2v-3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<SectionHeader
|
||||
title="AI Cost & Usage"
|
||||
description="Token usage and estimated spend across providers"
|
||||
size="sm"
|
||||
class="flex-1"
|
||||
/>
|
||||
<div class="flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRangeClick(7)}
|
||||
class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${days() === 7
|
||||
? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'
|
||||
: 'border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
7d
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRangeClick(30)}
|
||||
class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${days() === 30
|
||||
? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'
|
||||
: 'border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
30d
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRangeClick(90)}
|
||||
class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${days() === 90
|
||||
? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'
|
||||
: 'border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
90d
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRangeClick(365)}
|
||||
class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${days() === 365
|
||||
? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'
|
||||
: 'border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
1y
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 space-y-4">
|
||||
<Show when={loading()}>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">Loading usage…</div>
|
||||
</Show>
|
||||
|
||||
<Show when={!loading() && summary() == null}>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">No usage data yet.</div>
|
||||
</Show>
|
||||
|
||||
<Show when={!loading() && summary()}>
|
||||
{(data) => (
|
||||
<>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700">
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400">Input tokens</div>
|
||||
<div class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{formatNumber(data().totals.input_tokens)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700">
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400">Output tokens</div>
|
||||
<div class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{formatNumber(data().totals.output_tokens)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700">
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400">Total tokens</div>
|
||||
<div class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{formatNumber(data().totals.total_tokens)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">
|
||||
<tr class="border-b border-gray-200 dark:border-gray-700">
|
||||
<th class="text-left py-2 pr-4">Provider</th>
|
||||
<th class="text-left py-2 pr-4">Model</th>
|
||||
<th class="text-right py-2 px-2">Input</th>
|
||||
<th class="text-right py-2 px-2">Output</th>
|
||||
<th class="text-right py-2 px-2">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<For each={data().provider_models}>
|
||||
{(pm) => (
|
||||
<tr class="border-b border-gray-100 dark:border-gray-800">
|
||||
<td class="py-2 pr-4 font-medium text-gray-900 dark:text-gray-100">
|
||||
{PROVIDER_NAMES[pm.provider as keyof typeof PROVIDER_NAMES] || pm.provider}
|
||||
</td>
|
||||
<td class="py-2 pr-4 text-gray-700 dark:text-gray-300 font-mono text-xs">
|
||||
{pm.model}
|
||||
</td>
|
||||
<td class="py-2 px-2 text-right text-gray-700 dark:text-gray-300">
|
||||
{formatNumber(pm.input_tokens)}
|
||||
</td>
|
||||
<td class="py-2 px-2 text-right text-gray-700 dark:text-gray-300">
|
||||
{formatNumber(pm.output_tokens)}
|
||||
</td>
|
||||
<td class="py-2 px-2 text-right text-gray-900 dark:text-gray-100">
|
||||
{formatNumber(pm.total_tokens)}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Show>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default AICostDashboard;
|
||||
|
|
@ -28,6 +28,7 @@ import { UnifiedAgents } from './UnifiedAgents';
|
|||
import APITokenManager from './APITokenManager';
|
||||
import { OIDCPanel } from './OIDCPanel';
|
||||
import { AISettings } from './AISettings';
|
||||
import { AICostDashboard } from '@/components/AI/AICostDashboard';
|
||||
import { QuickSecuritySetup } from './QuickSecuritySetup';
|
||||
import { SecurityPostureSummary } from './SecurityPostureSummary';
|
||||
import {
|
||||
|
|
@ -4966,7 +4967,10 @@ const Settings: Component<SettingsProps> = (props) => {
|
|||
|
||||
{/* AI Assistant Tab */}
|
||||
<Show when={activeTab() === 'system-ai'}>
|
||||
<AISettings />
|
||||
<div class="space-y-6">
|
||||
<AISettings />
|
||||
<AICostDashboard />
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* API Access */}
|
||||
|
|
|
|||
|
|
@ -169,3 +169,26 @@ export interface AIStreamCompleteData {
|
|||
output_tokens: number;
|
||||
tool_calls?: AIToolExecution[];
|
||||
}
|
||||
|
||||
// AI cost/usage summary types
|
||||
export interface AICostProviderModelSummary {
|
||||
provider: string;
|
||||
model: string;
|
||||
input_tokens: number;
|
||||
output_tokens: number;
|
||||
total_tokens: number;
|
||||
}
|
||||
|
||||
export interface AICostDailySummary {
|
||||
date: string;
|
||||
input_tokens: number;
|
||||
output_tokens: number;
|
||||
total_tokens: number;
|
||||
}
|
||||
|
||||
export interface AICostSummary {
|
||||
days: number;
|
||||
provider_models: AICostProviderModelSummary[];
|
||||
daily_totals: AICostDailySummary[];
|
||||
totals: AICostProviderModelSummary;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue