ethagent 2.3.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

@@ -39,6 +39,7 @@ export function resolveModelSelection(
       selection.model === currentConfig.model
       && currentConfig.provider === 'llamacpp'
       && currentConfig.baseUrl === baseUrl
+      && currentConfig.localMmprojPath === selection.mmprojPath
     ) {
       return { kind: 'noop' }
     }
@@ -49,8 +50,9 @@ export function resolveModelSelection(
         provider: 'llamacpp',
         model: selection.model,
         baseUrl,
+        localMmprojPath: selection.mmprojPath,
       },
-      notice: `Local Hugging Face model ready. Now using ${formatModelDisplayName('llamacpp', selection.model, { maxLength: 64 })}.`,
+      notice: `llama.cpp ready. Now using ${formatModelDisplayName('llamacpp', selection.model, { maxLength: 64 })}${selection.mmprojPath ? ' · vision' : ''}.`,
       tone: 'info',
     }
   }
@@ -65,6 +67,7 @@ export function resolveModelSelection(
     provider: nextProvider,
     model: selection.model,
     baseUrl: nextBaseUrl,
+    localMmprojPath: undefined,
   }
 
   return {

package/src/chat/chatTurnOrchestrator.ts

@@ -9,12 +9,15 @@ 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,
   createTurnCheckpoint,
   type TurnCheckpoint,
 } from './chatScreenUtils.js'
+import { collapseImagePathsToRefs, userTextToContentBlocks } from '../utils/images.js'
 
 type MutableRef<T> = { current: T }
 
@@ -101,10 +104,13 @@ export async function runStreamingTurn(
   const activeCheckpoint = createTurnCheckpoint(sessionId, userText)
   setActiveCheckpoint(activeCheckpoint)
 
-  updateRows(prev => [...prev, { role: 'user', id: nextRowId(), content: userText }])
+  const userContent = userTextToContentBlocks(userText)
+  const displayText = collapseImagePathsToRefs(userText)
+  updateRows(prev => [...prev, { role: 'user', id: nextRowId(), content: displayText }])
   await persistTurnMessage({
     role: 'user',
-    content: userText,
+    content: displayText,
+    providerContent: typeof userContent === 'string' ? undefined : userContent,
     createdAt: nowIso(),
     turnId: activeCheckpoint.turnId,
   })
@@ -117,6 +123,7 @@ export async function runStreamingTurn(
     return [
       ...(baseSystem ? [baseSystem] : []),
       ...await buildIdentityContinuityContextMessages(getConfig()),
+      ...await buildSkillsIndexMessage(getConfig()),
       ...conversationMessages,
       ...mentionContextMessages,
     ]
@@ -395,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
     }
@@ -561,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

@@ -33,6 +33,12 @@ import {
   shouldCollapsePastedText,
   type PastedTextRef,
 } from './chatPaste.js'
+import {
+  expandImageRefs,
+  formatImageRefMarker,
+  pruneImageRefs,
+  type ImageRef,
+} from './imageRefs.js'
 
 type PromptInputProps = {
   onSubmit: (value: string) => void
@@ -48,6 +54,7 @@ type PromptInputProps = {
   cwd?: string
   seedText?: string | null
   onSeedConsumed?: () => void
+  onImagePaste?: (path: string) => void
 }
 
 const MAX_LENGTH = 32_768
@@ -76,6 +83,7 @@ export const ChatInput: React.FC<PromptInputProps> = ({
   cwd,
   seedText,
   onSeedConsumed,
+  onImagePaste,
 }) => {
   const { stdout } = useStdout()
   const [buffer, setBuffer] = useState<ChatBuffer>(emptyBuffer)
@@ -100,6 +108,8 @@ export const ChatInput: React.FC<PromptInputProps> = ({
   const pasteTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const pastedTextRefsRef = useRef<Map<number, PastedTextRef>>(new Map())
   const nextPastedTextRefIdRef = useRef(1)
+  const imageRefsRef = useRef<Map<number, ImageRef>>(new Map())
+  const nextImageRefIdRef = useRef(1)
 
   useEffect(() => { bufferRef.current = buffer }, [buffer])
   useEffect(() => { historyIndexRef.current = historyIndex }, [historyIndex])
@@ -107,6 +117,11 @@ export const ChatInput: React.FC<PromptInputProps> = ({
   useEffect(() => { historyPreviewActiveRef.current = historyPreviewActive }, [historyPreviewActive])
   useEffect(() => { preferredColumnRef.current = preferredColumn }, [preferredColumn])
 
+  useEffect(() => {
+    pruneImageRefs(imageRefsRef.current, value)
+    if (imageRefsRef.current.size === 0) nextImageRefIdRef.current = 1
+  }, [value])
+
   useEffect(() => {
     const handleResize = () => {
       setColumns(stdout.columns ?? process.stdout.columns ?? 80)
@@ -217,6 +232,8 @@ export const ChatInput: React.FC<PromptInputProps> = ({
     })
     pastedTextRefsRef.current.clear()
     nextPastedTextRefIdRef.current = 1
+    imageRefsRef.current.clear()
+    nextImageRefIdRef.current = 1
   }, [applyBuffer, applyHistoryState])
 
   const handlePaste = useCallback((text: string) => {
@@ -257,7 +274,8 @@ export const ChatInput: React.FC<PromptInputProps> = ({
   const submit = useCallback(() => {
     const trimmed = value.trim()
     if (!trimmed) return
-    onSubmit(expandPastedTextRefs(trimmed, pastedTextRefsRef.current))
+    const withText = expandPastedTextRefs(trimmed, pastedTextRefsRef.current)
+    onSubmit(expandImageRefs(withText, imageRefsRef.current))
     resetBuffer()
   }, [value, onSubmit, resetBuffer])
 
@@ -388,7 +406,12 @@ export const ChatInput: React.FC<PromptInputProps> = ({
     if (key.meta && inputText === 'v') {
       void (async () => {
         const image = await readClipboardImage()
-        if (image.ok) insertText(`[image: ${image.path}]`)
+        if (image.ok) {
+          const id = nextImageRefIdRef.current++
+          imageRefsRef.current.set(id, { path: image.path })
+          insertText(formatImageRefMarker(id))
+          onImagePaste?.(image.path)
+        }
       })()
       return
     }
@@ -499,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/imageRefs.ts

@@ -0,0 +1,30 @@
+export type ImageRef = { path: string; mimeType?: string }
+
+const IMAGE_REF_MARKER_RE = /\[Image\s+#(\d+)\]/g
+
+export function expandImageRefs(text: string, refs: Map<number, ImageRef>): string {
+  return text.replace(IMAGE_REF_MARKER_RE, (full, raw: string) => {
+    const ref = refs.get(Number(raw))
+    return ref ? `[image: ${ref.path}]` : full
+  })
+}
+
+export function referencedImageIds(text: string): Set<number> {
+  const out = new Set<number>()
+  for (const match of text.matchAll(IMAGE_REF_MARKER_RE)) {
+    const id = Number(match[1])
+    if (Number.isFinite(id)) out.add(id)
+  }
+  return out
+}
+
+export function pruneImageRefs(refs: Map<number, ImageRef>, text: string): void {
+  const referenced = referencedImageIds(text)
+  for (const id of [...refs.keys()]) {
+    if (!referenced.has(id)) refs.delete(id)
+  }
+}
+
+export function formatImageRefMarker(id: number): string {
+  return `[Image #${id}]`
+}

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 · `}