@parallelworks/ui 0.18.0 → 0.19.1

package/dist/logviewer/index.js

@@ -1,742 +1,3 @@
-import { i as useNotify, u as useStrings } from "../chunks/Provider-Ghua9PkN.js";
-import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ClockIcon, CopyIcon, DownloadIcon, ExpandIcon, ShrinkIcon, XIcon } from "../icons.js";
-import { r as TooltipInfo } from "../chunks/Tooltip-Crxo_eU_.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";
-import { highlightSegments, parseAnsiSegments, plainSegments, processLinesWithCommands } from "@parallelworks/workflow-parser";
-//#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 = false, onReachTop, loadingTop = false, endOfLog = false, prependedSignal = 0, enableTimeRangeFilter = false, onTimeRangeChange, initialTimeRangeFrom = "", initialTimeRangeTo = "" }) {
-	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(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]);
-	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]);
-	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]);
-	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);
-			container.scrollTop = currentScroll + distance * (1 - (1 - progress) ** 3);
-			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) + OVERSCAN * 2;
-			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) setProcessedLines(processLinesWithCommands(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
-	]);
-	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) + OVERSCAN * 2;
-			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) + OVERSCAN * 2;
-			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) + OVERSCAN * 2;
-			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 };
+import { highlightSegments, parseAnsiSegments, plainSegments } from "./segments.js";
+import { LogViewer } from "./LogViewer.js";
+export { LogViewer, highlightSegments, parseAnsiSegments, plainSegments };