@parallelworks/ui 0.43.0 → 0.45.0

package/dist/logviewer/LogViewer.js

@@ -1,25 +1,25 @@
-import { FaArrowDown } from "../icons/fa/FaArrowDown.js";
-import { FaArrowUp } from "../icons/fa/FaArrowUp.js";
-import { FaCheck } from "../icons/fa/FaCheck.js";
-import { FaChevronDown } from "../icons/fa/FaChevronDown.js";
-import { FaCloudDownloadAlt } from "../icons/fa/FaCloudDownloadAlt.js";
-import { FaCompress } from "../icons/fa/FaCompress.js";
-import { FaExpand } from "../icons/fa/FaExpand.js";
-import { FiClock } from "../icons/fi/FiClock.js";
-import { FiCopy } from "../icons/fi/FiCopy.js";
-import { FiX } from "../icons/fi/FiX.js";
-import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
-import { useNotify, useOptionalWorkflowEngine, useStrings } from "../components/Provider.js";
+import { cx } from "../cx.js";
+import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ClockIcon, CloseIcon, CopyIcon, DownloadIcon, ExpandIcon, ShrinkIcon } from "../icons.js";
+import { buttonClasses } from "../components/buttonClasses.js";
+import { Loader } from "../components/Loader.js";
+import { useOptionalWorkflowEngine, useStrings } from "../components/Provider.js";
+import { useCopy } from "../components/useCopy.js";
+import { Button } from "../components/Button.js";
+import { DatePicker } from "../components/DatePicker.js";
+import { Popover } from "../components/Popover.js";
 import { InfoTip } from "../components/InfoTip.js";
+import { IconButton } from "../components/IconButton.js";
+import { SearchInput } from "../components/SearchInput.js";
 import { highlightSegments, parseAnsiSegments, plainSegments } from "./segments.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { DateTime } from "luxon";
 //#region src/logviewer/LogViewer.tsx
