feat: enhanced AI usage logging (model, provider, response) and fixed build blockers

This commit is contained in:
2025-12-27 00:10:55 +01:00
parent 20659567fd
commit c51cd23d5e
10 changed files with 127 additions and 34 deletions

View File

@@ -219,36 +219,66 @@ export default async function AdminPage() {
<tr className="border-b border-zinc-200 dark:border-zinc-800">
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">Time</th>
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">User</th>
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">API Type</th>
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">API/Provider</th>
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">Model</th>
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">Endpoint</th>
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">Status</th>
</tr>
</thead>
<tbody>
{recentUsage.map((call: any) => (
<tr key={call.id} className="border-b border-zinc-100 dark:border-zinc-800/50">
<td className="py-3 px-4 text-sm text-zinc-600 dark:text-zinc-400">
{new Date(call.created_at).toLocaleString('de-DE')}
<tr key={call.id} className="border-b border-zinc-100 dark:border-zinc-800/50 hover:bg-zinc-50 dark:hover:bg-zinc-900/50 transition-colors">
<td className="py-3 px-4 text-[10px] text-zinc-500 font-mono">
{new Date(call.created_at).toLocaleString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit', day: '2-digit', month: '2-digit' })}
</td>
<td className="py-3 px-4 text-sm text-zinc-900 dark:text-white">
<td className="py-3 px-4 text-sm font-bold text-zinc-900 dark:text-white">
{call.profiles?.username || 'Unknown'}
</td>
<td className="py-3 px-4">
<span className={`px-2 py-1 rounded-full text-xs font-bold ${call.api_type === 'google_search'
? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400'
: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400'
}`}>
{call.api_type === 'google_search' ? 'Google Search' : 'Gemini AI'}
<div className="flex flex-col gap-1">
<span className={`px-2 py-0.5 rounded-full text-[10px] font-black uppercase w-fit ${call.api_type === 'google_search'
? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400'
: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400'
}`}>
{call.api_type === 'google_search' ? 'Google' : 'AI'}
</span>
{call.provider && (
<span className="text-[10px] font-bold text-zinc-500 uppercase tracking-tighter">
via {call.provider}
</span>
)}
</div>
</td>
<td className="py-3 px-4">
<span className="text-[10px] font-mono text-zinc-600 dark:text-zinc-400 block max-w-[120px] truncate" title={call.model}>
{call.model || '-'}
</span>
</td>
<td className="py-3 px-4 text-sm text-zinc-600 dark:text-zinc-400">
{call.endpoint}
<td className="py-3 px-4">
<div className="space-y-1">
<div className="text-[10px] font-bold text-zinc-500 uppercase">{call.endpoint}</div>
{call.response_text && (
<details className="text-[10px]">
<summary className="cursor-pointer text-orange-600 hover:text-orange-700 font-bold uppercase transition-colors">Response</summary>
<pre className="mt-2 p-2 bg-zinc-100 dark:bg-zinc-950 rounded border border-zinc-200 dark:border-zinc-800 overflow-x-auto max-w-sm whitespace-pre-wrap font-mono text-[9px] text-zinc-400">
{call.response_text}
</pre>
</details>
)}
</div>
</td>
<td className="py-3 px-4">
{call.success ? (
<span className="text-green-600 dark:text-green-400 font-bold"></span>
<span className="text-green-600 dark:text-green-400 font-black text-xs">OK</span>
) : (
<span className="text-red-600 dark:text-red-400 font-bold"></span>
<div className="group relative">
<span className="text-red-600 dark:text-red-400 font-black text-xs cursor-help">ERR</span>
{call.error_message && (
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-48 p-2 bg-red-600 text-white text-[9px] rounded shadow-xl opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50">
{call.error_message}
</div>
)}
</div>
)}
</td>
</tr>