goop converter

webui/src/components/LogPanel/index.jsx

@@ -0,0 +1,30 @@
+import { useSessionSelector } from '../../context/SessionContext.jsx';
+
+export default function LogPanel() {
+  const logs = useSessionSelector((state) => state.logs);
+  return (
+    <div className="panel-section space-y-0.5 text-base">
+      <div className="flex items-center justify-between text-sm text-slate-400">
+        <span>Server logs</span>
+        <span>{logs.length}</span>
+      </div>
+      <div className="surface h-64 overflow-y-auto font-mono text-xs">
+        {logs.length === 0 ? (
+          <p>No logs yet.</p>
+        ) : (
+          logs
+            .slice()
+            .reverse()
+            .map((entry) => (
+              <div key={entry.id} className="surface">
+                <span className="text-amber-400">{entry.timestamp}</span>{' '}
+                <span className="text-lime-400">[{entry.level}]</span>{' '}
+                {entry.label && <span className="text-teal-400">[{entry.label}]</span>}{' '}
+                <span>{entry.message}</span>
+              </div>
+            ))
+        )}
+      </div>
+    </div>
+  );
+}