FP

packages/web/src/components/LogPanel.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from 'react';
+import type { LogEntry } from '@stream-control/shared';
+import { formatTime } from '../format';
+
+export function LogPanel({ logs }: { logs: LogEntry[] }) {
+  const endRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ block: 'end' });
+  }, [logs.length]);
+
+  return (
+    <section className="logs">
+      <h3>Journal</h3>
+      <div className="log-list">
+        {logs.length === 0 && <p className="muted small">Aucun évènement pour le moment.</p>}
+        {logs.map((entry) => (
+          <div key={entry.id} className={`log-line level-${entry.level}`}>
+            <span className="mono small muted">{formatTime(entry.ts)}</span>
+            <span className="log-agent">{entry.agentName ?? 'serveur'}</span>
+            <span className="log-message">{entry.message}</span>
+          </div>
+        ))}
+        <div ref={endRef} />
+      </div>
+    </section>
+  );
+}