4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T5240,"use client"; import { Alert02Icon, ArrowDown01Icon, Cancel01Icon, Clock01Icon, Search01Icon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import Anser from "anser"; import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react"; import type { UIEvent } from "react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { cn } from "@/lib/utils"; type LogLevel = "debug" | "info" | "warn" | "error"; type TimeRange = "all" | "5m" | "15m" | "1h" | "24h"; interface LogLine { id: string; message: string; level?: LogLevel; timestamp?: string; at?: string; source?: string; } interface LogsViewerProps { lines: LogLine[]; title?: string; maxLines?: number; rowHeight?: number; visibleRows?: number; follow?: boolean; defaultFollow?: boolean; onFollowChange?: (follow: boolean) => void; query?: string; defaultQuery?: string; onQueryChange?: (query: string) => void; range?: TimeRange; defaultRange?: TimeRange; onRangeChange?: (range: TimeRange) => void; levels?: LogLevel[]; defaultLevels?: LogLevel[]; onLevelsChange?: (levels: LogLevel[]) => void; isStreaming?: boolean; isLoading?: boolean; error?: Error | string | null; className?: string; } const LEVELS: { label: string; value: LogLevel; className: string }[] = [ { className: "text-muted-foreground", label: "Debug", value: "debug" }, { className: "text-[var(--status-active)]", label: "Info", value: "info" }, { className: "text-[var(--status-scaling)]", label: "Warn", value: "warn" }, { className: "text-destructive", label: "Error", value: "error" }, ]; const LEVEL_META = new Map(LEVELS.map((level) => [level.value, level])); const ANSI_COLORS: Record = { "ansi-black": "text-foreground", "ansi-blue": "text-[var(--status-active)]", "ansi-bright-black": "text-muted-foreground", "ansi-bright-blue": "text-[var(--status-active)]", "ansi-bright-cyan": "text-[var(--status-active)]", "ansi-bright-green": "text-[var(--status-active)]", "ansi-bright-magenta": "text-primary", "ansi-bright-red": "text-destructive", "ansi-bright-white": "text-foreground", "ansi-bright-yellow": "text-[var(--status-scaling)]", "ansi-cyan": "text-[var(--status-active)]", "ansi-green": "text-[var(--status-active)]", "ansi-magenta": "text-primary", "ansi-red": "text-destructive", "ansi-white": "text-foreground", "ansi-yellow": "text-[var(--status-scaling)]", }; const stripAnsi = (value: string) => Anser.ansiToText(value); const AnsiText = ({ value }: { value: string }) => { const parts = useMemo( () => Anser.ansiToJson(value, { json: true, use_classes: true }), [value] ); return ( <> {parts.map((part, index) => { if (!part.content) { return null; } const color = part.fg ? ANSI_COLORS[part.fg] : undefined; const decorations = part.decorations ?? []; return ( {part.content} ); })} ); }; const LevelFilter = ({ onToggle, value, }: { onToggle: (level: LogLevel) => void; value: LogLevel[]; }) => (

Filter log levels {LEVELS.map((level) => { const active = value.includes(level.value); return ( ); })}

); const StreamState = ({ streaming }: { streaming: boolean }) => ( ); const LogRow = ({ line, rowHeight }: { line: LogLine; rowHeight: number }) => { const meta = line.level ? LEVEL_META.get(line.level) : undefined; return (

{line.timestamp ? ( {line.timestamp} ) : null} {meta ? ( {line.level} ) : null} {line.source ? ( {line.source} ) : null}

); }; const LogsEmpty = ({ filtered }: { filtered: boolean }) => (

{filtered ? "No matching lines" : "No logs yet"}

{filtered ? "Try a different search or enable more levels." : "Lines appear here as the compute writes them."}

); const LogsLoading = ({ rows }: { rows: number }) => ( {Array.from({ length: rows }, (_, index) => (

))} ); const SearchField = ({ onChange, value, }: { onChange: (value: string) => void; value: string; }) => ( Search logs ); const LogsHeader = ({ cappedCount, isStreaming, maxLines, title, totalCount, visibleCount, }: { cappedCount: number; isStreaming: boolean; maxLines: number; title: string; totalCount: number; visibleCount: number; }) => (

{title}

{visibleCount.toLocaleString()} of {cappedCount.toLocaleString()} lines {totalCount > maxLines ? ` (capped at ${maxLines.toLocaleString()})` : ""}

); const LogsError = ({ message, minHeight, }: { message: string; minHeight: number; }) => (

); const RANGES: { label: string; short: string; value: TimeRange; ms: number; }[] = [ { label: "Last 5 minutes", ms: 5 * 60_000, short: "5m", value: "5m" }, { label: "Last 15 minutes", ms: 15 * 60_000, short: "15m", value: "15m" }, { label: "Last hour", ms: 60 * 60_000, short: "1h", value: "1h" }, { label: "Last 24 hours", ms: 24 * 60 * 60_000, short: "24h", value: "24h" }, { label: "All time", ms: Number.POSITIVE_INFINITY, short: "All time", value: "all", }, ]; const RANGE_SHORT = new Map(RANGES.map((range) => [range.value, range.short])); const RANGE_MS = new Map(RANGES.map((range) => [range.value, range.ms])); const RangeFilter = ({ onChange, value, }: { onChange: (range: TimeRange) => void; value: TimeRange; }) => ( ); const LogsControls = ({ hasTimestamps, levels, onLevelToggle, onQueryChange, onRangeChange, query, range, }: { hasTimestamps: boolean; levels: LogLevel[]; onLevelToggle: (level: LogLevel) => void; onQueryChange: (value: string) => void; onRangeChange: (range: TimeRange) => void; query: string; range: TimeRange; }) => (

{hasTimestamps ? ( ) : null}

); const OVERSCAN = 12; const ALL_LEVELS: LogLevel[] = ["debug", "info", "warn", "error"]; const LogsBody = ({ follow, levelsFiltered, query, rowHeight, setFollow, title, viewportHeight, visible, }: { follow: boolean; levelsFiltered: boolean; query: string; rowHeight: number; setFollow: (follow: boolean) => void; title: string; viewportHeight: number; visible: LogLine[]; }) => { const scrollRef = useRef(null); const [scrollTop, setScrollTop] = useState(0); const [pendingCount, setPendingCount] = useState(0); const previousCount = useRef(visible.length); const totalHeight = visible.length * rowHeight; const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - OVERSCAN); const endIndex = Math.min( visible.length, Math.ceil((scrollTop + viewportHeight) / rowHeight) + OVERSCAN ); const rows = visible.slice(startIndex, endIndex); const scrollToBottom = useCallback(() => { const node = scrollRef.current; if (!node) { return; } node.scrollTop = node.scrollHeight; setScrollTop(node.scrollTop); setPendingCount(0); }, []); useLayoutEffect(() => { const added = visible.length - previousCount.current; previousCount.current = visible.length; if (follow) { scrollToBottom(); return; } if (added > 0) { setPendingCount((current) => current + added); } }, [follow, scrollToBottom, visible.length]); const handleScroll = (event: UIEvent) => { const node = event.currentTarget; setScrollTop(node.scrollTop); const atBottom = node.scrollHeight - node.scrollTop - node.clientHeight < rowHeight; if (atBottom) { setPendingCount(0); if (!follow) { setFollow(true); } return; } if (follow) { setFollow(false); } }; return (

{visible.length === 0 ? ( ) : (

{rows.map((line) => ( ))}

)}

{follow || visible.length === 0 ? null : ( )}

); }; const useLogsViewerState = ({ controlledFollow, controlledLevels, controlledQuery, controlledRange, defaultFollow, defaultLevels, defaultQuery, defaultRange, error, onFollowChange, onLevelsChange, onQueryChange, onRangeChange, }: { controlledFollow?: boolean; controlledLevels?: LogLevel[]; controlledQuery?: string; controlledRange?: TimeRange; defaultFollow: boolean; defaultLevels: LogLevel[]; defaultQuery: string; defaultRange: TimeRange; error?: Error | string | null; onFollowChange?: (follow: boolean) => void; onLevelsChange?: (levels: LogLevel[]) => void; onQueryChange?: (query: string) => void; onRangeChange?: (range: TimeRange) => void; }) => { const [internalFollow, setInternalFollow] = useState(defaultFollow); const [internalQuery, setInternalQuery] = useState(defaultQuery); const [internalLevels, setInternalLevels] = useState(defaultLevels); const [internalRange, setInternalRange] = useState(defaultRange); const setFollow = useCallback( (next: boolean) => { if (controlledFollow === undefined) { setInternalFollow(next); } onFollowChange?.(next); }, [controlledFollow, onFollowChange] ); const handleQueryChange = (next: string) => { if (controlledQuery === undefined) { setInternalQuery(next); } onQueryChange?.(next); }; const handleRangeChange = (next: TimeRange) => { if (controlledRange === undefined) { setInternalRange(next); } onRangeChange?.(next); }; const handleLevelToggle = (level: LogLevel) => { const apply = (current: LogLevel[]) => { const next = current.includes(level) ? current.filter((item) => item !== level) : [...current, level]; onLevelsChange?.(next); return next; }; if (controlledLevels === undefined) { setInternalLevels(apply); return; } apply(controlledLevels); }; return { errorMessage: error instanceof Error ? error.message : (error ?? undefined), follow: controlledFollow ?? internalFollow, handleLevelToggle, handleQueryChange, handleRangeChange, levels: controlledLevels ?? internalLevels, query: controlledQuery ?? internalQuery, range: controlledRange ?? internalRange, setFollow, }; }; const LogsViewer = ({ lines, title = "Logs", maxLines = 5000, rowHeight = 20, visibleRows = 18, follow: controlledFollow, defaultFollow = true, onFollowChange, query: controlledQuery, defaultQuery = "", onQueryChange, range: controlledRange, defaultRange = "all", onRangeChange, levels: controlledLevels, defaultLevels = ALL_LEVELS, onLevelsChange, isStreaming = false, isLoading = false, error, className, }: LogsViewerProps) => { const { errorMessage, follow, handleLevelToggle, handleQueryChange, handleRangeChange, levels, query, range, setFollow, } = useLogsViewerState({ controlledFollow, controlledLevels, controlledQuery, controlledRange, defaultFollow, defaultLevels, defaultQuery, defaultRange, error, onFollowChange, onLevelsChange, onQueryChange, onRangeChange, }); const newestAt = useMemo(() => { let newest = 0; for (const line of lines) { if (line.at) { const value = new Date(line.at).getTime(); if (value > newest) { newest = value; } } } return newest; }, [lines]); const hasTimestamps = newestAt > 0; const capped = useMemo( () => (lines.length > maxLines ? lines.slice(-maxLines) : lines), [lines, maxLines] ); const visible = useMemo(() => { const needle = query.trim().toLocaleLowerCase(); const window = RANGE_MS.get(range) ?? Number.POSITIVE_INFINITY; const oldest = Number.isFinite(window) ? newestAt - window : 0; return capped.filter((line) => { if (line.level && !levels.includes(line.level)) { return false; } if (line.at && oldest > 0 && new Date(line.at).getTime() < oldest) { return false; } if (!needle) { return true; } return `${line.timestamp ?? ""} ${line.source ?? ""} ${stripAnsi(line.message)}` .toLocaleLowerCase() .includes(needle); }); }, [capped, levels, newestAt, query, range]); const viewportHeight = rowHeight * visibleRows; return (

{errorMessage ? ( ) : null} {isLoading && !errorMessage ? : null} {isLoading || errorMessage ? null : ( )}

); }; export { LogsViewer }; export type { LogLevel, LogLine, LogsViewerProps, TimeRange }; 51:T862,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import type { LogLine } from "@/components/logs-viewer/logs-viewer"; export interface UseLogsStreamOptions { endpoint?: string; maxLines?: number; enabled?: boolean; } /** * Reads a server-sent events endpoint that emits one JSON log line per message. * The server owns retention and authorization; this hook only keeps the tail. */ export const useLogsStream = ({ endpoint = "/api/logs/stream", maxLines = 5000, enabled = true, }: UseLogsStreamOptions = {}) => { const [lines, setLines] = useState([]); const [isStreaming, setIsStreaming] = useState(false); const [streamError, setStreamError] = useState(null); const sourceRef = useRef(null); const clear = useCallback(() => setLines([]), []); useEffect(() => { if (!enabled) { return; } const source = new EventSource(endpoint); sourceRef.current = source; const handleOpen = () => { setIsStreaming(true); setStreamError(null); }; const handleMessage = (event: MessageEvent) => { try { const line = JSON.parse(event.data) as LogLine; setLines((current) => { const next = [...current, line]; return next.length > maxLines ? next.slice(-maxLines) : next; }); } catch { setStreamError(new Error("Received a malformed log line.")); } }; const handleError = () => { setIsStreaming(false); setStreamError(new Error("Log stream disconnected.")); }; source.addEventListener("open", handleOpen); source.addEventListener("message", handleMessage); source.addEventListener("error", handleError); return () => { source.removeEventListener("open", handleOpen); source.removeEventListener("message", handleMessage); source.removeEventListener("error", handleError); source.close(); sourceRef.current = null; }; }, [enabled, endpoint, maxLines]); return { clear, error: streamError, isStreaming, lines, setLines, }; }; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/core-free-icons"}]]}]}],["$","li","anser",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/anser","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"anser"}]]}]}]]}],["$","$L4e",null,{"namespace":"@neon-ui","registryDependencies":["utils","https://ui.neon.com/r/neon-tokens.json","https://ui.neon.com/r/select.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/components/logs-viewer/logs-viewer.tsx","content":"$50","type":"registry:component"},{"path":"src/components/logs-viewer/use-logs-stream.ts","content":"$51","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]