@effect-tui/react 0.7.0 → 0.9.0

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,29 @@ 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
+	let stdout: TuiWriteStream
+	if (options?.stdout) {
+		// Use custom stdout as-is (e.g., for testing with MockStdout)
+		stdout = options.stdout
+	} else {
+		// Create a proxy that bypasses console capture for writes
+		// This ensures Effect.log etc. don't corrupt the TUI
+		const terminalWrite = createTerminalWriter()
+		stdout = new Proxy(process.stdout as TuiWriteStream, {
+			get(target, prop) {
+				if (prop === "write") {
+					return terminalWrite
+				}
+				const value = (target as unknown as Record<string | symbol, unknown>)[prop]
+				// Bind methods to preserve `this` context (critical for .on(), .removeListener(), etc.)
+				if (typeof value === "function") {
+					return value.bind(target)
+				}
+				return value
+			},
+		})
+	}
 	const stdin: TuiReadStream = options?.stdin ?? process.stdin
 	const mode = options?.mode ?? "fullscreen"
 	const exitOnCtrlC = options?.exitOnCtrlC ?? true

package/src/visualize/index.tsx

@@ -95,12 +95,12 @@ function Visualizer({ state, label }: { state: VisualizerState; label: string })
 		return (
 			<vstack>
 				<hstack spacing={1}>
-					<text fg={Colors.brightCyan}>{SPINNER_FRAMES[state.spinnerIndex]}</text>
-					<text bold fg={Colors.brightWhite}>
+					<text fg={Colors.ansi.brightCyan}>{SPINNER_FRAMES[state.spinnerIndex]}</text>
+					<text bold fg={Colors.ansi.brightWhite}>
 						{label}
 					</text>
 				</hstack>
-				<text fg={Colors.gray(10)}>└ Running… {elapsed}</text>
+				<text fg={Colors.ansi.gray(10)}>└ Running… {elapsed}</text>
 			</vstack>
 		)
 	}
@@ -110,15 +110,15 @@ function Visualizer({ state, label }: { state: VisualizerState; label: string })
 		return (
 			<vstack>
 				<hstack spacing={1}>
-					<text bold fg={Colors.brightGreen}>
+					<text bold fg={Colors.ansi.brightGreen}>
 						✓
 					</text>
-					<text bold fg={Colors.brightGreen}>
+					<text bold fg={Colors.ansi.brightGreen}>
 						{label}
 					</text>
 				</hstack>
-				{showingResult && <text fg={Colors.gray(20)}>├ {formatResult(state.result)}</text>}
-				<text fg={Colors.green}>
+				{showingResult && <text fg={Colors.ansi.gray(20)}>├ {formatResult(state.result)}</text>}
+				<text fg={Colors.green(500)}>
 					{showingResult ? "└" : "└"} Completed in {elapsed}
 				</text>
 			</vstack>
@@ -129,15 +129,15 @@ function Visualizer({ state, label }: { state: VisualizerState; label: string })
 	return (
 		<vstack>
 			<hstack spacing={1}>
-				<text bold fg={Colors.brightRed}>
+				<text bold fg={Colors.ansi.brightRed}>
 					✗
 				</text>
-				<text bold fg={Colors.brightRed}>
+				<text bold fg={Colors.ansi.brightRed}>
 					{label}
 				</text>
 			</hstack>
-			<text fg={Colors.red}>├ {state.errorSummary ?? "Failed"}</text>
-			<text fg={Colors.red}>└ Failed after {elapsed}</text>
+			<text fg={Colors.red(500)}>├ {state.errorSummary ?? "Failed"}</text>
+			<text fg={Colors.red(500)}>└ Failed after {elapsed}</text>
 		</vstack>
 	)
 }