streamator-react 0.1.0

package/dist/index.cjs.js

@@ -0,0 +1,148 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+const fmt = t => `${t.toFixed(1)}s`;
+function useLogStream(url, options = {}) {
+  const {
+    mode = "sse",
+    interval = 3000,
+    formatEvent
+  } = options;
+  const [logs, setLogs] = react.useState([]);
+  const [active, setActive] = react.useState(false);
+  const startRef = react.useRef(null);
+  const toEntry = (raw, elapsed) => ({
+    text: formatEvent ? formatEvent(raw) : raw.message ?? "",
+    level: raw.level ?? "info",
+    t: fmt(raw.t ?? elapsed),
+    _done: raw.event === "done"
+  });
+  react.useEffect(() => {
+    if (!url) return;
+    setLogs([]);
+    setActive(true);
+    startRef.current = Date.now();
+    if (mode === "sse") {
+      const es = new EventSource(url);
+      es.onmessage = e => {
+        const raw = JSON.parse(e.data);
+        if (raw.event === "done") {
+          setActive(false);
+          es.close();
+          return;
+        }
+        const elapsed = (Date.now() - startRef.current) / 1000;
+        const entry = toEntry(raw, elapsed);
+        if (entry.text !== null) setLogs(l => [...l, entry]);
+      };
+      es.onerror = () => {
+        setActive(false);
+        es.close();
+      };
+      return () => {
+        es.close();
+        setActive(false);
+      };
+    }
+    if (mode === "poll") {
+      let seen = 0;
+      const id = setInterval(async () => {
+        try {
+          const res = await fetch(url);
+          const {
+            logs: all
+          } = await res.json();
+          const elapsed = (Date.now() - startRef.current) / 1000;
+          const newEntries = all.slice(seen).map(raw => toEntry(raw, elapsed));
+          seen = all.length;
+          const done = newEntries.some(e => e._done);
+          const visible = newEntries.filter(e => !e._done && e.text !== null);
+          if (visible.length) setLogs(l => [...l, ...visible]);
+          if (done) {
+            clearInterval(id);
+            setActive(false);
+          }
+        } catch {}
+      }, interval);
+      return () => {
+        clearInterval(id);
+        setActive(false);
+      };
+    }
+  }, [url, mode]);
+  return {
+    logs,
+    active
+  };
+}
+
+function LogPanel({
+  logs,
+  active,
+  waitingText = "⏳ Starting…",
+  maxHeight,
+  className,
+  style,
+  renderEntry
+}) {
+  const bottomRef = react.useRef(null);
+  react.useEffect(() => {
+    bottomRef.current?.scrollIntoView({
+      behavior: "smooth"
+    });
+  }, [logs]);
+  if (!active && logs.length === 0) return null;
+  const rootStyle = maxHeight ? {
+    ...style,
+    "--streamator-max-height": maxHeight
+  } : style;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: ["streamator-log", className].filter(Boolean).join(" "),
+    style: rootStyle,
+    children: [active && logs.length === 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "streamator-log-waiting",
+      children: waitingText
+    }), logs.map((entry, i) => renderEntry ? renderEntry(entry, i) : /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: ["streamator-log-entry", entry.level !== "info" ? `streamator-log-entry--${entry.level}` : ""].filter(Boolean).join(" "),
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "streamator-log-time",
+        children: entry.t
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: entry.text
+      })]
+    }, i)), /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: bottomRef
+    })]
+  });
+}
+
+const BASE_EVENT_LABELS = {
+  page_loaded: () => "📄 Page loaded",
+  batch_started: () => "📦 Batch started",
+  loading_strategy: e => `⚙️ Loading strategy: ${e.strategy ?? ""}`,
+  llm_started: () => "🤖 LLM started",
+  llm_done: () => "🤖 LLM done",
+  cache_hit: () => "⚡ Cache hit",
+  search_started: () => "🔍 Search started",
+  search_done: () => "🔍 Search done",
+  browser_ready: () => "🌐 Browser ready",
+  retry: e => `🔄 Retry ${e.attempt ?? ""}`
+};
+function makeFormatEvent(overrides = {}) {
+  const labels = {
+    ...BASE_EVENT_LABELS,
+    ...overrides
+  };
+  return raw => {
+    const fn = labels[raw.event];
+    if (fn) return fn(raw);
+    return raw.message ?? null;
+  };
+}
+
+exports.BASE_EVENT_LABELS = BASE_EVENT_LABELS;
+exports.LogPanel = LogPanel;
+exports.makeFormatEvent = makeFormatEvent;
+exports.useLogStream = useLogStream;

