@effect-tui/react 0.1.3 → 0.1.5

package/src/console/ConsolePopover.tsx

@@ -0,0 +1,487 @@
+// Console popover component for displaying captured console output
+// Shows logs in a scrollable overlay with text selection and copy functionality
+
+import { useState, useCallback, useEffect, useMemo, useRef } from "react"
+import { Colors, type ColorValue } from "@effect-tui/core"
+import { useTerminalSize } from "../renderer.js"
+import { useKeyboard } from "../hooks/use-keyboard.js"
+import { useMouse } from "../hooks/use-mouse.js"
+import { useScroll } from "../hooks/use-scroll.js"
+import { getConsoleCapture, type LogEntry, type LogLevel } from "./ConsoleCapture.js"
+import { copyToClipboardSync, copyToClipboard } from "./clipboard.js"
+
+// ─────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────
+
+export interface ConsolePopoverProps {
+	/** Initial height as percentage of terminal (default: 30) */
+	heightPercent?: number
+	/** Custom copy handler (default: system clipboard) */
+	onCopy?: (text: string) => void
+	/** Show file location for each log entry */
+	showLocations?: boolean
+	/** Minimum height percent (default: 10) */
+	minHeightPercent?: number
+	/** Maximum height percent (default: 80) */
+	maxHeightPercent?: number
+	/** Render mode - inline skips the full-height zstack wrapper */
+	mode?: "overlay" | "inline"
+	/** Fixed height in lines for inline mode */
+	fixedHeight?: number
+}
+
+interface SelectionPoint {
+	line: number
+	col: number
+}
+
+// ─────────────────────────────────────────────────────────────
+// Color scheme
+// ─────────────────────────────────────────────────────────────
+
+const LOG_COLORS: Record<LogLevel, ColorValue> = {
+	LOG: Colors.white,
+	INFO: Colors.cyan,
+	WARN: Colors.yellow,
+	ERROR: Colors.red,
+	DEBUG: Colors.gray(12),
+}
+
+const TITLE_BG = Colors.gray(4)
+const TITLE_FG = Colors.white
+const CONTENT_BG = Colors.gray(2)
+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
+// ─────────────────────────────────────────────────────────────
+
+export function ConsolePopover({
+	heightPercent: initialHeightPercent = 30,
+	onCopy,
+	showLocations = true,
+	minHeightPercent = 10,
+	maxHeightPercent = 80,
+	mode = "overlay",
+	fixedHeight = 10,
+}: ConsolePopoverProps) {
+	const { width: termWidth, height: termHeight } = useTerminalSize()
+	const capture = useMemo(() => getConsoleCapture(), [])
+
+	// Log entries state
+	const [entries, setEntries] = useState<LogEntry[]>(() => capture.getEntries())
+
+	// Size state (adjustable with +/-)
+	const [sizePercent, setSizePercent] = useState(initialHeightPercent)
+	const [inlineHeight, setInlineHeight] = useState(fixedHeight)
+
+	// Selection state
+	const [selectionAnchor, setSelectionAnchor] = useState<SelectionPoint | null>(null)
+	const [selectionHead, setSelectionHead] = useState<SelectionPoint | null>(null)
+	const isSelectingRef = useRef(false)
+
+	// Feedback state
+	const [feedback, setFeedback] = useState<string | null>(null)
+
+	// Calculate dimensions - inline mode uses adjustable fixed height
+	const popoverHeight = mode === "inline"
+		? inlineHeight
+		: Math.max(5, Math.floor(termHeight * (sizePercent / 100)))
+	const contentStartY = termHeight - popoverHeight + 1 // +1 for title bar
+
+	// Use scroll hook for content scrolling
+	const { state: scrollState, scrollProps, scrollToEnd, scrollToStart, scrollBy } = useScroll({
+		axis: "vertical",
+		sticky: true,
+		enableKeyboard: false,
+	})
+
+	// Subscribe to new log entries
+	useEffect(() => {
+		const handleEntry = (_entry: LogEntry) => {
+			setEntries(capture.getEntries())
+		}
+
+		capture.on("entry", handleEntry)
+		return () => {
+			capture.off("entry", handleEntry)
+		}
+	}, [capture])
+
+	// Compute display lines (each entry may span multiple lines)
+	const displayLines = useMemo(() => {
+		const lines: Array<{
+			entryIndex: number
+			lineIndex: number
+			text: string
+			level: LogLevel
+		}> = []
+
+		const availableWidth = termWidth - 1 // Leave room for scrollbar
+
+		for (let i = 0; i < entries.length; i++) {
+			const entry = entries[i]
+			const timestamp = formatTimestamp(entry.timestamp)
+			const location = showLocations ? formatLocation(entry.location) : ""
+
+			const prefix = `[${timestamp}] [${entry.level}] `
+			const suffix = location ? ` (${location})` : ""
+
+			const messageLines = entry.message.split("\n")
+
+			for (let j = 0; j < messageLines.length; j++) {
+				const msgLine = messageLines[j]
+				const isFirstLine = j === 0
+				const isLastLine = j === messageLines.length - 1
+
+				const linePrefix = isFirstLine ? prefix : "    "
+				const lineSuffix = isLastLine ? suffix : ""
+
+				const fullLine = linePrefix + msgLine + lineSuffix
+				const wrappedLines = wrapLine(fullLine, availableWidth)
+
+				for (const wrappedLine of wrappedLines) {
+					lines.push({
+						entryIndex: i,
+						lineIndex: lines.length,
+						text: wrappedLine,
+						level: entry.level,
+					})
+				}
+			}
+		}
+
+		return lines
+	}, [entries, termWidth, showLocations])
+
+	// Get selected text
+	const getSelectedText = useCallback((): string => {
+		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")
+	}, [selectionAnchor, selectionHead, displayLines])
+
+	// Copy selection to clipboard
+	const handleCopy = useCallback(() => {
+		const text = getSelectedText()
+		if (!text) return
+
+		if (onCopy) {
+			onCopy(text)
+		} else {
+			const copied = copyToClipboardSync(text)
+			if (!copied) {
+				copyToClipboard(text)
+			}
+		}
+
+		setFeedback("Copied!")
+		setTimeout(() => setFeedback(null), 1000)
+	}, [getSelectedText, onCopy])
+
+	// Save logs to tmp file
+	const handleSave = useCallback(async () => {
+		const allText = displayLines.map((l) => l.text).join("\n")
+		const tmpPath = `/tmp/console-logs-${Date.now()}.txt`
+
+		try {
+			await Bun.write(tmpPath, allText)
+
+			// Copy path to clipboard
+			const copied = copyToClipboardSync(tmpPath)
+			if (!copied) {
+				await copyToClipboard(tmpPath)
+			}
+
+			setFeedback(`Saved: ${tmpPath}`)
+			setTimeout(() => setFeedback(null), 2000)
+		} catch (err) {
+			setFeedback("Save failed")
+			setTimeout(() => setFeedback(null), 1000)
+		}
+	}, [displayLines])
+
+	// Convert mouse position to selection point
+	const mouseToSelectionPoint = useCallback(
+		(mouseX: number, mouseY: number): SelectionPoint | null => {
+			const relativeY = mouseY - contentStartY
+			const lineIndex = relativeY + scrollState.offset
+
+			if (lineIndex < 0 || lineIndex >= displayLines.length) return null
+
+			// X is relative to left edge of content
+			const col = Math.max(0, mouseX)
+
+			return { line: Math.floor(lineIndex), col }
+		},
+		[contentStartY, scrollState.offset, displayLines.length],
+	)
+
+	// Keyboard handler
+	useKeyboard(
+		useCallback(
+			(key) => {
+				// Ctrl+Y or Ctrl+C - Copy selection
+				if (key.ctrl && !key.shift && key.name === "char" && (key.text === "y" || key.text === "c")) {
+					handleCopy()
+					return
+				}
+
+				// Ctrl+S - Save logs to file
+				if (key.ctrl && !key.shift && key.name === "char" && key.text === "s") {
+					handleSave()
+					return
+				}
+
+				// Size controls
+				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
+				}
+
+				// Shift+up/down - jump to top/bottom
+				if (key.shift && key.name === "up") {
+					scrollToStart()
+					return
+				}
+				if (key.shift && key.name === "down") {
+					scrollToEnd()
+					return
+				}
+
+				// Regular up/down - scroll
+				if (key.name === "up") {
+					scrollBy(-1)
+					return
+				}
+				if (key.name === "down") {
+					scrollBy(1)
+					return
+				}
+
+				// Home/End
+				if (key.name === "home") {
+					scrollToStart()
+					return
+				}
+				if (key.name === "end") {
+					scrollToEnd()
+					return
+				}
+			},
+			[handleCopy, handleSave, maxHeightPercent, minHeightPercent, scrollToStart, scrollToEnd, scrollBy],
+		),
+	)
+
+	// Mouse handler for text selection
+	useMouse(
+		useCallback(
+			(mouse) => {
+				// Only handle events in content area
+				if (mouse.y < contentStartY || mouse.y >= termHeight) return
+
+				const point = mouseToSelectionPoint(mouse.x, mouse.y)
+				if (!point) return
+
+				if (mouse.action === "press") {
+					// Start new selection
+					setSelectionAnchor(point)
+					setSelectionHead(point)
+					isSelectingRef.current = true
+				} else if (mouse.action === "drag" && isSelectingRef.current) {
+					// Extend selection
+					setSelectionHead(point)
+
+					// Auto-scroll when dragging near edges
+					const relativeY = mouse.y - contentStartY
+					const viewportHeight = popoverHeight - 1 // -1 for title
+					if (relativeY <= 1) {
+						scrollBy(-1)
+					} else if (relativeY >= viewportHeight - 2) {
+						scrollBy(1)
+					}
+				} else if (mouse.action === "release") {
+					isSelectingRef.current = false
+				}
+			},
+			[contentStartY, termHeight, mouseToSelectionPoint, popoverHeight, scrollBy],
+		),
+		{ action: "any", button: "left" },
+	)
+
+	// Title bar text
+	const titleText = feedback ?? "Console"
+	const hints = `[\` toggle] [~ screenshot] [+/- ${sizePercent}%]`
+
+	// Render a line with selection highlighting
+	const renderLine = (line: (typeof displayLines)[0], index: number) => {
+		const paddedText = line.text.padEnd(termWidth - 1, " ")
+
+		// Check if this line has selection
+		if (selectionAnchor && selectionHead) {
+			const [start, end] = normalizeSelection(selectionAnchor, selectionHead)
+			const sel = getLineSelection(index, paddedText.length, start, end)
+
+			if (sel) {
+				const before = paddedText.slice(0, sel.startCol)
+				const selected = paddedText.slice(sel.startCol, sel.endCol)
+				const after = paddedText.slice(sel.endCol)
+
+				return (
+					<hstack key={index}>
+					{before.length > 0 && (
+						<text fg={LOG_COLORS[line.level]} bg={CONTENT_BG}>
+							{before}
+						</text>
+					)}
+					<text fg={Colors.white} bg={SELECTION_BG}>
+						{selected}
+					</text>
+					{after.length > 0 && (
+						<text fg={LOG_COLORS[line.level]} bg={CONTENT_BG}>
+							{after}
+						</text>
+					)}
+				</hstack>
+			)
+		}
+		}
+
+		// No selection on this line
+		return (
+			<text key={index} fg={LOG_COLORS[line.level]} bg={CONTENT_BG}>
+				{paddedText}
+			</text>
+		)
+	}
+
+	// Inline mode title bar
+	const inlineHints = `[\` toggle] [+/- 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 : TITLE_FG} bg={TITLE_BG}>
+						{" " + titleText}
+					</text>
+					<spacer />
+					<text fg={Colors.gray(14)} bg={TITLE_BG}>
+						{(mode === "inline" ? inlineHints : hints) + " "}
+					</text>
+				</hstack>
+
+				{/* Scrollable content */}
+				<scroll {...scrollProps} sticky>
+					<vstack>
+						{displayLines.length === 0 ? (
+							<text fg={Colors.gray(10)} bg={CONTENT_BG}>
+								No console output yet
+							</text>
+						) : (
+							displayLines.map((line, i) => renderLine(line, i))
+						)}
+					</vstack>
+				</scroll>
+			</vstack>
+		</box>
+	)
+
+	// Just render the box - parent handles positioning (zstack alignment or vstack order)
+	return consoleContent
+}

package/src/console/clipboard.ts

@@ -0,0 +1,81 @@
+// Platform-aware clipboard helper for console copy functionality
+
+import { spawn } from "node:child_process"
+
+/**
+ * Copy text to system clipboard.
+ * Uses pbcopy on macOS, clip.exe on Windows, xclip on Linux.
+ */
+export function copyToClipboard(text: string): Promise<boolean> {
+	return new Promise((resolve) => {
+		let cmd: string
+		let args: string[]
+
+		switch (process.platform) {
+			case "darwin":
+				cmd = "pbcopy"
+				args = []
+				break
+			case "win32":
+				cmd = "clip"
+				args = []
+				break
+			default:
+				// Linux/other - try xclip first
+				cmd = "xclip"
+				args = ["-selection", "clipboard"]
+				break
+		}
+
+		try {
+			const proc = spawn(cmd, args, { stdio: ["pipe", "ignore", "ignore"] })
+
+			proc.on("error", () => {
+				// Command not found or failed to spawn
+				resolve(false)
+			})
+
+			proc.on("close", (code) => {
+				resolve(code === 0)
+			})
+
+			proc.stdin?.write(text)
+			proc.stdin?.end()
+		} catch {
+			resolve(false)
+		}
+	})
+}
+
+/**
+ * Sync version using Bun.spawn if available (preferred for TUI apps)
+ */
+export function copyToClipboardSync(text: string): boolean {
+	if (typeof Bun !== "undefined") {
+		try {
+			let cmd: string[]
+			switch (process.platform) {
+				case "darwin":
+					cmd = ["pbcopy"]
+					break
+				case "win32":
+					cmd = ["clip"]
+					break
+				default:
+					cmd = ["xclip", "-selection", "clipboard"]
+					break
+			}
+
+			const proc = Bun.spawn(cmd, { stdin: "pipe" })
+			proc.stdin.write(text)
+			proc.stdin.end()
+			return true
+		} catch {
+			return false
+		}
+	}
+
+	// Fallback: can't do sync copy without Bun
+	// In this case, the caller should use the async version
+	return false
+}

package/src/console/index.ts

@@ -0,0 +1,42 @@
+// Console capture and popover for TUI debugging
+//
+// Usage:
+// ```tsx
+// import { ConsolePopover, useConsole } from "@effect-tui/react/console"
+//
+// function App() {
+//   const { visible } = useConsole({ autoShowOnError: true })
+//
+//   return (
+//     <zstack>
+//       <MainContent />
+//       {visible && <ConsolePopover position="bottom" heightPercent={30} />}
+//     </zstack>
+//   )
+// }
+// ```
+//
+// Keybindings:
+// - ` (backtick): Toggle console visibility
+// - ~ (tilde): Screenshot (saves to /tmp and copies path)
+// - Ctrl+Y: Copy selected text (when console visible)
+//
+// Navigation (when console visible):
+// - Up/Down: Scroll log entries
+// - Shift+Up/Down: Jump to top/bottom
+// - Home/End: Jump to start/end
+// - +/-: Resize console height
+
+export {
+	ConsoleCapture,
+	getConsoleCapture,
+	type LogEntry,
+	type LogLevel,
+	type SourceLocation,
+} from "./ConsoleCapture.js"
+
+export { ConsolePopover, type ConsolePopoverProps } from "./ConsolePopover.js"
+
+export { useConsole, type UseConsoleOptions, type UseConsoleReturn } from "./useConsole.js"
+
+export { copyToClipboard, copyToClipboardSync } from "./clipboard.js"