@kitlangton/motel 0.1.0

package/src/ui/app/useAppLayout.ts

@@ -0,0 +1,79 @@
+import { useMemo } from "react"
+import { fitCell } from "../format.ts"
+import type { DetailView } from "../state.ts"
+
+interface UseAppLayoutInput {
+	readonly width: number | undefined
+	readonly height: number | undefined
+	readonly notice: string | null
+	readonly detailView: DetailView
+	readonly selectedSpanIndex: number | null
+}
+
+export const useAppLayout = ({ width, height, notice, detailView, selectedSpanIndex }: UseAppLayoutInput) => useMemo(() => {
+	const contentWidth = Math.max(60, width ?? 100)
+	const isWideLayout = (width ?? 100) >= 100
+	const splitGap = 1
+	const sectionPadding = 1
+	const traceListHeaderHeight = 1
+	const footerNotice = notice ? fitCell(notice, Math.max(24, contentWidth - 2)) : null
+	const footerHeight = 1
+	const footerFrameHeight = footerHeight > 0 ? 1 + footerHeight : 0
+	const frameHeight = 1 + 1 + footerFrameHeight
+	const availableContentHeight = Math.max(10, (height ?? 24) - frameHeight)
+	const viewLevelForLayout: 0 | 1 | 2 =
+		detailView === "span-detail" ? 2 :
+		selectedSpanIndex !== null ? 1 :
+		0
+	const splitRatio = viewLevelForLayout === 2 ? 0.5 : 0.4
+	const leftPaneWidth = isWideLayout ? Math.max(40, Math.floor((contentWidth - splitGap) * splitRatio)) : contentWidth
+	const rightPaneWidth = isWideLayout ? Math.max(28, contentWidth - leftPaneWidth - splitGap) : contentWidth
+	const leftContentWidth = isWideLayout ? Math.max(24, leftPaneWidth - 3) : Math.max(24, contentWidth - sectionPadding * 2)
+	const rightContentWidth = isWideLayout ? Math.max(24, rightPaneWidth - sectionPadding * 2) : Math.max(24, contentWidth - sectionPadding * 2)
+	const headerFooterWidth = Math.max(24, contentWidth - 2)
+	const wideBodyHeight = availableContentHeight
+	// TraceDetailsPane + SpanDetailPane both reserve 4 rows for their header
+	// (title, op line, meta line, divider), so `bodyLines = paneHeight - 4`
+	// makes the pane fill its parent exactly. Using `-5` here left a visible
+	// blank row between the last waterfall span and the bottom divider.
+	const wideBodyLines = Math.max(8, wideBodyHeight - 4)
+	const narrowSplitHeight = Math.max(10, availableContentHeight - 1)
+	const narrowListHeight = Math.max(4, Math.min(10, Math.floor(narrowSplitHeight * 0.4), narrowSplitHeight - 9))
+	const narrowDetailHeight = narrowSplitHeight - narrowListHeight
+	const narrowBodyLines = Math.max(2, narrowDetailHeight - 4)
+	const narrowFullBodyLines = Math.max(8, availableContentHeight - 6)
+	const wideTraceListBodyHeight = Math.max(1, wideBodyHeight - traceListHeaderHeight)
+	const narrowTraceListBodyHeight = Math.max(1, narrowListHeight - traceListHeaderHeight)
+	const traceViewportRows = isWideLayout ? wideTraceListBodyHeight : narrowTraceListBodyHeight
+	const tracePageSize = Math.max(1, traceViewportRows - 1)
+	const spanViewportRows = Math.max(1, (isWideLayout ? wideBodyLines : narrowBodyLines) - 1)
+	const spanPageSize = Math.max(1, spanViewportRows - 1)
+
+	return {
+		contentWidth,
+		isWideLayout,
+		splitGap,
+		sectionPadding,
+		availableContentHeight,
+		viewLevel: viewLevelForLayout,
+		footerNotice,
+		footerHeight,
+		leftPaneWidth,
+		rightPaneWidth,
+		leftContentWidth,
+		rightContentWidth,
+		headerFooterWidth,
+		wideBodyHeight,
+		wideBodyLines,
+		narrowListHeight,
+		narrowBodyLines,
+		narrowFullBodyLines,
+		wideTraceListBodyHeight,
+		narrowTraceListBodyHeight,
+		traceViewportRows,
+		tracePageSize,
+		spanPageSize,
+	} as const
+}, [detailView, height, notice, selectedSpanIndex, width])
+
+export type AppLayout = ReturnType<typeof useAppLayout>

