Implementation:Ucbepic Docetl AnsiRenderer

Knowledge Sources	Ucbepic_Docetl
Domains	Frontend, React_UI
Last Updated	2026-02-08 00:00 GMT

Overview

Concrete tool for the terminal-style ANSI output renderer used in the DocETL playground output panel.

Description

The AnsiRenderer component converts ANSI-escaped text into styled HTML for display in a terminal-like interface. It uses the ansi-to-html library with custom bright color mappings, provides auto-scrolling to the latest output, an interactive command input that sends messages via WebSocket, connection status display, and a clear button. The component visually dims when the WebSocket connection is closed and supports both pipeline execution and decomposition modes.

Usage

Rendered in the Output panel's terminal tab to display pipeline execution logs with colored ANSI formatting.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/AnsiRenderer.tsx
• Lines: 1-125

Signature

interface AnsiRendererProps {
  text: string;
  readyState: number;
  setTerminalOutput: (text: string) => void;
  isDecomposing?: boolean;
}

const AnsiRenderer: React.FC<AnsiRendererProps>

Import

import AnsiRenderer from "@/components/AnsiRenderer";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
text	string	Yes	ANSI-escaped text to render
readyState	number	Yes	WebSocket ready state value
setTerminalOutput	(text: string) => void	Yes	Callback to update terminal output
isDecomposing	boolean	No	Whether a decomposition is in progress

Outputs

Name	Type	Description
rendered	JSX.Element	Terminal-styled output with command input and status

Usage Examples

<AnsiRenderer
  text={terminalOutput}
  readyState={ws.readyState}
  setTerminalOutput={setTerminalOutput}
  isDecomposing={false}
/>

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment