@aryasaatvik/motel 0.3.0

package/src/ui/AiChatView.tsx

@@ -0,0 +1,308 @@
+import { RGBA, TextAttributes } from "@opentui/core"
+import { useLayoutEffect, useMemo, useState } from "react"
+import { isAiSpan, type TraceSpanItem } from "../domain.ts"
+import {
+	buildChatListRows,
+	chunkDetailTitle,
+	renderChunkDetailLines,
+	type Chunk,
+	type ChatListRow,
+	type Role,
+} from "./aiChatModel.ts"
+import { formatDuration, truncateText } from "./format.ts"
+import { AlignedHeaderLine, BlankRow, Divider, PlainLine, TextLine } from "./primitives.tsx"
+import type { AiCallDetailState } from "./aiState.ts"
+import { colors, SEPARATOR } from "./theme.ts"
+
+export const AI_CHAT_HEADER_ROWS = 4
+
+const roleColor = (role: Role): string => {
+	switch (role) {
+		case "user": return colors.accent
+		case "assistant": return colors.text
+		case "system": return colors.muted
+		case "tool": return colors.passing
+		case "response": return colors.accent
+		default: return colors.muted
+	}
+}
+
+const rowPrefix = (chunk: Chunk | null): string => {
+	if (!chunk) return "  "
+	switch (chunk.kind) {
+		case "tool-call": return "→ "
+		case "tool-result": return "← "
+		case "reasoning": return "• "
+		case "response": return "↳ "
+		default: return ""
+	}
+}
+
+const rowTextColor = (chunk: Chunk | null, role: Role, selected: boolean): string => {
+	if (selected) return colors.selectedText
+	if (!chunk) return roleColor(role)
+	if (chunk.kind === "tool-call") return colors.count
+	if (chunk.kind === "tool-result") return colors.passing
+	if (chunk.kind === "reasoning") return colors.muted
+	if (chunk.kind === "system") return colors.muted
+	return colors.text
+}
+
+const splitToolRowText = (text: string): { readonly head: string; readonly tail: string | null } => {
+	const match = text.match(/\s{2,}/)
+	const sep = match?.index ?? -1
+	if (sep < 0) return { head: text, tail: null }
+	return {
+		head: text.slice(0, sep),
+		tail: text.slice(sep + match![0].length),
+	}
+}
+
+const clamp = (n: number, min: number, max: number) => Math.max(min, Math.min(max, n))
+
+const chunkRows = (rows: readonly ChatListRow[]) => rows.filter((row) => row.kind === "chunk")
+
+interface MouseScrollEvent {
+	readonly scroll?: {
+		readonly direction: string
+		readonly delta: number
+	}
+	readonly stopPropagation?: () => void
+}
+
+const scrollDelta = (event: MouseScrollEvent): number => {
+	const info = event.scroll
+	if (!info) return 0
+	const magnitude = Math.max(1, Math.round(info.delta))
+	if (info.direction === "up") return -magnitude
+	if (info.direction === "down") return magnitude
+	return 0
+}
+
+const ChatDetailModal = ({
+	chunk,
+	scrollOffset,
+	onScrollOffset,
+	paneWidth,
+	paneHeight,
+	onClose,
+}: {
+	readonly chunk: Chunk
+	readonly scrollOffset: number
+	readonly onScrollOffset: (updater: (current: number) => number) => void
+	readonly paneWidth: number
+	readonly paneHeight: number
+	readonly onClose: () => void
+}) => {
+	const modalWidth = Math.min(Math.max(56, Math.floor(paneWidth * 0.8)), paneWidth - 4)
+	const modalHeight = Math.min(Math.max(12, Math.floor(paneHeight * 0.75)), paneHeight - 2)
+	const left = Math.max(2, Math.floor((paneWidth - modalWidth) / 2))
+	const top = Math.max(1, Math.floor((paneHeight - modalHeight) / 2))
+	const innerWidth = Math.max(16, modalWidth - 4)
+	const bodyLines = Math.max(4, modalHeight - 4)
+	const lines = renderChunkDetailLines(chunk, innerWidth)
+	const maxOffset = Math.max(0, lines.length - bodyLines)
+	const offset = clamp(scrollOffset, 0, maxOffset)
+	const visible = lines.slice(offset, offset + bodyLines)
+	const meta = chunk.headerMeta ?? `${lines.length} lines`
+	const handleWheel = (event: MouseScrollEvent) => {
+		const delta = scrollDelta(event)
+		if (delta === 0) return
+		onScrollOffset((current) => clamp(current + delta, 0, maxOffset))
+		event.stopPropagation?.()
+	}
+
+	return (
+		<box position="absolute" zIndex={3500} left={0} top={0} width={paneWidth} height={paneHeight} backgroundColor={RGBA.fromInts(0, 0, 0, 110)} onMouseUp={onClose}>
+			<box position="absolute" left={left} top={top} width={modalWidth} height={modalHeight} flexDirection="column" backgroundColor={RGBA.fromHex(colors.screenBg)} onMouseScroll={handleWheel}>
+				<box paddingLeft={1} paddingRight={1}>
+					<AlignedHeaderLine left={chunkDetailTitle(chunk)} right={`${meta} ${SEPARATOR} esc close`} width={modalWidth - 2} rightFg={colors.count} />
+				</box>
+				<Divider width={modalWidth} />
+				<box flexDirection="column" paddingLeft={2} paddingRight={2}>
+					{visible.map((line, i) => (
+						<PlainLine key={`detail-${i + offset}`} text={line} fg={colors.text} />
+					))}
+					{visible.length < bodyLines ? Array.from({ length: bodyLines - visible.length }, (_, i) => <BlankRow key={`detail-pad-${i}`} />) : null}
+				</box>
+			</box>
+		</box>
+	)
+}
+
+export const AiChatView = ({
+	span,
+	detailState,
+	chunks,
+	selectedChunkId,
+	onSelectChunk,
+	detailChunkId,
+	onOpenDetail,
+	onCloseDetail,
+	detailScrollOffset,
+	onSetDetailScrollOffset,
+	contentWidth,
+	bodyLines,
+	paneWidth,
+}: {
+	readonly span: TraceSpanItem | null
+	readonly detailState: AiCallDetailState
+	readonly chunks: readonly Chunk[]
+	readonly selectedChunkId: string | null
+	readonly onSelectChunk: (chunkId: string) => void
+	readonly detailChunkId: string | null
+	readonly onOpenDetail: (chunkId: string) => void
+	readonly onCloseDetail: () => void
+	readonly detailScrollOffset: number
+	readonly onSetDetailScrollOffset: (updater: (current: number) => number) => void
+	readonly contentWidth: number
+	readonly bodyLines: number
+	readonly paneWidth: number
+}) => {
+	const rows = useMemo(() => buildChatListRows(chunks), [chunks])
+	const selectable = useMemo(() => chunkRows(rows), [rows])
+	const chunkById = useMemo(() => new Map(chunks.map((chunk) => [chunk.id, chunk] as const)), [chunks])
+	const selectedOrdinal = useMemo(
+		() => selectedChunkId ? selectable.findIndex((row) => row.chunkId === selectedChunkId) : -1,
+		[selectable, selectedChunkId],
+	)
+	const [scrollOffset, setScrollOffset] = useState(0)
+
+	const detailChunk = useMemo(
+		() => detailChunkId ? chunkById.get(detailChunkId) ?? null : null,
+		[chunkById, detailChunkId],
+	)
+
+	const selectedRowIndex = useMemo(
+		() => selectedChunkId ? rows.findIndex((row) => row.kind === "chunk" && row.chunkId === selectedChunkId) : -1,
+		[rows, selectedChunkId],
+	)
+
+	useLayoutEffect(() => {
+		const maxOffset = Math.max(0, rows.length - bodyLines)
+		if (selectedRowIndex < 0) {
+			setScrollOffset((current) => clamp(current, 0, maxOffset))
+			return
+		}
+		setScrollOffset((current) => {
+			let next = clamp(current, 0, maxOffset)
+			if (selectedRowIndex < next) next = selectedRowIndex
+			else if (selectedRowIndex >= next + bodyLines) next = selectedRowIndex - bodyLines + 1
+			return clamp(next, 0, maxOffset)
+		})
+	}, [rows.length, bodyLines, selectedRowIndex])
+
+	if (!span || !isAiSpan(span.tags)) {
+		return (
+			<box flexDirection="column" width={paneWidth} height={bodyLines + AI_CHAT_HEADER_ROWS} overflow="hidden">
+				<box paddingLeft={1} paddingRight={1}>
+					<AlignedHeaderLine left="AI CHAT" right="not an ai span" width={contentWidth} rightFg={colors.muted} />
+				</box>
+			</box>
+		)
+	}
+
+	const detail = detailState.data
+	const model = detail?.model ?? span.tags["ai.model.id"] ?? "unknown model"
+	const provider = detail?.provider ?? span.tags["ai.model.provider"] ?? null
+	const operation = detail?.operation ?? span.operationName
+	const finishReason = detail?.finishReason ?? null
+	const usage = detail?.usage ?? null
+	const durationLabel = formatDuration(detail?.durationMs ?? span.durationMs)
+	const maxOffset = Math.max(0, rows.length - bodyLines)
+	const offset = clamp(scrollOffset, 0, maxOffset)
+	const visible = rows.slice(offset, offset + bodyLines)
+	const headerRight = `${operation} ${SEPARATOR} ${durationLabel} ${SEPARATOR} ${selectable.length > 0 ? `${Math.max(1, selectedOrdinal + 1)}/${selectable.length}` : "0/0"}`
+	const handleListWheel = (event: MouseScrollEvent) => {
+		if (detailChunk) return
+		const delta = scrollDelta(event)
+		if (delta === 0) return
+		setScrollOffset((current) => clamp(current + delta, 0, maxOffset))
+		event.stopPropagation?.()
+	}
+
+	return (
+		<box flexDirection="column" width={paneWidth} height={bodyLines + AI_CHAT_HEADER_ROWS} overflow="hidden">
+			<box paddingLeft={1} paddingRight={1}>
+				<AlignedHeaderLine left="AI CHAT" right={headerRight} width={contentWidth} rightFg={colors.count} />
+			</box>
+			<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.accent} attributes={TextAttributes.BOLD}>{"✦ "}</span>
+					<span fg={colors.text}>{model}</span>
+					{provider ? <><span fg={colors.separator}>{SEPARATOR}</span><span fg={colors.muted}>{provider}</span></> : null}
+					{finishReason ? <><span fg={colors.separator}>{SEPARATOR}</span><span fg={colors.muted}>{`finish=${finishReason}`}</span></> : null}
+				</TextLine>
+				<TextLine>
+					{usage ? (
+						<>
+							<span fg={colors.muted}>{"tokens "}</span>
+							<span fg={colors.count}>{usage.inputTokens != null ? `in=${usage.inputTokens}` : ""}</span>
+							<span fg={colors.muted}>{usage.cachedInputTokens != null ? ` cached=${usage.cachedInputTokens}` : ""}</span>
+							<span fg={colors.count}>{usage.outputTokens != null ? ` out=${usage.outputTokens}` : ""}</span>
+							<span fg={colors.muted}>{usage.reasoningTokens != null ? ` reason=${usage.reasoningTokens}` : ""}</span>
+						</>
+					) : (
+						<span fg={colors.muted}>{detail?.sessionId ? `session ${detail.sessionId}` : "no usage reported"}</span>
+					)}
+				</TextLine>
+			</box>
+			<Divider width={paneWidth} />
+			<box flexDirection="column" paddingLeft={1} paddingRight={1} onMouseScroll={handleListWheel}>
+				{detailState.status === "loading" && !detail ? (
+					<PlainLine text="loading chat transcript…" fg={colors.muted} />
+				) : detailState.status === "error" ? (
+					<PlainLine text={detailState.error ?? "failed to load chat detail"} fg={colors.error} />
+				) : rows.length === 0 ? (
+					<PlainLine text="no chat content parsed from this span" fg={colors.muted} />
+				) : (
+					visible.map((row, i) => {
+						if (row.kind === "separator") {
+							return <BlankRow key={`row-${offset + i}`} />
+						}
+						if (row.kind === "role-divider") {
+							return (
+								<TextLine key={`row-${offset + i}`}>
+									<span fg={colors.separator}>{" "}</span>
+									<span fg={roleColor(row.role)} attributes={TextAttributes.BOLD}>{row.text}</span>
+								</TextLine>
+							)
+						}
+						const chunk = row.chunkId ? chunkById.get(row.chunkId) ?? null : null
+						const isSelected = row.chunkId === selectedChunkId
+						const prefix = rowPrefix(chunk)
+						const meta = row.meta ?? ""
+						const textWidth = Math.max(8, contentWidth - prefix.length - meta.length - 4)
+						const display = truncateText(row.text, textWidth)
+						const gap = Math.max(1, contentWidth - prefix.length - display.length - meta.length - 1)
+						const toolLike = chunk?.kind === "tool-call" || chunk?.kind === "tool-result"
+						const { head, tail } = toolLike ? splitToolRowText(display) : { head: display, tail: null }
+						const headColor = rowTextColor(chunk, row.role, isSelected)
+						const tailColor = isSelected ? colors.muted : colors.separator
+						return (
+							<box key={`row-${offset + i}`} height={1} onMouseDown={() => { if (row.chunkId) onSelectChunk(row.chunkId) }}>
+								<TextLine bg={isSelected ? colors.selectedBg : undefined}>
+									<span fg={isSelected ? roleColor(row.role) : colors.separator}>{isSelected ? "▎" : " "}</span>
+									<span fg={headColor} attributes={isSelected ? TextAttributes.BOLD : undefined}>{`${prefix}${head}`}</span>
+									{tail ? <span fg={tailColor}>{` ${tail}`}</span> : null}
+									{meta ? <><span fg={colors.muted}>{" ".repeat(gap)}</span><span fg={colors.muted}>{meta}</span></> : null}
+								</TextLine>
+							</box>
+						)
+					})
+				)}
+				{visible.length < bodyLines && rows.length > 0 ? Array.from({ length: bodyLines - visible.length }, (_, i) => <BlankRow key={`pad-${i}`} />) : null}
+			</box>
+			{detailChunk ? (
+				<ChatDetailModal
+					chunk={detailChunk}
+					scrollOffset={detailScrollOffset}
+					onScrollOffset={onSetDetailScrollOffset}
+					paneWidth={paneWidth}
+					paneHeight={bodyLines + AI_CHAT_HEADER_ROWS}
+					onClose={onCloseDetail}
+				/>
+			) : null}
+		</box>
+	)
+}

package/src/ui/AttrFilterModal.tsx

@@ -0,0 +1,120 @@
+import { RGBA, TextAttributes } from "@opentui/core"
+import { BlankRow, TextLine } from "./primitives.tsx"
+import { colors } from "./theme.ts"
+import { fitCell, truncateText } from "./format.ts"
+import type { AttrFacetState, AttrPickerMode } from "./atoms.ts"
+
+export interface AttrFilterModalProps {
+	readonly width: number
+	readonly height: number
+	readonly mode: Exclude<AttrPickerMode, "off">
+	readonly input: string
+	readonly selectedIndex: number
+	readonly selectedKey: string | null
+	readonly state: AttrFacetState
+	readonly onClose: () => void
+}
+
+// Filter + rank facet rows by the user's current input so typing is
+// responsive even on large key sets. Values list skips this — attribute
+// values are usually opaque ids that users paste in whole.
+export const filterFacets = (
+	rows: readonly { readonly value: string; readonly count: number }[],
+	input: string,
+): readonly { readonly value: string; readonly count: number }[] => {
+	const needle = input.trim().toLowerCase()
+	if (!needle) return rows
+	return rows.filter((row) => row.value.toLowerCase().includes(needle))
+}
+
+export const AttrFilterModal = ({
+	width,
+	height,
+	mode,
+	input,
+	selectedIndex,
+	selectedKey,
+	state,
+	onClose,
+}: AttrFilterModalProps) => {
+	const panelWidth = Math.min(92, Math.max(60, width - 10))
+	const left = Math.max(2, Math.floor((width - panelWidth) / 2))
+	const top = Math.max(1, Math.floor(height / 6))
+	const innerWidth = panelWidth - 4
+	const rows = filterFacets(state.data, input)
+	const clampedIndex = rows.length === 0 ? 0 : Math.max(0, Math.min(selectedIndex, rows.length - 1))
+	const visibleRowCount = Math.max(5, Math.min(18, height - top - 8))
+	const windowStart = Math.max(0, clampedIndex - Math.floor(visibleRowCount / 2))
+	const windowEnd = Math.min(rows.length, windowStart + visibleRowCount)
+	const windowed = rows.slice(windowStart, windowEnd)
+
+	const title = mode === "keys"
+		? "Filter traces by attribute key"
+		: `Filter · ${truncateText(selectedKey ?? "", innerWidth - 14)}`
+
+	const hint = mode === "keys"
+		? "type to narrow · ↑↓ move · enter select · esc cancel"
+		: "type to narrow · ↑↓ move · enter apply · backspace keys · esc cancel"
+
+	const countWidth = 7
+	const valueWidth = Math.max(10, innerWidth - countWidth - 1)
+
+	const renderRow = (row: { readonly value: string; readonly count: number }, isSelected: boolean) => {
+		const label = fitCell(row.value, valueWidth)
+		const count = String(row.count).padStart(countWidth - 1) + " "
+		if (isSelected) {
+			return (
+				<TextLine fg={colors.text} bg={colors.selectedBg}>
+					<span fg={colors.accent} attributes={TextAttributes.BOLD}>{label}</span>
+					<span fg={colors.muted}>{" "}</span>
+					<span fg={colors.muted}>{count}</span>
+				</TextLine>
+			)
+		}
+		return (
+			<TextLine>
+				<span fg={colors.text}>{label}</span>
+				<span fg={colors.muted}>{" "}</span>
+				<span fg={colors.count}>{count}</span>
+			</TextLine>
+		)
+	}
+
+	return (
+		<box position="absolute" zIndex={3000} left={0} top={0} width={width} height={height} backgroundColor={RGBA.fromInts(0, 0, 0, 110)} onMouseUp={onClose}>
+			<box position="absolute" left={left} top={top} width={panelWidth} flexDirection="column" backgroundColor={RGBA.fromInts(20, 20, 28, 255)}>
+				<box paddingLeft={2} paddingRight={2} paddingTop={1} paddingBottom={1} flexDirection="column">
+					<TextLine>
+						<span fg={colors.count} attributes={TextAttributes.BOLD}>{truncateText(title, innerWidth)}</span>
+					</TextLine>
+					<TextLine>
+						<span fg={colors.muted}>{truncateText(hint, innerWidth)}</span>
+					</TextLine>
+					<BlankRow />
+					<TextLine fg={colors.accent}>
+						<span fg={colors.muted}>{"\u203a "}</span>
+						<span fg={colors.text}>{truncateText(input, Math.max(1, innerWidth - 4))}</span>
+						<span fg={colors.accent}>{"\u2588"}</span>
+					</TextLine>
+					<BlankRow />
+					{state.status === "loading" && rows.length === 0 ? (
+						<TextLine><span fg={colors.muted}>loading…</span></TextLine>
+					) : state.error ? (
+						<TextLine><span fg={colors.error}>{truncateText(state.error, innerWidth)}</span></TextLine>
+					) : rows.length === 0 ? (
+						<TextLine><span fg={colors.muted}>no matches</span></TextLine>
+					) : (
+						windowed.map((row, i) => (
+							<box key={row.value} height={1}>
+								{renderRow(row, windowStart + i === clampedIndex)}
+							</box>
+						))
+					)}
+					{rows.length > windowEnd ? (
+						<TextLine><span fg={colors.muted}>{`+${rows.length - windowEnd} more…`}</span></TextLine>
+					) : null}
+				</box>
+			</box>
+		</box>
+	)
+}

package/src/ui/ServiceLogs.tsx

@@ -0,0 +1,115 @@
+import type { ScrollBoxRenderable } from "@opentui/core"
+import { useLayoutEffect, useRef } from "react"
+import type { LogItem } from "../domain.ts"
+import { fitCell, formatLogTimestamp, formatTimestamp, logHeadline, logSeverityColor, relevantLogAttributes, truncateText, wrapTextLines } from "./format.ts"
+import { Divider, PlainLine, TextLine } from "./primitives.tsx"
+import type { ServiceLogState } from "./atoms.ts"
+import { colors, SEPARATOR } from "./theme.ts"
+
+export const ServiceLogsView = ({
+	serviceName,
+	logsState,
+	selectedIndex,
+	onSelectLog,
+	contentWidth,
+	bodyLines,
+}: {
+	serviceName: string | null
+	logsState: ServiceLogState
+	selectedIndex: number
+	onSelectLog: (index: number) => void
+	contentWidth: number
+	bodyLines: number
+}) => {
+	const timeWidth = 8
+	const levelWidth = 5
+	const traceWidth = 8
+	const messageWidth = Math.max(16, contentWidth - timeWidth - levelWidth - traceWidth - 3)
+
+	// Hooks must be called unconditionally — keep them above the early
+	// returns. The data-dependent values below all tolerate a 0-length
+	// data array, so this stays correct in the empty/loading/error cases.
+	const scrollRef = useRef<ScrollBoxRenderable | null>(null)
+	const safeSelectedIndex = Math.max(0, Math.min(selectedIndex, logsState.data.length - 1))
+	useLayoutEffect(() => {
+		scrollRef.current?.scrollChildIntoView(`svc-log-${safeSelectedIndex}`)
+	}, [safeSelectedIndex])
+
+	if (logsState.status === "loading" && logsState.data.length === 0) {
+		return <PlainLine text="Loading recent service logs..." fg={colors.count} />
+	}
+
+	if (logsState.status === "error") {
+		return <PlainLine text={logsState.error ?? "Could not load logs."} fg={colors.error} />
+	}
+
+	if (logsState.data.length === 0) {
+		return <PlainLine text={`No logs captured yet for service ${serviceName ?? "unknown"}.`} fg={colors.muted} />
+	}
+
+	const selectedLog = logsState.data[safeSelectedIndex] ?? null
+	const detailWidth = Math.max(16, contentWidth - 2)
+	const detailBodyLines = selectedLog ? wrapTextLines(selectedLog.body, detailWidth, 6) : []
+	const detailAttributeLines = selectedLog ? relevantLogAttributes(selectedLog).slice(0, 3) : []
+	const detailHeight = selectedLog ? 3 + detailBodyLines.length + detailAttributeLines.length : 0
+	const listHeight = Math.max(4, bodyLines - detailHeight - 1)
+
+	return (
+		<box flexDirection="column">
+			{selectedLog ? (
+				<>
+					<TextLine>
+						<span fg={logSeverityColor(selectedLog.severityText)}>{selectedLog.severityText.toLowerCase()}</span>
+						<span fg={colors.separator}>{SEPARATOR}</span>
+						<span fg={colors.muted}>{formatLogTimestamp(selectedLog.timestamp)}</span>
+						<span fg={colors.separator}>{SEPARATOR}</span>
+						<span fg={colors.count}>{selectedLog.traceId ? selectedLog.traceId.slice(-8) : "no-trace"}</span>
+					</TextLine>
+					<TextLine>
+						<span fg={colors.defaultService}>{selectedLog.scopeName ?? selectedLog.serviceName}</span>
+						{selectedLog.spanId ? <><span fg={colors.separator}>{SEPARATOR}</span><span fg={colors.muted}>{selectedLog.spanId.slice(-8)}</span></> : null}
+					</TextLine>
+					{detailBodyLines.map((line, index) => (
+						<PlainLine key={`log-detail-${selectedLog.id}-${index}`} text={line} fg={colors.text} />
+					))}
+					{detailAttributeLines.map(([key, value]) => (
+						<TextLine key={`log-attr-${selectedLog.id}-${key}`}>
+							<span fg={colors.count}>{truncateText(key, 18).padEnd(18, " ")}</span>
+							<span fg={colors.muted}> </span>
+							<span fg={colors.muted}>{truncateText(value, Math.max(12, detailWidth - 20))}</span>
+						</TextLine>
+					))}
+					<Divider width={contentWidth} />
+				</>
+			) : null}
+			<TextLine fg={colors.muted}>
+				<span>{fitCell("time", timeWidth)}</span>
+				<span> </span>
+				<span>{fitCell("lvl", levelWidth)}</span>
+				<span> </span>
+				<span>{fitCell("trace", traceWidth)}</span>
+				<span> </span>
+				<span>{fitCell("message", messageWidth)}</span>
+			</TextLine>
+			<scrollbox ref={scrollRef} height={listHeight} flexGrow={0}>
+				{logsState.data.map((log, index) => {
+					const selected = index === safeSelectedIndex
+					const trace = log.traceId ? log.traceId.slice(-8) : "-"
+					return (
+						<box id={`svc-log-${index}`} key={log.id} height={1} onMouseDown={() => onSelectLog(index)}>
+							<TextLine fg={selected ? colors.selectedText : colors.text} bg={selected ? colors.selectedBg : undefined}>
+								<span fg={colors.muted}>{fitCell(formatTimestamp(log.timestamp), timeWidth)}</span>
+								<span> </span>
+								<span fg={logSeverityColor(log.severityText)}>{fitCell(log.severityText.toLowerCase(), levelWidth)}</span>
+								<span> </span>
+								<span fg={colors.count}>{fitCell(trace, traceWidth)}</span>
+								<span> </span>
+								<span fg={selected ? colors.selectedText : colors.text}>{fitCell(logHeadline(log.body), messageWidth)}</span>
+							</TextLine>
+						</box>
+					)
+				})}
+			</scrollbox>
+		</box>
+	)
+}