@aryasaatvik/motel 0.3.0

package/src/ui/SpanContentView.tsx

@@ -0,0 +1,184 @@
+import { TextAttributes } from "@opentui/core"
+import { useMemo } from "react"
+import { isAiSpan, type TraceSpanItem } from "../domain.ts"
+import { formatDuration, lifecycleLabel, wrapTextLines } from "./format.ts"
+import { AlignedHeaderLine, BlankRow, Divider, PlainLine, TextLine } from "./primitives.tsx"
+import { colors, SEPARATOR } from "./theme.ts"
+
+/** Header above the attribute list: "SPAN CONTENT" + status/duration strip. */
+export const SPAN_CONTENT_HEADER_ROWS = 4
+/** Width of the indent used for wrapped lines of a stacked value. */
+const VALUE_INDENT = "  "
+/** Width of the leading marker column that signals "selected" on the cursor row. */
+const CURSOR_WIDTH = 2
+
+/**
+ * Layout plan for a single attribute row. Each attribute renders as at least
+ * two rows (key line + one wrapped value line) plus however many extra wrap
+ * lines the value needs. We precompute row counts up front so the viewport
+ * (j/k scroll) can pick exactly `bodyLines` worth of content without
+ * measuring twice.
+ */
+interface AttrBlock {
+	readonly key: string
+	readonly valueLines: readonly string[]
+	readonly rowCount: number
+}
+
+/**
+ * Full-screen span content view (level 2). Triggered by pressing enter on
+ * a span in the waterfall. Renders every tag stacked key-above-value with
+ * no truncation and word-wrapping to fit the viewport. The selected
+ * attribute is highlighted (accent color on the key, leading `▶`) and
+ * `y` copies its value. Step 3 will branch AI-flagged spans into a
+ * specialised chat-transcript view; this is the generic fallback that
+ * also serves as the baseline for any non-AI span.
+ */
+export const SpanContentView = ({
+	span,
+	contentWidth,
+	bodyLines,
+	paneWidth,
+	selectedAttrIndex,
+}: {
+	readonly span: TraceSpanItem | null
+	readonly contentWidth: number
+	readonly bodyLines: number
+	readonly paneWidth: number
+	readonly selectedAttrIndex: number
+}) => {
+	const valueWrapWidth = Math.max(16, contentWidth - VALUE_INDENT.length - CURSOR_WIDTH)
+	const tags = span?.tags
+
+	// Block layout is memoised on tags identity — otherwise every j/k press
+	// would rewrap every attribute's value even though only the highlight
+	// moved. Hooks must be called unconditionally, so this lives above the
+	// `!span` early return and the memo handles the empty case itself.
+	const blocks = useMemo<readonly AttrBlock[]>(() => {
+		if (!tags) return []
+		return Object.entries(tags).map(([key, value]) => {
+			// Word-wrap with a generous line cap — the view is scrollable so
+			// we can afford to show the whole value rather than forcing an
+			// ellipsis. 200 lines covers enormous LLM prompts without
+			// blowing up the render tree.
+			const valueLines = wrapTextLines(value, valueWrapWidth, 200)
+			return { key, valueLines, rowCount: 1 + Math.max(1, valueLines.length) }
+		})
+	}, [tags, valueWrapWidth])
+
+	if (!span) {
+		return (
+			<box flexDirection="column" width={paneWidth} height={bodyLines + SPAN_CONTENT_HEADER_ROWS} overflow="hidden">
+				<box paddingLeft={1} paddingRight={1}>
+					<AlignedHeaderLine left="SPAN CONTENT" right="no span selected" width={contentWidth} rightFg={colors.muted} />
+				</box>
+				<BlankRow />
+				<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+					<PlainLine text="Select a span in the waterfall to view its full content." fg={colors.muted} />
+				</box>
+			</box>
+		)
+	}
+
+	const selected = Math.max(0, Math.min(selectedAttrIndex, blocks.length - 1))
+	const aiFlag = isAiSpan(span.tags)
+
+	// Viewport: pick the contiguous window of blocks that (a) fits inside
+	// bodyLines and (b) contains the selected block. We find the first
+	// start index whose accumulated row count from there through `selected`
+	// fits in the budget; that start is the window top. If the selected
+	// block alone is larger than bodyLines we still render it — oversize
+	// values just get cut at the pane edge, no ellipsis.
+	const fitsFrom = (start: number) => {
+		let rows = 0
+		for (let i = start; i <= selected; i++) {
+			rows += blocks[i]?.rowCount ?? 0
+			if (rows > bodyLines) return false
+		}
+		return true
+	}
+	let windowStart = 0
+	for (let i = 0; i <= selected; i++) {
+		if (fitsFrom(i)) {
+			windowStart = i
+			break
+		}
+	}
+	const visible: AttrBlock[] = []
+	let visibleRows = 0
+	for (let i = windowStart; i < blocks.length; i++) {
+		const block = blocks[i]!
+		if (visibleRows + block.rowCount > bodyLines && i > selected) break
+		visible.push(block)
+		visibleRows += block.rowCount
+	}
+	const firstVisibleIndex = windowStart
+
+	const headerStatus = `${span.status} ${SEPARATOR} ${formatDuration(span.durationMs)}`
+	const headerStatusColor = span.isRunning
+		? colors.warning
+		: span.status === "error"
+			? colors.error
+			: colors.passing
+
+	return (
+		<box flexDirection="column" width={paneWidth} height={bodyLines + SPAN_CONTENT_HEADER_ROWS} overflow="hidden">
+			<box paddingLeft={1} paddingRight={1}>
+				<AlignedHeaderLine left="SPAN CONTENT" right={headerStatus} width={contentWidth} rightFg={headerStatusColor} />
+			</box>
+			<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					{aiFlag ? <span fg={colors.accent}>{"\u2726 "}</span> : null}
+					<span fg={colors.text}>{span.operationName}</span>
+				</TextLine>
+				<TextLine>
+					<span fg={colors.defaultService}>{span.serviceName}</span>
+					<span fg={colors.separator}>{SEPARATOR}</span>
+					<span fg={colors.muted}>{span.scopeName ?? "no scope"}</span>
+					<span fg={colors.separator}>{SEPARATOR}</span>
+					<span fg={span.isRunning ? colors.warning : colors.muted}>{lifecycleLabel(span)}</span>
+					<span fg={colors.separator}>{SEPARATOR}</span>
+					<span fg={colors.muted}>{span.spanId.slice(0, 16)}</span>
+					<span fg={colors.separator}>{SEPARATOR}</span>
+					<span fg={colors.count}>{`${blocks.length} tags`}</span>
+					<span fg={colors.separator}>{SEPARATOR}</span>
+					<span fg={colors.muted}>{`${selected + 1}/${blocks.length}`}</span>
+				</TextLine>
+			</box>
+			<Divider width={paneWidth} />
+			<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+				{blocks.length === 0 ? (
+					<PlainLine text="No tags on this span." fg={colors.muted} />
+				) : (
+					visible.map((block, offset) => {
+						const index = firstVisibleIndex + offset
+						const isSelected = index === selected
+						const keyColor = isSelected ? colors.accent : colors.count
+						const cursor = isSelected ? "\u25b8 " : "  "
+						return (
+							<box key={`${span.spanId}-${block.key}`} flexDirection="column">
+								<TextLine>
+									<span fg={isSelected ? colors.accent : colors.separator}>{cursor}</span>
+									<span fg={keyColor} attributes={isSelected ? TextAttributes.BOLD : undefined}>{block.key}</span>
+								</TextLine>
+								{block.valueLines.length === 0 ? (
+									<TextLine>
+										<span fg={colors.separator}>{VALUE_INDENT}</span>
+										<span fg={colors.muted}>(empty)</span>
+									</TextLine>
+								) : (
+									block.valueLines.map((line, i) => (
+										<TextLine key={`${block.key}-${i}`}>
+											<span fg={colors.separator}>{VALUE_INDENT}</span>
+											<span fg={isSelected ? colors.text : colors.muted}>{line}</span>
+										</TextLine>
+									))
+								)}
+							</box>
+						)
+					})
+				)}
+			</box>
+		</box>
+	)
+}

