feat: complete logs

frontend/src/pages/logs.page.tsx

@@ -26,14 +26,14 @@ const logLevelColors: Record<
   { bg: string; text: string; border: string }
 > = {
   info: {
-    bg: "var(--info-bg)",
-    text: "var(--info-text)",
-    border: "var(--info-border)",
+    bg: "rgba(59, 130, 246, 0.1)",
+    text: "#3b82f6",
+    border: "rgba(59, 130, 246, 0.3)",
   },
   warning: {
-    bg: "var(--warning-bg)",
-    text: "var(--warning-text)",
-    border: "var(--warning-border)",
+    bg: "rgba(245, 158, 11, 0.1)",
+    text: "#f59e0b",
+    border: "rgba(245, 158, 11, 0.3)",
   },
   error: {
     bg: "var(--error-bg)",
@@ -41,9 +41,9 @@ const logLevelColors: Record<
     border: "var(--error-border)",
   },
   fatal: {
-    bg: "var(--fatal-bg)",
-    text: "var(--fatal-text)",
-    border: "var(--fatal-border)",
+    bg: "rgba(168, 85, 247, 0.1)",
+    text: "#a855f7",
+    border: "rgba(168, 85, 247, 0.3)",
   },
 };
 
@@ -306,13 +306,13 @@ export const LogsPage: React.FC = () => {
                   </thead>
                   <tbody>
                     {logs.map((log, index) => {
-                      const level = log.level?.toLowerCase() || "info";
+                      const level = log.Level?.toLowerCase() || "info";
                       const colors =
                         logLevelColors[level] || logLevelColors.info;
                       return (
                         <tr
                           key={index}
-                          className="border-t"
+                          className="border-t transition-colors"
                           style={{
                             borderColor: "var(--border)",
                             backgroundColor:
@@ -320,12 +320,22 @@ export const LogsPage: React.FC = () => {
                                 ? "var(--card-bg)"
                                 : "var(--bg-secondary)",
                           }}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.backgroundColor =
+                              "var(--border)";
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.backgroundColor =
+                              index % 2 === 0
+                                ? "var(--card-bg)"
+                                : "var(--bg-secondary)";
+                          }}
                         >
                           <td
                             className="px-4 py-3 text-sm font-mono whitespace-nowrap"
                             style={{ color: "var(--text-secondary)" }}
                           >
-                            {formatTimestamp(log.timestamp)}
+                            {formatTimestamp(log.Timestamp)}
                           </td>
                           <td className="px-4 py-3">
                             <span
@@ -344,19 +354,19 @@ export const LogsPage: React.FC = () => {
                             className="px-4 py-3 text-sm"
                             style={{ color: "var(--text-primary)" }}
                           >
-                            {log.service || "—"}
+                            {log.Service || "—"}
                           </td>
                           <td
                             className="px-4 py-3 text-sm font-mono"
                             style={{ color: "var(--text-primary)" }}
                           >
-                            {log.agent || "—"}
+                            {log.Agent || "—"}
                           </td>
                           <td
                             className="px-4 py-3 text-sm"
                             style={{ color: "var(--text-primary)" }}
                           >
-                            {log.message || "—"}
+                            {log.Message || "—"}
                           </td>
                         </tr>
                       );