@parallelworks/ui 0.18.0 → 0.19.1

package/dist/logviewer/LogViewer.js

@@ -0,0 +1,750 @@
+import { useNotify, useOptionalWorkflowEngine, useStrings } from "../components/Provider.js";
+import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ClockIcon, CopyIcon, DownloadIcon, ExpandIcon, ShrinkIcon, XIcon } from "../icons.js";
+import { TooltipInfo } from "../components/Tooltip.js";
+import { highlightSegments, parseAnsiSegments, plainSegments } from "./segments.js";
+import cx from "classnames";
+import { Fragment, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { DateTime } from "luxon";
+//#region src/logviewer/LogViewer.tsx
+function LogSegments({ segments }) {
+	return segments.map((segment, i) => segment.highlighted ? /* @__PURE__ */ jsx("mark", {
+		className: cx("search-highlight", segment.className),
+		children: segment.content
+	}, i) : segment.className ? /* @__PURE__ */ jsx("span", {
+		className: segment.className,
+		children: segment.content
+	}, i) : /* @__PURE__ */ jsx(Fragment, { children: segment.content }, i));
+}
+var LogLine = memo(function LogLine({ index, segments, lineNumbers, isSelected, lineHeight, onLineClick, searchTerm, command, groupDepth = 0, isGroupCollapsed, onGroupToggle, annotationLabels }) {
+	const displaySegments = useMemo(() => highlightSegments(command?.message ? plainSegments(command.message) : segments, searchTerm), [
+		segments,
+		searchTerm,
+		command
+	]);
+	const annotationLabel = useMemo(() => {
+		if (command?.type === "error") return /* @__PURE__ */ jsx("span", {
+			className: "text-red-500 font-semibold mr-1",
+			children: annotationLabels.error
+		});
+		if (command?.type === "warning") return /* @__PURE__ */ jsx("span", {
+			className: "text-yellow-500 font-semibold mr-1",
+			children: annotationLabels.warning
+		});
+		if (command?.type === "notice") return /* @__PURE__ */ jsx("span", {
+			className: "text-blue-500 font-semibold mr-1",
+			children: annotationLabels.notice
+		});
+		return null;
+	}, [command?.type, annotationLabels]);
+	const groupToggle = command?.type === "group" && onGroupToggle ? () => {
+		if (window.getSelection()?.isCollapsed === false) return;
+		onGroupToggle(index);
+	} : null;
+	const groupToggleProps = groupToggle ? {
+		role: "button",
+		tabIndex: 0,
+		"aria-expanded": !isGroupCollapsed,
+		onClick: groupToggle,
+		onKeyDown: (e) => {
+			if (e.target !== e.currentTarget) return;
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				groupToggle();
+			}
+		}
+	} : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-line-number": index + 1,
+		...groupToggleProps,
+		className: cx("flex items-start text-sm font-mono group", isSelected ? "bg-(--theme-link)/15" : "hover:bg-(--theme-hover)", "text-(--theme-app)", command?.type === "error" && "bg-red-500/10", command?.type === "warning" && "bg-yellow-500/10", command?.type === "notice" && "bg-blue-500/10", command?.type === "debug" && "opacity-60", command?.type === "group" && "bg-(--theme-hover) cursor-pointer"),
+		style: {
+			minHeight: `${lineHeight}px`,
+			lineHeight: `${lineHeight}px`,
+			paddingLeft: groupDepth > 0 ? `${groupDepth * 16}px` : void 0
+		},
+		children: [lineNumbers && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: (e) => {
+				e.stopPropagation();
+				onLineClick(index + 1, e);
+			},
+			className: cx("inline-flex items-center justify-end w-14 pr-3 shrink-0 cursor-pointer select-none", "hover:underline hover:text-(--theme-link) transition-colors", "text-(--theme-muted-text-color)", isSelected && "text-(--theme-link)"),
+			children: index + 1
+		}), /* @__PURE__ */ jsxs("pre", {
+			className: cx("grow text-left whitespace-pre m-0 py-0.5 pr-2 flex items-center", lineNumbers && "pl-2 border-l border-(--theme-border)", command?.type === "error" && "border-l-red-500 border-l-2", command?.type === "warning" && "border-l-yellow-500 border-l-2", command?.type === "notice" && "border-l-blue-500 border-l-2", command?.type === "group" && "font-bold"),
+			children: [
+				command?.type === "group" && /* @__PURE__ */ jsx("span", {
+					className: "mr-1 shrink-0 inline-flex items-center",
+					children: isGroupCollapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-3 h-3" })
+				}),
+				annotationLabel,
+				/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(LogSegments, { segments: displaySegments }) })
+			]
+		})]
+	});
+});
+function validateTimeRange(from, to) {
+	if (from === "" && to === "") return "";
+	const fromTime = from === "" ? null : DateTime.fromISO(from);
+	const toTime = to === "" ? null : DateTime.fromISO(to);
+	if (fromTime && !fromTime.isValid) return "invalidStartTime";
+	if (toTime && !toTime.isValid) return "invalidEndTime";
+	if (fromTime && toTime && toTime <= fromTime) return "endBeforeStart";
+	if (toTime && toTime > DateTime.now()) return "endInFuture";
+	return "";
+}
+var TopPaginationBanner = memo(function TopPaginationBanner({ endOfLog, loadingTop, onLoadOlder }) {
+	const { logviewer: t } = useStrings();
+	const baseCx = cx("flex items-center justify-center gap-2 h-7 text-xs font-mono select-none", "text-[var(--theme-muted-text-color)]", "border-b border-[var(--theme-border)]");
+	if (endOfLog) return /* @__PURE__ */ jsx("div", {
+		className: cx(baseCx, "opacity-70"),
+		children: t.beginningOfLog
+	});
+	if (loadingTop) return /* @__PURE__ */ jsxs("div", {
+		className: baseCx,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "w-3 h-3 rounded-full border-2 border-current border-t-transparent animate-spin",
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsx("span", { children: t.loadingOlderEntries })]
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: onLoadOlder,
+		className: cx(baseCx, "w-full hover:text-[var(--theme-app)] hover:bg-[var(--theme-hover)] transition-colors"),
+		children: t.loadOlderEntries
+	});
+});
+function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNumbers = true, additionalLeftBarComponents = null, additionalRightBarComponents = null, additionalBottomLeftBarComponents = null, additionalBottomRightBarComponents = null, hideExpand = false, inline = false, contentClassName, enableWorkflowCommands: workflowCommandsRequested = false, onReachTop, loadingTop = false, endOfLog = false, prependedSignal = 0, enableTimeRangeFilter = false, onTimeRangeChange, initialTimeRangeFrom = "", initialTimeRangeTo = "" }) {
+	const engine = useOptionalWorkflowEngine(workflowCommandsRequested);
+	const enableWorkflowCommands = workflowCommandsRequested && engine !== void 0;
+	const notify = useNotify();
+	const { common: tCommon, logviewer: t } = useStrings();
+	const annotationLabels = useMemo(() => ({
+		error: t.error,
+		warning: t.warning,
+		notice: t.notice
+	}), [t]);
+	const [fullscreen, setFullscreen] = useState(false);
+	const [follow, _setFollow] = useState(true);
+	const followRef = useRef(true);
+	const updateFollow = useCallback((value) => {
+		followRef.current = value;
+		_setFollow(value);
+	}, []);
+	const [logUrl, setLogUrl] = useState("");
+	const [fullParsedLog, setFullParsedLog] = useState([]);
+	const [processedLines, setProcessedLines] = useState([]);
+	const [rawLines, setRawLines] = useState([]);
+	const [showDebug, setShowDebug] = useState(false);
+	const [collapsedGroups, setCollapsedGroups] = useState(/* @__PURE__ */ new Set());
+	const [filter, setFilter] = useState("");
+	const [timeRangeFrom, setTimeRangeFrom] = useState(initialTimeRangeFrom);
+	const [timeRangeTo, setTimeRangeTo] = useState(initialTimeRangeTo);
+	const [timeRangeOpen, setTimeRangeOpen] = useState(false);
+	const timeRangePopoverRef = useRef(null);
+	const timeRangeError = validateTimeRange(timeRangeFrom, timeRangeTo);
+	useEffect(() => {
+		setTimeRangeFrom(initialTimeRangeFrom);
+	}, [initialTimeRangeFrom]);
+	useEffect(() => {
+		setTimeRangeTo(initialTimeRangeTo);
+	}, [initialTimeRangeTo]);
+	const [visibleStart, setVisibleStart] = useState(0);
+	const [visibleEnd, setVisibleEnd] = useState(0);
+	const [selectedLines, setSelectedLines] = useState(/* @__PURE__ */ new Set());
+	const [lastClickedLine, setLastClickedLine] = useState(null);
+	const [copied, setCopied] = useState(false);
+	const [highlightCopyPosition, setHighlightCopyPosition] = useState(null);
+	const [highlightedText, setHighlightedText] = useState("");
+	const logContainerRef = useRef(null);
+	const ansiCache = useRef({});
+	const scrollAnimationRef = useRef(null);
+	const prevLogLengthRef = useRef(0);
+	const userScrollUpRef = useRef(false);
+	const reachTopFiredRef = useRef(false);
+	const prevScrollHeightRef = useRef(0);
+	const prevPrependedSignalRef = useRef(prependedSignal);
+	const pendingPrependRef = useRef(false);
+	const LINE_HEIGHT = 20;
+	const OVERSCAN = 20;
+	const handleLineClick = useCallback((lineNum, e) => {
+		e.preventDefault();
+		updateFollow(false);
+		if (e.shiftKey && lastClickedLine !== null) {
+			const start = Math.min(lastClickedLine, lineNum);
+			const end = Math.max(lastClickedLine, lineNum);
+			const newSelected = /* @__PURE__ */ new Set();
+			for (let i = start; i <= end; i++) newSelected.add(i);
+			setSelectedLines(newSelected);
+		} else if (selectedLines.has(lineNum) && selectedLines.size === 1) setSelectedLines(/* @__PURE__ */ new Set());
+		else {
+			setSelectedLines(/* @__PURE__ */ new Set([lineNum]));
+			setLastClickedLine(lineNum);
+		}
+	}, [
+		lastClickedLine,
+		selectedLines,
+		updateFollow
+	]);
+	const copyAllLogs = useCallback(async () => {
+		const text = rawLines.join("\n");
+		try {
+			await navigator.clipboard.writeText(text);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2e3);
+		} catch (_err) {
+			notify.error("Failed to copy logs to clipboard");
+		}
+	}, [rawLines, notify]);
+	const handleTextMouseUp = useCallback((e) => {
+		const selectedText = window.getSelection()?.toString().trim();
+		if (selectedText && selectedText.length > 0) {
+			setHighlightCopyPosition({
+				x: e.clientX,
+				y: e.clientY
+			});
+			setHighlightedText(selectedText);
+		} else {
+			setHighlightCopyPosition(null);
+			setHighlightedText("");
+		}
+	}, []);
+	const copyHighlightedText = useCallback(async () => {
+		if (!highlightedText) return;
+		try {
+			await navigator.clipboard.writeText(highlightedText);
+			notify.success("Text copied to clipboard");
+			window.getSelection()?.removeAllRanges();
+			setHighlightCopyPosition(null);
+			setHighlightedText("");
+		} catch (_err) {
+			notify.error("Failed to copy text to clipboard");
+		}
+	}, [highlightedText, notify]);
+	useEffect(() => {
+		const handleClickOutside = (e) => {
+			if (e.target.closest("[data-highlight-copy-button]")) return;
+			setTimeout(() => {
+				setHighlightCopyPosition(null);
+				setHighlightedText("");
+			}, 100);
+		};
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				setHighlightCopyPosition(null);
+				setHighlightedText("");
+			}
+		};
+		if (highlightCopyPosition) {
+			document.addEventListener("mousedown", handleClickOutside);
+			document.addEventListener("keydown", handleKeyDown);
+		}
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [highlightCopyPosition]);
+	useEffect(() => {
+		if (!timeRangeOpen) return;
+		const handleClickOutside = (e) => {
+			const target = e.target;
+			if (timeRangePopoverRef.current?.contains(target)) return;
+			if (target.closest("[data-time-range-trigger]")) return;
+			setTimeRangeOpen(false);
+		};
+		const handleKey = (e) => {
+			if (e.key === "Escape") setTimeRangeOpen(false);
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		document.addEventListener("keydown", handleKey);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("keydown", handleKey);
+		};
+	}, [timeRangeOpen]);
+	const copySelectedLines = useCallback(async () => {
+		if (selectedLines.size === 0) return;
+		const text = Array.from(selectedLines).sort((a, b) => a - b).map((ln) => rawLines[ln - 1] || "").join("\n");
+		try {
+			await navigator.clipboard.writeText(text);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2e3);
+		} catch (_err) {
+			notify.error("Failed to copy selected logs to clipboard");
+		}
+	}, [
+		selectedLines,
+		rawLines,
+		notify
+	]);
+	const handleGroupToggle = useCallback((lineIndex) => {
+		setCollapsedGroups((prev) => {
+			const next = new Set(prev);
+			if (next.has(lineIndex)) next.delete(lineIndex);
+			else next.add(lineIndex);
+			return next;
+		});
+	}, []);
+	const parsedLog = useMemo(() => {
+		let filtered = enableWorkflowCommands ? processedLines : fullParsedLog;
+		if (enableWorkflowCommands) filtered = filtered.filter((item) => {
+			if (item.command?.type === "endgroup") return false;
+			if (!showDebug && item.command?.type === "debug") return false;
+			if (item.groupId !== void 0 && item.command?.type !== "group" && collapsedGroups.has(item.groupId)) return false;
+			return true;
+		});
+		if (filter !== "") {
+			const normalizedFilter = filter.toLowerCase();
+			filtered = filtered.filter((item) => {
+				const command = enableWorkflowCommands ? item.command : void 0;
+				return (command?.message ? command.message : item.segments.map((segment) => segment.content).join("")).toLowerCase().includes(normalizedFilter);
+			});
+		}
+		return filtered;
+	}, [
+		fullParsedLog,
+		processedLines,
+		filter,
+		enableWorkflowCommands,
+		showDebug,
+		collapsedGroups
+	]);
+	const smoothScrollToBottom = useCallback(() => {
+		if (!logContainerRef.current) return;
+		if (scrollAnimationRef.current) {
+			cancelAnimationFrame(scrollAnimationRef.current);
+			scrollAnimationRef.current = null;
+		}
+		const container = logContainerRef.current;
+		const targetScroll = container.scrollHeight - container.clientHeight;
+		const currentScroll = container.scrollTop;
+		const distance = targetScroll - currentScroll;
+		if (Math.abs(distance) < 5) {
+			container.scrollTop = targetScroll;
+			return;
+		}
+		const startTime = performance.now();
+		const duration = 150;
+		const animate = (currentTime) => {
+			const elapsed = currentTime - startTime;
+			const progress = Math.min(elapsed / duration, 1);
+			const eased = 1 - (1 - progress) ** 3;
+			container.scrollTop = currentScroll + distance * eased;
+			if (progress < 1) scrollAnimationRef.current = requestAnimationFrame(animate);
+			else scrollAnimationRef.current = null;
+		};
+		scrollAnimationRef.current = requestAnimationFrame(animate);
+	}, []);
+	const scrollLogViewer = useCallback((location, ref) => {
+		if (!ref?.current) return;
+		if (location === "top") ref.current.scroll({
+			top: 0,
+			left: 0,
+			behavior: "smooth"
+		});
+		else smoothScrollToBottom();
+	}, [smoothScrollToBottom]);
+	useEffect(() => {
+		const container = logContainerRef.current;
+		if (!container || inline) return;
+		const onWheel = (e) => {
+			if (e.deltaY < 0) userScrollUpRef.current = true;
+			if (scrollAnimationRef.current) {
+				cancelAnimationFrame(scrollAnimationRef.current);
+				scrollAnimationRef.current = null;
+			}
+		};
+		const onTouchStart = () => {
+			userScrollUpRef.current = true;
+			if (scrollAnimationRef.current) {
+				cancelAnimationFrame(scrollAnimationRef.current);
+				scrollAnimationRef.current = null;
+			}
+		};
+		container.addEventListener("wheel", onWheel, { passive: true });
+		container.addEventListener("touchstart", onTouchStart, { passive: true });
+		return () => {
+			container.removeEventListener("wheel", onWheel);
+			container.removeEventListener("touchstart", onTouchStart);
+		};
+	}, [inline]);
+	const maybeFireReachTop = useCallback((scrollTop) => {
+		if (!onReachTop || loadingTop || endOfLog) return;
+		if (scrollTop < 50 && !reachTopFiredRef.current) {
+			reachTopFiredRef.current = true;
+			onReachTop();
+		} else if (scrollTop > 100) reachTopFiredRef.current = false;
+	}, [
+		onReachTop,
+		loadingTop,
+		endOfLog
+	]);
+	const handleLogScroll = (event) => {
+		const { scrollTop, clientHeight, scrollHeight } = event.currentTarget;
+		const isAnimating = scrollAnimationRef.current !== null;
+		const atBottom = scrollHeight - clientHeight - scrollTop < 2;
+		if (!isAnimating) {
+			if (atBottom && !follow) updateFollow(true);
+			else if (userScrollUpRef.current && follow) updateFollow(false);
+			userScrollUpRef.current = false;
+		}
+		maybeFireReachTop(scrollTop);
+		if (!followRef.current) {
+			const visibleCount = Math.ceil(clientHeight / LINE_HEIGHT) + 40;
+			const maxStart = Math.max(0, parsedLog.length - visibleCount);
+			const startIndex = Math.min(maxStart, Math.max(0, Math.floor(scrollTop / LINE_HEIGHT) - OVERSCAN));
+			setVisibleStart(startIndex);
+			setVisibleEnd(startIndex + visibleCount);
+		}
+	};
+	useEffect(() => {
+		if (!log) return;
+		const lines = (typeof log === "object" ? JSON.stringify(log) : log.toString()).split("\n");
+		const cleanedLines = lines[lines.length - 1] === "" ? lines.slice(0, -1) : lines;
+		const isAppending = cleanedLines.length > prevLogLengthRef.current;
+		prevLogLengthRef.current = cleanedLines.length;
+		setRawLines(cleanedLines);
+		const processed = cleanedLines.map((line, index) => {
+			if (ansiCache.current[line] === void 0) ansiCache.current[line] = parseAnsiSegments(line);
+			return {
+				index,
+				segments: ansiCache.current[line]
+			};
+		});
+		setFullParsedLog(processed);
+		if (enableWorkflowCommands && engine) setProcessedLines(engine.processLogLines(processed, cleanedLines));
+		if (followRef.current && logContainerRef.current) {
+			setVisibleEnd((prev) => Math.max(prev, cleanedLines.length));
+			if (isAppending) requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					smoothScrollToBottom();
+				});
+			});
+		}
+		const file = new Blob([log], { type: "text/plaintext" });
+		const url = URL.createObjectURL(file);
+		setLogUrl(url);
+		return () => {
+			URL.revokeObjectURL(url);
+			if (scrollAnimationRef.current) cancelAnimationFrame(scrollAnimationRef.current);
+		};
+	}, [
+		log,
+		smoothScrollToBottom,
+		enableWorkflowCommands,
+		engine
+	]);
+	const parsedLogLengthRef = useRef(parsedLog.length);
+	parsedLogLengthRef.current = parsedLog.length;
+	useEffect(() => {
+		if (!logContainerRef.current) return;
+		const observer = new ResizeObserver(() => {
+			if (!logContainerRef.current) return;
+			if (parsedLogLengthRef.current === 0) return;
+			const container = logContainerRef.current;
+			const clientHeight = container.clientHeight;
+			const visibleCount = Math.ceil(clientHeight / LINE_HEIGHT) + 40;
+			if (followRef.current) {
+				const minStart = Math.max(0, parsedLogLengthRef.current - visibleCount);
+				setVisibleStart((prev) => Math.min(prev, minStart));
+				setVisibleEnd(parsedLogLengthRef.current);
+				requestAnimationFrame(() => {
+					requestAnimationFrame(() => {
+						smoothScrollToBottom();
+					});
+				});
+			} else {
+				const maxStart = Math.max(0, parsedLogLengthRef.current - visibleCount);
+				const startIndex = Math.min(maxStart, Math.max(0, Math.floor(container.scrollTop / LINE_HEIGHT) - OVERSCAN));
+				setVisibleStart(startIndex);
+				setVisibleEnd(startIndex + visibleCount);
+			}
+		});
+		observer.observe(logContainerRef.current);
+		return () => observer.disconnect();
+	}, [smoothScrollToBottom]);
+	useLayoutEffect(() => {
+		if (prependedSignal > prevPrependedSignalRef.current) pendingPrependRef.current = true;
+		else if (prependedSignal < prevPrependedSignalRef.current) pendingPrependRef.current = false;
+		prevPrependedSignalRef.current = prependedSignal;
+		if (!pendingPrependRef.current) return;
+		const container = logContainerRef.current;
+		if (!container) return;
+		const delta = container.scrollHeight - prevScrollHeightRef.current;
+		if (delta <= 0) return;
+		pendingPrependRef.current = false;
+		container.scrollTop += delta;
+		if (!followRef.current) {
+			const visibleCount = Math.ceil(container.clientHeight / LINE_HEIGHT) + 40;
+			const maxStart = Math.max(0, parsedLog.length - visibleCount);
+			const startIndex = Math.min(maxStart, Math.max(0, Math.floor(container.scrollTop / LINE_HEIGHT) - OVERSCAN));
+			setVisibleStart(startIndex);
+			setVisibleEnd(startIndex + visibleCount);
+		}
+	}, [prependedSignal, parsedLog.length]);
+	useLayoutEffect(() => {
+		if (logContainerRef.current) prevScrollHeightRef.current = logContainerRef.current.scrollHeight;
+	});
+	const handleFilterChange = (event) => {
+		const newFilter = event.target.value;
+		setFilter(newFilter);
+		updateFollow(false);
+		if (logContainerRef.current) {
+			const clientHeight = logContainerRef.current.clientHeight;
+			const visibleCount = Math.ceil(clientHeight / LINE_HEIGHT) + 40;
+			setVisibleStart(0);
+			setVisibleEnd(Math.min(parsedLog.length, visibleCount));
+			scrollLogViewer("top", logContainerRef);
+		} else {
+			setVisibleStart(0);
+			setVisibleEnd(50);
+		}
+	};
+	const ExpandButtonIcon = fullscreen ? ShrinkIcon : ExpandIcon;
+	const expandButtonText = fullscreen ? "Collapse" : "Expand";
+	const paddingTop = visibleStart * LINE_HEIGHT;
+	const paddingBottom = Math.max(0, parsedLog.length - visibleEnd) * LINE_HEIGHT;
+	const visibleLogs = inline ? parsedLog : parsedLog.slice(visibleStart, Math.min(parsedLog.length, visibleEnd));
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "logviewer-container",
+		className: cx("flex flex-col grow", roundedBottom && "rounded-lg"),
+		style: !fullscreen ? {
+			height,
+			width
+		} : {
+			height: "calc(100% - 50px)",
+			width: "100%",
+			position: "fixed",
+			left: 0,
+			top: 50,
+			zIndex: 9999
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cx("flex select-none items-center gap-x-2 p-2", inline ? "bg-[var(--theme-panel-bg)] border-b border-[var(--theme-border)]" : "theme-panel"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cx("w-full flex flex-row gap-x-2 items-center", hideExpand && "justify-between"),
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex gap-x-2 w-full",
+							children: [
+								!inline && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
+									type: "button",
+									className: "btn btn-neutral",
+									onClick: () => {
+										scrollLogViewer("top", logContainerRef);
+										updateFollow(false);
+									},
+									children: [/* @__PURE__ */ jsx(ArrowUpIcon, {}), /* @__PURE__ */ jsx("span", { children: t.top })]
+								}), /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									className: "btn btn-neutral",
+									onClick: () => {
+										if (!follow) {
+											updateFollow(true);
+											setVisibleEnd((prev) => Math.max(prev, parsedLog.length));
+											requestAnimationFrame(() => {
+												smoothScrollToBottom();
+											});
+										} else updateFollow(false);
+									},
+									children: [/* @__PURE__ */ jsx(ArrowDownIcon, {}), /* @__PURE__ */ jsx("span", { children: !follow ? "Follow" : "Following" })]
+								})] }),
+								selectedLines.size > 0 ? /* @__PURE__ */ jsxs("div", {
+									className: "relative flex items-center h-full",
+									children: [/* @__PURE__ */ jsxs("button", {
+										type: "button",
+										className: "btn btn-neutral",
+										onClick: copySelectedLines,
+										children: [copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-500" }) : /* @__PURE__ */ jsx(CopyIcon, {}), /* @__PURE__ */ jsx("span", { children: copied ? tCommon.copied : t.copyLines(selectedLines.size) })]
+									}), /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": t.clearSelection,
+										className: "absolute -top-1.5 -right-1.5 btn-neutral rounded-full p-1 border transition-colors shadow-sm cursor-pointer z-10",
+										onClick: () => setSelectedLines(/* @__PURE__ */ new Set()),
+										title: t.clearSelection,
+										children: /* @__PURE__ */ jsx(XIcon, { className: "text-[10px]" })
+									})]
+								}) : /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									className: "btn btn-neutral",
+									onClick: copyAllLogs,
+									children: [copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-500" }) : /* @__PURE__ */ jsx(CopyIcon, {}), /* @__PURE__ */ jsx("span", { children: copied ? tCommon.copied : t.copyAll })]
+								}),
+								additionalLeftBarComponents,
+								enableWorkflowCommands && /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: cx("btn btn-neutral", showDebug && "btn-active"),
+									onClick: () => setShowDebug((prev) => !prev),
+									children: /* @__PURE__ */ jsx("span", { children: showDebug ? t.hideDebug : t.showDebug })
+								}),
+								enableTimeRangeFilter && /* @__PURE__ */ jsxs("div", {
+									className: "relative",
+									children: [/* @__PURE__ */ jsxs("button", {
+										type: "button",
+										"data-time-range-trigger": true,
+										className: "btn btn-neutral",
+										onClick: () => setTimeRangeOpen((o) => !o),
+										children: [
+											/* @__PURE__ */ jsx(ClockIcon, {}),
+											/* @__PURE__ */ jsx("span", { children: t.timeRange }),
+											(timeRangeFrom !== "" || timeRangeTo !== "") && /* @__PURE__ */ jsx("span", {
+												title: t.timeRangeActive,
+												className: "ml-1 px-1.5 py-0.5 text-[10px] rounded-full bg-[var(--theme-element)]/15 text-[var(--theme-element)]",
+												children: t.timeRangeOn
+											})
+										]
+									}), timeRangeOpen && /* @__PURE__ */ jsxs("div", {
+										ref: timeRangePopoverRef,
+										className: cx("absolute top-full left-0 mt-1 z-50 w-80 p-3 rounded-lg shadow-lg", "border border-[var(--theme-border)] bg-[var(--theme-panel-bg)]", "flex flex-col gap-y-3"),
+										children: [
+											/* @__PURE__ */ jsxs("div", {
+												className: "flex items-center gap-x-1.5",
+												children: [/* @__PURE__ */ jsx("span", {
+													className: "text-xs font-semibold text-[var(--theme-app)]",
+													children: t.filterByTimeRange
+												}), /* @__PURE__ */ jsx(TooltipInfo, { text: t.timeRangeHelp })]
+											}),
+											/* @__PURE__ */ jsxs("label", {
+												className: "flex flex-col gap-y-1",
+												children: [/* @__PURE__ */ jsx("span", {
+													className: "text-[11px] uppercase tracking-wide text-[var(--theme-muted-text-color)]",
+													children: t.timeRangeFrom
+												}), /* @__PURE__ */ jsx("input", {
+													type: "datetime-local",
+													value: timeRangeFrom,
+													onChange: (e) => setTimeRangeFrom(e.target.value),
+													className: "rounded-md text-sm h-8 px-2 bg-[var(--theme-input-bg)] text-[var(--theme-input)] border border-[var(--theme-border)]"
+												})]
+											}),
+											/* @__PURE__ */ jsxs("label", {
+												className: "flex flex-col gap-y-1",
+												children: [/* @__PURE__ */ jsx("span", {
+													className: "text-[11px] uppercase tracking-wide text-[var(--theme-muted-text-color)]",
+													children: t.timeRangeTo
+												}), /* @__PURE__ */ jsx("input", {
+													type: "datetime-local",
+													value: timeRangeTo,
+													onChange: (e) => setTimeRangeTo(e.target.value),
+													className: "rounded-md text-sm h-8 px-2 bg-[var(--theme-input-bg)] text-[var(--theme-input)] border border-[var(--theme-border)]"
+												})]
+											}),
+											timeRangeError !== "" && /* @__PURE__ */ jsx("span", {
+												className: "text-[11px] text-red-500",
+												children: t[timeRangeError]
+											}),
+											/* @__PURE__ */ jsxs("div", {
+												className: "flex gap-x-2",
+												children: [/* @__PURE__ */ jsx("button", {
+													type: "button",
+													disabled: timeRangeError !== "",
+													className: "btn btn-primary flex-1 justify-center",
+													onClick: () => {
+														onTimeRangeChange?.(timeRangeFrom, timeRangeTo);
+														setTimeRangeOpen(false);
+													},
+													children: t.apply
+												}), (timeRangeFrom !== "" || timeRangeTo !== "") && /* @__PURE__ */ jsx("button", {
+													type: "button",
+													className: "btn btn-neutral flex-1 justify-center",
+													onClick: () => {
+														setTimeRangeFrom("");
+														setTimeRangeTo("");
+														onTimeRangeChange?.("", "");
+														setTimeRangeOpen(false);
+													},
+													children: t.clear
+												})]
+											})
+										]
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("input", {
+							type: "text",
+							className: "rounded-md text-sm h-8",
+							placeholder: t.filterLogs,
+							onChange: handleFilterChange
+						}),
+						/* @__PURE__ */ jsxs("a", {
+							href: logUrl,
+							className: cx(!logUrl && "disabled", "btn btn-neutral"),
+							download: true,
+							children: [/* @__PURE__ */ jsx(DownloadIcon, {}), /* @__PURE__ */ jsx("span", { children: t.download })]
+						}),
+						/* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: cx("btn btn-neutral", hideExpand && "hidden"),
+							onClick: () => setFullscreen((prev) => !prev),
+							children: [/* @__PURE__ */ jsx(ExpandButtonIcon, {}), /* @__PURE__ */ jsx("span", { children: expandButtonText })]
+						})
+					]
+				}), additionalRightBarComponents]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-testid": "logviewer",
+				role: "none",
+				className: cx(roundedBottom && "rounded-b-lg", "w-full overflow-x-auto", !inline && "h-full grow overflow-y-auto", !inline && "bg-(--theme-muted-panel-bg)", contentClassName),
+				style: inline ? void 0 : {
+					overflowY: "auto",
+					position: "relative",
+					overscrollBehavior: "contain"
+				},
+				ref: logContainerRef,
+				onScroll: inline ? void 0 : handleLogScroll,
+				onMouseUp: handleTextMouseUp,
+				children: [!inline && onReachTop && /* @__PURE__ */ jsx(TopPaginationBanner, {
+					endOfLog,
+					loadingTop,
+					onLoadOlder: onReachTop
+				}), /* @__PURE__ */ jsx("div", {
+					className: "min-w-max",
+					style: inline ? void 0 : {
+						paddingTop,
+						paddingBottom
+					},
+					children: visibleLogs.map((item) => /* @__PURE__ */ jsx(LogLine, {
+						index: item.index,
+						segments: item.segments,
+						lineNumbers,
+						isSelected: selectedLines.has(item.index + 1),
+						lineHeight: LINE_HEIGHT,
+						onLineClick: handleLineClick,
+						searchTerm: filter,
+						command: enableWorkflowCommands ? item.command : void 0,
+						groupDepth: enableWorkflowCommands ? item.groupDepth : 0,
+						isGroupCollapsed: enableWorkflowCommands && item.command?.type === "group" ? collapsedGroups.has(item.index) : void 0,
+						onGroupToggle: enableWorkflowCommands ? handleGroupToggle : void 0,
+						annotationLabels
+					}, item.index))
+				})]
+			}),
+			highlightCopyPosition && highlightedText && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-highlight-copy-button": true,
+				className: cx("fixed z-[10000] flex items-center gap-1 px-2 py-1.5 text-xs font-medium", "rounded-md shadow-lg border cursor-pointer transition-colors duration-150", "bg-(--theme-panel-bg) border-(--theme-border) hover:bg-(--theme-hover) text-(--theme-app)"),
+				style: {
+					left: highlightCopyPosition.x,
+					top: highlightCopyPosition.y + 8,
+					transform: "translateX(-50%)"
+				},
+				onClick: copyHighlightedText,
+				children: copied ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CheckIcon, { className: "text-green-500 w-3.5 h-3.5" }), /* @__PURE__ */ jsx("span", { children: tCommon.copied })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CopyIcon, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ jsx("span", { children: tCommon.copy })] })
+			}),
+			(additionalBottomLeftBarComponents || additionalBottomRightBarComponents) && /* @__PURE__ */ jsxs("div", {
+				className: cx("flex theme-panel select-none items-center gap-x-2 p-2"),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cx("w-full flex flex-row gap-x-2 items-center", hideExpand && "justify-between"),
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex gap-x-2 w-full",
+						children: additionalBottomLeftBarComponents
+					})
+				}), additionalBottomRightBarComponents]
+			})
+		]
+	});
+}
+//#endregion
+export { LogViewer };