feat: implement interactive log viewer in dashboard

app.go

@@ -1,6 +1,8 @@
 package main
 
 import (
+	"os"
+	"bufio"
 	"context"
 	"fmt"
 	"math"
@@ -254,3 +256,27 @@ func (a *App) GetLogs(limit int) (string, error) {
 
 	return finalLogs, nil
 }
+
+// GetLogs reads the local cura.log file and returns the last 100 lines.
+func (a *App) GetLogs() ([]string, error) {
+	file, err := os.Open("cura.log")
+	if err != nil {
+		if os.IsNotExist(err) {
+			return []string{"No logs recorded yet. Cura system active!"}, nil
+		}
+		return nil, err
+	}
+	defer file.Close()
+
+	var logs []string
+	scanner := bufio.NewScanner(file)
+	for scanner.Scan() {
+		logs = append(logs, scanner.Text())
+	}
+
+	if len(logs) > 100 {
+		logs = logs[len(logs)-100:]
+	}
+
+	return logs, scanner.Err()
+}

frontend/src/App.jsx

@@ -1,3 +1,4 @@
+import LogViewer from "./LogViewer";
 import React, { useState, useEffect } from 'react';
 import './App.css';
 
@@ -149,6 +150,8 @@ function App() {
           </div>
         </div>
       )}
+
+      <LogViewer />
     </div>
   );
 }

frontend/src/LogViewer.jsx

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react';
+import { GetLogs } from '../wailsjs/go/main/App'; 
+
+export default function LogViewer() {
+  const [logs, setLogs] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchLogs = () => {
+    GetLogs()
+      .then((data) => {
+        setLogs(data || ["No logs recorded yet. Cura system active!"]);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error("Failed to read logs:", err);
+        setLogs(["Error loading logs from system backend."]);
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    fetchLogs();
+    const interval = setInterval(fetchLogs, 3000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.header}>
+        <span style={styles.title}>🛡️ Cura System Events Log</span>
+        <button onClick={fetchLogs} style={styles.button}>Refresh</button>
+      </div>
+      <div style={styles.console}>
+        {loading ? (
+          <p style={styles.loading}>Streaming log buffer...</p>
+        ) : (
+          logs.map((log, index) => (
+            <div key={index} style={styles.logLine}>
+              <span style={styles.lineNumber}>{index + 1}</span> {log}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+const styles = {
+  container: {
+    padding: '20px',
+    backgroundColor: '#1e1e1e',
+    borderRadius: '8px',
+    fontFamily: 'monospace',
+    color: '#d4d4d4',
+    margin: '20px 0',
+  },
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: '15px',
+  },
+  title: {
+    fontSize: '16px',
+    fontWeight: 'bold',
+    color: '#4fc1ff',
+  },
+  button: {
+    padding: '5px 12px',
+    backgroundColor: '#0e639c',
+    color: '#fff',
+    border: 'none',
+    borderRadius: '4px',
+    cursor: 'pointer',
+  },
+  console: {
+    backgroundColor: '#111',
+    padding: '15px',
+    borderRadius: '6px',
+    maxHeight: '300px',
+    overflowY: 'auto',
+    textAlign: 'left',
+  },
+  logLine: {
+    fontSize: '13px',
+    lineHeight: '1.6',
+    whiteSpace: 'pre-wrap',
+    borderBottom: '1px solid #222',
+    padding: '4px 0',
+  },
+  lineNumber: {
+    color: '#858585',
+    marginRight: '10px',
+    userSelect: 'none',
+  },
+  loading: {
+    color: '#858585',
+    fontStyle: 'italic',
+  }
+};