@parallelworks/ui 0.1.0 → 0.2.0

package/dist/logviewer/index.js

@@ -0,0 +1,534 @@
+import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, CopyIcon, DownloadIcon, ExpandIcon, ShrinkIcon, XIcon } from "../icons.js";
+import { o as useStrings, r as useNotify } from "../chunks/Provider-C2VtPnh5.js";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+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$1, { children: segment.content }, i));
+}
+var LogLine = memo(function LogLine({ index, segments, lineNumbers, isSelected, lineHeight, onLineClick, searchTerm, inline = false, 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]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-line-number": index + 1,
+		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
+		},
+		onClick: command?.type === "group" && onGroupToggle ? () => onGroupToggle(index) : void 0,
+		children: [lineNumbers && /* @__PURE__ */ jsx("span", {
+			onClick: (e) => 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 LogViewer({ log, height = "unset", width, roundedBottom = false, lineNumbers = true, additionalLeftBarComponents = null, additionalRightBarComponents = null, additionalBottomLeftBarComponents = null, additionalBottomRightBarComponents = null, hideExpand = false, inline = false, contentClassName, enableWorkflowCommands = false }) {
+	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 [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 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]);
+	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 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 (!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]);
+	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", {
+		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, { 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",
+										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 })
+								})
+							]
+						}),
+						/* @__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__ */ jsx("div", {
+				"data-testid": "logviewer",
+				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: /* @__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,
+						inline,
+						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, { children: [/* @__PURE__ */ jsx(CheckIcon, { className: "text-green-500 w-3.5 h-3.5" }), /* @__PURE__ */ jsx("span", { children: tCommon.copied })] }) : /* @__PURE__ */ jsxs(Fragment, { 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 };

package/dist/logviewer/logviewer.css

@@ -0,0 +1,70 @@
+/* Log viewer search highlighting */
+mark.search-highlight {
+  background-color: rgba(251, 191, 36, 0.4);
+  color: inherit;
+  padding: 0 2px;
+  border-radius: 2px;
+}
+
+/*
+ * Scheme-aware ANSI colors for LogViewer.
+ *
+ * The `anser` library is invoked with { use_classes: true }, so ANSI codes
+ * become classes like `ansi-white-fg` / `ansi-black-bg` rather than inline
+ * styles. Rules below remap only the combinations that would be unreadable
+ * against the log surface — white/bright-white on a light surface, black on
+ * a dark surface, and a few low-contrast hues. Colors that already read well
+ * pass through as `currentcolor`/`transparent` so users still see the intent
+ * of their ANSI output. `light-dark()` follows the host's `color-scheme`, so
+ * no component ever branches on a scheme.
+ */
+.ansi-white-fg,
+.ansi-bright-white-fg {
+  color: light-dark(var(--theme-app, #111827), currentcolor);
+}
+.ansi-black-fg {
+  color: light-dark(currentcolor, var(--theme-muted-text-color, #9ca3af));
+}
+.ansi-red-fg {
+  color: light-dark(#991b1b, #f87171);
+}
+.ansi-bright-red-fg {
+  color: light-dark(#b91c1c, currentcolor);
+}
+.ansi-green-fg {
+  color: light-dark(#166534, #4ade80);
+}
+.ansi-bright-green-fg {
+  color: light-dark(#15803d, currentcolor);
+}
+.ansi-yellow-fg {
+  color: light-dark(#a16207, #fde047);
+}
+.ansi-bright-yellow-fg {
+  color: light-dark(#b45309, currentcolor);
+}
+.ansi-blue-fg {
+  color: light-dark(#1e40af, #60a5fa);
+}
+.ansi-bright-blue-fg {
+  color: light-dark(#1d4ed8, currentcolor);
+}
+.ansi-magenta-fg {
+  color: light-dark(#86198f, #e879f9);
+}
+.ansi-bright-magenta-fg {
+  color: light-dark(#a21caf, currentcolor);
+}
+.ansi-cyan-fg {
+  color: light-dark(#155e75, #67e8f9);
+}
+.ansi-bright-cyan-fg {
+  color: light-dark(#0e7490, currentcolor);
+}
+.ansi-white-bg,
+.ansi-bright-white-bg {
+  background-color: light-dark(#e5e7eb, transparent);
+}
+.ansi-black-bg {
+  background-color: light-dark(transparent, #374151);
+}