package/src/ui/SpanDetail.tsx

@@ -0,0 +1,215 @@
+import { TextAttributes } from "@opentui/core"
+import type { LogItem, TraceSpanItem } from "../domain.ts"
+import { formatTimestamp, logSeverityColor, relevantLogAttributes, truncateText, wrapTextLines } from "./format.ts"
+import { BlankRow, PlainLine, TextLine } from "./primitives.tsx"
+import { colors, SEPARATOR } from "./theme.ts"
+
+/**
+ * Inline-vs-stacked threshold for tag rendering.
+ *
+ * A tag renders **inline** (`key  value` on one row) when:
+ *   - the key is ≤ INLINE_KEY_MAX chars AND
+ *   - the value fits in the remaining width on one line AND
+ *   - the value contains no newlines.
+ *
+ * Otherwise it **stacks** — the key gets its own row (full, no truncation)
+ * and the value is wrapped below with a leading indent. Long LLM payloads
+ * (`ai.prompt.messages`, `gen_ai.completion`, etc.) always hit the stacked
+ * path, which is what makes them readable at a glance.
+ */
+const INLINE_KEY_MAX = 24
+/** Max wrapped rows we'll spend on a single stacked value's content. */
+const VALUE_WRAP_MAX_LINES = 4
+/** Leading indent for stacked values — subtle but visible. */
+const STACK_INDENT = "  "
+
+interface TagRender {
+	readonly key: string
+	readonly value: string
+	readonly inline: boolean
+	readonly valueLines: readonly string[]
+	readonly rowCount: number
+}
+
+const planTag = (key: string, value: string, contentWidth: number, inlineKeyPad: number): TagRender => {
+	const hasNewline = value.includes("\n")
+	const inlineValueWidth = Math.max(1, contentWidth - inlineKeyPad - 2)
+	const canInline =
+		!hasNewline &&
+		key.length <= INLINE_KEY_MAX &&
+		value.length <= inlineValueWidth
+	if (canInline) {
+		return { key, value, inline: true, valueLines: [value], rowCount: 1 }
+	}
+	const wrapWidth = Math.max(16, contentWidth - STACK_INDENT.length)
+	const valueLines = wrapTextLines(value, wrapWidth, VALUE_WRAP_MAX_LINES)
+	// 1 row for the key + N rows for wrapped value (at least 1).
+	const rowCount = 1 + Math.max(1, valueLines.length)
+	return { key, value, inline: false, valueLines, rowCount }
+}
+
+export const SpanDetailView = ({
+	span,
+	logs,
+	contentWidth,
+	bodyLines,
+}: {
+	span: TraceSpanItem
+	logs: readonly LogItem[]
+	contentWidth: number
+	bodyLines: number
+}) => {
+	const tagEntries = Object.entries(span.tags)
+	// Column width for inline keys. We cap at INLINE_KEY_MAX so a single
+	// very-long key doesn't widen the column for everyone. Short keys still
+	// align against each other.
+	const inlineKeyPad = Math.min(
+		INLINE_KEY_MAX,
+		tagEntries.reduce((max, [key]) => (key.length <= INLINE_KEY_MAX ? Math.max(max, key.length) : max), 0),
+	)
+
+	const maxLogLines = logs.length > 0 ? Math.min(4, Math.max(1, Math.floor(bodyLines * 0.3))) : 0
+	const visibleLogs = logs.slice(0, maxLogLines)
+	const visibleWarnings = span.warnings.slice(0, visibleLogs.length > 0 ? 1 : 2)
+	const visibleEvents = span.events.slice(0, 2)
+	const reservedForWarnings = visibleWarnings.length > 0 ? visibleWarnings.length + 2 : 0
+	const reservedForEvents = visibleEvents.length > 0 ? visibleEvents.length + 2 : 0
+	const reservedForLogs = visibleLogs.length > 0
+		? visibleLogs.reduce((total, log) => total + 3 + Math.min(3, wrapTextLines(log.body, Math.max(16, contentWidth - 2), 3).length), 1)
+		: 0
+	// Budget for the TAGS section: total body minus header (TAGS row + blank)
+	// minus every other section's reservation. Each stacked tag spends more
+	// rows than an inline one so we plan the full visible set up-front rather
+	// than slicing by entry count.
+	const tagBudget = Math.max(0, bodyLines - 2 - reservedForWarnings - reservedForEvents - reservedForLogs)
+
+	const planned: TagRender[] = []
+	let rowsUsed = 0
+	let skipped = 0
+	for (const [key, value] of tagEntries) {
+		const plan = planTag(key, value, contentWidth, inlineKeyPad)
+		if (rowsUsed + plan.rowCount > tagBudget) {
+			skipped = tagEntries.length - planned.length
+			break
+		}
+		planned.push(plan)
+		rowsUsed += plan.rowCount
+	}
+
+	// NOTE: op name, service, duration, lifecycle, status, and spanId are all
+	// rendered by the enclosing SpanDetailPane header (rows 0..2). Starting
+	// the body at TAGS avoids the visible duplication where the pane meta
+	// and the first two body lines mirrored each other.
+	return (
+		<box flexDirection="column">
+			{tagEntries.length > 0 ? (
+				<>
+					<TextLine>
+						<span fg={colors.accent} attributes={TextAttributes.BOLD}>TAGS</span>
+					</TextLine>
+					{planned.map((tag) => tag.inline ? (
+						<TextLine key={tag.key}>
+							<span fg={colors.count}>{tag.key.padEnd(inlineKeyPad)}</span>
+							<span fg={colors.muted}>  </span>
+							<span fg={colors.text}>{tag.value}</span>
+						</TextLine>
+					) : (
+						<box key={tag.key} flexDirection="column">
+							<TextLine>
+								<span fg={colors.count}>{tag.key}</span>
+							</TextLine>
+							{tag.valueLines.length === 0 ? (
+								<TextLine>
+									<span fg={colors.muted}>{STACK_INDENT}</span>
+									<span fg={colors.muted}>(empty)</span>
+								</TextLine>
+							) : tag.valueLines.map((line, index) => (
+								<TextLine key={index}>
+									<span fg={colors.muted}>{STACK_INDENT}</span>
+									<span fg={colors.text}>{line}</span>
+								</TextLine>
+							))}
+						</box>
+					))}
+					{skipped > 0 ? (
+						<PlainLine text={`${STACK_INDENT}\u2026 ${skipped} more`} fg={colors.muted} />
+					) : null}
+				</>
+			) : (
+				<PlainLine text="No tags on this span." fg={colors.muted} />
+			)}
+			{visibleWarnings.length > 0 ? (
+				<>
+					<BlankRow />
+					<TextLine>
+						<span fg={colors.accent} attributes={TextAttributes.BOLD}>WARNINGS</span>
+					</TextLine>
+					{visibleWarnings.map((warning, i) => (
+						<PlainLine key={i} text={warning} fg={colors.error} />
+					))}
+				</>
+			) : null}
+			{visibleEvents.length > 0 ? (
+				<>
+					<BlankRow />
+					<TextLine>
+						<span fg={colors.accent} attributes={TextAttributes.BOLD}>EVENTS</span>
+					</TextLine>
+					{visibleEvents.map((event, index) => {
+						const preview = Object.entries(event.attributes).slice(0, 1)
+						return (
+							<box key={`${event.name}-${index}`} flexDirection="column">
+								<TextLine>
+									<span fg={colors.muted}>{formatTimestamp(event.timestamp)}</span>
+									<span fg={colors.separator}>{SEPARATOR}</span>
+									<span fg={colors.text}>{event.name}</span>
+								</TextLine>
+								{preview.map(([key, value]) => (
+									<TextLine key={`${event.name}-${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, contentWidth - 20))}</span>
+									</TextLine>
+								))}
+							</box>
+						)
+					})}
+				</>
+			) : null}
+			{visibleLogs.length > 0 ? (
+				<>
+					<BlankRow />
+					<TextLine>
+						<span fg={colors.accent} attributes={TextAttributes.BOLD}>RELATED LOGS</span>
+					</TextLine>
+					{visibleLogs.map((log) => {
+						const logBodyLines = wrapTextLines(log.body, Math.max(16, contentWidth - 2), 3)
+						const attributePreview = relevantLogAttributes(log).slice(0, 1)
+
+						return (
+							<box key={log.id} flexDirection="column">
+								<TextLine>
+									<span fg={colors.muted}>{formatTimestamp(log.timestamp)}</span>
+									<span fg={colors.separator}>{SEPARATOR}</span>
+									<span fg={logSeverityColor(log.severityText)}>{log.severityText.toLowerCase()}</span>
+									<span fg={colors.separator}>{SEPARATOR}</span>
+									<span fg={colors.defaultService}>{log.scopeName ?? log.serviceName}</span>
+								</TextLine>
+								{logBodyLines.map((line, index) => (
+									<PlainLine key={`${log.id}-body-${index}`} text={line} fg={colors.text} />
+								))}
+								{attributePreview.map(([key, value]) => (
+									<TextLine key={`${log.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, contentWidth - 20))}</span>
+									</TextLine>
+								))}
+							</box>
+						)
+					})}
+				</>
+			) : null}
+		</box>
+	)
+}

