Live Log Stream

1"use client";
2 
3import * as React from "react";
4import { motion, AnimatePresence } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7import {
8  useReducedMotion,
9  useVisibilityPause,
10  useAutoFollow,
11  formatTimestamp as defaultFormatTimestamp,
12  streamItemVariants,
13  statusVars,
14  formatNumber,
15  type StatusTone,
16} from "@/lib/motiq";
17 
18/**
19 * LiveLogStream — a production log viewer for developer surfaces (deploy/build
20 * output, background jobs, server events, local dev, queue workers).
21 *
22 * It is *presentation only*: the host application owns the `entries` array and
23 * streams new lines in by appending to it. The component never opens a socket,
24 * never fabricates output, and makes no claim about what a system is "doing".
25 *
26 * The defining UX is auto-follow that never fights the user (shared
27 * `useAutoFollow`): while pinned to the bottom, new lines scroll into view;
28 * scroll up (or pause) and following stops, new lines are counted, and a
29 * "N new lines — jump to latest" control lets the reader resume on their terms.
30 * User scrolling is never disabled. Levels are conveyed with an icon **and** a
31 * text label/prefix — never colour alone — so they survive forced-colors and
32 * assistive tech. Under `prefers-reduced-motion` new lines appear instantly.
33 * Clean-room original.
34 */
35 
36export type LogLevel = "debug" | "info" | "success" | "warning" | "error";
37 
38export interface LogEntry {
39  /** Stable identifier, unique within the stream. */
40  id: string | number;
41  /** Severity — drives the icon, label, and prefix (never colour alone). */
42  level: LogLevel;
43  /** The log line. Long lines scroll horizontally rather than wrapping the row. */
44  message: string;
45  /** When the line was emitted. Absent lines simply omit the timestamp column. */
46  timestamp?: Date | number | string;
47  /** Optional origin tag, e.g. a service or worker name. */
48  source?: string;
49}
50 
51/** Lifecycle of the stream, owned by the application. */
52export type LogStreamStatus = "streaming" | "idle" | "completed" | "error";
53 
54export interface LiveLogStreamProps {
55  /** The log lines, controlled by the host application (append to stream). */
56  entries: LogEntry[];
57  /** Lifecycle state. `"streaming"` shows a live pulse; `"error"` shows a banner. */
58  status?: LogStreamStatus;
59  /** Message shown in the error banner when `status === "error"`. */
60  errorMessage?: string;
61  /** Whether the viewport auto-follows the tail. Controlled when provided. */
62  follow?: boolean;
63// … truncated