preact

frontend/src/components/LogPanel.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from "preact/hooks";
+import type { LogLine } from "../types";
+
+interface Props {
+  lines: LogLine[];
+}
+
+export function LogPanel({ lines }: Props) {
+  const innerRef = useRef<HTMLDivElement>(null);
+
+  // Scroll to top (newest line — column-reverse layout) after each update
+  useEffect(() => {
+    const el = innerRef.current?.parentElement;
+    if (el) el.scrollTop = 0;
+  }, [lines]);
+
+  return (
+    <div id="log">
+      <div id="log-inner" ref={innerRef}>
+        {lines.map((line) => {
+          const time = line.timestamp ? new Date(line.timestamp).toLocaleTimeString() : "";
+          const role = line.role.trim().toLowerCase();
+          let text: string;
+          if (role === "nanobot") {
+            text = `[${time}] ${line.text.replace(/^(?:nanobot|napbot)\b\s*[:>-]?\s*/i, "")}`;
+          } else {
+            text = `[${time}] ${line.role}: ${line.text}`;
+          }
+          return (
+            <div key={line.id} class={`line ${line.role}`}>
+              {text}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}