package/src/ui/SpanDetailFull.tsx

@@ -0,0 +1,224 @@
+import { TextAttributes } from "@opentui/core"
+import type { ReactNode } from "react"
+import type { LogItem, TraceSpanItem } from "../domain.ts"
+import { formatDuration, formatShortDate, formatTimestamp, lifecycleLabel, logSeverityColor, relevantLogAttributes, truncateText, wrapTextLines } from "./format.ts"
+import { BlankRow, PlainLine, TextLine } from "./primitives.tsx"
+import { colors, SEPARATOR } from "./theme.ts"
+
+type Line = ReactNode
+
+/**
+ * Full-pane span detail view. Shows everything we know about a span:
+ * - identifiers, timing, scope, kind, status
+ * - all tags
+ * - all events with all attributes
+ * - all warnings
+ * - all correlated logs with wrapped bodies and relevant attributes
+ *
+ * The view builds a flat array of rendered lines then slices it to `bodyLines`,
+ * honoring a scroll offset so `j/k` scrolling can be wired later.
+ */
+export const SpanDetailFullView = ({
+	span,
+	logs,
+	contentWidth,
+	bodyLines,
+	scrollOffset = 0,
+}: {
+	span: TraceSpanItem
+	logs: readonly LogItem[]
+	contentWidth: number
+	bodyLines: number
+	scrollOffset?: number
+}) => {
+	const lines: Line[] = []
+	let key = 0
+	const push = (node: Line) => lines.push(<box key={key++}>{node}</box>)
+
+	// --- Header: operation + status line ---
+	push(
+		<TextLine>
+			<span fg={colors.text} attributes={TextAttributes.BOLD}>{span.operationName}</span>
+		</TextLine>,
+	)
+	push(
+		<TextLine>
+			<span fg={colors.defaultService}>{span.serviceName}</span>
+			<span fg={colors.separator}>{SEPARATOR}</span>
+			<span fg={colors.count}>{formatDuration(span.durationMs)}</span>
+			<span fg={colors.separator}>{SEPARATOR}</span>
+			<span fg={span.isRunning ? colors.warning : colors.muted}>{lifecycleLabel(span)}</span>
+			<span fg={colors.separator}>{SEPARATOR}</span>
+			<span fg={span.status === "error" ? colors.error : colors.passing}>{span.status}</span>
+		</TextLine>,
+	)
+	push(<BlankRow />)
+
+	// --- Metadata block ---
+	const metaKeyWidth = 10
+	const metaRow = (k: string, v: string, vFg: string = colors.text) => (
+		<TextLine>
+			<span fg={colors.count}>{k.padEnd(metaKeyWidth)}</span>
+			<span fg={colors.muted}> </span>
+			<span fg={vFg}>{truncateText(v, Math.max(8, contentWidth - metaKeyWidth - 1))}</span>
+		</TextLine>
+	)
+	push(<TextLine><span fg={colors.accent} attributes={TextAttributes.BOLD}>META</span></TextLine>)
+	push(metaRow("span id", span.spanId))
+	if (span.parentSpanId) push(metaRow("parent", span.parentSpanId))
+	if (span.kind) push(metaRow("kind", span.kind))
+	if (span.scopeName) push(metaRow("scope", span.scopeName))
+	push(metaRow("started", `${formatShortDate(span.startTime)} ${formatTimestamp(span.startTime)}`))
+	push(metaRow("depth", String(span.depth), colors.muted))
+
+	// --- Tags ---
+	const tagEntries = Object.entries(span.tags)
+	if (tagEntries.length > 0) {
+		push(<BlankRow />)
+		push(
+			<TextLine>
+				<span fg={colors.accent} attributes={TextAttributes.BOLD}>TAGS</span>
+				<span fg={colors.muted}> ({tagEntries.length})</span>
+			</TextLine>,
+		)
+		const maxKeyLen = Math.min(32, tagEntries.reduce((m, [k]) => Math.max(m, k.length), 0))
+		const valMaxWidth = Math.max(8, contentWidth - maxKeyLen - 2)
+		for (const [tagKey, value] of tagEntries) {
+			const keyStr = tagKey.length > maxKeyLen ? `${tagKey.slice(0, maxKeyLen - 1)}\u2026` : tagKey.padEnd(maxKeyLen)
+			const wrapped = wrapTextLines(value, valMaxWidth, 4)
+			wrapped.forEach((line, idx) => {
+				push(
+					<TextLine>
+						<span fg={colors.count}>{idx === 0 ? keyStr : " ".repeat(maxKeyLen)}</span>
+						<span fg={colors.muted}>  </span>
+						<span fg={colors.text}>{line}</span>
+					</TextLine>,
+				)
+			})
+		}
+	}
+
+	// --- Warnings ---
+	if (span.warnings.length > 0) {
+		push(<BlankRow />)
+		push(
+			<TextLine>
+				<span fg={colors.accent} attributes={TextAttributes.BOLD}>WARNINGS</span>
+				<span fg={colors.muted}> ({span.warnings.length})</span>
+			</TextLine>,
+		)
+		for (const warning of span.warnings) {
+			for (const line of wrapTextLines(warning, Math.max(16, contentWidth - 2), 4)) {
+				push(<PlainLine text={line} fg={colors.error} />)
+			}
+		}
+	}
+
+	// --- Events ---
+	if (span.events.length > 0) {
+		push(<BlankRow />)
+		push(
+			<TextLine>
+				<span fg={colors.accent} attributes={TextAttributes.BOLD}>EVENTS</span>
+				<span fg={colors.muted}> ({span.events.length})</span>
+			</TextLine>,
+		)
+		for (const event of span.events) {
+			push(
+				<TextLine>
+					<span fg={colors.muted}>{formatTimestamp(event.timestamp)}</span>
+					<span fg={colors.separator}>{SEPARATOR}</span>
+					<span fg={colors.text}>{event.name}</span>
+				</TextLine>,
+			)
+			const attrs = Object.entries(event.attributes)
+			if (attrs.length > 0) {
+				const attrKeyWidth = Math.min(24, attrs.reduce((m, [k]) => Math.max(m, k.length), 0))
+				const attrValWidth = Math.max(8, contentWidth - attrKeyWidth - 4)
+				for (const [attrKey, attrVal] of attrs) {
+					const wrapped = wrapTextLines(attrVal, attrValWidth, 2)
+					wrapped.forEach((line, idx) => {
+						push(
+							<TextLine>
+								<span fg={colors.muted}>  </span>
+								<span fg={colors.count}>
+									{idx === 0
+										? (attrKey.length > attrKeyWidth ? `${attrKey.slice(0, attrKeyWidth - 1)}\u2026` : attrKey.padEnd(attrKeyWidth))
+										: " ".repeat(attrKeyWidth)}
+								</span>
+								<span fg={colors.muted}>  </span>
+								<span fg={colors.muted}>{line}</span>
+							</TextLine>,
+						)
+					})
+				}
+			}
+		}
+	}
+
+	// --- Logs ---
+	if (logs.length > 0) {
+		push(<BlankRow />)
+		push(
+			<TextLine>
+				<span fg={colors.accent} attributes={TextAttributes.BOLD}>LOGS</span>
+				<span fg={colors.muted}> ({logs.length})</span>
+			</TextLine>,
+		)
+		for (const log of logs) {
+			push(
+				<TextLine>
+					<span fg={colors.muted}>{formatTimestamp(log.timestamp)}</span>
+					<span fg={colors.separator}>{SEPARATOR}</span>
+					<span fg={logSeverityColor(log.severityText)}>{log.severityText.toLowerCase()}</span>
+					<span fg={colors.separator}>{SEPARATOR}</span>
+					<span fg={colors.defaultService}>{log.scopeName ?? log.serviceName}</span>
+				</TextLine>,
+			)
+			for (const line of wrapTextLines(log.body, Math.max(16, contentWidth - 2), 8)) {
+				push(<PlainLine text={line} fg={colors.text} />)
+			}
+			const attrs = relevantLogAttributes(log)
+			if (attrs.length > 0) {
+				const attrKeyWidth = Math.min(22, attrs.reduce((m, [k]) => Math.max(m, k.length), 0))
+				const attrValWidth = Math.max(8, contentWidth - attrKeyWidth - 4)
+				for (const [attrKey, attrVal] of attrs) {
+					const wrapped = wrapTextLines(attrVal, attrValWidth, 2)
+					wrapped.forEach((line, idx) => {
+						push(
+							<TextLine>
+								<span fg={colors.muted}>  </span>
+								<span fg={colors.count}>
+									{idx === 0
+										? (attrKey.length > attrKeyWidth ? `${attrKey.slice(0, attrKeyWidth - 1)}\u2026` : attrKey.padEnd(attrKeyWidth))
+										: " ".repeat(attrKeyWidth)}
+								</span>
+								<span fg={colors.muted}>  </span>
+								<span fg={colors.muted}>{line}</span>
+							</TextLine>,
+						)
+					})
+				}
+			}
+		}
+	}
+
+	// --- Slice by scroll ---
+	const totalLines = lines.length
+	const maxOffset = Math.max(0, totalLines - bodyLines)
+	const offset = Math.min(Math.max(0, scrollOffset), maxOffset)
+	const visible = lines.slice(offset, offset + bodyLines)
+
+	return (
+		<box flexDirection="column">
+			{visible}
+			{totalLines > bodyLines ? (
+				<TextLine>
+					<span fg={colors.muted}>
+						{`\u2014 ${offset + 1}\u2013${Math.min(offset + bodyLines, totalLines)} of ${totalLines} lines${offset < maxOffset ? " \u00b7 j/k to scroll" : ""}`}
+					</span>
+				</TextLine>
+			) : null}
+		</box>
+	)
+}