@burdenoff/microfe-vibecontrols 2026.511.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDropdown.js","names":[],"sources":["../../../src/components/shared/FilterDropdown.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from 'react';\nimport { ChevronDown, Check } from 'lucide-react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface FilterOption {\n  value: string;\n  label: string;\n}\n\ninterface FilterDropdownProps {\n  label: string;\n  /**\n   * Options to display after the hardcoded \"All\" button.\n   * Any option with `value === 'all'` is automatically skipped — the component\n   * renders its own \"All\" entry at the top, so callers may include or omit an\n   * `{ value: 'all' }` entry without causing a duplicate.\n   */\n  options: FilterOption[];\n  value: string | null;\n  onChange: (value: string) => void;\n  className?: string;\n}\n\nexport function FilterDropdown({\n  label,\n  options,\n  value,\n  onChange,\n  className = '',\n}: FilterDropdownProps) {\n  const tr = useTr();\n  const [isOpen, setIsOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    }\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  const selectedOption = options.find((opt) => opt.value === value);\n\n  return (\n    <div className={`relative ${className}`} ref={dropdownRef}>\n      <button\n        onClick={() => setIsOpen(!isOpen)}\n        className=\"inline-flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-3 py-1.5 sm:py-2 text-xs sm:text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary hover:bg-bg-elevated transition-colors whitespace-nowrap flex-shrink-0\"\n      >\n        <span className=\"text-text-secondary\">{label}:</span>\n        <span className=\"font-medium max-w-[80px] sm:max-w-none truncate\">\n          {selectedOption?.label || tr('vibecontrols.shared.filterDropdown.all', 'All')}\n        </span>\n        <ChevronDown\n          className={`w-3.5 h-3.5 sm:w-4 sm:h-4 transition-transform flex-shrink-0 ${isOpen ? 'rotate-180' : ''}`}\n        />\n      </button>\n\n      <AnimatePresence>\n        {isOpen && (\n          <motion.div\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=\"absolute z-50 mt-1 w-48 bg-bg-surface border border-border-default rounded-md shadow-lg\"\n          >\n            <div className=\"py-1\">\n              <button\n                onClick={() => {\n                  onChange('all');\n                  setIsOpen(false);\n                }}\n                className=\"flex items-center justify-between w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken transition-colors\"\n              >\n                {tr('vibecontrols.shared.filterDropdown.all', 'All')}\n                {(value === null || value === 'all') && (\n                  <Check className=\"w-4 h-4 text-action-primary-bg\" />\n                )}\n              </button>\n              {options\n                .filter((opt) => opt.value !== 'all')\n                .map((option) => (\n                  <button\n                    key={option.value}\n                    onClick={() => {\n                      onChange(option.value);\n                      setIsOpen(false);\n                    }}\n                    className=\"flex items-center justify-between w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken transition-colors\"\n                  >\n                    {option.label}\n                    {value === option.value && <Check className=\"w-4 h-4 text-action-primary-bg\" />}\n                  </button>\n                ))}\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAwBA,SAAgB,EAAe,EAC7B,UACA,YACA,UACA,aACA,eAAY,MACU;CACtB,IAAM,IAAK,GAAO,EACZ,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,IAAc,EAAuB,KAAK;AAEhD,SAAgB;EACd,SAAS,EAAmB,GAAmB;AAC7C,GAAI,EAAY,WAAW,CAAC,EAAY,QAAQ,SAAS,EAAM,OAAe,IAC5E,EAAU,GAAM;;AAIpB,SADA,SAAS,iBAAiB,aAAa,EAAmB,QAC7C,SAAS,oBAAoB,aAAa,EAAmB;IACzE,EAAE,CAAC;CAEN,IAAM,IAAiB,EAAQ,MAAM,MAAQ,EAAI,UAAU,EAAM;AAEjE,QACE,kBAAC,OAAD;EAAK,WAAW,YAAY;EAAa,KAAK;YAA9C,CACE,kBAAC,UAAD;GACE,eAAe,EAAU,CAAC,EAAO;GACjC,WAAU;aAFZ;IAIE,kBAAC,QAAD;KAAM,WAAU;eAAhB,CAAuC,GAAM,IAAQ;;IACrD,kBAAC,QAAD;KAAM,WAAU;eACb,GAAgB,SAAS,EAAG,0CAA0C,MAAM;KACxE,CAAA;IACP,kBAAC,GAAD,EACE,WAAW,gEAAgE,IAAS,eAAe,MACnG,CAAA;IACK;MAET,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,EAAO,KAAR;GACE,SAAS;IAAE,SAAS;IAAG,GAAG;IAAI,OAAO;IAAM;GAC3C,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG,OAAO;IAAG;GACvC,MAAM;IAAE,SAAS;IAAG,GAAG;IAAI,OAAO;IAAM;GACxC,YAAY;IAAE,UAAU;IAAM,MAAM;KAAC;KAAK;KAAG;KAAK;KAAE;IAAE;GACtD,WAAU;aAEV,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,UAAD;KACE,eAAe;AAEb,MADA,EAAS,MAAM,EACf,EAAU,GAAM;;KAElB,WAAU;eALZ,CAOG,EAAG,0CAA0C,MAAM,GAClD,MAAU,QAAQ,MAAU,UAC5B,kBAAC,GAAD,EAAO,WAAU,kCAAmC,CAAA,CAE/C;QACR,EACE,QAAQ,MAAQ,EAAI,UAAU,MAAM,CACpC,KAAK,MACJ,kBAAC,UAAD;KAEE,eAAe;AAEb,MADA,EAAS,EAAO,MAAM,EACtB,EAAU,GAAM;;KAElB,WAAU;eANZ,CAQG,EAAO,OACP,MAAU,EAAO,SAAS,kBAAC,GAAD,EAAO,WAAU,kCAAmC,CAAA,CACxE;OATF,EAAO,MASL,CACT,CACA;;GACK,CAAA,EAEC,CAAA,CACd"}

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

