@mks2508/mks-ui 0.3.2 → 0.5.0

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

@@ -0,0 +1,43 @@
+/**
+ * TerminalFilterTabs Component.
+ *
+ * Tab-style filter buttons with badge counts and glow effects.
+ * Replaces pill-style filter buttons with Ghostty-inspired tab design.
+ *
+ * @module components/devenv/terminal/panel/filter-tabs
+ */
+import type { TLogLevelFilter, TLogLevel } from './TerminalLogsPanel.types';
+/**
+ * Props for TerminalFilterTabs component.
+ */
+export interface ITerminalFilterTabsProps {
+    /** Current log level filter */
+    filterLevel: TLogLevelFilter;
+    /** Log level counts for badges */
+    levelCounts: Partial<Record<TLogLevel, number>>;
+    /** Callback when filter level changes */
+    onFilterChange: (level: TLogLevelFilter) => void;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * TerminalFilterTabs Component.
+ *
+ * Displays tab-style filter buttons with:
+ * - Tab-style layout (not pill buttons)
+ * - Badge count integration with glow on active
+ * - Keyboard shortcuts in tooltips
+ * - Compact horizontal arrangement
+ * - Smooth animations on state changes
+ *
+ * @example
+ * ```tsx
+ * <TerminalFilterTabs
+ *   filterLevel="all"
+ *   levelCounts={{ info: 42, warn: 3, error: 1 }}
+ *   onFilterChange={(level) => setFilterLevel(level)}
+ * />
+ * ```
+ */
+export declare function TerminalFilterTabs({ filterLevel, levelCounts, onFilterChange, className, }: ITerminalFilterTabsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TerminalFilterTabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalFilterTabs.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalFilterTabs.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE5E;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,+BAA+B;IAC/B,WAAW,EAAE,eAAe,CAAC;IAE7B,kCAAkC;IAClC,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAEhD,yCAAyC;IACzC,cAAc,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAEjD,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,WAAW,EACX,WAAW,EACX,cAAc,EACd,SAAS,GACV,EAAE,wBAAwB,2CA6D1B"}

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

@@ -0,0 +1,38 @@
+/**
+ * TerminalInteractivePanel Router.
+ *
+ * Thin router that delegates to the xterm or restty panel based on
+ * the `renderer` prop or global terminal settings. Both panels are
+ * lazy-loaded for code-splitting — restty's WASM bundle is only
+ * fetched when the user selects the GPU renderer.
+ *
+ * @module components/devenv/terminal/panel/interactive
+ */
+import type { ITerminalInteractivePanelProps, ITerminalInteractivePanelRef } from './TerminalInteractivePanel.types';
+/**
+ * TerminalInteractivePanel Component.
+ *
+ * Routes to the appropriate renderer-specific panel. The `renderer`
+ * prop overrides the global setting from `useTerminalSettings`,
+ * allowing per-panel control when needed.
+ *
+ * Consumer code is unchanged — same component name, same props, same ref.
+ *
+ * @example
+ * ```tsx
+ * // Uses global setting (default: xterm)
+ * <TerminalInteractivePanel
+ *   containerName="mks-devenv"
+ *   wsUrl="ws://localhost:3100/terminal/session-1"
+ * />
+ *
+ * // Force restty renderer for this instance
+ * <TerminalInteractivePanel
+ *   renderer="restty"
+ *   containerName="mks-devenv"
+ *   wsUrl="ws://localhost:3100/terminal/session-1"
+ * />
+ * ```
+ */
+export declare const TerminalInteractivePanel: import("react").ForwardRefExoticComponent<ITerminalInteractivePanelProps & import("react").RefAttributes<ITerminalInteractivePanelRef>>;
+//# sourceMappingURL=TerminalInteractivePanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalInteractivePanel.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAKH,OAAO,KAAK,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAUrH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,wBAAwB,yIAgBnC,CAAC"}

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

@@ -0,0 +1,62 @@
+'use client';
+
+import { useTerminalSettings } from "../hooks/useTerminalSettings.js";
+import { Suspense, forwardRef, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalInteractivePanel.tsx
+/**
+* TerminalInteractivePanel Router.
+*
+* Thin router that delegates to the xterm or restty panel based on
+* the `renderer` prop or global terminal settings. Both panels are
+* lazy-loaded for code-splitting — restty's WASM bundle is only
+* fetched when the user selects the GPU renderer.
+*
+* @module components/devenv/terminal/panel/interactive
+*/
+const TerminalInteractivePanelXterm = lazy(() => import("./TerminalInteractivePanelXterm.js").then((m) => ({ default: m.TerminalInteractivePanelXterm })));
+const TerminalInteractivePanelRestty = lazy(() => import("./TerminalInteractivePanelRestty.js").then((m) => ({ default: m.TerminalInteractivePanelRestty })));
+/**
+* TerminalInteractivePanel Component.
+*
+* Routes to the appropriate renderer-specific panel. The `renderer`
+* prop overrides the global setting from `useTerminalSettings`,
+* allowing per-panel control when needed.
+*
+* Consumer code is unchanged — same component name, same props, same ref.
+*
+* @example
+* ```tsx
+* // Uses global setting (default: xterm)
+* <TerminalInteractivePanel
+*   containerName="mks-devenv"
+*   wsUrl="ws://localhost:3100/terminal/session-1"
+* />
+*
+* // Force restty renderer for this instance
+* <TerminalInteractivePanel
+*   renderer="restty"
+*   containerName="mks-devenv"
+*   wsUrl="ws://localhost:3100/terminal/session-1"
+* />
+* ```
+*/
+const TerminalInteractivePanel = forwardRef((props, ref) => {
+	const { settings } = useTerminalSettings();
+	const renderer = props.renderer ?? settings.renderer;
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx("div", { className: "min-h-[400px] bg-[#241B2F]" }),
+		children: renderer === "restty" ? /* @__PURE__ */ jsx(TerminalInteractivePanelRestty, {
+			ref,
+			...props
+		}) : /* @__PURE__ */ jsx(TerminalInteractivePanelXterm, {
+			ref,
+			...props
+		})
+	});
+});
+TerminalInteractivePanel.displayName = "TerminalInteractivePanel";
+
+//#endregion
+export { TerminalInteractivePanel };

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

@@ -0,0 +1,67 @@
+/**
+ * Types for TerminalInteractivePanel component.
+ *
+ * @module components/devenv/terminal/panel/interactive/types
+ */
+import type { ITerminalSession } from './TerminalLogsPanel.types';
+/**
+ * Props for TerminalInteractivePanel component.
+ *
+ * Configures the interactive terminal with WebSocket connection,
+ * session management, and lifecycle callbacks.
+ */
+export interface ITerminalInteractivePanelProps {
+    /** Container/session name displayed in header */
+    containerName: string;
+    /** WebSocket URL for terminal connection (ws:// or wss://) */
+    wsUrl: string;
+    /**
+     * Terminal renderer to use.
+     * - `xterm`: xterm.js DOM/canvas renderer (default)
+     * - `restty`: GPU-accelerated WebGPU/WebGL2 renderer
+     */
+    renderer?: 'xterm' | 'restty';
+    /**
+     * PTY backend type.
+     * - `nodepty`: node-pty via WebSocket (default)
+     * - `webcontainer`: @webcontainer/api in-browser
+     */
+    ptyBackend?: 'nodepty' | 'webcontainer';
+    /** Session tabs (optional for single-session mode) */
+    sessions?: ITerminalSession[];
+    /** Currently active session ID */
+    activeSessionId?: string | null;
+    /** Callback when session tab is clicked */
+    onSessionChange?: (sessionId: string) => void;
+    /** Callback when session tab close is clicked */
+    onSessionClose?: (sessionId: string) => void;
+    /** Callback when new session button is clicked */
+    onNewSession?: () => void;
+    /** Lifecycle: connection established */
+    onConnect?: () => void;
+    /** Lifecycle: connection lost */
+    onDisconnect?: () => void;
+    /** Lifecycle: error occurred */
+    onError?: (error: string) => void;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Imperative handle for TerminalInteractivePanel.
+ *
+ * Exposes terminal control methods to parent components
+ * via React.forwardRef + useImperativeHandle.
+ */
+export interface ITerminalInteractivePanelRef {
+    /** Write text directly to terminal display */
+    write: (text: string) => void;
+    /** Clear terminal display */
+    clear: () => void;
+    /** Focus terminal for input */
+    focus: () => void;
+    /** Send raw input to backend via WebSocket */
+    sendInput: (data: string) => void;
+    /** Check if WebSocket is connected */
+    isConnected: () => boolean;
+}
+//# sourceMappingURL=TerminalInteractivePanel.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalInteractivePanel.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanel.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAElE;;;;;GAKG;AACH,MAAM,WAAW,8BAA8B;IAC7C,iDAAiD;IACjD,aAAa,EAAE,MAAM,CAAC;IAEtB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE9B;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IAExC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE9B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEhC,2CAA2C;IAC3C,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7C,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,gCAAgC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,MAAM,WAAW,4BAA4B;IAC3C,8CAA8C;IAC9C,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9B,6BAA6B;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;IAElB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAElB,8CAA8C;IAC9C,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,sCAAsC;IACtC,WAAW,EAAE,MAAM,OAAO,CAAC;CAC5B"}

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

@@ -0,0 +1,32 @@
+/**
+ * TerminalInteractivePanelRestty Component.
+ *
+ * Interactive terminal panel using restty's GPU-accelerated renderer.
+ * Mirrors TerminalInteractivePanel's UI (Ghostty chrome, action bar,
+ * footer) but uses restty for rendering and its own PTY transport
+ * instead of useTerminalWebSocket.
+ *
+ * @module components/devenv/terminal/panel/interactive-restty
+ */
+import type { ITerminalInteractivePanelProps, ITerminalInteractivePanelRef } from './TerminalInteractivePanel.types';
+/**
+ * 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
+ *
+ * @example
+ * ```tsx
+ * <TerminalInteractivePanelRestty
+ *   containerName="mks-devenv"
+ *   wsUrl="ws://localhost:3100/terminal/session-1"
+ *   onConnect={() => console.log('Connected')}
+ * />
+ * ```
+ */
+export declare const TerminalInteractivePanelRestty: import("react").ForwardRefExoticComponent<Omit<ITerminalInteractivePanelProps, "renderer" | "ptyBackend"> & import("react").RefAttributes<ITerminalInteractivePanelRef>>;
+//# sourceMappingURL=TerminalInteractivePanelRestty.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalInteractivePanelRestty.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelRestty.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAYH,OAAO,KAAK,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AA0BrH;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,8BAA8B,0KA0T1C,CAAC"}

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

@@ -0,0 +1,326 @@
+'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 { 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 { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelRestty.tsx
+/**
+* TerminalInteractivePanelRestty Component.
+*
+* Interactive terminal panel using restty's GPU-accelerated renderer.
+* Mirrors TerminalInteractivePanel's UI (Ghostty chrome, action bar,
+* footer) but uses restty for rendering and its own PTY transport
+* instead of useTerminalWebSocket.
+*
+* @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
+*
+* @example
+* ```tsx
+* <TerminalInteractivePanelRestty
+*   containerName="mks-devenv"
+*   wsUrl="ws://localhost:3100/terminal/session-1"
+*   onConnect={() => console.log('Connected')}
+* />
+* ```
+*/
+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 [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
+	}));
+	/**
+	* 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,
+		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"]
+				})]
+			})]
+		}),
+		className,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative min-h-[400px]",
+			children: [/* @__PURE__ */ jsx(TerminalRestty, {
+				ref: resttyRef,
+				wsUrl,
+				fontSize,
+				resttyThemeName: 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"
+						})
+					]
+				})
+			})]
+		}), /* @__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,
+			ptyUrl: wsUrl,
+			themeName: settings.resttyThemeName,
+			crtEffect: settings.crtEffect,
+			uptimeSeconds: uptimeStart ? Math.floor((Date.now() - uptimeStart) / 1e3) : 0
+		})]
+	});
+});
+TerminalInteractivePanelRestty.displayName = "TerminalInteractivePanelRestty";
+
+//#endregion
+export { TerminalInteractivePanelRestty };

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

@@ -0,0 +1,36 @@
+/**
+ * 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
+ */
+import type { ITerminalInteractivePanelProps, ITerminalInteractivePanelRef } from './TerminalInteractivePanel.types';
+import '@xterm/xterm/css/xterm.css';
+/**
+ * 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')}
+ * />
+ * ```
+ */
+export declare const TerminalInteractivePanelXterm: import("react").ForwardRefExoticComponent<ITerminalInteractivePanelProps & import("react").RefAttributes<ITerminalInteractivePanelRef>>;
+//# sourceMappingURL=TerminalInteractivePanelXterm.d.ts.map

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

@@ -0,0 +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"}