@kitlangton/ghui 0.1.21 → 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,77 +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 queryText = query.length > 0 ? query : "type a command, state, or shortcut"
-	const queryWidth = Math.max(1, contentWidth - 2)
+	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="Command Palette"
-			headerRight={{ text: countText }}
-			subtitle={
+			junctionRows={[1, modalHeight - 4]}
+			topJunctionColumns={[dividerColumn]}
+		>
+			<PaddedRow>
 				<TextLine>
-					<span fg={colors.count}>› </span>
-					<span fg={query.length > 0 ? colors.text : colors.muted}>{fitCell(queryText, queryWidth)}</span>
+					<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.muted} fg={caretFg}> </span>
+							{queryPadding > 0 ? <span>{" ".repeat(queryPadding)}</span> : null}
+						</>
+					) : (
+						<>
+							<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,7 +23,12 @@ 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
+const codeFenceLine = (line: string) => line.trim().replace(/\\`/g, "`").match(codeFencePattern)
 
 export const wrapText = (text: string, width: number): string[] => {
 	if (text.length === 0 || width <= 0) return [""]
@@ -63,6 +66,29 @@ const parseInlineSegments = (text: string, fg: string, bold = false): PreviewLin
 	})
 }
 
+const parseCodeSegments = (text: string): PreviewLine["segments"] => {
+	const segments: Array<PreviewLine["segments"][number]> = []
+	let index = 0
+	for (const match of text.matchAll(codeTokenPattern)) {
+		const start = match.index ?? 0
+		if (start > index) segments.push({ text: text.slice(index, start), fg: colors.text })
+		const token = match[0]
+		const fg = token.startsWith("//")
+			? colors.muted
+			: token.startsWith("`") || token.startsWith("\"") || token.startsWith("'")
+				? colors.inlineCode
+				: /^\d/.test(token)
+					? colors.status.review
+					: token === "true" || token === "false" || token === "null" || token === "undefined"
+						? colors.status.review
+						: colors.accent
+		segments.push({ text: token, fg, bold: fg === colors.accent })
+		index = start + token.length
+	}
+	if (index < text.length) segments.push({ text: text.slice(index), fg: colors.text })
+	return segments.length > 0 ? segments : [{ text: "", fg: colors.muted }]
+}
+
 const wrapPreviewSegments = (segments: PreviewLine["segments"], width: number, indent = ""): Array<PreviewLine> => {
 	const tokens = segments.flatMap((segment) =>
 		segment.text.split(/(\s+)/).filter((token) => token.length > 0).map((token) => ({ ...segment, text: token })),
@@ -102,11 +128,13 @@ const bodyPreview = (body: string, width: number, limit = DETAIL_BODY_LINES): Ar
 	for (const rawLine of sourceLines) {
 		if (preview.length >= limit) break
 
-		const line = rawLine.trim()
-		if (line.startsWith("```")) {
+		const fence = codeFenceLine(rawLine)
+		if (fence) {
 			inCodeBlock = !inCodeBlock
 			continue
 		}
+
+		const line = inCodeBlock ? rawLine.replace(/\t/g, "  ") : rawLine.trim()
 		if (line.length === 0) continue
 
 		let text = line
@@ -142,11 +170,9 @@ const bodyPreview = (body: string, width: number, limit = DETAIL_BODY_LINES): Ar
 			text = `> ${line.replace(/^>\s+/, "")}`
 			fg = colors.muted
 			indent = "  "
-		} else if (inCodeBlock) {
-			fg = colors.muted
 		}
 
-		const wrapped = wrapPreviewSegments(parseInlineSegments(text, fg, bold), Math.max(16, width), indent)
+		const wrapped = wrapPreviewSegments(inCodeBlock ? parseCodeSegments(text) : parseInlineSegments(text, fg, bold), Math.max(16, width), indent)
 		for (const wrappedLine of wrapped) {
 			preview.push(wrappedLine)
 			if (preview.length >= limit) break
@@ -160,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) {
@@ -204,9 +309,10 @@ const ChecksSection = ({ checks, contentWidth }: { checks: readonly CheckItem[];
 	const unique = deduplicateChecks(checks)
 	if (unique.length === 0) return null
 
-	const colWidth = Math.floor((contentWidth - 1) / 2)
+	const columns = 2
+	const colWidth = Math.floor((contentWidth - 1) / columns)
 	const nameCol = Math.max(4, colWidth - 2)
-	const rows = Math.ceil(unique.length / 2)
+	const rows = Math.ceil(unique.length / columns)
 
 	return (
 		<box flexDirection="column">
@@ -214,23 +320,22 @@ const ChecksSection = ({ checks, contentWidth }: { checks: readonly CheckItem[];
 				<span fg={colors.count} attributes={TextAttributes.BOLD}>Checks</span>
 			</TextLine>
 			{Array.from({ length: rows }, (_, rowIndex) => {
-				const left = unique[rowIndex * 2]
-				const right = unique[rowIndex * 2 + 1]
 				return (
 					<TextLine key={rowIndex}>
-						{left ? (
-							<>
-								<span fg={checkColor(left)}>{checkIcon(left)} </span>
-								<span fg={colors.text}>{fitCell(left.name, nameCol)}</span>
-							</>
-						) : null}
-						{right ? (
-							<>
-								<span fg={colors.muted}> </span>
-								<span fg={checkColor(right)}>{checkIcon(right)} </span>
-								<span fg={colors.text}>{right.name}</span>
-							</>
-						) : null}
+						{Array.from({ length: columns }, (_, columnIndex) => {
+							const check = unique[rowIndex * columns + columnIndex]
+							return (
+								<Fragment key={columnIndex}>
+									{columnIndex > 0 ? <span fg={colors.muted}> </span> : null}
+									{check ? (
+										<>
+											<span fg={checkColor(check)}>{checkIcon(check)} </span>
+											<span fg={colors.text}>{fitCell(check.name, nameCol)}</span>
+										</>
+									) : <span>{" ".repeat(colWidth)}</span>}
+								</Fragment>
+							)
+						})}
 					</TextLine>
 				)
 			})}
@@ -238,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) => {
@@ -255,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 = ({
@@ -271,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 = ({
@@ -368,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) {
@@ -398,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>
 	)
@@ -473,6 +607,8 @@ export const DetailsPane = ({
 	bodyLineLimit = bodyLines,
 	paneWidth = contentWidth + 2,
 	showChecks = false,
+	conversationItems = [],
+	conversationStatus = "idle",
 	placeholderContent,
 	loadingIndicator,
 	themeId,
@@ -484,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} />
 				</>
 			) : (
 				<>