package/src/ui/app/useTraceScreenData.ts

@@ -0,0 +1,411 @@
+import { useAtom } from "@effect/atom-react"
+import { useCallback, useEffect, useMemo, useRef } from "react"
+import { config } from "../../config.js"
+import type { LogItem, TraceItem } from "../../domain.ts"
+import {
+	autoRefreshAtom,
+	collapsedSpanIdsAtom,
+	detailViewAtom,
+	filterModeAtom,
+	filterTextAtom,
+	initialLogState,
+	initialServiceLogState,
+	initialTraceDetailState,
+	loadRecentTraceSummaries,
+	loadServiceLogs,
+	loadTraceDetail,
+	loadTraceLogs,
+	loadTraceServices,
+	logStateAtom,
+	persistSelectedService,
+	refreshNonceAtom,
+	selectedServiceLogIndexAtom,
+	selectedSpanIndexAtom,
+	selectedTraceIndexAtom,
+	selectedTraceServiceAtom,
+	serviceLogStateAtom,
+	showHelpAtom,
+	traceDetailStateAtom,
+	traceSortAtom,
+	traceStateAtom,
+} from "../state.ts"
+import { getVisibleSpans } from "../Waterfall.tsx"
+
+export const useTraceScreenData = () => {
+	const [traceState, setTraceState] = useAtom(traceStateAtom)
+	const [traceDetailState, setTraceDetailState] = useAtom(traceDetailStateAtom)
+	const [logState, setLogState] = useAtom(logStateAtom)
+	const [serviceLogState, setServiceLogState] = useAtom(serviceLogStateAtom)
+	const [selectedServiceLogIndex, setSelectedServiceLogIndex] = useAtom(selectedServiceLogIndexAtom)
+	const [selectedTraceIndex, setSelectedTraceIndex] = useAtom(selectedTraceIndexAtom)
+	const [selectedTraceService, setSelectedTraceService] = useAtom(selectedTraceServiceAtom)
+	const [refreshNonce, setRefreshNonce] = useAtom(refreshNonceAtom)
+	const [selectedSpanIndex, setSelectedSpanIndex] = useAtom(selectedSpanIndexAtom)
+	const [detailView, setDetailView] = useAtom(detailViewAtom)
+	const [showHelp, setShowHelp] = useAtom(showHelpAtom)
+	const [collapsedSpanIds, setCollapsedSpanIds] = useAtom(collapsedSpanIdsAtom)
+	const [autoRefresh] = useAtom(autoRefreshAtom)
+	const [filterMode] = useAtom(filterModeAtom)
+	const [filterText] = useAtom(filterTextAtom)
+	const [traceSort] = useAtom(traceSortAtom)
+
+	const selectedTraceRef = useRef<string | null>(null)
+	const cacheEpochRef = useRef(0)
+	const traceDetailCacheRef = useRef(new Map<string, { data: TraceItem | null; fetchedAt: Date }>())
+	const traceLogCacheRef = useRef(new Map<string, { data: readonly LogItem[]; fetchedAt: Date }>())
+	const serviceLogCacheRef = useRef(new Map<string, { data: readonly LogItem[]; fetchedAt: Date }>())
+	const traceDetailInflightRef = useRef(new Map<string, Promise<{ readonly error: string | null }>>())
+	const traceLogInflightRef = useRef(new Map<string, Promise<{ readonly error: string | null }>>())
+
+	useEffect(() => {
+		if (selectedTraceService) persistSelectedService(selectedTraceService)
+	}, [selectedTraceService])
+
+	useEffect(() => {
+		if (!autoRefresh) return
+		const id = setInterval(() => setRefreshNonce((n) => n + 1), 5000)
+		return () => clearInterval(id)
+	}, [autoRefresh, setRefreshNonce])
+
+	useEffect(() => {
+		cacheEpochRef.current += 1
+		traceDetailCacheRef.current.clear()
+		traceLogCacheRef.current.clear()
+		serviceLogCacheRef.current.clear()
+		traceDetailInflightRef.current.clear()
+		traceLogInflightRef.current.clear()
+	}, [refreshNonce])
+
+	useEffect(() => {
+		let cancelled = false
+
+		const load = async () => {
+			setTraceState((current) => ({ ...current, status: current.fetchedAt === null ? "loading" : "ready", error: null }))
+
+			try {
+				const services = await loadTraceServices()
+				if (cancelled) return
+
+				const effectiveService = services.includes(selectedTraceService ?? "")
+					? selectedTraceService
+					: selectedTraceService ?? services[0] ?? config.otel.serviceName
+
+				if (effectiveService !== selectedTraceService) {
+					setSelectedTraceService(effectiveService)
+				}
+
+				const traces = effectiveService ? await loadRecentTraceSummaries(effectiveService) : []
+				if (cancelled) return
+
+				const prevTraceId = selectedTraceRef.current
+				setTraceState({ status: "ready", services, data: traces, error: null, fetchedAt: new Date() })
+				if (prevTraceId) {
+					const newIndex = traces.findIndex((t) => t.traceId === prevTraceId)
+					if (newIndex >= 0) setSelectedTraceIndex(newIndex)
+				}
+			} catch (error) {
+				if (cancelled) return
+				setTraceState((current) => ({
+					...current,
+					status: "error",
+					error: error instanceof Error ? error.message : String(error),
+				}))
+			}
+		}
+
+		void load()
+		return () => {
+			cancelled = true
+		}
+	}, [refreshNonce, selectedTraceService, setSelectedTraceIndex, setSelectedTraceService, setTraceState])
+
+	useEffect(() => {
+		setSelectedTraceIndex((current) => {
+			if (traceState.data.length === 0) return 0
+			return Math.max(0, Math.min(current, traceState.data.length - 1))
+		})
+	}, [traceState.data.length, setSelectedTraceIndex])
+
+	const selectedTraceSummary = traceState.data[selectedTraceIndex] ?? null
+	const selectedTraceId = selectedTraceSummary?.traceId ?? null
+	const selectedTrace = traceDetailState.traceId === selectedTraceId ? traceDetailState.data : null
+	selectedTraceRef.current = selectedTraceId
+
+	const warmTraceDetail = useCallback((traceId: string, hydrateSelection: boolean) => {
+		const cached = traceDetailCacheRef.current.get(traceId)
+		if (cached) {
+			if (hydrateSelection && selectedTraceRef.current === traceId) {
+				setTraceDetailState({ status: "ready", traceId, data: cached.data, error: null, fetchedAt: cached.fetchedAt })
+			}
+			return Promise.resolve({ error: null })
+		}
+
+		const existing = traceDetailInflightRef.current.get(traceId)
+		if (existing) {
+			if (hydrateSelection) {
+				void existing.then(({ error }) => {
+					if (selectedTraceRef.current !== traceId) return
+					const ready = traceDetailCacheRef.current.get(traceId)
+					if (ready) {
+						setTraceDetailState({ status: "ready", traceId, data: ready.data, error: null, fetchedAt: ready.fetchedAt })
+						return
+					}
+					if (error) {
+						setTraceDetailState({ status: "error", traceId, data: null, error, fetchedAt: null })
+					}
+				})
+			}
+			return existing
+		}
+
+		const epoch = cacheEpochRef.current
+		const request = loadTraceDetail(traceId)
+			.then((trace) => {
+				if (cacheEpochRef.current !== epoch) return { error: null }
+				const fetchedAt = new Date()
+				traceDetailCacheRef.current.set(traceId, { data: trace, fetchedAt })
+				if (hydrateSelection && selectedTraceRef.current === traceId) {
+					setTraceDetailState({ status: "ready", traceId, data: trace, error: null, fetchedAt })
+				}
+				return { error: null }
+			})
+			.catch((error) => {
+				const message = error instanceof Error ? error.message : String(error)
+				if (cacheEpochRef.current === epoch && hydrateSelection && selectedTraceRef.current === traceId) {
+					setTraceDetailState({ status: "error", traceId, data: null, error: message, fetchedAt: null })
+				}
+				return { error: message }
+			})
+			.finally(() => {
+				traceDetailInflightRef.current.delete(traceId)
+			})
+
+		traceDetailInflightRef.current.set(traceId, request)
+		return request
+	}, [setTraceDetailState])
+
+	const warmTraceLogs = useCallback((traceId: string, hydrateSelection: boolean) => {
+		const cached = traceLogCacheRef.current.get(traceId)
+		if (cached) {
+			if (hydrateSelection && selectedTraceRef.current === traceId) {
+				setLogState({ status: "ready", traceId, data: cached.data, error: null, fetchedAt: cached.fetchedAt })
+			}
+			return Promise.resolve({ error: null })
+		}
+
+		const existing = traceLogInflightRef.current.get(traceId)
+		if (existing) {
+			if (hydrateSelection) {
+				void existing.then(({ error }) => {
+					if (selectedTraceRef.current !== traceId) return
+					const ready = traceLogCacheRef.current.get(traceId)
+					if (ready) {
+						setLogState({ status: "ready", traceId, data: ready.data, error: null, fetchedAt: ready.fetchedAt })
+						return
+					}
+					if (error) {
+						setLogState({ status: "error", traceId, data: [], error, fetchedAt: null })
+					}
+				})
+			}
+			return existing
+		}
+
+		const epoch = cacheEpochRef.current
+		const request = loadTraceLogs(traceId)
+			.then((logs) => {
+				if (cacheEpochRef.current !== epoch) return { error: null }
+				const fetchedAt = new Date()
+				traceLogCacheRef.current.set(traceId, { data: logs, fetchedAt })
+				if (hydrateSelection && selectedTraceRef.current === traceId) {
+					setLogState({ status: "ready", traceId, data: logs, error: null, fetchedAt })
+				}
+				return { error: null }
+			})
+			.catch((error) => {
+				const message = error instanceof Error ? error.message : String(error)
+				if (cacheEpochRef.current === epoch && hydrateSelection && selectedTraceRef.current === traceId) {
+					setLogState({ status: "error", traceId, data: [], error: message, fetchedAt: null })
+				}
+				return { error: message }
+			})
+			.finally(() => {
+				traceLogInflightRef.current.delete(traceId)
+			})
+
+		traceLogInflightRef.current.set(traceId, request)
+		return request
+	}, [setLogState])
+
+	useEffect(() => {
+		if (!selectedTraceId) {
+			setTraceDetailState(initialTraceDetailState)
+			return
+		}
+
+		const cached = traceDetailCacheRef.current.get(selectedTraceId)
+		if (cached) {
+			setTraceDetailState({ status: "ready", traceId: selectedTraceId, data: cached.data, error: null, fetchedAt: cached.fetchedAt })
+			return
+		}
+
+		setTraceDetailState((current) => ({
+			status: current.traceId === selectedTraceId && current.fetchedAt !== null ? "ready" : "loading",
+			traceId: selectedTraceId,
+			data: current.traceId === selectedTraceId ? current.data : null,
+			error: null,
+			fetchedAt: current.traceId === selectedTraceId ? current.fetchedAt : null,
+		}))
+
+		void warmTraceDetail(selectedTraceId, true)
+	}, [refreshNonce, selectedTraceId, setTraceDetailState, warmTraceDetail])
+
+	useEffect(() => {
+		setCollapsedSpanIds(new Set())
+		setSelectedSpanIndex(null)
+	}, [selectedTraceId, setCollapsedSpanIds, setSelectedSpanIndex])
+
+	useEffect(() => {
+		if (selectedSpanIndex === null) return
+		if (!selectedTrace || selectedTrace.spans.length === 0) {
+			setSelectedSpanIndex(null)
+			setDetailView("waterfall")
+			return
+		}
+		const visibleCount = getVisibleSpans(selectedTrace.spans, collapsedSpanIds).length
+		if (selectedSpanIndex >= visibleCount) {
+			setSelectedSpanIndex(visibleCount - 1)
+		}
+	}, [selectedTrace, selectedSpanIndex, collapsedSpanIds, setDetailView, setSelectedSpanIndex])
+
+	useEffect(() => {
+		const traceId = selectedTraceId
+		if (!traceId) {
+			setLogState(initialLogState)
+			return
+		}
+
+		const cached = traceLogCacheRef.current.get(traceId)
+		if (cached) {
+			setLogState({ status: "ready", traceId, data: cached.data, error: null, fetchedAt: cached.fetchedAt })
+			return
+		}
+
+		setLogState((current) => ({
+			status: current.traceId === traceId && current.fetchedAt !== null ? "ready" : "loading",
+			traceId,
+			data: current.traceId === traceId ? current.data : [],
+			error: null,
+			fetchedAt: current.traceId === traceId ? current.fetchedAt : null,
+		}))
+
+		void warmTraceLogs(traceId, true)
+	}, [refreshNonce, selectedTraceId, setLogState, warmTraceLogs])
+
+	useEffect(() => {
+		if (detailView !== "service-logs") return
+		const serviceName = selectedTraceService
+		if (!serviceName) {
+			setServiceLogState(initialServiceLogState)
+			return
+		}
+
+		const cached = serviceLogCacheRef.current.get(serviceName)
+		if (cached) {
+			setServiceLogState({ status: "ready", serviceName, data: cached.data, error: null, fetchedAt: cached.fetchedAt })
+			return
+		}
+
+		let cancelled = false
+		setServiceLogState((current) => ({
+			status: current.serviceName === serviceName && current.fetchedAt !== null ? "ready" : "loading",
+			serviceName,
+			data: current.serviceName === serviceName ? current.data : [],
+			error: null,
+			fetchedAt: current.serviceName === serviceName ? current.fetchedAt : null,
+		}))
+
+		void (async () => {
+			try {
+				const logs = await loadServiceLogs(serviceName)
+				const fetchedAt = new Date()
+				serviceLogCacheRef.current.set(serviceName, { data: logs, fetchedAt })
+				if (cancelled) return
+				setServiceLogState({ status: "ready", serviceName, data: logs, error: null, fetchedAt })
+			} catch (error) {
+				if (cancelled) return
+				setServiceLogState({ status: "error", serviceName, data: [], error: error instanceof Error ? error.message : String(error), fetchedAt: null })
+			}
+		})()
+
+		return () => {
+			cancelled = true
+		}
+	}, [detailView, refreshNonce, selectedTraceService, setServiceLogState])
+
+	useEffect(() => {
+		setSelectedServiceLogIndex((current) => {
+			if (serviceLogState.data.length === 0) return 0
+			return Math.max(0, Math.min(current, serviceLogState.data.length - 1))
+		})
+	}, [serviceLogState.data.length, setSelectedServiceLogIndex])
+
+	const preFilterTraces = filterText
+		? traceState.data.filter((trace) => {
+			const needle = filterText.toLowerCase()
+			const errorOnly = needle.includes(":error")
+			const textNeedle = needle.replace(":error", "").trim()
+			if (errorOnly && trace.errorCount === 0) return false
+			if (textNeedle && !trace.rootOperationName.toLowerCase().includes(textNeedle)) return false
+			return true
+		})
+		: traceState.data
+
+	const filteredTraces = traceSort === "recent"
+		? preFilterTraces
+		: [...preFilterTraces].sort((a, b) => {
+			if (traceSort === "slowest") return b.durationMs - a.durationMs
+			if (traceSort === "errors") return b.errorCount - a.errorCount || b.startedAt.getTime() - a.startedAt.getTime()
+			return 0
+		})
+
+	useEffect(() => {
+		if (!selectedTraceId || filteredTraces.length === 0) return
+		const currentIndex = filteredTraces.findIndex((trace) => trace.traceId === selectedTraceId)
+		if (currentIndex < 0) return
+
+		for (const offset of [-1, 1] as const) {
+			const neighborId = filteredTraces[currentIndex + offset]?.traceId
+			if (!neighborId) continue
+			void warmTraceDetail(neighborId, false)
+			void warmTraceLogs(neighborId, false)
+		}
+	}, [filteredTraces, selectedTraceId, warmTraceDetail, warmTraceLogs])
+
+	return {
+		traceState,
+		traceDetailState,
+		logState,
+		serviceLogState,
+		selectedServiceLogIndex,
+		setSelectedServiceLogIndex,
+		selectedTraceIndex,
+		setSelectedTraceIndex,
+		selectedTraceService,
+		selectedSpanIndex,
+		setSelectedSpanIndex,
+		detailView,
+		setDetailView,
+		showHelp,
+		setShowHelp,
+		collapsedSpanIds,
+		autoRefresh,
+		filterMode,
+		filterText,
+		traceSort,
+		selectedTraceSummary,
+		selectedTrace,
+		selectedTraceId,
+		filteredTraces,
+	} as const
+}