@@ -0,0 +1,27 @@
+interface GetHelpButtonProps {
+    /** The prompt to auto-send to the assistant when clicked. */
+    prompt: string;
+    /** Optional label override. Defaults to "Get Help". */
+    label?: string;
+    /** Visual variant. `ghost` (default) is a subtle outlined button; `link` is text-only. */
+    variant?: 'ghost' | 'link';
+    /** Additional CSS class names. */
+    className?: string;
+}
+/**
+ * Shared "Get Help" button. Placed next to "Add X" / "Create X" buttons in
+ * empty states across microfe-vibecontrols so users can ask the assistant
+ * to explain the concept without leaving the current page.
+ *
+ * Clicking the button:
+ *   1. Switches the assistant store to `general` mode
+ *   2. Queues the provided prompt via `submitPrompt`
+ *   3. Dispatches `vc:toggle-ai-assistant` with `detail.open=true` so the
+ *      shell panel opens (not toggles)
+ *
+ * The AssistantChatArea picks up the queued prompt on next render and
+ * auto-sends it.
+ */
+export declare function GetHelpButton({ prompt, label, variant, className, }: GetHelpButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=GetHelpButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GetHelpButton.d.ts","sourceRoot":"","sources":["../../../src/components/shared/GetHelpButton.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,6DAA6D;IAC7D,MAAM,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,OAAiB,EACjB,SAAc,GACf,EAAE,kBAAkB,2CAqBpB"}

package/dist/components/shared/GetHelpButton.js

@@ -0,0 +1,19 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useOpenAssistantHelp as t } from "../../hooks/useOpenAssistantHelp.js";
+import { HelpCircle as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/shared/GetHelpButton.tsx
+function a({ prompt: a, label: o, variant: s = "ghost", className: c = "" }) {
+	let l = e(), u = o ?? l("vibecontrols.shared.getHelpButton.label", "Get Help"), d = t();
+	return /* @__PURE__ */ i("button", {
+		type: "button",
+		onClick: () => d(a),
+		className: `${s === "ghost" ? "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm border border-border-default text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors" : "inline-flex items-center gap-1.5 text-sm text-accent-purple hover:underline"} ${c}`.trim(),
+		title: l("vibecontrols.shared.getHelpButton.tooltip", "Ask the assistant to explain"),
+		children: [/* @__PURE__ */ r(n, { className: "w-4 h-4" }), u]
+	});
+}
+//#endregion
+export { a as GetHelpButton };
+
+//# sourceMappingURL=GetHelpButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GetHelpButton.js","names":[],"sources":["../../../src/components/shared/GetHelpButton.tsx"],"sourcesContent":["import { HelpCircle } from 'lucide-react';\nimport { useOpenAssistantHelp } from '@/hooks/useOpenAssistantHelp';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface GetHelpButtonProps {\n  /** The prompt to auto-send to the assistant when clicked. */\n  prompt: string;\n  /** Optional label override. Defaults to \"Get Help\". */\n  label?: string;\n  /** Visual variant. `ghost` (default) is a subtle outlined button; `link` is text-only. */\n  variant?: 'ghost' | 'link';\n  /** Additional CSS class names. */\n  className?: string;\n}\n\n/**\n * Shared \"Get Help\" button. Placed next to \"Add X\" / \"Create X\" buttons in\n * empty states across microfe-vibecontrols so users can ask the assistant\n * to explain the concept without leaving the current page.\n *\n * Clicking the button:\n *   1. Switches the assistant store to `general` mode\n *   2. Queues the provided prompt via `submitPrompt`\n *   3. Dispatches `vc:toggle-ai-assistant` with `detail.open=true` so the\n *      shell panel opens (not toggles)\n *\n * The AssistantChatArea picks up the queued prompt on next render and\n * auto-sends it.\n */\nexport function GetHelpButton({\n  prompt,\n  label,\n  variant = 'ghost',\n  className = '',\n}: GetHelpButtonProps) {\n  const tr = useTr();\n  const resolvedLabel = label ?? tr('vibecontrols.shared.getHelpButton.label', 'Get Help');\n  const openHelp = useOpenAssistantHelp();\n\n  const baseClass =\n    variant === 'ghost'\n      ? 'inline-flex items-center gap-1.5 px-3 py-1.5 text-sm border border-border-default text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors'\n      : 'inline-flex items-center gap-1.5 text-sm text-accent-purple hover:underline';\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => openHelp(prompt)}\n      className={`${baseClass} ${className}`.trim()}\n      title={tr('vibecontrols.shared.getHelpButton.tooltip', 'Ask the assistant to explain')}\n    >\n      <HelpCircle className=\"w-4 h-4\" />\n      {resolvedLabel}\n    </button>\n  );\n}\n"],"mappings":";;;;;AA6BA,SAAgB,EAAc,EAC5B,WACA,UACA,aAAU,SACV,eAAY,MACS;CACrB,IAAM,IAAK,GAAO,EACZ,IAAgB,KAAS,EAAG,2CAA2C,WAAW,EAClF,IAAW,GAAsB;AAOvC,QACE,kBAAC,UAAD;EACE,MAAK;EACL,eAAe,EAAS,EAAO;EAC/B,WAAW,GARb,MAAY,UACR,kLACA,8EAMsB,GAAG,IAAY,MAAM;EAC7C,OAAO,EAAG,6CAA6C,+BAA+B;YAJxF,CAME,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA,EACjC,EACM"}

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

@@ -0,0 +1,18 @@
+export interface InstallTabsProps {
+    /** Optional pinned agent version to embed in instructions */
+    pinnedAgentVersion?: string;
+    /** Optional compact layout when rendered inside a narrow callout card */
+    compact?: boolean;
+}
+/**
+ * Unified install instructions widget used by the Getting Started page and
+ * the Agents "Get started" callout. Two top tabs — Curl (preferred) and
+ * NPM — each with Linux/macOS/Windows sub-tabs, so the user always sees a
+ * single command they can copy.
+ *
+ * The curl install script is served by the app shell at `/install` (bash)
+ * and `/install.ps1` (PowerShell). The only prerequisite is bun, which the
+ * script installs automatically at a pinned version.
+ */
+export declare function InstallTabs({ pinnedAgentVersion, compact }: InstallTabsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InstallTabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InstallTabs.d.ts","sourceRoot":"","sources":["../../../src/components/shared/InstallTabs.tsx"],"names":[],"mappings":"AA4DA,MAAM,WAAW,gBAAgB;IAC/B,6DAA6D;IAC7D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAAE,kBAAkB,EAAE,OAAe,EAAE,EAAE,gBAAgB,2CA4FpF"}

package/dist/components/shared/InstallTabs.js

@@ -0,0 +1,110 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useCallback as t, useMemo as n, useState as r } from "react";
+import { Check as i, Copy as a, Terminal as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Tabs as l } from "@burdenoff/fe-libs/chrome";
+//#region src/components/shared/InstallTabs.tsx
+function u() {
+	return typeof window > "u" ? "vibecontrols.local.burdenoff.com" : window.__VIBECONTROLS_HOST__ ?? window.location.host;
+}
+function d({ command: n }) {
+	let l = e(), [u, d] = r(!1), f = t(async () => {
+		try {
+			await navigator.clipboard.writeText(n);
+		} catch {
+			let e = document.createElement("textarea");
+			e.value = n, document.body.appendChild(e), e.select(), document.execCommand("copy"), document.body.removeChild(e);
+		}
+		d(!0), setTimeout(() => d(!1), 2e3);
+	}, [n]);
+	return /* @__PURE__ */ c("div", {
+		role: "button",
+		tabIndex: 0,
+		onClick: f,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && f();
+		},
+		className: "flex items-center gap-2 px-3 py-2.5 bg-bg-sunken border border-border-default rounded-md cursor-pointer hover:bg-bg-elevated transition-colors group",
+		title: l("vibecontrols.shared.installTabs.clickToCopy", "Click to copy"),
+		children: [
+			/* @__PURE__ */ s(o, { className: "w-4 h-4 text-text-muted flex-shrink-0" }),
+			/* @__PURE__ */ s("code", {
+				className: "text-sm font-mono text-text-primary flex-1 break-all",
+				children: n
+			}),
+			u ? /* @__PURE__ */ s(i, { className: "w-4 h-4 text-status-success-text flex-shrink-0" }) : /* @__PURE__ */ s(a, { className: "w-4 h-4 text-text-muted group-hover:text-text-secondary flex-shrink-0" })
+		]
+	});
+}
+function f({ pinnedAgentVersion: t, compact: i = !1 }) {
+	let a = e(), o = u(), [f, p] = r("curl"), [m, h] = r("linux"), g = n(() => [{
+		id: "curl",
+		label: a("vibecontrols.shared.installTabs.curlRecommended", "Curl (Recommended)")
+	}, {
+		id: "npm",
+		label: a("vibecontrols.shared.installTabs.npm", "NPM")
+	}], [a]), _ = n(() => [
+		{
+			id: "linux",
+			label: a("vibecontrols.shared.installTabs.linux", "Linux")
+		},
+		{
+			id: "macos",
+			label: a("vibecontrols.shared.installTabs.macos", "macOS")
+		},
+		{
+			id: "windows",
+			label: a("vibecontrols.shared.installTabs.windows", "Windows")
+		}
+	], [a]), v = n(() => {
+		let e = t ? `@${t}` : "@latest";
+		return f === "curl" ? m === "windows" ? `powershell -c "irm ${o}/install.ps1 | iex"` : `curl -fsSL https://${o}/install | bash` : `npm install -g @vibecontrols/agent${e}`;
+	}, [
+		f,
+		m,
+		o,
+		t
+	]), y = f === "curl" ? m === "windows" ? `https://${o}/install.ps1` : `https://${o}/install` : null;
+	return /* @__PURE__ */ c("div", {
+		className: i ? "space-y-3" : "space-y-4",
+		children: [
+			/* @__PURE__ */ s(l, {
+				items: g,
+				activeTabId: f,
+				onTabChange: (e) => p(e),
+				variant: "underline"
+			}),
+			/* @__PURE__ */ s(l, {
+				items: _,
+				activeTabId: m,
+				onTabChange: (e) => h(e),
+				variant: "pills",
+				size: "sm"
+			}),
+			/* @__PURE__ */ s(d, { command: v }),
+			f === "curl" && y && /* @__PURE__ */ c("p", {
+				className: "text-xs text-text-muted",
+				children: [
+					a("vibecontrols.shared.installTabs.curlDescription", "The script installs bun (pinned, v1.3.10) then installs @vibecontrols/agent and core plugins. Only bun is required on your machine — no other prerequisites."),
+					" ",
+					/* @__PURE__ */ s("a", {
+						href: y,
+						target: "_blank",
+						rel: "noreferrer",
+						className: "text-action-primary-text hover:underline",
+						children: a("vibecontrols.shared.installTabs.viewInstallScript", "View the install script")
+					}),
+					"."
+				]
+			}),
+			f === "npm" && /* @__PURE__ */ s("p", {
+				className: "text-xs text-text-muted",
+				children: a("vibecontrols.shared.installTabs.npmDescription", "Requires Node.js >= 18. You can also pass @<version> to pin a specific release.")
+			})
+		]
+	});
+}
+//#endregion
+export { f as InstallTabs };
+
+//# sourceMappingURL=InstallTabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InstallTabs.js","names":[],"sources":["../../../src/components/shared/InstallTabs.tsx"],"sourcesContent":["import { useMemo, useState, useCallback } from 'react';\nimport { Copy, Check, Terminal } from 'lucide-react';\nimport { Tabs, type TabItem } from '@burdenoff/fe-libs/chrome';\nimport { useTr } from '../../shared/hooks/useTr';\n\ntype InstallMethod = 'curl' | 'npm';\ntype InstallOs = 'linux' | 'macos' | 'windows';\n\n/**\n * Resolves the current host for the curl install URL so the instructions\n * always match the environment the user is looking at (local / alpha / prod).\n * The `VIBECONTROLS_HOST` global can be set by the shell if it needs to\n * override (e.g. for previews), otherwise we read from `window.location`.\n */\nfunction resolveHost(): string {\n  if (typeof window === 'undefined') return 'vibecontrols.local.burdenoff.com';\n  const injected = (window as unknown as { __VIBECONTROLS_HOST__?: string }).__VIBECONTROLS_HOST__;\n  return injected ?? window.location.host;\n}\n\nfunction CopyableCommand({ command }: { command: string }) {\n  const tr = useTr();\n  const [copied, setCopied] = useState(false);\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(command);\n    } catch {\n      const el = document.createElement('textarea');\n      el.value = command;\n      document.body.appendChild(el);\n      el.select();\n      document.execCommand('copy');\n      document.body.removeChild(el);\n    }\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  }, [command]);\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleCopy}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') handleCopy();\n      }}\n      className=\"flex items-center gap-2 px-3 py-2.5 bg-bg-sunken border border-border-default rounded-md cursor-pointer hover:bg-bg-elevated transition-colors group\"\n      title={tr('vibecontrols.shared.installTabs.clickToCopy', 'Click to copy')}\n    >\n      <Terminal className=\"w-4 h-4 text-text-muted flex-shrink-0\" />\n      <code className=\"text-sm font-mono text-text-primary flex-1 break-all\">{command}</code>\n      {copied ? (\n        <Check className=\"w-4 h-4 text-status-success-text flex-shrink-0\" />\n      ) : (\n        <Copy className=\"w-4 h-4 text-text-muted group-hover:text-text-secondary flex-shrink-0\" />\n      )}\n    </div>\n  );\n}\n\nexport interface InstallTabsProps {\n  /** Optional pinned agent version to embed in instructions */\n  pinnedAgentVersion?: string;\n  /** Optional compact layout when rendered inside a narrow callout card */\n  compact?: boolean;\n}\n\n/**\n * Unified install instructions widget used by the Getting Started page and\n * the Agents \"Get started\" callout. Two top tabs — Curl (preferred) and\n * NPM — each with Linux/macOS/Windows sub-tabs, so the user always sees a\n * single command they can copy.\n *\n * The curl install script is served by the app shell at `/install` (bash)\n * and `/install.ps1` (PowerShell). The only prerequisite is bun, which the\n * script installs automatically at a pinned version.\n */\nexport function InstallTabs({ pinnedAgentVersion, compact = false }: InstallTabsProps) {\n  const tr = useTr();\n  const host = resolveHost();\n  const [method, setMethod] = useState<InstallMethod>('curl');\n  const [os, setOs] = useState<InstallOs>('linux');\n\n  const methodTabs: TabItem[] = useMemo(\n    () => [\n      {\n        id: 'curl',\n        label: tr('vibecontrols.shared.installTabs.curlRecommended', 'Curl (Recommended)'),\n      },\n      { id: 'npm', label: tr('vibecontrols.shared.installTabs.npm', 'NPM') },\n    ],\n    [tr]\n  );\n\n  const osTabs: TabItem[] = useMemo(\n    () => [\n      { id: 'linux', label: tr('vibecontrols.shared.installTabs.linux', 'Linux') },\n      { id: 'macos', label: tr('vibecontrols.shared.installTabs.macos', 'macOS') },\n      { id: 'windows', label: tr('vibecontrols.shared.installTabs.windows', 'Windows') },\n    ],\n    [tr]\n  );\n\n  // Resolve the actual command string per (method, os).\n  const command = useMemo(() => {\n    const agentSuffix = pinnedAgentVersion ? `@${pinnedAgentVersion}` : '@latest';\n    if (method === 'curl') {\n      if (os === 'windows') {\n        return `powershell -c \"irm ${host}/install.ps1 | iex\"`;\n      }\n      return `curl -fsSL https://${host}/install | bash`;\n    }\n    // npm\n    return `npm install -g @vibecontrols/agent${agentSuffix}`;\n  }, [method, os, host, pinnedAgentVersion]);\n\n  const scriptUrl =\n    method === 'curl'\n      ? os === 'windows'\n        ? `https://${host}/install.ps1`\n        : `https://${host}/install`\n      : null;\n\n  return (\n    <div className={compact ? 'space-y-3' : 'space-y-4'}>\n      <Tabs\n        items={methodTabs}\n        activeTabId={method}\n        onTabChange={(id) => setMethod(id as InstallMethod)}\n        variant=\"underline\"\n      />\n\n      <Tabs\n        items={osTabs}\n        activeTabId={os}\n        onTabChange={(id) => setOs(id as InstallOs)}\n        variant=\"pills\"\n        size=\"sm\"\n      />\n\n      <CopyableCommand command={command} />\n\n      {method === 'curl' && scriptUrl && (\n        <p className=\"text-xs text-text-muted\">\n          {tr(\n            'vibecontrols.shared.installTabs.curlDescription',\n            'The script installs bun (pinned, v1.3.10) then installs @vibecontrols/agent and core plugins. Only bun is required on your machine — no other prerequisites.'\n          )}{' '}\n          <a\n            href={scriptUrl}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className=\"text-action-primary-text hover:underline\"\n          >\n            {tr('vibecontrols.shared.installTabs.viewInstallScript', 'View the install script')}\n          </a>\n          .\n        </p>\n      )}\n      {method === 'npm' && (\n        <p className=\"text-xs text-text-muted\">\n          {tr(\n            'vibecontrols.shared.installTabs.npmDescription',\n            'Requires Node.js >= 18. You can also pass @<version> to pin a specific release.'\n          )}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAcA,SAAS,IAAsB;AAG7B,QAFI,OAAO,SAAW,MAAoB,qCACxB,OAAyD,yBACxD,OAAO,SAAS;;AAGrC,SAAS,EAAgB,EAAE,cAAgC;CACzD,IAAM,IAAK,GAAO,EACZ,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,IAAa,EAAY,YAAY;AACzC,MAAI;AACF,SAAM,UAAU,UAAU,UAAU,EAAQ;UACtC;GACN,IAAM,IAAK,SAAS,cAAc,WAAW;AAK7C,GAJA,EAAG,QAAQ,GACX,SAAS,KAAK,YAAY,EAAG,EAC7B,EAAG,QAAQ,EACX,SAAS,YAAY,OAAO,EAC5B,SAAS,KAAK,YAAY,EAAG;;AAG/B,EADA,EAAU,GAAK,EACf,iBAAiB,EAAU,GAAM,EAAE,IAAK;IACvC,CAAC,EAAQ,CAAC;AAEb,QACE,kBAAC,OAAD;EACE,MAAK;EACL,UAAU;EACV,SAAS;EACT,YAAY,MAAM;AAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,QAAK,GAAY;;EAEtD,WAAU;EACV,OAAO,EAAG,+CAA+C,gBAAgB;YAR3E;GAUE,kBAAC,GAAD,EAAU,WAAU,yCAA0C,CAAA;GAC9D,kBAAC,QAAD;IAAM,WAAU;cAAwD;IAAe,CAAA;GACtF,IACC,kBAAC,GAAD,EAAO,WAAU,kDAAmD,CAAA,GAEpE,kBAAC,GAAD,EAAM,WAAU,yEAA0E,CAAA;GAExF;;;AAqBV,SAAgB,EAAY,EAAE,uBAAoB,aAAU,MAA2B;CACrF,IAAM,IAAK,GAAO,EACZ,IAAO,GAAa,EACpB,CAAC,GAAQ,KAAa,EAAwB,OAAO,EACrD,CAAC,GAAI,KAAS,EAAoB,QAAQ,EAE1C,IAAwB,QACtB,CACJ;EACE,IAAI;EACJ,OAAO,EAAG,mDAAmD,qBAAqB;EACnF,EACD;EAAE,IAAI;EAAO,OAAO,EAAG,uCAAuC,MAAM;EAAE,CACvE,EACD,CAAC,EAAG,CACL,EAEK,IAAoB,QAClB;EACJ;GAAE,IAAI;GAAS,OAAO,EAAG,yCAAyC,QAAQ;GAAE;EAC5E;GAAE,IAAI;GAAS,OAAO,EAAG,yCAAyC,QAAQ;GAAE;EAC5E;GAAE,IAAI;GAAW,OAAO,EAAG,2CAA2C,UAAU;GAAE;EACnF,EACD,CAAC,EAAG,CACL,EAGK,IAAU,QAAc;EAC5B,IAAM,IAAc,IAAqB,IAAI,MAAuB;AAQpE,SAPI,MAAW,SACT,MAAO,YACF,sBAAsB,EAAK,uBAE7B,sBAAsB,EAAK,mBAG7B,qCAAqC;IAC3C;EAAC;EAAQ;EAAI;EAAM;EAAmB,CAAC,EAEpC,IACJ,MAAW,SACP,MAAO,YACL,WAAW,EAAK,gBAChB,WAAW,EAAK,YAClB;AAEN,QACE,kBAAC,OAAD;EAAK,WAAW,IAAU,cAAc;YAAxC;GACE,kBAAC,GAAD;IACE,OAAO;IACP,aAAa;IACb,cAAc,MAAO,EAAU,EAAoB;IACnD,SAAQ;IACR,CAAA;GAEF,kBAAC,GAAD;IACE,OAAO;IACP,aAAa;IACb,cAAc,MAAO,EAAM,EAAgB;IAC3C,SAAQ;IACR,MAAK;IACL,CAAA;GAEF,kBAAC,GAAD,EAA0B,YAAW,CAAA;GAEpC,MAAW,UAAU,KACpB,kBAAC,KAAD;IAAG,WAAU;cAAb;KACG,EACC,mDACA,+JACD;KAAE;KACH,kBAAC,KAAD;MACE,MAAM;MACN,QAAO;MACP,KAAI;MACJ,WAAU;gBAET,EAAG,qDAAqD,0BAA0B;MACjF,CAAA;;KAEF;;GAEL,MAAW,SACV,kBAAC,KAAD;IAAG,WAAU;cACV,EACC,kDACA,kFACD;IACC,CAAA;GAEF"}

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

