@mks2508/mks-ui 0.3.2 → 0.4.0

package/dist/react-ui/blocks/Terminal/panel/TerminalInteractivePanelXterm.js

@@ -0,0 +1,371 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { DeleteIcon } from "../../../icons/lucide-animated/delete.js";
+import { PlusIcon } from "../../../icons/lucide-animated/plus.js";
+import { TerminalIcon } from "../../../icons/lucide-animated/terminal.js";
+import "../../../icons/lucide-animated/index.js";
+import { getTerminalTheme } from "../Terminal.theme.js";
+import { useTerminalWebSocket } from "../hooks/useTerminalWebSocket.js";
+import { useTerminalSettings } from "../hooks/useTerminalSettings.js";
+import { TerminalPanelChrome } from "./TerminalPanelChrome.js";
+import { TerminalSettingsPopover } from "./TerminalSettingsPopover.js";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import { WebLinksAddon } from "@xterm/addon-web-links";
+import { SearchAddon } from "@xterm/addon-search";
+import "@xterm/xterm/css/xterm.css";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelXterm.tsx
+/**
+* TerminalInteractivePanelXterm Component.
+*
+* Full interactive terminal panel with WebSocket-backed I/O,
+* Ghostty-inspired chrome (via TerminalPanelChrome), xterm.js
+* rendering, and action bar controls. Includes settings popover.
+*
+* @module components/devenv/terminal/panel/interactive-xterm
+*/
+/**
+* Terminal display container styles for interactive mode.
+*/
+const terminalContainerStyles = "relative bg-[#241B2F] min-h-[400px] border-x border-border/10 terminal-scroll";
+/**
+* Action button base styles.
+*/
+const actionBtnStyles = "h-8 px-2 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center gap-1 text-xs font-mono text-muted-foreground hover:text-foreground flex-shrink-0";
+/**
+* Min/max font size bounds.
+*/
+const MIN_FONT_SIZE = 10;
+const MAX_FONT_SIZE = 24;
+/**
+* TerminalInteractivePanelXterm Component.
+*
+* Interactive terminal panel combining:
+* - TerminalPanelChrome (Ghostty glassmorphism shell)
+* - xterm.js with interactive mode (cursorBlink, stdin enabled)
+* - WebSocket connection via useTerminalWebSocket
+* - Action bar (clear, settings, font size controls)
+* - Footer with connection status and terminal dimensions
+*
+* @example
+* ```tsx
+* const termRef = useRef<ITerminalInteractivePanelRef>(null);
+*
+* <TerminalInteractivePanelXterm
+*   ref={termRef}
+*   containerName="mks-devenv"
+*   wsUrl="ws://localhost:3100/terminal/session-1"
+*   onConnect={() => console.log('Connected')}
+*   onDisconnect={() => console.log('Disconnected')}
+* />
+* ```
+*/
+const TerminalInteractivePanelXterm = forwardRef(({ containerName, wsUrl, sessions, activeSessionId, onSessionChange, onSessionClose, onNewSession, onConnect, onDisconnect, onError, className }, ref) => {
+	const terminalRef = useRef(null);
+	const fitAddonRef = useRef(null);
+	const searchAddonRef = useRef(null);
+	const containerRef = useRef(null);
+	const terminalReadyRef = useRef(false);
+	const { settings } = useTerminalSettings();
+	const [fontSize, setFontSize] = useState(settings.fontSize);
+	const [dimensions, setDimensions] = useState({
+		cols: 80,
+		rows: 24
+	});
+	/**
+	* WebSocket connection for terminal I/O.
+	*/
+	const { status: connectionStatus, sendInput, sendResize, reconnect } = useTerminalWebSocket({
+		wsUrl,
+		onConnect: () => {
+			onConnect?.();
+			terminalRef.current?.write("\r\n\x1B[32m✓ Connected to terminal\x1B[0m\r\n");
+		},
+		onDisconnect: () => {
+			onDisconnect?.();
+			terminalRef.current?.write("\r\n\x1B[31m✗ Disconnected from terminal\x1B[0m\r\n");
+		},
+		onOutput: (data) => {
+			terminalRef.current?.write(data);
+		},
+		onError: (error) => {
+			onError?.(error);
+			terminalRef.current?.write(`\r\n\x1b[31mError: ${error}\x1b[0m\r\n`);
+		}
+	});
+	const isConnected = connectionStatus === "connected";
+	/**
+	* Initialize xterm.js with interactive mode.
+	*/
+	useEffect(() => {
+		if (!containerRef.current) return;
+		const terminal = new Terminal({
+			cursorBlink: true,
+			cursorStyle: "bar",
+			scrollback: 1e4,
+			fontSize,
+			fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', monospace",
+			theme: getTerminalTheme(),
+			allowProposedApi: true,
+			disableStdin: false
+		});
+		const fitAddon = new FitAddon();
+		const webLinksAddon = new WebLinksAddon();
+		const searchAddon = new SearchAddon();
+		terminal.loadAddon(fitAddon);
+		terminal.loadAddon(webLinksAddon);
+		terminal.loadAddon(searchAddon);
+		terminal.open(containerRef.current);
+		const rafId = requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				try {
+					fitAddon.fit();
+					setDimensions({
+						cols: terminal.cols,
+						rows: terminal.rows
+					});
+				} catch {}
+			});
+		});
+		terminal.onData((data) => {
+			sendInput(data);
+		});
+		terminal.onResize(({ cols, rows }) => {
+			setDimensions({
+				cols,
+				rows
+			});
+			sendResize(cols, rows);
+		});
+		terminalRef.current = terminal;
+		fitAddonRef.current = fitAddon;
+		searchAddonRef.current = searchAddon;
+		terminalReadyRef.current = true;
+		terminal.focus();
+		return () => {
+			cancelAnimationFrame(rafId);
+			terminalReadyRef.current = false;
+			terminal.dispose();
+			terminalRef.current = null;
+			fitAddonRef.current = null;
+			searchAddonRef.current = null;
+		};
+	}, []);
+	/**
+	* Update font size on existing terminal.
+	*/
+	useEffect(() => {
+		if (!terminalRef.current || !terminalReadyRef.current) return;
+		terminalRef.current.options.fontSize = fontSize;
+		requestAnimationFrame(() => {
+			try {
+				fitAddonRef.current?.fit();
+				if (terminalRef.current) setDimensions({
+					cols: terminalRef.current.cols,
+					rows: terminalRef.current.rows
+				});
+			} catch {}
+		});
+	}, [fontSize]);
+	/**
+	* Handle window resize.
+	*/
+	useEffect(() => {
+		const handleResize = () => {
+			requestAnimationFrame(() => {
+				if (fitAddonRef.current && terminalRef.current) try {
+					fitAddonRef.current.fit();
+					setDimensions({
+						cols: terminalRef.current.cols,
+						rows: terminalRef.current.rows
+					});
+				} catch {}
+			});
+		};
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, []);
+	/**
+	* Clear terminal display.
+	*/
+	const handleClear = useCallback(() => {
+		terminalRef.current?.clear();
+	}, []);
+	/**
+	* Increase font size.
+	*/
+	const handleFontIncrease = useCallback(() => {
+		setFontSize((prev) => Math.min(prev + 1, MAX_FONT_SIZE));
+	}, []);
+	/**
+	* Decrease font size.
+	*/
+	const handleFontDecrease = useCallback(() => {
+		setFontSize((prev) => Math.max(prev - 1, MIN_FONT_SIZE));
+	}, []);
+	/**
+	* Expose imperative methods to parent.
+	*/
+	useImperativeHandle(ref, () => ({
+		write: (text) => {
+			terminalRef.current?.write(text);
+		},
+		clear: () => {
+			terminalRef.current?.clear();
+		},
+		focus: () => {
+			terminalRef.current?.focus();
+		},
+		sendInput: (data) => {
+			sendInput(data);
+		},
+		isConnected: () => connectionStatus === "connected"
+	}));
+	/**
+	* Get connection status label with color.
+	*/
+	const getStatusLabel = () => {
+		switch (connectionStatus) {
+			case "connected": return {
+				text: "Connected",
+				color: "text-success"
+			};
+			case "connecting": return {
+				text: "Connecting...",
+				color: "text-yellow-500"
+			};
+			case "error": return {
+				text: "Error",
+				color: "text-destructive"
+			};
+			default: return {
+				text: "Disconnected",
+				color: "text-muted-foreground"
+			};
+		}
+	};
+	const statusLabel = getStatusLabel();
+	return /* @__PURE__ */ jsx(TerminalPanelChrome, {
+		containerName,
+		isConnected,
+		crtEffect: settings.crtEffect,
+		sessions,
+		activeSessionId,
+		onSessionTabClick: onSessionChange,
+		onSessionClose,
+		onNewSession,
+		actionBar: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 px-3 h-10 bg-muted/10 border-b border-white/10",
+			children: [
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: handleClear,
+					className: actionBtnStyles,
+					title: "Clear terminal (Ctrl+L)",
+					children: [/* @__PURE__ */ jsx(DeleteIcon, { className: "w-3.5 h-3.5 flex-shrink-0" }), /* @__PURE__ */ jsx("span", { children: "Clear" })]
+				}),
+				/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+				/* @__PURE__ */ jsx(TerminalSettingsPopover, {}),
+				connectionStatus === "disconnected" && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: reconnect,
+					className: cn(actionBtnStyles, "text-primary hover:text-primary"),
+					title: "Reconnect",
+					children: "Reconnect"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-[10px] text-muted-foreground font-mono uppercase tracking-wider mr-1",
+							children: "Font"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: handleFontDecrease,
+							className: cn(actionBtnStyles, "w-7 h-7 px-0"),
+							title: "Decrease font size",
+							disabled: fontSize <= MIN_FONT_SIZE,
+							children: /* @__PURE__ */ jsx("span", {
+								className: "text-sm font-bold",
+								children: "−"
+							})
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-xs font-mono text-foreground w-7 text-center",
+							children: fontSize
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: handleFontIncrease,
+							className: cn(actionBtnStyles, "w-7 h-7 px-0"),
+							title: "Increase font size",
+							disabled: fontSize >= MAX_FONT_SIZE,
+							children: /* @__PURE__ */ jsx(PlusIcon, { className: "w-3 h-3 flex-shrink-0" })
+						})
+					]
+				})
+			]
+		}),
+		footer: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between px-4 h-10 bg-muted/20 border-t border-white/10",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-3",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx("div", { className: cn("w-2 h-2 rounded-full transition-all duration-300", isConnected ? "bg-success/80 shadow-[0_0_8px_hsla(142,100%,62%,0.5)]" : connectionStatus === "connecting" ? "bg-yellow-500/80 animate-pulse" : connectionStatus === "error" ? "bg-destructive/80" : "bg-muted-foreground/60") }), /* @__PURE__ */ jsx("span", {
+						className: cn("text-xs font-mono", statusLabel.color),
+						children: statusLabel.text
+					})]
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "text-xs font-mono text-muted-foreground",
+					children: [
+						dimensions.cols,
+						"×",
+						dimensions.rows
+					]
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "text-xs font-mono text-muted-foreground",
+					children: [fontSize, "px"]
+				})]
+			})]
+		}),
+		className,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative min-h-[400px]",
+			children: [/* @__PURE__ */ jsx("div", {
+				ref: containerRef,
+				className: terminalContainerStyles
+			}), connectionStatus === "disconnected" && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 flex items-center justify-center bg-black/40 backdrop-blur-sm pointer-events-none",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "text-center pointer-events-auto",
+					children: [
+						/* @__PURE__ */ jsx(TerminalIcon, { className: "w-12 h-12 mx-auto mb-3 text-muted-foreground/50" }),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-sm text-muted-foreground/70 font-mono mb-3",
+							children: "Terminal disconnected"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: reconnect,
+							className: cn("px-4 py-2 rounded-lg text-sm font-mono transition-colors", "bg-primary/20 text-primary hover:bg-primary/30", "border border-primary/40", "shadow-[0_0_10px_hsla(330,85%,43%,0.2)]"),
+							children: "Reconnect"
+						})
+					]
+				})
+			})]
+		})
+	});
+});
+TerminalInteractivePanelXterm.displayName = "TerminalInteractivePanelXterm";
+
+//#endregion
+export { TerminalInteractivePanelXterm };

