@mks2508/mks-ui 0.3.1 → 0.4.0

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

@@ -0,0 +1,187 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { Popover, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTrigger } from "../../../ui/Popover/index.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalThemeSelector.tsx
+/**
+* TerminalThemeSelector Component.
+*
+* Searchable dropdown for restty's 458 built-in terminal themes.
+* Uses Popover for the dropdown UI with glassmorphism styling
+* matching the existing TerminalFilterDropdown pattern.
+*
+* @module components/devenv/terminal/panel/TerminalThemeSelector
+*/
+/**
+* Favorite themes displayed at the top of the list.
+*/
+const FAVORITE_THEMES = [
+	"Synthwave Alpha",
+	"Synthwave",
+	"Dracula",
+	"Nord",
+	"One Dark",
+	"Tokyo Night",
+	"Catppuccin Mocha",
+	"Gruvbox Dark"
+];
+/**
+* Action button base styles (matches TerminalInteractivePanel pattern).
+*/
+const triggerStyles = "h-8 px-2.5 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center gap-1.5 text-xs font-mono text-muted-foreground hover:text-foreground flex-shrink-0 border border-border/30";
+/**
+* TerminalThemeSelector Component.
+*
+* Searchable dropdown for restty's built-in theme catalog.
+* Favorites are pinned to the top, followed by alphabetically
+* sorted themes. Search filters by case-insensitive substring.
+*
+* @example
+* ```tsx
+* <TerminalThemeSelector
+*   currentTheme="Synthwave Alpha"
+*   onThemeChange={(name) => setResttyThemeName(name)}
+* />
+* ```
+*/
+function TerminalThemeSelector({ currentTheme, onThemeChange }) {
+	const [open, setOpen] = useState(false);
+	const [search, setSearch] = useState("");
+	const [themeNames, setThemeNames] = useState([]);
+	const searchInputRef = useRef(null);
+	/**
+	* Load the theme catalog from restty on first open.
+	*/
+	useEffect(() => {
+		if (!open || themeNames.length > 0) return;
+		import("restty").then(({ listBuiltinThemeNames }) => {
+			const names = listBuiltinThemeNames();
+			if (Array.isArray(names)) setThemeNames(names.sort((a, b) => a.localeCompare(b)));
+		}).catch(() => {});
+	}, [open, themeNames.length]);
+	/**
+	* Focus search input on open.
+	*/
+	useEffect(() => {
+		if (open) requestAnimationFrame(() => searchInputRef.current?.focus());
+		else setSearch("");
+	}, [open]);
+	/**
+	* Filter and group themes based on search query.
+	*/
+	const { favorites, others } = useMemo(() => {
+		const query = search.toLowerCase().trim();
+		const allNames = themeNames.length > 0 ? themeNames : FAVORITE_THEMES;
+		const favSet = new Set(FAVORITE_THEMES);
+		return {
+			favorites: FAVORITE_THEMES.filter((name) => !query || name.toLowerCase().includes(query)),
+			others: allNames.filter((name) => !favSet.has(name) && (!query || name.toLowerCase().includes(query)))
+		};
+	}, [search, themeNames]);
+	/**
+	* Handle theme selection.
+	*/
+	const handleSelect = useCallback((themeName) => {
+		onThemeChange(themeName);
+		setOpen(false);
+	}, [onThemeChange]);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: triggerStyles,
+			title: "Select terminal theme",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate max-w-[140px]",
+				children: currentTheme
+			}), /* @__PURE__ */ jsx("svg", {
+				className: cn("w-3 h-3 transition-transform flex-shrink-0", open && "rotate-180"),
+				viewBox: "0 0 12 12",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				children: /* @__PURE__ */ jsx("path", { d: "M3 5l3 3 3-3" })
+			})]
+		}) }), /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, {
+			align: "start",
+			sideOffset: 6,
+			children: /* @__PURE__ */ jsxs(PopoverPopup, {
+				className: "w-64 p-0 glass-subtle rounded-lg",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "p-2 border-b border-border/30",
+					children: /* @__PURE__ */ jsx("input", {
+						ref: searchInputRef,
+						type: "text",
+						value: search,
+						onChange: (e) => setSearch(e.target.value),
+						placeholder: "Search themes...",
+						className: "w-full h-8 px-2.5 rounded-md bg-muted/20 border border-border/30 text-xs font-mono text-foreground placeholder:text-muted-foreground/50 outline-none focus:border-primary/40 focus:ring-1 focus:ring-primary/20 transition-colors"
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "max-h-[300px] overflow-y-auto py-1",
+					children: [
+						favorites.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+							className: "px-3 py-1.5",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider",
+								children: "Favorites"
+							})
+						}), favorites.map((name) => /* @__PURE__ */ jsx(ThemeOption, {
+							name,
+							isActive: name === currentTheme,
+							onSelect: handleSelect
+						}, `fav-${name}`))] }),
+						others.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+							favorites.length > 0 && /* @__PURE__ */ jsx("div", { className: "mx-2 my-1 h-px bg-border/20" }),
+							/* @__PURE__ */ jsx("div", {
+								className: "px-3 py-1.5",
+								children: /* @__PURE__ */ jsxs("span", {
+									className: "text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider",
+									children: [
+										"All Themes (",
+										others.length,
+										")"
+									]
+								})
+							}),
+							others.map((name) => /* @__PURE__ */ jsx(ThemeOption, {
+								name,
+								isActive: name === currentTheme,
+								onSelect: handleSelect
+							}, name))
+						] }),
+						favorites.length === 0 && others.length === 0 && /* @__PURE__ */ jsx("div", {
+							className: "px-3 py-4 text-center",
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "text-xs font-mono text-muted-foreground/50",
+								children: [
+									"No themes match \"",
+									search,
+									"\""
+								]
+							})
+						})
+					]
+				})]
+			})
+		}) })]
+	});
+}
+/**
+* Individual theme option in the dropdown list.
+*/
+function ThemeOption({ name, isActive, onSelect }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => onSelect(name),
+		className: cn("w-full text-left px-3 py-1.5 text-xs font-mono transition-colors", "hover:bg-muted/20", isActive ? "text-primary bg-primary/10" : "text-foreground/80"),
+		children: [isActive && /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-1.5 rounded-full bg-primary mr-2 align-middle" }), name]
+	});
+}
+
+//#endregion
+export { TerminalThemeSelector };

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

