pepperplus-ui/src/components/Logging/Logging.tsx

import {useEffect, useRef, useState} from "react";
import {create} from "zustand";

import formatDuration from "../../utils/formatDuration.ts";
import {type LogFilterPredicate, type LogRecord, useLogs} from "./useLogs.ts";
import Filters from "./Filters.tsx";
import {type Cell, useCell} from "../../utils/cellStore.ts";

import styles from "./Logging.module.css";


/**
 * Zustand store definition for managing user preferences related to logging.
 *
 * Includes flags for toggling relative timestamps and automatic scroll behavior.
 */
type LoggingSettings = {
  /** Whether to display log timestamps as relative (e.g., "2m 15s ago") instead of absolute. */
  showRelativeTime: boolean;
  /** Updates the `showRelativeTime` setting. */
  setShowRelativeTime: (showRelativeTime: boolean) => void;
  /** Whether the log view should automatically scroll to the newest entry. */
  scrollToBottom: boolean;
  /** Updates the `scrollToBottom` setting. */
  setScrollToBottom: (scrollToBottom: boolean) => void;
};

/**
 * Global Zustand store for logging UI preferences.
 */
const useLoggingSettings = create<LoggingSettings>((set) => ({
  showRelativeTime: false,
  setShowRelativeTime: (showRelativeTime: boolean) => set({ showRelativeTime }),
  scrollToBottom: true,
  setScrollToBottom: (scrollToBottom: boolean) => set({ scrollToBottom }),
}));

/**
 * Renders a single log message entry with colored level indicators and timestamp formatting.
 *
 * This component automatically re-renders when the underlying log record (`recordCell`)
 * changes. It also triggers the `onUpdate` callback whenever the record updates (e.g., for auto-scrolling).
 *
 * @param recordCell - A reactive `Cell` containing a single `LogRecord`.
 * @param onUpdate - Optional callback triggered when the log entry updates.
 * @returns A JSX element displaying a formatted log message.
 */
function LogMessage({
  recordCell,
  onUpdate,
}: {
  recordCell: Cell<LogRecord>,
  onUpdate?: () => void,
}) {
  const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
  const record = useCell(recordCell);

  /**
   * Normalizes the log level number to a multiple of 10, 
   * for which there are CSS styles. (e.g., INFO = 20, ERROR = 40).
   */
  const normalizedLevelNo = (() => {
    // By default, the highest level is 50 (CRITICAL). Custom levels can be higher, but we don't have more critical color.
    if (record.levelno >= 50) return 50;

    return Math.round(record.levelno / 10) * 10;
  })();

  /** Simplifies the logger name by showing only the last path segment. */
  const normalizedName = record.name.split(".").pop() || record.name;

  // Notify parent component (e.g. for scroll updates) when this record changes.
  useEffect(() => {
    if (onUpdate) onUpdate();
  }, [record, onUpdate]);

  return <div className={`${styles.logContainer} round-md border-lg flex-row gap-md`}>
    <div className={`${styles[`accented${normalizedLevelNo}`]} flex-col padding-sm justify-between`}>
      <span className={"mono bold"}>{record.levelname}</span>
      <span className={"mono clickable font-small"}
        onClick={() => setShowRelativeTime(!showRelativeTime)}
      >{showRelativeTime
        ? formatDuration(record.relativeCreated)
        : new Date(record.created * 1000).toLocaleTimeString()
      }</span>
    </div>
    <div className={"flex-col flex-1 padding-sm"}>
      <span className={"mono"}>{normalizedName}</span>
      <span>{record.message}</span>
    </div>
  </div>;
}

/**
 * Displays a scrollable list of log messages.
 *
 * Handles:
 * - Auto-scrolling when new messages arrive.
 * - Allowing users to scroll manually and disable auto-scroll.
 * - A floating "Scroll to bottom" button when not at the bottom.
 *
 * @param recordCells - Array of reactive log records to display.
 * @returns A scrollable log list component.
 */
function LogMessages({ recordCells }: { recordCells: Cell<LogRecord>[] }) {
  const scrollableRef = useRef<HTMLDivElement>(null);
  const lastElementRef = useRef<HTMLLIElement>(null)
  const { scrollToBottom, setScrollToBottom } = useLoggingSettings();

  // Disable auto-scroll if the user manually scrolls.
  useEffect(() => {
    if (!scrollableRef.current) return;
    const currentScrollableRef = scrollableRef.current;

    const handleScroll = () => setScrollToBottom(false);

    currentScrollableRef.addEventListener("wheel", handleScroll);
    currentScrollableRef.addEventListener("touchmove", handleScroll);

    return () => {
      currentScrollableRef.removeEventListener("wheel", handleScroll);
      currentScrollableRef.removeEventListener("touchmove", handleScroll);
    }
  }, [scrollableRef, setScrollToBottom]);

  /**
   * Scrolls the last log message into view if auto-scroll is enabled,
   * or if forced (e.g., user clicks "Scroll to bottom").
   *
   * @param force - If true, forces scrolling even if `scrollToBottom` is false.
   */
  function scrollLastElementIntoView(force = false) {
    if ((!scrollToBottom && !force) || !lastElementRef.current) return;
    lastElementRef.current.scrollIntoView({ behavior: "smooth" });
  }

  return <div ref={scrollableRef} className={"min-height-0 scroll-y padding-b-md"}>
    <ol className={`${styles.noNumbers} margin-0 flex-col gap-md`}>
      {recordCells.map((recordCell, i) => (
        <li key={`${i}_${recordCell.get().firstRelativeCreated}`}>
          <LogMessage recordCell={recordCell} onUpdate={scrollLastElementIntoView} />
        </li>
      ))}
      <li ref={lastElementRef}></li>
    </ol>
    {!scrollToBottom && <button
      className={styles.floatingButton}
      onClick={() => {
        setScrollToBottom(true);
        scrollLastElementIntoView(true);
      }}
    >
      Scroll to bottom
    </button>}
  </div>;
}

/**
 * Top-level logging panel component.
 *
 * Combines:
 * - The `Filters` component for adjusting log visibility.
 * - The `LogMessages` component for displaying filtered logs.
 * - Zustand-managed UI settings (auto-scroll, timestamp display).
 *
 * This component uses the `useLogs` hook to fetch and filter logs based on
 * active predicates, and re-renders automatically as new logs arrive.
 *
 * @returns The complete logging UI as a React element.
 */
export default function Logging() {
  const [filterPredicates, setFilterPredicates] = useState(new Map<string, LogFilterPredicate>());
  const { filteredLogs, distinctNames } = useLogs(filterPredicates)

  return <div className={`flex-col gap-lg min-height-0 ${styles.loggingContainer}`}>
    <div className={"flex-row gap-lg justify-between align-center"}>
      <h2 className={"margin-0"}>Logs</h2>
      <Filters
        filterPredicates={filterPredicates}
        setFilterPredicates={setFilterPredicates}
        agentNames={distinctNames}
      />
    </div>
    <LogMessages recordCells={filteredLogs} />
  </div>;
}