ethagent 2.4.0 → 3.0.0

package/src/chat/MessageList.tsx

@@ -7,6 +7,7 @@ import { DiffView } from './display/DiffView.js'
 import { SyntaxLine } from './display/SyntaxText.js'
 import { formatToolCall } from './display/toolCallDisplay.js'
 import { BrandSplash } from '../ui/BrandSplash.js'
+import type { RowSlice } from './transcript/transcriptViewport.js'
 
 export type ToolCallResult = {
   content: string
@@ -48,7 +49,11 @@ export type MessageRow =
     }
 
 type MessageListProps = {
-  rows: MessageRow[]
+  slices: Array<RowSlice<MessageRow>>
+}
+
+export function rowsToFullSlices(rows: MessageRow[]): Array<RowSlice<MessageRow>> {
+  return rows.map(row => ({ row, clipStart: 0, clipEnd: Number.MAX_SAFE_INTEGER, rowHeight: Number.MAX_SAFE_INTEGER }))
 }
 
 type MarkdownBlock =
@@ -70,13 +75,13 @@ const ASSISTANT_ACCENT = theme.accentPeriwinkle
 const ASSISTANT_MARKER = '• '
 const UNREADABLE_REASONING_TEXT = 'reasoning output was not readable text'
 
-const MessageListInner: React.FC<MessageListProps> = ({ rows }) => (
+const MessageListInner: React.FC<MessageListProps> = ({ slices }) => (
   <Box flexDirection="column">
-    {rows.map((row, index) => (
+    {slices.map((slice, index) => (
       <RowView
-        key={row.id}
-        row={row}
-        tightTop={row.role === 'tool_call' && rows[index - 1]?.role === 'tool_call'}
+        key={slice.row.id}
+        slice={slice}
+        tightTop={slice.row.role === 'tool_call' && slices[index - 1]?.row.role === 'tool_call'}
       />
     ))}
   </Box>
@@ -121,7 +126,8 @@ export function toggleInspectableRow(rows: MessageRow[], rowId?: string): Messag
   return rows
 }
 
-const RowViewInner: React.FC<{ row: MessageRow; tightTop?: boolean }> = ({ row, tightTop }) => {
+const RowViewInner: React.FC<{ slice: RowSlice<MessageRow>; tightTop?: boolean }> = ({ slice, tightTop }) => {
+  const { row, clipStart, clipEnd, rowHeight } = slice
   if (row.role === 'user') {
     const display = clipTextForDisplay(row.content, MAX_RENDERED_MESSAGE_CHARS)
     const lines = display.text.length === 0 ? [''] : display.text.split('\n')
@@ -141,9 +147,18 @@ const RowViewInner: React.FC<{ row: MessageRow; tightTop?: boolean }> = ({ row,
   }
 
   if (row.role === 'assistant') {
+    const showTopMargin = clipStart === 0
+    const bodyClipStart = showTopMargin ? 0 : clipStart - 1
+    const bodyClipEnd = clipEnd !== undefined ? Math.max(0, clipEnd - 1) : undefined
     return (
-      <Box flexDirection="column" marginTop={1}>
-        <AssistantBody content={row.content} liveTail={row.liveTail} streaming={row.streaming} />
+      <Box flexDirection="column" marginTop={showTopMargin ? 1 : 0}>
+        <AssistantBody
+          content={row.content}
+          liveTail={row.liveTail}
+          streaming={row.streaming}
+          clipStart={bodyClipStart}
+          clipEnd={bodyClipEnd}
+        />
       </Box>
     )
   }
@@ -161,6 +176,9 @@ const RowViewInner: React.FC<{ row: MessageRow; tightTop?: boolean }> = ({ row,
           expanded
           active={active}
           showCursor={showCursor}
+          clipStart={clipStart}
+          clipEnd={clipEnd}
+          rowHeight={rowHeight}
         />
       )
     }
@@ -170,6 +188,9 @@ const RowViewInner: React.FC<{ row: MessageRow; tightTop?: boolean }> = ({ row,
         detail="alt+t inspect"
         active={active}
         showCursor={showCursor}
+        clipStart={clipStart}
+        clipEnd={clipEnd}
+        rowHeight={rowHeight}
       />
     )
   }
@@ -307,7 +328,10 @@ const ReasoningBlock: React.FC<{
   active?: boolean
   expanded?: boolean
   showCursor?: boolean
-}> = ({ content, detail, active = false, expanded = false, showCursor }) => {
+  clipStart?: number
+  clipEnd?: number
+  rowHeight?: number
+}> = ({ content, detail, active = false, expanded = false, showCursor, clipStart = 0, clipEnd, rowHeight }) => {
   const display = useMemo(
     () => clipTextForDisplay(content, MAX_RENDERED_REASONING_CHARS),
     [content],
@@ -317,31 +341,54 @@ const ReasoningBlock: React.FC<{
     return normalized.length === 0 ? [''] : normalized.split('\n')
   }, [display.text])
 
+  const omittedVisible = display.omittedChars > 0
+  const totalLines = rowHeight ?? (1 + (omittedVisible ? 1 : 0) + 1 + (expanded ? lines.length : 0))
+  const effClipEnd = clipEnd ?? totalLines
+
+  const lineInClip = (n: number) => n >= clipStart && n < effClipEnd
+  const showMargin = lineInClip(0)
+  const omittedLine = 1
+  const headerLine = omittedVisible ? 2 : 1
+  const bodyStartLine = headerLine + 1
+
+  const lastBodyIndex = lines.length - 1
+  const visibleBody: Array<{ index: number; text: string }> = []
+  if (expanded) {
+    for (let i = 0; i < lines.length; i += 1) {
+      const ln = bodyStartLine + i
+      if (ln >= effClipEnd) break
+      if (ln < clipStart) continue
+      visibleBody.push({ index: i, text: lines[i] ?? '' })
+    }
+  }
+
   return (
-    <Box flexDirection="column" marginTop={1}>
-      {display.omittedChars > 0 ? (
+    <Box flexDirection="column" marginTop={showMargin ? 1 : 0}>
+      {omittedVisible && lineInClip(omittedLine) ? (
         <Text color={theme.dim}>{`${display.omittedChars} earlier reasoning characters omitted`}</Text>
       ) : null}
-      <Text>
-        <AssistantMarker />
-        <ShimmerText
-          text={expanded ? 'Thinking…' : 'Thinking'}
-          color={theme.accentPeriwinkle}
-          active={active}
-          bold
-          italic
-        />
-        <Text color={theme.dim}>{` · ${detail}`}</Text>
-        {!expanded && showCursor ? <ThinkingCursor active hasPreview /> : null}
-      </Text>
-      {expanded ? (
+      {lineInClip(headerLine) ? (
+        <Text>
+          <AssistantMarker />
+          <ShimmerText
+            text={expanded ? 'Thinking…' : 'Thinking'}
+            color={theme.accentPeriwinkle}
+            active={active}
+            bold
+            italic
+          />
+          <Text color={theme.dim}>{` · ${detail}`}</Text>
+          {!expanded && showCursor ? <ThinkingCursor active hasPreview /> : null}
+        </Text>
+      ) : null}
+      {expanded && visibleBody.length > 0 ? (
         <Box flexDirection="column" marginLeft={2}>
-          {lines.map((line, index) => (
+          {visibleBody.map(({ index, text }) => (
             <Box key={index}>
               <Text color={theme.textSubtle}>
                 <Text color={theme.dim}>{'  '}</Text>
-                {line || ' '}
-                {showCursor && index === lines.length - 1 ? <ThinkingCursor active hasPreview={line.length > 0} /> : null}
+                {text || ' '}
+                {showCursor && index === lastBodyIndex ? <ThinkingCursor active hasPreview={text.length > 0} /> : null}
               </Text>
             </Box>
           ))}
@@ -351,39 +398,133 @@ const ReasoningBlock: React.FC<{
   )
 }
 
-const AssistantBody: React.FC<{ content: string; liveTail?: string; streaming?: boolean }> = ({
-  content,
-  liveTail,
-  streaming,
-}) => {
+const AssistantBody: React.FC<{
+  content: string
+  liveTail?: string
+  streaming?: boolean
+  clipStart?: number
+  clipEnd?: number
+}> = ({ content, liveTail, streaming, clipStart = 0, clipEnd }) => {
   const fullText = liveTail ? content + liveTail : content
-  const display = useMemo(
-    () => clipTextForDisplay(fullText, MAX_RENDERED_MESSAGE_CHARS),
-    [fullText],
+  const nodes = useMemo(
+    () => flattenAssistantBody(fullText, Boolean(streaming)),
+    [fullText, streaming],
   )
-  const blocks = useMemo(() => parseMarkdownBlocks(display.text), [display.text])
-
+  const effClipEnd = clipEnd ?? nodes.length
+  const visible = nodes.slice(clipStart, effClipEnd)
   return (
     <Box flexDirection="column">
-      {display.omittedChars > 0 ? (
-        <Text color={theme.dim}>{`${display.omittedChars} earlier characters omitted`}</Text>
-      ) : null}
-      {blocks.map((block, index) => (
-        <MarkdownBlockView
-          key={index}
-          block={block}
-          streaming={streaming && index === blocks.length - 1}
-          prefix={index === 0 || block.kind === 'code' ? <AssistantMarker /> : null}
-        />
+      {visible.map((node, i) => (
+        <React.Fragment key={clipStart + i}>{node}</React.Fragment>
       ))}
-      {streaming && blocks.length === 0 ? (
+    </Box>
+  )
+}
+
+export function flattenAssistantBody(fullText: string, streaming: boolean): React.ReactNode[] {
+  const display = clipTextForDisplay(fullText, MAX_RENDERED_MESSAGE_CHARS)
+  const blocks = parseMarkdownBlocks(display.text)
+  const nodes: React.ReactNode[] = []
+
+  if (display.omittedChars > 0) {
+    nodes.push(
+      <Text color={theme.dim}>{`${display.omittedChars} earlier characters omitted`}</Text>,
+    )
+  }
+
+  if (blocks.length === 0) {
+    if (streaming) {
+      nodes.push(
         <Text>
           <AssistantMarker />
           <Text color={ASSISTANT_ACCENT}><StreamCursor active /></Text>
-        </Text>
-      ) : null}
-    </Box>
-  )
+        </Text>,
+      )
+    }
+    return nodes
+  }
+
+  for (let bi = 0; bi < blocks.length; bi += 1) {
+    const block = blocks[bi]!
+    const isLastBlock = bi === blocks.length - 1
+    const prefix = bi === 0 || block.kind === 'code' ? <AssistantMarker /> : null
+    const streamingLast = streaming && isLastBlock
+
+    nodes.push(<Text> </Text>)
+
+    if (block.kind === 'heading') {
+      nodes.push(
+        <Text>
+          {prefix}
+          <InlineText text={block.text} color={ASSISTANT_ACCENT} bold />
+        </Text>,
+      )
+      continue
+    }
+
+    if (block.kind === 'quote') {
+      block.lines.forEach((line, li) => {
+        nodes.push(
+          <Text>
+            {li === 0 ? prefix : null}
+            <Text color={ASSISTANT_ACCENT}>| </Text>
+            <InlineText text={line} color={theme.dim} />
+          </Text>,
+        )
+      })
+      continue
+    }
+
+    if (block.kind === 'list') {
+      block.items.forEach((item, li) => {
+        nodes.push(
+          <Text>
+            {li === 0 ? prefix : null}
+            <Text color={ASSISTANT_ACCENT}>{block.ordered ? `${li + 1}. ` : '- '}</Text>
+            <InlineText text={item} color={theme.text} />
+          </Text>,
+        )
+      })
+      continue
+    }
+
+    if (block.kind === 'code') {
+      nodes.push(
+        <Text>
+          {prefix}
+          <Text color={theme.accentPeriwinkle} bold>{block.lang ?? 'code'}</Text>
+          {block.open ? <Text color={theme.dim}> streaming</Text> : null}
+        </Text>,
+      )
+      const codeLines = block.code.length === 0 ? [''] : block.code.split('\n')
+      const isShell = block.lang === 'bash' || block.lang === 'sh'
+      codeLines.forEach((line, li) => {
+        const isLastCode = li === codeLines.length - 1
+        nodes.push(
+          <Text>
+            <Text color={theme.dim}>{`  ${isShell ? '$ ' : '  '}`}</Text>
+            <SyntaxLine line={line} lang={block.lang} fallbackColor={theme.textSubtle} />
+            {block.open && isLastCode ? <Text color={ASSISTANT_ACCENT}> <StreamCursor active /></Text> : null}
+          </Text>,
+        )
+      })
+      continue
+    }
+
+    const paragraphLines = block.text.split('\n')
+    paragraphLines.forEach((line, li) => {
+      const isLastLine = li === paragraphLines.length - 1
+      nodes.push(
+        <Text>
+          {li === 0 ? prefix : null}
+          <InlineText text={line} color={theme.text} />
+          {streamingLast && isLastLine ? <Text color={ASSISTANT_ACCENT}> <StreamCursor active /></Text> : null}
+        </Text>,
+      )
+    })
+  }
+
+  return nodes
 }
 
 const AssistantMarker: React.FC = () => (

package/src/chat/chatSessionState.ts

@@ -52,7 +52,7 @@ export function resolveModelSelection(
         baseUrl,
         localMmprojPath: selection.mmprojPath,
       },
-      notice: `Local Hugging Face model ready. Now using ${formatModelDisplayName('llamacpp', selection.model, { maxLength: 64 })}${selection.mmprojPath ? ' with vision encoder' : ''}.`,
+      notice: `llama.cpp ready. Now using ${formatModelDisplayName('llamacpp', selection.model, { maxLength: 64 })}${selection.mmprojPath ? ' · vision' : ''}.`,
       tone: 'info',
     }
   }

package/src/chat/chatTurnOrchestrator.ts

@@ -9,6 +9,8 @@ import type { EthagentConfig } from '../storage/config.js'
 import type { SessionMessage } from '../storage/sessions.js'
 import type { SessionPermissionRule, ToolResult } from '../tools/contracts.js'
 import { readContinuityFiles } from '../identity/continuity/storage.js'
+import { listSkillsTree } from '../identity/continuity/skills/loadSkills.js'
+import { isDraftScaffold } from '../identity/continuity/skills/scaffold.js'
 import type { MessageRow } from './MessageList.js'
 import {
   buildBaseMessages,
@@ -121,6 +123,7 @@ export async function runStreamingTurn(
     return [
       ...(baseSystem ? [baseSystem] : []),
       ...await buildIdentityContinuityContextMessages(getConfig()),
+      ...await buildSkillsIndexMessage(getConfig()),
       ...conversationMessages,
       ...mentionContextMessages,
     ]
@@ -399,6 +402,11 @@ async function handleEvent(ev: TurnEvent, ctx: EventHandlerContext): Promise<voi
       ctx.flushStreamRows()
       return
     }
+    case 'thinking_end': {
+      ctx.flushStreamRows(true)
+      ctx.stopThinkingCursor()
+      return
+    }
     case 'retry': {
       return
     }
@@ -565,6 +573,57 @@ async function buildFileMentionContextMessages(
   ]
 }
 
+const PRIVATE_SKILLS_INDEX_BUDGET = 2048
+
+export async function buildSkillsIndexMessage(
+  config: EthagentConfig,
+): Promise<Message[]> {
+  const identity = config.identity
+  if (!identity) return []
+  try {
+    const { skills, supportingCounts } = await listSkillsTree(identity)
+    const entries = skills.filter(entry => !isDraftScaffold(entry))
+    if (entries.length === 0) return []
+    const header = [
+      '<private_skills index="true" visibility="private">',
+      'Private skills are owner-authored content packs available for this active identity.',
+      'Each line shows skill_name — description. When an entry ends with (+N supporting files), call list_private_skill_files to see relative + absolute paths for each file. Read text content via read_private_skill with file:; run executable supporting scripts with run_bash using the absolute path returned by list_private_skill_files. Call list_private_skills for the full index.',
+    ]
+    const lines: string[] = []
+    let charCount = header.reduce((sum, line) => sum + line.length + 1, 0)
+    let included = 0
+    let dropped = 0
+    for (const entry of entries) {
+      const displayName = entry.displayName ?? entry.name
+      const desc = entry.description ? ` — ${entry.description}` : ''
+      const hint = entry.whenToUse ? ` (when: ${entry.whenToUse})` : ''
+      const supporting = supportingCounts[entry.name] ?? 0
+      const trailer = supporting > 0
+        ? ` (+${supporting} supporting file${supporting === 1 ? '' : 's'})`
+        : ''
+      const line = `- ${displayName}${desc}${hint}${trailer}`
+      if (charCount + line.length + 1 > PRIVATE_SKILLS_INDEX_BUDGET && included > 0) {
+        dropped = entries.length - included
+        break
+      }
+      lines.push(line)
+      charCount += line.length + 1
+      included++
+    }
+    const footer: string[] = []
+    if (dropped > 0) {
+      footer.push(`(${dropped} more — call list_private_skills to enumerate)`)
+    }
+    footer.push('</private_skills>')
+    return [{
+      role: 'system',
+      content: [...header, ...lines, ...footer].join('\n'),
+    }]
+  } catch {
+    return []
+  }
+}
+
 export async function buildIdentityContinuityContextMessages(
   config: EthagentConfig,
 ): Promise<Message[]> {

package/src/chat/input/ChatInput.tsx

@@ -522,6 +522,9 @@ export const ChatInput: React.FC<PromptInputProps> = ({
     }
     if (key.tab || key.escape) return
     if (key.ctrl || key.meta) return
+    if (key.return || key.backspace || key.delete) return
+    if (key.upArrow || key.downArrow || key.leftArrow || key.rightArrow) return
+    if (key.pageUp || key.pageDown || key.home || key.end) return
 
     if (inputText) {
       insertText(inputText)

package/src/chat/input/textCursor.ts

@@ -1,3 +1,5 @@
+import wrapAnsi from 'wrap-ansi'
+
 export type TextCursor = {
   value: string
   offset: number
@@ -60,10 +62,18 @@ export function getVisualLines(value: string, wrapWidth: number): VisualLine[] {
     if (start === end) {
       lines.push({ start, end })
     } else {
-      for (let chunkStart = start; chunkStart < end; chunkStart += safeWrapWidth) {
-        lines.push({ start: chunkStart, end: Math.min(chunkStart + safeWrapWidth, end) })
+      const logical = value.slice(start, end)
+      const wrapped = wrapAnsi(logical, safeWrapWidth, { trim: false, hard: true, wordWrap: true })
+      const wrappedLines = wrapped.split('\n')
+      let cursor = start
+      let lastEnd = start
+      for (const line of wrappedLines) {
+        const lineEnd = cursor + line.length
+        lines.push({ start: cursor, end: lineEnd })
+        cursor = lineEnd
+        lastEnd = lineEnd
       }
-      if (end === value.length && (end - start) % safeWrapWidth === 0) {
+      if (end === value.length && lastEnd === end && wrappedLines[wrappedLines.length - 1]!.length === safeWrapWidth) {
         lines.push({ start: end, end })
       }
     }

package/src/chat/transcript/TranscriptView.tsx

@@ -23,8 +23,8 @@ type TranscriptViewProps = {
   onScrollabilityChange?: (canScroll: boolean) => void
 }
 
-const PROMPT_RESERVED_LINES = 7
-const OVERLAY_RESERVED_LINES = 12
+const PROMPT_RESERVED_LINES = 12
+const OVERLAY_RESERVED_LINES = 16
 const MIN_TRANSCRIPT_LINES = 6
 const MAX_TRANSCRIPT_LINES = 240
 
@@ -73,8 +73,10 @@ export const TranscriptView: React.FC<TranscriptViewProps> = ({
   )
   const visibleReasoningIds = useMemo(
     () => selection.rows
-      .filter((row): row is Extract<MessageRow, { role: 'thinking' }> => row.role === 'thinking')
-      .map(row => row.id),
+      .filter((slice): slice is { row: Extract<MessageRow, { role: 'thinking' }>; clipStart: number; clipEnd: number; rowHeight: number } =>
+        slice.row.role === 'thinking',
+      )
+      .map(slice => slice.row.id),
     [selection.rows],
   )
 
@@ -129,7 +131,7 @@ export const TranscriptView: React.FC<TranscriptViewProps> = ({
           {` saves the full transcript`}
         </Text>
       ) : null}
-      <MessageList rows={selection.rows} />
+      <MessageList slices={selection.rows} />
       {selection.hiddenAfter > 0 ? (
         <Text color={theme.dim}>
           {`  ${selection.hiddenAfter} later message${selection.hiddenAfter === 1 ? '' : 's'} below · `}

package/src/chat/transcript/transcriptViewport.ts

@@ -1,4 +1,5 @@
 import type { MessageRow } from '../MessageList.js'
+import { flattenAssistantBody } from '../MessageList.js'
 
 export type TranscriptAnchor = {
   rowId: string
@@ -11,6 +12,13 @@ export type TranscriptViewportState = {
   anchor: TranscriptAnchor | null
 }
 
+export type RowSlice<T> = {
+  row: T
+  clipStart: number
+  clipEnd: number
+  rowHeight: number
+}
+
 export function buildLineOffsets(rowHeights: number[]): number[] {
   const out = new Array<number>(rowHeights.length + 1).fill(0)
   for (let i = 0; i < rowHeights.length; i += 1) {
@@ -62,12 +70,12 @@ export function clampLine(line: number, maxScrollTop: number): number {
 }
 
 export type TranscriptTailSelection<T> = {
-  rows: T[]
+  rows: Array<RowSlice<T>>
   hiddenCount: number
 }
 
 export type TranscriptWindowSelection<T> = {
-  rows: T[]
+  rows: Array<RowSlice<T>>
   hiddenBefore: number
   hiddenAfter: number
   totalLines: number
@@ -94,8 +102,12 @@ export function selectTailRowsForViewport<T>(
   }
 
   const firstVisible = Math.max(0, start + 1)
+  const slice = rows.slice(firstVisible).map(row => {
+    const height = Math.max(1, estimateHeight(row))
+    return { row, clipStart: 0, clipEnd: height, rowHeight: height }
+  })
   return {
-    rows: rows.slice(firstVisible),
+    rows: slice,
     hiddenCount: firstVisible,
   }
 }
@@ -118,7 +130,7 @@ export function selectRowsForScrollOffset<T>(
   const scrollOffset = clampLine(scrollOffsetFromTail, maxScrollOffset)
   const startLine = Math.max(0, totalLines - budget - scrollOffset)
 
-  return selectRowsForLineWindow(rows, offsets, budget, startLine, totalLines, maxScrollOffset)
+  return selectRowsForLineWindow(rows, heights, offsets, budget, startLine, totalLines, maxScrollOffset)
 }
 
 export function selectRowsForScrollTop<T>(
@@ -138,7 +150,7 @@ export function selectRowsForScrollTop<T>(
   const maxScrollOffset = Math.max(0, totalLines - budget)
   const startLine = clampLine(scrollTopLine, maxScrollOffset)
 
-  return selectRowsForLineWindow(rows, offsets, budget, startLine, totalLines, maxScrollOffset)
+  return selectRowsForLineWindow(rows, heights, offsets, budget, startLine, totalLines, maxScrollOffset)
 }
 
 export function scrollTopForPageUp(
@@ -159,11 +171,12 @@ export function scrollTopForPageDown(
 
 function pageScrollDistance(viewportLines: number): number {
   const viewport = Math.max(1, Math.floor(viewportLines))
-  return Math.max(1, Math.floor(viewport / 2))
+  return Math.max(1, viewport - 2)
 }
 
 function selectRowsForLineWindow<T>(
   rows: T[],
+  heights: number[],
   offsets: number[],
   budget: number,
   startLine: number,
@@ -178,8 +191,20 @@ function selectRowsForLineWindow<T>(
     ? rows.length
     : Math.min(rows.length, findRowIndexAtLine(offsets, lastVisibleLine) + 1)
 
+  const slices: Array<RowSlice<T>> = []
+  for (let i = startIndex; i < endIndex; i += 1) {
+    const row = rows[i]
+    if (!row) continue
+    const rowTop = offsets[i] ?? 0
+    const height = heights[i] ?? 1
+    const clipStart = Math.max(0, startLine - rowTop)
+    const clipEnd = Math.min(height, endLine - rowTop)
+    if (clipEnd <= clipStart) continue
+    slices.push({ row, clipStart, clipEnd, rowHeight: height })
+  }
+
   return {
-    rows: rows.slice(startIndex, endIndex),
+    rows: slices,
     hiddenBefore: startIndex,
     hiddenAfter: rows.length - endIndex,
     totalLines,
@@ -191,13 +216,11 @@ export function estimateMessageRowHeight(row: MessageRow, columns = 80): number
   const contentWidth = Math.max(20, columns - 8)
   switch (row.role) {
     case 'user':
-      return 1 + wrappedLineCount(row.content, contentWidth)
+      return userRowLineCount(row.content, contentWidth)
     case 'assistant':
-      return 1 + wrappedLineCount([row.content, row.liveTail ?? ''].filter(Boolean).join('\n'), contentWidth)
+      return assistantRowLineCount(row.content, row.liveTail ?? '', contentWidth, Boolean(row.streaming))
     case 'thinking':
-      return row.expanded
-        ? 3 + wrappedLineCount([row.content, row.liveTail ?? ''].filter(Boolean).join('\n'), contentWidth)
-        : 3 + wrappedLineCount(reasoningPreview(row), contentWidth)
+      return thinkingRowLineCount(row, contentWidth)
     case 'tool_call':
       return 1
     case 'note':
@@ -209,11 +232,59 @@ export function estimateMessageRowHeight(row: MessageRow, columns = 80): number
   }
 }
 
-function reasoningPreview(row: Extract<MessageRow, { role: 'thinking' }>): string {
-  const normalized = [row.content, row.liveTail ?? ''].filter(Boolean).join('').replace(/\s+/g, ' ').trim()
-  if (!normalized) return 'thinking...'
-  if (normalized.length <= 120) return normalized
-  return `${normalized.slice(0, 117)}...`
+export function userRowLineCount(content: string, contentWidth: number): number {
+  const lines = splitLines(content)
+  return 1 + lines.reduce((sum, line) => sum + Math.max(1, Math.ceil(line.length / contentWidth)), 0)
+}
+
+export function assistantRowLineCount(content: string, liveTail: string, _contentWidth: number, streaming = false): number {
+  const fullText = liveTail ? content + liveTail : content
+  return 1 + flattenAssistantBody(fullText, streaming).length
+}
+
+export function thinkingRowLineCount(
+  row: Extract<MessageRow, { role: 'thinking' }>,
+  _contentWidth: number,
+): number {
+  const omitted = thinkingDisplayOmittedChars(row)
+  const overhead = 1 + (omitted > 0 ? 1 : 0) + 1
+  if (!row.expanded) return overhead
+  const body = thinkingDisplayBody(row)
+  const lines = splitLines(body)
+  return overhead + lines.length
+}
+
+export function thinkingDisplayBody(row: Extract<MessageRow, { role: 'thinking' }>): string {
+  const text = row.liveTail ? row.content + row.liveTail : row.content
+  return clipReasoningForDisplayText(text)
+}
+
+export function thinkingDisplayOmittedChars(row: Extract<MessageRow, { role: 'thinking' }>): number {
+  const text = row.liveTail ? row.content + row.liveTail : row.content
+  return clipReasoningForDisplayOmitted(text)
+}
+
+const MAX_RENDERED_REASONING_CHARS = 10_000
+
+function clipReasoningForDisplayText(text: string): string {
+  if (text.length <= MAX_RENDERED_REASONING_CHARS) return text
+  const rawStart = Math.max(0, text.length - MAX_RENDERED_REASONING_CHARS)
+  const newline = text.indexOf('\n', rawStart)
+  const start = newline >= 0 && newline - rawStart <= 240 ? newline + 1 : rawStart
+  return text.slice(start)
+}
+
+function clipReasoningForDisplayOmitted(text: string): number {
+  if (text.length <= MAX_RENDERED_REASONING_CHARS) return 0
+  const rawStart = Math.max(0, text.length - MAX_RENDERED_REASONING_CHARS)
+  const newline = text.indexOf('\n', rawStart)
+  return newline >= 0 && newline - rawStart <= 240 ? newline + 1 : rawStart
+}
+
+export function splitLines(text: string): string[] {
+  if (!text) return ['']
+  const normalized = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
+  return normalized.split('\n')
 }
 
 function wrappedLineCount(text: string, width: number): number {