@mks2508/mks-ui 0.6.8 → 0.7.0

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

@@ -1,16 +1,15 @@
 '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 { useTerminalSettings } from "../hooks/useTerminalSettings.js";
+import { useTerminal } from "../hooks/useTerminal.js";
+import { TerminalDisconnectedOverlay } from "../controls/TerminalAtoms.js";
+import { TerminalActionBar } from "../controls/TerminalActionBar/index.js";
+import { TerminalStatusBar } from "../controls/TerminalStatusBar/index.js";
 import { TerminalPanelChrome } from "./TerminalPanelChrome.js";
-import { TerminalRestty } from "../TerminalRestty.js";
-import { TerminalSettingsPopover } from "./TerminalSettingsPopover.js";
-import { TerminalDebugPanel } from "./TerminalDebugPanel.js";
-import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
+import { ResttyTerminal } from "../restty/ResttyTerminal.js";
+import "../restty/index.js";
+import { TerminalDebugPanel } from "./TerminalDebugPanel/index.js";
+import { forwardRef, useImperativeHandle } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelRestty.tsx
@@ -22,26 +21,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * footer) but uses restty for rendering and its own PTY transport
 * instead of useTerminalWebSocket.
 *
+* Internally composes `useTerminal` hook with `TerminalActionBar`,
+* `TerminalStatusBar`, and `TerminalDisconnectedOverlay` atoms.
+*
 * @module components/devenv/terminal/panel/interactive-restty
 */
 /**
-* Min/max font size bounds.
-*/
-const MIN_FONT_SIZE = 10;
-const MAX_FONT_SIZE = 24;
-/**
-* 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";
-/**
 * TerminalInteractivePanelRestty Component.
 *
 * GPU-accelerated interactive terminal combining:
 * - TerminalPanelChrome (Ghostty glassmorphism shell)
 * - restty with WebGPU/WebGL2 rendering
-* - Custom DevenvPtyTransport for mks-devenv WebSocket protocol
-* - Action bar (clear, font size controls, reconnect)
-* - Footer with connection status and terminal dimensions
+* - Composable action bar (clear, settings, split, font controls)
+* - Composable status bar (connection, dimensions, font size)
+* - Disconnected overlay with reconnect button
 *
 * @example
 * ```tsx
@@ -53,270 +46,56 @@ const actionBtnStyles = "h-8 px-2 rounded-md transition-all hover:bg-muted/20 ac
 * ```
 */
 const TerminalInteractivePanelRestty = forwardRef(({ containerName, wsUrl, sessions, activeSessionId, onSessionChange, onSessionClose, onNewSession, onConnect, onDisconnect, onError, className }, ref) => {
-	const resttyRef = useRef(null);
-	const { settings } = useTerminalSettings();
-	const [fontSize, setFontSize] = useState(settings.fontSize);
-	const [dimensions, setDimensions] = useState({
-		cols: 80,
-		rows: 24
+	const terminal = useTerminal({
+		wsUrl,
+		onConnect,
+		onDisconnect,
+		onError
 	});
-	const [connectionStatus, setConnectionStatus] = useState("disconnected");
-	const [uptimeStart, setUptimeStart] = useState(null);
-	/**
-	* Handle PTY connection status changes from restty.
-	*/
-	const handlePtyStatus = useCallback((status) => {
-		if (status === "connected" || status === "attached" || status === "welcome" || status === "created") setConnectionStatus("connected");
-		else if (status === "connecting") setConnectionStatus("connecting");
-		else if (status === "error") setConnectionStatus("error");
-	}, []);
-	/**
-	* Handle PTY connection open.
-	*/
-	const handleConnect = useCallback(() => {
-		setConnectionStatus("connected");
-		setUptimeStart(Date.now());
-		onConnect?.();
-	}, [onConnect]);
-	/**
-	* Handle PTY connection close.
-	*/
-	const handleDisconnect = useCallback(() => {
-		setConnectionStatus("disconnected");
-		setUptimeStart(null);
-		onDisconnect?.();
-	}, [onDisconnect]);
-	/**
-	* Handle PTY errors.
-	*/
-	const handleError = useCallback((message) => {
-		setConnectionStatus("error");
-		onError?.(message);
-	}, [onError]);
-	/**
-	* Handle terminal resize from restty.
-	*/
-	const handleResize = useCallback((cols, rows) => {
-		setDimensions({
-			cols,
-			rows
-		});
-	}, []);
-	const isConnected = connectionStatus === "connected";
-	/**
-	* Clear terminal display.
-	*/
-	const handleClear = useCallback(() => {
-		resttyRef.current?.clear();
-	}, []);
-	/**
-	* Increase font size.
-	*/
-	const handleFontIncrease = useCallback(() => {
-		setFontSize((prev) => {
-			const next = Math.min(prev + 1, MAX_FONT_SIZE);
-			resttyRef.current?.setFontSize(next);
-			return next;
-		});
-	}, []);
-	/**
-	* Decrease font size.
-	*/
-	const handleFontDecrease = useCallback(() => {
-		setFontSize((prev) => {
-			const next = Math.max(prev - 1, MIN_FONT_SIZE);
-			resttyRef.current?.setFontSize(next);
-			return next;
-		});
-	}, []);
-	/**
-	* Reconnect to PTY.
-	*/
-	const handleReconnect = useCallback(() => {
-		if (!wsUrl) return;
-		resttyRef.current?.disconnectPty();
-		resttyRef.current?.connectPty(wsUrl);
-		setConnectionStatus("connecting");
-	}, [wsUrl]);
 	/**
 	* Expose imperative methods to parent.
 	*/
 	useImperativeHandle(ref, () => ({
 		write: (_text) => {},
-		clear: () => {
-			resttyRef.current?.clear();
-		},
-		focus: () => {
-			resttyRef.current?.focus();
-		},
-		sendInput: (data) => {
-			resttyRef.current?.sendInput(data);
-		},
-		isConnected: () => resttyRef.current?.isPtyConnected() ?? false
+		clear: () => terminal.clear(),
+		focus: () => terminal.focus(),
+		sendInput: (data) => terminal.sendInput(data),
+		isConnected: () => terminal.isConnected
 	}));
-	/**
-	* Get connection status label with color.
-	*/
-	const getStatusLabel = () => {
-		switch (connectionStatus) {
-			case "connected": return {
-				text: "Connected (GPU)",
-				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__ */ jsxs(TerminalPanelChrome, {
 		containerName,
-		isConnected,
-		crtEffect: settings.crtEffect,
+		isConnected: terminal.isConnected,
+		crtEffect: terminal.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",
-					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, {}),
-				/* @__PURE__ */ jsx("span", {
-					className: "text-[10px] font-mono text-primary/70 uppercase tracking-wider px-1.5 py-0.5 rounded border border-primary/20 bg-primary/5",
-					children: "restty"
-				}),
-				connectionStatus === "disconnected" && /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: handleReconnect,
-					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"]
-				})]
-			})]
-		}),
+		actionBar: /* @__PURE__ */ jsx(TerminalActionBar, { terminal }),
+		footer: /* @__PURE__ */ jsx(TerminalStatusBar, { terminal }),
 		className,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "relative min-h-[400px]",
