Repository navigation
Implement StreamingProse component with markdown rendering #11765
Description
Parent Epic
Part of #11762 (Ink-based TUI Rewrite)
Objective
Create component that renders streaming markdown text, handling incremental updates smoothly.
Current Implementation
The existing markdown.ts (174 lines) works well. We should reuse the markdown rendering logic but wrap it in an Ink component.
Component Design
interface StreamingProseProps {
text: string
isStreaming: boolean
}
const StreamingProse: React.FC<StreamingProseProps> = ({ text, isStreaming }) => {
const rendered = useMarkdown(text)
return (
<Box flexDirection="column">
<Text>{rendered}</Text>
{isStreaming && <Text dimColor>...</Text>}
</Box>
)
}Tasks
- Create
src/cli/ink/components/StreamingProse.tsx - Create
src/cli/ink/hooks/useMarkdown.ts- wraps existing markdown logic - Handle terminal width for proper wrapping
- Support streaming mode (partial text with cursor indicator)
- Support completed mode (full text, no cursor)
- Test with various markdown content:
- Code blocks
- Lists
- Headers
- Inline code
- Links
Acceptance Criteria
- Markdown renders correctly in terminal
- Streaming text updates smoothly without flicker
- Terminal width is respected
- Code blocks have proper syntax highlighting (if supported)
Estimated Effort
2 days
Risk
Medium - Markdown rendering can be complex, but we're reusing existing logic
Dependencies
- Setup Ink dependencies and verify Bun compatibility #11763 (Setup Ink dependencies)
- Implement core App component and state management #11764 (App component)
Activity
randomm commentedon Feb 2, 2026
Research Finding
Current implementation uses
@opentui/coreCode component - this is SolidJS-based and won't work with Ink/React.Need React-compatible alternative:
ink-markdown- Ink-native markdown componentmarked+chalk- Parse markdown, colorize outputmarked-terminal- Terminal-friendly markdown rendererWill research and select appropriate solution for Ink.
randomm commentedon Feb 2, 2026
Markdown Library Decision
Selected:
markdansi(Jan 2026, Node 22+)Reasons:
highlighter(code, lang)Installation:
bun add markdansiUsage pattern:
Alternative
ink-markdownexists but uses marked-terminal (batch only, not streaming-optimized).feat(opencode): add Phase 2 Ink components (anomalyco#11765, anomalyc…
feat(opencode): add Phase 2 Ink components (anomalyco#11765, anomalyc…
feat(opencode): add Ink-based TUI components for oclite