@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/components/shared/SearchableSelect.js

@@ -0,0 +1,214 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useCallback as t, useEffect as n, useId as r, useLayoutEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+import { Check as c, ChevronDown as l, Search as u, X as d } from "lucide-react";
+import { AnimatePresence as f, motion as p } from "framer-motion";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { createPortal as g } from "react-dom";
+//#region src/components/shared/SearchableSelect.tsx
+function _({ label: _, placeholder: v, options: y, value: b, onChange: x, searchPlaceholder: S, disabled: C = !1, className: w = "", clearable: T = !1, emptyValue: E = "", dropdownAlign: D = "left" }) {
+	let O = e(), k = v ?? O("vibecontrols.shared.searchableSelect.placeholder", "Select..."), A = S ?? O("vibecontrols.shared.searchableSelect.searchPlaceholder", "Search..."), j = `searchable-select-${r()}`, [M, N] = s(!1), [P, F] = s(""), [I, L] = s(-1), [R, z] = s({
+		visibility: "hidden",
+		position: "fixed"
+	}), B = o(null), V = o(null), H = o(null), U = o(null), W = y.find((e) => e.value === b), G = a(() => {
+		if (!P) return y;
+		let e = P.toLowerCase();
+		return y.filter((t) => t.label.toLowerCase().includes(e) || t.description?.toLowerCase().includes(e) || t.value.toLowerCase().includes(e));
+	}, [y, P]);
+	n(() => {
+		L(G.length > 0 ? 0 : -1);
+	}, [G.length, P]), n(() => {
+		function e(e) {
+			let t = e.target, n = B.current?.contains(t) ?? !1, r = V.current?.contains(t) ?? !1;
+			!n && !r && (N(!1), F(""));
+		}
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []), n(() => {
+		M && requestAnimationFrame(() => {
+			H.current?.focus();
+		});
+	}, [M]), n(() => {
+		if (I >= 0 && U.current) {
+			let e = U.current.querySelectorAll("[data-option]")[I];
+			e && e.scrollIntoView({ block: "nearest" });
+		}
+	}, [I]), i(() => {
+		if (!M || !B.current) return;
+		let e = B.current.getBoundingClientRect(), t = window.innerWidth, n = window.innerHeight, r = n - e.bottom < 200 && e.top > 200, i = {
+			position: "fixed",
+			minWidth: 220
+		};
+		if (r ? i.bottom = n - e.top + 4 : i.top = e.bottom + 4, D === "right") {
+			let n = t - e.right;
+			i.right = Math.max(4, n), i.maxWidth = Math.max(80, t - Math.max(4, n) - 4);
+		} else {
+			let n = Math.max(4, e.left + e.width + 220 > t ? t - 220 - 4 : e.left);
+			i.left = n, i.width = Math.min(e.width, t - n - 4);
+		}
+		z({
+			...i,
+			visibility: "visible"
+		});
+	}, [M, D]), n(() => {
+		M || z({
+			visibility: "hidden",
+			position: "fixed"
+		});
+	}, [M]);
+	let K = t((e) => {
+		x(e), N(!1), F("");
+	}, [x]), q = t((e) => {
+		if (!M) {
+			(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), N(!0));
+			return;
+		}
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), L((e) => e < G.length - 1 ? e + 1 : 0);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), L((e) => e > 0 ? e - 1 : G.length - 1);
+				break;
+			case "Enter":
+				if (e.preventDefault(), I >= 0 && I < G.length) {
+					let e = G[I];
+					e.disabled || K(e.value);
+				}
+				break;
+			case "Escape":
+				e.preventDefault(), N(!1), F("");
+				break;
+			case "Tab":
+				N(!1), F("");
+				break;
+		}
+	}, [
+		M,
+		G,
+		I,
+		K
+	]), J = t((e) => {
+		e.stopPropagation(), x(E);
+	}, [x, E]);
+	return /* @__PURE__ */ h("div", {
+		className: `relative ${w}`,
+		ref: B,
+		onKeyDown: q,
+		children: [/* @__PURE__ */ h("button", {
+			type: "button",
+			"aria-haspopup": "listbox",
+			"aria-expanded": M,
+			"aria-controls": M ? j : void 0,
+			onClick: () => {
+				C || N(!M);
+			},
+			disabled: C,
+			className: `inline-flex items-center gap-2 w-full px-3 py-2 text-sm border rounded-md transition-colors text-left ${C ? "bg-bg-sunken border-border-default text-text-muted cursor-not-allowed" : M ? "bg-bg-surface border-border-strong ring-1 ring-border-strong text-text-primary" : "bg-bg-sunken border-border-default text-text-primary hover:bg-bg-elevated"}`,
+			children: [
+				_ && /* @__PURE__ */ h("span", {
+					className: "text-text-secondary flex-shrink-0",
+					children: [_, ":"]
+				}),
+				/* @__PURE__ */ m("span", {
+					className: `flex-1 truncate ${W ? "font-medium" : "text-text-placeholder"}`,
+					children: W?.label || k
+				}),
+				/* @__PURE__ */ h("div", {
+					className: "flex items-center gap-1 flex-shrink-0",
+					children: [T && b !== E && /* @__PURE__ */ m("span", {
+						role: "button",
+						tabIndex: -1,
+						onClick: J,
+						className: "p-0.5 rounded hover:bg-bg-sunken transition-colors",
+						children: /* @__PURE__ */ m(d, { className: "w-3 h-3 text-text-muted" })
+					}), /* @__PURE__ */ m(l, { className: `w-4 h-4 text-text-secondary transition-transform ${M ? "rotate-180" : ""}` })]
+				})
+			]
+		}), g(/* @__PURE__ */ m(f, { children: M && /* @__PURE__ */ h(p.div, {
+			ref: V,
+			id: j,
+			role: "listbox",
+			"aria-label": _ || k,
+			initial: {
+				opacity: 0,
+				y: -4,
+				scale: .97
+			},
+			animate: {
+				opacity: 1,
+				y: 0,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				y: -4,
+				scale: .97
+			},
+			transition: {
+				duration: .15,
+				ease: [
+					.4,
+					0,
+					.2,
+					1
+				]
+			},
+			className: "z-[200] bg-bg-surface border border-border-default rounded-md shadow-lg",
+			style: R,
+			children: [/* @__PURE__ */ m("div", {
+				className: "p-2 border-b border-border-default",
+				children: /* @__PURE__ */ h("div", {
+					className: "flex items-center gap-2 px-2 py-1.5 bg-bg-sunken border border-border-default rounded-md",
+					children: [
+						/* @__PURE__ */ m(u, { className: "w-3.5 h-3.5 text-text-muted flex-shrink-0" }),
+						/* @__PURE__ */ m("input", {
+							ref: H,
+							type: "text",
+							value: P,
+							onChange: (e) => F(e.target.value),
+							placeholder: A,
+							className: "flex-1 text-sm bg-transparent text-text-primary placeholder:text-text-placeholder outline-none"
+						}),
+						P && /* @__PURE__ */ m("button", {
+							onClick: () => F(""),
+							className: "p-0.5 rounded hover:bg-bg-surface transition-colors",
+							children: /* @__PURE__ */ m(d, { className: "w-3 h-3 text-text-muted" })
+						})
+					]
+				})
+			}), /* @__PURE__ */ m("div", {
+				ref: U,
+				className: "max-h-56 overflow-y-auto py-1",
+				children: G.length > 0 ? G.map((e, t) => /* @__PURE__ */ h("button", {
+					"data-option": !0,
+					type: "button",
+					role: "option",
+					"aria-selected": b === e.value,
+					"aria-disabled": e.disabled,
+					onClick: () => {
+						e.disabled || K(e.value);
+					},
+					disabled: e.disabled,
+					className: `flex items-center justify-between w-full px-3 py-2 text-sm transition-colors ${e.disabled ? "text-text-muted cursor-not-allowed" : t === I ? "bg-bg-sunken text-text-primary" : "text-text-primary hover:bg-bg-sunken"}`,
+					onMouseEnter: () => L(t),
+					children: [/* @__PURE__ */ h("div", {
+						className: "flex flex-col items-start min-w-0",
+						children: [/* @__PURE__ */ m("span", {
+							className: "truncate w-full",
+							children: e.label
+						}), e.description && /* @__PURE__ */ m("span", {
+							className: "text-xs text-text-muted truncate w-full",
+							children: e.description
+						})]
+					}), b === e.value && /* @__PURE__ */ m(c, { className: "w-4 h-4 text-action-primary-bg flex-shrink-0 ml-2" })]
+				}, e.value)) : /* @__PURE__ */ m("div", {
+					className: "px-3 py-4 text-sm text-text-muted text-center",
+					children: O("vibecontrols.shared.searchableSelect.noOptionsFound", "No options found")
+				})
+			})]
+		}) }), document.body)]
+	});
+}
+//#endregion
+export { _ as SearchableSelect };
+
+//# sourceMappingURL=SearchableSelect.js.map