@@ -0,0 +1,30 @@
+/**
+ * Terminal Panel Module.
+ *
+ * Complete terminal panel with session tabs, header, filter tabs,
+ * action bar, display, and footer. Ghostty-inspired design with
+ * glassmorphism effects and premium visual details.
+ *
+ * @module components/devenv/terminal/panel
+ */
+export { TerminalLogsPanel } from './TerminalLogsPanel';
+export { TerminalInteractivePanel } from './TerminalInteractivePanel';
+export { TerminalInteractivePanelRestty } from './TerminalInteractivePanelRestty';
+export { TerminalPanelChrome } from './TerminalPanelChrome';
+export { TerminalSettingsPopover } from './TerminalSettingsPopover';
+export { TerminalThemeSelector } from './TerminalThemeSelector';
+export { TerminalDebugPanel, type ITerminalDebugPanelProps } from './TerminalDebugPanel';
+export { NOISE_TEXTURE_SVG, terminalScrollStyles } from './TerminalPanelChrome';
+export { TerminalPanelHeader } from './TerminalPanelHeader';
+export { TerminalPanelFooter } from './TerminalPanelFooter';
+export { TerminalSessionTabs } from './TerminalSessionTabs';
+export { TerminalFilterTabs } from './TerminalFilterTabs';
+export { TerminalFilterDropdown } from './TerminalFilterDropdown';
+export { TerminalSessionControl } from './TerminalSessionControl';
+export { LogLinesViewer } from './LogLinesViewer';
+export type { ITerminalPanelChromeProps } from './TerminalPanelChrome.types';
+export type { ITerminalInteractivePanelProps, ITerminalInteractivePanelRef, } from './TerminalInteractivePanel.types';
+export type { ITerminalThemeSelectorProps } from './TerminalThemeSelector';
+export type { ITerminalLogsPanelProps, ITerminalLogsPanelRef, ITerminalPanelHeaderProps, ITerminalPanelToolbarProps, ITerminalPanelFooterProps, ITerminalSession, ITerminalSessionTabsProps, ITerminalFilterTabsProps, ITerminalFilterDropdownProps, ITerminalSessionControlProps, TLogLevelFilter, ILevelFilterButton, TTerminalAction, TLogLevel, } from './TerminalLogsPanel.types';
+export type { ILogLinesViewerProps, } from './LogLinesViewer';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,OAAO,EAAE,kBAAkB,EAAE,KAAK,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAGzF,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAGhF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,YAAY,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAG7E,YAAY,EACV,8BAA8B,EAC9B,4BAA4B,GAC7B,MAAM,kCAAkC,CAAC;AAG1C,YAAY,EAAE,2BAA2B,EAAE,MAAM,yBAAyB,CAAC;AAG3E,YAAY,EACV,uBAAuB,EACvB,qBAAqB,EACrB,yBAAyB,EACzB,0BAA0B,EAC1B,yBAAyB,EACzB,gBAAgB,EAChB,yBAAyB,EACzB,wBAAwB,EACxB,4BAA4B,EAC5B,4BAA4B,EAC5B,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,SAAS,GACV,MAAM,2BAA2B,CAAC;AAEnC,YAAY,EACV,oBAAoB,GACrB,MAAM,kBAAkB,CAAC"}

