@kitlangton/ghui 0.1.22 → 0.2.0

package/src/ui/CommandPalette.tsx

@@ -1,10 +1,10 @@
-import { TextAttributes } from "@opentui/core"
+import { TextAttributes, type MouseEvent } from "@opentui/core"
 import { useEffect, useMemo, useState } from "react"
 import type { AppCommand } from "../commands.js"
 import { clampCommandIndex } from "../commands.js"
 import { colors } from "./colors.js"
 import { scrollTopForVisibleLine } from "./diff.js"
-import { centerCell, Filler, fitCell, HintRow, PlainLine, StandardModal, standardModalDims, TextLine, trimCell } from "./primitives.js"
+import { centerCell, Divider, Filler, fitCell, HintRow, ModalFrame, PaddedRow, PlainLine, standardModalDims, TextLine, trimCell } from "./primitives.js"
 
 const scopeLabels = {
 	Global: "App",
@@ -55,6 +55,9 @@ export const commandPaletteScrollTop = ({
 	return clampScrollTop(scrollTopForVisibleLine(current, listHeight, selectedRowIndex, 0))
 }
 
+export const commandPaletteClampScrollTop = (rowsLength: number, listHeight: number, value: number) =>
+	Math.max(0, Math.min(value, Math.max(0, rowsLength - listHeight)))
+
 export const CommandPalette = ({
 	commands,
 	query,
@@ -63,6 +66,8 @@ export const CommandPalette = ({
 	modalHeight,
 	offsetLeft,
 	offsetTop,
+	onSelectCommandIndex,
+	onRunCommand,
 }: {
 	commands: readonly AppCommand[]
 	query: string
@@ -71,8 +76,11 @@ export const CommandPalette = ({
 	modalHeight: number
 	offsetLeft: number
 	offsetTop: number
+	onSelectCommandIndex: (index: number) => void
+	onRunCommand: (command: AppCommand) => void
 }) => {
-	const { contentWidth, bodyHeight: listHeight, rowWidth } = standardModalDims(modalWidth, modalHeight)
+	const { innerWidth, contentWidth, rowWidth } = standardModalDims(modalWidth, modalHeight)
+	const listHeight = Math.max(1, modalHeight - 6)
 	const clampedIndex = clampCommandIndex(selectedIndex, commands)
 	const [scrollTop, setScrollTop] = useState(0)
 	const rows = useMemo(() => buildCommandPaletteRows(commands), [commands])
@@ -80,87 +88,129 @@ export const CommandPalette = ({
 	const visibleRows = rows.slice(scrollTop, scrollTop + listHeight)
 	const bottomPaddingRows = Math.max(0, listHeight - visibleRows.length)
 	const countText = commands.length === 1 ? "1 command" : `${commands.length} commands`
-	const queryWidth = Math.max(1, contentWidth)
-	const placeholder = "Search word"
-	const queryText = trimCell(query, Math.max(0, queryWidth - 1))
+	const placeholder = "Search"
+	const titleText = "Commands"
+	const headerGap = 1
+	const headerDivider = "│"
+	const searchGap = 1
+	const dividerColumn = 1 + titleText.length + headerGap
+	const searchStart = titleText.length + headerGap + headerDivider.length + searchGap
+	const countGap = countText.length > 0 ? 2 : 0
+	const searchWidth = Math.max(1, contentWidth - searchStart - countGap - countText.length)
+	const queryText = trimCell(query, Math.max(0, searchWidth - 1))
+	const queryPadding = Math.max(0, searchWidth - queryText.length - 1)
+	const caretFg = colors.background === "transparent" ? colors.text : colors.background
 	const emptyTopRows = Math.max(0, Math.floor((listHeight - 1) / 2))
 	const emptyBottomRows = Math.max(0, listHeight - emptyTopRows - 1)
+	const runCommandOnMouseDown = (command: AppCommand) => (event: MouseEvent) => {
+		if (event.button !== 0) return
+		event.preventDefault()
+		event.stopPropagation()
+		onRunCommand(command)
+	}
+	const selectCommandOnMouse = (commandIndex: number) => (event: MouseEvent) => {
+		onSelectCommandIndex(commandIndex)
+		event.stopPropagation()
+	}
+	const handleMouseScroll = (event: MouseEvent) => {
+		if (!event.scroll || rows.length <= listHeight) return
+		const delta = Math.max(1, Math.ceil(event.scroll.delta))
+		const direction = event.scroll.direction === "down" || event.scroll.direction === "right" ? 1 : -1
+		setScrollTop((current) => commandPaletteClampScrollTop(rows.length, listHeight, current + direction * delta))
+		event.preventDefault()
+		event.stopPropagation()
+	}
+	const content = rows.length === 0 ? (
+		<>
+			<Filler rows={emptyTopRows} prefix="top" />
+			<PlainLine text={centerCell("No matching command", rowWidth)} fg={colors.muted} />
+			<Filler rows={emptyBottomRows} prefix="bottom" />
+		</>
+	) : (
+		<>
+			{visibleRows.map((row, index) => {
+				const rowIndex = scrollTop + index
+				if (row._tag === "spacer") {
+					return <PlainLine key={`spacer-${rowIndex}`} text="" />
+				}
+				if (row._tag === "section") {
+					return <PlainLine key={`section-${row.scope}-${rowIndex}`} text={fitCell(`  ${scopeLabels[row.scope].toUpperCase()}`, rowWidth)} fg={colors.muted} />
+				}
+
+				const { command, commandIndex } = row
+				const isSelected = commandIndex === clampedIndex
+				const shortcut = command.shortcut ? trimCell(command.shortcut, 16) : ""
+				const shortcutWidth = shortcut.length === 0 ? 0 : Math.min(18, Math.max(6, shortcut.length + 1))
+				const trailingPadding = shortcut.length === 0 ? 0 : 1
+				// Layout: "▸ " (2) + title + "  " (2) + subtitle + filler + shortcut + " " (1)
+				const SELECTOR_WIDTH = 2
+				const titleAvailable = Math.max(8, rowWidth - SELECTOR_WIDTH - shortcutWidth - trailingPadding)
+				const titleText = trimCell(command.title, Math.min(titleAvailable, 36))
+				const subtitleSpace = Math.max(0, titleAvailable - titleText.length - 2)
+				const subtitleText = command.subtitle && subtitleSpace > 4 ? trimCell(command.subtitle, subtitleSpace) : ""
+				const fillerWidth = Math.max(0, titleAvailable - titleText.length - (subtitleText ? 2 + subtitleText.length : 0))
+
+				return (
+					<box key={command.id} height={1} onMouseDown={runCommandOnMouseDown(command)} onMouseMove={selectCommandOnMouse(commandIndex)} onMouseOver={selectCommandOnMouse(commandIndex)}>
+						<TextLine width={rowWidth} bg={isSelected ? colors.selectedBg : undefined} fg={isSelected ? colors.selectedText : colors.text}>
+							<span fg={isSelected ? colors.accent : colors.muted}>{isSelected ? "▸" : " "}</span>
+							<span> </span>
+							{isSelected ? <span attributes={TextAttributes.BOLD}>{titleText}</span> : <span>{titleText}</span>}
+							{subtitleText ? <span fg={colors.muted}>{`  ${subtitleText}`}</span> : null}
+							{fillerWidth > 0 ? <span>{" ".repeat(fillerWidth)}</span> : null}
+							{shortcutWidth > 0 ? <span fg={colors.muted}>{fitCell(shortcut, shortcutWidth, "right")}</span> : null}
+							{trailingPadding > 0 ? <span> </span> : null}
+						</TextLine>
+					</box>
+				)
+			})}
+			<Filler rows={bottomPaddingRows} prefix="pad" />
+		</>
+	)
 	useEffect(() => {
 		setScrollTop((current) => commandPaletteScrollTop({ current, rowsLength: rows.length, listHeight, selectedRowIndex }))
 	}, [listHeight, rows.length, selectedRowIndex])
-
 	return (
-		<StandardModal
+		<ModalFrame
 			left={offsetLeft}
 			top={offsetTop}
 			width={modalWidth}
 			height={modalHeight}
-			title="Commands"
-			headerRight={{ text: countText }}
-			subtitle={
+			junctionRows={[1, modalHeight - 4]}
+			topJunctionColumns={[dividerColumn]}
+		>
+			<PaddedRow>
 				<TextLine>
+					<span fg={colors.accent} attributes={TextAttributes.BOLD}>{titleText}</span>
+					<span>{" ".repeat(headerGap)}</span>
+					<span fg={colors.separator}>{headerDivider}</span>
+					<span>{" ".repeat(searchGap)}</span>
 					{query.length > 0 ? (
 						<>
 							<span fg={colors.text}>{queryText}</span>
-							<span bg={colors.accent} fg={colors.background}> </span>
+							<span bg={colors.muted} fg={caretFg}> </span>
+							{queryPadding > 0 ? <span>{" ".repeat(queryPadding)}</span> : null}
 						</>
 					) : (
 						<>
-							<span bg={colors.accent} fg={colors.background}>{placeholder[0]}</span>
-							<span fg={colors.muted}>{fitCell(placeholder.slice(1), Math.max(0, queryWidth - 1))}</span>
+							<span bg={colors.muted} fg={caretFg}>{placeholder[0]}</span>
+							<span fg={colors.muted}>{fitCell(placeholder.slice(1), Math.max(0, searchWidth - 1))}</span>
 						</>
 					)}
+					{countText.length > 0 && searchWidth > placeholder.length ? (
+						<>
+							<span>{" ".repeat(countGap)}</span>
+							<span fg={colors.muted}>{countText}</span>
+						</>
+					) : null}
 				</TextLine>
-			}
-			footer={<HintRow items={[{ key: "↑↓", label: "select" }, { key: "enter", label: "run" }, { key: "ctrl-u", label: "clear" }, { key: "ctrl-w", label: "word" }, { key: "esc", label: "close" }]} />}
-		>
-			{rows.length === 0 ? (
-				<>
-					<Filler rows={emptyTopRows} prefix="top" />
-					<PlainLine text={centerCell("No matching command", rowWidth)} fg={colors.muted} />
-					<Filler rows={emptyBottomRows} prefix="bottom" />
-				</>
-			) : (
-				<>
-					{visibleRows.map((row, index) => {
-						const rowIndex = scrollTop + index
-						if (row._tag === "spacer") {
-							return <PlainLine key={`spacer-${rowIndex}`} text="" />
-						}
-						if (row._tag === "section") {
-							return <PlainLine key={`section-${row.scope}-${rowIndex}`} text={fitCell(`  ${scopeLabels[row.scope].toUpperCase()}`, rowWidth)} fg={colors.muted} />
-						}
-
-						const { command, commandIndex } = row
-						const isSelected = commandIndex === clampedIndex
-						const shortcut = command.shortcut ? trimCell(command.shortcut, 16) : ""
-						const shortcutWidth = shortcut.length === 0 ? 0 : Math.min(18, Math.max(6, shortcut.length + 1))
-						const trailingPadding = shortcut.length === 0 ? 0 : 1
-						// Layout: "▸ " (2) + title + "  " (2) + subtitle + filler + shortcut + " " (1)
-						const SELECTOR_WIDTH = 2
-						const titleAvailable = Math.max(8, rowWidth - SELECTOR_WIDTH - shortcutWidth - trailingPadding)
-						const titleText = trimCell(command.title, Math.min(titleAvailable, 36))
-						const subtitleSpace = Math.max(0, titleAvailable - titleText.length - 2)
-						const subtitleText = command.subtitle && subtitleSpace > 4 ? trimCell(command.subtitle, subtitleSpace) : ""
-						const fillerWidth = Math.max(0, titleAvailable - titleText.length - (subtitleText ? 2 + subtitleText.length : 0))
-
-						return (
-							<box key={command.id} height={1}>
-								<TextLine width={rowWidth} bg={isSelected ? colors.selectedBg : undefined} fg={isSelected ? colors.selectedText : colors.text}>
-									<span fg={isSelected ? colors.accent : colors.muted}>{isSelected ? "▸" : " "}</span>
-									<span> </span>
-									{isSelected ? <span attributes={TextAttributes.BOLD}>{titleText}</span> : <span>{titleText}</span>}
-									{subtitleText ? <span fg={colors.muted}>{`  ${subtitleText}`}</span> : null}
-									{fillerWidth > 0 ? <span>{" ".repeat(fillerWidth)}</span> : null}
-									{shortcutWidth > 0 ? <span fg={colors.muted}>{fitCell(shortcut, shortcutWidth, "right")}</span> : null}
-									{trailingPadding > 0 ? <span> </span> : null}
-								</TextLine>
-							</box>
-						)
-					})}
-					<Filler rows={bottomPaddingRows} prefix="pad" />
-				</>
-			)}
-		</StandardModal>
+			</PaddedRow>
+			<Divider width={innerWidth} junctionAt={dividerColumn} junctionChar="┴" />
+			<box height={listHeight} flexDirection="column" onMouseScroll={handleMouseScroll}>{content}</box>
+			<Divider width={innerWidth} />
+			<PaddedRow>
+				<HintRow items={[{ key: "↑↓", label: "select" }, { key: "enter", label: "run" }, { key: "ctrl-u", label: "clear" }, { key: "ctrl-w", label: "word" }, { key: "esc", label: "close" }]} />
+			</PaddedRow>
+		</ModalFrame>
 	)
 }

package/src/ui/DetailsPane.tsx

@@ -1,19 +1,17 @@
 import { TextAttributes } from "@opentui/core"
 import { Fragment, useMemo } from "react"
 import { formatRelativeDate } from "../date.js"
-import type { CheckItem, PullRequestItem } from "../domain.js"
+import type { CheckItem, PullRequestConversationItem, PullRequestItem } from "../domain.js"
 import { colors, type ThemeId } from "./colors.js"
-import { diffStatText } from "./diff.js"
+import { commentCountText, commentDisplayRows, commentSideColor, CommentSegmentsLine, type CommentSegment } from "./comments.js"
+import { diffCommentLineLabel, diffStatText } from "./diff.js"
 import { DiffStats } from "./diffStats.js"
 import { centerCell, Divider, Filler, fitCell, PaddedRow, PlainLine, TextLine } from "./primitives.js"
 import { labelColor, labelTextColor, reviewLabel, shortRepoName, statusColor } from "./pullRequests.js"
 
 interface PreviewLine {
-	readonly segments: ReadonlyArray<{
-		readonly text: string
-		readonly fg: string
-		readonly bold?: boolean
-	}>
+	readonly divider?: boolean
+	readonly segments: readonly CommentSegment[]
 }
 
 export interface DetailPlaceholderContent {
@@ -25,6 +23,8 @@ export const DETAIL_BODY_LINES = 6
 export const DETAIL_PLACEHOLDER_ROWS = 4
 export const DETAIL_BODY_SCROLL_LIMIT = 1_000
 
+export type DetailConversationStatus = "idle" | "loading" | "ready"
+
 const pullRequestReferencePattern = /(#[0-9]+)/g
 const codeFencePattern = /^```\s*([a-zA-Z0-9_-]+)?/
 const codeTokenPattern = /(\/\/.*|`(?:\\.|[^`])*`|"(?:\\.|[^"])*"|'(?:\\.|[^'])*'|\b(?:async|await|break|case|catch|class|const|continue|default|else|export|extends|finally|for|from|function|if|import|interface|let|new|return|switch|throw|try|type|var|while|yield)\b|\b(?:true|false|null|undefined)\b|\b\d+(?:\.\d+)?\b)/g
@@ -186,6 +186,85 @@ const bodyPreview = (body: string, width: number, limit = DETAIL_BODY_LINES): Ar
 	return preview.slice(0, limit)
 }
 
+const previewDivider = (): PreviewLine => ({
+	divider: true,
+	segments: [],
+})
+
+const conversationItemGroups = (item: PullRequestConversationItem, width: number): readonly (readonly CommentSegment[])[] => {
+	if (item._tag !== "review-comment") return []
+	const locationWidth = Math.max(8, width - item.author.length - 20)
+	return [[
+		{ text: fitCell(item.path, locationWidth), fg: colors.inlineCode },
+		{ text: diffCommentLineLabel(item), fg: commentSideColor(item.side), bold: true },
+	]]
+}
+
+const conversationPreview = ({
+	items,
+	status,
+	width,
+	limit,
+}: {
+	readonly items: readonly PullRequestConversationItem[]
+	readonly status: DetailConversationStatus
+	readonly width: number
+	readonly limit: number
+}): Array<PreviewLine> => {
+	if (status === "idle" || (status === "ready" && items.length === 0) || limit <= 0) return []
+	const rows: Array<PreviewLine> = []
+	const title = "Conversation"
+	const countText = status === "loading" ? "loading" : commentCountText(items.length)
+	const gap = Math.max(2, width - title.length - countText.length)
+	rows.push({
+		segments: [
+			{ text: title, fg: colors.count, bold: true },
+			{ text: " ".repeat(gap), fg: colors.muted },
+			{ text: countText, fg: colors.muted },
+		],
+	})
+	if (items.length === 0) {
+		rows.push({ segments: [{ text: "│ ", fg: colors.muted }, { text: "Loading comments...", fg: colors.muted }] })
+		return rows.slice(0, limit)
+	}
+
+	for (const item of items) {
+		if (rows.length >= limit) break
+		rows.push(...commentDisplayRows({ item, width, groups: conversationItemGroups(item, width) }).slice(0, limit - rows.length))
+	}
+
+	return rows.slice(0, limit)
+}
+
+const detailBodyPreview = ({
+	pullRequest,
+	contentWidth,
+	limit,
+	conversationItems,
+	conversationStatus,
+}: {
+	readonly pullRequest: PullRequestItem
+	readonly contentWidth: number
+	readonly limit: number
+	readonly conversationItems: readonly PullRequestConversationItem[]
+	readonly conversationStatus: DetailConversationStatus
+}) => {
+	const summaryRows = bodyPreview(pullRequest.body, contentWidth, limit)
+	const conversationRows = conversationPreview({
+		items: conversationItems,
+		status: conversationStatus,
+		width: contentWidth,
+		limit: Math.max(0, limit - summaryRows.length - 1),
+	})
+
+	if (conversationRows.length === 0) return summaryRows
+	return [
+		...summaryRows,
+		previewDivider(),
+		...conversationRows,
+	].slice(0, limit)
+}
+
 const deduplicateChecks = (checks: readonly CheckItem[]): CheckItem[] => {
 	const seen = new Map<string, CheckItem>()
 	for (const check of checks) {
@@ -264,13 +343,38 @@ const ChecksSection = ({ checks, contentWidth }: { checks: readonly CheckItem[];
 	)
 }
 
-export const getDetailJunctionRows = (pullRequest: PullRequestItem | null, paneWidth: number, showChecks = false): readonly number[] => {
+const conversationDividerBodyRow = (pullRequest: PullRequestItem, contentWidth: number, conversationItems: readonly PullRequestConversationItem[], conversationStatus: DetailConversationStatus) => {
+	if (!pullRequest.detailLoaded) return null
+	const summaryRows = bodyPreview(pullRequest.body, contentWidth, DETAIL_BODY_SCROLL_LIMIT)
+	const conversationRows = conversationPreview({
+		items: conversationItems,
+		status: conversationStatus,
+		width: contentWidth,
+		limit: Math.max(0, DETAIL_BODY_SCROLL_LIMIT - summaryRows.length - 1),
+	})
+	return conversationRows.length > 0 ? summaryRows.length : null
+}
+
+export const getDetailJunctionRows = (
+	pullRequest: PullRequestItem | null,
+	paneWidth: number,
+	showChecks = false,
+	contentWidth = Math.max(1, paneWidth - 2),
+	conversationItems: readonly PullRequestConversationItem[] = [],
+	conversationStatus: DetailConversationStatus = "idle",
+): readonly number[] => {
 	if (!pullRequest) return [DETAIL_PLACEHOLDER_ROWS]
 	const titleLines = wrapText(pullRequest.title, Math.max(1, paneWidth - 2)).length
 	const detailDividerRow = 1 + titleLines + 1
 	const checks = deduplicateChecks(pullRequest.checks)
 	const checksDividerRow = checks.length > 0 ? detailDividerRow + 1 + checksRowCount(checks) + 1 : -1
-	return showChecks && checks.length > 0 ? [detailDividerRow, checksDividerRow] : [detailDividerRow]
+	const headerHeight = getDetailHeaderHeight(pullRequest, paneWidth, showChecks)
+	const conversationDivider = conversationDividerBodyRow(pullRequest, contentWidth, conversationItems, conversationStatus)
+	return [
+		detailDividerRow,
+		showChecks && checks.length > 0 ? checksDividerRow : -1,
+		conversationDivider === null ? -1 : headerHeight + conversationDivider,
+	].filter((row) => row >= 0)
 }
 
 export const getDetailHeaderHeight = (pullRequest: PullRequestItem | null, paneWidth: number, showChecks = false) => {
@@ -281,14 +385,14 @@ export const getDetailHeaderHeight = (pullRequest: PullRequestItem | null, paneW
 	return titleLines + 3 + checksHeight
 }
 
-export const getDetailBodyHeight = (pullRequest: PullRequestItem | null, contentWidth: number, bodyLines = DETAIL_BODY_LINES) => {
+export const getDetailBodyHeight = (pullRequest: PullRequestItem | null, contentWidth: number, bodyLines = DETAIL_BODY_LINES, conversationItems: readonly PullRequestConversationItem[] = [], conversationStatus: DetailConversationStatus = "idle") => {
 	if (!pullRequest) return bodyLines
 	if (!pullRequest.detailLoaded) return bodyLines
-	return bodyPreview(pullRequest.body, contentWidth, bodyLines).length
+	return detailBodyPreview({ pullRequest, contentWidth, limit: bodyLines, conversationItems, conversationStatus }).length
 }
 
-export const getScrollableDetailBodyHeight = (pullRequest: PullRequestItem | null, contentWidth: number) => {
-	return getDetailBodyHeight(pullRequest, contentWidth, DETAIL_BODY_SCROLL_LIMIT)
+export const getScrollableDetailBodyHeight = (pullRequest: PullRequestItem | null, contentWidth: number, conversationItems: readonly PullRequestConversationItem[] = [], conversationStatus: DetailConversationStatus = "idle") => {
+	return getDetailBodyHeight(pullRequest, contentWidth, DETAIL_BODY_SCROLL_LIMIT, conversationItems, conversationStatus)
 }
 
 export const getDetailsPaneHeight = ({
@@ -297,14 +401,18 @@ export const getDetailsPaneHeight = ({
 	bodyLines = DETAIL_BODY_LINES,
 	paneWidth = contentWidth + 2,
 	showChecks = false,
+	conversationItems = [],
+	conversationStatus = "idle",
 }: {
 	pullRequest: PullRequestItem | null
 	contentWidth: number
 	bodyLines?: number
 	paneWidth?: number
 	showChecks?: boolean
+	conversationItems?: readonly PullRequestConversationItem[]
+	conversationStatus?: DetailConversationStatus
 }) => pullRequest
-	? getDetailHeaderHeight(pullRequest, paneWidth, showChecks) + getDetailBodyHeight(pullRequest, contentWidth, bodyLines)
+	? getDetailHeaderHeight(pullRequest, paneWidth, showChecks) + getDetailBodyHeight(pullRequest, contentWidth, bodyLines, conversationItems, conversationStatus)
 	: bodyLines + DETAIL_PLACEHOLDER_ROWS + 1
 
 export const DetailHeader = ({
@@ -394,21 +502,27 @@ export const DetailHeader = ({
 export const DetailBody = ({
 	pullRequest,
 	contentWidth,
+	paneWidth = contentWidth + 2,
 	bodyLines = DETAIL_BODY_LINES,
 	bodyLineLimit = bodyLines,
+	conversationItems = [],
+	conversationStatus = "idle",
 	loadingIndicator,
 	themeId,
 }: {
 	pullRequest: PullRequestItem
 	contentWidth: number
+	paneWidth?: number
 	bodyLines?: number
 	bodyLineLimit?: number
+	conversationItems?: readonly PullRequestConversationItem[]
+	conversationStatus?: DetailConversationStatus
 	loadingIndicator: string
 	themeId: ThemeId
 }) => {
 	const previewLines = useMemo(
-		() => bodyPreview(pullRequest.body, contentWidth, bodyLineLimit),
-		[pullRequest.body, contentWidth, bodyLineLimit, themeId],
+		() => detailBodyPreview({ pullRequest, contentWidth, limit: bodyLineLimit, conversationItems, conversationStatus }),
+		[pullRequest, contentWidth, bodyLineLimit, conversationItems, conversationStatus, themeId],
 	)
 
 	if (!pullRequest.detailLoaded) {
@@ -424,21 +538,15 @@ export const DetailBody = ({
 	}
 
 	return (
-		<box flexDirection="column" paddingLeft={1} paddingRight={1} height={previewLines.length}>
+		<box flexDirection="column" height={previewLines.length}>
 			{previewLines.map((line, index) => (
-				<TextLine key={`${pullRequest.url}-${index}`}>
-					{line.segments.map((segment, segmentIndex) => (
-						("bold" in segment && segment.bold === true) ? (
-							<span key={segmentIndex} fg={segment.fg} attributes={TextAttributes.BOLD}>
-								{segment.text}
-							</span>
-						) : (
-							<span key={segmentIndex} fg={segment.fg}>
-								{segment.text}
-							</span>
-						)
-					))}
-				</TextLine>
+				line.divider === true ? (
+					<Divider key={`${pullRequest.url}-${index}`} width={paneWidth} />
+				) : (
+					<PaddedRow key={`${pullRequest.url}-${index}`}>
+						<CommentSegmentsLine segments={line.segments} />
+					</PaddedRow>
+				)
 			))}
 		</box>
 	)
@@ -499,6 +607,8 @@ export const DetailsPane = ({
 	bodyLineLimit = bodyLines,
 	paneWidth = contentWidth + 2,
 	showChecks = false,
+	conversationItems = [],
+	conversationStatus = "idle",
 	placeholderContent,
 	loadingIndicator,
 	themeId,
@@ -510,18 +620,20 @@ export const DetailsPane = ({
 	bodyLineLimit?: number
 	paneWidth?: number
 	showChecks?: boolean
+	conversationItems?: readonly PullRequestConversationItem[]
+	conversationStatus?: DetailConversationStatus
 	placeholderContent: DetailPlaceholderContent
 	loadingIndicator: string
 	themeId: ThemeId
 }) => {
-	const contentHeight = getDetailsPaneHeight({ pullRequest, contentWidth, bodyLines: bodyLineLimit, paneWidth, showChecks })
+	const contentHeight = getDetailsPaneHeight({ pullRequest, contentWidth, bodyLines: bodyLineLimit, paneWidth, showChecks, conversationItems, conversationStatus })
 
 	return (
 		<box flexDirection="column" height={contentHeight}>
 			{pullRequest ? (
 				<>
 					<DetailHeader pullRequest={pullRequest} viewerUsername={viewerUsername} contentWidth={contentWidth} paneWidth={paneWidth} showChecks={showChecks} />
-					<DetailBody pullRequest={pullRequest} contentWidth={contentWidth} bodyLines={bodyLines} bodyLineLimit={bodyLineLimit} loadingIndicator={loadingIndicator} themeId={themeId} />
+					<DetailBody pullRequest={pullRequest} contentWidth={contentWidth} paneWidth={paneWidth} bodyLines={bodyLines} bodyLineLimit={bodyLineLimit} conversationItems={conversationItems} conversationStatus={conversationStatus} loadingIndicator={loadingIndicator} themeId={themeId} />
 				</>
 			) : (
 				<>

package/src/ui/LoadingLogo.tsx

@@ -0,0 +1,75 @@
+import { TextAttributes } from "@opentui/core"
+import { colors, mixHex } from "./colors.js"
+import type { DetailPlaceholderContent } from "./DetailsPane.js"
+import { centerCell, Filler, PlainLine, TextLine } from "./primitives.js"
+import { SPINNER_FRAMES } from "./spinner.js"
+
+type LoadingLogoContent = Pick<DetailPlaceholderContent, "hint">
+
+const GHUI_LOGO = ["█▀▀▀ █  █ █  █ ▀█▀", "█ ▀█ █▀▀█ █  █  █ ", "▀▀▀▀ ▀  ▀ ▀▀▀▀ ▀▀▀"] as const
+
+const LEFT_WORD_WIDTH = 9
+const LOGO_WIDTH = Math.max(...GHUI_LOGO.map((line) => line.length))
+const LOGO_HEIGHT = GHUI_LOGO.length
+const LOGO_BLOCK_HEIGHT = LOGO_HEIGHT + 2
+
+const logoColor = (x: number) => (x < LEFT_WORD_WIDTH ? mixHex(colors.accent, colors.text, 0.14) : mixHex(colors.accent, colors.text, 0.52))
+
+const LOGO_COLORS = Array.from({ length: LOGO_WIDTH }, (_, index) => logoColor(index))
+const LOGO_ROWS = GHUI_LOGO.map((line) => Array.from(line.padEnd(LOGO_WIDTH, " "), (char, index) => ({ char, color: LOGO_COLORS[index]! })))
+
+const LogoRow = ({ row, left }: { row: (typeof LOGO_ROWS)[number]; left: number }) => (
+	<TextLine>
+		<span fg={colors.muted}>{" ".repeat(left)}</span>
+		{row.map(({ char, color }, index) =>
+			char === " " ? (
+				<span key={index}> </span>
+			) : (
+				<span key={index} fg={color} attributes={TextAttributes.BOLD}>
+					{char}
+				</span>
+			),
+		)}
+	</TextLine>
+)
+
+export const LoadingLogo = ({ content, width, frame }: { content: LoadingLogoContent; width: number; frame: number }) => {
+	const spinner = SPINNER_FRAMES[frame % SPINNER_FRAMES.length]!
+	const logoLeft = Math.max(0, Math.floor((width - LOGO_WIDTH) / 2))
+
+	return (
+		<box flexDirection="column" width={width}>
+			{LOGO_ROWS.map((row, index) => (
+				<LogoRow key={index} row={row} left={logoLeft} />
+			))}
+			<box height={1} />
+			<PlainLine text={centerCell(`${spinner} ${content.hint}`, width)} fg={colors.muted} />
+		</box>
+	)
+}
+
+export const LoadingLogoPane = ({ content, width, height, frame }: { content: LoadingLogoContent; width: number; height: number; frame: number }) => {
+	if (width < LOGO_WIDTH + 2 || height < LOGO_BLOCK_HEIGHT) {
+		const spinner = SPINNER_FRAMES[frame % SPINNER_FRAMES.length]!
+		const topRows = Math.max(0, Math.floor((height - 1) / 2))
+		const bottomRows = Math.max(0, height - topRows - 1)
+		return (
+			<box height={height} flexDirection="column">
+				<Filler rows={topRows} prefix="loading-logo-compact-top" />
+				<PlainLine text={centerCell(`${spinner} ${content.hint}`, width)} fg={colors.muted} />
+				<Filler rows={bottomRows} prefix="loading-logo-compact-bottom" />
+			</box>
+		)
+	}
+
+	const topRows = Math.max(0, Math.floor((height - LOGO_BLOCK_HEIGHT) / 2))
+	const bottomRows = Math.max(0, height - topRows - LOGO_BLOCK_HEIGHT)
+
+	return (
+		<box height={height} flexDirection="column">
+			<Filler rows={topRows} prefix="loading-logo-top" />
+			<LoadingLogo content={content} width={width} frame={frame} />
+			<Filler rows={bottomRows} prefix="loading-logo-bottom" />
+		</box>
+	)
+}