+var LINE_HEIGHT = 20;
 function LogSegments({ segments }) {
 	return segments.map((segment, i) => segment.highlighted ? /* @__PURE__ */ jsx("mark", {
-		className: clsx("search-highlight", segment.className),
+		className: cx("search-highlight", segment.className),
 		children: segment.content
 	}, i) : segment.className ? /* @__PURE__ */ jsx("span", {
 		className: segment.className,
@@ -67,7 +67,7 @@ var LogLine = memo(function LogLine({ index, segments, lineNumbers, isSelected,
 	return /* @__PURE__ */ jsxs("div", {
 		"data-line-number": index + 1,
 		...groupToggleProps,
-		className: clsx("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"),
+		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`,
@@ -79,14 +79,14 @@ var LogLine = memo(function LogLine({ index, segments, lineNumbers, isSelected,
 				e.stopPropagation();
 				onLineClick(index + 1, e);
 			},
-			className: clsx("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)"),
+			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: clsx("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"),
+			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(LuChevronRight, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(FaChevronDown, { className: "w-3 h-3" })
+					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 }) })
@@ -106,30 +106,31 @@ function validateTimeRange(from, to) {
 }
 var TopPaginationBanner = memo(function TopPaginationBanner({ endOfLog, loadingTop, onLoadOlder }) {
 	const { logviewer: t } = useStrings();
-	const baseCx = clsx("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)]");
+	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: clsx(baseCx, "opacity-70"),
+		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
+		children: [/* @__PURE__ */ jsx(Loader, {
+			inline: true,
+			decorative: true,
+			size: 12,
+			color: "currentColor"
 		}), /* @__PURE__ */ jsx("span", { children: t.loadingOlderEntries })]
 	});
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		onClick: onLoadOlder,
-		className: clsx(baseCx, "w-full hover:text-[var(--theme-app)] hover:bg-[var(--theme-hover)] transition-colors"),
+		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 { common, logviewer: t } = useStrings();
 	const annotationLabels = useMemo(() => ({
 		error: t.error,
 		warning: t.warning,
@@ -152,7 +153,7 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 	const [timeRangeFrom, setTimeRangeFrom] = useState(initialTimeRangeFrom);
 	const [timeRangeTo, setTimeRangeTo] = useState(initialTimeRangeTo);
 	const [timeRangeOpen, setTimeRangeOpen] = useState(false);
-	const timeRangePopoverRef = useRef(null);
+	const timeRangeId = useId();
 	const timeRangeError = validateTimeRange(timeRangeFrom, timeRangeTo);
 	useEffect(() => {
 		setTimeRangeFrom(initialTimeRangeFrom);
@@ -160,24 +161,19 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 	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 { copy, copied } = useCopy();
+	const [selection, setSelection] = useState(null);
 	const logContainerRef = useRef(null);
+	const listRef = 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);
@@ -199,94 +195,34 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 	]);
 	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]);
+		await copy(text, { quiet: true });
+	}, [rawLines, copy]);
 	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 text = window.getSelection()?.toString().trim();
+		const { clientX, clientY } = e;
+		setSelection(text ? {
+			text,
+			at: {
+				clientX,
+				clientY
+			}
+		} : null);
 	}, []);
-	const copyHighlightedText = useCallback(async () => {
-		if (!highlightedText) return;
-		try {
-			await navigator.clipboard.writeText(highlightedText);
-			notify.success("Text copied to clipboard");
+	const copySelection = useCallback(async () => {
+		if (!selection) return;
+		if (await copy(selection.text)) {
 			window.getSelection()?.removeAllRanges();
-			setHighlightCopyPosition(null);
-			setHighlightedText("");
-		} catch (_err) {
-			notify.error("Failed to copy text to clipboard");
+			setSelection(null);
 		}
-	}, [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]);
+	}, [selection, copy]);
 	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");
-		}
+		await copy(text, { quiet: true });
 	}, [
 		selectedLines,
 		rawLines,
-		notify
+		copy
 	]);
 	const handleGroupToggle = useCallback((lineIndex) => {
 		setCollapsedGroups((prev) => {
@@ -320,32 +256,21 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 		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 virtualizer = useVirtualizer({
+		count: parsedLog.length,
+		getScrollElement: () => logContainerRef.current,
+		estimateSize: () => LINE_HEIGHT,
+		overscan: 20,
+		scrollMargin: listRef.current?.offsetTop ?? 0,
+		getItemKey: (i) => parsedLog[i]?.index ?? i,
+		enabled: !inline
+	});
+	const parsedLogLengthRef = useRef(parsedLog.length);
+	parsedLogLengthRef.current = parsedLog.length;
+	const scrollToEnd = useCallback(() => {
+		const last = parsedLogLengthRef.current - 1;
+		if (last >= 0) virtualizer.scrollToIndex(last, { align: "end" });
+	}, [virtualizer]);
 	const scrollToTop = () => {
 		logContainerRef.current?.scroll({
 			top: 0,
@@ -358,17 +283,9 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 		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 });
@@ -390,21 +307,10 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 	]);
 	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;
-		}
+		if (scrollHeight - clientHeight - scrollTop < 2 && !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;
@@ -422,56 +328,26 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 		});
 		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();
-				});
-			});
-		}
+		if (followRef.current && isAppending) requestAnimationFrame(scrollToEnd);
 		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);
-		};
+		return () => URL.revokeObjectURL(url);
 	}, [
 		log,
-		smoothScrollToBottom,
+		scrollToEnd,
 		enableWorkflowCommands,
 		engine
 	]);
-	const parsedLogLengthRef = useRef(parsedLog.length);
-	parsedLogLengthRef.current = parsedLog.length;
 	useEffect(() => {
-		if (!logContainerRef.current) return;
+		const container = logContainerRef.current;
+		if (!container || inline) 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);
-			}
+			if (followRef.current) scrollToEnd();
 		});
-		observer.observe(logContainerRef.current);
+		observer.observe(container);
 		return () => observer.disconnect();
-	}, [smoothScrollToBottom]);
+	}, [inline, scrollToEnd]);
 	useLayoutEffect(() => {
 		if (prependedSignal > prevPrependedSignalRef.current) pendingPrependRef.current = true;
 		else if (prependedSignal < prevPrependedSignalRef.current) pendingPrependRef.current = false;
@@ -483,210 +359,211 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 		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;
+	const handleFilterChange = (newFilter) => {
 		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));
-			scrollToTop();
-		} else {
-			setVisibleStart(0);
-			setVisibleEnd(50);
-		}
+		scrollToTop();
 	};
-	const ExpandButtonIcon = fullscreen ? FaCompress : FaExpand;
-	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));
+	const ExpandButtonIcon = fullscreen ? ShrinkIcon : ExpandIcon;
+	const expandButtonText = fullscreen ? common.collapse : common.expand;
+	const rows = virtualizer.getVirtualItems();
+	const visibleLogs = inline ? parsedLog.map((item, index) => ({
+		item,
+		index
+	})) : rows.flatMap((row) => {
+		const item = parsedLog[row.index];
+		return item ? [{
+			item,
+			index: row.index
+		}] : [];
+	});
+	const offset = (rows[0]?.start ?? 0) - virtualizer.options.scrollMargin;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": "logviewer-container",
-		className: clsx("flex flex-col grow", roundedBottom && "rounded-lg"),
-		style: !fullscreen ? {
+		className: cx("flex flex-col grow", roundedBottom && "rounded-lg", fullscreen && "fixed inset-x-0 bottom-0 top-(--app-inset-top,0px) z-(--layer-overlay)"),
+		style: fullscreen ? void 0 : {
 			height,
 			width
-		} : {
-			height: "calc(100% - 50px)",
-			width: "100%",
-			position: "fixed",
-			left: 0,
-			top: 50,
-			zIndex: 9999
 		},
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: clsx("flex select-none items-center gap-x-2 p-2", inline ? "bg-[var(--theme-panel-bg)] border-b border-[var(--theme-border)]" : "theme-panel"),
+				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: clsx("w-full flex flex-row gap-x-2 items-center", hideExpand && "justify-between"),
+					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, { children: [/* @__PURE__ */ jsxs("button", {
-									type: "button",
-									className: "btn btn-neutral",
+								!inline && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+									variant: "secondary",
+									size: "sm",
+									icon: /* @__PURE__ */ jsx(ArrowUpIcon, {}),
 									onClick: () => {
 										scrollToTop();
 										updateFollow(false);
 									},
-									children: [/* @__PURE__ */ jsx(FaArrowUp, {}), /* @__PURE__ */ jsx("span", { children: t.top })]
-								}), /* @__PURE__ */ jsxs("button", {
-									type: "button",
-									className: "btn btn-neutral",
+									children: t.top
+								}), /* @__PURE__ */ jsx(Button, {
+									variant: "secondary",
+									size: "sm",
+									icon: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
+									"aria-pressed": follow,
 									onClick: () => {
 										if (!follow) {
 											updateFollow(true);
-											setVisibleEnd((prev) => Math.max(prev, parsedLog.length));
-											requestAnimationFrame(() => {
-												smoothScrollToBottom();
-											});
+											scrollToEnd();
 										} else updateFollow(false);
 									},
-									children: [/* @__PURE__ */ jsx(FaArrowDown, {}), /* @__PURE__ */ jsx("span", { children: !follow ? "Follow" : "Following" })]
+									children: follow ? t.following : t.follow
 								})] }),
 								selectedLines.size > 0 ? /* @__PURE__ */ jsxs("div", {
 									className: "relative flex items-center h-full",
-									children: [/* @__PURE__ */ jsxs("button", {
-										type: "button",
-										className: "btn btn-neutral",
+									children: [/* @__PURE__ */ jsx(Button, {
+										variant: "secondary",
+										size: "sm",
+										icon: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-500" }) : /* @__PURE__ */ jsx(CopyIcon, {}),
 										onClick: copySelectedLines,
-										children: [copied ? /* @__PURE__ */ jsx(FaCheck, { className: "text-green-500" }) : /* @__PURE__ */ jsx(FiCopy, {}), /* @__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(FiX, { className: "text-[10px]" })
+										children: copied ? common.copied : t.copyLines(selectedLines.size)
+									}), /* @__PURE__ */ jsx("span", {
+										className: "absolute -top-2 -right-2 z-10 rounded-md shadow-sm",
+										children: /* @__PURE__ */ jsx(IconButton, {
+											variant: "secondary",
+											size: "xs",
+											label: t.clearSelection,
+											icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+											onClick: () => setSelectedLines(/* @__PURE__ */ new Set())
+										})
 									})]
-								}) : /* @__PURE__ */ jsxs("button", {
-									type: "button",
-									className: "btn btn-neutral",
+								}) : /* @__PURE__ */ jsx(Button, {
+									variant: "secondary",
+									size: "sm",
+									icon: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-500" }) : /* @__PURE__ */ jsx(CopyIcon, {}),
 									onClick: copyAllLogs,
-									children: [copied ? /* @__PURE__ */ jsx(FaCheck, { className: "text-green-500" }) : /* @__PURE__ */ jsx(FiCopy, {}), /* @__PURE__ */ jsx("span", { children: copied ? tCommon.copied : t.copyAll })]
+									children: copied ? common.copied : t.copyAll
 								}),
 								additionalLeftBarComponents,
-								enableWorkflowCommands && /* @__PURE__ */ jsx("button", {
-									type: "button",
-									className: clsx("btn btn-neutral", showDebug && "btn-active"),
+								enableWorkflowCommands && /* @__PURE__ */ jsx(Button, {
+									variant: "secondary",
+									size: "sm",
+									"aria-pressed": showDebug,
 									onClick: () => setShowDebug((prev) => !prev),
-									children: /* @__PURE__ */ jsx("span", { children: showDebug ? t.hideDebug : t.showDebug })
+									children: showDebug ? t.hideDebug : t.showDebug
 								}),
-								enableTimeRangeFilter && /* @__PURE__ */ jsxs("div", {
-									className: "relative",
-									children: [/* @__PURE__ */ jsxs("button", {
+								enableTimeRangeFilter && /* @__PURE__ */ jsxs(Popover, {
+									open: timeRangeOpen,
+									onOpenChange: setTimeRangeOpen,
+									align: "start",
+									"aria-label": t.filterByTimeRange,
+									className: "flex w-80 flex-col gap-y-3",
+									trigger: /* @__PURE__ */ jsxs("button", {
 										type: "button",
-										"data-time-range-trigger": true,
-										className: "btn btn-neutral",
-										onClick: () => setTimeRangeOpen((o) => !o),
+										className: buttonClasses({
+											variant: "secondary",
+											size: "sm"
+										}),
 										children: [
-											/* @__PURE__ */ jsx(FiClock, {}),
+											/* @__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)]",
+												className: "ml-1 px-1.5 py-0.5 text-[10px] rounded-full bg-[var(--theme-accent)]/15 text-[var(--theme-accent)]",
 												children: t.timeRangeOn
 											})
 										]
-									}), timeRangeOpen && /* @__PURE__ */ jsxs("div", {
-										ref: timeRangePopoverRef,
-										className: clsx("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(InfoTip, { 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
-												})]
-											})
-										]
-									})]
+									}),
+									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(InfoTip, { text: t.timeRangeHelp })]
+										}),
+										/* @__PURE__ */ jsxs("div", {
+											className: "flex flex-col gap-y-1",
+											children: [/* @__PURE__ */ jsx("span", {
+												id: `${timeRangeId}-timeRangeFrom`,
+												className: "text-[11px] uppercase tracking-wide text-[var(--theme-muted-text-color)]",
+												children: t.timeRangeFrom
+											}), /* @__PURE__ */ jsx(DatePicker, {
+												withTime: true,
+												"aria-labelledby": `${timeRangeId}-timeRangeFrom`,
+												value: timeRangeFrom,
+												onValueChange: setTimeRangeFrom
+											})]
+										}),
+										/* @__PURE__ */ jsxs("div", {
+											className: "flex flex-col gap-y-1",
+											children: [/* @__PURE__ */ jsx("span", {
+												id: `${timeRangeId}-timeRangeTo`,
+												className: "text-[11px] uppercase tracking-wide text-[var(--theme-muted-text-color)]",
+												children: t.timeRangeTo
+											}), /* @__PURE__ */ jsx(DatePicker, {
+												withTime: true,
+												"aria-labelledby": `${timeRangeId}-timeRangeTo`,
+												value: timeRangeTo,
+												onValueChange: setTimeRangeTo
+											})]
+										}),
+										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, {
+												variant: "primary",
+												size: "sm",
+												disabled: timeRangeError !== "",
+												className: "flex-1",
+												onClick: () => {
+													onTimeRangeChange?.(timeRangeFrom, timeRangeTo);
+													setTimeRangeOpen(false);
+												},
+												children: common.apply
+											}), (timeRangeFrom !== "" || timeRangeTo !== "") && /* @__PURE__ */ jsx(Button, {
+												variant: "secondary",
+												size: "sm",
+												className: "flex-1",
+												onClick: () => {
+													setTimeRangeFrom("");
+													setTimeRangeTo("");
+													onTimeRangeChange?.("", "");
+													setTimeRangeOpen(false);
+												},
+												children: common.clear
+											})]
+										})
+									]
 								})
 							]
 						}),
-						/* @__PURE__ */ jsx("input", {
-							type: "text",
-							className: "rounded-md text-sm h-8",
-							placeholder: t.filterLogs,
-							onChange: handleFilterChange
+						/* @__PURE__ */ jsx(SearchInput, {
+							label: t.filterLogs,
+							value: filter,
+							onValueChange: handleFilterChange,
+							className: "w-48"
 						}),
 						/* @__PURE__ */ jsxs("a", {
-							href: logUrl,
-							className: clsx(!logUrl && "disabled", "btn btn-neutral"),
+							href: logUrl || void 0,
+							"aria-disabled": !logUrl || void 0,
+							className: buttonClasses({
+								variant: "secondary",
+								size: "sm"
+							}),
 							download: true,
-							children: [/* @__PURE__ */ jsx(FaCloudDownloadAlt, {}), /* @__PURE__ */ jsx("span", { children: t.download })]
+							children: [/* @__PURE__ */ jsx(DownloadIcon, {}), common.download]
 						}),
-						/* @__PURE__ */ jsxs("button", {
-							type: "button",
-							className: clsx("btn btn-neutral", hideExpand && "hidden"),
+						!hideExpand && /* @__PURE__ */ jsx(Button, {
+							variant: "secondary",
+							size: "sm",
+							icon: /* @__PURE__ */ jsx(ExpandButtonIcon, {}),
 							onClick: () => setFullscreen((prev) => !prev),
-							children: [/* @__PURE__ */ jsx(ExpandButtonIcon, {}), /* @__PURE__ */ jsx("span", { children: expandButtonText })]
+							children: expandButtonText
 						})
 					]
 				}), additionalRightBarComponents]
@@ -694,7 +571,7 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 			/* @__PURE__ */ jsxs("div", {
 				"data-testid": "logviewer",
 				role: "none",
-				className: clsx(roundedBottom && "rounded-b-lg", "w-full overflow-x-auto", !inline && "h-full grow overflow-y-auto", !inline && "bg-(--theme-muted-panel-bg)", contentClassName),
+				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",
@@ -708,43 +585,52 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 					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))
+					ref: listRef,
+					className: cx(!inline && "relative"),
+					style: inline ? void 0 : { height: virtualizer.getTotalSize() },
+					children: /* @__PURE__ */ jsx("div", {
+						className: cx("min-w-max", !inline && "absolute top-0 left-0 min-w-full"),
+						style: inline ? void 0 : { transform: `translateY(${offset}px)` },
+						children: visibleLogs.map(({ item, index }) => /* @__PURE__ */ jsx("div", {
+							"data-index": index,
+							ref: inline ? void 0 : virtualizer.measureElement,
+							children: /* @__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: clsx("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, { children: [/* @__PURE__ */ jsx(FaCheck, { className: "text-green-500 w-3.5 h-3.5" }), /* @__PURE__ */ jsx("span", { children: tCommon.copied })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FiCopy, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ jsx("span", { children: tCommon.copy })] })
+			selection && /* @__PURE__ */ jsx(Popover, {
+				open: true,
+				onOpenChange: (open) => !open && setSelection(null),
+				at: selection.at,
+				initialFocus: "none",
+				"aria-label": common.copy,
+				className: "p-1",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "xs",
+					icon: /* @__PURE__ */ jsx(CopyIcon, {}),
+					onClick: copySelection,
+					children: common.copy
+				})
 			}),
 			(additionalBottomLeftBarComponents || additionalBottomRightBarComponents) && /* @__PURE__ */ jsxs("div", {
 				className: "flex theme-panel select-none items-center gap-x-2 p-2",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: clsx("w-full flex flex-row gap-x-2 items-center", hideExpand && "justify-between"),
+					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