LogView

const LogView: LogViewComponent

Defined in: src/components/feedback/LogView/LogView.tsx:480

A virtualized console / log output panel.

Renders a large, append-only stream of LogEntry efficiently (virtualized via @tanstack/react-virtual), with level coloring, level filtering, text search with match highlighting, follow-tail auto-scroll, per line and bulk copy, timestamps, and source tags.

Data flow. Pass a controlled entries array, or go uncontrolled and push via the imperative handle — ref.append(entry) / appendMany / clear are rAF-batched, so a high-frequency stream collapses to one render per frame.

Composition. Use it batteries-included (default toolbar + body), or compose the slots yourself: LogView.Toolbar, LogView.Search, LogView.LevelFilter, LogView.Copy, LogView.Clear, LogView.Body.

Examples

const ref = useRef<LogViewHandle>(null);
useEffect(() => {
  const id = setInterval(() => {
    ref.current?.append({ level: 'info', message: 'tick', timestamp: Date.now() });
  }, 50);
  return () => clearInterval(id);
}, []);
return <LogView ref={ref} showTimestamps height={360} />;

<LogView entries={entries} wrap>
  <LogView.Toolbar>
    <LogView.LevelFilter />
    <LogView.Search />
  </LogView.Toolbar>
  <LogView.Body />
</LogView>