@mks2508/mks-ui 0.3.2 → 0.5.0

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

@@ -0,0 +1,417 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { ArrowDownToLineIcon } from "../../../icons/lucide-animated/arrow-down-to-line.js";
+import { ArrowUpIcon } from "../../../icons/lucide-animated/arrow-up.js";
+import { DeleteIcon } from "../../../icons/lucide-animated/delete.js";
+import { DownloadIcon } from "../../../icons/lucide-animated/download.js";
+import { ListIcon } from "../../../icons/lucide-animated/list.js";
+import { SearchIcon } from "../../../icons/lucide-animated/search.js";
+import { TerminalIcon } from "../../../icons/lucide-animated/terminal.js";
+import "../../../icons/lucide-animated/index.js";
+import { IconWrapper } from "../../../lib/icon-wrapper.js";
+import { getTerminalTheme } from "../Terminal.theme.js";
+import { LogParserService } from "../parsing/LogParserService.js";
+import { useTerminalSettings } from "../hooks/useTerminalSettings.js";
+import { TerminalPanelChrome } from "./TerminalPanelChrome.js";
+import { TerminalFilterDropdown } from "./TerminalFilterDropdown.js";
+import { TerminalPanelFooter } from "./TerminalPanelFooter.js";
+import { LogLinesViewer } from "./LogLinesViewer.js";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import { Fragment, 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/TerminalLogsPanel.tsx
+/**
+* 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
+*/
+/**
+* Terminal display container styles.
+*/
+const terminalContainerStyles = "relative bg-[#241B2F] min-h-[400px] border-x border-border/10 terminal-scroll";
+/**
+* Toggle button styles.
+*/
+const toggleStyles = {
+	base: "h-9 w-9 p-2 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center flex-shrink-0",
+	inactive: "bg-muted/40 text-muted-foreground",
+	active: "bg-primary/20 text-primary border border-primary/40 shadow-[0_0_10px_hsla(330,85%,43%,0.2)]"
+};
+/**
+* Action button styles.
+*/
+const actionButtonStyles = {
+	base: "h-9 w-9 p-2 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center flex-shrink-0",
+	default: "bg-muted/40 text-muted-foreground hover:text-foreground"
+};
+/**
+* Get the severity value for a log level for filtering comparison.
+* Higher value = more severe.
+*/
+function getSeverity(level) {
+	return level === "all" ? 0 : {
+		trace: 0,
+		debug: 1,
+		info: 2,
+		warn: 3,
+		error: 4,
+		fatal: 5,
+		unknown: 1
+	}[level] ?? 1;
+}
+/**
+* Get the display name for the current session or container.
+*/
+function getDisplayName(containerName, sessions, activeSessionId) {
+	if (!sessions || sessions.length === 0) return containerName;
+	return sessions.find((s) => s.id === activeSessionId)?.name ?? containerName;
+}
+/**
+* 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()}
+* />
+* ```
+*/
+const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "", parsedEntries = [], filterLevel, followCursor, showLineNumbers, levelCounts, className, viewMode = "terminal", containers, sessions, activeSessionId, onSessionChange, onSessionClose, onNewSession, onContainerSelect, onSessionStop, onAddContainer, onFilterChange, onFollowCursorChange, onShowLineNumbersChange, onViewModeChange, onClear, onDownload, onSearch }, ref) => {
+	const terminalRef = useRef(null);
+	const fitAddonRef = useRef(null);
+	const searchAddonRef = useRef(null);
+	const containerRef = useRef(null);
+	const lastWrittenCountRef = useRef(0);
+	const terminalReadyRef = useRef(false);
+	const { settings: terminalSettings } = useTerminalSettings();
+	const parser = useMemo(() => new LogParserService({ timestamp_format: "time" }), []);
+	const displayName = getDisplayName(containerName, sessions, activeSessionId);
+	const filteredEntries = useMemo(() => {
+		if (filterLevel === "all") return parsedEntries;
+		const minSeverity = getSeverity(filterLevel);
+		return parsedEntries.filter((entry) => {
+			return getSeverity(entry.level) >= minSeverity;
+		});
+	}, [parsedEntries, filterLevel]);
+	/**
+	* Calculate line and byte counts from logs.
+	*/
+	const lineCount = filteredEntries.length;
+	const byteCount = filteredEntries.reduce((sum, e) => sum + e.raw.length, 0);
+	/**
+	* Initialize xterm.js instance with addons.
+	* Only runs in terminal mode.
+	*/
+	useEffect(() => {
+		if (viewMode !== "terminal") return;
+		if (!containerRef.current) return;
+		const terminal = new Terminal({
+			cursorBlink: false,
+			cursorInactiveStyle: "none",
+			scrollback: 1e4,
+			fontSize: 13,
+			fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', monospace",
+			theme: getTerminalTheme(),
+			allowProposedApi: true,
+			disableStdin: true
+		});
+		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(() => {
+			const rafId2 = requestAnimationFrame(() => {
+				try {
+					fitAddon.fit();
+				} catch (e) {
+					console.debug("[TerminalLogsPanel] Fit deferred:", e);
+				}
+			});
+			return () => cancelAnimationFrame(rafId2);
+		});
+		terminalRef.current = terminal;
+		fitAddonRef.current = fitAddon;
+		searchAddonRef.current = searchAddon;
+		terminalReadyRef.current = true;
+		return () => {
+			cancelAnimationFrame(rafId);
+			terminalReadyRef.current = false;
+			terminal.dispose();
+		};
+	}, [viewMode]);
+	/**
+	* Write filtered and formatted entries to terminal.
+	* Only writes new entries since last update (incremental).
+	* Only runs in terminal mode.
+	*/
+	useEffect(() => {
+		if (viewMode !== "terminal") return;
+		if (!terminalRef.current || !terminalReadyRef.current) return;
+		const newEntries = filteredEntries.slice(lastWrittenCountRef.current);
+		if (newEntries.length === 0) return;
+		for (const entry of newEntries) {
+			const formatted = parser.formatForTerminal(entry, "raw");
+			terminalRef.current.write(formatted + "\r\n");
+		}
+		lastWrittenCountRef.current = filteredEntries.length;
+		if (followCursor) terminalRef.current.scrollToBottom();
+	}, [
+		filteredEntries,
+		followCursor,
+		parser,
+		viewMode
+	]);
+	/**
+	* Clear terminal when filter changes to full refresh.
+	* Only runs in terminal mode.
+	*/
+	useEffect(() => {
+		if (viewMode !== "terminal") return;
+		if (!terminalRef.current || !terminalReadyRef.current) return;
+		terminalRef.current.clear();
+		lastWrittenCountRef.current = 0;
+	}, [filterLevel, viewMode]);
+	/**
+	* Handle window resize with auto-fit.
+	*/
+	useEffect(() => {
+		const handleResize = () => {
+			requestAnimationFrame(() => {
+				if (fitAddonRef.current && terminalRef.current) try {
+					fitAddonRef.current.fit();
+				} catch (e) {
+					console.debug("[TerminalLogsPanel] Resize fit error:", e);
+				}
+			});
+		};
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, []);
+	/**
+	* Expose imperative methods to parent.
+	*/
+	useImperativeHandle(ref, () => ({
+		search: (term) => {
+			searchAddonRef.current?.findNext(term);
+		},
+		clear: () => {
+			terminalRef.current?.clear();
+			lastWrittenCountRef.current = 0;
+		},
+		write: (text) => {
+			terminalRef.current?.write(text);
+		},
+		scrollToBottom: () => {
+			terminalRef.current?.scrollToBottom();
+		}
+	}));
+	return /* @__PURE__ */ jsx(TerminalPanelChrome, {
+		containerName: displayName,
+		isConnected,
+		viewMode,
+		onViewModeChange,
+		crtEffect: terminalSettings.crtEffect,
+		sessions,
+		activeSessionId,
+		onSessionTabClick: (sessionId) => {
+			onSessionChange?.(sessionId);
+			onContainerSelect?.(sessionId);
+		},
+		onSessionClose: (sessionId) => {
+			onSessionClose?.(sessionId);
+			if (sessionId === activeSessionId) onSessionStop?.();
+		},
+		onNewSession,
+		availableContainers: containers,
+		onAddContainer,
+		actionBar: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 px-3 h-12 bg-muted/10 border-b border-white/10",
+			children: [
+				/* @__PURE__ */ jsx(TerminalFilterDropdown, {
+					filterLevel,
+					levelCounts,
+					onFilterChange
+				}),
+				/* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border/30 flex-shrink-0" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [viewMode === "terminal" && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onFollowCursorChange(!followCursor),
+						className: cn(toggleStyles.base, followCursor ? toggleStyles.active : toggleStyles.inactive),
+						title: followCursor ? "Disable auto-scroll (Ctrl+F)" : "Enable auto-scroll (Ctrl+F)",
+						children: followCursor ? /* @__PURE__ */ jsx(ArrowDownToLineIcon, { className: "w-4 h-4 flex-shrink-0" }) : /* @__PURE__ */ jsx(ArrowUpIcon, { className: "w-4 h-4 flex-shrink-0" })
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onShowLineNumbersChange(!showLineNumbers),
+						className: cn(toggleStyles.base, showLineNumbers ? toggleStyles.active : toggleStyles.inactive),
+						title: showLineNumbers ? "Hide line numbers (Ctrl+L)" : "Show line numbers (Ctrl+L)",
+						children: /* @__PURE__ */ jsx(ListIcon, { className: "w-4 h-4 flex-shrink-0" })
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onSearch,
+							className: cn(actionButtonStyles.base, actionButtonStyles.default),
+							title: "Search in logs (Ctrl+Shift+F)",
+							children: /* @__PURE__ */ jsx(IconWrapper, {
+								icon: SearchIcon,
+								size: 16
+							})
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onClear,
+							className: cn(actionButtonStyles.base, actionButtonStyles.default),
+							title: "Clear logs (Ctrl+K)",
+							children: /* @__PURE__ */ jsx(IconWrapper, {
+								icon: DeleteIcon,
+								size: 16
+							})
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onDownload,
+							className: cn(actionButtonStyles.base, actionButtonStyles.default),
+							title: "Download logs",
+							children: /* @__PURE__ */ jsx(IconWrapper, {
+								icon: DownloadIcon,
+								size: 16
+							})
+						})
+					]
+				})
+			]
+		}) }),
+		footer: /* @__PURE__ */ jsx(TerminalPanelFooter, {
+			lineCount,
+			byteCount,
+			filterLevel
+		}),
+		className,
+		children: activeSessionId ? viewMode === "terminal" ? /* @__PURE__ */ jsxs("div", {
+			className: "relative min-h-[400px]",
+			children: [/* @__PURE__ */ jsx("div", {
+				ref: containerRef,
+				className: terminalContainerStyles
+			}), parsedEntries.length === 0 && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 flex items-center justify-center pointer-events-none",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "text-center",
+					children: [/* @__PURE__ */ jsx(TerminalIcon, { className: "w-12 h-12 mx-auto mb-3 text-muted-foreground/30" }), /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground/50 font-mono",
+						children: "Waiting for logs..."
+					})]
+				})
+			})]
+		}) : /* @__PURE__ */ jsx(LogLinesViewer, {
+			entries: parsedEntries,
+			filterLevel,
+			levelCounts,
+			showLineNumbers,
+			followCursor,
+			onScrollToBottom: () => {
+				if (followCursor && terminalRef.current) terminalRef.current.scrollToBottom();
+			},
+			className: "min-h-[400px]"
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center justify-center min-h-[400px] px-8 py-12 text-center",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "w-16 h-16 mb-4 rounded-full bg-muted/20 flex items-center justify-center",
+					children: /* @__PURE__ */ jsx(TerminalIcon, { className: "w-8 h-8 text-muted-foreground/50" })
+				}),
+				/* @__PURE__ */ jsx("h3", {
+					className: "text-lg font-medium text-foreground mb-2",
+					children: "No container selected"
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					className: "text-sm text-muted-foreground mb-6 max-w-md",
+					children: [
+						"Click the ",
+						/* @__PURE__ */ jsx("span", {
+							className: "text-primary font-mono",
+							children: "+"
+						}),
+						" button above to add a container tab and view its logs in real-time."
+					]
+				}),
+				containers && containers.length > 0 && onAddContainer && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center gap-2",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-xs text-muted-foreground mb-2",
+						children: "Available containers:"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap gap-2 justify-center",
+						children: [containers.slice(0, 3).map((container) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => onAddContainer(container.name),
+							className: cn("px-3 py-1.5 rounded-lg text-sm font-mono transition-colors", "bg-muted/30 text-muted-foreground hover:bg-primary/20 hover:text-primary", "hover:shadow-[0_0_10px_hsla(330,85%,43%,0.2)]"),
+							children: container.name
+						}, container.id)), containers.length > 3 && /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => onNewSession?.(),
+							className: cn("px-3 py-1.5 rounded-lg text-sm font-mono transition-colors", "bg-muted/30 text-muted-foreground hover:bg-primary/20 hover:text-primary"),
+							children: [
+								"+",
+								containers.length - 3,
+								" more"
+							]
+						})]
+					})]
+				})
+			]
+		})
+	});
+});
+TerminalLogsPanel.displayName = "TerminalLogsPanel";
+
+//#endregion
+export { TerminalLogsPanel };

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

@@ -0,0 +1,197 @@
+/**
+ * Types for TerminalLogsPanel components.
+ *
+ * @module components/devenv/terminal/panel/types
+ */
+import type { IParsedLogEntry, TLogLevel } from "../parsing";
+export type { TLogLevel };
+/**
+ * Terminal session information for multi-session support.
+ */
+export interface ITerminalSession {
+    /** Unique session identifier */
+    id: string;
+    /** Display name for the session */
+    name: string;
+    /** Current connection status */
+    status: "connected" | "connecting" | "disconnected" | "error";
+    /** Associated container name (optional) */
+    containerName?: string;
+    /** Backend type for this session */
+    backend: "xterm" | "webcontainer";
+    /** Session mode - interactive or readonly */
+    mode: "interactive" | "readonly";
+    /** Session creation timestamp */
+    createdAt: number;
+}
+export type { ITerminalSessionTabsProps } from "./TerminalSessionTabs";
+export type { ITerminalFilterTabsProps } from "./TerminalFilterTabs";
+export type { ITerminalFilterDropdownProps } from "./TerminalFilterDropdown";
+export type { ITerminalSessionControlProps } from "./TerminalSessionControl";
+/**
+ * Props for TerminalLogsPanel main component.
+ */
+export interface ITerminalLogsPanelProps {
+    /** Container name to display in header */
+    containerName: string;
+    /** Whether container connection is active */
+    isConnected: boolean;
+    /** Raw logs content (kept for compatibility, will be removed) */
+    logs?: string;
+    /** Internal raw logs content (kept for API compatibility, unused in favor of parsedEntries) */
+    _logs?: string;
+    /** Parsed log entries with level detection and metadata */
+    parsedEntries: IParsedLogEntry[];
+    /** Log level filter state */
+    filterLevel: TLogLevelFilter;
+    /** Follow cursor state (auto-scroll) */
+    followCursor: boolean;
+    /** Show line numbers state */
+    showLineNumbers: boolean;
+    /** Level counts for badges */
+    levelCounts: Partial<Record<TLogLevel, number>>;
+    /** Custom class name */
+    className?: string;
+    /** View mode: 'terminal' for xterm.js, 'react' for React viewer */
+    viewMode?: "terminal" | "react";
+    /** Container management: Available containers (for session control) */
+    containers?: Array<{
+        id: string;
+        name: string;
+        state: string;
+    }>;
+    /** Session management: Available sessions (optional for single-session mode) */
+    sessions?: ITerminalSession[];
+    /** Session management: Currently active session ID (optional) */
+    activeSessionId?: string | null;
+    /** Session management: Callback when session changes */
+    onSessionChange?: (sessionId: string) => void;
+    /** Session management: Callback when session is closed */
+    onSessionClose?: (sessionId: string) => void;
+    /** Session management: Callback when new session button is clicked */
+    onNewSession?: () => void;
+    /** Available containers for adding new tabs */
+    availableContainers?: Array<{
+        id: string;
+        name: string;
+        state: string;
+    }>;
+    /** Callback when a container is selected to add as a new tab */
+    onAddContainer?: (containerName: string) => void;
+    /** Callback when container is selected from session control */
+    onContainerSelect?: (containerName: string) => void;
+    /** Callback when session close button is clicked */
+    onSessionStop?: () => void;
+    /** Callback when filter level changes */
+    onFilterChange: (level: TLogLevelFilter) => void;
+    /** Callback when follow cursor toggle changes */
+    onFollowCursorChange: (enabled: boolean) => void;
+    /** Callback when line numbers toggle changes */
+    onShowLineNumbersChange: (enabled: boolean) => void;
+    /** Callback when view mode changes */
+    onViewModeChange?: (mode: "terminal" | "react") => void;
+    /** Callback when clear button is clicked */
+    onClear: () => void;
+    /** Callback when download button is clicked */
+    onDownload: () => void;
+    /** Callback when search button is clicked */
+    onSearch: () => void;
+}
+/**
+ * Props for TerminalPanelHeader component.
+ */
+export interface ITerminalPanelHeaderProps {
+    /** Container name to display */
+    containerName: string;
+    /** Whether container connection is active */
+    isConnected: boolean;
+    /** Current view mode */
+    viewMode?: "terminal" | "react";
+    /** Callback when view mode changes */
+    onViewModeChange?: (mode: "terminal" | "react") => void;
+    /** Callback when close button is clicked */
+    onClose?: () => void;
+    /** Callback when minimize button is clicked */
+    onMinimize?: () => void;
+    /** Callback when maximize button is clicked */
+    onMaximize?: () => void;
+}
+/**
+ * Props for TerminalPanelToolbar component.
+ */
+export interface ITerminalPanelToolbarProps {
+    /** Current log level filter */
+    filterLevel: TLogLevelFilter;
+    /** Follow cursor state */
+    followCursor: boolean;
+    /** Show line numbers state */
+    showLineNumbers: boolean;
+    /** Log level counts for badges */
+    levelCounts: Partial<Record<TLogLevel, number>>;
+    /** Callback when filter level changes */
+    onFilterChange: (level: TLogLevelFilter) => void;
+    /** Callback when follow cursor toggle changes */
+    onFollowCursorChange: (enabled: boolean) => void;
+    /** Callback when line numbers toggle changes */
+    onShowLineNumbersChange: (enabled: boolean) => void;
+    /** Callback when clear button is clicked */
+    onClear: () => void;
+    /** Callback when download button is clicked */
+    onDownload: () => void;
+    /** Callback when search button is clicked */
+    onSearch: () => void;
+}
+/**
+ * Props for TerminalPanelFooter component.
+ */
+export interface ITerminalPanelFooterProps {
+    /** Number of log lines */
+    lineCount: number;
+    /** Number of bytes */
+    byteCount: number;
+    /** Current filter level display */
+    filterLevel: TLogLevelFilter;
+    /** Current filter count (filtered vs total) */
+    filteredCount?: number;
+    totalCount?: number;
+}
+/**
+ * Log level filter options.
+ * - 'all': Show all log levels
+ * - Specific level: Show only that level and above (by severity)
+ */
+export type TLogLevelFilter = "all" | TLogLevel;
+/**
+ * Level filter button configuration.
+ */
+export interface ILevelFilterButton {
+    /** Filter value */
+    value: TLogLevelFilter;
+    /** Display label */
+    label: string;
+    /** Icon component (optional) */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Badge count */
+    count?: number;
+}
+/**
+ * Terminal panel action button types.
+ */
+export type TTerminalAction = "clear" | "download" | "search" | "copy";
+/**
+ * Imperative handle for TerminalLogsPanel.
+ * 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;
+}
+//# sourceMappingURL=TerminalLogsPanel.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalLogsPanel.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalLogsPanel.types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,55 @@
+/**
+ * TerminalPanelChrome Component.
+ *
+ * Reusable Ghostty-styled wrapper providing shared visual chrome
+ * for both log viewer and interactive terminal panels.
+ *
+ * Includes:
+ * - Multi-layer glassmorphism shell
+ * - Noise texture SVG overlay for depth
+ * - Animated top accent line (primary gradient with glow)
+ * - Session tabs (TerminalSessionTabs)
+ * - macOS-style header (TerminalPanelHeader)
+ * - Slots for action bar, children (terminal content), and footer
+ * - Neon magenta scrollbar styles
+ * - StyleSlots + CVA variants for customization
+ *
+ * @module components/devenv/terminal/panel/chrome
+ */
+import type { ITerminalPanelChromeProps } from './TerminalPanelChrome.types';
+/**
+ * Noise texture SVG for glassmorphism depth.
+ * Fractal noise pattern applied as background image.
+ */
+export declare const NOISE_TEXTURE_SVG = "\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\"";
+/**
+ * Terminal scroll customization with neon magenta glow effect.
+ * Applied to xterm.js viewport scrollbar.
+ */
+export declare const terminalScrollStyles = "\n  @keyframes shimmer-line {\n    0%, 100% { background-position: 200% 0; }\n    50% { background-position: -200% 0; }\n  }\n  .terminal-scroll .xterm-viewport {\n    overflow-y: auto;\n  }\n  .terminal-scroll .xterm-viewport::-webkit-scrollbar {\n    width: 8px;\n  }\n  .terminal-scroll .xterm-viewport::-webkit-scrollbar-track {\n    background: rgba(36, 27, 47, 0.5);\n  }\n  .terminal-scroll .xterm-viewport::-webkit-scrollbar-thumb {\n    background: linear-gradient(\n      180deg,\n      rgba(212, 12, 103, 0.3) 0%,\n      rgba(212, 12, 103, 0.5) 50%,\n      rgba(212, 12, 103, 0.3) 100%\n    );\n    border-radius: 4px;\n    box-shadow: 0 0 10px rgba(212, 12, 103, 0.3);\n  }\n  .terminal-scroll .xterm-viewport::-webkit-scrollbar-thumb:hover {\n    background: linear-gradient(\n      180deg,\n      rgba(212, 12, 103, 0.5) 0%,\n      rgba(212, 12, 103, 0.7) 50%,\n      rgba(212, 12, 103, 0.5) 100%\n    );\n    box-shadow: 0 0 15px rgba(212, 12, 103, 0.5);\n  }\n\n  /* === CRT Shader Effects (opt-in via settings) === */\n\n  /* Scanline overlay - replicates bettercrt.glsl scanline effect */\n  .terminal-crt {\n    position: relative;\n  }\n  .terminal-crt::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    z-index: 20;\n    background: repeating-linear-gradient(\n      0deg,\n      rgba(0, 0, 0, 0.12) 0px,\n      rgba(0, 0, 0, 0.12) 1px,\n      transparent 1px,\n      transparent 2px\n    );\n    mix-blend-mode: multiply;\n  }\n\n  /* Vignette - CRT monitor light falloff */\n  .terminal-crt::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    z-index: 19;\n    background: radial-gradient(\n      ellipse at center,\n      transparent 60%,\n      rgba(0, 0, 0, 0.15) 100%\n    );\n  }\n\n  /* Bloom/glow - replicates bloom.glsl text glow on bright text */\n  .terminal-bloom * {\n    text-shadow: 0 0 4px currentColor;\n  }\n\n  /* Bloom on xterm canvas - subtle drop-shadow filter on the canvas element */\n  .terminal-bloom canvas {\n    filter: drop-shadow(0 0 1px rgba(255, 200, 100, 0.15));\n  }\n\n  /* Reduced motion - disable all CRT effects */\n  @media (prefers-reduced-motion: reduce) {\n    .terminal-crt::after,\n    .terminal-crt::before { display: none; }\n    .terminal-bloom * { text-shadow: none !important; }\n    .terminal-bloom canvas { filter: none !important; }\n  }\n";
+/**
+ * TerminalPanelChrome Component.
+ *
+ * Reusable Ghostty-styled shell that wraps terminal content with
+ * consistent visual chrome. Used by both TerminalLogsPanel (readonly)
+ * and TerminalInteractivePanel (interactive).
+ *
+ * Supports StyleSlots for class overrides and CVA variants
+ * for visual presets (default, minimal, error).
+ *
+ * @example
+ * ```tsx
+ * <TerminalPanelChrome
+ *   containerName="devenv-agent-backend"
+ *   isConnected={true}
+ *   variant="error"
+ *   slots={{ root: 'max-h-[400px]', content: 'p-2' }}
+ *   actionBar={<TerminalFilterTabs ... />}
+ *   footer={<TerminalPanelFooter ... />}
+ * >
+ *   <div ref={containerRef} className="terminal-container" />
+ * </TerminalPanelChrome>
+ * ```
+ */
+export declare function TerminalPanelChrome({ containerName, isConnected, variant, size, viewMode, onViewModeChange, sessions, activeSessionId, onSessionTabClick, onSessionClose, onNewSession, availableContainers, onAddContainer, children, actionBar, footer, onClose, onMinimize, onMaximize, crtEffect, slots, className, }: ITerminalPanelChromeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TerminalPanelChrome.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalPanelChrome.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelChrome.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAU7E;;;GAGG;AACH,eAAO,MAAM,iBAAiB,yTAAuT,CAAC;AAEtV;;;GAGG;AACH,eAAO,MAAM,oBAAoB,+2EAuFhC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,WAAW,EACX,OAAmB,EACnB,IAAgB,EAChB,QAAqB,EACrB,gBAAgB,EAChB,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CAwF3B"}