Log viewer

"use client";

import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
import type { ComponentProps, CSSProperties, ReactNode } from "react";
import { Badge } from "./badge";
import { Button } from "./button";
import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
import "./log-viewer.css";

export type LogLevel = "debug" | "info" | "warn" | "error";

export type LogLine = {
  id: string;
  /** Shown as given, such as "12:04:31.208". */
  time: string;
  level: LogLevel;
  message: string;
};

export type LogViewerProps = Omit<ComponentProps<"div">, "children"> & {
  /** Names the scroll region, such as "Build log for web". */
  label: string;
  /** Oldest first. Append to the end; give each line a stable id. */
  lines: LogLine[];
  /** Controlled: whether the view sticks to the newest line. */
  follow?: boolean;
  defaultFollow?: boolean;
  /** Called when following stops (the reader scrolled up) or resumes. */
  onFollowChange?: (follow: boolean) => void;
  /** Controlled: the levels shown. */
  levels?: LogLevel[];
  defaultLevels?: LogLevel[];
  onLevelsChange?: (levels: LogLevel[]) => void;
  /** Controlled: text that lines must contain. Matches are marked. */
  query?: string;
  defaultQuery?: string;
  onQueryChange?: (query: string) => void;
  /** Shows the level chips and the filter field. */
  toolbar?: boolean;
  /** Height in pixels before the lines scroll. */
  maxHeight?: number;
  /** Soft-wraps long messages instead of scrolling sideways. */
  wrap?: boolean;
};

const LEVELS: LogLevel[] = ["debug", "info", "warn", "error"];
const NAMES: Record<LogLevel, string> = { debug: "Debug", info: "Info", warn: "Warn", error: "Error" };
const TONES = { debug: "neutral", info: "neutral", warn: "warn", error: "danger" } as const;
/** Pixels from the bottom that still count as "at the newest line". */
const SLACK = 8;

function matches(line: LogLine, levels: LogLevel[], needle: string) {
  return levels.includes(line.level) && (!needle || line.message.toLowerCase().includes(needle));
}

function mark(text: string, needle: string): ReactNode {
  if (!needle) return text;
  const lower = text.toLowerCase();
  const parts: ReactNode[] = [];
  let from = 0;
  for (let at = lower.indexOf(needle); at >= 0; at = lower.indexOf(needle, from)) {
    if (at > from) parts.push(text.slice(from, at));
    parts.push(
      <mark key={at} className="eq-log-viewer-match">
        {text.slice(at, at + needle.length)}
      </mark>,
    );
    from = at + needle.length;
  }
  parts.push(text.slice(from));
  return parts;
}

