"use client"; import * as React from "react"; import { cn } from "@kineticui/core"; import { SearchIcon } from "@kineticui/icons"; export type LogLine = { time?: string; level?: "debug" | "info" | "warn" | "error" | "success"; message: string; source?: string }; export type LogViewerProps = { lines: LogLine[]; /** Keep scrolled to the newest line unless the user scrolls up. */ follow?: boolean; height?: number; title?: string; className?: string; }; const levelStyle = { debug: "text-subtle", info: "text-[#7C8CFF]", warn: "text-warning", error: "text-danger", success: "text-success", }; /** Terminal-style log stream with level filters, search and follow mode. */ export function LogViewer({ lines, follow = true, height = 320, title = "Logs", className }: LogViewerProps) { const ref = React.useRef(null); const [query, setQuery] = React.useState(""); const [levels, setLevels] = React.useState>(new Set(["debug", "info", "warn", "error", "success"])); const [pinned, setPinned] = React.useState(follow); const shown = lines.filter((l) => levels.has(l.level ?? "info") && (!query || l.message.toLowerCase().includes(query.toLowerCase()))); React.useEffect(() => { if (pinned && ref.current) ref.current.scrollTop = ref.current.scrollHeight; }, [shown.length, pinned]); const counts = lines.reduce>((a, l) => ((a[l.level ?? "info"] = (a[l.level ?? "info"] ?? 0) + 1), a), {}); return (

{title}

{(["info", "warn", "error"] as const).map((lv) => ( ))} setQuery(e.target.value)} placeholder="Filter" aria-label="Filter logs" className="w-24 bg-transparent font-mono text-[11px] outline-none placeholder:text-white/30" />

{ const el = e.currentTarget; setPinned(el.scrollHeight - el.scrollTop - el.clientHeight < 24); }} className="overflow-y-auto px-3 py-2 font-mono text-[12px] leading-[22px]" > {shown.map((l, i) => (

{l.time ? {l.time} : null} {l.level ?? "info"} {l.source ? [{l.source}] : null} {query ? l.message.split(new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "i")).map((part, j) => j % 2 ? {part} : part, ) : l.message}

))}

{!pinned ? ( ) : null}

); }

Log Viewer

Installation

Exports