package/dist/react-ui/blocks/Terminal/panel/terminal-filter-dropdown.module-Bovc57nm.css

@@ -0,0 +1,60 @@
+/**
+ * TerminalFilterDropdown Styles.
+ *
+ * Uses CSS Anchor Positioning API for dropdown placement.
+ * Button acts as anchor, dropdown is positioned relative to it
+ * with automatic flip behavior at viewport edges.
+ *
+ * @module components/devenv/terminal/panel/terminal-filter-dropdown/styles
+ */
+
+/* Trigger button - acts as CSS anchor */
+.triggerButton {
+  anchor-name: --filter-dropdown-anchor;
+}
+
+/* Dropdown menu - anchored to trigger button */
+.dropdownMenu {
+  position-anchor: --filter-dropdown-anchor;
+  position: fixed;
+
+  /* Position below and left-aligned */
+  left: anchor(left);
+  top: anchor(bottom);
+  margin-top: 4px;
+
+  /* Flip to above if no room below */
+  position-try-fallbacks: flip-block, flip-inline;
+
+  min-width: 180px;
+  z-index: 50;
+
+  /* Hidden by default */
+  display: none;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
+  pointer-events: none;
+}
+
+.dropdownMenu[data-open="true"] {
+  display: block;
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+/* Fallback for browsers without CSS Anchor Positioning */
+@supports not (anchor-name: none) {
+  .dropdownMenu {
+    position: absolute;
+    left: 0;
+    top: calc(100% + 4px);
+    z-index: 50;
+  }
+
+  .dropdownMenu[data-open="true"] {
+    display: block;
+  }
+}
+

package/dist/react-ui/blocks/Terminal/panel/terminal-filter-dropdown.module.js

@@ -0,0 +1,5 @@
+//#region src/react-ui/blocks/Terminal/panel/terminal-filter-dropdown.module.css
+var terminal_filter_dropdown_module_default = {};
+
+//#endregion
+export { terminal_filter_dropdown_module_default as default };

package/dist/react-ui/blocks/Terminal/panel/terminal-session-tabs.module-QyxHO7cN.css

@@ -0,0 +1,60 @@
+/**
+ * TerminalSessionTabs Dropdown Styles.
+ *
+ * Uses CSS Anchor Positioning API for the "add container" dropdown.
+ * The + button acts as anchor, dropdown is positioned below it
+ * with automatic flip behavior at viewport edges.
+ *
+ * @module components/devenv/terminal/panel/terminal-session-tabs/styles
+ */
+
+/* + button - acts as CSS anchor */
+.addButton {
+  anchor-name: --session-tabs-add-anchor;
+}
+
+/* Container dropdown - anchored to + button */
+.containerDropdown {
+  position-anchor: --session-tabs-add-anchor;
+  position: fixed;
+
+  /* Position below and left-aligned */
+  left: anchor(left);
+  top: anchor(bottom);
+  margin-top: 4px;
+
+  /* Flip to above if no room below */
+  position-try-fallbacks: flip-block, flip-inline;
+
+  min-width: 200px;
+  z-index: 50;
+
+  /* Hidden by default */
+  display: none;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
+  pointer-events: none;
+}
+
+.containerDropdown[data-open="true"] {
+  display: block;
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+/* Fallback for browsers without CSS Anchor Positioning */
+@supports not (anchor-name: none) {
+  .containerDropdown {
+    position: absolute;
+    left: 0;
+    top: calc(100% + 4px);
+    z-index: 50;
+  }
+
+  .containerDropdown[data-open="true"] {
+    display: block;
+  }
+}
+

package/dist/react-ui/blocks/Terminal/panel/terminal-session-tabs.module.js

@@ -0,0 +1,5 @@
+//#region src/react-ui/blocks/Terminal/panel/terminal-session-tabs.module.css
+var terminal_session_tabs_module_default = {};
+
+//#endregion
+export { terminal_session_tabs_module_default as default };

package/dist/react-ui/blocks/Terminal/parsing/BadgeFormatter.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Badge formatter for terminal logs.
+ *
+ * Creates stylized badges using standard ANSI escape codes
+ * compatible with xterm.js.
+ *
+ * @module components/devenv/terminal/parsing/badge
+ */
+import type { TLogLevel } from './LogParser.types';
+/**
+ * Badge formatter class.
+ *
+ * Creates simple ANSI badges for log levels, tags, and timestamps.
+ *
+ * @example
+ * ```ts
+ * const formatter = new BadgeFormatter();
+ * const infoBadge = formatter.createLevelBadge('info');
+ * // Returns: '\x1b[1m\x1b[44m\x1b[97m[ INFO ]\x1b[0m'
+ * ```
+ */
+export declare class BadgeFormatter {
+    /**
+     * Create a level badge.
+     *
+     * Badge format: [ INFO ] with background color
+     *
+     * @param level - Log level
+     * @returns ANSI-formatted level badge string
+     */
+    createLevelBadge(level: TLogLevel): string;
+    /**
+     * Create a timestamp badge for end of line.
+     *
+     * Badge format: " 22:55:20" aligned to right
+     *
+     * @param timestamp - Display timestamp string
+     * @returns ANSI-formatted timestamp string
+     */
+    createTimestampBadge(timestamp: string): string;
+    /**
+     * Create a tag badge.
+     *
+     * Badge format: [TAG] with subtle styling
+     *
+     * @param tag - Tag string
+     * @returns ANSI-formatted tag badge string
+     */
+    createTagBadge(tag: string): string;
+    /**
+     * Create multiple tag badges joined with space.
+     *
+     * @param tags - Array of tag strings
+     * @returns ANSI-formatted tag badges string
+     */
+    createTagBadges(tags: string[]): string;
+    /**
+     * Create a status indicator.
+     *
+     * @param status - Status type
+     * @returns ANSI-formatted status indicator
+     */
+    createStatusIndicator(status: 'success' | 'warning' | 'error' | 'info'): string;
+    /**
+     * Create a box badge (multi-line).
+     *
+     * @param text - Text to display
+     * @param level - Log level for color
+     * @returns Multi-line ANSI box
+     */
+    createBoxBadge(text: string, level?: TLogLevel): string;
+}
+//# sourceMappingURL=BadgeFormatter.d.ts.map

package/dist/react-ui/blocks/Terminal/parsing/BadgeFormatter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeFormatter.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/parsing/BadgeFormatter.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAkDnD;;;;;;;;;;;GAWG;AACH,qBAAa,cAAc;IACzB;;;;;;;OAOG;IACH,gBAAgB,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM;IAS1C;;;;;;;OAOG;IACH,oBAAoB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM;IAc/C;;;;;;;OAOG;IACH,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAOnC;;;;;OAKG;IACH,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM;IAKvC;;;;;OAKG;IACH,qBAAqB,CAAC,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM;IAkB/E;;;;;;OAMG;IACH,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,GAAE,SAAkB,GAAG,MAAM;CAWhE"}

package/dist/react-ui/blocks/Terminal/parsing/BadgeFormatter.js

@@ -0,0 +1,136 @@
+//#region src/react-ui/blocks/Terminal/parsing/BadgeFormatter.ts
+/**
+* ANSI color combinations for badges.
+*
+* Uses standard 16-color palette for maximum compatibility.
+*/
+const BADGE_COLORS = {
+	info: "\x1B[44m\x1B[97m",
+	warn: "\x1B[43m\x1B[30m",
+	error: "\x1B[41m\x1B[97m",
+	debug: "\x1B[46m\x1B[30m",
+	fatal: "\x1B[45m\x1B[97m",
+	trace: "\x1B[47m\x1B[30m",
+	unknown: "\x1B[47m\x1B[30m"
+};
+/**
+* Tag badge colors (cyan on gray).
+*/
+const TAG_COLORS = "\x1B[90m\x1B[36m";
+/**
+* Timestamp colors (gray).
+*/
+const TIMESTAMP_COLORS = "\x1B[90m\x1B[37m";
+/**
+* Reset code.
+*/
+const RESET = "\x1B[0m";
+/**
+* Bold modifier.
+*/
+const BOLD = "\x1B[1m";
+/**
+* Level badge icons.
+*/
+const LEVEL_ICONS = {
+	info: "I",
+	warn: "W",
+	error: "E",
+	fatal: "F",
+	debug: "D",
+	trace: "T",
+	unknown: "?"
+};
+/**
+* Badge formatter class.
+*
+* Creates simple ANSI badges for log levels, tags, and timestamps.
+*
+* @example
+* ```ts
+* const formatter = new BadgeFormatter();
+* const infoBadge = formatter.createLevelBadge('info');
+* // Returns: '\x1b[1m\x1b[44m\x1b[97m[ INFO ]\x1b[0m'
+* ```
+*/
+var BadgeFormatter = class {
+	/**
+	* Create a level badge.
+	*
+	* Badge format: [ INFO ] with background color
+	*
+	* @param level - Log level
+	* @returns ANSI-formatted level badge string
+	*/
+	createLevelBadge(level) {
+		return `${BOLD}${BADGE_COLORS[level] ?? BADGE_COLORS.unknown}[${LEVEL_ICONS[level] ?? LEVEL_ICONS.unknown}${level.toUpperCase().padEnd(4)}]${RESET}`;
+	}
+	/**
+	* Create a timestamp badge for end of line.
+	*
+	* Badge format: " 22:55:20" aligned to right
+	*
+	* @param timestamp - Display timestamp string
+	* @returns ANSI-formatted timestamp string
+	*/
+	createTimestampBadge(timestamp) {
+		if (!timestamp) return "";
+		return `${TIMESTAMP_COLORS}${(timestamp.includes(".") ? timestamp.split(".")[0] : timestamp).padStart(12)}${RESET}`;
+	}
+	/**
+	* Create a tag badge.
+	*
+	* Badge format: [TAG] with subtle styling
+	*
+	* @param tag - Tag string
+	* @returns ANSI-formatted tag badge string
+	*/
+	createTagBadge(tag) {
+		return `${TAG_COLORS}[${tag.length > 12 ? tag.slice(0, 9) + "..." : tag}]${RESET}`;
+	}
+	/**
+	* Create multiple tag badges joined with space.
+	*
+	* @param tags - Array of tag strings
+	* @returns ANSI-formatted tag badges string
+	*/
+	createTagBadges(tags) {
+		if (!tags || tags.length === 0) return "";
+		return tags.map((tag) => this.createTagBadge(tag)).join("");
+	}
+	/**
+	* Create a status indicator.
+	*
+	* @param status - Status type
+	* @returns ANSI-formatted status indicator
+	*/
+	createStatusIndicator(status) {
+		return `${{
+			success: "\x1B[42m\x1B[97m",
+			warning: "\x1B[43m\x1B[30m",
+			error: "\x1B[41m\x1B[97m",
+			info: "\x1B[44m\x1B[97m"
+		}[status]} ${{
+			success: "✓",
+			warning: "⚠",
+			error: "✖",
+			info: "i"
+		}[status]} ${RESET}`;
+	}
+	/**
+	* Create a box badge (multi-line).
+	*
+	* @param text - Text to display
+	* @param level - Log level for color
+	* @returns Multi-line ANSI box
+	*/
+	createBoxBadge(text, level = "info") {
+		const colors = BADGE_COLORS[level] ?? BADGE_COLORS.unknown;
+		const padding = 2;
+		const width = text.length + padding * 2 + 2;
+		return `${`\x1b[90m┌${"─".repeat(width)}┐${RESET}`}\r\n${`${colors}│${" ".repeat(padding)}${text}${" ".repeat(padding)}│${RESET}`}\r\n${`\x1b[90m└${"─".repeat(width)}┘${RESET}`}`;
+	}
+};
+
+//#endregion
+export { BadgeFormatter };

package/dist/react-ui/blocks/Terminal/parsing/HttpLogParser.d.ts

@@ -0,0 +1,117 @@
+/**
+ * HTTP log parser for specialized HTTP request detection.
+ *
+ * Detects and parses HTTP request logs with syntax highlighting
+ * for methods (GET, POST, etc.), routes, and parameters.
+ *
+ * @module components/devenv/terminal/parsing/HttpLogParser
+ */
+import type { IParsedLogEntry } from './LogParser.types';
+/**
+ * HTTP method enumeration.
+ */
+export type THttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE';
+/**
+ * Parsed HTTP request data.
+ */
+export interface IHttpParsedData {
+    /** HTTP method */
+    method: THttpMethod;
+    /** Request path/route */
+    path: string;
+    /** Query parameters extracted from path */
+    params?: Record<string, string>;
+    /** Whether request opens a multiline block (has brace) */
+    opensMultiline: boolean;
+}
+/**
+ * HTTP log parser class.
+ *
+ * Detects HTTP requests in log lines and extracts structured data.
+ * Supports various log formats:
+ *
+ * - `GET /api/endpoint`
+ * - `GET /api/endpoint/:param {`
+ * - `POST /api/users HTTP/1.1`
+ *
+ * @example
+ * ```ts
+ * const parser = new HttpLogParser();
+ * const parsed = parser.parseLine('GET /api/logs/containers/:name/stream {');
+ * // parsed.method = 'GET'
+ * // parsed.path = '/api/logs/containers/:name/stream'
+ * // parsed.opensMultiline = true
+ * ```
+ */
+export declare class HttpLogParser {
+    /** HTTP method pattern */
+    private readonly HTTP_PATTERN;
+    /** URL path with parameters pattern */
+    private readonly PATH_PARAM_PATTERN;
+    /**
+     * Parse a log line for HTTP request data.
+     *
+     * @param line - Log line to parse
+     * @returns Parsed HTTP data or null if not an HTTP line
+     */
+    parseLine(line: string): IHttpParsedData | null;
+    /**
+     * Check if a line is an HTTP request line.
+     *
+     * @param line - Line to check
+     * @returns true if line is an HTTP request
+     */
+    isHttpLine(line: string): boolean;
+    /**
+     * Extract path parameters from a route path.
+     *
+     * @param path - Route path (e.g., `/api/users/:id`)
+     * @returns Object with parameter names
+     */
+    extractPathParams(path: string): Record<string, string> | undefined;
+    /**
+     * Format HTTP method with syntax highlighting class.
+     *
+     * @param _method - HTTP method
+     * @returns CSS class for highlighting
+     */
+    getMethodClass(_method: THttpMethod): string;
+    /**
+     * Format path with syntax highlighting.
+     *
+     * @param path - Request path
+     * @returns CSS class for path highlighting
+     */
+    getPathClass(): string;
+    /**
+     * Highlight an HTTP request line.
+     *
+     * Returns an array of parts with their associated CSS classes.
+     *
+     * @param line - HTTP request line
+     * @returns Array of {text, className} parts
+     */
+    highlightLine(line: string): Array<{
+        text: string;
+        className?: string;
+    }>;
+    /**
+     * Highlight path segments (routes and parameters).
+     *
+     * @param path - Path string
+     * @returns Highlighted parts
+     * @private
+     */
+    private highlightPath;
+    /**
+     * Parse a multiline HTTP request block.
+     *
+     * Combines the initial request line with continuation lines
+     * that form JSON or structured data.
+     *
+     * @param lines - Array of log lines
+     * @returns Parsed entry with HTTP data
+     */
+    parseHttpBlock(lines: string[]): IParsedLogEntry | null;
+}
+//# sourceMappingURL=HttpLogParser.d.ts.map