2f:I[18486,["/_next/static/chunks/3zk55npp9bf01.js","/_next/static/chunks/3knkywys2hkh9.js","/_next/static/chunks/2fcjhy-fz5wnq.js","/_next/static/chunks/0b29fkwlbx2p4.js","/_next/static/chunks/3vqyiv2v25v6h.js","/_next/static/chunks/2tex7xqe6exb2.js","/_next/static/chunks/3rvimhctlr4-r.js","/_next/static/chunks/2qrdos7bay7xd.js","/_next/static/chunks/1zu63xz0sut2q.js","/_next/static/chunks/3s_vtn9-o6axf.js","/_next/static/chunks/0tjcxouu9yygq.js","/_next/static/chunks/00qnunoym8707.js","/_next/static/chunks/36dqcnwhlmhvd.js","/_next/static/chunks/3fc93fmtajepe.js","/_next/static/chunks/3qyzbdc59bipe.js","/_next/static/chunks/2wn6uqhj_7ar8.js","/_next/static/chunks/2ugulmxbv5uj0.js","/_next/static/chunks/3i_85ptr6ldt9.js","/_next/static/chunks/3no31har91fnf.js","/_next/static/chunks/2u_p_b-00dlbb.js","/_next/static/chunks/2s4u-e7v8s32w.js","/_next/static/chunks/03lv2zpbrnsm6.js","/_next/static/chunks/09ryh04ih0u3m.js","/_next/static/chunks/2t7-2l4drt60j.js","/_next/static/chunks/2ajvsktgf6m-p.js","/_next/static/chunks/3ibi-mun41tg8.js","/_next/static/chunks/0ys5fqsi-2imd.js","/_next/static/chunks/0bx1jeef0z_qt.js","/_next/static/chunks/03zmd-m4rfp4v.js","/_next/static/chunks/203gxar08ia6h.js","/_next/static/chunks/1n-tt9-3lg032.js","/_next/static/chunks/2uq2kbfclw4fg.js","/_next/static/chunks/0ht3fekr3tf-z.js","/_next/static/chunks/332qr_vlz8t9f.js","/_next/static/chunks/37fxrooh6apyh.js","/_next/static/chunks/3oi2f2hg83rth.js","/_next/static/chunks/2uvmwrp4luphi.js","/_next/static/chunks/0dgja_yzr_poi.js","/_next/static/chunks/1mwg_4l82b-k1.js","/_next/static/chunks/1pr2cjva2osew.js","/_next/static/chunks/172r_2v6ayun0.js","/_next/static/chunks/051do_f-zm8-n.js","/_next/static/chunks/3d2e2qew1t5n-.js","/_next/static/chunks/1s2n0m45xm-p8.js","/_next/static/chunks/380e_okshg0ij.js","/_next/static/chunks/03jw1cbs584gn.js","/_next/static/chunks/0cglpdiphg124.js","/_next/static/chunks/3xulgzd6wg1pk.js"],"ExpandableCode"] 30:Te819,

"use client";

import { RotateCcw } from "lucide-react";
import { useEffect, useState } from "react";
import { Button } from "@/components/motion/button/base";
import {
  type LogEntry,
  LogExplorer,
} from "@/components/premium/log-explorer/log-explorer";
import { MorphicTooltip } from "@/components/premium/morphic-tooltip";

const initialEntries: LogEntry[] = [
  {
    id: "log-1",
    time: "09:18:10",
    level: "info",
    message: "Source connected",
    context: "source=events",
    payload: { source: "events", transport: "https", connected: true },
  },
  {
    id: "log-2",
    time: "09:18:11",
    level: "info",
    message: "Batch received",
    context: "batch=bt_420 size=32",
    payload: { batchId: "bt_420", records: 32, queue: "ingestion" },
  },
  {
    id: "log-3",
    time: "09:18:11",
    level: "info",
    message: "Schema validated",
    context: "version=3 duration=42ms",
    payload: {
      schema: "workspace.event",
      version: 3,
      valid: true,
      durationMs: 42,
    },
  },
  {
    id: "log-4",
    time: "09:18:12",
    level: "warn",
    message: "Delivery delayed",
    context: "destination=warehouse retry=1",
    payload: {
      destination: "warehouse",
      attempt: 1,
      retryAfterMs: 2000,
      reason: "Temporary upstream delay",
    },
  },
  {
    id: "log-5",
    time: "09:18:14",
    level: "info",
    message: "Delivery recovered",
    context: "attempt=2 duration=184ms",
    payload: {
      batchId: "bt_420",
      attempt: 2,
      delivered: true,
      durationMs: 184,
    },
  },
  {
    id: "log-6",
    time: "09:18:15",
    level: "info",
    message: "Batch indexed",
    context: "records=32 partition=2026-10",
    payload: { records: 32, partition: "2026-10", index: "workspace-events" },
  },
  {
    id: "log-7",
    time: "09:18:16",
    level: "error",
    message: "Record rejected",
    context: "record=ev_912 missing=workspaceId",
    payload: {
      recordId: "ev_912",
      status: 422,
      error: {
        code: "MISSING_FIELD",
        field: "workspaceId",
        message: "A workspace ID is required.",
      },
    },
  },
  {
    id: "log-8",
    time: "09:18:17",
    level: "info",
    message: "Checkpoint saved",
    context: "offset=14820",
    payload: { offset: 14820, source: "events", persisted: true },
  },
  {
    id: "log-9",
    time: "09:18:18",
    level: "warn",
    message: "Buffer nearing capacity",
    context: "used=76% limit=500",
    payload: { used: 380, limit: 500, utilization: 0.76 },
  },
  {
    id: "log-10",
    time: "09:18:19",
    level: "info",
    message: "Buffer drained",
    context: "remaining=24",
    payload: { processed: 356, remaining: 24 },
  },
  {
    id: "log-11",
    time: "09:18:20",
    level: "error",
    message: "Destination unavailable",
    context: "sink=archive status=503",
    payload: {
      destination: "archive",
      status: 503,
      requestId: "rq_742",
      retryable: true,
    },
  },
  {
    id: "log-12",
    time: "09:18:21",
    level: "info",
    message: "Health check passed",
    context: "worker=ingest-02 latency=28ms",
    payload: { worker: "ingest-02", healthy: true, latencyMs: 28 },
  },
];