package/dist/index.esm.js

@@ -0,0 +1,143 @@
+import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const fmt = t => `${t.toFixed(1)}s`;
+function useLogStream(url, options = {}) {
+  const {
+    mode = "sse",
+    interval = 3000,
+    formatEvent
+  } = options;
+  const [logs, setLogs] = useState([]);
+  const [active, setActive] = useState(false);
+  const startRef = useRef(null);
+  const toEntry = (raw, elapsed) => ({
+    text: formatEvent ? formatEvent(raw) : raw.message ?? "",
+    level: raw.level ?? "info",
+    t: fmt(raw.t ?? elapsed),
+    _done: raw.event === "done"
+  });
+  useEffect(() => {
+    if (!url) return;
+    setLogs([]);
+    setActive(true);
+    startRef.current = Date.now();
+    if (mode === "sse") {
+      const es = new EventSource(url);
+      es.onmessage = e => {
+        const raw = JSON.parse(e.data);
+        if (raw.event === "done") {
+          setActive(false);
+          es.close();
+          return;
+        }
+        const elapsed = (Date.now() - startRef.current) / 1000;
+        const entry = toEntry(raw, elapsed);
+        if (entry.text !== null) setLogs(l => [...l, entry]);
+      };
+      es.onerror = () => {
+        setActive(false);
+        es.close();
+      };
+      return () => {
+        es.close();
+        setActive(false);
+      };
+    }
+    if (mode === "poll") {
+      let seen = 0;
+      const id = setInterval(async () => {
+        try {
+          const res = await fetch(url);
+          const {
+            logs: all
+          } = await res.json();
+          const elapsed = (Date.now() - startRef.current) / 1000;
+          const newEntries = all.slice(seen).map(raw => toEntry(raw, elapsed));
+          seen = all.length;
+          const done = newEntries.some(e => e._done);
+          const visible = newEntries.filter(e => !e._done && e.text !== null);
+          if (visible.length) setLogs(l => [...l, ...visible]);
+          if (done) {
+            clearInterval(id);
+            setActive(false);
+          }
+        } catch {}
+      }, interval);
+      return () => {
+        clearInterval(id);
+        setActive(false);
+      };
+    }
+  }, [url, mode]);
+  return {
+    logs,
+    active
+  };
+}
+
+function LogPanel({
+  logs,
+  active,
+  waitingText = "⏳ Starting…",
+  maxHeight,
+  className,
+  style,
+  renderEntry
+}) {
+  const bottomRef = useRef(null);
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({
+      behavior: "smooth"
+    });
+  }, [logs]);
+  if (!active && logs.length === 0) return null;
+  const rootStyle = maxHeight ? {
+    ...style,
+    "--streamator-max-height": maxHeight
+  } : style;
+  return /*#__PURE__*/jsxs("div", {
+    className: ["streamator-log", className].filter(Boolean).join(" "),
+    style: rootStyle,
+    children: [active && logs.length === 0 && /*#__PURE__*/jsx("div", {
+      className: "streamator-log-waiting",
+      children: waitingText
+    }), logs.map((entry, i) => renderEntry ? renderEntry(entry, i) : /*#__PURE__*/jsxs("div", {
+      className: ["streamator-log-entry", entry.level !== "info" ? `streamator-log-entry--${entry.level}` : ""].filter(Boolean).join(" "),
+      children: [/*#__PURE__*/jsx("span", {
+        className: "streamator-log-time",
+        children: entry.t
+      }), /*#__PURE__*/jsx("span", {
+        children: entry.text
+      })]
+    }, i)), /*#__PURE__*/jsx("div", {
+      ref: bottomRef
+    })]
+  });
+}
+
+const BASE_EVENT_LABELS = {
+  page_loaded: () => "📄 Page loaded",
+  batch_started: () => "📦 Batch started",
+  loading_strategy: e => `⚙️ Loading strategy: ${e.strategy ?? ""}`,
+  llm_started: () => "🤖 LLM started",
+  llm_done: () => "🤖 LLM done",
+  cache_hit: () => "⚡ Cache hit",
+  search_started: () => "🔍 Search started",
+  search_done: () => "🔍 Search done",
+  browser_ready: () => "🌐 Browser ready",
+  retry: e => `🔄 Retry ${e.attempt ?? ""}`
+};
+function makeFormatEvent(overrides = {}) {
+  const labels = {
+    ...BASE_EVENT_LABELS,
+    ...overrides
+  };
+  return raw => {
+    const fn = labels[raw.event];
+    if (fn) return fn(raw);
+    return raw.message ?? null;
+  };
+}
+
+export { BASE_EVENT_LABELS, LogPanel, makeFormatEvent, useLogStream };

