@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/components/settings/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/settings/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAGD,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,EAAE,eAAe,EA6B9C,CAAC"}

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

@@ -0,0 +1,6 @@
+/**
+ * Component that syncs the active agent id to the events provider
+ */
+export declare function AgentEventsConnector(): null;
+export default AgentEventsConnector;
+//# sourceMappingURL=AgentEventsConnector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentEventsConnector.d.ts","sourceRoot":"","sources":["../../../src/components/shared/AgentEventsConnector.tsx"],"names":[],"mappings":"AAcA;;GAEG;AACH,wBAAgB,oBAAoB,SAiCnC;AAED,eAAe,oBAAoB,CAAC"}

package/dist/components/shared/AgentEventsConnector.js

@@ -0,0 +1,26 @@
+import { useAgentEventsContext as e } from "../../providers/AgentEventsProvider.js";
+import { useVibeControlsStore as t } from "../../store/vibeControlsStore.js";
+import n from "../../hooks/useCachedInitialData.js";
+import { useEffect as r } from "react";
+//#region src/components/shared/AgentEventsConnector.tsx
+function i() {
+	let { activeAgentId: i } = t(), { setAgentId: a, connectionStatus: o } = e(), { agents: s } = n();
+	return r(() => {
+		if (!i) {
+			a(null);
+			return;
+		}
+		let e = s.find((e) => e.id === i);
+		e?.isActive ? a(e.id) : a(null);
+	}, [
+		i,
+		s,
+		a
+	]), r(() => {
+		process.env.NODE_ENV === "development" && console.log(`[AgentEvents] Connection status: ${o}`);
+	}, [o]), null;
+}
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=AgentEventsConnector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentEventsConnector.js","names":[],"sources":["../../../src/components/shared/AgentEventsConnector.tsx"],"sourcesContent":["/**\n * AgentEventsConnector\n *\n * Connects the active agent from the store to the AgentEventsProvider.\n * When the active agent changes, updates the event poller target.\n *\n * This component now uses cached initial data from Apollo instead of\n * making independent GraphQL queries.\n */\nimport { useEffect } from 'react';\nimport { useVibeControlsStore } from '../../store/vibeControlsStore';\nimport { useAgentEventsContext } from '../../providers/AgentEventsProvider';\nimport { useCachedInitialData } from '../../hooks/useCachedInitialData';\n\n/**\n * Component that syncs the active agent id to the events provider\n */\nexport function AgentEventsConnector() {\n  const { activeAgentId } = useVibeControlsStore();\n  const { setAgentId, connectionStatus } = useAgentEventsContext();\n\n  // Use cached initial data instead of independent query\n  // This reads from Apollo cache - no network request\n  const { agents } = useCachedInitialData();\n\n  // Find the active agent and update the monitored agent id\n  useEffect(() => {\n    if (!activeAgentId) {\n      setAgentId(null);\n      return;\n    }\n\n    const activeAgent = agents.find((a) => a.id === activeAgentId);\n\n    if (activeAgent?.isActive) {\n      setAgentId(activeAgent.id);\n    } else {\n      setAgentId(null);\n    }\n  }, [activeAgentId, agents, setAgentId]);\n\n  // Log connection status changes in development\n  useEffect(() => {\n    if (process.env.NODE_ENV === 'development') {\n      console.log(`[AgentEvents] Connection status: ${connectionStatus}`);\n    }\n  }, [connectionStatus]);\n\n  // This component doesn't render anything\n  return null;\n}\n\nexport default AgentEventsConnector;\n"],"mappings":";;;;;AAiBA,SAAgB,IAAuB;CACrC,IAAM,EAAE,qBAAkB,GAAsB,EAC1C,EAAE,eAAY,wBAAqB,GAAuB,EAI1D,EAAE,cAAW,GAAsB;AA0BzC,QAvBA,QAAgB;AACd,MAAI,CAAC,GAAe;AAClB,KAAW,KAAK;AAChB;;EAGF,IAAM,IAAc,EAAO,MAAM,MAAM,EAAE,OAAO,EAAc;AAE9D,EAAI,GAAa,WACf,EAAW,EAAY,GAAG,GAE1B,EAAW,KAAK;IAEjB;EAAC;EAAe;EAAQ;EAAW,CAAC,EAGvC,QAAgB;AACd,EAAA,QAAA,IAAA,aAA6B,iBAC3B,QAAQ,IAAI,oCAAoC,IAAmB;IAEpE,CAAC,EAAiB,CAAC,EAGf"}

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

@@ -0,0 +1,25 @@
+import { CSSProperties } from 'react';
+
+export interface AgentOption {
+    id: string;
+    name: string;
+    hostname: string;
+    isActive: boolean;
+    tunnelUrl?: string | null;
+    tunnelStatus?: string | null;
+}
+interface AgentSelectorProps {
+    /** Optional label above the selector. */
+    label?: string;
+    /** Optional className applied to the outer wrapper. */
+    className?: string;
+    /** Optional inline style applied to the outer wrapper. */
+    style?: CSSProperties;
+    /** Fired whenever the user changes the selected agent. */
+    onChange?: (agent: AgentOption | null) => void;
+    /** Render compact (smaller, no label). */
+    compact?: boolean;
+}
+export declare function AgentSelector({ label, className, style, onChange, compact, }: AgentSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AgentSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentSelector.d.ts","sourceRoot":"","sources":["../../../src/components/shared/AgentSelector.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAmC,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAK5E,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,UAAU,kBAAkB;IAC1B,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAQD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAe,GAChB,EAAE,kBAAkB,2CAwGpB"}

package/dist/components/shared/AgentSelector.js

@@ -0,0 +1,98 @@
+import { useVibeControlsStore as e } from "../../store/vibeControlsStore.js";
+import t from "../../hooks/useCachedInitialData.js";
+import { useCallback as n, useEffect as r, useMemo as i } from "react";
+import { Check as a, ChevronDown as o, Server as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/shared/AgentSelector.tsx
+function u(e) {
+	return e.isActive ? e.tunnelUrl ? "bg-status-success-text" : "bg-status-warning-text" : "bg-text-placeholder";
+}
+function d({ label: d, className: f, style: p, onChange: m, compact: h = !1 }) {
+	let { agents: g, loading: _ } = t(), v = e((e) => e.activeAgentId), y = e((e) => e.setActiveAgentId), b = i(() => [...g].sort((e, t) => {
+		let n = (e) => (e.isActive ? 0 : 2) + +!e.tunnelUrl;
+		return n(e) === n(t) ? e.name.localeCompare(t.name) : n(e) - n(t);
+	}).map((e) => ({
+		id: e.id,
+		name: e.name,
+		hostname: e.hostname,
+		isActive: e.isActive,
+		tunnelUrl: e.tunnelUrl ?? null,
+		tunnelStatus: e.tunnelStatus ?? null
+	})), [g]), x = i(() => {
+		if (v) {
+			let e = b.find((e) => e.id === v);
+			if (e) return e;
+		}
+		return b.find((e) => e.isActive && e.tunnelUrl) ?? b[0] ?? null;
+	}, [v, b]);
+	r(() => {
+		x && v !== x.id && y(x.id);
+	}, [
+		x,
+		v,
+		y
+	]);
+	let S = n((e) => {
+		let t = e.target.value || null;
+		y(t), m?.(t ? b.find((e) => e.id === t) ?? null : null);
+	}, [
+		b,
+		y,
+		m
+	]);
+	return _ && b.length === 0 ? /* @__PURE__ */ c("div", {
+		className: f,
+		style: p,
+		children: /* @__PURE__ */ l("div", {
+			className: "inline-flex items-center gap-2 rounded-md border border-border-default bg-bg-sunken px-3 py-1.5 text-xs text-text-secondary",
+			children: [/* @__PURE__ */ c(s, { className: "h-3.5 w-3.5" }), "Loading agents…"]
+		})
+	}) : b.length === 0 ? /* @__PURE__ */ c("div", {
+		className: f,
+		style: p,
+		children: /* @__PURE__ */ l("div", {
+			className: "inline-flex items-center gap-2 rounded-md border border-border-default bg-bg-sunken px-3 py-1.5 text-xs text-text-secondary",
+			children: [/* @__PURE__ */ c(s, { className: "h-3.5 w-3.5" }), "No agents yet — add one from the Agents page"]
+		})
+	}) : /* @__PURE__ */ l("div", {
+		className: f,
+		style: p,
+		children: [d && !h && /* @__PURE__ */ c("label", {
+			className: "block text-xs font-medium text-text-secondary mb-1",
+			children: d
+		}), /* @__PURE__ */ l("div", {
+			className: "relative inline-flex items-center",
+			children: [
+				x && /* @__PURE__ */ c("span", {
+					className: `absolute left-2.5 z-10 h-2 w-2 rounded-full ${u(x)}`,
+					"aria-hidden": !0
+				}),
+				/* @__PURE__ */ c("select", {
+					value: x?.id ?? "",
+					onChange: S,
+					className: `appearance-none rounded-md border border-border-default bg-bg-surface pl-7 pr-8 text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/40 ${h ? "py-1 text-xs" : "py-2 text-sm"}`,
+					"data-testid": "agent-selector",
+					children: b.map((e) => /* @__PURE__ */ l("option", {
+						value: e.id,
+						children: [
+							e.name,
+							" (",
+							e.hostname,
+							")",
+							e.isActive ? "" : " · offline"
+						]
+					}, e.id))
+				}),
+				/* @__PURE__ */ c(o, { className: "pointer-events-none absolute right-2 h-3.5 w-3.5 text-text-secondary" }),
+				x?.tunnelUrl && /* @__PURE__ */ c(a, {
+					className: "pointer-events-none absolute -right-5 h-3.5 w-3.5 text-status-success-text",
+					"aria-label": "Tunnel reachable"
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { d as AgentSelector };
+
+//# sourceMappingURL=AgentSelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentSelector.js","names":[],"sources":["../../../src/components/shared/AgentSelector.tsx"],"sourcesContent":["/**\n * AgentSelector — dropdown of workspace agents with selection persisted to the\n * VibeControls Zustand store. Used on the AI page and anywhere else a user\n * needs to pick \"the active agent\" explicitly rather than rely on auto-pick.\n *\n * The selector shows active agents first, then inactive/disconnected ones,\n * and surfaces the agent's tunnel/heartbeat state via a colored dot so the\n * user knows at a glance which one is actually running.\n */\n\nimport { useCallback, useEffect, useMemo, type CSSProperties } from 'react';\nimport { Check, ChevronDown, Server } from 'lucide-react';\nimport { useVibeControlsStore } from '@/store/vibeControlsStore';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\n\nexport interface AgentOption {\n  id: string;\n  name: string;\n  hostname: string;\n  isActive: boolean;\n  tunnelUrl?: string | null;\n  tunnelStatus?: string | null;\n}\n\ninterface AgentSelectorProps {\n  /** Optional label above the selector. */\n  label?: string;\n  /** Optional className applied to the outer wrapper. */\n  className?: string;\n  /** Optional inline style applied to the outer wrapper. */\n  style?: CSSProperties;\n  /** Fired whenever the user changes the selected agent. */\n  onChange?: (agent: AgentOption | null) => void;\n  /** Render compact (smaller, no label). */\n  compact?: boolean;\n}\n\nfunction statusDotColor(agent: AgentOption): string {\n  if (!agent.isActive) return 'bg-text-placeholder';\n  if (!agent.tunnelUrl) return 'bg-status-warning-text';\n  return 'bg-status-success-text';\n}\n\nexport function AgentSelector({\n  label,\n  className,\n  style,\n  onChange,\n  compact = false,\n}: AgentSelectorProps) {\n  const { agents, loading } = useCachedInitialData();\n  const activeAgentId = useVibeControlsStore((s) => s.activeAgentId);\n  const setActiveAgentId = useVibeControlsStore((s) => s.setActiveAgentId);\n\n  const options: AgentOption[] = useMemo(() => {\n    const sorted = [...agents].sort((a, b) => {\n      // Active + online first; then active but no tunnel; then inactive.\n      const score = (x: (typeof agents)[number]) => (x.isActive ? 0 : 2) + (x.tunnelUrl ? 0 : 1);\n      if (score(a) !== score(b)) return score(a) - score(b);\n      return a.name.localeCompare(b.name);\n    });\n    return sorted.map((a) => ({\n      id: a.id,\n      name: a.name,\n      hostname: a.hostname,\n      isActive: a.isActive,\n      tunnelUrl: a.tunnelUrl ?? null,\n      tunnelStatus: a.tunnelStatus ?? null,\n    }));\n  }, [agents]);\n\n  const selected = useMemo<AgentOption | null>(() => {\n    if (activeAgentId) {\n      const match = options.find((a) => a.id === activeAgentId);\n      if (match) return match;\n    }\n    // Auto-pick the first healthy agent the first time.\n    return options.find((a) => a.isActive && a.tunnelUrl) ?? options[0] ?? null;\n  }, [activeAgentId, options]);\n\n  // Commit the auto-picked agent into the store so downstream consumers can\n  // read it directly without running the same \"first healthy\" logic.\n  useEffect(() => {\n    if (selected && activeAgentId !== selected.id) {\n      setActiveAgentId(selected.id);\n    }\n  }, [selected, activeAgentId, setActiveAgentId]);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLSelectElement>) => {\n      const id = e.target.value || null;\n      setActiveAgentId(id);\n      onChange?.(id ? (options.find((o) => o.id === id) ?? null) : null);\n    },\n    [options, setActiveAgentId, onChange]\n  );\n\n  if (loading && options.length === 0) {\n    return (\n      <div className={className} style={style}>\n        <div className=\"inline-flex items-center gap-2 rounded-md border border-border-default bg-bg-sunken px-3 py-1.5 text-xs text-text-secondary\">\n          <Server className=\"h-3.5 w-3.5\" />\n          Loading agents…\n        </div>\n      </div>\n    );\n  }\n\n  if (options.length === 0) {\n    return (\n      <div className={className} style={style}>\n        <div className=\"inline-flex items-center gap-2 rounded-md border border-border-default bg-bg-sunken px-3 py-1.5 text-xs text-text-secondary\">\n          <Server className=\"h-3.5 w-3.5\" />\n          No agents yet — add one from the Agents page\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={className} style={style}>\n      {label && !compact && (\n        <label className=\"block text-xs font-medium text-text-secondary mb-1\">{label}</label>\n      )}\n      <div className=\"relative inline-flex items-center\">\n        {selected && (\n          <span\n            className={`absolute left-2.5 z-10 h-2 w-2 rounded-full ${statusDotColor(selected)}`}\n            aria-hidden\n          />\n        )}\n        <select\n          value={selected?.id ?? ''}\n          onChange={handleChange}\n          className={`appearance-none rounded-md border border-border-default bg-bg-surface pl-7 pr-8 text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/40 ${compact ? 'py-1 text-xs' : 'py-2 text-sm'}`}\n          data-testid=\"agent-selector\"\n        >\n          {options.map((agent) => (\n            <option key={agent.id} value={agent.id}>\n              {agent.name} ({agent.hostname}){agent.isActive ? '' : ' · offline'}\n            </option>\n          ))}\n        </select>\n        <ChevronDown className=\"pointer-events-none absolute right-2 h-3.5 w-3.5 text-text-secondary\" />\n        {selected?.tunnelUrl && (\n          <Check\n            className=\"pointer-events-none absolute -right-5 h-3.5 w-3.5 text-status-success-text\"\n            aria-label=\"Tunnel reachable\"\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAqCA,SAAS,EAAe,GAA4B;AAGlD,QAFK,EAAM,WACN,EAAM,YACJ,2BADsB,2BADD;;AAK9B,SAAgB,EAAc,EAC5B,UACA,cACA,UACA,aACA,aAAU,MACW;CACrB,IAAM,EAAE,WAAQ,eAAY,GAAsB,EAC5C,IAAgB,GAAsB,MAAM,EAAE,cAAc,EAC5D,IAAmB,GAAsB,MAAM,EAAE,iBAAiB,EAElE,IAAyB,QACd,CAAC,GAAG,EAAO,CAAC,MAAM,GAAG,MAAM;EAExC,IAAM,KAAS,OAAgC,EAAE,WAAW,IAAI,KAAM,IAAE;AAExE,SADI,EAAM,EAAE,KAAK,EAAM,EAAE,GAClB,EAAE,KAAK,cAAc,EAAE,KAAK,GADD,EAAM,EAAE,GAAG,EAAM,EAAE;GAErD,CACY,KAAK,OAAO;EACxB,IAAI,EAAE;EACN,MAAM,EAAE;EACR,UAAU,EAAE;EACZ,UAAU,EAAE;EACZ,WAAW,EAAE,aAAa;EAC1B,cAAc,EAAE,gBAAgB;EACjC,EAAE,EACF,CAAC,EAAO,CAAC,EAEN,IAAW,QAAkC;AACjD,MAAI,GAAe;GACjB,IAAM,IAAQ,EAAQ,MAAM,MAAM,EAAE,OAAO,EAAc;AACzD,OAAI,EAAO,QAAO;;AAGpB,SAAO,EAAQ,MAAM,MAAM,EAAE,YAAY,EAAE,UAAU,IAAI,EAAQ,MAAM;IACtE,CAAC,GAAe,EAAQ,CAAC;AAI5B,SAAgB;AACd,EAAI,KAAY,MAAkB,EAAS,MACzC,EAAiB,EAAS,GAAG;IAE9B;EAAC;EAAU;EAAe;EAAiB,CAAC;CAE/C,IAAM,IAAe,GAClB,MAA4C;EAC3C,IAAM,IAAK,EAAE,OAAO,SAAS;AAE7B,EADA,EAAiB,EAAG,EACpB,IAAW,IAAM,EAAQ,MAAM,MAAM,EAAE,OAAO,EAAG,IAAI,OAAQ,KAAK;IAEpE;EAAC;EAAS;EAAkB;EAAS,CACtC;AAwBD,QAtBI,KAAW,EAAQ,WAAW,IAE9B,kBAAC,OAAD;EAAgB;EAAkB;YAChC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,eAAgB,CAAA,EAAA,kBAE9B;;EACF,CAAA,GAIN,EAAQ,WAAW,IAEnB,kBAAC,OAAD;EAAgB;EAAkB;YAChC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,eAAgB,CAAA,EAAA,+CAE9B;;EACF,CAAA,GAKR,kBAAC,OAAD;EAAgB;EAAkB;YAAlC,CACG,KAAS,CAAC,KACT,kBAAC,SAAD;GAAO,WAAU;aAAsD;GAAc,CAAA,EAEvF,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG,KACC,kBAAC,QAAD;KACE,WAAW,+CAA+C,EAAe,EAAS;KAClF,eAAA;KACA,CAAA;IAEJ,kBAAC,UAAD;KACE,OAAO,GAAU,MAAM;KACvB,UAAU;KACV,WAAW,qKAAqK,IAAU,iBAAiB;KAC3M,eAAY;eAEX,EAAQ,KAAK,MACZ,kBAAC,UAAD;MAAuB,OAAO,EAAM;gBAApC;OACG,EAAM;OAAK;OAAG,EAAM;OAAS;OAAE,EAAM,WAAW,KAAK;OAC/C;QAFI,EAAM,GAEV,CACT;KACK,CAAA;IACT,kBAAC,GAAD,EAAa,WAAU,wEAAyE,CAAA;IAC/F,GAAU,aACT,kBAAC,GAAD;KACE,WAAU;KACV,cAAW;KACX,CAAA;IAEA;KACF"}

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

@@ -0,0 +1,21 @@
+interface AgentSetupBannerProps {
+    /** Compact mode shows a single-line banner; full mode shows a multi-step card */
+    variant?: 'compact' | 'full';
+    /** Allow the banner to be dismissed */
+    dismissible?: boolean;
+    /** Storage key for dismissed state */
+    dismissKey?: string;
+    /** Additional CSS class names */
+    className?: string;
+}
+/**
+ * Reusable banner/card prompting users to install the VibeControls Agent CLI.
+ * Used across multiple pages (Overview, Agents, Sessions, Tunnels, SSH, etc.)
+ *
+ * The full variant mirrors the Getting Started page's tabbed install widget
+ * (`InstallTabs`) so users see a single consistent install flow wherever
+ * the banner shows up.
+ */
+export declare function AgentSetupBanner({ variant, dismissible, dismissKey, className, }: AgentSetupBannerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AgentSetupBanner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentSetupBanner.d.ts","sourceRoot":"","sources":["../../../src/components/shared/AgentSetupBanner.tsx"],"names":[],"mappings":"AAQA,UAAU,qBAAqB;IAC7B,iFAAiF;IACjF,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,OAAmB,EACnB,WAAkB,EAClB,UAAkD,EAClD,SAAc,GACf,EAAE,qBAAqB,2CA0KvB"}

package/dist/components/shared/AgentSetupBanner.js

@@ -0,0 +1,158 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useVibeNavigate as t } from "../../providers/VibeControlsProvider.js";
+import { InstallTabs as n } from "./InstallTabs.js";
+import { useCallback as r, useState as i } from "react";
+import { Check as a, Copy as o, Download as s, ExternalLink as c, Terminal as l, X as u } from "lucide-react";
+import { getProfileScopedKey as d } from "@burdenoff/fe-libs/shared/utils";
+import { AnimatePresence as f, motion as p } from "framer-motion";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/shared/AgentSetupBanner.tsx
+var g = "curl -fsSL https://vibecontrols.local.burdenoff.com/install | bash", _ = "https://www.npmjs.com/package/@vibecontrols/agent";
+function v({ variant: v = "compact", dismissible: y = !0, dismissKey: b = "vibecontrols-setup-banner-dismissed", className: x = "" }) {
+	let S = e(), C = t(), [w, T] = i(!1), [E, D] = i(() => {
+		try {
+			return localStorage.getItem(d(b)) === "true";
+		} catch {
+			return !1;
+		}
+	}), O = r(async (e) => {
+		try {
+			await navigator.clipboard.writeText(e), T(!0), setTimeout(() => T(!1), 2e3);
+		} catch {
+			let t = document.createElement("textarea");
+			t.value = e, document.body.appendChild(t), t.select(), document.execCommand("copy"), document.body.removeChild(t), T(!0), setTimeout(() => T(!1), 2e3);
+		}
+	}, []), k = r(() => {
+		D(!0);
+		try {
+			localStorage.setItem(d(b), "true");
+		} catch {}
+	}, [b]), A = {
+		duration: .3,
+		ease: [
+			.4,
+			0,
+			.2,
+			1
+		]
+	};
+	return v === "compact" ? /* @__PURE__ */ m(f, { children: !E && /* @__PURE__ */ h(p.div, {
+		initial: {
+			opacity: 0,
+			y: -8,
+			height: 0
+		},
+		animate: {
+			opacity: 1,
+			y: 0,
+			height: "auto"
+		},
+		exit: {
+			opacity: 0,
+			y: -8,
+			height: 0
+		},
+		transition: A,
+		className: `relative flex items-center gap-3 px-4 py-3 bg-accent-purple-subtle border border-accent-purple/20 rounded-lg ${x}`,
+		children: [
+			/* @__PURE__ */ m(s, { className: "w-5 h-5 text-accent-purple flex-shrink-0" }),
+			/* @__PURE__ */ h("div", {
+				className: "flex-1 min-w-0 flex flex-wrap items-center gap-x-3 gap-y-1",
+				children: [
+					/* @__PURE__ */ m("span", {
+						className: "text-sm font-medium text-text-primary",
+						children: S("vibecontrols.shared.agentSetupBanner.installPrompt", "Install the VibeControls Agent CLI to get started")
+					}),
+					/* @__PURE__ */ h("code", {
+						className: "inline-flex items-center gap-1.5 px-2.5 py-1 bg-bg-sunken border border-border-default rounded text-xs font-mono text-text-primary cursor-pointer hover:bg-bg-elevated transition-colors",
+						onClick: () => O(g),
+						title: S("vibecontrols.shared.agentSetupBanner.clickToCopy", "Click to copy"),
+						children: [
+							/* @__PURE__ */ m(l, { className: "w-3 h-3" }),
+							g,
+							w ? /* @__PURE__ */ m(a, { className: "w-3 h-3 text-status-success-text" }) : /* @__PURE__ */ m(o, { className: "w-3 h-3 text-text-muted" })
+						]
+					}),
+					/* @__PURE__ */ h("button", {
+						onClick: () => C("/getting-started"),
+						className: "text-sm text-accent-purple hover:underline flex items-center gap-1",
+						children: [
+							S("vibecontrols.shared.agentSetupBanner.setupGuide", "Setup guide"),
+							" ",
+							/* @__PURE__ */ m(c, { className: "w-3 h-3" })
+						]
+					})
+				]
+			}),
+			y && /* @__PURE__ */ m("button", {
+				onClick: k,
+				className: "flex-shrink-0 p-1 text-text-muted hover:text-text-secondary rounded transition-colors",
+				title: S("vibecontrols.shared.agentSetupBanner.dismiss", "Dismiss"),
+				children: /* @__PURE__ */ m(u, { className: "w-4 h-4" })
+			})
+		]
+	}) }) : /* @__PURE__ */ m(f, { children: !E && /* @__PURE__ */ h(p.div, {
+		initial: {
+			opacity: 0,
+			y: -8,
+			height: 0
+		},
+		animate: {
+			opacity: 1,
+			y: 0,
+			height: "auto"
+		},
+		exit: {
+			opacity: 0,
+			y: -8,
+			height: 0
+		},
+		transition: A,
+		className: `relative border border-accent-purple/20 bg-accent-purple-subtle rounded-lg overflow-hidden ${x}`,
+		children: [y && /* @__PURE__ */ m("button", {
+			onClick: k,
+			className: "absolute top-3 right-3 p-1 text-text-muted hover:text-text-secondary rounded transition-colors z-10",
+			title: S("vibecontrols.shared.agentSetupBanner.dismiss", "Dismiss"),
+			children: /* @__PURE__ */ m(u, { className: "w-4 h-4" })
+		}), /* @__PURE__ */ h("div", {
+			className: "p-5 sm:p-6",
+			children: [
+				/* @__PURE__ */ h("div", {
+					className: "flex items-start gap-3 mb-4",
+					children: [/* @__PURE__ */ m("div", {
+						className: "flex-shrink-0 w-10 h-10 rounded-lg bg-accent-purple/10 flex items-center justify-center",
+						children: /* @__PURE__ */ m(s, { className: "w-5 h-5 text-accent-purple" })
+					}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h3", {
+						className: "text-base font-semibold text-text-primary",
+						children: S("vibecontrols.shared.agentSetupBanner.title", "Get Started with VibeControls Agent")
+					}), /* @__PURE__ */ m("p", {
+						className: "text-sm text-text-secondary mt-0.5",
+						children: S("vibecontrols.shared.agentSetupBanner.description", "Install the CLI on any machine you want to manage. The only prerequisite is bun — the curl script installs it for you.")
+					})] })]
+				}),
+				/* @__PURE__ */ m("div", {
+					className: "ml-0 sm:ml-13",
+					children: /* @__PURE__ */ m(n, { compact: !0 })
+				}),
+				/* @__PURE__ */ h("div", {
+					className: "flex flex-wrap items-center gap-3 mt-5 ml-0 sm:ml-13",
+					children: [/* @__PURE__ */ h("button", {
+						onClick: () => C("/getting-started"),
+						className: "inline-flex items-center gap-2 px-4 py-2 text-sm bg-accent-purple text-text-inverse rounded-md hover:bg-accent-purple/90 transition-colors",
+						children: [S("vibecontrols.shared.agentSetupBanner.viewFullSetupGuide", "View full setup guide"), /* @__PURE__ */ m(c, { className: "w-3.5 h-3.5" })]
+					}), /* @__PURE__ */ h("a", {
+						href: _,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						className: "inline-flex items-center gap-2 px-4 py-2 text-sm border border-border-default text-text-primary rounded-md hover:bg-bg-sunken transition-colors",
+						children: [S("vibecontrols.shared.agentSetupBanner.npmPackage", "npm package"), /* @__PURE__ */ m(c, { className: "w-3.5 h-3.5" })]
+					})]
+				})
+			]
+		})]
+	}) });
+}
+//#endregion
+export { v as AgentSetupBanner };
+
+//# sourceMappingURL=AgentSetupBanner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentSetupBanner.js","names":[],"sources":["../../../src/components/shared/AgentSetupBanner.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Download, Copy, Check, ExternalLink, X, Terminal } from 'lucide-react';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { getProfileScopedKey } from '@burdenoff/fe-libs/shared/utils';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { InstallTabs } from './InstallTabs';\n\ninterface AgentSetupBannerProps {\n  /** Compact mode shows a single-line banner; full mode shows a multi-step card */\n  variant?: 'compact' | 'full';\n  /** Allow the banner to be dismissed */\n  dismissible?: boolean;\n  /** Storage key for dismissed state */\n  dismissKey?: string;\n  /** Additional CSS class names */\n  className?: string;\n}\n\nconst QUICK_INSTALL = 'curl -fsSL https://vibecontrols.local.burdenoff.com/install | bash';\nconst NPM_URL = 'https://www.npmjs.com/package/@vibecontrols/agent';\n\n/**\n * Reusable banner/card prompting users to install the VibeControls Agent CLI.\n * Used across multiple pages (Overview, Agents, Sessions, Tunnels, SSH, etc.)\n *\n * The full variant mirrors the Getting Started page's tabbed install widget\n * (`InstallTabs`) so users see a single consistent install flow wherever\n * the banner shows up.\n */\nexport function AgentSetupBanner({\n  variant = 'compact',\n  dismissible = true,\n  dismissKey = 'vibecontrols-setup-banner-dismissed',\n  className = '',\n}: AgentSetupBannerProps) {\n  const tr = useTr();\n  const handleNavigate = useVibeNavigate();\n  const [copied, setCopied] = useState(false);\n  const [dismissed, setDismissed] = useState(() => {\n    try {\n      return localStorage.getItem(getProfileScopedKey(dismissKey)) === 'true';\n    } catch {\n      return false;\n    }\n  });\n\n  const handleCopy = useCallback(async (text: string) => {\n    try {\n      await navigator.clipboard.writeText(text);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch {\n      const el = document.createElement('textarea');\n      el.value = text;\n      document.body.appendChild(el);\n      el.select();\n      document.execCommand('copy');\n      document.body.removeChild(el);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    }\n  }, []);\n\n  const handleDismiss = useCallback(() => {\n    setDismissed(true);\n    try {\n      localStorage.setItem(getProfileScopedKey(dismissKey), 'true');\n    } catch {\n      // ignore\n    }\n  }, [dismissKey]);\n\n  const bannerTransition = { duration: 0.3, ease: [0.4, 0, 0.2, 1] as const };\n\n  // ─── Compact variant: single-line info banner ─────────────────────────\n  if (variant === 'compact') {\n    return (\n      <AnimatePresence>\n        {!dismissed && (\n          <motion.div\n            initial={{ opacity: 0, y: -8, height: 0 }}\n            animate={{ opacity: 1, y: 0, height: 'auto' }}\n            exit={{ opacity: 0, y: -8, height: 0 }}\n            transition={bannerTransition}\n            className={`relative flex items-center gap-3 px-4 py-3 bg-accent-purple-subtle border border-accent-purple/20 rounded-lg ${className}`}\n          >\n            <Download className=\"w-5 h-5 text-accent-purple flex-shrink-0\" />\n            <div className=\"flex-1 min-w-0 flex flex-wrap items-center gap-x-3 gap-y-1\">\n              <span className=\"text-sm font-medium text-text-primary\">\n                {tr(\n                  'vibecontrols.shared.agentSetupBanner.installPrompt',\n                  'Install the VibeControls Agent CLI to get started'\n                )}\n              </span>\n              <code\n                className=\"inline-flex items-center gap-1.5 px-2.5 py-1 bg-bg-sunken border border-border-default rounded text-xs font-mono text-text-primary cursor-pointer hover:bg-bg-elevated transition-colors\"\n                onClick={() => handleCopy(QUICK_INSTALL)}\n                title={tr('vibecontrols.shared.agentSetupBanner.clickToCopy', 'Click to copy')}\n              >\n                <Terminal className=\"w-3 h-3\" />\n                {QUICK_INSTALL}\n                {copied ? (\n                  <Check className=\"w-3 h-3 text-status-success-text\" />\n                ) : (\n                  <Copy className=\"w-3 h-3 text-text-muted\" />\n                )}\n              </code>\n              <button\n                onClick={() => handleNavigate('/getting-started')}\n                className=\"text-sm text-accent-purple hover:underline flex items-center gap-1\"\n              >\n                {tr('vibecontrols.shared.agentSetupBanner.setupGuide', 'Setup guide')}{' '}\n                <ExternalLink className=\"w-3 h-3\" />\n              </button>\n            </div>\n            {dismissible && (\n              <button\n                onClick={handleDismiss}\n                className=\"flex-shrink-0 p-1 text-text-muted hover:text-text-secondary rounded transition-colors\"\n                title={tr('vibecontrols.shared.agentSetupBanner.dismiss', 'Dismiss')}\n              >\n                <X className=\"w-4 h-4\" />\n              </button>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    );\n  }\n\n  // ─── Full variant: tabbed install card (mirrors Getting Started) ──────\n  return (\n    <AnimatePresence>\n      {!dismissed && (\n        <motion.div\n          initial={{ opacity: 0, y: -8, height: 0 }}\n          animate={{ opacity: 1, y: 0, height: 'auto' }}\n          exit={{ opacity: 0, y: -8, height: 0 }}\n          transition={bannerTransition}\n          className={`relative border border-accent-purple/20 bg-accent-purple-subtle rounded-lg overflow-hidden ${className}`}\n        >\n          {dismissible && (\n            <button\n              onClick={handleDismiss}\n              className=\"absolute top-3 right-3 p-1 text-text-muted hover:text-text-secondary rounded transition-colors z-10\"\n              title={tr('vibecontrols.shared.agentSetupBanner.dismiss', 'Dismiss')}\n            >\n              <X className=\"w-4 h-4\" />\n            </button>\n          )}\n\n          <div className=\"p-5 sm:p-6\">\n            <div className=\"flex items-start gap-3 mb-4\">\n              <div className=\"flex-shrink-0 w-10 h-10 rounded-lg bg-accent-purple/10 flex items-center justify-center\">\n                <Download className=\"w-5 h-5 text-accent-purple\" />\n              </div>\n              <div>\n                <h3 className=\"text-base font-semibold text-text-primary\">\n                  {tr(\n                    'vibecontrols.shared.agentSetupBanner.title',\n                    'Get Started with VibeControls Agent'\n                  )}\n                </h3>\n                <p className=\"text-sm text-text-secondary mt-0.5\">\n                  {tr(\n                    'vibecontrols.shared.agentSetupBanner.description',\n                    'Install the CLI on any machine you want to manage. The only prerequisite is bun — the curl script installs it for you.'\n                  )}\n                </p>\n              </div>\n            </div>\n\n            {/* Tabbed install widget mirrors the Getting Started page */}\n            <div className=\"ml-0 sm:ml-13\">\n              <InstallTabs compact />\n            </div>\n\n            {/* Actions */}\n            <div className=\"flex flex-wrap items-center gap-3 mt-5 ml-0 sm:ml-13\">\n              <button\n                onClick={() => handleNavigate('/getting-started')}\n                className=\"inline-flex items-center gap-2 px-4 py-2 text-sm bg-accent-purple text-text-inverse rounded-md hover:bg-accent-purple/90 transition-colors\"\n              >\n                {tr(\n                  'vibecontrols.shared.agentSetupBanner.viewFullSetupGuide',\n                  'View full setup guide'\n                )}\n                <ExternalLink className=\"w-3.5 h-3.5\" />\n              </button>\n              <a\n                href={NPM_URL}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"inline-flex items-center gap-2 px-4 py-2 text-sm border border-border-default text-text-primary rounded-md hover:bg-bg-sunken transition-colors\"\n              >\n                {tr('vibecontrols.shared.agentSetupBanner.npmPackage', 'npm package')}\n                <ExternalLink className=\"w-3.5 h-3.5\" />\n              </a>\n            </div>\n          </div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+
+interface CardProps {
+    children: ReactNode;
+    className?: string;
+    onClick?: () => void;
+    hoverable?: boolean;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+export declare function Card({ children, className, onClick, hoverable, padding, }: CardProps): import("react/jsx-runtime").JSX.Element;
+interface CardHeaderProps {
+    title: string;
+    subtitle?: string;
+    action?: ReactNode;
+    icon?: ReactNode;
+}
+export declare function CardHeader({ title, subtitle, action, icon }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+interface CardContentProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function CardContent({ children, className }: CardContentProps): import("react/jsx-runtime").JSX.Element;
+interface CardFooterProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function CardFooter({ children, className }: CardFooterProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/shared/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACvC;AAED,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAc,EACd,OAAO,EACP,SAAiB,EACjB,OAAc,GACf,EAAE,SAAS,2CAsCX;AAED,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,eAAe,2CAiB5E;AAED,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,EAAE,gBAAgB,2CAEzE;AAED,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,EAAE,eAAe,2CAEvE"}

package/dist/components/shared/Card.js

@@ -0,0 +1,30 @@
+import { motion as e, useReducedMotion as t } from "framer-motion";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/shared/Card.tsx
+function r({ children: r, className: i = "", onClick: a, hoverable: o = !1, padding: s = "md" }) {
+	let c = t(), l = `bg-bg-surface border border-border-default rounded-lg ${{
+		none: "",
+		sm: "p-3",
+		md: "p-4",
+		lg: "p-6"
+	}[s]}`, u = o || !!a;
+	return u && !c ? /* @__PURE__ */ n(a ? e.button : e.div, {
+		className: `${l} cursor-pointer ${i}`,
+		onClick: a,
+		whileHover: { boxShadow: "var(--shadow-md)" },
+		whileTap: a ? { scale: .98 } : void 0,
+		transition: {
+			duration: .15,
+			ease: "easeInOut"
+		},
+		children: r
+	}) : /* @__PURE__ */ n(a ? "button" : "div", {
+		className: `${l} ${u ? "hover:border-border-strong hover:shadow-md transition-all cursor-pointer" : ""} ${i}`,
+		onClick: a,
+		children: r
+	});
+}
+//#endregion
+export { r as Card };
+
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","names":[],"sources":["../../../src/components/shared/Card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { motion, useReducedMotion } from 'framer-motion';\n\ninterface CardProps {\n  children: ReactNode;\n  className?: string;\n  onClick?: () => void;\n  hoverable?: boolean;\n  padding?: 'none' | 'sm' | 'md' | 'lg';\n}\n\nexport function Card({\n  children,\n  className = '',\n  onClick,\n  hoverable = false,\n  padding = 'md',\n}: CardProps) {\n  const shouldReduceMotion = useReducedMotion();\n  const paddingStyles = {\n    none: '',\n    sm: 'p-3',\n    md: 'p-4',\n    lg: 'p-6',\n  };\n\n  const baseStyles = `bg-bg-surface border border-border-default rounded-lg ${paddingStyles[padding]}`;\n  const isInteractive = hoverable || !!onClick;\n\n  if (isInteractive && !shouldReduceMotion) {\n    const Component = onClick ? motion.button : motion.div;\n    return (\n      <Component\n        className={`${baseStyles} cursor-pointer ${className}`}\n        onClick={onClick}\n        whileHover={{ boxShadow: 'var(--shadow-md)' }}\n        whileTap={onClick ? { scale: 0.98 } : undefined}\n        transition={{ duration: 0.15, ease: 'easeInOut' }}\n      >\n        {children}\n      </Component>\n    );\n  }\n\n  const interactiveStyles = isInteractive\n    ? 'hover:border-border-strong hover:shadow-md transition-all cursor-pointer'\n    : '';\n\n  const Component = onClick ? 'button' : 'div';\n\n  return (\n    <Component className={`${baseStyles} ${interactiveStyles} ${className}`} onClick={onClick}>\n      {children}\n    </Component>\n  );\n}\n\ninterface CardHeaderProps {\n  title: string;\n  subtitle?: string;\n  action?: ReactNode;\n  icon?: ReactNode;\n}\n\nexport function CardHeader({ title, subtitle, action, icon }: CardHeaderProps) {\n  return (\n    <div className=\"flex items-start justify-between gap-3 mb-3\">\n      <div className=\"flex items-start gap-3 min-w-0\">\n        {icon && (\n          <div className=\"flex-shrink-0 w-10 h-10 rounded-lg bg-bg-sunken flex items-center justify-center\">\n            {icon}\n          </div>\n        )}\n        <div className=\"min-w-0\">\n          <h3 className=\"font-semibold text-text-primary truncate\">{title}</h3>\n          {subtitle && <p className=\"text-sm text-text-secondary truncate\">{subtitle}</p>}\n        </div>\n      </div>\n      {action && <div className=\"flex-shrink-0\">{action}</div>}\n    </div>\n  );\n}\n\ninterface CardContentProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport function CardContent({ children, className = '' }: CardContentProps) {\n  return <div className={className}>{children}</div>;\n}\n\ninterface CardFooterProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport function CardFooter({ children, className = '' }: CardFooterProps) {\n  return <div className={`mt-4 pt-3 border-t border-border-default ${className}`}>{children}</div>;\n}\n"],"mappings":";;;AAWA,SAAgB,EAAK,EACnB,aACA,eAAY,IACZ,YACA,eAAY,IACZ,aAAU,QACE;CACZ,IAAM,IAAqB,GAAkB,EAQvC,IAAa,yDAPG;EACpB,MAAM;EACN,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,CAEyF,MACpF,IAAgB,KAAa,CAAC,CAAC;AAuBrC,QArBI,KAAiB,CAAC,IAGlB,kBAFgB,IAAU,EAAO,SAAS,EAAO,KAEjD;EACE,WAAW,GAAG,EAAW,kBAAkB;EAClC;EACT,YAAY,EAAE,WAAW,oBAAoB;EAC7C,UAAU,IAAU,EAAE,OAAO,KAAM,GAAG,KAAA;EACtC,YAAY;GAAE,UAAU;GAAM,MAAM;GAAa;EAEhD;EACS,CAAA,GAWd,kBAHgB,IAAU,WAAW,OAGrC;EAAW,WAAW,GAAG,EAAW,GAPZ,IACtB,6EACA,GAKuD,GAAG;EAAsB;EAC/E;EACS,CAAA"}

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

@@ -0,0 +1,14 @@
+interface ConfirmDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: 'danger' | 'warning' | 'default';
+    isLoading?: boolean;
+}
+export declare function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, confirmLabel, cancelLabel, variant, isLoading, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ConfirmDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../src/components/shared/ConfirmDialog.tsx"],"names":[],"mappings":"AAKA,UAAU,kBAAkB;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,WAAW,EACX,OAAmB,EACnB,SAAiB,GAClB,EAAE,kBAAkB,kDAgHpB"}

package/dist/components/shared/ConfirmDialog.js

@@ -0,0 +1,117 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useEffect as t, useRef as n } from "react";
+import { AlertTriangle as r, X as i } from "lucide-react";
+import { AnimatePresence as a, motion as o, useReducedMotion as s } from "framer-motion";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/shared/ConfirmDialog.tsx
+function d({ isOpen: d, onClose: f, onConfirm: p, title: m, message: h, confirmLabel: g, cancelLabel: _, variant: v = "default", isLoading: y = !1 }) {
+	let b = e(), x = g ?? b("vibecontrols.shared.confirmDialog.confirm", "Confirm"), S = _ ?? b("vibecontrols.shared.confirmDialog.cancel", "Cancel"), C = n(null), w = s();
+	t(() => {
+		let e = C.current;
+		e && (d ? e.showModal() : e.close());
+	}, [d]);
+	let T = {
+		danger: {
+			icon: "bg-status-error-bg-subtle text-status-error-text",
+			button: "bg-status-error-bg text-text-inverse hover:bg-status-error-text-hover"
+		},
+		warning: {
+			icon: "bg-status-warning-bg-subtle text-status-warning-text",
+			button: "bg-status-warning-bg text-text-primary hover:bg-status-warning-text-hover"
+		},
+		default: {
+			icon: "bg-action-primary-bg text-action-primary-text",
+			button: "bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover"
+		}
+	}[v];
+	return d ? /* @__PURE__ */ l("dialog", {
+		ref: C,
+		className: "fixed inset-0 z-50 m-auto p-0 bg-transparent backdrop:bg-transparent",
+		onClose: f,
+		children: /* @__PURE__ */ l(a, { children: d && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(o.div, {
+			className: "fixed inset-0 bg-bg-overlay",
+			initial: w ? void 0 : { opacity: 0 },
+			animate: { opacity: 1 },
+			exit: { opacity: 0 },
+			transition: { duration: .2 },
+			onClick: f
+		}), /* @__PURE__ */ u(o.div, {
+			className: "relative w-full max-w-md bg-bg-surface rounded-lg shadow-xl",
+			initial: w ? void 0 : {
+				opacity: 0,
+				scale: .95,
+				y: 8
+			},
+			animate: {
+				opacity: 1,
+				scale: 1,
+				y: 0
+			},
+			exit: {
+				opacity: 0,
+				scale: .95,
+				y: 8
+			},
+			transition: {
+				duration: .2,
+				ease: [
+					.2,
+					0,
+					0,
+					1
+				]
+			},
+			children: [/* @__PURE__ */ u("div", {
+				className: "flex items-start gap-4 p-6",
+				children: [
+					/* @__PURE__ */ l(o.div, {
+						className: `flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${T.icon}`,
+						initial: w ? void 0 : { scale: .5 },
+						animate: { scale: 1 },
+						transition: {
+							type: "spring",
+							stiffness: 400,
+							damping: 15,
+							delay: .1
+						},
+						children: /* @__PURE__ */ l(r, { className: "w-5 h-5" })
+					}),
+					/* @__PURE__ */ u("div", {
+						className: "flex-1 min-w-0",
+						children: [/* @__PURE__ */ l("h3", {
+							className: "text-lg font-semibold text-text-primary",
+							children: m
+						}), /* @__PURE__ */ l("p", {
+							className: "mt-2 text-sm text-text-secondary",
+							children: h
+						})]
+					}),
+					/* @__PURE__ */ l("button", {
+						onClick: f,
+						className: "flex-shrink-0 p-1 rounded hover:bg-bg-sunken transition-colors",
+						children: /* @__PURE__ */ l(i, { className: "w-5 h-5 text-text-secondary" })
+					})
+				]
+			}), /* @__PURE__ */ u("div", {
+				className: "flex items-center justify-end gap-3 px-6 py-4 bg-bg-sunken rounded-b-lg",
+				children: [/* @__PURE__ */ l(o.button, {
+					onClick: f,
+					disabled: y,
+					className: "px-4 py-2 text-sm font-medium text-text-primary bg-bg-surface border border-border-default rounded-md hover:bg-bg-elevated transition-colors disabled:opacity-50",
+					whileTap: w ? void 0 : { scale: .99 },
+					children: S
+				}), /* @__PURE__ */ l(o.button, {
+					onClick: p,
+					disabled: y,
+					className: `px-4 py-2 text-sm font-medium rounded-md transition-colors disabled:opacity-50 ${T.button}`,
+					whileTap: w ? void 0 : { scale: .99 },
+					children: y ? b("vibecontrols.shared.confirmDialog.processing", "Processing...") : x
+				})]
+			})]
+		})] }) })
+	}) : null;
+}
+//#endregion
+export { d as ConfirmDialog };
+
+//# sourceMappingURL=ConfirmDialog.js.map