@effect-tui/react 0.15.2 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@effect-tui/react",
-	"version": "0.15.2",
+	"version": "0.16.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.15.2",
+		"@effect-tui/core": "^0.16.0",
 		"@effect/platform": "^0.94.1",
 		"@effect/platform-bun": "^0.87.0",
 		"@effect/rpc": "^0.73.0",

package/src/components/ListView.tsx

@@ -26,11 +26,11 @@ export interface ListViewProps<T> {
 	/** Called when an item is clicked. Receives the item index. */
 	onItemClick?: (index: number) => void
 	/** @internal */
-	__debugViewportMeasured?: boolean
+	__debugViewportMeasuredY?: boolean
 	/** @internal */
-	__debugViewportSize?: number
+	__debugViewportSizeY?: number
 	/** @internal */
-	__debugContentSize?: number
+	__debugContentSizeY?: number
 }
 
 /**
@@ -82,19 +82,22 @@ export function ListView<T>({
 	emptyContent,
 	overscan = 3,
 	onItemClick,
-	__debugViewportMeasured,
-	__debugViewportSize,
-	__debugContentSize,
+	__debugViewportMeasuredY,
+	__debugViewportSizeY,
+	__debugContentSizeY,
 }: ListViewProps<T>) {
 	const totalHeight = items.length * itemHeight
-	const { state, scrollProps, scrollToVisible } = useScroll({
+	const { state, scrollProps, scrollIntoView } = useScroll({
 		enableKeyboard: false, // Parent handles keyboard for selection
 		enableMouseWheel: true, // Free scroll with wheel
-		contentSize: __debugContentSize ?? totalHeight,
-		initialViewportSize: __debugViewportSize,
+		contentHeight: __debugContentSizeY ?? totalHeight,
+		initialViewportHeight: __debugViewportSizeY,
+		onScrollLayoutChange: (event) => {
+			rectRef.current = event.rect
+		},
 	})
-	const viewportMeasured = __debugViewportMeasured ?? state.viewportMeasured
-	const viewportSize = __debugViewportSize ?? state.viewportSize
+	const viewportMeasured = __debugViewportMeasuredY ?? state.viewportMeasuredY
+	const viewportSize = __debugViewportSizeY ?? state.viewportSizeY
 
 	// Track scroll container rect for hit testing
 	const rectRef = useRef<{ x: number; y: number; w: number; h: number } | null>(null)
@@ -110,7 +113,7 @@ export function ListView<T>({
 
 			// Calculate which item was clicked
 			const localY = mouse.y - y
-			const contentY = localY + state.offset
+			const contentY = localY + state.offsetY
 			const clickedIndex = Math.floor(contentY / itemHeight)
 
 			// Validate index is in range
@@ -136,14 +139,14 @@ export function ListView<T>({
 			prevSelectedRef.current = selectedIndex
 			prevViewportRef.current = { measured: viewportMeasured, size: viewportSize }
 			// Pass totalHeight to avoid stale contentSize issues when jumping to end
-			scrollToVisible(selectedIndex, itemHeight, scrollPadding, totalHeight)
+			scrollIntoView(selectedIndex, itemHeight, scrollPadding, totalHeight)
 		}
-	}, [selectedIndex, itemHeight, scrollPadding, scrollToVisible, totalHeight, viewportMeasured, viewportSize])
+	}, [selectedIndex, itemHeight, scrollPadding, scrollIntoView, totalHeight, viewportMeasured, viewportSize])
 
 	// Also scroll on initial render if selection is not 0
 	useEffect(() => {
 		if (selectedIndex > 0) {
-			scrollToVisible(selectedIndex, itemHeight, scrollPadding, totalHeight)
+			scrollIntoView(selectedIndex, itemHeight, scrollPadding, totalHeight)
 		}
 		// Only run on mount
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -156,10 +159,10 @@ export function ListView<T>({
 	// Calculate visible range for virtualization
 	// Before viewport is measured, render a reasonable default (not all items!)
 	const startIndex = viewportMeasured
-		? Math.max(0, Math.floor(state.offset / itemHeight) - overscan)
+		? Math.max(0, Math.floor(state.offsetY / itemHeight) - overscan)
 		: 0
 	const endIndex = viewportMeasured
-		? Math.min(items.length, Math.ceil((state.offset + viewportSize) / itemHeight) + overscan)
+		? Math.min(items.length, Math.ceil((state.offsetY + viewportSize) / itemHeight) + overscan)
 		: Math.min(items.length, 50)
 
 	// Calculate spacer heights for virtual scrolling
@@ -169,13 +172,8 @@ export function ListView<T>({
 	// Get visible slice of items
 	const visibleItems = items.slice(startIndex, endIndex)
 
-	// Handler to track scroll container rect for click detection
-	const handleRect = (x: number, y: number, w: number, h: number) => {
-		rectRef.current = { x, y, w, h }
-	}
-
 	return (
-		<scroll {...scrollProps} showScrollbar={showScrollbar} onRect={handleRect}>
+		<scroll {...scrollProps} showScrollbar={showScrollbar}>
 			<vstack>
 				{/* Virtual top spacer - always render to maintain structure */}
 				<box key="top-spacer" height={topSpacerHeight} />

