@mks2508/mks-ui 0.3.2 → 0.4.0

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

@@ -0,0 +1,193 @@
+'use client';
+
+import { cn } from "../../../lib/utils.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
+*
+* @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).
+*
+* @example
+* ```tsx
+* <TerminalPanelChrome
+*   containerName="devenv-agent-backend"
+*   isConnected={true}
+*   sessions={sessions}
+*   activeSessionId="session-1"
+*   onSessionTabClick={(id) => setActiveSession(id)}
+*   onSessionClose={(id) => closeSession(id)}
+*   onNewSession={() => createSession()}
+*   actionBar={<TerminalFilterTabs ... />}
+*   footer={<TerminalPanelFooter ... />}
+* >
+*   <div ref={containerRef} className="terminal-container" />
+* </TerminalPanelChrome>
+* ```
+*/
+function TerminalPanelChrome({ containerName, isConnected, viewMode = "terminal", onViewModeChange, sessions, activeSessionId, onSessionTabClick, onSessionClose, onNewSession, availableContainers, onAddContainer, children, actionBar, footer, onClose, onMinimize, onMaximize, crtEffect, className }) {
+	/** Whether to render session tabs (multi-session mode) */
+	const showSessionTabs = sessions && sessions.length > 0 || availableContainers && availableContainers.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("glass-heavy glass-noise rounded-2xl overflow-hidden", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "absolute top-0 left-0 right-0 h-px z-10 pointer-events-none overflow-hidden",
+				children: [/* @__PURE__ */ jsx("div", { className: "h-full w-full bg-gradient-to-r from-transparent via-primary/70 to-transparent shadow-[0_0_12px_hsla(330,85%,43%,0.5)]" }), /* @__PURE__ */ jsx("div", {
+					className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent",
+					style: {
+						backgroundSize: "200% 100%",
+						animation: "shimmer-line 4s ease-in-out infinite"
+					}
+				})]
+			}),
+			showSessionTabs && /* @__PURE__ */ jsx(TerminalSessionTabs, {
+				sessions: sessions || [],
+				activeSessionId: activeSessionId || null,
+				onTabClick: (sessionId) => onSessionTabClick?.(sessionId),
+				onClose: (sessionId) => onSessionClose?.(sessionId),
+				onNewSession,
+				availableContainers,
+				onAddContainer
+			}),
+			/* @__PURE__ */ jsx(TerminalPanelHeader, {
+				containerName,
+				isConnected,
+				viewMode,
+				onViewModeChange,
+				onClose,
+				onMinimize,
+				onMaximize
+			}),
+			actionBar,
+			/* @__PURE__ */ jsx("div", {
+				className: cn(crtEffect && "terminal-crt terminal-bloom"),
+				children
+			}),
+			footer,
+			/* @__PURE__ */ jsx("style", { children: terminalScrollStyles })
+		]
+	});
+}
+
+//#endregion
+export { NOISE_TEXTURE_SVG, TerminalPanelChrome, terminalScrollStyles };

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

@@ -0,0 +1,57 @@
+/**
+ * Types for TerminalPanelChrome component.
+ *
+ * @module components/devenv/terminal/panel/chrome/types
+ */
+import type { ITerminalSession } from './TerminalLogsPanel.types';
+/**
+ * Props for TerminalPanelChrome - reusable Ghostty-styled wrapper.
+ *
+ * Provides the shared visual shell for both log viewer
+ * and interactive terminal panels.
+ */
+export interface ITerminalPanelChromeProps {
+    /** 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;
+    /** 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,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAElE;;;;;GAKG;AACH,MAAM,WAAW,yBAAyB;IACxC,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,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"}

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

@@ -0,0 +1,149 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { ListIcon } from "../../../icons/lucide-animated/list.js";
+import { TerminalIcon } from "../../../icons/lucide-animated/terminal.js";
+import "../../../icons/lucide-animated/index.js";
+import { IconWrapper } from "../../../lib/icon-wrapper.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalPanelHeader.tsx
+/**
+* TerminalPanelHeader Component.
+*
+* Enhanced macOS-style header with glassmorphism, dynamic session name,
+* gradient mesh overlay, and premium glass effects.
+*
+* @module components/devenv/terminal/panel/header
+*/
+/**
+* Traffic light button styles with macOS group hover behavior.
+* Dots are desaturated until the group is hovered.
+*/
+const trafficLightStyles = {
+	close: "w-3 h-3 rounded-full transition-all duration-200 bg-muted-foreground/30 group-hover/traffic:bg-red-500/90 group-hover/traffic:shadow-[0_0_6px_rgba(239,68,68,0.4)] hover:!bg-red-500 hover:!shadow-[0_0_12px_rgba(239,68,68,0.6)] hover:!scale-110",
+	minimize: "w-3 h-3 rounded-full transition-all duration-200 bg-muted-foreground/30 group-hover/traffic:bg-yellow-500/90 group-hover/traffic:shadow-[0_0_6px_rgba(234,179,8,0.4)] hover:!bg-yellow-500 hover:!shadow-[0_0_12px_rgba(234,179,8,0.6)] hover:!scale-110",
+	maximize: "w-3 h-3 rounded-full transition-all duration-200 bg-muted-foreground/30 group-hover/traffic:bg-green-500/90 group-hover/traffic:shadow-[0_0_6px_rgba(34,197,94,0.4)] hover:!bg-green-500 hover:!shadow-[0_0_12px_rgba(34,197,94,0.6)] hover:!scale-110"
+};
+/**
+* Segmented control button styles (macOS-style).
+*/
+const segmentedButtonStyles = {
+	base: "flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-all",
+	inactive: "text-muted-foreground hover:text-foreground hover:bg-white/5 hover:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)]",
+	active: "bg-primary/20 text-primary border border-primary/30 shadow-[0_0_8px_hsla(330,85%,43%,0.15)] hover:shadow-[0_0_12px_hsla(330,85%,43%,0.25)]"
+};
+/**
+* Connection status color classes with glow effects.
+*/
+function getStatusColor(isConnected) {
+	if (isConnected) return "bg-success/80 shadow-[0_0_8px_hsla(142,100%,62%,0.5)] animate-pulse";
+	return "bg-muted-foreground/60";
+}
+/**
+* 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')}
+* />
+* ```
+*/
+function TerminalPanelHeader({ containerName, isConnected, viewMode = "terminal", onViewModeChange, onClose, onMinimize, onMaximize }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative overflow-hidden", "flex items-center justify-between px-4 h-12", "bg-background/60", "border-b border-border/30"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between w-full",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "group/traffic flex items-center gap-2 px-1 py-1 -mx-1 rounded-md",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onClose,
+							className: trafficLightStyles.close,
+							"aria-label": "Close",
+							title: "Close"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onMinimize,
+							className: trafficLightStyles.minimize,
+							"aria-label": "Minimize",
+							title: "Minimize"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onMaximize,
+							className: trafficLightStyles.maximize,
+							"aria-label": "Maximize",
+							title: "Maximize"
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex-1 flex items-center justify-center gap-2",
+					children: [/* @__PURE__ */ jsx(IconWrapper, {
+						icon: TerminalIcon,
+						size: 14,
+						className: cn("transition-all duration-500 flex-shrink-0", isConnected ? "text-primary/80" : "text-muted-foreground/40")
+					}), /* @__PURE__ */ jsx("h3", {
+						className: cn("text-sm font-mono font-medium truncate transition-all duration-500", isConnected ? "text-foreground/95 drop-shadow-[0_0_8px_hsla(330,85%,43%,0.3)]" : "text-foreground/60"),
+						children: containerName
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center bg-background/80 rounded-lg p-0.5 border-t border-white/10 border-b border-border/50 border-x border-border/40 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.15),0_0_0_1px_rgba(0,0,0,0.1)]",
+						children: [/* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => onViewModeChange?.("terminal"),
+							className: cn(segmentedButtonStyles.base, !onViewModeChange && "opacity-70 cursor-not-allowed", viewMode === "terminal" ? segmentedButtonStyles.active : segmentedButtonStyles.inactive),
+							title: "Terminal mode - Raw logs with original ANSI colors",
+							children: [/* @__PURE__ */ jsx(IconWrapper, {
+								icon: TerminalIcon,
+								size: 14
+							}), /* @__PURE__ */ jsx("span", {
+								className: "hidden xs:inline",
+								children: "Terminal"
+							})]
+						}), /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => onViewModeChange?.("react"),
+							className: cn(segmentedButtonStyles.base, !onViewModeChange && "opacity-70 cursor-not-allowed", viewMode === "react" ? segmentedButtonStyles.active : segmentedButtonStyles.inactive),
+							title: "React mode - Logs with badges and syntax highlighting",
+							children: [/* @__PURE__ */ jsx(IconWrapper, {
+								icon: ListIcon,
+								size: 14
+							}), /* @__PURE__ */ jsx("span", {
+								className: "hidden xs:inline",
+								children: "List"
+							})]
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("div", { className: cn("w-2 h-2 rounded-full transition-all duration-300", getStatusColor(isConnected)) }), /* @__PURE__ */ jsx("span", {
+							className: "text-xs text-muted-foreground font-medium hidden sm:inline",
+							children: isConnected ? "Connected" : "Disconnected"
+						})]
+					})]
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { TerminalPanelHeader };

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

@@ -0,0 +1,35 @@
+/**
+ * TerminalPanelToolbar Component.
+ *
+ * Filter toolbar with log level buttons, toggles, and action buttons.
+ *
+ * @module components/devenv/terminal/panel/toolbar
+ */
+import type { ITerminalPanelToolbarProps } from './TerminalLogsPanel.types';
+/**
+ * TerminalPanelToolbar Component.
+ *
+ * Displays filter toolbar with:
+ * - Log level filter buttons with badges
+ * - Follow cursor toggle
+ * - Line numbers toggle
+ * - Action buttons (Search, Clear, Download)
+ *
+ * @example
+ * ```tsx
+ * <TerminalPanelToolbar
+ *   filterLevel="all"
+ *   followCursor={true}
+ *   showLineNumbers={false}
+ *   levelCounts={{ info: 42, warn: 3, error: 1 }}
+ *   onFilterChange={(level) => setFilterLevel(level)}
+ *   onFollowCursorChange={(enabled) => setFollowCursor(enabled)}
+ *   onShowLineNumbersChange={(enabled) => setShowLineNumbers(enabled)}
+ *   onClear={() => clearLogs()}
+ *   onDownload={() => downloadLogs()}
+ *   onSearch={() => openSearch()}
+ * />
+ * ```
+ */
+export declare function TerminalPanelToolbar({ filterLevel, followCursor, showLineNumbers, levelCounts, onFilterChange, onFollowCursorChange, onShowLineNumbersChange, onClear, onDownload, onSearch, }: ITerminalPanelToolbarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TerminalPanelToolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalPanelToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelToolbar.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,OAAO,KAAK,EACV,0BAA0B,EAI3B,MAAM,2BAA2B,CAAC;AA4CnC;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,WAAW,EACX,YAAY,EACZ,eAAe,EACf,WAAW,EACX,cAAc,EACd,oBAAoB,EACpB,uBAAuB,EACvB,OAAO,EACP,UAAU,EACV,QAAQ,GACT,EAAE,0BAA0B,2CA0G5B"}