package/src/ui/format.ts

@@ -0,0 +1,119 @@
+import { resolveOtelUrl } from "../config.ts"
+import type { LogItem } from "../domain.ts"
+import { colors } from "./theme.ts"
+
+export const truncateText = (text: string, width: number) => {
+	if (width <= 0) return ""
+	if (text.length <= width) return text
+	if (width <= 3) return text.slice(0, width)
+	return `${text.slice(0, width - 3)}...`
+}
+
+export const fitCell = (text: string, width: number, align: "left" | "right" = "left") => {
+	const trimmed = truncateText(text, width)
+	return align === "right" ? trimmed.padStart(width, " ") : trimmed.padEnd(width, " ")
+}
+
+export const formatShortDate = (date: Date) => date.toLocaleDateString("en-US", { month: "numeric", day: "numeric" })
+
+export const formatTimestamp = (date: Date) => date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }).toLowerCase()
+
+export const formatDuration = (durationMs: number) => {
+	const trimDecimal = (value: string) => value.replace(/\.0+$/, "").replace(/(\.\d*[1-9])0+$/, "$1")
+
+	if (durationMs >= 10_000) return `${Math.round(durationMs / 1000)}s`
+	if (durationMs >= 1000) return `${trimDecimal((durationMs / 1000).toFixed(1))}s`
+	if (durationMs >= 100) return `${Math.round(durationMs)}ms`
+	if (durationMs >= 10) return `${trimDecimal(durationMs.toFixed(1))}ms`
+	return `${trimDecimal(durationMs.toFixed(2))}ms`
+}
+
+export const lifecycleLabel = (value: { readonly isRunning: boolean }) => (value.isRunning ? "open" : "closed")
+
+export const relativeTime = (date: Date) => {
+	const seconds = Math.max(0, Math.floor((Date.now() - date.getTime()) / 1000))
+	if (seconds < 60) return `${seconds}s`
+	if (seconds < 3600) return `${Math.floor(seconds / 60)}m`
+	if (seconds < 86_400) return `${Math.floor(seconds / 3600)}h`
+	return `${Math.floor(seconds / 86_400)}d`
+}
+
+export const formatLogTimestamp = (timestamp: Date) => `${formatShortDate(timestamp)} ${formatTimestamp(timestamp)}`
+
+export const logHeadline = (body: string) => body.split(/\r?\n/, 1)[0]?.replace(/\s+/g, " ").trim() || ""
+
+export const wrapTextLines = (text: string, width: number, maxLines: number) => {
+	const normalized = text.replace(/\r/g, "")
+	const hardLines = normalized.split("\n")
+	const lines: string[] = []
+
+	for (const hardLine of hardLines) {
+		let remaining = hardLine
+		if (remaining.length === 0) {
+			lines.push("")
+			if (lines.length >= maxLines) return lines
+			continue
+		}
+		while (remaining.length > 0) {
+			lines.push(remaining.slice(0, width))
+			remaining = remaining.slice(width)
+			if (lines.length >= maxLines) {
+				if (remaining.length > 0) {
+					lines[maxLines - 1] = truncateText(lines[maxLines - 1]!, width)
+				}
+				return lines
+			}
+		}
+	}
+
+	return lines.slice(0, maxLines)
+}
+
+export const traceIndicator = (trace: { readonly errorCount: number }) => (trace.errorCount > 0 ? "!" : "\u00b7")
+export const traceIndicatorColor = (trace: { readonly errorCount: number }) => (trace.errorCount > 0 ? colors.error : colors.passing)
+export const traceRowId = (traceId: string) => `trace-row-${traceId}`
+
+export const logSeverityColor = (severity: string) => {
+	if (severity.startsWith("ERROR") || severity.startsWith("FATAL")) return colors.error
+	if (severity.startsWith("WARN")) return colors.warning
+	return colors.count
+}
+
+export const relevantLogAttributes = (log: LogItem) =>
+	Object.entries(log.attributes).filter(([key]) =>
+		![
+			"deployment.environment.name",
+			"service.instance.id",
+			"service.name",
+			"telemetry.sdk.name",
+			"telemetry.sdk.language",
+			"fiberId",
+			"spanId",
+			"traceId",
+		].includes(key),
+	)
+
+export const traceUiUrl = (traceId: string) => resolveOtelUrl(`/trace/${traceId}`)
+export const webUiUrl = () => resolveOtelUrl(`/traces`)
+
+export const copyToClipboard = async (value: string) => {
+	const proc = Bun.spawn({
+		cmd: ["pbcopy"],
+		stdin: "pipe",
+		stdout: "ignore",
+		stderr: "pipe",
+	})
+
+	if (!proc.stdin) {
+		throw new Error("Clipboard is not available")
+	}
+
+	proc.stdin.write(value)
+	proc.stdin.end()
+
+	const exitCode = await proc.exited
+	if (exitCode !== 0) {
+		const stderr = await new Response(proc.stderr).text()
+		throw new Error(stderr.trim() || "Could not copy OTEL server details")
+	}
+}