const incoming: Omit<LogEntry, "id" | "time">[] = [
  {
    level: "info",
    message: "Batch received",
    context: "queue=ingestion size=16",
    payload: { queue: "ingestion", records: 16 },
  },
  {
    level: "info",
    message: "Transformation finished",
    context: "duration=64ms",
    payload: { stage: "normalize", durationMs: 64, transformed: 16 },
  },
  {
    level: "warn",
    message: "Slow destination response",
    context: "sink=warehouse duration=840ms",
    payload: { destination: "warehouse", durationMs: 840, thresholdMs: 500 },
  },
  {
    level: "info",
    message: "Checkpoint saved",
    context: "source=events",
    payload: { source: "events", persisted: true },
  },
  {
    level: "error",
    message: "Record rejected",
    context: "reason=invalid timestamp",
    payload: {
      status: 422,
      error: { field: "occurredAt", message: "Expected an ISO timestamp." },
    },
  },
  {
    level: "info",
    message: "Health check passed",
    context: "worker=ingest-02",
    payload: { worker: "ingest-02", healthy: true },
  },
];

function demoTime(index: number) {
  const seconds = 21 + index * 2;
  return `09:${String(18 + Math.floor(seconds / 60)).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")}`;
}

export function LogExplorerPreview() {
  const [entries, setEntries] = useState(initialEntries);
  const [paused, setPaused] = useState(false);
  const [version, setVersion] = useState(0);

  useEffect(() => {
    let next = 0;
    const timer = setInterval(() => {
      const index = next++;
      const entry: LogEntry = {
        ...incoming[index % incoming.length],
        id: `stream-${version}-${index}`,
        time: demoTime(index + 1),
      };
      setEntries((current) => [...current.slice(-79), entry]);
    }, 2000);
    return () => clearInterval(timer);
  }, [version]);

  return (
    <div className="flex w-full justify-center p-3 sm:p-6">
      <LogExplorer
        entries={entries}
        service="event-pipeline"
        environment="staging"
        paused={paused}
        onPausedChange={setPaused}
        headerActions={
          <MorphicTooltip content="Reset demo">
            <Button
              tabIndex={0}
              variant="ghost"
              size="icon"
              aria-label="Reset demo"
              className="size-9 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
              onClick={() => {
                setEntries(initialEntries);
                setPaused(false);
                setVersion((current) => current + 1);
              }}
            >
              <RotateCcw aria-hidden className="size-3.5" />
            </Button>
          </MorphicTooltip>
        }
      />
    </div>
  );
}

2e:["$","$L2f",null,{"children":["$","div",null,{"className":"relative px-0 py-4 text-[13px] leading-relaxed [&_pre]:!bg-transparent [&_pre]:!p-0 [&_pre]:w-max [&_pre]:min-w-full [&_code]:font-mono [&_code]:text-[13px] [&_.shiki]:bg-transparent [&_.shiki]:text-[var(--shiki-light)] dark:[&_.shiki]:text-[var(--shiki-dark)] [&_.shiki_span]:text-[var(--shiki-light)] dark:[&_.shiki_span]:text-[var(--shiki-dark)] [&_.line]:px-5 [&_.highlighted]:border-blue-500 [&_.highlighted]:border-l-2 [&_.highlighted]:bg-(--color-fg)/[0.07] [&_.highlighted]:!pl-[18px] [&_.diff.add]:border-green-500 [&_.diff.add]:border-l-2 [&_.diff.add]:bg-green-500/10 [&_.diff.add]:!pl-[18px] [&_.diff.remove]:border-red-500 [&_.diff.remove]:border-l-2 [&_.diff.remove]:bg-red-500/10 [&_.diff.remove]:!pl-[18px] [&_.focused]:opacity-100 [&_pre:has(.focused)_.line:not(.focused)]:opacity-30 [&_pre:has(.focused)_.line:not(.focused)]:transition-opacity","dangerouslySetInnerHTML":{"__html":"$30"}}]}]

Log Explorer

Execution logs

Install