package/dist/components/shared/SearchableSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchableSelect.js","names":[],"sources":["../../../src/components/shared/SearchableSelect.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback, useId } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ChevronDown, Search, Check, X } from 'lucide-react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { useTr } from '../../shared/hooks/useTr';\n\nexport interface SearchableSelectOption {\n  value: string;\n  label: string;\n  description?: string;\n  disabled?: boolean;\n}\n\nexport interface SearchableSelectProps {\n  /** Label shown as prefix in the trigger button */\n  label?: string;\n  /** Placeholder when nothing is selected */\n  placeholder?: string;\n  /** Available options */\n  options: SearchableSelectOption[];\n  /** Currently selected value */\n  value: string;\n  /** Callback when value changes */\n  onChange: (value: string) => void;\n  /** Placeholder for the search input inside the dropdown */\n  searchPlaceholder?: string;\n  /** Whether the select is disabled */\n  disabled?: boolean;\n  /** Additional CSS class for the root wrapper */\n  className?: string;\n  /** Whether to show a clear button when a non-default value is selected */\n  clearable?: boolean;\n  /** The value that represents \"nothing selected\" (defaults to empty string) */\n  emptyValue?: string;\n  /** Which edge of the trigger button the dropdown aligns to (default: 'left') */\n  dropdownAlign?: 'left' | 'right';\n}\n\n/**\n * SearchableSelect — A dropdown with a built-in search input for filtering\n * long option lists. Keyboard accessible (arrow keys, enter, escape).\n *\n * @example\n * ```tsx\n * <SearchableSelect\n *   label=\"Agent\"\n *   placeholder=\"Select an agent\"\n *   options={agentOptions}\n *   value={selectedAgentId}\n *   onChange={setSelectedAgentId}\n *   searchPlaceholder=\"Search agents...\"\n * />\n * ```\n */\nexport function SearchableSelect({\n  label,\n  placeholder,\n  options,\n  value,\n  onChange,\n  searchPlaceholder,\n  disabled = false,\n  className = '',\n  clearable = false,\n  emptyValue = '',\n  dropdownAlign = 'left',\n}: SearchableSelectProps) {\n  const tr = useTr();\n  const resolvedPlaceholder =\n    placeholder ?? tr('vibecontrols.shared.searchableSelect.placeholder', 'Select...');\n  const resolvedSearchPlaceholder =\n    searchPlaceholder ?? tr('vibecontrols.shared.searchableSelect.searchPlaceholder', 'Search...');\n  const uid = useId();\n  const dropdownId = `searchable-select-${uid}`;\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [search, setSearch] = useState('');\n  const [highlightedIndex, setHighlightedIndex] = useState(-1);\n  // Start hidden + fixed (out of flow) so the layout effect can compute position before painting\n  const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties>({\n    visibility: 'hidden',\n    position: 'fixed',\n  });\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const selectedOption = options.find((opt) => opt.value === value);\n\n  // Filter options by search query\n  const filteredOptions = useMemo(() => {\n    if (!search) return options;\n    const q = search.toLowerCase();\n    return options.filter(\n      (opt) =>\n        opt.label.toLowerCase().includes(q) ||\n        opt.description?.toLowerCase().includes(q) ||\n        opt.value.toLowerCase().includes(q)\n    );\n  }, [options, search]);\n\n  // Reset highlight when filtered list changes\n  useEffect(() => {\n    setHighlightedIndex(filteredOptions.length > 0 ? 0 : -1);\n  }, [filteredOptions.length, search]);\n\n  // Close on outside click — must check both the trigger container and the portal dropdown\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      const target = event.target as Node;\n      const insideTrigger = containerRef.current?.contains(target) ?? false;\n      const insideDropdown = dropdownRef.current?.contains(target) ?? false;\n      if (!insideTrigger && !insideDropdown) {\n        setIsOpen(false);\n        setSearch('');\n      }\n    }\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  // Focus search input when dropdown opens\n  useEffect(() => {\n    if (isOpen) {\n      // Small timeout to ensure the dropdown is rendered\n      requestAnimationFrame(() => {\n        searchInputRef.current?.focus();\n      });\n    }\n  }, [isOpen]);\n\n  // Scroll highlighted item into view\n  useEffect(() => {\n    if (highlightedIndex >= 0 && listRef.current) {\n      const items = listRef.current.querySelectorAll('[data-option]');\n      const item = items[highlightedIndex];\n      if (item) {\n        item.scrollIntoView({ block: 'nearest' });\n      }\n    }\n  }, [highlightedIndex]);\n\n  // Compute viewport-aware fixed position for the dropdown\n  useLayoutEffect(() => {\n    if (!isOpen || !containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const vw = window.innerWidth;\n    const vh = window.innerHeight;\n    const minW = 220;\n    const dropdownHeight = 200; // approximate max height\n    const spaceBelow = vh - rect.bottom;\n    const openAbove = spaceBelow < dropdownHeight && rect.top > dropdownHeight;\n\n    const style: React.CSSProperties = {\n      position: 'fixed',\n      minWidth: minW,\n    };\n\n    if (openAbove) {\n      style.bottom = vh - rect.top + 4;\n    } else {\n      style.top = rect.bottom + 4;\n    }\n\n    if (dropdownAlign === 'right') {\n      const rightFromViewport = vw - rect.right;\n      style.right = Math.max(4, rightFromViewport);\n      // Clamp width so it doesn't overflow the left edge\n      style.maxWidth = Math.max(80, vw - Math.max(4, rightFromViewport) - 4);\n    } else {\n      const leftPos = Math.max(4, rect.left + rect.width + minW > vw ? vw - minW - 4 : rect.left);\n      style.left = leftPos;\n      // Clamp width to available space from leftPos to right edge (with 4px margin)\n      style.width = Math.min(rect.width, vw - leftPos - 4);\n    }\n    setDropdownStyle({ ...style, visibility: 'visible' });\n  }, [isOpen, dropdownAlign]);\n\n  // Reset to hidden + fixed whenever dropdown closes so next open starts invisible\n  // and out-of-flow until the layout effect repositions it\n  useEffect(() => {\n    if (!isOpen) setDropdownStyle({ visibility: 'hidden', position: 'fixed' });\n  }, [isOpen]);\n\n  const handleSelect = useCallback(\n    (optionValue: string) => {\n      onChange(optionValue);\n      setIsOpen(false);\n      setSearch('');\n    },\n    [onChange]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (!isOpen) {\n        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n          e.preventDefault();\n          setIsOpen(true);\n        }\n        return;\n      }\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          setHighlightedIndex((prev) => (prev < filteredOptions.length - 1 ? prev + 1 : 0));\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : filteredOptions.length - 1));\n          break;\n        case 'Enter':\n          e.preventDefault();\n          if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {\n            const opt = filteredOptions[highlightedIndex];\n            if (!opt.disabled) {\n              handleSelect(opt.value);\n            }\n          }\n          break;\n        case 'Escape':\n          e.preventDefault();\n          setIsOpen(false);\n          setSearch('');\n          break;\n        case 'Tab':\n          setIsOpen(false);\n          setSearch('');\n          break;\n      }\n    },\n    [isOpen, filteredOptions, highlightedIndex, handleSelect]\n  );\n\n  const handleClear = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onChange(emptyValue);\n    },\n    [onChange, emptyValue]\n  );\n\n  return (\n    <div className={`relative ${className}`} ref={containerRef} onKeyDown={handleKeyDown}>\n      {/* Trigger Button */}\n      <button\n        type=\"button\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n        aria-controls={isOpen ? dropdownId : undefined}\n        onClick={() => {\n          if (!disabled) setIsOpen(!isOpen);\n        }}\n        disabled={disabled}\n        className={`inline-flex items-center gap-2 w-full px-3 py-2 text-sm border rounded-md transition-colors text-left ${\n          disabled\n            ? 'bg-bg-sunken border-border-default text-text-muted cursor-not-allowed'\n            : isOpen\n              ? 'bg-bg-surface border-border-strong ring-1 ring-border-strong text-text-primary'\n              : 'bg-bg-sunken border-border-default text-text-primary hover:bg-bg-elevated'\n        }`}\n      >\n        {label && <span className=\"text-text-secondary flex-shrink-0\">{label}:</span>}\n        <span\n          className={`flex-1 truncate ${!selectedOption ? 'text-text-placeholder' : 'font-medium'}`}\n        >\n          {selectedOption?.label || resolvedPlaceholder}\n        </span>\n        <div className=\"flex items-center gap-1 flex-shrink-0\">\n          {clearable && value !== emptyValue && (\n            <span\n              role=\"button\"\n              tabIndex={-1}\n              onClick={handleClear}\n              className=\"p-0.5 rounded hover:bg-bg-sunken transition-colors\"\n            >\n              <X className=\"w-3 h-3 text-text-muted\" />\n            </span>\n          )}\n          <ChevronDown\n            className={`w-4 h-4 text-text-secondary transition-transform ${isOpen ? 'rotate-180' : ''}`}\n          />\n        </div>\n      </button>\n\n      {/* Dropdown — rendered in a portal on document.body so ancestor CSS transforms\n           (e.g. from framer-motion MotionPage) don't break position: fixed */}\n      {createPortal(\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              ref={dropdownRef}\n              id={dropdownId}\n              role=\"listbox\"\n              aria-label={label || resolvedPlaceholder}\n              initial={{ opacity: 0, y: -4, scale: 0.97 }}\n              animate={{ opacity: 1, y: 0, scale: 1 }}\n              exit={{ opacity: 0, y: -4, scale: 0.97 }}\n              transition={{ duration: 0.15, ease: [0.4, 0, 0.2, 1] }}\n              className=\"z-[200] bg-bg-surface border border-border-default rounded-md shadow-lg\"\n              style={dropdownStyle}\n            >\n              {/* Search Input */}\n              <div className=\"p-2 border-b border-border-default\">\n                <div className=\"flex items-center gap-2 px-2 py-1.5 bg-bg-sunken border border-border-default rounded-md\">\n                  <Search className=\"w-3.5 h-3.5 text-text-muted flex-shrink-0\" />\n                  <input\n                    ref={searchInputRef}\n                    type=\"text\"\n                    value={search}\n                    onChange={(e) => setSearch(e.target.value)}\n                    placeholder={resolvedSearchPlaceholder}\n                    className=\"flex-1 text-sm bg-transparent text-text-primary placeholder:text-text-placeholder outline-none\"\n                  />\n                  {search && (\n                    <button\n                      onClick={() => setSearch('')}\n                      className=\"p-0.5 rounded hover:bg-bg-surface transition-colors\"\n                    >\n                      <X className=\"w-3 h-3 text-text-muted\" />\n                    </button>\n                  )}\n                </div>\n              </div>\n\n              {/* Options List */}\n              <div ref={listRef} className=\"max-h-56 overflow-y-auto py-1\">\n                {filteredOptions.length > 0 ? (\n                  filteredOptions.map((option, index) => (\n                    <button\n                      key={option.value}\n                      data-option\n                      type=\"button\"\n                      role=\"option\"\n                      aria-selected={value === option.value}\n                      aria-disabled={option.disabled}\n                      onClick={() => {\n                        if (!option.disabled) handleSelect(option.value);\n                      }}\n                      disabled={option.disabled}\n                      className={`flex items-center justify-between w-full px-3 py-2 text-sm transition-colors ${\n                        option.disabled\n                          ? 'text-text-muted cursor-not-allowed'\n                          : index === highlightedIndex\n                            ? 'bg-bg-sunken text-text-primary'\n                            : 'text-text-primary hover:bg-bg-sunken'\n                      }`}\n                      onMouseEnter={() => setHighlightedIndex(index)}\n                    >\n                      <div className=\"flex flex-col items-start min-w-0\">\n                        <span className=\"truncate w-full\">{option.label}</span>\n                        {option.description && (\n                          <span className=\"text-xs text-text-muted truncate w-full\">\n                            {option.description}\n                          </span>\n                        )}\n                      </div>\n                      {value === option.value && (\n                        <Check className=\"w-4 h-4 text-action-primary-bg flex-shrink-0 ml-2\" />\n                      )}\n                    </button>\n                  ))\n                ) : (\n                  <div className=\"px-3 py-4 text-sm text-text-muted text-center\">\n                    {tr('vibecontrols.shared.searchableSelect.noOptionsFound', 'No options found')}\n                  </div>\n                )}\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>,\n        document.body\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/shared/SelectionCheckbox.d.ts

@@ -0,0 +1,11 @@
+interface SelectionCheckboxProps {
+    checked: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    onChange: (checked: boolean) => void;
+    ariaLabel: string;
+    className?: string;
+}
+export declare function SelectionCheckbox({ checked, indeterminate, disabled, onChange, ariaLabel, className, }: SelectionCheckboxProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SelectionCheckbox.d.ts.map

package/dist/components/shared/SelectionCheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionCheckbox.d.ts","sourceRoot":"","sources":["../../../src/components/shared/SelectionCheckbox.tsx"],"names":[],"mappings":"AAGA,UAAU,sBAAsB;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,aAAqB,EACrB,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,SAAc,GACf,EAAE,sBAAsB,2CA6BxB"}

package/dist/components/shared/SelectionCheckbox.js

@@ -0,0 +1,25 @@
+import { useEffect as e, useRef as t } from "react";
+import { Check as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/shared/SelectionCheckbox.tsx
+function a({ checked: a, indeterminate: o = !1, disabled: s = !1, onChange: c, ariaLabel: l, className: u = "" }) {
+	let d = t(null);
+	return e(() => {
+		d.current && (d.current.indeterminate = o && !a);
+	}, [a, o]), /* @__PURE__ */ i("label", {
+		className: `inline-flex h-5 w-5 items-center justify-center rounded border border-border-default bg-bg-surface transition-colors ${a ? "border-action-primary-bg bg-action-primary-bg text-action-primary-text" : ""} ${s ? "cursor-not-allowed opacity-50" : "cursor-pointer"} ${u}`,
+		children: [/* @__PURE__ */ r("input", {
+			ref: d,
+			type: "checkbox",
+			checked: a,
+			disabled: s,
+			"aria-label": l,
+			onChange: (e) => c(e.target.checked),
+			className: "sr-only"
+		}), (a || o) && /* @__PURE__ */ r(n, { className: `h-3.5 w-3.5 ${o ? "opacity-70" : ""}` })]
+	});
+}
+//#endregion
+export { a as SelectionCheckbox };
+
+//# sourceMappingURL=SelectionCheckbox.js.map

package/dist/components/shared/SelectionCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionCheckbox.js","names":[],"sources":["../../../src/components/shared/SelectionCheckbox.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { Check } from 'lucide-react';\n\ninterface SelectionCheckboxProps {\n  checked: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  onChange: (checked: boolean) => void;\n  ariaLabel: string;\n  className?: string;\n}\n\nexport function SelectionCheckbox({\n  checked,\n  indeterminate = false,\n  disabled = false,\n  onChange,\n  ariaLabel,\n  className = '',\n}: SelectionCheckboxProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate && !checked;\n    }\n  }, [checked, indeterminate]);\n\n  return (\n    <label\n      className={`inline-flex h-5 w-5 items-center justify-center rounded border border-border-default bg-bg-surface transition-colors ${\n        checked ? 'border-action-primary-bg bg-action-primary-bg text-action-primary-text' : ''\n      } ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} ${className}`}\n    >\n      <input\n        ref={inputRef}\n        type=\"checkbox\"\n        checked={checked}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        onChange={(event) => onChange(event.target.checked)}\n        className=\"sr-only\"\n      />\n      {(checked || indeterminate) && (\n        <Check className={`h-3.5 w-3.5 ${indeterminate ? 'opacity-70' : ''}`} />\n      )}\n    </label>\n  );\n}\n"],"mappings":";;;;AAYA,SAAgB,EAAkB,EAChC,YACA,mBAAgB,IAChB,cAAW,IACX,aACA,cACA,eAAY,MACa;CACzB,IAAM,IAAW,EAAyB,KAAK;AAQ/C,QANA,QAAgB;AACd,EAAI,EAAS,YACX,EAAS,QAAQ,gBAAgB,KAAiB,CAAC;IAEpD,CAAC,GAAS,EAAc,CAAC,EAG1B,kBAAC,SAAD;EACE,WAAW,wHACT,IAAU,2EAA2E,GACtF,GAAG,IAAW,kCAAkC,iBAAiB,GAAG;YAHvE,CAKE,kBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACI;GACC;GACV,cAAY;GACZ,WAAW,MAAU,EAAS,EAAM,OAAO,QAAQ;GACnD,WAAU;GACV,CAAA,GACA,KAAW,MACX,kBAAC,GAAD,EAAO,WAAW,eAAe,IAAgB,eAAe,MAAQ,CAAA,CAEpE"}