package/src/console/ConsolePopover.tsx

@@ -7,6 +7,16 @@ import { useKeyboard } from "../hooks/use-keyboard.js"
 import { useMouse } from "../hooks/use-mouse.js"
 import { useScroll } from "../hooks/use-scroll.js"
 import { useTerminalSize } from "../renderer.js"
+import {
+	formatLocation,
+	formatTimestamp,
+	getLineSelection,
+	getSelectionText,
+	normalizeSelection,
+	type SelectionPoint,
+	wrapLine,
+} from "../utils/console-helpers.js"
+import { DiagnosticsPanel } from "../debug/DiagnosticsPanel.js"
 import { getConsoleCapture, type LogEntry, type LogLevel } from "./ConsoleCapture.js"
 import { copyToClipboard, copyToClipboardSync } from "./clipboard.js"
 
@@ -29,11 +39,12 @@ export interface ConsolePopoverProps {
 	mode?: "overlay" | "inline"
 	/** Fixed height in lines for inline mode */
 	fixedHeight?: number
-}
-
-interface SelectionPoint {
-	line: number
-	col: number
+	/** Enable stats tab (toggled with Tab) */
+	showStatsTab?: boolean
+	/** Stats sampling window (ms) */
+	statsSampleMs?: number
+	/** Stats title override */
+	statsTitle?: string
 }
 
 // ─────────────────────────────────────────────────────────────
@@ -57,70 +68,6 @@ const SELECTION_BG = Colors.rgb(60, 90, 140)
 // Helpers
 // ─────────────────────────────────────────────────────────────
 
-function formatTimestamp(date: Date): string {
-	const h = date.getHours().toString().padStart(2, "0")
-	const m = date.getMinutes().toString().padStart(2, "0")
-	const s = date.getSeconds().toString().padStart(2, "0")
-	return `${h}:${m}:${s}`
-}
-
-function formatLocation(loc?: { file: string; line: number }): string {
-	if (!loc) return ""
-	const parts = loc.file.split("/")
-	const filename = parts[parts.length - 1]
-	return `${filename}:${loc.line}`
-}
-
-function wrapLine(text: string, maxWidth: number): string[] {
-	if (text.length <= maxWidth) return [text]
-
-	const lines: string[] = []
-	let remaining = text
-
-	while (remaining.length > 0) {
-		if (remaining.length <= maxWidth) {
-			lines.push(remaining)
-			break
-		}
-
-		let breakAt = maxWidth
-		const lastSpace = remaining.lastIndexOf(" ", maxWidth)
-		if (lastSpace > maxWidth * 0.5) {
-			breakAt = lastSpace
-		}
-
-		lines.push(remaining.slice(0, breakAt))
-		remaining = remaining.slice(breakAt).trimStart()
-	}
-
-	return lines
-}
-
-/** Normalize selection so start is before end */
-function normalizeSelection(anchor: SelectionPoint, head: SelectionPoint): [SelectionPoint, SelectionPoint] {
-	if (anchor.line < head.line || (anchor.line === head.line && anchor.col <= head.col)) {
-		return [anchor, head]
-	}
-	return [head, anchor]
-}
-
-/** Get selection bounds for a specific line */
-function getLineSelection(
-	lineIndex: number,
-	lineLength: number,
-	start: SelectionPoint,
-	end: SelectionPoint,
-): { startCol: number; endCol: number } | null {
-	if (lineIndex < start.line || lineIndex > end.line) return null
-
-	const startCol = lineIndex === start.line ? Math.min(start.col, lineLength) : 0
-	const endCol = lineIndex === end.line ? Math.min(end.col, lineLength) : lineLength
-
-	if (startCol >= endCol && lineIndex === start.line && lineIndex === end.line) return null
-
-	return { startCol, endCol }
-}
-
 // ─────────────────────────────────────────────────────────────
 // Component
 // ─────────────────────────────────────────────────────────────
