From 94ba61528a69c1abc08e027b0e0d6b3e13cb8845 Mon Sep 17 00:00:00 2001
From: kyx236 <kyxjames23@gmail.com>
Date: Sat, 31 Jan 2026 04:01:05 +0800
Subject: [PATCH] feat: Add LiveLogViewer component for real-time log display
 with SSE streaming, pause/resume, auto-scroll, and log level styling.

---
 frontend/src/components/LiveLogViewer.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/LiveLogViewer.tsx b/frontend/src/components/LiveLogViewer.tsx
index 7df401c..1b30317 100644
--- a/frontend/src/components/LiveLogViewer.tsx
+++ b/frontend/src/components/LiveLogViewer.tsx
@@ -183,7 +183,7 @@ export default function LiveLogViewer({
             <div
                 ref={logContainerRef}
                 style={{ fontVariantLigatures: 'contextual' }}
-                className="h-[500px] overflow-y-auto p-4 text-[14.5px] leading-relaxed space-y-1.5 font-['FiraCode_Nerd_Font','Fira_Code',monospace] selection:bg-blue-500/30"
+                className="h-[550px] overflow-y-auto p-4 text-[15.5px] leading-relaxed space-y-2 font-['FiraCode_Nerd_Font','Fira_Code',monospace] selection:bg-blue-500/30"
             >
                 {logs.length === 0 ? (
                     <div className="flex items-center justify-center h-full text-slate-500">
@@ -193,17 +193,17 @@ export default function LiveLogViewer({
                     logs.map((log, index) => (
                         <div
                             key={index}
-                            className={`flex gap-2 px-2 py-0.5 rounded ${levelBgColors[log.level] || ''}`}
+                            className={`flex gap-3 px-2 py-1 rounded transition-colors ${levelBgColors[log.level] || ''} hover:bg-slate-800/40`}
                         >
-                            <span className="text-slate-500 flex-shrink-0">{log.timestamp}</span>
-                            <span className={`flex-shrink-0 uppercase font-semibold w-16 ${levelColors[log.level] || 'text-slate-400'}`}>
-                                [{log.level}]
+                            <span className="text-slate-500 flex-shrink-0 font-medium">{log.timestamp}</span>
+                            <span className={`flex-shrink-0 uppercase font-bold w-20 text-center rounded-[4px] px-1 ${levelColors[log.level] || 'text-slate-400'}`}>
+                                {log.level}
                             </span>
-                            <span className="text-slate-400 flex-shrink-0">[{log.module}]</span>
+                            <span className="text-slate-400 flex-shrink-0 opacity-80">[{log.module}]</span>
                             {log.email && (
-                                <span className="text-purple-400 flex-shrink-0 truncate max-w-[150px]">{log.email}</span>
+                                <span className="text-purple-400 flex-shrink-0 truncate max-w-[180px] font-medium">{log.email}</span>
                             )}
-                            <span className="text-slate-200 flex-1">{log.message}</span>
+                            <span className="text-slate-200 flex-1 break-all">{log.message}</span>
                         </div>
                     ))
                 )}