package/dist/components/shared/SessionNotificationBanner.d.ts

@@ -0,0 +1,47 @@
+import { ConnectionStatus } from '../../hooks/useAgentEvents';
+
+/**
+ * Props for the connection status indicator
+ */
+interface ConnectionStatusIndicatorProps {
+    status: ConnectionStatus;
+    onReconnect: () => void;
+}
+/**
+ * Connection status indicator showing WebSocket state
+ */
+export declare function ConnectionStatusIndicator({ status, onReconnect }: ConnectionStatusIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Props for the session notifications container
+ */
+export interface SessionNotificationsProps {
+    /**
+     * Maximum number of notifications to display
+     */
+    maxVisible?: number;
+    /**
+     * Whether notifications should auto-dismiss (default: false - requires manual close)
+     */
+    autoDismiss?: boolean;
+    /**
+     * Auto-dismiss delay in milliseconds (only used if autoDismiss is true)
+     */
+    autoDismissDelay?: number;
+    /**
+     * Whether to show the connection status indicator
+     */
+    showConnectionStatus?: boolean;
+}
+/**
+ * Container component for session-contextual notifications
+ * Displays notifications above the session list with connection status
+ *
+ * IMPORTANT: This component maintains its OWN notification state separate from the global
+ * toast system. It subscribes to the same WebSocket events via the context but stores
+ * notifications independently. This allows:
+ * - Global toasts to auto-dismiss without affecting session banners
+ * - Session banners to persist until manually dismissed by the user
+ */
+export declare function SessionNotifications({ maxVisible, autoDismiss, autoDismissDelay, showConnectionStatus, }: SessionNotificationsProps): import("react/jsx-runtime").JSX.Element | null;
+export default SessionNotifications;
+//# sourceMappingURL=SessionNotificationBanner.d.ts.map

package/dist/components/shared/SessionNotificationBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionNotificationBanner.d.ts","sourceRoot":"","sources":["../../../src/components/shared/SessionNotificationBanner.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAsB,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAIvF;;GAEG;AACH,UAAU,8BAA8B;IACtC,MAAM,EAAE,gBAAgB,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,8BAA8B,kDAyChG;AA+ND;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAOD;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,UAAc,EACd,WAAmB,EACnB,gBAAuB,EACvB,oBAA2B,GAC5B,EAAE,yBAAyB,kDAsF3B;AAED,eAAe,oBAAoB,CAAC"}

package/dist/components/shared/SessionNotificationBanner.js

@@ -0,0 +1,231 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useAgentEventsContext as t } from "../../providers/AgentEventsProvider.js";
+import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { AlertCircle as o, Bell as s, CheckCircle as c, Info as l, Sparkles as u, Terminal as d, Wifi as f, WifiOff as p, X as m, Zap as h } from "lucide-react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/shared/SessionNotificationBanner.tsx
+function y({ status: t, onReconnect: n }) {
+	let r = e();
+	return t === "disconnected" ? null : /* @__PURE__ */ v("div", {
+		className: "flex items-center gap-2 px-3 py-1.5 rounded-lg bg-bg-secondary border border-border-primary text-sm",
+		children: [
+			t === "connected" && /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(f, { className: "w-4 h-4 text-status-success-text" }), /* @__PURE__ */ _("span", {
+				className: "text-status-success-text font-medium",
+				children: r("vibecontrols.shared.sessionNotificationBanner.live", "Live")
+			})] }),
+			t === "connecting" && /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(f, { className: "w-4 h-4 text-status-warning-text animate-pulse" }), /* @__PURE__ */ _("span", {
+				className: "text-status-warning-text",
+				children: r("vibecontrols.shared.sessionNotificationBanner.connecting", "Connecting...")
+			})] }),
+			t === "error" && /* @__PURE__ */ v(g, { children: [
+				/* @__PURE__ */ _(p, { className: "w-4 h-4 text-status-error-text" }),
+				/* @__PURE__ */ _("span", {
+					className: "text-status-error-text",
+					children: r("vibecontrols.shared.sessionNotificationBanner.disconnected", "Disconnected")
+				}),
+				/* @__PURE__ */ _("button", {
+					onClick: n,
+					className: "ml-2 px-2 py-0.5 text-xs rounded bg-accent-primary/10 text-accent-primary hover:bg-accent-primary/20 transition-colors",
+					children: r("vibecontrols.shared.sessionNotificationBanner.reconnect", "Reconnect")
+				})
+			] })
+		]
+	});
+}
+function b(e) {
+	let t = "w-5 h-5";
+	switch (e.toLowerCase()) {
+		case "opencode": return /* @__PURE__ */ _(d, { className: t });
+		case "claude-code":
+		case "claudecode": return /* @__PURE__ */ _(u, { className: t });
+		case "gemini-cli":
+		case "gemini": return /* @__PURE__ */ _(h, { className: t });
+		case "cursor": return /* @__PURE__ */ _(d, { className: t });
+		default: return /* @__PURE__ */ _(s, { className: t });
+	}
+}
+function x(e) {
+	let t = "w-4 h-4";
+	return e.includes("completed") || e.includes("success") || e.includes("idle") ? /* @__PURE__ */ _(c, { className: `${t} text-status-success-text` }) : e.includes("failed") || e.includes("error") ? /* @__PURE__ */ _(o, { className: `${t} text-status-error-text` }) : e.includes("question") || e.includes("permission") ? /* @__PURE__ */ _(o, { className: `${t} text-status-warning-text` }) : /* @__PURE__ */ _(l, { className: `${t} text-status-info-text` });
+}
+function S(e) {
+	return {
+		opencode: "OpenCode",
+		"opencode-vibe-webhook": "OpenCode",
+		"claude-code": "Claude Code",
+		claudecode: "Claude Code",
+		"gemini-cli": "Gemini CLI",
+		gemini: "Gemini CLI",
+		cursor: "Cursor"
+	}[e.toLowerCase()] || e;
+}
+function C(e) {
+	switch (e.toLowerCase()) {
+		case "opencode":
+		case "opencode-vibe-webhook": return {
+			bg: "bg-gradient-to-r from-blue-500/10 to-purple-500/10",
+			border: "border-blue-500/30",
+			text: "text-blue-400"
+		};
+		case "claude-code":
+		case "claudecode": return {
+			bg: "bg-gradient-to-r from-orange-500/10 to-amber-500/10",
+			border: "border-orange-500/30",
+			text: "text-orange-400"
+		};
+		case "gemini-cli":
+		case "gemini": return {
+			bg: "bg-gradient-to-r from-cyan-500/10 to-blue-500/10",
+			border: "border-cyan-500/30",
+			text: "text-cyan-400"
+		};
+		case "cursor": return {
+			bg: "bg-gradient-to-r from-green-500/10 to-emerald-500/10",
+			border: "border-green-500/30",
+			text: "text-green-400"
+		};
+		default: return {
+			bg: "bg-bg-secondary",
+			border: "border-border-primary",
+			text: "text-text-secondary"
+		};
+	}
+}
+function w(e) {
+	try {
+		return new Date(e).toLocaleTimeString([], {
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+	} catch {
+		return "";
+	}
+}
+function T({ notification: e, onDismiss: t, autoDismiss: n = !0, autoDismissDelay: i = 8e3 }) {
+	let [o, s] = a(!1), [c, l] = a(100), u = C(e.source);
+	return r(() => {
+		if (!n) return;
+		let r = Date.now(), a = setInterval(() => {
+			let e = Date.now() - r;
+			l(Math.max(0, 100 - e / i * 100));
+		}, 50), o = setTimeout(() => {
+			s(!0), setTimeout(() => t(e.id), 300);
+		}, i);
+		return () => {
+			clearInterval(a), clearTimeout(o);
+		};
+	}, [
+		n,
+		i,
+		e.id,
+		t
+	]), /* @__PURE__ */ v("div", {
+		className: `
+        relative flex items-start gap-3 p-4 rounded-lg border shadow-lg backdrop-blur-sm
+        ${u.bg} ${u.border}
+        transform transition-all duration-300 ease-out
+        ${o ? "opacity-0 -translate-y-2 scale-95" : "opacity-100 translate-y-0 scale-100"}
+        animate-slide-in-down
+      `,
+		role: "alert",
+		"data-testid": "session-notification-banner",
+		children: [
+			/* @__PURE__ */ _("div", {
+				className: `flex-shrink-0 p-2 rounded-lg bg-bg-tertiary/50 ${u.text}`,
+				children: b(e.source)
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "flex-1 min-w-0",
+				children: [
+					/* @__PURE__ */ v("div", {
+						className: "flex items-center gap-2 mb-1",
+						children: [
+							/* @__PURE__ */ _("span", {
+								className: `text-xs font-semibold uppercase tracking-wide ${u.text}`,
+								children: S(e.source)
+							}),
+							x(e.eventType),
+							/* @__PURE__ */ _("span", {
+								className: "text-xs text-text-muted",
+								children: w(e.timestamp)
+							})
+						]
+					}),
+					/* @__PURE__ */ _("p", {
+						className: "text-sm font-medium text-text-primary",
+						children: e.title
+					}),
+					/* @__PURE__ */ _("p", {
+						className: "text-xs text-text-secondary mt-0.5",
+						children: e.message
+					})
+				]
+			}),
+			/* @__PURE__ */ _("button", {
+				onClick: () => {
+					s(!0), setTimeout(() => t(e.id), 300);
+				},
+				className: "flex-shrink-0 p-1 rounded-md hover:bg-bg-tertiary/50 text-text-muted hover:text-text-secondary transition-colors",
+				"aria-label": "Dismiss notification",
+				children: /* @__PURE__ */ _(m, { className: "w-4 h-4" })
+			}),
+			n && /* @__PURE__ */ _("div", {
+				className: "absolute bottom-0 left-0 right-0 h-0.5 bg-bg-tertiary/30 overflow-hidden rounded-b-lg",
+				children: /* @__PURE__ */ _("div", {
+					className: `h-full ${u.text.replace("text-", "bg-")}/50 transition-all duration-50 ease-linear`,
+					style: { width: `${c}%` }
+				})
+			})
+		]
+	});
+}
+var E = 50;
+function D({ maxVisible: o = 3, autoDismiss: s = !1, autoDismissDelay: c = 8e3, showConnectionStatus: l = !0 }) {
+	let u = e(), { notifications: d, connectionStatus: f, reconnect: p, agentId: m } = t(), [h, g] = a([]), b = i(/* @__PURE__ */ new Set());
+	r(() => {
+		let e = [];
+		for (let t of d) b.current.has(t.id) || (b.current.add(t.id), e.push(t));
+		e.length > 0 && g((t) => [...e, ...t].slice(0, E));
+	}, [d]);
+	let x = n((e) => {
+		g((t) => t.filter((t) => t.id !== e));
+	}, []), S = h.slice(0, o), C = Math.max(0, h.length - o);
+	return !m && h.length === 0 ? null : /* @__PURE__ */ v("div", {
+		className: "mb-4 space-y-3",
+		"data-testid": "session-notifications-container",
+		children: [
+			l && m && /* @__PURE__ */ v("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ _("div", {
+					className: "text-xs text-text-muted",
+					children: u("vibecontrols.shared.sessionNotificationBanner.agentNotifications", "Agent Notifications")
+				}), /* @__PURE__ */ _(y, {
+					status: f,
+					onReconnect: p
+				})]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "space-y-2",
+				children: S.map((e) => /* @__PURE__ */ _(T, {
+					notification: e,
+					onDismiss: x,
+					autoDismiss: s,
+					autoDismissDelay: c
+				}, e.id))
+			}),
+			C > 0 && /* @__PURE__ */ v("div", {
+				className: "text-xs text-text-muted text-center py-1",
+				children: [
+					"+",
+					C,
+					" ",
+					u("vibecontrols.shared.sessionNotificationBanner.moreNotifications", "more notification(s)")
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { y as ConnectionStatusIndicator, D as default };
+
+//# sourceMappingURL=SessionNotificationBanner.js.map

package/dist/components/shared/SessionNotificationBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionNotificationBanner.js","names":[],"sources":["../../../src/components/shared/SessionNotificationBanner.tsx"],"sourcesContent":["/**\n * SessionNotificationBanner\n *\n * Displays AI tool notifications contextually within the Sessions page,\n * positioned above the session list for immediate visibility.\n *\n * Features:\n * - Source-specific styling (OpenCode, Claude Code, Gemini, Cursor)\n * - Event-type icons (success, error, info)\n * - Separate notification state from global toasts (no auto-dismiss interference)\n * - Manual dismiss button\n * - Smooth enter/exit animations\n *\n * Architecture:\n * - SessionNotifications maintains its OWN notification state separate from the global toast system\n * - It subscribes to the same WebSocket events but stores notifications independently\n * - This allows global toasts to auto-dismiss without affecting session banners\n */\nimport { useEffect, useState, useCallback, useRef } from 'react';\nimport {\n  Bell,\n  CheckCircle,\n  AlertCircle,\n  Info,\n  X,\n  Sparkles,\n  Terminal,\n  Zap,\n  Wifi,\n  WifiOff,\n} from 'lucide-react';\n\nimport type { AiToolNotification, ConnectionStatus } from '../../hooks/useAgentEvents';\nimport { useAgentEventsContext } from '../../providers/AgentEventsProvider';\nimport { useTr } from '../../shared/hooks/useTr';\n\n/**\n * Props for the connection status indicator\n */\ninterface ConnectionStatusIndicatorProps {\n  status: ConnectionStatus;\n  onReconnect: () => void;\n}\n\n/**\n * Connection status indicator showing WebSocket state\n */\nexport function ConnectionStatusIndicator({ status, onReconnect }: ConnectionStatusIndicatorProps) {\n  const tr = useTr();\n\n  if (status === 'disconnected') {\n    return null;\n  }\n\n  return (\n    <div className=\"flex items-center gap-2 px-3 py-1.5 rounded-lg bg-bg-secondary border border-border-primary text-sm\">\n      {status === 'connected' && (\n        <>\n          <Wifi className=\"w-4 h-4 text-status-success-text\" />\n          <span className=\"text-status-success-text font-medium\">\n            {tr('vibecontrols.shared.sessionNotificationBanner.live', 'Live')}\n          </span>\n        </>\n      )}\n      {status === 'connecting' && (\n        <>\n          <Wifi className=\"w-4 h-4 text-status-warning-text animate-pulse\" />\n          <span className=\"text-status-warning-text\">\n            {tr('vibecontrols.shared.sessionNotificationBanner.connecting', 'Connecting...')}\n          </span>\n        </>\n      )}\n      {status === 'error' && (\n        <>\n          <WifiOff className=\"w-4 h-4 text-status-error-text\" />\n          <span className=\"text-status-error-text\">\n            {tr('vibecontrols.shared.sessionNotificationBanner.disconnected', 'Disconnected')}\n          </span>\n          <button\n            onClick={onReconnect}\n            className=\"ml-2 px-2 py-0.5 text-xs rounded bg-accent-primary/10 text-accent-primary hover:bg-accent-primary/20 transition-colors\"\n          >\n            {tr('vibecontrols.shared.sessionNotificationBanner.reconnect', 'Reconnect')}\n          </button>\n        </>\n      )}\n    </div>\n  );\n}\n\n/**\n * Props for a single notification banner\n */\ninterface NotificationBannerProps {\n  notification: AiToolNotification;\n  onDismiss: (id: string) => void;\n  autoDismiss?: boolean;\n  autoDismissDelay?: number;\n}\n\n/**\n * Get the icon for a source tool\n */\nfunction getSourceIcon(source: string) {\n  const iconClass = 'w-5 h-5';\n\n  switch (source.toLowerCase()) {\n    case 'opencode':\n      return <Terminal className={iconClass} />;\n    case 'claude-code':\n    case 'claudecode':\n      return <Sparkles className={iconClass} />;\n    case 'gemini-cli':\n    case 'gemini':\n      return <Zap className={iconClass} />;\n    case 'cursor':\n      return <Terminal className={iconClass} />;\n    default:\n      return <Bell className={iconClass} />;\n  }\n}\n\n/**\n * Get the icon for an event type\n */\nfunction getEventIcon(eventType: string) {\n  const iconClass = 'w-4 h-4';\n\n  if (\n    eventType.includes('completed') ||\n    eventType.includes('success') ||\n    eventType.includes('idle')\n  ) {\n    return <CheckCircle className={`${iconClass} text-status-success-text`} />;\n  }\n  if (eventType.includes('failed') || eventType.includes('error')) {\n    return <AlertCircle className={`${iconClass} text-status-error-text`} />;\n  }\n  if (eventType.includes('question') || eventType.includes('permission')) {\n    return <AlertCircle className={`${iconClass} text-status-warning-text`} />;\n  }\n  return <Info className={`${iconClass} text-status-info-text`} />;\n}\n\n/**\n * Get display name for a source tool\n */\nfunction getSourceDisplayName(source: string): string {\n  const names: Record<string, string> = {\n    opencode: 'OpenCode',\n    'opencode-vibe-webhook': 'OpenCode',\n    'claude-code': 'Claude Code',\n    claudecode: 'Claude Code',\n    'gemini-cli': 'Gemini CLI',\n    gemini: 'Gemini CLI',\n    cursor: 'Cursor',\n  };\n  return names[source.toLowerCase()] || source;\n}\n\n/**\n * Get background color based on source\n */\nfunction getSourceStyles(source: string): { bg: string; border: string; text: string } {\n  switch (source.toLowerCase()) {\n    case 'opencode':\n    case 'opencode-vibe-webhook':\n      return {\n        bg: 'bg-gradient-to-r from-blue-500/10 to-purple-500/10',\n        border: 'border-blue-500/30',\n        text: 'text-blue-400',\n      };\n    case 'claude-code':\n    case 'claudecode':\n      return {\n        bg: 'bg-gradient-to-r from-orange-500/10 to-amber-500/10',\n        border: 'border-orange-500/30',\n        text: 'text-orange-400',\n      };\n    case 'gemini-cli':\n    case 'gemini':\n      return {\n        bg: 'bg-gradient-to-r from-cyan-500/10 to-blue-500/10',\n        border: 'border-cyan-500/30',\n        text: 'text-cyan-400',\n      };\n    case 'cursor':\n      return {\n        bg: 'bg-gradient-to-r from-green-500/10 to-emerald-500/10',\n        border: 'border-green-500/30',\n        text: 'text-green-400',\n      };\n    default:\n      return {\n        bg: 'bg-bg-secondary',\n        border: 'border-border-primary',\n        text: 'text-text-secondary',\n      };\n  }\n}\n\n/**\n * Format timestamp for display\n */\nfunction formatTimestamp(timestamp: string): string {\n  try {\n    const date = new Date(timestamp);\n    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n  } catch {\n    return '';\n  }\n}\n\n/**\n * Single notification banner\n */\nfunction NotificationBanner({\n  notification,\n  onDismiss,\n  autoDismiss = true,\n  autoDismissDelay = 8000,\n}: NotificationBannerProps) {\n  const [isExiting, setIsExiting] = useState(false);\n  const [progress, setProgress] = useState(100);\n  const styles = getSourceStyles(notification.source);\n\n  useEffect(() => {\n    if (!autoDismiss) return;\n\n    // Progress countdown\n    const startTime = Date.now();\n    const interval = setInterval(() => {\n      const elapsed = Date.now() - startTime;\n      const remaining = Math.max(0, 100 - (elapsed / autoDismissDelay) * 100);\n      setProgress(remaining);\n    }, 50);\n\n    // Auto-dismiss timer\n    const timer = setTimeout(() => {\n      setIsExiting(true);\n      setTimeout(() => onDismiss(notification.id), 300);\n    }, autoDismissDelay);\n\n    return () => {\n      clearInterval(interval);\n      clearTimeout(timer);\n    };\n  }, [autoDismiss, autoDismissDelay, notification.id, onDismiss]);\n\n  const handleDismiss = () => {\n    setIsExiting(true);\n    setTimeout(() => onDismiss(notification.id), 300);\n  };\n\n  return (\n    <div\n      className={`\n        relative flex items-start gap-3 p-4 rounded-lg border shadow-lg backdrop-blur-sm\n        ${styles.bg} ${styles.border}\n        transform transition-all duration-300 ease-out\n        ${isExiting ? 'opacity-0 -translate-y-2 scale-95' : 'opacity-100 translate-y-0 scale-100'}\n        animate-slide-in-down\n      `}\n      role=\"alert\"\n      data-testid=\"session-notification-banner\"\n    >\n      {/* Source icon */}\n      <div className={`flex-shrink-0 p-2 rounded-lg bg-bg-tertiary/50 ${styles.text}`}>\n        {getSourceIcon(notification.source)}\n      </div>\n\n      {/* Content */}\n      <div className=\"flex-1 min-w-0\">\n        {/* Header */}\n        <div className=\"flex items-center gap-2 mb-1\">\n          <span className={`text-xs font-semibold uppercase tracking-wide ${styles.text}`}>\n            {getSourceDisplayName(notification.source)}\n          </span>\n          {getEventIcon(notification.eventType)}\n          <span className=\"text-xs text-text-muted\">{formatTimestamp(notification.timestamp)}</span>\n        </div>\n\n        {/* Title */}\n        <p className=\"text-sm font-medium text-text-primary\">{notification.title}</p>\n\n        {/* Message */}\n        <p className=\"text-xs text-text-secondary mt-0.5\">{notification.message}</p>\n      </div>\n\n      {/* Dismiss button */}\n      <button\n        onClick={handleDismiss}\n        className=\"flex-shrink-0 p-1 rounded-md hover:bg-bg-tertiary/50 text-text-muted hover:text-text-secondary transition-colors\"\n        aria-label=\"Dismiss notification\"\n      >\n        <X className=\"w-4 h-4\" />\n      </button>\n\n      {/* Progress bar for auto-dismiss */}\n      {autoDismiss && (\n        <div className=\"absolute bottom-0 left-0 right-0 h-0.5 bg-bg-tertiary/30 overflow-hidden rounded-b-lg\">\n          <div\n            className={`h-full ${styles.text.replace('text-', 'bg-')}/50 transition-all duration-50 ease-linear`}\n            style={{ width: `${progress}%` }}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Props for the session notifications container\n */\nexport interface SessionNotificationsProps {\n  /**\n   * Maximum number of notifications to display\n   */\n  maxVisible?: number;\n\n  /**\n   * Whether notifications should auto-dismiss (default: false - requires manual close)\n   */\n  autoDismiss?: boolean;\n\n  /**\n   * Auto-dismiss delay in milliseconds (only used if autoDismiss is true)\n   */\n  autoDismissDelay?: number;\n\n  /**\n   * Whether to show the connection status indicator\n   */\n  showConnectionStatus?: boolean;\n}\n\n/**\n * Maximum notifications to keep in session banner state\n */\nconst MAX_SESSION_NOTIFICATIONS = 50;\n\n/**\n * Container component for session-contextual notifications\n * Displays notifications above the session list with connection status\n *\n * IMPORTANT: This component maintains its OWN notification state separate from the global\n * toast system. It subscribes to the same WebSocket events via the context but stores\n * notifications independently. This allows:\n * - Global toasts to auto-dismiss without affecting session banners\n * - Session banners to persist until manually dismissed by the user\n */\nexport function SessionNotifications({\n  maxVisible = 3,\n  autoDismiss = false,\n  autoDismissDelay = 8000,\n  showConnectionStatus = true,\n}: SessionNotificationsProps) {\n  const tr = useTr();\n  const {\n    notifications: globalNotifications,\n    connectionStatus,\n    reconnect,\n    agentId,\n  } = useAgentEventsContext();\n\n  // Maintain separate notification state for session banners\n  const [sessionNotifications, setSessionNotifications] = useState<AiToolNotification[]>([]);\n  const seenIdsRef = useRef<Set<string>>(new Set());\n\n  // Sync new notifications from global state to session state\n  // We only ADD new notifications, never remove them (except via manual dismiss)\n  useEffect(() => {\n    const newNotifications: AiToolNotification[] = [];\n\n    for (const notification of globalNotifications) {\n      if (!seenIdsRef.current.has(notification.id)) {\n        seenIdsRef.current.add(notification.id);\n        newNotifications.push(notification);\n      }\n    }\n\n    if (newNotifications.length > 0) {\n      setSessionNotifications((prev) => {\n        const updated = [...newNotifications, ...prev];\n        return updated.slice(0, MAX_SESSION_NOTIFICATIONS);\n      });\n    }\n  }, [globalNotifications]);\n\n  // Handle manual dismiss - only affects session banner state\n  const handleDismiss = useCallback((id: string) => {\n    setSessionNotifications((prev) => prev.filter((n) => n.id !== id));\n  }, []);\n\n  const visibleNotifications = sessionNotifications.slice(0, maxVisible);\n  const hiddenCount = Math.max(0, sessionNotifications.length - maxVisible);\n\n  // Don't render anything if no agent is configured\n  if (!agentId && sessionNotifications.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"mb-4 space-y-3\" data-testid=\"session-notifications-container\">\n      {/* Connection status indicator */}\n      {showConnectionStatus && agentId && (\n        <div className=\"flex items-center justify-between\">\n          <div className=\"text-xs text-text-muted\">\n            {tr(\n              'vibecontrols.shared.sessionNotificationBanner.agentNotifications',\n              'Agent Notifications'\n            )}\n          </div>\n          <ConnectionStatusIndicator status={connectionStatus} onReconnect={reconnect} />\n        </div>\n      )}\n\n      {/* Notification banners */}\n      <div className=\"space-y-2\">\n        {visibleNotifications.map((notification) => (\n          <NotificationBanner\n            key={notification.id}\n            notification={notification}\n            onDismiss={handleDismiss}\n            autoDismiss={autoDismiss}\n            autoDismissDelay={autoDismissDelay}\n          />\n        ))}\n      </div>\n\n      {/* Hidden count indicator */}\n      {hiddenCount > 0 && (\n        <div className=\"text-xs text-text-muted text-center py-1\">\n          +{hiddenCount}{' '}\n          {tr(\n            'vibecontrols.shared.sessionNotificationBanner.moreNotifications',\n            'more notification(s)'\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default SessionNotifications;\n"],"mappings":"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"}

package/dist/components/shared/StatCard.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+interface StatCardProps {
+    title: string;
+    value: string | number;
+    subtitle?: string;
+    icon?: ReactNode;
+    trend?: {
+        value: number;
+        label?: string;
+    };
+    variant?: 'default' | 'success' | 'warning' | 'error';
+    onClick?: () => void;
+}
+export declare function StatCard({ title, value, subtitle, icon, trend, variant, onClick, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StatCard.d.ts.map