@@ -0,0 +1,7 @@
+interface LoadingStateProps {
+    message?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function LoadingState({ message, size }: LoadingStateProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LoadingState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.d.ts","sourceRoot":"","sources":["../../../src/components/shared/LoadingState.tsx"],"names":[],"mappings":"AAIA,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,IAAW,EAAE,EAAE,iBAAiB,2CAmDvE"}

package/dist/components/shared/LoadingState.js

@@ -0,0 +1,54 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { Loader2 as t } from "lucide-react";
+import { motion as n, useReducedMotion as r } from "framer-motion";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/shared/LoadingState.tsx
+function o({ message: o, size: s = "md" }) {
+	let c = e(), l = o ?? c("vibecontrols.shared.loadingState.loading", "Loading..."), u = r(), d = {
+		sm: "w-4 h-4",
+		md: "w-8 h-8",
+		lg: "w-12 h-12"
+	}, f = {
+		sm: "py-4",
+		md: "py-8",
+		lg: "py-12"
+	};
+	return u ? /* @__PURE__ */ a("div", {
+		className: `flex flex-col items-center justify-center ${f[s]}`,
+		children: [/* @__PURE__ */ i(t, { className: `${d[s]} text-action-primary-bg animate-spin` }), l && /* @__PURE__ */ i("p", {
+			className: "mt-3 text-sm text-text-secondary",
+			children: l
+		})]
+	}) : /* @__PURE__ */ a(n.div, {
+		className: `flex flex-col items-center justify-center ${f[s]}`,
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		transition: { duration: .15 },
+		children: [/* @__PURE__ */ i(n.div, {
+			animate: { scale: [
+				1,
+				1.08,
+				1
+			] },
+			transition: {
+				duration: 2,
+				repeat: Infinity,
+				ease: "easeInOut"
+			},
+			children: /* @__PURE__ */ i(t, { className: `${d[s]} text-action-primary-bg animate-spin` })
+		}), l && /* @__PURE__ */ i(n.p, {
+			className: "mt-3 text-sm text-text-secondary",
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			transition: {
+				duration: .25,
+				delay: .15
+			},
+			children: l
+		})]
+	});
+}
+//#endregion
+export { o as LoadingState };
+
+//# sourceMappingURL=LoadingState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.js","names":[],"sources":["../../../src/components/shared/LoadingState.tsx"],"sourcesContent":["import { Loader2 } from 'lucide-react';\nimport { motion, useReducedMotion } from 'framer-motion';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface LoadingStateProps {\n  message?: string;\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport function LoadingState({ message, size = 'md' }: LoadingStateProps) {\n  const tr = useTr();\n  const resolvedMessage = message ?? tr('vibecontrols.shared.loadingState.loading', 'Loading...');\n  const shouldReduceMotion = useReducedMotion();\n\n  const sizeClasses = {\n    sm: 'w-4 h-4',\n    md: 'w-8 h-8',\n    lg: 'w-12 h-12',\n  };\n\n  const containerClasses = {\n    sm: 'py-4',\n    md: 'py-8',\n    lg: 'py-12',\n  };\n\n  if (shouldReduceMotion) {\n    return (\n      <div className={`flex flex-col items-center justify-center ${containerClasses[size]}`}>\n        <Loader2 className={`${sizeClasses[size]} text-action-primary-bg animate-spin`} />\n        {resolvedMessage && <p className=\"mt-3 text-sm text-text-secondary\">{resolvedMessage}</p>}\n      </div>\n    );\n  }\n\n  return (\n    <motion.div\n      className={`flex flex-col items-center justify-center ${containerClasses[size]}`}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={{ duration: 0.15 }}\n    >\n      <motion.div\n        animate={{ scale: [1, 1.08, 1] }}\n        transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}\n      >\n        <Loader2 className={`${sizeClasses[size]} text-action-primary-bg animate-spin`} />\n      </motion.div>\n      {resolvedMessage && (\n        <motion.p\n          className=\"mt-3 text-sm text-text-secondary\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ duration: 0.25, delay: 0.15 }}\n        >\n          {resolvedMessage}\n        </motion.p>\n      )}\n    </motion.div>\n  );\n}\n"],"mappings":";;;;;AASA,SAAgB,EAAa,EAAE,YAAS,UAAO,QAA2B;CACxE,IAAM,IAAK,GAAO,EACZ,IAAkB,KAAW,EAAG,4CAA4C,aAAa,EACzF,IAAqB,GAAkB,EAEvC,IAAc;EAClB,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EAEK,IAAmB;EACvB,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;AAWD,QATI,IAEA,kBAAC,OAAD;EAAK,WAAW,6CAA6C,EAAiB;YAA9E,CACE,kBAAC,GAAD,EAAS,WAAW,GAAG,EAAY,GAAM,uCAAyC,CAAA,EACjF,KAAmB,kBAAC,KAAD;GAAG,WAAU;aAAoC;GAAoB,CAAA,CACrF;MAKR,kBAAC,EAAO,KAAR;EACE,WAAW,6CAA6C,EAAiB;EACzE,SAAS,EAAE,SAAS,GAAG;EACvB,SAAS,EAAE,SAAS,GAAG;EACvB,YAAY,EAAE,UAAU,KAAM;YAJhC,CAME,kBAAC,EAAO,KAAR;GACE,SAAS,EAAE,OAAO;IAAC;IAAG;IAAM;IAAE,EAAE;GAChC,YAAY;IAAE,UAAU;IAAG,QAAQ;IAAU,MAAM;IAAa;aAEhE,kBAAC,GAAD,EAAS,WAAW,GAAG,EAAY,GAAM,uCAAyC,CAAA;GACvE,CAAA,EACZ,KACC,kBAAC,EAAO,GAAR;GACE,WAAU;GACV,SAAS,EAAE,SAAS,GAAG;GACvB,SAAS,EAAE,SAAS,GAAG;GACvB,YAAY;IAAE,UAAU;IAAM,OAAO;IAAM;aAE1C;GACQ,CAAA,CAEF"}

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

@@ -0,0 +1,40 @@
+import { AiToolNotification } from '../../hooks/useAgentEvents';
+
+/**
+ * Props for a single toast notification
+ */
+interface ToastProps {
+    notification: AiToolNotification;
+    onDismiss: (id: string) => void;
+    autoDismiss?: boolean;
+    autoDismissDelay?: number;
+}
+/**
+ * Props for the toast container
+ */
+export interface NotificationToastContainerProps {
+    notifications: AiToolNotification[];
+    onDismiss: (id: string) => void;
+    maxVisible?: number;
+    autoDismiss?: boolean;
+    autoDismissDelay?: number;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+}
+/**
+ * Single toast notification
+ */
+declare function Toast({ notification, onDismiss, autoDismiss, autoDismissDelay, }: ToastProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Toast container that manages multiple notifications
+ *
+ * Z-Index Layering (coordinated across VibeControls):
+ * - z-50: Standard overlays, dropdowns
+ * - z-[9999]: Immersive fullscreen terminal overlay (TerminalPanel)
+ * - z-[10000]: Notification toasts (must appear above fullscreen)
+ */
+export declare function NotificationToastContainer({ notifications, onDismiss, maxVisible, autoDismiss, autoDismissDelay, position, }: NotificationToastContainerProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Export individual toast for standalone use
+ */
+export { Toast as NotificationToast };
+//# sourceMappingURL=NotificationToast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationToast.d.ts","sourceRoot":"","sources":["../../../src/components/shared/NotificationToast.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGrE;;GAEG;AACH,UAAU,UAAU;IAClB,YAAY,EAAE,kBAAkB,CAAC;IACjC,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,+BAA+B;IAC9C,aAAa,EAAE,kBAAkB,EAAE,CAAC;IACpC,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;CACtE;AAsFD;;GAEG;AACH,iBAAS,KAAK,CAAC,EACb,YAAY,EACZ,SAAS,EACT,WAAkB,EAClB,gBAAuB,GACxB,EAAE,UAAU,2CA4EZ;AAED;;;;;;;GAOG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,aAAa,EACb,SAAS,EACT,UAAc,EACd,WAAkB,EAClB,gBAAuB,EACvB,QAAyB,GAC1B,EAAE,+BAA+B,kDAwCjC;AAED;;GAEG;AACH,OAAO,EAAE,KAAK,IAAI,iBAAiB,EAAE,CAAC"}

package/dist/components/shared/NotificationToast.js

@@ -0,0 +1,152 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useEffect as t, useState as n } from "react";
+import { AlertCircle as r, Bell as i, CheckCircle as a, Info as o, Sparkles as s, Terminal as c, X as l, Zap as u } from "lucide-react";
+import { motion as d } from "framer-motion";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/shared/NotificationToast.tsx
+function m(e) {
+	let t = "w-5 h-5";
+	switch (e.toLowerCase()) {
+		case "opencode": return /* @__PURE__ */ f(c, { className: t });
+		case "claude-code":
+		case "claudecode": return /* @__PURE__ */ f(s, { className: t });
+		case "gemini-cli":
+		case "gemini": return /* @__PURE__ */ f(u, { className: t });
+		case "cursor": return /* @__PURE__ */ f(c, { className: t });
+		default: return /* @__PURE__ */ f(i, { className: t });
+	}
+}
+function h(e) {
+	let t = "w-4 h-4";
+	return e.includes("completed") || e.includes("success") ? /* @__PURE__ */ f(a, { className: `${t} text-status-success-text` }) : e.includes("failed") || e.includes("error") ? /* @__PURE__ */ f(r, { className: `${t} text-status-error-text` }) : /* @__PURE__ */ f(o, { className: `${t} text-status-info-text` });
+}
+function g(e) {
+	return {
+		opencode: "OpenCode",
+		"claude-code": "Claude Code",
+		claudecode: "Claude Code",
+		"gemini-cli": "Gemini CLI",
+		gemini: "Gemini CLI",
+		cursor: "Cursor"
+	}[e.toLowerCase()] || e;
+}
+function _(e) {
+	switch (e.toLowerCase()) {
+		case "opencode": return "bg-gradient-to-r from-blue-500/10 to-purple-500/10 border-blue-500/20";
+		case "claude-code":
+		case "claudecode": return "bg-gradient-to-r from-orange-500/10 to-amber-500/10 border-orange-500/20";
+		case "gemini-cli":
+		case "gemini": return "bg-gradient-to-r from-cyan-500/10 to-blue-500/10 border-cyan-500/20";
+		case "cursor": return "bg-gradient-to-r from-green-500/10 to-emerald-500/10 border-green-500/20";
+		default: return "bg-bg-secondary border-border-primary";
+	}
+}
+function v(e) {
+	try {
+		return new Date(e).toLocaleTimeString([], {
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+	} catch {
+		return "";
+	}
+}
+function y({ notification: e, onDismiss: r, autoDismiss: i = !0, autoDismissDelay: a = 5e3 }) {
+	let [o, s] = n(!1);
+	return t(() => {
+		if (!i) return;
+		let t = setTimeout(() => {
+			s(!0), setTimeout(() => r(e.id), 300);
+		}, a);
+		return () => clearTimeout(t);
+	}, [
+		i,
+		a,
+		e.id,
+		r
+	]), /* @__PURE__ */ p("div", {
+		className: `
+        relative flex items-start gap-3 p-4 rounded-lg border shadow-lg backdrop-blur-sm
+        ${_(e.source)}
+        transform transition-all duration-300 ease-out
+        ${o ? "opacity-0 translate-x-4 scale-95" : "opacity-100 translate-x-0 scale-100"}
+        animate-slide-in-right
+      `,
+		role: "alert",
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: "flex-shrink-0 p-2 rounded-lg bg-bg-tertiary/50",
+				children: m(e.source)
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "flex-1 min-w-0",
+				children: [
+					/* @__PURE__ */ p("div", {
+						className: "flex items-center gap-2 mb-1",
+						children: [/* @__PURE__ */ f("span", {
+							className: "text-xs font-semibold text-text-secondary uppercase tracking-wide",
+							children: g(e.source)
+						}), h(e.eventType)]
+					}),
+					/* @__PURE__ */ f("p", {
+						className: "text-sm font-medium text-text-primary truncate",
+						children: e.title
+					}),
+					/* @__PURE__ */ f("p", {
+						className: "text-xs text-text-secondary mt-0.5 line-clamp-2",
+						children: e.message
+					}),
+					/* @__PURE__ */ f("p", {
+						className: "text-xs text-text-muted mt-1",
+						children: v(e.timestamp)
+					})
+				]
+			}),
+			/* @__PURE__ */ f(d.button, {
+				whileTap: { scale: .9 },
+				onClick: () => {
+					s(!0), setTimeout(() => r(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__ */ f(l, { className: "w-4 h-4" })
+			}),
+			i && /* @__PURE__ */ f("div", {
+				className: "absolute bottom-0 left-0 right-0 h-0.5 bg-bg-tertiary/30 overflow-hidden rounded-b-lg",
+				children: /* @__PURE__ */ f("div", {
+					className: "h-full bg-accent-primary/50 animate-shrink-width",
+					style: { animationDuration: `${a}ms` }
+				})
+			})
+		]
+	});
+}
+function b({ notifications: t, onDismiss: n, maxVisible: r = 3, autoDismiss: i = !0, autoDismissDelay: a = 5e3, position: o = "bottom-right" }) {
+	let s = e(), c = t.slice(0, r), l = Math.max(0, t.length - r);
+	return t.length === 0 ? null : /* @__PURE__ */ p("div", {
+		className: `fixed ${{
+			"top-right": "top-4 right-4",
+			"top-left": "top-4 left-4",
+			"bottom-right": "bottom-4 right-4",
+			"bottom-left": "bottom-4 left-4"
+		}[o]} z-[10000] flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]`,
+		children: [l > 0 && /* @__PURE__ */ p("div", {
+			className: "text-xs text-text-muted text-center py-1",
+			children: [
+				"+",
+				l,
+				" ",
+				s("vibecontrols.shared.notificationToast.moreNotifications", "more notification(s)")
+			]
+		}), c.map((e) => /* @__PURE__ */ f(y, {
+			notification: e,
+			onDismiss: n,
+			autoDismiss: i,
+			autoDismissDelay: a
+		}, e.id))]
+	});
+}
+//#endregion
+export { b as NotificationToastContainer, y as Toast };
+
+//# sourceMappingURL=NotificationToast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationToast.js","names":[],"sources":["../../../src/components/shared/NotificationToast.tsx"],"sourcesContent":["/**\n * NotificationToast Component\n *\n * Displays toast notifications for AI tool events (OpenCode, Claude Code, etc.)\n * Supports stacking multiple notifications with auto-dismiss.\n */\nimport { useEffect, useState } from 'react';\nimport { motion } from 'framer-motion';\nimport { Bell, CheckCircle, AlertCircle, Info, X, Sparkles, Terminal, Zap } from 'lucide-react';\n\nimport type { AiToolNotification } from '../../hooks/useAgentEvents';\nimport { useTr } from '../../shared/hooks/useTr';\n\n/**\n * Props for a single toast notification\n */\ninterface ToastProps {\n  notification: AiToolNotification;\n  onDismiss: (id: string) => void;\n  autoDismiss?: boolean;\n  autoDismissDelay?: number;\n}\n\n/**\n * Props for the toast container\n */\nexport interface NotificationToastContainerProps {\n  notifications: AiToolNotification[];\n  onDismiss: (id: string) => void;\n  maxVisible?: number;\n  autoDismiss?: boolean;\n  autoDismissDelay?: number;\n  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\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 (eventType.includes('completed') || eventType.includes('success')) {\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  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    '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 getSourceBgColor(source: string): string {\n  switch (source.toLowerCase()) {\n    case 'opencode':\n      return 'bg-gradient-to-r from-blue-500/10 to-purple-500/10 border-blue-500/20';\n    case 'claude-code':\n    case 'claudecode':\n      return 'bg-gradient-to-r from-orange-500/10 to-amber-500/10 border-orange-500/20';\n    case 'gemini-cli':\n    case 'gemini':\n      return 'bg-gradient-to-r from-cyan-500/10 to-blue-500/10 border-cyan-500/20';\n    case 'cursor':\n      return 'bg-gradient-to-r from-green-500/10 to-emerald-500/10 border-green-500/20';\n    default:\n      return 'bg-bg-secondary border-border-primary';\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 toast notification\n */\nfunction Toast({\n  notification,\n  onDismiss,\n  autoDismiss = true,\n  autoDismissDelay = 5000,\n}: ToastProps) {\n  const [isExiting, setIsExiting] = useState(false);\n\n  useEffect(() => {\n    if (!autoDismiss) return;\n\n    const timer = setTimeout(() => {\n      setIsExiting(true);\n      setTimeout(() => onDismiss(notification.id), 300);\n    }, autoDismissDelay);\n\n    return () => clearTimeout(timer);\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        ${getSourceBgColor(notification.source)}\n        transform transition-all duration-300 ease-out\n        ${isExiting ? 'opacity-0 translate-x-4 scale-95' : 'opacity-100 translate-x-0 scale-100'}\n        animate-slide-in-right\n      `}\n      role=\"alert\"\n    >\n      {/* Source icon */}\n      <div className=\"flex-shrink-0 p-2 rounded-lg bg-bg-tertiary/50\">\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 text-text-secondary uppercase tracking-wide\">\n            {getSourceDisplayName(notification.source)}\n          </span>\n          {getEventIcon(notification.eventType)}\n        </div>\n\n        {/* Title */}\n        <p className=\"text-sm font-medium text-text-primary truncate\">{notification.title}</p>\n\n        {/* Message */}\n        <p className=\"text-xs text-text-secondary mt-0.5 line-clamp-2\">{notification.message}</p>\n\n        {/* Timestamp */}\n        <p className=\"text-xs text-text-muted mt-1\">{formatTimestamp(notification.timestamp)}</p>\n      </div>\n\n      {/* Dismiss button */}\n      <motion.button\n        whileTap={{ scale: 0.9 }}\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      </motion.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 bg-accent-primary/50 animate-shrink-width\"\n            style={{ animationDuration: `${autoDismissDelay}ms` }}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Toast container that manages multiple notifications\n *\n * Z-Index Layering (coordinated across VibeControls):\n * - z-50: Standard overlays, dropdowns\n * - z-[9999]: Immersive fullscreen terminal overlay (TerminalPanel)\n * - z-[10000]: Notification toasts (must appear above fullscreen)\n */\nexport function NotificationToastContainer({\n  notifications,\n  onDismiss,\n  maxVisible = 3,\n  autoDismiss = true,\n  autoDismissDelay = 5000,\n  position = 'bottom-right',\n}: NotificationToastContainerProps) {\n  const tr = useTr();\n  const visibleNotifications = notifications.slice(0, maxVisible);\n  const hiddenCount = Math.max(0, notifications.length - maxVisible);\n\n  const positionStyles: Record<string, string> = {\n    'top-right': 'top-4 right-4',\n    'top-left': 'top-4 left-4',\n    'bottom-right': 'bottom-4 right-4',\n    'bottom-left': 'bottom-4 left-4',\n  };\n\n  if (notifications.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={`fixed ${positionStyles[position]} z-[10000] flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]`}\n    >\n      {/* Hidden count indicator */}\n      {hiddenCount > 0 && (\n        <div className=\"text-xs text-text-muted text-center py-1\">\n          +{hiddenCount}{' '}\n          {tr('vibecontrols.shared.notificationToast.moreNotifications', 'more notification(s)')}\n        </div>\n      )}\n\n      {/* Visible notifications */}\n      {visibleNotifications.map((notification) => (\n        <Toast\n          key={notification.id}\n          notification={notification}\n          onDismiss={onDismiss}\n          autoDismiss={autoDismiss}\n          autoDismissDelay={autoDismissDelay}\n        />\n      ))}\n    </div>\n  );\n}\n\n/**\n * Export individual toast for standalone use\n */\nexport { Toast as NotificationToast };\n"],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+interface PageHeaderProps {
+    title: string;
+    description?: string;
+    actions?: ReactNode;
+    breadcrumb?: {
+        label: string;
+        path?: string;
+    }[];
+}
+export declare function PageHeader({ title, description, actions, breadcrumb }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PageHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/shared/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,eAAe,2CA4CtF"}

package/dist/components/shared/PageHeader.js

@@ -0,0 +1,55 @@
+import { motion as e } from "framer-motion";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/shared/PageHeader.tsx
+function r({ title: r, description: i, actions: a, breadcrumb: o }) {
+	return /* @__PURE__ */ n("div", {
+		"data-tour": "page-header",
+		className: "mb-6",
+		children: [o && o.length > 0 && /* @__PURE__ */ t("nav", {
+			className: "mb-2",
+			children: /* @__PURE__ */ t("ol", {
+				className: "flex items-center gap-2 text-sm text-text-secondary",
+				children: o.map((e, r) => /* @__PURE__ */ n("li", {
+					className: "flex items-center gap-2",
+					children: [r > 0 && /* @__PURE__ */ t("span", { children: "/" }), e.path ? /* @__PURE__ */ t("a", {
+						href: e.path,
+						className: "hover:text-text-primary transition-colors",
+						children: e.label
+					}) : /* @__PURE__ */ t("span", {
+						className: "text-text-primary",
+						children: e.label
+					})]
+				}, r))
+			})
+		}), /* @__PURE__ */ n("div", {
+			className: "flex items-start justify-between gap-4 sm:items-center",
+			children: [/* @__PURE__ */ n(e.div, {
+				initial: {
+					opacity: 0,
+					y: -4
+				},
+				animate: {
+					opacity: 1,
+					y: 0
+				},
+				transition: { duration: .2 },
+				className: "flex-1 min-w-0",
+				children: [/* @__PURE__ */ t("h1", {
+					className: "text-2xl sm:text-3xl font-bold text-text-primary break-words",
+					children: r
+				}), i && /* @__PURE__ */ t("p", {
+					className: "mt-1 text-sm sm:text-base text-text-secondary",
+					children: i
+				})]
+			}), a && /* @__PURE__ */ t("div", {
+				"data-tour": "page-header-actions",
+				className: "flex flex-shrink-0 flex-wrap items-center justify-end gap-2",
+				children: a
+			})]
+		})]
+	});
+}
+//#endregion
+export { r as PageHeader };
+
+//# sourceMappingURL=PageHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","names":[],"sources":["../../../src/components/shared/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { motion } from 'framer-motion';\n\ninterface PageHeaderProps {\n  title: string;\n  description?: string;\n  actions?: ReactNode;\n  breadcrumb?: { label: string; path?: string }[];\n}\n\nexport function PageHeader({ title, description, actions, breadcrumb }: PageHeaderProps) {\n  return (\n    <div data-tour=\"page-header\" className=\"mb-6\">\n      {breadcrumb && breadcrumb.length > 0 && (\n        <nav className=\"mb-2\">\n          <ol className=\"flex items-center gap-2 text-sm text-text-secondary\">\n            {breadcrumb.map((item, index) => (\n              <li key={index} className=\"flex items-center gap-2\">\n                {index > 0 && <span>/</span>}\n                {item.path ? (\n                  <a href={item.path} className=\"hover:text-text-primary transition-colors\">\n                    {item.label}\n                  </a>\n                ) : (\n                  <span className=\"text-text-primary\">{item.label}</span>\n                )}\n              </li>\n            ))}\n          </ol>\n        </nav>\n      )}\n      <div className=\"flex items-start justify-between gap-4 sm:items-center\">\n        <motion.div\n          initial={{ opacity: 0, y: -4 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.2 }}\n          className=\"flex-1 min-w-0\"\n        >\n          <h1 className=\"text-2xl sm:text-3xl font-bold text-text-primary break-words\">{title}</h1>\n          {description && (\n            <p className=\"mt-1 text-sm sm:text-base text-text-secondary\">{description}</p>\n          )}\n        </motion.div>\n        {actions && (\n          <div\n            data-tour=\"page-header-actions\"\n            className=\"flex flex-shrink-0 flex-wrap items-center justify-end gap-2\"\n          >\n            {actions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAUA,SAAgB,EAAW,EAAE,UAAO,gBAAa,YAAS,iBAA+B;AACvF,QACE,kBAAC,OAAD;EAAK,aAAU;EAAc,WAAU;YAAvC,CACG,KAAc,EAAW,SAAS,KACjC,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,MAAD;IAAI,WAAU;cACX,EAAW,KAAK,GAAM,MACrB,kBAAC,MAAD;KAAgB,WAAU;eAA1B,CACG,IAAQ,KAAK,kBAAC,QAAD,EAAA,UAAM,KAAQ,CAAA,EAC3B,EAAK,OACJ,kBAAC,KAAD;MAAG,MAAM,EAAK;MAAM,WAAU;gBAC3B,EAAK;MACJ,CAAA,GAEJ,kBAAC,QAAD;MAAM,WAAU;gBAAqB,EAAK;MAAa,CAAA,CAEtD;OATI,EASJ,CACL;IACC,CAAA;GACD,CAAA,EAER,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,EAAO,KAAR;IACE,SAAS;KAAE,SAAS;KAAG,GAAG;KAAI;IAC9B,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG;IAC7B,YAAY,EAAE,UAAU,IAAK;IAC7B,WAAU;cAJZ,CAME,kBAAC,MAAD;KAAI,WAAU;eAAgE;KAAW,CAAA,EACxF,KACC,kBAAC,KAAD;KAAG,WAAU;eAAiD;KAAgB,CAAA,CAErE;OACZ,KACC,kBAAC,OAAD;IACE,aAAU;IACV,WAAU;cAET;IACG,CAAA,CAEJ;KACF"}