package/dist/log-compat.css

@@ -0,0 +1,4 @@
+.log              { background: var(--streamator-bg, #f8f8f8); border: 1px solid var(--streamator-border, #e0e0e0); border-radius: var(--streamator-radius, 6px); color: var(--streamator-color, #444); font-size: var(--streamator-font-size, 0.8rem); max-height: var(--streamator-max-height, 160px); overflow-y: auto; padding: 8px 10px; font-family: monospace; }
+.log-entry        { display: flex; gap: 8px; line-height: 1.5; }
+.log-time         { color: var(--streamator-time-color, #aaa); font-variant-numeric: tabular-nums; flex-shrink: 0; }
+.log-waiting      { color: var(--streamator-time-color, #aaa); animation: streamator-pulse 1.2s ease-in-out infinite; }

package/dist/log-compat.js

@@ -0,0 +1,3 @@
+var undefined$1 = undefined;
+
+export { undefined$1 as default };

package/dist/log.css

@@ -0,0 +1,37 @@
+.streamator-log {
+  background: var(--streamator-bg, #f8f8f8);
+  border: 1px solid var(--streamator-border, #e0e0e0);
+  border-radius: var(--streamator-radius, 6px);
+  color: var(--streamator-color, #444);
+  font-size: var(--streamator-font-size, 0.8rem);
+  max-height: var(--streamator-max-height, 160px);
+  overflow-y: auto;
+  padding: 8px 10px;
+  font-family: monospace;
+}
+
+.streamator-log-entry {
+  display: flex;
+  gap: 8px;
+  line-height: 1.5;
+}
+
+.streamator-log-time {
+  color: var(--streamator-time-color, #aaa);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+
+.streamator-log-entry--success { color: var(--streamator-success-color, #2e7d32); }
+.streamator-log-entry--warning { color: var(--streamator-warning-color, #f59e0b); }
+.streamator-log-entry--error   { color: var(--streamator-error-color, #c62828); }
+
+.streamator-log-waiting {
+  color: var(--streamator-time-color, #aaa);
+  animation: streamator-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes streamator-pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.3; }
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "streamator-react",
+  "version": "0.1.0",
+  "description": "Frontend primitives for displaying live log streams",
+  "author": "Arved Klöhn <arved.kloehn@gmail.com>",
+  "license": "MIT",
+  "repository": { "type": "git", "url": "https://github.com/Redundando/streamator" },
+  "keywords": ["streaming", "logging", "sse", "react", "log"],
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./log.css": "./dist/log.css",
+    "./log-compat.css": "./dist/log-compat.css"
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "rollup -c",
+    "watch": "rollup -c --watch"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "type": "module",
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-babel": "^6.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "rollup": "^4.0.0",
+    "rollup-plugin-postcss": "^4.0.0"
+  }
+}