@effect-tui/react 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@effect-tui/react",
-	"version": "0.7.0",
+	"version": "0.8.0",
 	"description": "React bindings for @effect-tui/core",
 	"type": "module",
 	"files": [
@@ -83,7 +83,7 @@
 		"prepublishOnly": "bun run typecheck && bun run build"
 	},
 	"dependencies": {
-		"@effect-tui/core": "^0.7.0",
+		"@effect-tui/core": "^0.8.0",
 		"@effect/platform": "^0.94.0",
 		"@effect/platform-bun": "^0.87.0",
 		"@effect/rpc": "^0.73.0",

package/src/console/ConsoleCapture.ts

@@ -1,5 +1,6 @@
 // Console capture singleton for TUI debugging
-// Intercepts console.log/info/warn/error/debug and stores entries for display
+// Intercepts console.log/info/warn/error/debug AND process.stdout/stderr.write
+// to capture ALL output including Effect.log, third-party libraries, etc.
 
 import { Console } from "node:console"
 import { EventEmitter } from "node:events"
@@ -105,17 +106,39 @@ export interface ConsoleCaptureEvents {
 	error: (entry: LogEntry) => void
 }
 
+// Store the ORIGINAL stdout/stderr write functions at module load time
+// This ensures the renderer can always write to the terminal even when capture is active
+const originalStdoutWrite = process.stdout.write.bind(process.stdout)
+const originalStderrWrite = process.stderr.write.bind(process.stderr)
+
 export class ConsoleCapture extends EventEmitter {
 	private entries: LogEntry[] = []
 	private originalConsole: typeof console | null = null
 	private active = false
 	private maxEntries: number
+	// Track if current write is from our console methods (to avoid double-capture)
+	private inConsoleMethod = false
+	// Track if current write is from the TUI renderer (should bypass capture)
+	private inRendererWrite = false
 
 	constructor(options?: { maxEntries?: number }) {
 		super()
 		this.maxEntries = options?.maxEntries ?? 1000
 	}
 
+	/**
+	 * Write directly to stdout, bypassing capture.
+	 * Used by the TUI renderer to output to terminal.
+	 */
+	writeToTerminal(data: string | Uint8Array): boolean {
+		this.inRendererWrite = true
+		try {
+			return originalStdoutWrite(data)
+		} finally {
+			this.inRendererWrite = false
+		}
+	}
+
 	get isActive(): boolean {
 		return this.active
 	}
@@ -134,6 +157,45 @@ export class ConsoleCapture extends EventEmitter {
 		// Store original console
 		this.originalConsole = globalThis.console
 
+		// Intercept stdout.write - captures Effect.log, printf, etc.
+		process.stdout.write = ((
+			chunk: Uint8Array | string,
+			encodingOrCallback?: BufferEncoding | ((err?: Error | null) => void),
+			callback?: (err?: Error | null) => void,
+		): boolean => {
+			// If this write is from renderer or console methods, pass through
+			if (this.inRendererWrite) {
+				return originalStdoutWrite(chunk, encodingOrCallback as BufferEncoding, callback)
+			}
+			// Capture if not from our console methods (avoid double-capture)
+			if (!this.inConsoleMethod) {
+				const text = typeof chunk === "string" ? chunk : chunk.toString()
+				this.captureRawOutput(text, "stdout")
+			}
+			// Don't write to real stdout - TUI owns the terminal
+			const cb = typeof encodingOrCallback === "function" ? encodingOrCallback : callback
+			if (cb) cb()
+			return true
+		}) as typeof process.stdout.write
+
+		// Intercept stderr.write
+		process.stderr.write = ((
+			chunk: Uint8Array | string,
+			encodingOrCallback?: BufferEncoding | ((err?: Error | null) => void),
+			callback?: (err?: Error | null) => void,
+		): boolean => {
+			if (this.inRendererWrite) {
+				return originalStderrWrite(chunk, encodingOrCallback as BufferEncoding, callback)
+			}
+			if (!this.inConsoleMethod) {
+				const text = typeof chunk === "string" ? chunk : chunk.toString()
+				this.captureRawOutput(text, "stderr")
+			}
+			const cb = typeof encodingOrCallback === "function" ? encodingOrCallback : callback
+			if (cb) cb()
+			return true
+		}) as typeof process.stdout.write
+
 		// Create mock streams for the new console
 		const mockStdout = new CapturedWritableStream()
 		const mockStderr = new CapturedWritableStream()
@@ -197,37 +259,95 @@ export class ConsoleCapture extends EventEmitter {
 	deactivate(): void {
 		if (!this.active || !this.originalConsole) return
 
+		// Restore original stdout/stderr write methods
+		process.stdout.write = originalStdoutWrite
+		process.stderr.write = originalStderrWrite
+
 		globalThis.console = this.originalConsole
 		this.originalConsole = null
 		this.active = false
 	}
 
 	private appendToConsole(level: LogLevel, args: unknown[]): void {
-		const location = captureCallerLocation()
-		const message = util.format(...args)
+		// Mark that we're in a console method to avoid double-capture from stdout/stderr
+		this.inConsoleMethod = true
+		try {
+			const location = captureCallerLocation()
+			const message = util.format(...args)
+
+			const entry: LogEntry = {
+				timestamp: new Date(),
+				level,
+				message,
+				args,
+				location,
+			}
+
+			// Enforce max entries
+			if (this.entries.length >= this.maxEntries) {
+				this.entries.shift()
+			}
+			this.entries.push(entry)
+
+			// Emit events
+			this.emit("entry", entry)
+			// Only emit error event if there are listeners (avoid unhandled error exception)
+			if (level === "ERROR" && this.listenerCount("error") > 0) {
+				this.emit("error", entry)
+			}
+		} finally {
+			this.inConsoleMethod = false
+		}
+	}
+
+	// Capture raw output from stdout/stderr (for Effect.log, third-party libs, etc.)
+	private captureRawOutput(text: string, stream: "stdout" | "stderr"): void {
+		// Skip empty output
+		if (!text.trim()) return
+
+		// Parse Effect log format: timestamp level fiber message
+		// Example: "timestamp=2024-01-15T10:30:00.000Z level=INFO fiber=#0 message=Hello"
+		// Or the pretty format with ANSI colors
+		const level = this.detectLogLevel(text, stream)
+
+		// Strip ANSI codes for the stored message
+		const cleanText = text.replace(/\x1b\[[0-9;]*m/g, "").trim()
 
 		const entry: LogEntry = {
 			timestamp: new Date(),
 			level,
-			message,
-			args,
-			location,
+			message: cleanText,
+			args: [text], // Keep original with ANSI for potential future use
+			// No location for raw output - we can't get stack trace here
 		}
 
-		// Enforce max entries
 		if (this.entries.length >= this.maxEntries) {
 			this.entries.shift()
 		}
 		this.entries.push(entry)
 
-		// Emit events
 		this.emit("entry", entry)
-		// Only emit error event if there are listeners (avoid unhandled error exception)
 		if (level === "ERROR" && this.listenerCount("error") > 0) {
 			this.emit("error", entry)
 		}
 	}
 
+	// Detect log level from raw output text
+	private detectLogLevel(text: string, stream: "stdout" | "stderr"): LogLevel {
+		const upperText = text.toUpperCase()
+
+		// Effect log format detection
+		if (upperText.includes("LEVEL=ERROR") || upperText.includes("[ERROR]")) return "ERROR"
+		if (upperText.includes("LEVEL=WARN") || upperText.includes("[WARN]")) return "WARN"
+		if (upperText.includes("LEVEL=INFO") || upperText.includes("[INFO]")) return "INFO"
+		if (upperText.includes("LEVEL=DEBUG") || upperText.includes("[DEBUG]")) return "DEBUG"
+
+		// stderr is typically error output
+		if (stream === "stderr") return "ERROR"
+
+		return "LOG"
+	}
+
 	// Also expose write to original console for debugging the capture itself
 	writeToOriginal(level: LogLevel, ...args: unknown[]): void {
 		if (!this.originalConsole) return
@@ -264,6 +384,28 @@ export function getConsoleCapture(): ConsoleCapture {
 	return instance
 }
 
+/**
+ * Write directly to the terminal, bypassing console capture.
+ * Used by the TUI renderer to output to terminal without being captured.
+ */
+export function writeToTerminal(data: string | Uint8Array): boolean {
+	return originalStdoutWrite(data)
+}
+
+/**
+ * Create a wrapped stdout that bypasses console capture.
+ * Returns a write function compatible with TuiWriteStream.
+ */
+export function createTerminalWriter(): typeof process.stdout.write {
+	return ((
+		chunk: Uint8Array | string,
+		encodingOrCallback?: BufferEncoding | ((err?: Error | null) => void),
+		callback?: (err?: Error | null) => void,
+	): boolean => {
+		return originalStdoutWrite(chunk, encodingOrCallback as BufferEncoding, callback)
+	}) as typeof process.stdout.write
+}
+
 // Clean up on process exit
 process.on("exit", () => {
 	if (instance?.isActive) {

package/src/renderer.ts

@@ -1,6 +1,7 @@
 import { performance } from "node:perf_hooks"
 import { ANSI, bufferToString, type KeyMsg, type MouseMsg } from "@effect-tui/core"
 import React, { type ReactNode } from "react"
+import { createTerminalWriter } from "./console/ConsoleCapture.js"
 import { DEFAULT_FPS } from "./constants.js"
 import { requestExit } from "./exit.js"
 import * as Prof from "./profiler.js"
@@ -30,7 +31,14 @@ type HandledSignal = "SIGINT" | "SIGTERM"
 
 export function createRenderer(options?: RendererOptions): TuiRenderer {
 	const fps = options?.fps ?? DEFAULT_FPS
-	const stdout: TuiWriteStream = options?.stdout ?? process.stdout
+	// Use custom stdout if provided, otherwise use process.stdout with bypassed capture
+	const baseStdout: TuiWriteStream = options?.stdout ?? process.stdout
+	// Wrap write method to bypass console capture (so Effect.log etc. don't corrupt TUI)
+	const terminalWrite = createTerminalWriter()
+	const stdout: TuiWriteStream = {
+		...baseStdout,
+		write: terminalWrite,
+	} as TuiWriteStream
 	const stdin: TuiReadStream = options?.stdin ?? process.stdin
 	const mode = options?.mode ?? "fullscreen"
 	const exitOnCtrlC = options?.exitOnCtrlC ?? true