@@ -133,6 +80,9 @@ export function ConsolePopover({
 	maxHeightPercent = 80,
 	mode = "overlay",
 	fixedHeight = 10,
+	showStatsTab = false,
+	statsSampleMs,
+	statsTitle,
 }: ConsolePopoverProps) {
 	const { width: termWidth, height: termHeight } = useTerminalSize()
 	const capture = useMemo(() => getConsoleCapture(), [])
@@ -143,6 +93,13 @@ export function ConsolePopover({
 	// Size state (adjustable with +/-)
 	const [sizePercent, setSizePercent] = useState(initialHeightPercent)
 	const [inlineHeight, setInlineHeight] = useState(fixedHeight)
+	const [activeTab, setActiveTab] = useState<"console" | "stats">("console")
+
+	useEffect(() => {
+		if (!showStatsTab && activeTab === "stats") {
+			setActiveTab("console")
+		}
+	}, [showStatsTab, activeTab])
 
 	// Selection state
 	const [selectionAnchor, setSelectionAnchor] = useState<SelectionPoint | null>(null)
@@ -160,9 +117,9 @@ export function ConsolePopover({
 	const {
 		state: scrollState,
 		scrollProps,
-		scrollToEnd,
-		scrollToStart,
-		scrollBy,
+		scrollToEndY,
+		scrollToStartY,
+		scrollByY,
 	} = useScroll({
 		axis: "vertical",
 		sticky: true,
@@ -232,16 +189,11 @@ export function ConsolePopover({
 		if (!selectionAnchor || !selectionHead) return ""
 
 		const [start, end] = normalizeSelection(selectionAnchor, selectionHead)
-		const lines: string[] = []
-
-		for (let i = start.line; i <= end.line && i < displayLines.length; i++) {
-			const lineText = displayLines[i]?.text ?? ""
-			const startCol = i === start.line ? Math.min(start.col, lineText.length) : 0
-			const endCol = i === end.line ? Math.min(end.col, lineText.length) : lineText.length
-			lines.push(lineText.slice(startCol, endCol))
-		}
-
-		return lines.join("\n")
+		return getSelectionText(
+			displayLines.map((line) => line.text),
+			start,
+			end,
+		)
 	}, [selectionAnchor, selectionHead, displayLines])
 
 	// Copy selection to clipboard
@@ -288,7 +240,7 @@ export function ConsolePopover({
 	const mouseToSelectionPoint = useCallback(
 		(mouseX: number, mouseY: number): SelectionPoint | null => {
 			const relativeY = mouseY - contentStartY
-			const lineIndex = relativeY + scrollState.offset
+			const lineIndex = relativeY + scrollState.offsetY
 
 			if (lineIndex < 0 || lineIndex >= displayLines.length) return null
 
@@ -297,11 +249,38 @@ export function ConsolePopover({
 
 			return { line: Math.floor(lineIndex), col }
 		},
-		[contentStartY, scrollState.offset, displayLines.length],
+		[contentStartY, scrollState.offsetY, displayLines.length],
 	)
 
 	// Keyboard handler - no useCallback needed, useKeyboard uses ref internally
 	useKeyboard((key) => {
+		if (showStatsTab && key.name === "tab") {
+			setActiveTab((prev) => (prev === "console" ? "stats" : "console"))
+			key.preventDefault?.()
+			return
+		}
+
+		if (activeTab !== "console") {
+			// Allow size controls even when viewing stats
+			if (key.name === "char" && (key.text === "+" || key.text === "=")) {
+				if (mode === "inline") {
+					setInlineHeight((prev) => Math.min(30, prev + 2))
+				} else {
+					setSizePercent((prev) => Math.min(maxHeightPercent, prev + 5))
+				}
+				return
+			}
+			if (key.name === "char" && key.text === "-") {
+				if (mode === "inline") {
+					setInlineHeight((prev) => Math.max(4, prev - 2))
+				} else {
+					setSizePercent((prev) => Math.max(minHeightPercent, prev - 5))
+				}
+				return
+			}
+			return
+		}
+
 		// Ctrl+Y or Ctrl+C - Copy selection
 		if (key.ctrl && !key.shift && key.name === "char" && (key.text === "y" || key.text === "c")) {
 			handleCopy()
@@ -334,31 +313,31 @@ export function ConsolePopover({
 
 		// Shift+up/down - jump to top/bottom
 		if (key.shift && key.name === "up") {
-			scrollToStart()
+			scrollToStartY()
 			return
 		}
 		if (key.shift && key.name === "down") {
-			scrollToEnd()
+			scrollToEndY()
 			return
 		}
 
 		// Regular up/down - scroll
 		if (key.name === "up") {
-			scrollBy(-1)
+			scrollByY(-1)
 			return
 		}
 		if (key.name === "down") {
-			scrollBy(1)
+			scrollByY(1)
 			return
 		}
 
 		// Home/End
 		if (key.name === "home") {
-			scrollToStart()
+			scrollToStartY()
 			return
 		}
 		if (key.name === "end") {
-			scrollToEnd()
+			scrollToEndY()
 			return
 		}
 	})
@@ -366,6 +345,7 @@ export function ConsolePopover({
 	// Mouse handler for text selection - no useCallback needed, useMouse uses ref internally
 	useMouse(
 		(mouse) => {
+			if (activeTab !== "console") return
 			// Only handle events in content area
 			if (mouse.y < contentStartY || mouse.y >= termHeight) return
 
@@ -385,9 +365,9 @@ export function ConsolePopover({
 				const relativeY = mouse.y - contentStartY
 				const viewportHeight = popoverHeight - 1 // -1 for title
 				if (relativeY <= 1) {
-					scrollBy(-1)
+					scrollByY(-1)
 				} else if (relativeY >= viewportHeight - 2) {
-					scrollBy(1)
+					scrollByY(1)
 				}
 			} else if (mouse.action === "release") {
 				isSelectingRef.current = false
@@ -398,7 +378,8 @@ export function ConsolePopover({
 
 	// Title bar text
 	const titleText = feedback ?? "Console"
-	const hints = `[\` toggle] [~ screenshot] [+/- ${sizePercent}%]`
+	const tabHint = showStatsTab ? "[tab]" : ""
+	const hints = `[\` toggle] [~ screenshot] ${tabHint} [+/- ${sizePercent}%]`
 
 	// Render a line with selection highlighting
 	const renderLine = (line: (typeof displayLines)[0], index: number) => {
@@ -443,16 +424,43 @@ export function ConsolePopover({
 	}
 
 	// Inline mode title bar
-	const inlineHints = `[\` toggle] [+/- size]`
+	const inlineHints = `[\` toggle] ${showStatsTab ? "[tab] " : ""}[+/- size]`
 
 	const consoleContent = (
 		<box width={termWidth} height={popoverHeight} bg={CONTENT_BG}>
 			<vstack width={termWidth} height={popoverHeight}>
 				{/* Title bar */}
 				<hstack height={1} bg={TITLE_BG}>
-					<text fg={feedback ? Colors.green(500) : TITLE_FG} bg={TITLE_BG}>
-						{` ${titleText}`}
-					</text>
+					{showStatsTab ? (
+						<>
+							<text
+								fg={activeTab === "console" ? TITLE_FG : Colors.ansi.gray(10)}
+								bg={TITLE_BG}
+								bold={activeTab === "console"}
+							>
+								{" Console "}
+							</text>
+							<text fg={Colors.ansi.gray(12)} bg={TITLE_BG}>
+								{"|"}
+							</text>
+							<text
+								fg={activeTab === "stats" ? TITLE_FG : Colors.ansi.gray(10)}
+								bg={TITLE_BG}
+								bold={activeTab === "stats"}
+							>
+								{" Stats"}
+							</text>
+							{feedback && (
+								<text fg={Colors.green(500)} bg={TITLE_BG}>
+									{`  ${feedback}`}
+								</text>
+							)}
+						</>
+					) : (
+						<text fg={feedback ? Colors.green(500) : TITLE_FG} bg={TITLE_BG}>
+							{` ${titleText}`}
+						</text>
+					)}
 					<spacer />
 					<text fg={Colors.ansi.gray(14)} bg={TITLE_BG}>
 						{`${mode === "inline" ? inlineHints : hints} `}
@@ -460,17 +468,26 @@ export function ConsolePopover({
 				</hstack>
 
 				{/* Scrollable content */}
-				<scroll {...scrollProps} sticky>
-					<vstack>
-						{displayLines.length === 0 ? (
-							<text fg={Colors.ansi.gray(10)} bg={CONTENT_BG}>
-								No console output yet
-							</text>
-						) : (
-							displayLines.map((line, i) => renderLine(line, i))
-						)}
+				{activeTab === "console" ? (
+					<scroll {...scrollProps} sticky>
+						<vstack>
+							{displayLines.length === 0 ? (
+								<text fg={Colors.ansi.gray(10)} bg={CONTENT_BG}>
+									No console output yet
+								</text>
+							) : (
+								displayLines.map((line, i) => renderLine(line, i))
+							)}
+						</vstack>
+					</scroll>
+				) : (
+					<vstack width={termWidth} bg={CONTENT_BG}>
+						<text fg={Colors.ansi.gray(9)} bg={CONTENT_BG}>
+							{" "}
+						</text>
+						<DiagnosticsPanel sampleMs={statsSampleMs} title={statsTitle ?? "Renderer Stats"} />
 					</vstack>
-				</scroll>
+				)}
 			</vstack>
 		</box>
 	)

package/src/debug/DebugOverlay.ts

@@ -4,6 +4,15 @@
 import type { CellBuffer, KeyMsg, MouseMsg, Palette } from "@effect-tui/core"
 import { getConsoleCapture, type LogLevel } from "../console/ConsoleCapture.js"
 import { copyToClipboard, copyToClipboardSync } from "../console/clipboard.js"
+import {
+	formatLocation,
+	formatTimestamp,
+	getLineSelection,
+	getSelectionText,
+	normalizeSelection,
+	type SelectionPoint,
+	wrapLine,
+} from "../utils/console-helpers.js"
 
 // ─────────────────────────────────────────────────────────────
 // Types
@@ -20,11 +29,6 @@ export interface DebugOverlayOptions {
 	showLocations?: boolean
 }
 
-interface SelectionPoint {
-	line: number
-	col: number
-}
-
 // ─────────────────────────────────────────────────────────────
 // Color constants (8-bit palette indices for performance)
 // ─────────────────────────────────────────────────────────────
@@ -44,56 +48,6 @@ const LOG_COLORS: Record<LogLevel, number> = {
 	DEBUG: 250, // gray(12)
 }
 
-// ─────────────────────────────────────────────────────────────
-// Helpers
-// ─────────────────────────────────────────────────────────────
-
-function formatTimestamp(date: Date): string {
-	const h = date.getHours().toString().padStart(2, "0")
-	const m = date.getMinutes().toString().padStart(2, "0")
-	const s = date.getSeconds().toString().padStart(2, "0")
-	return `${h}:${m}:${s}`
-}
-
-function formatLocation(loc?: { file: string; line: number }): string {
-	if (!loc) return ""
-	const parts = loc.file.split("/")
-	const filename = parts[parts.length - 1]
-	return `${filename}:${loc.line}`
-}
-
-function wrapLine(text: string, maxWidth: number): string[] {
-	if (text.length <= maxWidth) return [text]
-
-	const lines: string[] = []
-	let remaining = text
-
-	while (remaining.length > 0) {
-		if (remaining.length <= maxWidth) {
-			lines.push(remaining)
-			break
-		}
-
-		let breakAt = maxWidth
-		const lastSpace = remaining.lastIndexOf(" ", maxWidth)
-		if (lastSpace > maxWidth * 0.5) {
-			breakAt = lastSpace
-		}
-
-		lines.push(remaining.slice(0, breakAt))
-		remaining = remaining.slice(breakAt).trimStart()
-	}
-
-	return lines
-}
-
-function normalizeSelection(anchor: SelectionPoint, head: SelectionPoint): [SelectionPoint, SelectionPoint] {
-	if (anchor.line < head.line || (anchor.line === head.line && anchor.col <= head.col)) {
-		return [anchor, head]
-	}
-	return [head, anchor]
-}
-
 // ─────────────────────────────────────────────────────────────
 // Debug Overlay Class
 // ─────────────────────────────────────────────────────────────
@@ -437,15 +391,7 @@ export class DebugOverlay {
 		if (!this.selectionAnchor || !this.selectionHead) return null
 
 		const [start, end] = normalizeSelection(this.selectionAnchor, this.selectionHead)
-
-		if (lineIndex < start.line || lineIndex > end.line) return null
-
-		const startCol = lineIndex === start.line ? Math.min(start.col, lineLength) : 0
-		const endCol = lineIndex === end.line ? Math.min(end.col, lineLength) : lineLength
-
-		if (startCol >= endCol && lineIndex === start.line && lineIndex === end.line) return null
-
-		return { startCol, endCol }
+		return getLineSelection(lineIndex, lineLength, start, end)
 	}
 
 	private drawScrollbar(
@@ -476,16 +422,11 @@ export class DebugOverlay {
 		if (!this.selectionAnchor || !this.selectionHead) return ""
 
 		const [start, end] = normalizeSelection(this.selectionAnchor, this.selectionHead)
-		const lines: string[] = []
-
-		for (let i = start.line; i <= end.line && i < this.displayLines.length; i++) {
-			const lineText = this.displayLines[i]?.text ?? ""
-			const startCol = i === start.line ? Math.min(start.col, lineText.length) : 0
-			const endCol = i === end.line ? Math.min(end.col, lineText.length) : lineText.length
-			lines.push(lineText.slice(startCol, endCol))
-		}
-
-		return lines.join("\n")
+		return getSelectionText(
+			this.displayLines.map((line) => line.text),
+			start,
+			end,
+		)
 	}
 
 	private copySelection(): void {

package/src/debug/DiagnosticsPanel.tsx

@@ -27,7 +27,7 @@ export function DiagnosticsPanel({ sampleMs = 200, title = "Diagnostics" }: Diag
 					</text>
 					<text fg={Colors.ansi.gray(12)}>
 						clear {phases?.clear.toFixed(2)}ms · layout {phases?.layout.toFixed(2)}ms · render{" "}
-						{phases?.render.toFixed(2)}ms · diff {phases?.diffAnsi.toFixed(2)}ms · write {phases?.write.toFixed(2)}ms
+						{phases?.render.toFixed(2)}ms · diff {phases?.diffMs.toFixed(2)}ms · write {phases?.write.toFixed(2)}ms
 					</text>
 				</>
 			) : (