aegiscode 3.1.10 → 3.4.2

package/src/ui/components/markdown/MessageRenderer.tsx

@@ -1,1211 +0,0 @@
-/**
- * MessageRenderer - renders markdown content with memoization
- *
- * Critical perf note: no useStore hooks inside the memo component!
- * useShowAllThinking is passed as a prop from MessageList to avoid
- * re-rendering every message when the global toggle changes.
- *
- * Supports Content Block model (Claude-style):
- * - text blocks → rendered as markdown
- * - thinking blocks → collapsible with preview
- * - tool_use blocks → formatted tool calls with status
- * - tool_result blocks → tool output
- */
-
-import React, { useMemo, useState, useEffect, useRef, memo } from 'react'
-import { Box, Text } from 'ink'
-import stringWidth from 'string-width'
-import { parseMarkdown } from './parser.js'
-import { themeManager } from '../../themes/index.js'
-import { CodeHighlighter } from './CodeHighlighter.js'
-import type { ParsedBlock } from './types.js'
-import type { ContentBlock, ToolCallStatus } from '../../../store/types.js'
-
-interface MessageRendererProps {
-  content: string
-  role: 'user' | 'assistant' | 'system' | 'tool'
-  terminalWidth?: number
-  showPrefix?: boolean
-  thinking?: string
-  isStreaming?: boolean
-  /** Passed from parent to avoid hook call inside memo */
-  showAllThinking?: boolean
-  /** Content blocks for Claude-style structured rendering */
-  contentBlocks?: ContentBlock[]
-}
-
-/**
- * Custom comparator: prevent re-renders only when nothing has changed.
- * During streaming, content changes every delta — we MUST re-render to show them.
- * The old code had `!next.isStreaming` which blocked ALL streaming content updates.
- */
-const messageRendererComparator = (
-  prev: MessageRendererProps,
-  next: MessageRendererProps
-): boolean => {
-  if (prev.role !== next.role) return false
-  if (prev.isStreaming !== next.isStreaming) return false
-  
-  if (prev.terminalWidth !== next.terminalWidth) return false
-  if (prev.showPrefix !== next.showPrefix) return false
-  // Always compare content — even during streaming, we need to show deltas
-  if (prev.content !== next.content) return false
-  // Compare thinking state
-  if (prev.thinking !== next.thinking) return false
-  // Compare content blocks
-  if (prev.contentBlocks !== next.contentBlocks) return false
-  return true
-}
-
-export const MessageRenderer: React.FC<MessageRendererProps> = memo(
-  ({
-    content,
-    role,
-    terminalWidth = 80,
-    showPrefix = true,
-    thinking,
-    isStreaming,
-    showAllThinking = false,
-    contentBlocks,
-  }) => {
-    const theme = themeManager.getTheme()
-    const roleStyle = themeManager.getRoleStyle(role)
-
-    const isThinkingExpanded = true
-
-    // Incremental markdown parse cache — avoids re-parsing stable content
-    // during streaming by detecting append-only growth and reusing blocks.
-    const parseCacheRef = useRef<{ content: string; blocks: ParsedBlock[] }>({ content: '', blocks: [] });
-
-    const blocks = useMemo(() => {
-      const cache = parseCacheRef.current;
-      if (content === cache.content) return cache.blocks;
-
-      // Incremental: content only grew (append-only streaming delta)
-      if (content.startsWith(cache.content) && cache.content.length > 0) {
-        const delta = content.slice(cache.content.length);
-        const deltaFirstLine = delta.split('\n')[0];
-        // Fast path: delta is pure text (no block-starting patterns like ```, #, -, >, |)
-        if (!/^```|^#{1,6}\s|^[-*+]\s|^\d+\.\s|^>\s|^\s*$|^\|/.test(deltaFirstLine)) {
-          const newBlocks = cache.blocks.slice();
-          const lastBlock = newBlocks[newBlocks.length - 1];
-          if (lastBlock && lastBlock.type === 'text') {
-            newBlocks[newBlocks.length - 1] = { ...lastBlock, content: lastBlock.content + delta };
-            parseCacheRef.current = { content, blocks: newBlocks };
-            return newBlocks;
-          }
-        }
-      }
-
-      // Full re-parse for structural changes or first render
-      const parsed = parseMarkdown(content);
-      parseCacheRef.current = { content, blocks: parsed };
-      return parsed;
-    }, [content])
-
-    const thinkingBlocks = useMemo(
-      () => (thinking ? parseMarkdown(thinking) : []),
-      [thinking],
-    )
-
-    const filteredBlocks = useMemo(() => {
-      return blocks.filter((block, index) => {
-        if (block.type !== 'empty') return true
-        // Filter out leading empty blocks
-        if (index === 0) return false
-        // Deduplicate consecutive empty blocks (keep one for paragraph spacing)
-        if (blocks[index - 1].type === 'empty') return false
-        // Keep a single empty block between non-empty blocks for spacing
-        return true
-      })
-    }, [blocks])
-
-    const filteredThinkingBlocks = useMemo(() => {
-      return thinkingBlocks.filter((block) => block.type !== 'empty')
-    }, [thinkingBlocks])
-
-    
-
-    const prefixOffset = showPrefix && roleStyle && roleStyle.prefix ? roleStyle.prefix.length + 1 : 0
-
-    const hasToolBlocks = contentBlocks && contentBlocks.some(b => b.type === 'tool_use' || b.type === 'tool_result')
-
-    // ===== Content-block-driven rendering (Claude Code style) =====
-    // When contentBlocks are present, render from the structured block model
-    // instead of the flat markdown string.
-    const shouldUseContentBlocks = contentBlocks && contentBlocks.length > 0;
-
-    // User messages: grey background + "You" label + content
-    if (role === 'user') {
-      return (
-        <Box flexDirection="column" marginBottom={0}>
-          <Box backgroundColor={theme.colors.background.secondary} flexDirection="row" paddingX={1}>
-            <Box marginRight={1} flexShrink={0}>
-              <Text color={theme.colors.primary} bold>You</Text>
-              <Text color={theme.colors.border.light}>:</Text>
-            </Box>
-            <Box flexGrow={1}>
-              <Text color={theme.colors.text.primary} wrap="wrap">{content}</Text>
-            </Box>
-          </Box>
-        </Box>
-      )
-    }
-
-    return (
-      <Box flexDirection="column" marginBottom={0}>
-        {/* Thinking block — rendered inline */}
-        {shouldUseContentBlocks ? (
-          <ContentBlockRenderer
-            contentBlocks={contentBlocks!}
-            content={content}
-            theme={theme}
-            isStreaming={isStreaming}
-            roleStyle={roleStyle}
-            terminalWidth={terminalWidth}
-            prefixOffset={prefixOffset}
-          />
-        ) : (
-          <>
-            {/* Legacy path: flat thinking + markdown rendering */}
-            {!!thinking && (
-              <Box flexDirection="column">
-                {isStreaming ? (
-                  <>
-                    <Box>
-                      <Text color={theme.colors.text.muted} dimColor>
-                        <ThinkingIcon />
-                        <Text color={theme.colors.text.muted} dimColor italic>thinking</Text>
-                      </Text>
-                    </Box>
-                    <Box flexDirection="column" marginLeft={0}>
-                      {filteredThinkingBlocks.map((block, index) => (
-                        <Box key={index}>
-                          <Text color={theme.colors.text.muted} dimColor italic>
-                            {block.content}
-                          </Text>
-                        </Box>
-                      ))}
-                    </Box>
-                  </>
-                ) : thinking.length > 0 ? (
-                  <>
-                    <Box>
-                      <Text color={theme.colors.text.muted} dimColor>
-                        <Text color={theme.colors.primary}>{'□ '}</Text>
-                        <Text color={theme.colors.text.muted} dimColor italic>thought</Text>
-                      </Text>
-                    </Box>
-                    <Box flexDirection="column" marginLeft={0}>
-                      {filteredThinkingBlocks.map((block, index) => (
-                        <Box key={index}>
-                          <Text color={theme.colors.text.muted} dimColor italic>
-                            {block.content}
-                          </Text>
-                        </Box>
-                      ))}
-                    </Box>
-                  </>
-                ) : null}
-              </Box>
-            )}
-
-            {filteredBlocks.map((block, index) => (
-              <BlockRenderer
-                key={index}
-                block={block}
-                isFirst={index === 0 && filteredThinkingBlocks.length === 0}
-                roleStyle={showPrefix ? roleStyle : undefined}
-                terminalWidth={terminalWidth}
-                theme={theme}
-              />
-            ))}
-          </>
-        )}
-
-        {/* Tool actions — only in legacy path; content block path renders inline */}
-        {!shouldUseContentBlocks && hasToolBlocks && (
-          <ActionsBlock
-            contentBlocks={contentBlocks!}
-            theme={theme}
-            prefixOffset={prefixOffset}
-          />
-        )}
-
-        {isStreaming && (
-          <StreamingCursor prefixOffset={prefixOffset} hasContent={content.length > 0 || (thinking?.length ?? 0) > 0} />
-        )}
-      </Box>
-    )
-  },
-  messageRendererComparator,
-)
-
-MessageRenderer.displayName = 'MessageRenderer'
-
-// ===== Content Block Renderer (Claude Code style — inline rendering) =====
-
-interface ContentBlockRendererProps {
-  contentBlocks: ContentBlock[]
-  content: string
-  theme: any
-  isStreaming?: boolean
-  roleStyle?: { color: string; prefix: string; bold?: boolean }
-  terminalWidth: number
-  prefixOffset: number
-}
-
-/**
- * ContentBlockRenderer — renders structured content blocks inline.
- * Matches Claude Code's rendering: text blocks as markdown, thinking blocks inline,
- * tool_use blocks as ● colored lines, all in sequence.
- */
-const ContentBlockRenderer: React.FC<ContentBlockRendererProps> = React.memo(({
-  contentBlocks,
-  content,
-  theme,
-  isStreaming,
-  roleStyle,
-  terminalWidth,
-  prefixOffset,
-}) => {
-  const roleStyleWithPrefix = roleStyle && roleStyle.prefix ? roleStyle : undefined;
-
-  // Local variable tracks prefix emission within a single render pass.
-  // Unlike useRef, a local variable doesn't need reset logic and has no
-  // stale-closure risk — it's recreated each render.
-  let prefixEmitted = false;
-
-  const emitPrefix = (): React.ReactNode | null => {
-    if (prefixEmitted || !roleStyleWithPrefix) return null;
-    prefixEmitted = true;
-    return (
-      <Box marginRight={1}>
-        <Text color={roleStyleWithPrefix.color} bold={roleStyleWithPrefix.bold}>
-          {roleStyleWithPrefix.prefix}
-        </Text>
-      </Box>
-    );
-  };
-
-  return (
-    <>
-      {contentBlocks.map((block, idx) => {
-        if (block.type === 'thinking') {
-          // A thinking block is "active" during streaming — the buffer's thinking
-          // content is still being accumulated. Using idx === last-block check
-          // fails when text blocks are merged before tool blocks (thinking is always
-          // the first synthesized block, never the last).
-          const isActive = isStreaming && block.thinking.length > 0;
-          const filtered = parseMarkdown(block.thinking).filter(b => b.type !== 'empty');
-
-          return (
-            <Box key={`cb-think-${idx}`} flexDirection="column">
-              {emitPrefix()}
-              {isActive ? (
-                <>
-                  <Box>
-                    <Text color={theme.colors.text.muted} dimColor>
-                      <ThinkingIcon />
-                      <Text color={theme.colors.text.muted} dimColor italic>thinking</Text>
-                    </Text>
-                  </Box>
-                  <Box flexDirection="column" marginLeft={2}>
-                    {filtered.map((b, i) => (
-                      <Box key={i}>
-                        <Text color={theme.colors.text.muted} dimColor italic>{b.content}</Text>
-                      </Box>
-                    ))}
-                  </Box>
-                </>
-              ) : block.thinking ? (
-                <>
-                  <Box>
-                    <Text color={theme.colors.text.muted} dimColor>
-                      <Text color={theme.colors.primary}>{'□ '}</Text>
-                      <Text color={theme.colors.text.muted} dimColor italic>thought</Text>
-                    </Text>
-                  </Box>
-                  <Box flexDirection="column" marginLeft={2}>
-                    {filtered.map((b, i) => (
-                      <Box key={i}>
-                        <Text color={theme.colors.text.muted} dimColor italic>{b.content}</Text>
-                      </Box>
-                    ))}
-                  </Box>
-                </>
-              ) : null}
-            </Box>
-          );
-        }
-
-        if (block.type === 'text') {
-          const parsed = parseMarkdown(block.text);
-          const filtered = parsed.filter(b => b.type !== 'empty');
-          return (
-            <Box key={`cb-text-${idx}`} flexDirection="column">
-              {emitPrefix()}
-              {filtered.map((b, i) => (
-                <BlockRenderer
-                  key={i}
-                  block={b}
-                  isFirst={false}
-                  roleStyle={undefined}
-                  terminalWidth={terminalWidth}
-                  theme={theme}
-                />
-              ))}
-            </Box>
-          );
-        }
-
-        if (block.type === 'tool_use') {
-          const result = contentBlocks.find(
-            b => b.type === 'tool_result' && (b as any).tool_use_id === block.id
-          ) as (ContentBlock & { type: 'tool_result' }) | undefined
-
-          return (
-            <ToolUseBlock
-              key={`cb-tool-${block.id || idx}`}
-              block={block}
-              result={result}
-              theme={theme}
-              prefixOffset={prefixOffset}
-            />
-          );
-        }
-
-        return null;
-      })}
-
-      {/* Render any remaining text content from the message's content prop
-          (not duplicated in contentBlocks as text blocks).
-          During streaming, MessageList synthesizes text/thinking blocks into
-          contentBlocks so they render inline. After finishStreamingMessage the
-          store message's contentBlocks only has tool_use/tool_result blocks
-          (no text block) — the text lives in the `content` prop and needs
-          this fallback. The null guard prevents crashes if contentBlocks is
-          somehow undefined when shouldUseContentBlocks was true. */}
-      {content && (!contentBlocks || contentBlocks.every(b => b.type !== 'text')) && (
-        <Box key="remaining-text" flexDirection="column">
-          {emitPrefix()}
-          {parseMarkdown(content)
-            .filter(b => b.type !== 'empty')
-            .map((b, i) => (
-              <BlockRenderer
-                key={i}
-                block={b}
-                isFirst={false}
-                roleStyle={undefined}
-                terminalWidth={terminalWidth}
-                theme={theme}
-              />
-            ))}
-        </Box>
-      )}
-    </>
-  );
-}, (prev, next) =>
-  prev.contentBlocks === next.contentBlocks &&
-  prev.content === next.content &&
-  prev.isStreaming === next.isStreaming &&
-  prev.terminalWidth === next.terminalWidth &&
-  prev.prefixOffset === next.prefixOffset &&
-  prev.theme.colors === next.theme.colors
-);
-
-// ===== Streaming Cursor Component (animated) =====
-
-// Braille spinner — shown before first token (matches Claude Code style)
-const SPIN_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
-const SPIN_INTERVAL = 80
-
-// Smooth breathing bar — shown while text is streaming
-const CURSOR_FRAMES = ['▏', '▎', '▍', '▌', '▌', '▍', '▎', '▏', '▏', ' ', ' ', ' ']
-const CURSOR_INTERVAL = 65
-
-const StreamingCursor: React.FC<{ prefixOffset: number; hasContent: boolean }> = React.memo(
-  ({ prefixOffset, hasContent }) => {
-    const theme = themeManager.getTheme()
-    const [frame, setFrame] = useState(0)
-
-    useEffect(() => {
-      setFrame(0)
-      const interval = setInterval(
-        () => setFrame(f => (f + 1) % (hasContent ? CURSOR_FRAMES.length : SPIN_FRAMES.length)),
-        hasContent ? CURSOR_INTERVAL : SPIN_INTERVAL
-      )
-      return () => clearInterval(interval)
-    }, [hasContent])
-
-    return (
-      <Box marginLeft={prefixOffset}>
-        <Text color={theme.colors.primary}>
-          {hasContent ? CURSOR_FRAMES[frame] : SPIN_FRAMES[frame]}
-        </Text>
-      </Box>
-    )
-  }
-)
-
-StreamingCursor.displayName = 'StreamingCursor'
-
-// ===== Animated thinking icon =====
-const THINK_FRAMES = ['◌', '○', '◎', '●', '◎', '○']
-const THINK_INTERVAL = 180
-
-const ThinkingIcon: React.FC = React.memo(() => {
-  const theme = themeManager.getTheme()
-  const [frame, setFrame] = useState(0)
-  useEffect(() => {
-    const t = setInterval(() => setFrame(f => (f + 1) % THINK_FRAMES.length), THINK_INTERVAL)
-    return () => clearInterval(t)
-  }, [])
-  return <Text color={theme.colors.primary}>{THINK_FRAMES[frame]}{' '}</Text>
-})
-ThinkingIcon.displayName = 'ThinkingIcon'
-
-// ===== Tool Use Block (shared between ContentBlockRenderer and ActionsBlock) =====
-
-interface ToolUseBlockProps {
-  block: ContentBlock & { type: 'tool_use' }
-  result?: ContentBlock & { type: 'tool_result' }
-  theme: any
-  prefixOffset: number
-}
-
-const ToolUseBlock: React.FC<ToolUseBlockProps> = React.memo(({
-  block,
-  result,
-  theme,
-  prefixOffset,
-}) => {
-  const isError   = block.status === 'error'
-  const isRunning = block.status === 'running'
-  const dotColor  = isError ? DOT_ERR : isRunning ? DOT_RUN : DOT_OK
-  const elapsed   = block.completedAt ? formatElapsed(block.completedAt - block.startedAt) : null
-  const summary   = getToolSummary(block.name, block.input)
-  const { label, path } = splitToolSummary(summary)
-
-  const subLines: Array<{ text: string; isUrl: boolean; isDiff?: boolean; diffType?: '+' | '-' }> = []
-  if (result?.content) {
-    const lines = result.content.split('\n').filter(l => l.trim())
-    const diffLines = lines.filter(l => /^[+-]/.test(l) && !l.startsWith('+++') && !l.startsWith('---'))
-    if (diffLines.length > 0) {
-      const added   = diffLines.filter(l => l.startsWith('+')).length
-      const removed = diffLines.filter(l => l.startsWith('-')).length
-      if (added > 0 || removed > 0) {
-        subLines.push({ text: `${added > 0 ? `+${added}` : ''}${removed > 0 ? ` -${removed}` : ''} lines`, isUrl: false })
-      }
-      diffLines.slice(0, 5).forEach(l => {
-        subLines.push({ text: l, isUrl: false, isDiff: true, diffType: l.startsWith('+') ? '+' : '-' })
-      })
-    } else {
-      lines.slice(0, 4).forEach(line => {
-        const trimmed = line.length > 100 ? line.slice(0, 97) + '…' : line
-        subLines.push({ text: trimmed, isUrl: /^https?:\/\//.test(trimmed) })
-      })
-    }
-  }
-
-  return (
-    <Box flexDirection="column" marginLeft={prefixOffset}>
-      <Box>
-        <Text color={dotColor} bold>{'● '}</Text>
-        <Text color={theme.colors.text.primary} bold>{label}</Text>
-        {path && <Text color={isError ? DOT_ERR : DOT_OK}>{path}</Text>}
-        {elapsed && <Text color={theme.colors.text.muted} dimColor>{' '}{elapsed}</Text>}
-      </Box>
-      {subLines.map((sub, i) => (
-        <Box key={i} marginLeft={2}>
-          <Text color={theme.colors.text.muted} dimColor>
-            {i === 0 ? '└ ' : '  '}
-          </Text>
-          {sub.isDiff ? (
-            <Box backgroundColor={sub.diffType === '+' ? '#0d2b0d' : '#2b0d0d'}>
-              <Text color={sub.diffType === '+' ? DOT_OK : DOT_ERR}>{sub.text}</Text>
-            </Box>
-          ) : sub.isUrl ? (
-            <Text color="#58a6ff" underline>{sub.text}</Text>
-          ) : (
-            <Text color={isError ? DOT_ERR : theme.colors.text.muted} dimColor={!isError}>{sub.text}</Text>
-          )}
-        </Box>
-      ))}
-    </Box>
-  )
-}, (prev, next) =>
-  prev.block === next.block &&
-  prev.result === next.result &&
-  prev.theme === next.theme &&
-  prev.prefixOffset === next.prefixOffset
-)
-
-ToolUseBlock.displayName = 'ToolUseBlock'
-
-// ===== Tool Call Visual Components =====
-
-
-function shortenPath(p: string): string {
-  if (p.length <= 45) return p
-  const parts = p.split('/')
-  return parts.length > 3 ? '…/' + parts.slice(-2).join('/') : p
-}
-
-function getToolSummary(name: string, input: string): string {
-  if (!input) return name
-  try {
-    const args = JSON.parse(input)
-    switch (name) {
-      case 'Read':
-      case 'Write':
-      case 'Edit':
-        return `${name}(${shortenPath(args.file_path || '')})`
-      case 'Bash': {
-        const cmd = (args.command || '').trim().replace(/\n/g, ' ')
-        return `${name}(${cmd.length > 60 ? cmd.slice(0, 57) + '…' : cmd})`
-      }
-      case 'Glob':
-        return `${name}(${args.pattern || ''})`
-      case 'Grep':
-        return `${name}(${args.pattern || ''}${args.path ? ` in ${shortenPath(args.path)}` : ''})`
-      case 'Task': {
-        const tasks = Array.isArray(args.tasks) ? args.tasks : []
-        if (tasks.length === 0) return name
-        const first = String(tasks[0]?.description || '')
-        const summary = tasks.length > 1 ? `${first} +${tasks.length - 1} more` : first
-        return `${name}(${summary.length > 45 ? summary.slice(0, 42) + '…' : summary})`
-      }
-      default: {
-        const entries = Object.entries(args)
-        if (entries.length === 0) return name
-        const [, val] = entries[0]
-        const valStr = String(val)
-        return `${name}(${valStr.length > 45 ? valStr.slice(0, 42) + '…' : valStr})`
-      }
-    }
-  } catch {
-    return name
-  }
-}
-
-// Split "Name(path)" into {label, path} for separate coloring
-function splitToolSummary(summary: string): { label: string; path: string } {
-  const m = summary.match(/^([^(]+)(\(.+\))$/)
-  if (m) return { label: m[1], path: m[2] }
-  return { label: summary, path: '' }
-}
-
-function formatElapsed(ms: number): string {
-  if (ms < 1000) return `${ms}ms`
-  return `${(ms / 1000).toFixed(1)}s`
-}
-
-// ===== Colors =====
-const DOT_OK  = '#3fb950'
-const DOT_ERR = '#f85149'
-const DOT_RUN = '#e3b341'
-
-// ===== ActionsBlock — delegates to ToolUseBlock =====
-
-interface ActionsBlockProps {
-  contentBlocks: ContentBlock[]
-  theme: any
-  prefixOffset: number
-}
-
-const ActionsBlock: React.FC<ActionsBlockProps> = React.memo(({ contentBlocks, theme, prefixOffset }) => {
-  const toolBlocks = contentBlocks.filter(b => b.type === 'tool_use')
-  if (toolBlocks.length === 0) return null
-
-  return (
-    <Box flexDirection="column">
-      {contentBlocks.map((block, idx) => {
-        if (block.type !== 'tool_use') return null
-
-        const result = contentBlocks.find(
-          b => b.type === 'tool_result' && (b as any).tool_use_id === block.id
-        ) as (ContentBlock & { type: 'tool_result' }) | undefined
-
-        return (
-          <ToolUseBlock
-            key={`action-${block.id || idx}`}
-            block={block}
-            result={result}
-            theme={theme}
-            prefixOffset={0}
-          />
-        )
-      })}
-    </Box>
-  )
-}, (prev, next) =>
-  prev.contentBlocks === next.contentBlocks &&
-  prev.theme === next.theme &&
-  prev.prefixOffset === next.prefixOffset
-)
-
-// ===== Block Renderer =====
-
-interface BlockRendererProps {
-  block: ParsedBlock
-  isFirst: boolean
-  roleStyle?: { color: string; prefix: string; bold?: boolean }
-  terminalWidth: number
-  theme: ReturnType<typeof themeManager.getTheme>
-}
-
-const BlockRenderer: React.FC<BlockRendererProps> = React.memo(({
-  block,
-  isFirst,
-  roleStyle,
-  terminalWidth,
-  theme,
-}) => {
-  const prefixWidth = roleStyle?.prefix.length ?? 0
-  const contentWidth = terminalWidth - prefixWidth - 2
-
-  if (block.type === 'empty') {
-    return null
-  }
-
-  const roleStyleWithPrefix = roleStyle && roleStyle.prefix ? roleStyle : undefined;
-
-  return (
-    <Box flexDirection="row">
-      {isFirst && roleStyleWithPrefix && (
-        <Box marginRight={1}>
-          <Text color={roleStyleWithPrefix.color} bold={roleStyleWithPrefix.bold}>
-            {roleStyleWithPrefix.prefix}
-          </Text>
-        </Box>
-      )}
-      {!isFirst && roleStyleWithPrefix && <Box width={prefixWidth + 1} />}
-
-      <Box flexGrow={1} flexShrink={1}>
-        {block.type === 'code' ? (
-          <CodeBlock
-            content={block.content}
-            language={block.language}
-            filePath={block.filePath}
-            theme={theme}
-          />
-        ) : block.type === 'heading' ? (
-          <Heading
-            content={block.content}
-            level={block.level || 1}
-            theme={theme}
-          />
-        ) : block.type === 'list' ? (
-          <ListItem
-            content={block.content}
-            listType={block.listType}
-            marker={block.marker}
-            indent={block.indent}
-            theme={theme}
-          />
-        ) : block.type === 'hr' ? (
-          <HorizontalRule width={contentWidth} theme={theme} />
-        ) : block.type === 'table' && block.tableData ? (
-          <TableRenderer
-            headers={block.tableData.headers}
-            rows={block.tableData.rows}
-            alignments={block.tableData.alignments}
-            theme={theme}
-            maxWidth={contentWidth}
-          />
-        ) : block.type === 'blockquote' ? (
-          <Blockquote content={block.content} theme={theme} />
-        ) : (
-          <TextBlock content={block.content} theme={theme} />
-        )}
-      </Box>
-    </Box>
-  )
-}, (prev, next) =>
-  prev.block === next.block &&
-  prev.isFirst === next.isFirst &&
-  prev.terminalWidth === next.terminalWidth &&
-  prev.theme === next.theme
-)
-
-// =====
-
-interface ThemedProps {
-  theme: ReturnType<typeof themeManager.getTheme>
-}
-
-const CodeBlock: React.FC<
-  { content: string; language?: string; filePath?: string } & ThemedProps
-> = ({ content, language, filePath }) => {
-  return (
-    <CodeHighlighter
-      content={content}
-      language={language}
-      filePath={filePath}
-      showLineNumbers={true}
-    />
-  )
-}
-
-const Heading: React.FC<{ content: string; level: number } & ThemedProps> = ({
-  content,
-  level,
-  theme,
-}) => {
-  const color =
-    level === 1
-      ? theme.colors.primary
-      : level === 2
-        ? theme.colors.secondary
-        : level === 3
-          ? theme.colors.accent
-          : theme.colors.text.primary
-
-  const marginY = level <= 2 ? 1 : 0
-  const underline = level === 1
-
-  const hasInlineFormat = /\*\*|`|~~|\[.*\]\(/.test(content)
-
-  return (
-    <Box flexDirection="column" marginY={marginY}>
-      {hasInlineFormat ? (
-        <Text color={color} bold underline={underline}>
-          <HeadingInlineText
-            content={content}
-            theme={theme}
-            baseColor={color}
-          />
-        </Text>
-      ) : (
-        <Text color={color} bold underline={underline}>
-          {content}
-        </Text>
-      )}
-    </Box>
-  )
-}
-
-const ListItem: React.FC<
-  {
-    content: string
-    listType?: 'ul' | 'ol'
-    marker?: string
-    indent?: number
-  } & ThemedProps
-> = ({ content, listType, marker, indent = 0, theme }) => {
-  const indentStr = '  '.repeat(Math.floor(indent / 2))
-  const bulletColor =
-    listType === 'ol' ? theme.colors.info : theme.colors.success
-
-  return (
-    <Box>
-      <Text>
-        {indentStr}
-        <Text color={bulletColor}>{marker || '•'}</Text>{' '}
-      </Text>
-      <Text wrap="wrap">
-        <InlineText content={content} theme={theme} />
-      </Text>
-    </Box>
-  )
-}
-
-const HorizontalRule: React.FC<{ width: number } & ThemedProps> = ({
-  width,
-  theme,
-}) => (
-  <Box marginY={1}>
-    <Text color={theme.colors.border.light}>
-      {'─'.repeat(Math.max(width, 10))}
-    </Text>
-  </Box>
-)
-
-const stripMarkdownForWidth = (text: string): string => {
-  return text
-    .replace(/\*\*(.+?)\*\*/g, '$1')
-    .replace(/\*(.+?)\*/g, '$1')
-    .replace(/`([^`]+)`/g, '$1')
-    .replace(/~~(.+?)~~/g, '$1')
-    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
-}
-
-/**
- * Get theme-aware diff color for Before/After table columns.
- * Returns theme.colors.error for "before"-like headers,
- * theme.colors.success for "after"-like headers.
- */
-function getDiffColumnColor(header: string, theme: ReturnType<typeof themeManager.getTheme>): string | null {
-  const h = header.trim().toLowerCase()
-  if (/^(before|old|previous|removed?|from)$/.test(h)) return theme.colors.error
-  if (/^(after|new|updated?|added?|to)$/.test(h))      return theme.colors.success
-  return null
-}
-
-const MIN_COL_WIDTH = 6
-const TRUNCATION_MARKER = '…'
-
-/** Truncate cell content to fit within `maxWidth`, appending `…` if cut. */
-function truncateCell(content: string, maxWidth: number): string {
-  const cleaned = stripMarkdownForWidth(content)
-  const raw = stringWidth(cleaned)
-  if (raw <= maxWidth) return renderRawCell(content, maxWidth, 'left')
-  // Find safe truncation point respecting ansi / markdown
-  let visible = 0
-  let i = 0
-  const chars = [...content]
-  for (; i < chars.length; i++) {
-    const ch = chars[i]
-    visible += stringWidth(ch)
-    if (visible > maxWidth - 1) break
-  }
-  return content.slice(0, i) + TRUNCATION_MARKER
-}
-
-function renderRawCell(
-  content: string,
-  width: number,
-  align: 'left' | 'center' | 'right',
-): string {
-  const actualWidth = stringWidth(stripMarkdownForWidth(content))
-  const padding = Math.max(0, width - actualWidth)
-  if (align === 'center') {
-    const left = Math.floor(padding / 2)
-    const right = padding - left
-    return ' '.repeat(left) + content + ' '.repeat(right)
-  }
-  if (align === 'right') {
-    return ' '.repeat(padding) + content
-  }
-  return content + ' '.repeat(padding)
-}
-
-const TableRenderer: React.FC<
-  {
-    headers: string[]
-    rows: string[][]
-    alignments: ('left' | 'center' | 'right')[]
-    maxWidth: number
-  } & ThemedProps
-> = ({ headers, rows, alignments, theme, maxWidth }) => {
-  const borderCost = 1 + headers.length * 2 // leading + each col pair (cell│)
-  const available = maxWidth - borderCost - 2 // safety margin
-
-  // 1. Compute natural column widths
-  const naturalWidths = headers.map((header, index) => {
-    const headerWidth = stringWidth(stripMarkdownForWidth(header))
-    const maxRowWidth = Math.max(
-      0,
-      ...rows.map((row) =>
-        stringWidth(stripMarkdownForWidth(row[index] || '')),
-      ),
-    )
-    return Math.max(headerWidth, maxRowWidth) + 2
-  })
-
-  const totalNatural = naturalWidths.reduce((a, b) => a + b, 0)
-
-  // 2. Clamp column widths if they exceed available space
-  const columnWidths =
-    totalNatural <= available
-      ? naturalWidths
-      : naturalWidths.map((w) => Math.max(MIN_COL_WIDTH, Math.floor(w * (available / totalNatural))))
-
-  const truncated = totalNatural > available
-
-  // Detect if any column is a diff column (Before/After/etc.)
-  const diffColors = headers.map(h => getDiffColumnColor(h, theme))
-  const isDiffTable = diffColors.some(c => c !== null)
-
-  const renderCell = (
-    content: string,
-    width: number,
-    align: 'left' | 'center' | 'right',
-  ) => {
-    if (truncated) {
-      return truncateCell(content, width)
-    }
-    return renderRawCell(content, width, align)
-  }
-
-  return (
-    <Box flexDirection="column" marginY={1}>
-      <Box>
-        <Text color={theme.colors.border.light}>│</Text>
-        {headers.map((header, index) => {
-          const diffColor = diffColors[index]
-          return (
-            <React.Fragment key={index}>
-              <Text bold color={diffColor ?? theme.colors.primary}>
-                {renderCell(header, columnWidths[index], alignments[index] || 'left')}
-              </Text>
-              <Text color={theme.colors.border.light}>│</Text>
-            </React.Fragment>
-          )
-        })}
-      </Box>
-
-      <Box>
-        <Text color={theme.colors.border.light}>├</Text>
-        {columnWidths.map((width, index) => (
-          <React.Fragment key={index}>
-            <Text color={theme.colors.border.light}>{'─'.repeat(width)}</Text>
-            <Text color={theme.colors.border.light}>
-              {index < columnWidths.length - 1 ? '┼' : '┤'}
-            </Text>
-          </React.Fragment>
-        ))}
-      </Box>
-
-      {rows.map((row, rowIndex) => (
-        <Box key={rowIndex}>
-          <Text color={theme.colors.border.light}>│</Text>
-          {headers.map((_, colIndex) => {
-            const cellContent = row[colIndex] || ''
-            const renderedContent = renderCell(
-              cellContent,
-              columnWidths[colIndex],
-              alignments[colIndex] || 'left',
-            )
-            const diffColor = diffColors[colIndex]
-            const hasInlineFormat = /\*\*|`|~~|\[.*\]\(/.test(cellContent)
-            return (
-              <React.Fragment key={colIndex}>
-                {diffColor ? (
-                  <Text color={diffColor} dimColor={rowIndex % 2 === 0}>
-                    {renderedContent}
-                  </Text>
-                ) : hasInlineFormat ? (
-                  <Text>
-                    <InlineText content={renderedContent} theme={theme} />
-                  </Text>
-                ) : (
-                  <Text>{renderedContent}</Text>
-                )}
-                <Text color={theme.colors.border.light}>│</Text>
-              </React.Fragment>
-            )
-          })}
-        </Box>
-      ))}
-
-      {truncated && (
-        <Box>
-          <Text dimColor color={theme.colors.text.secondary}>
-            {`  ╚══ ${TRUNCATION_MARKER} columns scaled to fit terminal width (${maxWidth} cols)`}
-          </Text>
-        </Box>
-      )}
-    </Box>
-  )
-}
-
-const Blockquote: React.FC<{ content: string } & ThemedProps> = ({
-  content,
-  theme,
-}) => (
-  <Box>
-    <Text color={theme.colors.border.light}>│ </Text>
-    <Text color={theme.colors.text.muted} italic wrap="wrap">
-      {content}
-    </Text>
-  </Box>
-)
-
-const TOOLCALL_RE = /^\s{2,}(\S+)\s*(.*?)\s*(✓|✗.*)$/
-
-const ToolCallLine: React.FC<{ content: string } & ThemedProps> = ({
-  content,
-  theme,
-}) => {
-  const m = content.match(TOOLCALL_RE)
-  if (!m) return <Text dimColor>{content}</Text>
-
-  const [, name, args, result] = m
-  const isErr = result.startsWith('✗')
-
-  return (
-    <Box>
-      <Text dimColor color={theme.colors.text.muted}>{'  '}</Text>
-      <Text dimColor color={theme.colors.text.secondary}>{name}</Text>
-      {args ? <Text dimColor color={theme.colors.text.muted}>{' '}{args}</Text> : null}
-      <Text dimColor color={isErr ? theme.colors.error : theme.colors.success}>{' '}{result}</Text>
-    </Box>
-  )
-}
-
-const TextBlock: React.FC<{ content: string } & ThemedProps> = ({
-  content,
-  theme,
-}) => {
-  if (TOOLCALL_RE.test(content)) {
-    return <ToolCallLine content={content} theme={theme} />
-  }
-
-  return (
-    <Text wrap="wrap">
-      <InlineText content={content} theme={theme} />
-    </Text>
-  )
-}
-
-const HeadingInlineText: React.FC<
-  { content: string; baseColor: string } & ThemedProps
-> = ({ content, theme, baseColor }) => {
-  const segments = parseInline(content)
-
-  return (
-    <>
-      {segments.map((seg, i) => {
-        switch (seg.type) {
-          case 'bold':
-            return (
-              <Text key={i} bold color={theme.colors.text.primary}>
-                {seg.text}
-              </Text>
-            )
-          case 'code':
-            return (
-              <Text key={i} color={theme.colors.accent}>
-                {seg.text}
-              </Text>
-            )
-          case 'strikethrough':
-            return (
-              <Text key={i} strikethrough color={theme.colors.text.muted}>
-                {seg.text}
-              </Text>
-            )
-          case 'link':
-            return (
-              <Text key={i} color={theme.colors.info} underline>
-                {seg.text}
-              </Text>
-            )
-          default:
-            return <Text key={i}>{seg.text}</Text>
-        }
-      })}
-    </>
-  )
-}
-
-const InlineText: React.FC<{ content: string } & ThemedProps> = ({
-  content,
-  theme,
-}) => {
-  const segments = parseInline(content)
-
-  return (
-    <>
-      {segments.map((seg, i) => {
-        switch (seg.type) {
-          case 'bold':
-            return (
-              <Text key={i} bold color={theme.colors.text.primary}>
-                {seg.text}
-              </Text>
-            )
-          case 'italic':
-            return (
-              <Text key={i} italic color={theme.colors.text.primary}>
-                {seg.text}
-              </Text>
-            )
-          case 'code':
-            return (
-              <Text key={i} color={theme.colors.accent}>
-                {seg.text}
-              </Text>
-            )
-          case 'strikethrough':
-            return (
-              <Text key={i} strikethrough color={theme.colors.text.muted}>
-                {seg.text}
-              </Text>
-            )
-          case 'link':
-            return (
-              <Text key={i} color={theme.colors.info} underline>
-                {seg.text}
-              </Text>
-            )
-          default:
-            return (
-              <Text key={i} color={theme.colors.text.primary}>
-                {seg.text}
-              </Text>
-            )
-        }
-      })}
-    </>
-  )
-}
-
-function parseInline(text: string): Array<{ type: string; text: string }> {
-  const segments: Array<{ type: string; text: string }> = []
-
-  const tokenPatterns: Array<{ type: string; regex: RegExp; group: number }> = [
-    { type: 'code', regex: /`([^`]+)`/g, group: 1 },
-    { type: 'bold', regex: /\*\*([^*]+)\*\*/g, group: 1 },
-    { type: 'strikethrough', regex: /~~([^~]+)~~/g, group: 1 },
-    { type: 'italic', regex: /(?<!\*)\*([^*]+)\*(?!\*)/g, group: 1 },
-    { type: 'link', regex: /\[([^\]]+)\]\([^)]+\)/g, group: 1 },
-  ]
-
-  interface Token {
-    type: string
-    text: string
-    start: number
-    end: number
-  }
-
-  const tokens: Token[] = []
-
-  for (const { type, regex, group } of tokenPatterns) {
-    let match
-    regex.lastIndex = 0
-    while ((match = regex.exec(text)) !== null) {
-      const start = match.index
-      const end = match.index + match[0].length
-      const overlaps = tokens.some(
-        (t) =>
-          (start >= t.start && start < t.end) ||
-          (end > t.start && end <= t.end),
-      )
-
-      if (!overlaps) {
-        tokens.push({
-          type,
-          text: match[group],
-          start,
-          end,
-        })
-      }
-    }
-  }
-
-  tokens.sort((a, b) => a.start - b.start)
-
-  let lastEnd = 0
-  for (const token of tokens) {
-    if (token.start > lastEnd) {
-      segments.push({ type: 'text', text: text.slice(lastEnd, token.start) })
-    }
-    segments.push({ type: token.type, text: token.text })
-    lastEnd = token.end
-  }
-
-  if (lastEnd < text.length) {
-    segments.push({ type: 'text', text: text.slice(lastEnd) })
-  }
-
-  if (segments.length === 0) {
-    return [{ type: 'text', text }]
-  }
-
-  return segments
-}
-
-export default MessageRenderer