mirror of https://github.com/kortix-ai/suna.git
feat(usage): add usage logs page and integrate it into personal account settings
This commit is contained in:
sharath
parent
445e19e00b
commit
f2dc615f06
|
|
@ -15,6 +15,7 @@ export default function PersonalAccountSettingsPage({
|
|||
// { name: "Profile", href: "/settings" },
|
||||
// { name: "Teams", href: "/settings/teams" },
|
||||
{ name: 'Billing', href: '/settings/billing' },
|
||||
{ name: 'Usage Logs', href: '/settings/usage-logs' },
|
||||
];
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
import { createClient } from '@/lib/supabase/server';
|
||||
import UsageLogs from '@/components/billing/usage-logs';
|
||||
|
||||
export default async function UsageLogsPage() {
|
||||
const supabaseClient = await createClient();
|
||||
const { data: personalAccount } = await supabaseClient.rpc(
|
||||
'get_personal_account',
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<UsageLogs accountId={personalAccount.account_id} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,468 @@
|
|||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { createClient } from '@/lib/supabase/client';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from '@/components/ui/accordion';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ExternalLink, Loader2 } from 'lucide-react';
|
||||
import { isLocalMode } from '@/lib/config';
|
||||
|
||||
interface UsageLogEntry {
|
||||
message_id: string;
|
||||
thread_id: string;
|
||||
created_at: string;
|
||||
content: {
|
||||
usage: {
|
||||
prompt_tokens: number;
|
||||
completion_tokens: number;
|
||||
};
|
||||
model: string;
|
||||
};
|
||||
total_tokens: number;
|
||||
estimated_cost: number;
|
||||
project_id: string;
|
||||
}
|
||||
|
||||
interface DailyUsage {
|
||||
date: string;
|
||||
logs: UsageLogEntry[];
|
||||
totalTokens: number;
|
||||
totalCost: number;
|
||||
requestCount: number;
|
||||
models: string[];
|
||||
}
|
||||
|
||||
interface Props {
|
||||
accountId: string;
|
||||
}
|
||||
|
||||
export default function UsageLogs({ accountId }: Props) {
|
||||
const [usageLogs, setUsageLogs] = useState<UsageLogEntry[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [page, setPage] = useState(0);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
const [modelPricing, setModelPricing] = useState<
|
||||
Record<string, { input: number; output: number }>
|
||||
>({});
|
||||
|
||||
const ITEMS_PER_PAGE = 1000;
|
||||
|
||||
const fetchModelPricing = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/billing/available-models');
|
||||
if (!response.ok) throw new Error('Failed to fetch model pricing');
|
||||
|
||||
const data = await response.json();
|
||||
const pricing: Record<string, { input: number; output: number }> = {};
|
||||
|
||||
data.models.forEach((model: any) => {
|
||||
if (
|
||||
model.input_cost_per_million_tokens &&
|
||||
model.output_cost_per_million_tokens
|
||||
) {
|
||||
pricing[model.id] = {
|
||||
input: model.input_cost_per_million_tokens,
|
||||
output: model.output_cost_per_million_tokens,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
setModelPricing(pricing);
|
||||
} catch (error) {
|
||||
console.error('Error fetching model pricing:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const calculateTokenCost = (
|
||||
promptTokens: number,
|
||||
completionTokens: number,
|
||||
model: string,
|
||||
): number => {
|
||||
// Use fetched pricing data from available-models API
|
||||
const costs = modelPricing[model];
|
||||
|
||||
if (costs) {
|
||||
// Convert from per-million to per-token costs
|
||||
return (
|
||||
(promptTokens / 1000000) * costs.input +
|
||||
(completionTokens / 1000000) * costs.output
|
||||
);
|
||||
}
|
||||
|
||||
// Fallback to a reasonable average if no pricing data available
|
||||
const fallbackCost = 0.002; // per 1K tokens
|
||||
return ((promptTokens + completionTokens) / 1000) * fallbackCost;
|
||||
};
|
||||
|
||||
const fetchUsageLogs = async (
|
||||
pageNum: number = 0,
|
||||
append: boolean = false,
|
||||
) => {
|
||||
try {
|
||||
if (!append) setLoading(true);
|
||||
else setLoadingMore(true);
|
||||
|
||||
const supabase = createClient();
|
||||
|
||||
// First, get all thread IDs for this user
|
||||
const { data: threads, error: threadsError } = await supabase
|
||||
.from('threads')
|
||||
.select('thread_id')
|
||||
.eq('account_id', accountId);
|
||||
|
||||
if (threadsError) throw threadsError;
|
||||
|
||||
if (!threads || threads.length === 0) {
|
||||
setUsageLogs([]);
|
||||
setLoading(false);
|
||||
setLoadingMore(false);
|
||||
setHasMore(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const threadIds = threads.map((t) => t.thread_id);
|
||||
|
||||
// Then fetch usage messages with pagination, including thread project info
|
||||
const { data: messages, error: messagesError } = await supabase
|
||||
.from('messages')
|
||||
.select(
|
||||
`
|
||||
message_id,
|
||||
thread_id,
|
||||
created_at,
|
||||
content,
|
||||
threads!inner(project_id)
|
||||
`,
|
||||
)
|
||||
.in('thread_id', threadIds)
|
||||
.eq('type', 'assistant_response_end')
|
||||
.order('created_at', { ascending: false })
|
||||
.range(pageNum * ITEMS_PER_PAGE, (pageNum + 1) * ITEMS_PER_PAGE - 1);
|
||||
|
||||
if (messagesError) throw messagesError;
|
||||
|
||||
const processedLogs: UsageLogEntry[] = (messages || []).map((message) => {
|
||||
const usage = message.content?.usage || {
|
||||
prompt_tokens: 0,
|
||||
completion_tokens: 0,
|
||||
};
|
||||
const model = message.content?.model || 'unknown';
|
||||
const totalTokens = usage.prompt_tokens + usage.completion_tokens;
|
||||
const estimatedCost = calculateTokenCost(
|
||||
usage.prompt_tokens,
|
||||
usage.completion_tokens,
|
||||
model,
|
||||
);
|
||||
|
||||
return {
|
||||
message_id: message.message_id,
|
||||
thread_id: message.thread_id,
|
||||
created_at: message.created_at,
|
||||
content: {
|
||||
usage,
|
||||
model,
|
||||
},
|
||||
total_tokens: totalTokens,
|
||||
estimated_cost: estimatedCost,
|
||||
project_id: message.threads?.[0]?.project_id || 'unknown',
|
||||
};
|
||||
});
|
||||
|
||||
if (append) {
|
||||
setUsageLogs((prev) => [...prev, ...processedLogs]);
|
||||
} else {
|
||||
setUsageLogs(processedLogs);
|
||||
}
|
||||
|
||||
setHasMore(processedLogs.length === ITEMS_PER_PAGE);
|
||||
} catch (err) {
|
||||
console.error('Error fetching usage logs:', err);
|
||||
setError(
|
||||
err instanceof Error ? err.message : 'Failed to fetch usage logs',
|
||||
);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setLoadingMore(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchModelPricing();
|
||||
fetchUsageLogs(0, false);
|
||||
}, [accountId]);
|
||||
|
||||
const loadMore = () => {
|
||||
const nextPage = page + 1;
|
||||
setPage(nextPage);
|
||||
fetchUsageLogs(nextPage, true);
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleString();
|
||||
};
|
||||
|
||||
const formatCost = (cost: number) => {
|
||||
return `$${cost.toFixed(4)}`;
|
||||
};
|
||||
|
||||
const formatDateOnly = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
const handleThreadClick = (threadId: string, projectId: string) => {
|
||||
// Navigate to the thread using the correct project_id
|
||||
const threadUrl = `/projects/${projectId}/thread/${threadId}`;
|
||||
window.open(threadUrl, '_blank');
|
||||
};
|
||||
|
||||
// Group usage logs by date
|
||||
const groupLogsByDate = (logs: UsageLogEntry[]): DailyUsage[] => {
|
||||
const grouped = logs.reduce(
|
||||
(acc, log) => {
|
||||
const date = new Date(log.created_at).toDateString();
|
||||
|
||||
if (!acc[date]) {
|
||||
acc[date] = {
|
||||
date,
|
||||
logs: [],
|
||||
totalTokens: 0,
|
||||
totalCost: 0,
|
||||
requestCount: 0,
|
||||
models: [],
|
||||
};
|
||||
}
|
||||
|
||||
acc[date].logs.push(log);
|
||||
acc[date].totalTokens += log.total_tokens;
|
||||
acc[date].totalCost += log.estimated_cost;
|
||||
acc[date].requestCount += 1;
|
||||
|
||||
if (!acc[date].models.includes(log.content.model)) {
|
||||
acc[date].models.push(log.content.model);
|
||||
}
|
||||
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, DailyUsage>,
|
||||
);
|
||||
|
||||
return Object.values(grouped).sort(
|
||||
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
|
||||
);
|
||||
};
|
||||
|
||||
if (isLocalMode()) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Usage Logs</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="p-4 bg-muted/30 border border-border rounded-lg text-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Usage logs are not available in local development mode
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Usage Logs</CardTitle>
|
||||
<CardDescription>Loading your token usage history...</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-16 w-full" />
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Usage Logs</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="p-4 bg-destructive/10 border border-destructive/20 rounded-lg">
|
||||
<p className="text-sm text-destructive">Error: {error}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const dailyUsage = groupLogsByDate(usageLogs);
|
||||
const totalUsage = usageLogs.reduce(
|
||||
(sum, log) => sum + log.estimated_cost,
|
||||
0,
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Usage Logs Accordion */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Daily Usage Logs</CardTitle>
|
||||
<CardDescription>
|
||||
Your token usage organized by day, sorted by most recent
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{dailyUsage.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-muted-foreground">No usage logs found.</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Accordion type="single" collapsible className="w-full">
|
||||
{dailyUsage.map((day) => (
|
||||
<AccordionItem key={day.date} value={day.date}>
|
||||
<AccordionTrigger className="hover:no-underline">
|
||||
<div className="flex justify-between items-center w-full mr-4">
|
||||
<div className="text-left">
|
||||
<div className="font-semibold">
|
||||
{formatDateOnly(day.date)}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{day.requestCount} request
|
||||
{day.requestCount !== 1 ? 's' : ''} •{' '}
|
||||
{day.models.join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="font-mono font-semibold">
|
||||
{formatCost(day.totalCost)}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground font-mono">
|
||||
{day.totalTokens.toLocaleString()} tokens
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<div className="rounded-md border mt-4">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Time</TableHead>
|
||||
<TableHead>Model</TableHead>
|
||||
<TableHead className="text-right">
|
||||
Total
|
||||
</TableHead>
|
||||
<TableHead className="text-right">Cost</TableHead>
|
||||
<TableHead className="text-center">
|
||||
Thread
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{day.logs.map((log) => (
|
||||
<TableRow key={log.message_id}>
|
||||
<TableCell className="font-mono text-sm">
|
||||
{new Date(
|
||||
log.created_at,
|
||||
).toLocaleTimeString()}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="font-mono text-xs"
|
||||
>
|
||||
{log.content.model}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-mono font-medium text-sm">
|
||||
{log.total_tokens.toLocaleString()}
|
||||
</TableCell>
|
||||
<TableCell className="text-right font-mono font-medium text-sm">
|
||||
{formatCost(log.estimated_cost)}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
handleThreadClick(
|
||||
log.thread_id,
|
||||
log.project_id,
|
||||
)
|
||||
}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
|
||||
{hasMore && (
|
||||
<div className="flex justify-center pt-6">
|
||||
<Button
|
||||
onClick={loadMore}
|
||||
disabled={loadingMore}
|
||||
variant="outline"
|
||||
>
|
||||
{loadingMore ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Loading...
|
||||
</>
|
||||
) : (
|
||||
'Load More'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue