@mks2508/mks-ui 0.3.2 → 0.5.0

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

@@ -0,0 +1,214 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { ACCENT_GRADIENTS, terminalChromeStyles, terminalChromeVariants } from "./TerminalPanelChrome.styles.js";
+import { TerminalPanelHeader } from "./TerminalPanelHeader.js";
+import { TerminalSessionTabs } from "./TerminalSessionTabs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalPanelChrome.tsx
+/**
+* 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
+*/
+/**
+* Noise texture SVG for glassmorphism depth.
+* Fractal noise pattern applied as background image.
+*/
+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.
+*/
+const terminalScrollStyles = `
+  @keyframes shimmer-line {
+    0%, 100% { background-position: 200% 0; }
+    50% { background-position: -200% 0; }
+  }
+  .terminal-scroll .xterm-viewport {
+    overflow-y: auto;
+  }
+  .terminal-scroll .xterm-viewport::-webkit-scrollbar {
+    width: 8px;
+  }
+  .terminal-scroll .xterm-viewport::-webkit-scrollbar-track {
+    background: rgba(36, 27, 47, 0.5);
+  }
+  .terminal-scroll .xterm-viewport::-webkit-scrollbar-thumb {
+    background: linear-gradient(
+      180deg,
+      rgba(212, 12, 103, 0.3) 0%,
+      rgba(212, 12, 103, 0.5) 50%,
+      rgba(212, 12, 103, 0.3) 100%
+    );
+    border-radius: 4px;
+    box-shadow: 0 0 10px rgba(212, 12, 103, 0.3);
+  }
+  .terminal-scroll .xterm-viewport::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(
+      180deg,
+      rgba(212, 12, 103, 0.5) 0%,
+      rgba(212, 12, 103, 0.7) 50%,
+      rgba(212, 12, 103, 0.5) 100%
+    );
+    box-shadow: 0 0 15px rgba(212, 12, 103, 0.5);
+  }
+
+  /* === CRT Shader Effects (opt-in via settings) === */
+
+  /* Scanline overlay - replicates bettercrt.glsl scanline effect */
+  .terminal-crt {
+    position: relative;
+  }
+  .terminal-crt::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 20;
+    background: repeating-linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0.12) 0px,
+      rgba(0, 0, 0, 0.12) 1px,
+      transparent 1px,
+      transparent 2px
+    );
+    mix-blend-mode: multiply;
+  }
+
+  /* Vignette - CRT monitor light falloff */
+  .terminal-crt::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 19;
+    background: radial-gradient(
+      ellipse at center,
+      transparent 60%,
+      rgba(0, 0, 0, 0.15) 100%
+    );
+  }
+
+  /* Bloom/glow - replicates bloom.glsl text glow on bright text */
+  .terminal-bloom * {
+    text-shadow: 0 0 4px currentColor;
+  }
+
+  /* Bloom on xterm canvas - subtle drop-shadow filter on the canvas element */
+  .terminal-bloom canvas {
+    filter: drop-shadow(0 0 1px rgba(255, 200, 100, 0.15));
+  }
+
+  /* Reduced motion - disable all CRT effects */
+  @media (prefers-reduced-motion: reduce) {
+    .terminal-crt::after,
+    .terminal-crt::before { display: none; }
+    .terminal-bloom * { text-shadow: none !important; }
+    .terminal-bloom canvas { filter: none !important; }
+  }
+`;
+/**
+* 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>
+* ```
+*/
+function TerminalPanelChrome({ containerName, isConnected, variant = "default", size = "default", viewMode = "terminal", onViewModeChange, sessions, activeSessionId, onSessionTabClick, onSessionClose, onNewSession, availableContainers, onAddContainer, children, actionBar, footer, onClose, onMinimize, onMaximize, crtEffect, slots, className }) {
+	/** Whether to render session tabs (multi-session mode) */
+	const showSessionTabs = sessions && sessions.length > 0 || availableContainers && availableContainers.length > 0;
+	/** Whether to show the accent line (hidden in minimal variant) */
+	const showAccentLine = variant !== "minimal";
+	/** Accent gradient based on variant */
+	const accentGradient = ACCENT_GRADIENTS[variant ?? "default"] ?? ACCENT_GRADIENTS.default;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(terminalChromeVariants({
+			variant,
+			size
+		}), slots?.root, className),
+		children: [
+			showAccentLine && /* @__PURE__ */ jsxs("div", {
+				className: cn(terminalChromeStyles.accentLine, slots?.accentLine),
+				children: [/* @__PURE__ */ jsx("div", { className: cn(accentGradient, slots?.accentGradient) }), /* @__PURE__ */ jsx("div", {
+					className: cn(terminalChromeStyles.accentShimmer, slots?.accentShimmer),
+					style: {
+						backgroundSize: "200% 100%",
+						animation: "shimmer-line 4s ease-in-out infinite"
+					}
+				})]
+			}),
+			showSessionTabs && /* @__PURE__ */ jsx("div", {
+				className: cn(slots?.sessionTabs),
+				children: /* @__PURE__ */ jsx(TerminalSessionTabs, {
+					sessions: sessions || [],
+					activeSessionId: activeSessionId || null,
+					onTabClick: (sessionId) => onSessionTabClick?.(sessionId),
+					onClose: (sessionId) => onSessionClose?.(sessionId),
+					onNewSession,
+					availableContainers,
+					onAddContainer
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn(slots?.header),
+				children: /* @__PURE__ */ jsx(TerminalPanelHeader, {
+					containerName,
+					isConnected,
+					viewMode,
+					onViewModeChange,
+					onClose,
+					onMinimize,
+					onMaximize
+				})
+			}),
+			actionBar && /* @__PURE__ */ jsx("div", {
+				className: cn(slots?.actionBar),
+				children: actionBar
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn(crtEffect && "terminal-crt terminal-bloom", slots?.content),
+				children
+			}),
+			footer && /* @__PURE__ */ jsx("div", {
+				className: cn(slots?.footer),
+				children: footer
+			}),
+			/* @__PURE__ */ jsx("style", { children: terminalScrollStyles })
+		]
+	});
+}
+
+//#endregion
+export { NOISE_TEXTURE_SVG, TerminalPanelChrome, terminalScrollStyles };

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

@@ -0,0 +1,35 @@
+/**
+ * TerminalPanelChrome style definitions.
+ *
+ * StyleSlots + CVA variants for the Ghostty-inspired glassmorphism shell.
+ * Follows the mks-ui composable pattern: base styles via StyleSlots,
+ * visual variants via CVA, consumer overrides via SlotOverrides.
+ *
+ * @module components/devenv/terminal/panel/chrome/styles
+ */
+import { type VariantProps } from 'class-variance-authority';
+import type { StyleSlots } from '../../../../core/types';
+/** Slot names for TerminalPanelChrome sub-regions */
+export type TerminalChromeSlot = 'root' | 'accentLine' | 'accentGradient' | 'accentShimmer' | 'header' | 'sessionTabs' | 'actionBar' | 'content' | 'footer';
+/**
+ * Default style slots for each chrome sub-region.
+ */
+export declare const terminalChromeStyles: StyleSlots<TerminalChromeSlot>;
+/**
+ * Accent line gradient classes per variant.
+ */
+export declare const ACCENT_GRADIENTS: {
+    readonly default: "bg-gradient-to-r from-transparent via-primary/70 to-transparent shadow-[0_0_12px_hsla(330,85%,43%,0.5)]";
+    readonly error: "bg-gradient-to-r from-transparent via-destructive/70 to-transparent shadow-[0_0_12px_hsla(0,72%,51%,0.5)]";
+    readonly minimal: "";
+};
+/**
+ * CVA variants for the chrome root element.
+ */
+export declare const terminalChromeVariants: (props?: ({
+    variant?: "default" | "error" | "minimal" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Extracted variant props type for consumer use */
+export type TerminalChromeVariantProps = VariantProps<typeof terminalChromeVariants>;
+//# sourceMappingURL=TerminalPanelChrome.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalPanelChrome.styles.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelChrome.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,qDAAqD;AACrD,MAAM,MAAM,kBAAkB,GAC1B,MAAM,GACN,YAAY,GACZ,gBAAgB,GAChB,eAAe,GACf,QAAQ,GACR,aAAa,GACb,WAAW,GACX,SAAS,GACT,QAAQ,CAAC;AAEb;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,UAAU,CAAC,kBAAkB,CAU/D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,sBAAsB;;;8EAmBjC,CAAC;AAEH,oDAAoD;AACpD,MAAM,MAAM,0BAA0B,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/dist/react-ui/blocks/Terminal/panel/TerminalPanelChrome.styles.js

@@ -0,0 +1,57 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalPanelChrome.styles.ts
+/**
+* TerminalPanelChrome style definitions.
+*
+* StyleSlots + CVA variants for the Ghostty-inspired glassmorphism shell.
+* Follows the mks-ui composable pattern: base styles via StyleSlots,
+* visual variants via CVA, consumer overrides via SlotOverrides.
+*
+* @module components/devenv/terminal/panel/chrome/styles
+*/
+/**
+* Default style slots for each chrome sub-region.
+*/
+const terminalChromeStyles = {
+	root: "glass-heavy glass-noise rounded-2xl overflow-hidden relative",
+	accentLine: "absolute top-0 left-0 right-0 h-px z-10 pointer-events-none overflow-hidden",
+	accentGradient: "h-full w-full",
+	accentShimmer: "absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent",
+	header: "",
+	sessionTabs: "",
+	actionBar: "",
+	content: "",
+	footer: ""
+};
+/**
+* Accent line gradient classes per variant.
+*/
+const ACCENT_GRADIENTS = {
+	default: "bg-gradient-to-r from-transparent via-primary/70 to-transparent shadow-[0_0_12px_hsla(330,85%,43%,0.5)]",
+	error: "bg-gradient-to-r from-transparent via-destructive/70 to-transparent shadow-[0_0_12px_hsla(0,72%,51%,0.5)]",
+	minimal: ""
+};
+/**
+* CVA variants for the chrome root element.
+*/
+const terminalChromeVariants = cva(terminalChromeStyles.root, {
+	variants: {
+		variant: {
+			default: "",
+			minimal: "rounded-lg",
+			error: ""
+		},
+		size: {
+			default: "",
+			compact: "rounded-xl"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+
+//#endregion
+export { ACCENT_GRADIENTS, terminalChromeStyles, terminalChromeVariants };

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

@@ -0,0 +1,62 @@
+/**
+ * Types for TerminalPanelChrome component.
+ *
+ * @module components/devenv/terminal/panel/chrome/types
+ */
+import type { SlotOverrides } from '../../../../core/types';
+import type { ITerminalSession } from './TerminalLogsPanel.types';
+import type { TerminalChromeSlot, TerminalChromeVariantProps } from './TerminalPanelChrome.styles';
+/**
+ * Props for TerminalPanelChrome - reusable Ghostty-styled wrapper.
+ *
+ * Provides the shared visual shell for both log viewer
+ * and interactive terminal panels. Supports StyleSlots for
+ * class overrides and CVA variants for visual presets.
+ */
+export interface ITerminalPanelChromeProps extends TerminalChromeVariantProps {
+    /** Container/session name displayed in header */
+    containerName: string;
+    /** Connection status indicator */
+    isConnected: boolean;
+    /** Current view mode (terminal xterm.js or react viewer) */
+    viewMode?: 'terminal' | 'react';
+    /** Callback when view mode changes */
+    onViewModeChange?: (mode: 'terminal' | 'react') => void;
+    /** Available sessions for tab bar */
+    sessions?: ITerminalSession[];
+    /** Currently active session ID */
+    activeSessionId?: string | null;
+    /** Callback when a session tab is clicked */
+    onSessionTabClick?: (sessionId: string) => void;
+    /** Callback when a session tab close button is clicked */
+    onSessionClose?: (sessionId: string) => void;
+    /** Callback when new session button is clicked */
+    onNewSession?: () => void;
+    /** Available containers for the add-container dropdown */
+    availableContainers?: Array<{
+        id: string;
+        name: string;
+        state: string;
+    }>;
+    /** Callback when a container is selected from the dropdown */
+    onAddContainer?: (containerName: string) => void;
+    /** Terminal content (children) */
+    children: React.ReactNode;
+    /** Action bar slot rendered between header and children */
+    actionBar?: React.ReactNode;
+    /** Footer slot rendered after children */
+    footer?: React.ReactNode;
+    /** Traffic light close handler */
+    onClose?: () => void;
+    /** Traffic light minimize handler */
+    onMinimize?: () => void;
+    /** Traffic light maximize handler */
+    onMaximize?: () => void;
+    /** Enable CRT shader effects (scanlines, bloom, vignette) */
+    crtEffect?: boolean;
+    /** Slot class overrides for each chrome sub-region */
+    slots?: SlotOverrides<TerminalChromeSlot>;
+    /** Custom class name appended to outer wrapper */
+    className?: string;
+}
+//# sourceMappingURL=TerminalPanelChrome.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalPanelChrome.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelChrome.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAEnG;;;;;;GAMG;AACH,MAAM,WAAW,yBAA0B,SAAQ,0BAA0B;IAC3E,iDAAiD;IACjD,aAAa,EAAE,MAAM,CAAC;IAEtB,kCAAkC;IAClC,WAAW,EAAE,OAAO,CAAC;IAErB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAEhC,sCAAsC;IACtC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,KAAK,IAAI,CAAC;IAExD,qCAAqC;IACrC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE9B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEhC,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhD,0DAA0D;IAC1D,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7C,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,0DAA0D;IAC1D,mBAAmB,CAAC,EAAE,KAAK,CAAC;QAC1B,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;IAEH,8DAA8D;IAC9D,cAAc,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjD,kCAAkC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,2DAA2D;IAC3D,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,0CAA0C;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAExB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAExB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAE1C,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,30 @@
+/**
+ * TerminalPanelFooter Component.
+ *
+ * Footer displaying line count, byte count, and current filter.
+ *
+ * @module components/devenv/terminal/panel/footer
+ */
+import type { ITerminalPanelFooterProps } from './TerminalLogsPanel.types';
+/**
+ * TerminalPanelFooter Component.
+ *
+ * Displays footer with:
+ * - Line count
+ * - Byte count
+ * - Current filter level
+ * - Filtered count (if applicable)
+ *
+ * @example
+ * ```tsx
+ * <TerminalPanelFooter
+ *   lineCount={1234}
+ *   byteCount={45678}
+ *   filterLevel="all"
+ *   filteredCount={1200}
+ *   totalCount={1234}
+ * />
+ * ```
+ */
+export declare function TerminalPanelFooter({ lineCount, byteCount, filterLevel, filteredCount, totalCount, }: ITerminalPanelFooterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TerminalPanelFooter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalPanelFooter.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelFooter.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAQ3E;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,SAAS,EACT,WAAW,EACX,aAAa,EACb,UAAU,GACX,EAAE,yBAAyB,2CAmE3B"}

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

@@ -0,0 +1,126 @@
+'use client';
+
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalPanelFooter.tsx
+/**
+* TerminalPanelFooter Component.
+*
+* Footer displaying line count, byte count, and current filter.
+*
+* @module components/devenv/terminal/panel/footer
+*/
+/**
+* Stat item styles.
+*/
+const statItemStyles = "flex items-center gap-1 text-xs text-muted-foreground";
+const statValueStyles = "font-mono font-medium text-foreground";
+/**
+* TerminalPanelFooter Component.
+*
+* Displays footer with:
+* - Line count
+* - Byte count
+* - Current filter level
+* - Filtered count (if applicable)
+*
+* @example
+* ```tsx
+* <TerminalPanelFooter
+*   lineCount={1234}
+*   byteCount={45678}
+*   filterLevel="all"
+*   filteredCount={1200}
+*   totalCount={1234}
+* />
+* ```
+*/
+function TerminalPanelFooter({ lineCount, byteCount, filterLevel, filteredCount, totalCount }) {
+	/**
+	* Format byte count for human-readable display.
+	*/
+	const formatBytes = (bytes) => {
+		if (bytes === 0) return "0 B";
+		const k = 1024;
+		const sizes = [
+			"B",
+			"KB",
+			"MB",
+			"GB"
+		];
+		const i = Math.floor(Math.log(bytes) / Math.log(k));
+		return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+	};
+	/**
+	* Format line count with thousands separator.
+	*/
+	const formatLines = (lines) => {
+		return lines.toLocaleString();
+	};
+	/**
+	* Get filter display label.
+	*/
+	const getFilterLabel = () => {
+		if (filterLevel === "all") return "All Levels";
+		return filterLevel.toUpperCase();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx("div", { className: "absolute top-0 left-4 right-4 h-px bg-gradient-to-r from-transparent via-border/40 to-transparent" }), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between px-4 h-9 bg-background/40",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: statItemStyles,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground/50",
+							children: "Lines"
+						}), /* @__PURE__ */ jsx("span", {
+							className: statValueStyles,
+							children: formatLines(lineCount)
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", { className: "w-px h-3 bg-border/20" }),
+					/* @__PURE__ */ jsxs("div", {
+						className: statItemStyles,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground/50",
+							children: "Size"
+						}), /* @__PURE__ */ jsx("span", {
+							className: statValueStyles,
+							children: formatBytes(byteCount)
+						})]
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [filteredCount !== void 0 && totalCount !== void 0 && filteredCount < totalCount && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+					className: statItemStyles,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground/50",
+						children: "Showing"
+					}), /* @__PURE__ */ jsxs("span", {
+						className: statValueStyles,
+						children: [formatLines(filteredCount), /* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground/40",
+							children: ["/", formatLines(totalCount)]
+						})]
+					})]
+				}), /* @__PURE__ */ jsx("div", { className: "w-px h-3 bg-border/20" })] }), /* @__PURE__ */ jsxs("div", {
+					className: statItemStyles,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground/50",
+						children: "Filter"
+					}), /* @__PURE__ */ jsx("span", {
+						className: `${statValueStyles} text-primary/80`,
+						children: getFilterLabel()
+					})]
+				})]
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { TerminalPanelFooter };

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

@@ -0,0 +1,31 @@
+/**
+ * TerminalPanelHeader Component.
+ *
+ * Enhanced macOS-style header with glassmorphism, dynamic session name,
+ * gradient mesh overlay, and premium glass effects.
+ *
+ * @module components/devenv/terminal/panel/header
+ */
+import type { ITerminalPanelHeaderProps } from './TerminalLogsPanel.types';
+/**
+ * TerminalPanelHeader Component.
+ *
+ * Displays enhanced macOS-style header with:
+ * - Traffic light buttons (close, minimize, maximize) with glow effects
+ * - Dynamic session/container name display
+ * - Connection status badge with pulse animation
+ * - Gradient mesh overlay for depth
+ * - Multi-layer glassmorphism effect
+ * - Animated top accent line
+ *
+ * @example
+ * ```tsx
+ * <TerminalPanelHeader
+ *   containerName="devenv-agent-backend"
+ *   isConnected={true}
+ *   onClose={() => console.log('close')}
+ * />
+ * ```
+ */
+export declare function TerminalPanelHeader({ containerName, isConnected, viewMode, onViewModeChange, onClose, onMinimize, onMaximize, }: ITerminalPanelHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TerminalPanelHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalPanelHeader.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelHeader.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAkC3E;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,WAAW,EACX,QAAqB,EACrB,gBAAgB,EAChB,OAAO,EACP,UAAU,EACV,UAAU,GACX,EAAE,yBAAyB,2CAuG3B"}