-			children: [/* @__PURE__ */ jsx(TerminalRestty, {
-				ref: resttyRef,
-				wsUrl,
-				fontSize,
-				resttyThemeName: settings.resttyThemeName,
+			children: [/* @__PURE__ */ jsx(ResttyTerminal, {
+				ref: terminal.ref,
+				...terminal.resttyProps,
+				resttyThemeName: terminal.settings.resttyThemeName,
 				gpuRenderer: "auto",
-				onResize: handleResize,
-				onPtyStatus: handlePtyStatus,
-				onConnect: handleConnect,
-				onDisconnect: handleDisconnect,
-				onError: handleError,
-				className: "w-full h-full min-h-[400px] bg-[#241B2F]"
-			}), 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: handleReconnect,
-							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"
-						})
-					]
-				})
+				className: cn("w-full h-full min-h-[400px]", "bg-[hsl(var(--terminal-bg,var(--background)))]")
+			}), /* @__PURE__ */ jsx(TerminalDisconnectedOverlay, {
+				onReconnect: terminal.reconnect,
+				visible: terminal.status === "disconnected"
 			})]
 		}), /* @__PURE__ */ jsx(TerminalDebugPanel, {
-			visible: settings.debugPanel,
-			renderer: connectionStatus === "connected" ? "restty (GPU)" : void 0,
-			gridSize: dimensions.cols > 0 ? {
-				cols: dimensions.cols,
-				rows: dimensions.rows
-			} : void 0,
-			font: `JetBrains Mono ${fontSize}px`,
-			ptyStatus: connectionStatus,
+			visible: terminal.settings.debugPanel,
+			renderer: terminal.isConnected ? "restty (GPU)" : void 0,
+			gridSize: terminal.dimensions.cols > 0 ? terminal.dimensions : void 0,
+			font: `JetBrains Mono ${terminal.fontSize}px`,
+			ptyStatus: terminal.status,
 			ptyUrl: wsUrl,
-			themeName: settings.resttyThemeName,
-			crtEffect: settings.crtEffect,
-			uptimeSeconds: uptimeStart ? Math.floor((Date.now() - uptimeStart) / 1e3) : 0
+			themeName: terminal.settings.resttyThemeName,
+			crtEffect: terminal.settings.crtEffect,
+			uptimeSeconds: terminal.uptimeSeconds ?? 0
 		})]
 	});
 });

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

@@ -0,0 +1,43 @@
+/**
+ * TerminalInteractivePanelWterm Component.
+ *
+ * Interactive terminal panel using wterm — Zig + WASM terminal emulator.
+ * Mirrors TerminalInteractivePanel's UI (Ghostty chrome, action bar,
+ * footer) but uses wterm for rendering with WtermJsonTransport
+ * bridging the MKS JSON WebSocket protocol.
+ *
+ * @module components/devenv/terminal/panel/interactive-wterm
+ */
+import type { ITerminalInteractivePanelProps, ITerminalInteractivePanelRef } from './TerminalInteractivePanel.types';
+import '@wterm/react/css';
+/**
+ * TerminalInteractivePanelWterm Component.
+ *
+ * Interactive terminal panel combining:
+ * - TerminalPanelChrome (Ghostty glassmorphism shell)
+ * - wterm with Zig + WASM VT100/VT220/xterm parser
+ * - WtermJsonTransport bridging MKS JSON WS protocol
+ * - Composable action bar and status bar atoms
+ *
+ * wterm features:
+ * - ~12KB WASM binary (embedded base64 fallback)
+ * - DOM rendering with dirty-row tracking via requestAnimationFrame
+ * - Full 24-bit color (SGR) support
+ * - Alternate screen buffer (vim, less, htop work)
+ * - Scrollback history ring buffer
+ *
+ * @example
+ * ```tsx
+ * const termRef = useRef<ITerminalInteractivePanelRef>(null);
+ *
+ * <TerminalInteractivePanelWterm
+ *   ref={termRef}
+ *   containerName="mks-devenv"
+ *   wsUrl="ws://localhost:3100/terminal/session-1"
+ *   onConnect={() => console.log('Connected')}
+ *   onDisconnect={() => console.log('Disconnected')}
+ * />
+ * ```
+ */
+export declare const TerminalInteractivePanelWterm: import("react").ForwardRefExoticComponent<ITerminalInteractivePanelProps & import("react").RefAttributes<ITerminalInteractivePanelRef>>;
+//# sourceMappingURL=TerminalInteractivePanelWterm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalInteractivePanelWterm.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelWterm.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAeH,OAAO,KAAK,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAWrH,OAAO,kBAAkB,CAAC;AAY1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,6BAA6B,yIAqOzC,CAAC"}

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