export function LogViewer({
  label,
  lines,
  follow,
  defaultFollow = true,
  onFollowChange,
  levels,
  defaultLevels = LEVELS,
  onLevelsChange,
  query,
  defaultQuery = "",
  onQueryChange,
  toolbar = true,
  maxHeight = 320,
  wrap = false,
  className,
  style,
  ...rest
}: LogViewerProps) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const listRef = useRef<HTMLOListElement>(null);
  const lastTop = useRef(0);
  const [innerFollow, setInnerFollow] = useState(defaultFollow);
  const [innerLevels, setInnerLevels] = useState(defaultLevels);
  const [innerQuery, setInnerQuery] = useState(defaultQuery);
  /** The newest line when following stopped; everything after it is "new". */
  const [anchor, setAnchor] = useState<string | null>(null);
  const [announce, setAnnounce] = useState("");

  const following = follow ?? innerFollow;
  const shown = levels ?? innerLevels;
  const text = query ?? innerQuery;
  const needle = text.trim().toLowerCase();
  const followRef = useRef(following);

  const { visible, unseen, counts } = useMemo(() => {
    const counts: Record<LogLevel, number> = { debug: 0, info: 0, warn: 0, error: 0 };
    const visible: LogLine[] = [];
    let unseen = 0;
    let past = anchor === null;
    for (const line of lines) {
      counts[line.level] += 1;
      const hit = matches(line, shown, needle);
      if (hit) visible.push(line);
      if (past && hit && anchor !== null) unseen += 1;
      if (line.id === anchor) past = true;
    }
    return { visible, unseen, counts };
  }, [lines, shown, needle, anchor]);

  function setFollowing(next: boolean) {
    if (next === following) return;
    setInnerFollow(next);
    setAnchor(next ? null : (lines[lines.length - 1]?.id ?? null));
    onFollowChange?.(next);
  }

  function pin() {
    const el = scrollRef.current;
    if (!el) return;
    el.scrollTop = el.scrollHeight;
    lastTop.current = el.scrollTop;
  }

  useLayoutEffect(() => {
    followRef.current = following;
    if (following) pin();
  }, [following, visible]);

  // Rows settle to their real height as they render; keep the newest one in view while following.
  useEffect(() => {
    const list = listRef.current;
    if (!list) return;
    const observer = new ResizeObserver(() => {
      if (followRef.current) pin();
    });
    observer.observe(list);
    return () => observer.disconnect();
  }, []);

  function handleScroll() {
    const el = scrollRef.current;
    if (!el) return;
    const gap = el.scrollHeight - el.scrollTop - el.clientHeight;
    const movedUp = el.scrollTop < lastTop.current - 1;
    lastTop.current = el.scrollTop;
    if (following && movedUp && gap > SLACK) setFollowing(false);
    else if (!following && gap <= SLACK) setFollowing(true);
  }

  function say(nextLevels: LogLevel[], nextNeedle: string) {
    const n = lines.filter((l) => matches(l, nextLevels, nextNeedle)).length;
    setAnnounce(n === lines.length ? `Showing all ${n} lines` : `Showing ${n} of ${lines.length} lines`);
  }

  function changeLevels(value: string[]) {
    const next = LEVELS.filter((l) => value.includes(l));
    setInnerLevels(next);
    onLevelsChange?.(next);
    say(next, needle);
  }

  function changeQuery(value: string) {
    setInnerQuery(value);
    onQueryChange?.(value);
    say(shown, value.trim().toLowerCase());
  }

  function jump() {
    scrollRef.current?.focus({ preventScroll: true });
    setFollowing(true);
  }

  const present = LEVELS.filter((l) => counts[l] > 0 || !shown.includes(l));

  return (
    <div
      {...rest}
      className={["eq-log-viewer", className].filter(Boolean).join(" ")}
      style={{ "--_max": `${maxHeight}px`, ...style } as CSSProperties}
      data-wrap={wrap || undefined}
    >
      {toolbar && (
        <div className="eq-log-viewer-toolbar">
          {present.length > 0 && (
            <ToggleGroup aria-label="Levels" value={shown} onValueChange={changeLevels}>
              {present.map((level) => (
                <ToggleGroupItem key={level} value={level}>
                  {NAMES[level]}
                  <span className="eq-log-viewer-count">{counts[level]}</span>
                </ToggleGroupItem>
              ))}
            </ToggleGroup>
          )}
          <input
            type="search"
            className="eq-log-viewer-search"
            placeholder="Filter lines"
            aria-label="Filter lines"
            spellCheck={false}
            value={text}
            onChange={(e) => changeQuery(e.currentTarget.value)}
            onKeyDown={(e) => {
              if (e.key === "Escape" && text) {
                e.preventDefault();
                e.stopPropagation();
                changeQuery("");
              }
            }}
          />
        </div>
      )}
      <div className="eq-log-viewer-frame">
        <div
          ref={scrollRef}
          className="eq-log-viewer-scroll"
          role="region"
          aria-label={label}
          tabIndex={0}
          onScroll={handleScroll}
        >
          <ol ref={listRef} className="eq-log-viewer-list">
            {visible.map((line) => (
              <li key={line.id} className="eq-log-viewer-row" data-level={line.level}>
                <span className="eq-log-viewer-time">{line.time}</span>
                <Badge className="eq-log-viewer-level" tone={TONES[line.level]}>
                  {NAMES[line.level]}
                </Badge>
                <span className="eq-log-viewer-message">{mark(line.message, needle)}</span>
              </li>
            ))}
          </ol>
          {visible.length === 0 && (
            <p className="eq-log-viewer-empty">{lines.length === 0 ? "No lines yet" : "No lines match the filter"}</p>
          )}
        </div>
        <Button
          size="s"
          className="eq-log-viewer-jump"
          hidden={following}
          onClick={jump}
          trail={
            unseen > 0 ? (
              <span className="eq-log-viewer-new">{unseen} new</span>
            ) : undefined
          }
        >
          Jump to latest
        </Button>
      </div>
      <span className="eq-log-viewer-sr" role="status">
        {announce}
      </span>
    </div>
  );
}