Add live logs to admin dashboard with level filtering and error middleware

frontend/src/lib/api.ts

@@ -310,4 +310,14 @@ export interface AdminStats {
 export const getAdminStats = () =>
   api.get<AdminStats>('/admin/stats').then((r) => r.data)
 
+export interface LogEntry {
+  timestamp: string
+  level: string
+  logger: string
+  message: string
+}
+
+export const getAdminLogs = (level: string = 'ALL', limit: number = 100) =>
+  api.get<{ logs: LogEntry[]; total: number }>('/admin/logs', { params: { level, limit } }).then((r) => r.data)
+
 export default api

frontend/src/pages/Admin.tsx

@@ -1,13 +1,16 @@
 import { useEffect, useState } from 'react'
-import { Shield, Users, ListMusic, Sparkles, Heart, ThumbsDown } from 'lucide-react'
+import { Shield, Users, ListMusic, Sparkles, Heart, ThumbsDown, ScrollText, RefreshCw } from 'lucide-react'
 import { useAuth } from '../lib/auth'
-import { getAdminStats, type AdminStats } from '../lib/api'
+import { getAdminStats, getAdminLogs, type AdminStats, type LogEntry } from '../lib/api'
 
 const ADMIN_EMAIL = 'chris.ryan@deepcutsai.com'
 
 export default function Admin() {
   const { user } = useAuth()
   const [stats, setStats] = useState<AdminStats | null>(null)
+  const [logs, setLogs] = useState<LogEntry[]>([])
+  const [logLevel, setLogLevel] = useState('ALL')
+  const [logTotal, setLogTotal] = useState(0)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
@@ -20,14 +23,20 @@ export default function Admin() {
       return
     }
 
-    getAdminStats()
-      .then(setStats)
+    Promise.all([
+      getAdminStats().then(setStats),
+      getAdminLogs('ALL', 200).then((d) => { setLogs(d.logs); setLogTotal(d.total) }),
+    ])
       .catch((err) => {
         setError(err.response?.status === 403 ? 'Access denied. Admin privileges required.' : 'Failed to load admin stats.')
       })
       .finally(() => setLoading(false))
   }, [isAdmin])
 
+  const refreshLogs = () => {
+    getAdminLogs(logLevel, 200).then((d) => { setLogs(d.logs); setLogTotal(d.total) })
+  }
+
   if (loading) {
     return (
       <div className="flex items-center justify-center py-32">
@@ -181,6 +190,64 @@ export default function Admin() {
           </table>
         </div>
       </div>
+      {/* Logs */}
+      <div className="bg-white rounded-2xl border border-purple-100 overflow-hidden mt-8">
+        <div className="p-6 border-b border-purple-100 flex items-center justify-between flex-wrap gap-3">
+          <div className="flex items-center gap-3">
+            <ScrollText className="w-5 h-5 text-purple" />
+            <h3 className="text-lg font-bold text-charcoal">Logs</h3>
+            <span className="text-xs text-charcoal-muted">({logTotal} total)</span>
+          </div>
+          <div className="flex items-center gap-2">
+            {['ALL', 'ERROR', 'WARNING', 'INFO'].map((lvl) => (
+              <button
+                key={lvl}
+                onClick={() => { setLogLevel(lvl); getAdminLogs(lvl, 200).then((d) => { setLogs(d.logs); setLogTotal(d.total) }) }}
+                className={`px-3 py-1 rounded-full text-xs font-medium cursor-pointer border transition-colors ${
+                  logLevel === lvl
+                    ? 'bg-purple text-white border-purple'
+                    : 'bg-white text-charcoal-muted border-purple-100 hover:border-purple/30'
+                }`}
+              >
+                {lvl}
+              </button>
+            ))}
+            <button
+              onClick={refreshLogs}
+              className="p-1.5 rounded-lg hover:bg-purple-50 cursor-pointer border-none bg-transparent transition-colors"
+              title="Refresh logs"
+            >
+              <RefreshCw className="w-4 h-4 text-charcoal-muted" />
+            </button>
+          </div>
+        </div>
+        <div className="max-h-96 overflow-y-auto font-mono text-xs">
+          {logs.length === 0 ? (
+            <p className="p-6 text-charcoal-muted text-center text-sm">No logs found</p>
+          ) : (
+            logs.map((log, i) => (
+              <div
+                key={i}
+                className={`px-4 py-2 border-b border-purple-50/50 flex gap-3 ${
+                  log.level === 'ERROR' ? 'bg-red-50/50' : log.level === 'WARNING' ? 'bg-amber-50/50' : ''
+                }`}
+              >
+                <span className="text-charcoal-muted whitespace-nowrap flex-shrink-0">
+                  {new Date(log.timestamp).toLocaleTimeString()}
+                </span>
+                <span
+                  className={`font-semibold flex-shrink-0 w-14 ${
+                    log.level === 'ERROR' ? 'text-red-600' : log.level === 'WARNING' ? 'text-amber-600' : 'text-charcoal-muted'
+                  }`}
+                >
+                  {log.level}
+                </span>
+                <span className="text-charcoal break-all">{log.message}</span>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
     </div>
   )
 }