@@ -0,0 +1,248 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { useTerminalSettings } from "../hooks/useTerminalSettings.js";
+import { TerminalClearButton, TerminalDimensionsBadge, TerminalDisconnectedOverlay, TerminalReconnectButton } from "../controls/TerminalAtoms.js";
+import { TerminalFontControls } from "../controls/TerminalFontControls/index.js";
+import { TerminalSettingsPopover } from "./TerminalSettingsPopover/index.js";
+import { TerminalActionBar } from "../controls/TerminalActionBar/index.js";
+import { TerminalConnectionStatus } from "../controls/TerminalConnectionStatus/index.js";
+import { TerminalStatusBar } from "../controls/TerminalStatusBar/index.js";
+import { TerminalPanelChrome } from "./TerminalPanelChrome.js";
+import { WtermJsonTransport } from "../wterm/WtermJsonTransport.js";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Terminal } from "@wterm/react";
+import "@wterm/react/css";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelWterm.tsx
+/**
+* TerminalInteractivePanelWterm Component.
+*
+* Interactive terminal panel using wterm — Zig + WASM terminal emulator.
+* Mirrors TerminalInteractivePanel's UI (Ghostty chrome, action bar,
+* footer) but uses wterm for rendering with WtermJsonTransport
+* bridging the MKS JSON WebSocket protocol.
+*
+* @module components/devenv/terminal/panel/interactive-wterm
+*/
+/**
+* Terminal display container styles for interactive mode.
+*/
+const terminalContainerStyles = "relative bg-[hsl(var(--terminal-bg,var(--background)))] min-h-[400px] border-x border-border/10 terminal-scroll";
+/** Min/max font size bounds. */
+const MIN_FONT_SIZE = 10;
+const MAX_FONT_SIZE = 24;
+/**
+* TerminalInteractivePanelWterm Component.
+*
+* Interactive terminal panel combining:
+* - TerminalPanelChrome (Ghostty glassmorphism shell)
+* - wterm with Zig + WASM VT100/VT220/xterm parser
+* - WtermJsonTransport bridging MKS JSON WS protocol
+* - Composable action bar and status bar atoms
+*
+* wterm features:
+* - ~12KB WASM binary (embedded base64 fallback)
+* - DOM rendering with dirty-row tracking via requestAnimationFrame
+* - Full 24-bit color (SGR) support
+* - Alternate screen buffer (vim, less, htop work)
+* - Scrollback history ring buffer
+*
+* @example
+* ```tsx
+* const termRef = useRef<ITerminalInteractivePanelRef>(null);
+*
+* <TerminalInteractivePanelWterm
+*   ref={termRef}
+*   containerName="mks-devenv"
+*   wsUrl="ws://localhost:3100/terminal/session-1"
+*   onConnect={() => console.log('Connected')}
+*   onDisconnect={() => console.log('Disconnected')}
+* />
+* ```
+*/
+const TerminalInteractivePanelWterm = forwardRef(({ containerName, wsUrl, sessions, activeSessionId, onSessionChange, onSessionClose, onNewSession, onConnect, onDisconnect, onError, className }, ref) => {
+	/** wterm terminal instance handle */
+	const terminalRef = useRef(null);
+	/** MKS JSON → wterm bridge transport */
+	const transportRef = 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
+	});
+	const [connectionStatus, setConnectionStatus] = useState("disconnected");
+	/**
+	* Connect to MKS terminal server via WtermJsonTransport.
+	*/
+	const connectTransport = useCallback(() => {
+		if (!wsUrl) return;
+		transportRef.current?.destroy();
+		const transport = new WtermJsonTransport(containerName || "bash");
+		transport.connect({
+			url: wsUrl,
+			cols: dimensions.cols,
+			rows: dimensions.rows,
+			callbacks: {
+				onConnect: () => {
+					setConnectionStatus("connected");
+					onConnect?.();
+					terminalRef.current?.write("\r\n\x1B[32m✓ Connected to wterm\x1B[0m\r\n");
+				},
+				onDisconnect: () => {
+					setConnectionStatus("disconnected");
+					onDisconnect?.();
+					terminalRef.current?.write("\r\n\x1B[31m✗ Disconnected from terminal\x1B[0m\r\n");
+				},
+				onError: (message) => {
+					setConnectionStatus("error");
+					onError?.(message);
+					terminalRef.current?.write(`\r\n\x1b[31mError: ${message}\x1b[0m\r\n`);
+				},
+				onData: (data) => {
+					terminalRef.current?.write(data);
+				},
+				onStatus: (shell) => {
+					console.debug("[wterm] Shell:", shell);
+				},
+				onExit: (code) => {
+					terminalRef.current?.write(`\r\n\x1b[33m[process exited with code ${code}]\x1b[0m\r\n`);
+					setConnectionStatus("disconnected");
+				}
+			}
+		});
+		transportRef.current = transport;
+	}, [
+		wsUrl,
+		containerName,
+		dimensions.cols,
+		dimensions.rows,
+		onConnect,
+		onDisconnect,
+		onError
+	]);
+	/**
+	* Handle terminal data input from user → send to PTY via JSON transport.
+	*/
+	const handleData = useCallback((data) => {
+		transportRef.current?.sendInput(data);
+	}, []);
+	/**
+	* Handle terminal resize → update transport and wterm dimensions.
+	*/
+	const handleResize = useCallback((cols, rows) => {
+		setDimensions({
+			cols,
+			rows
+		});
+		transportRef.current?.resize(cols, rows);
+	}, []);
+	/**
+	* Reconnect to terminal.
+	*/
+	const reconnect = useCallback(() => {
+		connectTransport();
+	}, [connectTransport]);
+	/**
+	* Initialize transport on mount and clean up on unmount.
+	*/
+	useEffect(() => {
+		terminalReadyRef.current = true;
+		connectTransport();
+		return () => {
+			terminalReadyRef.current = false;
+			transportRef.current?.destroy();
+			transportRef.current = null;
+		};
+	}, [connectTransport]);
+	/**
+	* Handle font size changes via CSS custom property.
+	*/
+	useEffect(() => {
+		if (containerRef.current) containerRef.current.style.setProperty("--wterm-font-size", `${fontSize}px`);
+	}, [fontSize]);
+	const handleClear = useCallback(() => {
+		terminalRef.current?.write("\x1B[2J\x1B[H");
+	}, []);
+	const handleFontIncrease = useCallback(() => {
+		setFontSize((prev) => Math.min(prev + 1, MAX_FONT_SIZE));
+	}, []);
+	const handleFontDecrease = useCallback(() => {
+		setFontSize((prev) => Math.max(prev - 1, MIN_FONT_SIZE));
+	}, []);
+	useImperativeHandle(ref, () => ({
+		write: (text) => {
+			terminalRef.current?.write(text);
+		},
+		clear: () => {
+			terminalRef.current?.write("\x1B[2J\x1B[H");
+		},
+		focus: () => {
+			terminalRef.current?.focus();
+		},
+		sendInput: (data) => {
+			transportRef.current?.sendInput(data);
+		},
+		isConnected: () => connectionStatus === "connected"
+	}));
+	return /* @__PURE__ */ jsx(TerminalPanelChrome, {
+		containerName,
+		isConnected: connectionStatus === "connected",
+		crtEffect: settings.crtEffect,
+		sessions,
+		activeSessionId,
+		onSessionTabClick: onSessionChange,
+		onSessionClose,
+		onNewSession,
+		actionBar: /* @__PURE__ */ jsxs(TerminalActionBar, { children: [
+			/* @__PURE__ */ jsx(TerminalClearButton, { onClear: handleClear }),
+			/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+			/* @__PURE__ */ jsx(TerminalSettingsPopover, {}),
+			/* @__PURE__ */ jsx(TerminalReconnectButton, {
+				onReconnect: reconnect,
+				status: connectionStatus
+			}),
+			/* @__PURE__ */ jsx(TerminalFontControls, {
+				fontSize,
+				onIncrease: handleFontIncrease,
+				onDecrease: handleFontDecrease,
+				isMin: fontSize <= MIN_FONT_SIZE,
+				isMax: fontSize >= MAX_FONT_SIZE
+			})
+		] }),
+		footer: /* @__PURE__ */ jsxs(TerminalStatusBar, { children: [/* @__PURE__ */ jsx(TerminalStatusBar.Group, { children: /* @__PURE__ */ jsx(TerminalConnectionStatus, { status: connectionStatus }) }), /* @__PURE__ */ jsxs(TerminalStatusBar.Group, { children: [/* @__PURE__ */ jsx(TerminalDimensionsBadge, { dimensions }), /* @__PURE__ */ jsxs("span", {
+			className: "text-xs font-mono text-muted-foreground",
+			children: [fontSize, "px"]
+		})] })] }),
+		className,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: containerRef,
+			className: cn(terminalContainerStyles, "wterm-wrapper"),
+			style: { "--wterm-font-size": `${fontSize}px` },
+			children: [/* @__PURE__ */ jsx(Terminal, {
+				ref: terminalRef,
+				cols: dimensions.cols,
+				rows: dimensions.rows,
+				autoResize: false,
+				cursorBlink: true,
+				onData: handleData,
+				onResize: handleResize,
+				onReady: (wt) => {
+					wt.focus();
+				},
+				className: "w-full h-full"
+			}), /* @__PURE__ */ jsx(TerminalDisconnectedOverlay, {
+				onReconnect: reconnect,
+				visible: connectionStatus === "disconnected"
+			})]
+		})
+	});
+});
+TerminalInteractivePanelWterm.displayName = "TerminalInteractivePanelWterm";
+
+//#endregion
+export { TerminalInteractivePanelWterm };

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

@@ -5,6 +5,9 @@
  * Ghostty-inspired chrome (via TerminalPanelChrome), xterm.js
  * rendering, and action bar controls. Includes settings popover.
  *
+ * Uses composable control atoms for the action bar and status bar
+ * while managing xterm.js lifecycle internally.
+ *
  * @module components/devenv/terminal/panel/interactive-xterm
  */
 import type { ITerminalInteractivePanelProps, ITerminalInteractivePanelRef } from './TerminalInteractivePanel.types';
@@ -16,8 +19,7 @@ import '@xterm/xterm/css/xterm.css';
  * - 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
+ * - Composable action bar and status bar atoms
  *
  * @example
  * ```tsx

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

@@ -1 +1 @@
-{"version":3,"file":"TerminalInteractivePanelXterm.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelXterm.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAmBH,OAAO,KAAK,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAKrH,OAAO,4BAA4B,CAAC;AAoBpC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,6BAA6B,yIAyWzC,CAAC"}
+{"version":3,"file":"TerminalInteractivePanelXterm.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelXterm.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAmBH,OAAO,KAAK,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAWrH,OAAO,4BAA4B,CAAC;AAYpC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,6BAA6B,yIAwPzC,CAAC"}