package/dist/react-ui/blocks/Terminal/panel/TerminalLogsPanel.d.ts

@@ -0,0 +1,67 @@
+/**
+ * TerminalLogsPanel Component.
+ *
+ * Ghostty-inspired terminal panel with session tabs, glassmorphic header,
+ * tab-style filters, compact actions, and premium visual effects.
+ *
+ * @module components/devenv/terminal/panel
+ */
+import type { ITerminalLogsPanelProps } from './TerminalLogsPanel.types';
+import '@xterm/xterm/css/xterm.css';
+/**
+ * Imperative handle for TerminalLogsPanel component.
+ * Exposes terminal control methods to parent components.
+ */
+export interface ITerminalLogsPanelRef {
+    /** Search for term in terminal buffer */
+    search: (term: string) => void;
+    /** Clear terminal and reset position */
+    clear: () => void;
+    /** Write text to terminal */
+    write: (text: string) => void;
+    /** Scroll to bottom of terminal */
+    scrollToBottom: () => void;
+}
+/**
+ * TerminalLogsPanel Component.
+ *
+ * Ghostty-inspired complete terminal panel with:
+ * - Session tabs (multi-session support)
+ * - Enhanced glassmorphic header
+ * - Tab-style filter buttons
+ * - Compact action bar
+ * - xterm.js terminal display
+ * - Status footer with counts
+ * - Multi-layer glassmorphism
+ * - Noise texture for depth
+ * - Animated accent lines
+ *
+ * @example
+ * ```tsx
+ * const panelRef = useRef<ITerminalLogsPanelRef>(null);
+ *
+ * <TerminalLogsPanel
+ *   ref={panelRef}
+ *   containerName="devenv-agent-backend"
+ *   isConnected={true}
+ *   parsedEntries={state.parsedEntries}
+ *   filterLevel="all"
+ *   followCursor={true}
+ *   showLineNumbers={false}
+ *   levelCounts={{ info: 42, warn: 3 }}
+ *   sessions={sessions}
+ *   activeSessionId="session-1"
+ *   onSessionChange={(id) => setActiveSession(id)}
+ *   onSessionClose={(id) => closeSession(id)}
+ *   onNewSession={() => createSession()}
+ *   onFilterChange={(level) => setFilterLevel(level)}
+ *   onFollowCursorChange={(enabled) => setFollowCursor(enabled)}
+ *   onShowLineNumbersChange={(enabled) => setShowLineNumbers(enabled)}
+ *   onClear={() => clearLogs()}
+ *   onDownload={() => downloadLogs()}
+ *   onSearch={() => openSearch()}
+ * />
+ * ```
+ */
+export declare const TerminalLogsPanel: import("react").ForwardRefExoticComponent<ITerminalLogsPanelProps & import("react").RefAttributes<ITerminalLogsPanelRef>>;
+//# sourceMappingURL=TerminalLogsPanel.d.ts.map

package/dist/react-ui/blocks/Terminal/panel/TerminalLogsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalLogsPanel.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalLogsPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAYH,OAAO,KAAK,EACV,uBAAuB,EAGxB,MAAM,2BAA2B,CAAC;AASnC,OAAO,4BAA4B,CAAC;AAyBpC;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,yCAAyC;IACzC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAE/B,wCAAwC;IACxC,KAAK,EAAE,MAAM,IAAI,CAAC;IAElB,6BAA6B;IAC7B,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9B,mCAAmC;IACnC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AA8BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,iBAAiB,2HAmZ7B,CAAC"}