@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/components/agent-manager/dialogs/SessionSearchDialog.js

@@ -0,0 +1,162 @@
+import { useTr as e } from "../../../shared/hooks/useTr.js";
+import { searchSessions as t } from "../../../services/aiApi.js";
+import { useAgentManagerStore as n } from "../../../store/agentManagerStore.js";
+import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
+import { MessageSquare as s, Search as c, X as l } from "lucide-react";
+import { AnimatePresence as u, motion as d, useReducedMotion as f } from "framer-motion";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/agent-manager/dialogs/SessionSearchDialog.tsx
+function h({ isOpen: h, agentId: g, onClose: _ }) {
+	let [v, y] = o(""), [b, x] = o([]), [S, C] = o(!1), w = e(), T = a(null), E = a(null), D = f(), O = n((e) => e.openSession);
+	i(() => {
+		h && (y(""), x([]), setTimeout(() => T.current?.focus(), 50));
+	}, [h]), i(() => {
+		if (!v.trim()) {
+			x([]), C(!1);
+			return;
+		}
+		return C(!0), E.current && clearTimeout(E.current), E.current = setTimeout(async () => {
+			try {
+				x(await t(g, v.trim()));
+			} catch {
+				x([]);
+			} finally {
+				C(!1);
+			}
+		}, 300), () => {
+			E.current && clearTimeout(E.current);
+		};
+	}, [v, g]);
+	let k = r((e) => {
+		O(e.sessionId, e.sessionName), _();
+	}, [O, _]);
+	return i(() => {
+		if (!h) return;
+		function e(e) {
+			e.key === "Escape" && _();
+		}
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [h, _]), h ? /* @__PURE__ */ p(u, { children: h && /* @__PURE__ */ m("div", {
+		className: "fixed inset-0 z-50 flex items-start justify-center pt-[15vh]",
+		children: [/* @__PURE__ */ p(d.div, {
+			className: "absolute inset-0 bg-bg-overlay",
+			initial: D ? void 0 : { opacity: 0 },
+			animate: { opacity: 1 },
+			exit: { opacity: 0 },
+			transition: { duration: .15 },
+			onClick: _
+		}), /* @__PURE__ */ m(d.div, {
+			className: "relative w-full max-w-xl mx-4 rounded-lg border border-border-default bg-bg-surface shadow-xl overflow-hidden",
+			initial: D ? void 0 : {
+				opacity: 0,
+				y: -8,
+				scale: .98
+			},
+			animate: {
+				opacity: 1,
+				y: 0,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				y: -8,
+				scale: .98
+			},
+			transition: {
+				duration: .15,
+				ease: [
+					.2,
+					0,
+					0,
+					1
+				]
+			},
+			children: [
+				/* @__PURE__ */ m("div", {
+					className: "flex items-center gap-3 px-4 py-3 border-b border-border-default",
+					children: [
+						/* @__PURE__ */ p(c, { className: "w-5 h-5 text-text-tertiary flex-shrink-0" }),
+						/* @__PURE__ */ p("input", {
+							ref: T,
+							type: "text",
+							value: v,
+							onChange: (e) => y(e.target.value),
+							placeholder: w("vibecontrols.agentManager.dialogs.searchPlaceholder", "Search sessions and messages..."),
+							className: "flex-1 bg-transparent text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none"
+						}),
+						v && /* @__PURE__ */ p("button", {
+							type: "button",
+							onClick: () => y(""),
+							className: "p-0.5 rounded hover:bg-bg-elevated transition-colors",
+							children: /* @__PURE__ */ p(l, { className: "w-4 h-4 text-text-tertiary" })
+						})
+					]
+				}),
+				/* @__PURE__ */ m("div", {
+					className: "max-h-[50vh] overflow-y-auto",
+					children: [
+						S && /* @__PURE__ */ p("div", {
+							className: "px-4 py-6 text-center text-sm text-text-tertiary",
+							children: w("vibecontrols.agentManager.dialogs.searching", "Searching...")
+						}),
+						!S && v.trim() && b.length === 0 && /* @__PURE__ */ p("div", {
+							className: "px-4 py-6 text-center text-sm text-text-tertiary",
+							children: w("vibecontrols.agentManager.dialogs.noResultsFound", "No results found")
+						}),
+						!S && b.length > 0 && /* @__PURE__ */ p("div", {
+							className: "py-1",
+							children: b.map((e, t) => /* @__PURE__ */ m("button", {
+								type: "button",
+								onClick: () => k(e),
+								className: "w-full text-left px-4 py-3 hover:bg-bg-elevated transition-colors",
+								children: [/* @__PURE__ */ m("div", {
+									className: "flex items-center gap-2 mb-1",
+									children: [
+										/* @__PURE__ */ p(s, { className: "w-3.5 h-3.5 text-text-tertiary flex-shrink-0" }),
+										/* @__PURE__ */ p("span", {
+											className: "text-sm font-medium text-text-primary truncate",
+											children: e.sessionName
+										}),
+										/* @__PURE__ */ p("span", {
+											className: "text-[10px] text-text-tertiary ml-auto flex-shrink-0",
+											children: new Date(e.timestamp).toLocaleDateString()
+										})
+									]
+								}), /* @__PURE__ */ p("p", {
+									className: "text-xs text-text-secondary line-clamp-2 pl-5.5",
+									children: e.content
+								})]
+							}, `${e.sessionId}-${e.messageId ?? t}`))
+						}),
+						!v.trim() && /* @__PURE__ */ p("div", {
+							className: "px-4 py-6 text-center text-sm text-text-tertiary",
+							children: w("vibecontrols.agentManager.dialogs.typeToSearch", "Type to search across all sessions")
+						})
+					]
+				}),
+				/* @__PURE__ */ m("div", {
+					className: "flex items-center gap-4 px-4 py-2 border-t border-border-default bg-bg-sunken text-[10px] text-text-tertiary",
+					children: [/* @__PURE__ */ m("span", { children: [
+						/* @__PURE__ */ p("kbd", {
+							className: "px-1 py-0.5 rounded bg-bg-elevated border border-border-default font-mono",
+							children: "Esc"
+						}),
+						" ",
+						"to close"
+					] }), /* @__PURE__ */ m("span", { children: [
+						/* @__PURE__ */ p("kbd", {
+							className: "px-1 py-0.5 rounded bg-bg-elevated border border-border-default font-mono",
+							children: "Enter"
+						}),
+						" ",
+						"to select"
+					] })]
+				})
+			]
+		})]
+	}) }) : null;
+}
+//#endregion
+export { h as SessionSearchDialog };
+
+//# sourceMappingURL=SessionSearchDialog.js.map

package/dist/components/agent-manager/dialogs/SessionSearchDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionSearchDialog.js","names":[],"sources":["../../../../src/components/agent-manager/dialogs/SessionSearchDialog.tsx"],"sourcesContent":["/**\n * Cmd+K style session search dialog.\n *\n * Full-screen overlay with a prominent search input. Results appear\n * in real-time (debounced) and clicking a result opens the session tab\n * and scrolls to the matched message.\n */\n\nimport { useState, useEffect, useCallback, useRef } from 'react';\nimport { Search, X, MessageSquare } from 'lucide-react';\nimport { motion, AnimatePresence, useReducedMotion } from 'framer-motion';\nimport { searchSessions, type SearchResult } from '@/services/aiApi';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { useTr } from '../../../shared/hooks/useTr';\n\ninterface SessionSearchDialogProps {\n  isOpen: boolean;\n  agentId: string;\n  onClose: () => void;\n}\n\nexport function SessionSearchDialog({ isOpen, agentId, onClose }: SessionSearchDialogProps) {\n  const [query, setQuery] = useState('');\n  const [results, setResults] = useState<SearchResult[]>([]);\n  const [searching, setSearching] = useState(false);\n  const tr = useTr();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const shouldReduceMotion = useReducedMotion();\n\n  const openSession = useAgentManagerStore((s) => s.openSession);\n\n  // Focus input when opened\n  useEffect(() => {\n    if (isOpen) {\n      setQuery('');\n      setResults([]);\n      setTimeout(() => inputRef.current?.focus(), 50);\n    }\n  }, [isOpen]);\n\n  // Debounced search\n  useEffect(() => {\n    if (!query.trim()) {\n      setResults([]);\n      setSearching(false);\n      return;\n    }\n\n    setSearching(true);\n\n    if (debounceRef.current) {\n      clearTimeout(debounceRef.current);\n    }\n\n    debounceRef.current = setTimeout(async () => {\n      try {\n        const data = await searchSessions(agentId, query.trim());\n        setResults(data);\n      } catch {\n        setResults([]);\n      } finally {\n        setSearching(false);\n      }\n    }, 300);\n\n    return () => {\n      if (debounceRef.current) {\n        clearTimeout(debounceRef.current);\n      }\n    };\n  }, [query, agentId]);\n\n  const handleSelect = useCallback(\n    (result: SearchResult) => {\n      openSession(result.sessionId, result.sessionName);\n      onClose();\n    },\n    [openSession, onClose]\n  );\n\n  // Close on Escape\n  useEffect(() => {\n    if (!isOpen) return;\n    function handleKeyDown(e: KeyboardEvent) {\n      if (e.key === 'Escape') {\n        onClose();\n      }\n    }\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isOpen, onClose]);\n\n  if (!isOpen) return null;\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <div className=\"fixed inset-0 z-50 flex items-start justify-center pt-[15vh]\">\n          <motion.div\n            className=\"absolute inset-0 bg-bg-overlay\"\n            initial={shouldReduceMotion ? undefined : { opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.15 }}\n            onClick={onClose}\n          />\n          <motion.div\n            className=\"relative w-full max-w-xl mx-4 rounded-lg border border-border-default bg-bg-surface shadow-xl overflow-hidden\"\n            initial={shouldReduceMotion ? undefined : { opacity: 0, y: -8, scale: 0.98 }}\n            animate={{ opacity: 1, y: 0, scale: 1 }}\n            exit={{ opacity: 0, y: -8, scale: 0.98 }}\n            transition={{ duration: 0.15, ease: [0.2, 0, 0, 1] }}\n          >\n            {/* Search input */}\n            <div className=\"flex items-center gap-3 px-4 py-3 border-b border-border-default\">\n              <Search className=\"w-5 h-5 text-text-tertiary flex-shrink-0\" />\n              <input\n                ref={inputRef}\n                type=\"text\"\n                value={query}\n                onChange={(e) => setQuery(e.target.value)}\n                placeholder={tr(\n                  'vibecontrols.agentManager.dialogs.searchPlaceholder',\n                  'Search sessions and messages...'\n                )}\n                className=\"flex-1 bg-transparent text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none\"\n              />\n              {query && (\n                <button\n                  type=\"button\"\n                  onClick={() => setQuery('')}\n                  className=\"p-0.5 rounded hover:bg-bg-elevated transition-colors\"\n                >\n                  <X className=\"w-4 h-4 text-text-tertiary\" />\n                </button>\n              )}\n            </div>\n\n            {/* Results */}\n            <div className=\"max-h-[50vh] overflow-y-auto\">\n              {searching && (\n                <div className=\"px-4 py-6 text-center text-sm text-text-tertiary\">\n                  {tr('vibecontrols.agentManager.dialogs.searching', 'Searching...')}\n                </div>\n              )}\n\n              {!searching && query.trim() && results.length === 0 && (\n                <div className=\"px-4 py-6 text-center text-sm text-text-tertiary\">\n                  {tr('vibecontrols.agentManager.dialogs.noResultsFound', 'No results found')}\n                </div>\n              )}\n\n              {!searching && results.length > 0 && (\n                <div className=\"py-1\">\n                  {results.map((result, index) => (\n                    <button\n                      key={`${result.sessionId}-${result.messageId ?? index}`}\n                      type=\"button\"\n                      onClick={() => handleSelect(result)}\n                      className=\"w-full text-left px-4 py-3 hover:bg-bg-elevated transition-colors\"\n                    >\n                      <div className=\"flex items-center gap-2 mb-1\">\n                        <MessageSquare className=\"w-3.5 h-3.5 text-text-tertiary flex-shrink-0\" />\n                        <span className=\"text-sm font-medium text-text-primary truncate\">\n                          {result.sessionName}\n                        </span>\n                        <span className=\"text-[10px] text-text-tertiary ml-auto flex-shrink-0\">\n                          {new Date(result.timestamp).toLocaleDateString()}\n                        </span>\n                      </div>\n                      <p className=\"text-xs text-text-secondary line-clamp-2 pl-5.5\">\n                        {result.content}\n                      </p>\n                    </button>\n                  ))}\n                </div>\n              )}\n\n              {!query.trim() && (\n                <div className=\"px-4 py-6 text-center text-sm text-text-tertiary\">\n                  {tr(\n                    'vibecontrols.agentManager.dialogs.typeToSearch',\n                    'Type to search across all sessions'\n                  )}\n                </div>\n              )}\n            </div>\n\n            {/* Footer hint */}\n            <div className=\"flex items-center gap-4 px-4 py-2 border-t border-border-default bg-bg-sunken text-[10px] text-text-tertiary\">\n              <span>\n                <kbd className=\"px-1 py-0.5 rounded bg-bg-elevated border border-border-default font-mono\">\n                  Esc\n                </kbd>{' '}\n                to close\n              </span>\n              <span>\n                <kbd className=\"px-1 py-0.5 rounded bg-bg-elevated border border-border-default font-mono\">\n                  Enter\n                </kbd>{' '}\n                to select\n              </span>\n            </div>\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n}\n"],"mappings":"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"}

package/dist/components/agent-manager/index.d.ts

@@ -0,0 +1,16 @@
+export { AgentManagerLayout } from './AgentManagerLayout';
+export { AgentManagerSidebar } from './AgentManagerSidebar';
+export { AgentManagerSessionList } from './AgentManagerSessionList';
+export { AgentManagerSessionItem } from './AgentManagerSessionItem';
+export { AgentManagerBulkActions } from './AgentManagerBulkActions';
+export { AgentManagerTabBar } from './AgentManagerTabBar';
+export { AgentManagerTab } from './AgentManagerTab';
+export { AgentManagerCenter } from './AgentManagerCenter';
+export { AgentManagerChatPane } from './AgentManagerChatPane';
+export { AgentManagerMessageList } from './AgentManagerMessageList';
+export { AgentManagerMessageItem } from './AgentManagerMessageItem';
+export { AgentManagerStreamingIndicator } from './AgentManagerStreamingIndicator';
+export { AgentManagerDetailPanel } from './AgentManagerDetailPanel';
+export { AgentManagerInputArea } from './AgentManagerInputArea';
+export { AgentManagerAdminBar } from './AgentManagerAdminBar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/agent-manager/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/agent-manager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/agents/AgentCard.d.ts

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { Agent } from './types';
+
+export interface AgentCardProps {
+    agent: Agent;
+    onSelect?: (agent: Agent) => void;
+    onConfigure?: (agent: Agent) => void;
+    onSettings?: (agent: Agent) => void;
+    onStart?: (agent: Agent) => void;
+    onStop?: (agent: Agent) => void;
+    onDisconnect?: (agent: Agent) => void;
+    onEditTunnelUrl?: (agent: Agent) => void;
+    selected?: boolean;
+    onToggleSelect?: () => void;
+    className?: string;
+}
+/**
+ * AgentCard - Display agent information in a card format
+ *
+ * @example
+ * ```tsx
+ * <AgentCard
+ *   agent={myAgent}
+ *   onSelect={handleSelect}
+ *   onConfigure={handleConfigure}
+ * />
+ * ```
+ */
+export declare const AgentCard: FC<AgentCardProps>;
+//# sourceMappingURL=AgentCard.d.ts.map

package/dist/components/agents/AgentCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentCard.d.ts","sourceRoot":"","sources":["../../../src/components/agents/AgentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAgBhC,OAAO,KAAK,EAAE,KAAK,EAAe,MAAM,SAAS,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACtC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA+QxC,CAAC"}

package/dist/components/agents/AgentCard.js

@@ -0,0 +1,209 @@
+import { AgentStatusBadge as e } from "./AgentStatusBadge.js";
+import { useState as t } from "react";
+import { useI18n as n } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Clock as r, Cpu as i, Globe as a, Link as o, MoreVertical as s, Play as c, Server as l, Settings as u, Square as d } from "lucide-react";
+import { AnimatePresence as f, motion as p } from "framer-motion";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/agents/AgentCard.tsx
+var g = ({ agent: g, onSelect: _, onConfigure: v, onSettings: y, onStart: b, onStop: x, onDisconnect: S, onEditTunnelUrl: C, selected: w = !1, onToggleSelect: T, className: E = "" }) => {
+	let { t: D } = n(), O = (e, t) => {
+		let n = D(e);
+		return n === e ? t : n;
+	}, k = v || y, [A, j] = t(!1), M = (() => {
+		if (g.status) return g.status;
+		if (!g.isActive) return "OFFLINE";
+		if (g.lastHeartbeat) {
+			let e = new Date(g.lastHeartbeat).getTime();
+			if (Date.now() - e > 300 * 1e3) return "DEGRADED";
+		}
+		return "ACTIVE";
+	})(), N = (e) => {
+		if (!e) return O("agentsPage.never", "Never");
+		let t = Date.now() - new Date(e).getTime();
+		return t < 6e4 ? O("agentsPage.justNow", "Just now") : t < 36e5 ? `${Math.floor(t / 6e4)}m ago` : t < 864e5 ? `${Math.floor(t / 36e5)}h ago` : `${Math.floor(t / 864e5)}d ago`;
+	}, P = {
+		darwin: "🍎",
+		linux: "🐧",
+		windows: "🪟"
+	}[g.platform || ""] || "💻";
+	return /* @__PURE__ */ h(p.div, {
+		whileHover: {
+			y: -2,
+			transition: {
+				duration: .15,
+				ease: [
+					.4,
+					0,
+					.2,
+					1
+				]
+			}
+		},
+		whileTap: { scale: .98 },
+		className: `bg-bg-surface border rounded-lg p-4 hover:border-border-strong hover:shadow-md transition-all cursor-pointer ${w ? "border-action-primary-bg ring-1 ring-action-primary-bg/30" : "border-border-default"} ${E}`,
+		onClick: () => _?.(g),
+		children: [
+			/* @__PURE__ */ h("div", {
+				className: "flex items-start justify-between gap-2",
+				children: [/* @__PURE__ */ h("div", {
+					className: "flex items-start gap-2 sm:gap-3 min-w-0 flex-1",
+					children: [
+						T && /* @__PURE__ */ m("button", {
+							onClick: (e) => {
+								e.stopPropagation(), T();
+							},
+							className: `flex-shrink-0 w-5 h-5 min-w-[1.25rem] min-h-[1.25rem] rounded border transition-colors mt-0.5 ${w ? "bg-action-primary-bg border-action-primary-bg text-action-primary-text" : "border-border-default hover:border-border-strong bg-bg-surface"} flex items-center justify-center`,
+							children: w && /* @__PURE__ */ m("svg", {
+								className: "w-3 h-3",
+								fill: "none",
+								viewBox: "0 0 24 24",
+								stroke: "currentColor",
+								strokeWidth: 3,
+								children: /* @__PURE__ */ m("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									d: "M5 13l4 4L19 7"
+								})
+							})
+						}),
+						/* @__PURE__ */ m("div", {
+							className: "flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-bg-sunken flex items-center justify-center",
+							children: /* @__PURE__ */ m(l, { className: "w-4 h-4 sm:w-5 sm:h-5 text-text-secondary" })
+						}),
+						/* @__PURE__ */ h("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ h("div", {
+								className: "flex items-center gap-1.5 sm:gap-2 flex-wrap",
+								children: [/* @__PURE__ */ m("h3", {
+									className: "font-semibold text-text-primary truncate max-w-[120px] sm:max-w-none text-sm sm:text-base",
+									children: g.name
+								}), /* @__PURE__ */ m("span", {
+									className: "text-base sm:text-lg flex-shrink-0",
+									children: P
+								})]
+							}), /* @__PURE__ */ m("p", {
+								className: "text-xs sm:text-sm text-text-secondary truncate",
+								children: g.hostname || `ID: ${g.id}`
+							})]
+						})
+					]
+				}), /* @__PURE__ */ h("div", {
+					className: "flex items-center gap-1 sm:gap-2 flex-shrink-0",
+					children: [/* @__PURE__ */ m(e, { status: M }), (k || b || x) && /* @__PURE__ */ h("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ m("button", {
+							onClick: (e) => {
+								e.stopPropagation(), j(!A);
+							},
+							className: "p-1 sm:p-1.5 rounded hover:bg-bg-sunken transition-colors flex items-center justify-center",
+							"aria-label": "Agent actions menu",
+							children: /* @__PURE__ */ m(s, { className: "w-4 h-4 text-text-primary opacity-70 hover:opacity-100" })
+						}), /* @__PURE__ */ m(f, { children: A && /* @__PURE__ */ h(p.div, {
+							initial: {
+								opacity: 0,
+								scale: .95,
+								y: -4
+							},
+							animate: {
+								opacity: 1,
+								scale: 1,
+								y: 0
+							},
+							exit: {
+								opacity: 0,
+								scale: .95,
+								y: -4
+							},
+							transition: { duration: .15 },
+							className: "absolute right-0 mt-1 w-40 bg-bg-surface border border-border-default rounded-lg shadow-lg z-10",
+							children: [
+								M === "ACTIVE" && x && /* @__PURE__ */ h(p.button, {
+									whileTap: { scale: .97 },
+									onClick: (e) => {
+										e.stopPropagation(), x(g), j(!1);
+									},
+									className: "flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-t-lg",
+									children: [/* @__PURE__ */ m(d, { className: "w-4 h-4" }), O("agentsPage.stopAgent", "Stop Agent")]
+								}),
+								(M === "STOPPED" || M === "OFFLINE") && b && /* @__PURE__ */ h(p.button, {
+									whileTap: { scale: .97 },
+									onClick: (e) => {
+										e.stopPropagation(), b(g), j(!1);
+									},
+									className: "flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-t-lg",
+									children: [/* @__PURE__ */ m(c, { className: "w-4 h-4" }), O("agentsPage.startAgent", "Start Agent")]
+								}),
+								(M === "ACTIVE" || M === "STOPPED" || M === "OFFLINE") && S && /* @__PURE__ */ h(p.button, {
+									whileTap: { scale: .97 },
+									onClick: (e) => {
+										e.stopPropagation(), S(g), j(!1);
+									},
+									className: "flex items-center gap-2 w-full px-3 py-2 text-sm text-action-danger-text hover:bg-bg-sunken",
+									children: [/* @__PURE__ */ m(d, { className: "w-4 h-4" }), M === "OFFLINE" ? "Clear Connection" : "Disconnect"]
+								}),
+								C && /* @__PURE__ */ h(p.button, {
+									whileTap: { scale: .97 },
+									onClick: (e) => {
+										e.stopPropagation(), C(g), j(!1);
+									},
+									className: "flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken",
+									children: [/* @__PURE__ */ m(o, { className: "w-4 h-4" }), "Edit Tunnel"]
+								}),
+								k && /* @__PURE__ */ h(p.button, {
+									whileTap: { scale: .97 },
+									onClick: (e) => {
+										e.stopPropagation(), k(g), j(!1);
+									},
+									className: "flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-b-lg",
+									children: [/* @__PURE__ */ m(u, { className: "w-4 h-4" }), "Settings"]
+								})
+							]
+						}) })]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ h("div", {
+				className: "mt-4 grid grid-cols-2 gap-3 text-sm",
+				children: [/* @__PURE__ */ h("div", {
+					className: "flex items-center gap-2 text-text-secondary",
+					children: [/* @__PURE__ */ m(r, { className: "w-4 h-4" }), /* @__PURE__ */ m("span", { children: N(g.lastHeartbeat) })]
+				}), g.architecture && /* @__PURE__ */ h("div", {
+					className: "flex items-center gap-2 text-text-secondary",
+					children: [/* @__PURE__ */ m(i, { className: "w-4 h-4" }), /* @__PURE__ */ m("span", { children: g.architecture })]
+				})]
+			}),
+			g.tunnelUrl && /* @__PURE__ */ h("div", {
+				className: "mt-3 flex items-center gap-2 text-sm",
+				children: [
+					/* @__PURE__ */ m(a, { className: "w-4 h-4 text-status-success-text flex-shrink-0" }),
+					/* @__PURE__ */ m("a", {
+						href: g.tunnelUrl,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						onClick: (e) => e.stopPropagation(),
+						className: "text-action-primary-text hover:underline truncate",
+						children: g.tunnelUrl
+					}),
+					g.tunnelStatus && /* @__PURE__ */ m("span", {
+						className: `px-1.5 py-0.5 text-xs rounded ${g.tunnelStatus === "CONNECTED" || g.tunnelStatus === "ACTIVE" ? "bg-status-success-bg text-status-success-text" : "bg-bg-sunken text-text-secondary"}`,
+						children: g.tunnelStatus
+					})
+				]
+			}),
+			g.capabilities && g.capabilities.length > 0 && /* @__PURE__ */ h("div", {
+				className: "mt-3 flex flex-wrap gap-1",
+				children: [g.capabilities.slice(0, 4).map((e) => /* @__PURE__ */ m("span", {
+					className: "px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded",
+					children: e
+				}, e)), g.capabilities.length > 4 && /* @__PURE__ */ h("span", {
+					className: "px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded",
+					children: ["+", g.capabilities.length - 4]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { g as AgentCard };
+
+//# sourceMappingURL=AgentCard.js.map

package/dist/components/agents/AgentCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentCard.js","names":[],"sources":["../../../src/components/agents/AgentCard.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useState } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport {\n  Server,\n  Clock,\n  Cpu,\n  MoreVertical,\n  Play,\n  Square,\n  Settings,\n  Globe,\n  Link,\n} from 'lucide-react';\nimport { AgentStatusBadge } from './AgentStatusBadge';\nimport type { Agent, AgentStatus } from './types';\n\nexport interface AgentCardProps {\n  agent: Agent;\n  onSelect?: (agent: Agent) => void;\n  onConfigure?: (agent: Agent) => void;\n  onSettings?: (agent: Agent) => void;\n  onStart?: (agent: Agent) => void;\n  onStop?: (agent: Agent) => void;\n  onDisconnect?: (agent: Agent) => void;\n  onEditTunnelUrl?: (agent: Agent) => void;\n  selected?: boolean;\n  onToggleSelect?: () => void;\n  className?: string;\n}\n\n/**\n * AgentCard - Display agent information in a card format\n *\n * @example\n * ```tsx\n * <AgentCard\n *   agent={myAgent}\n *   onSelect={handleSelect}\n *   onConfigure={handleConfigure}\n * />\n * ```\n */\nexport const AgentCard: FC<AgentCardProps> = ({\n  agent,\n  onSelect,\n  onConfigure,\n  onSettings,\n  onStart,\n  onStop,\n  onDisconnect,\n  onEditTunnelUrl,\n  selected = false,\n  onToggleSelect,\n  className = '',\n}) => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string) => {\n    const v = t(key);\n    return v === key ? fallback : v;\n  };\n  // Support both onConfigure and onSettings\n  const handleConfigure = onConfigure || onSettings;\n  const [showMenu, setShowMenu] = useState(false);\n\n  const getStatus = (): AgentStatus => {\n    if (agent.status) return agent.status;\n    if (!agent.isActive) return 'OFFLINE';\n\n    if (agent.lastHeartbeat) {\n      const lastHeartbeatTime = new Date(agent.lastHeartbeat).getTime();\n      const now = Date.now();\n      const diff = now - lastHeartbeatTime;\n\n      // If heartbeat is older than 5 minutes, consider it inactive\n      if (diff > 5 * 60 * 1000) return 'DEGRADED';\n    }\n\n    return 'ACTIVE';\n  };\n\n  const status = getStatus();\n\n  const formatLastHeartbeat = (timestamp: string | null | undefined) => {\n    if (!timestamp) return tr('agentsPage.never', 'Never');\n    const diff = Date.now() - new Date(timestamp).getTime();\n    if (diff < 60000) return tr('agentsPage.justNow', 'Just now');\n    if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;\n    if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;\n    return `${Math.floor(diff / 86400000)}d ago`;\n  };\n\n  const platformIcon =\n    {\n      darwin: '🍎',\n      linux: '🐧',\n      windows: '🪟',\n    }[agent.platform || ''] || '💻';\n\n  return (\n    <motion.div\n      whileHover={{ y: -2, transition: { duration: 0.15, ease: [0.4, 0, 0.2, 1] } }}\n      whileTap={{ scale: 0.98 }}\n      className={`bg-bg-surface border rounded-lg p-4 hover:border-border-strong hover:shadow-md transition-all cursor-pointer ${\n        selected\n          ? 'border-action-primary-bg ring-1 ring-action-primary-bg/30'\n          : 'border-border-default'\n      } ${className}`}\n      onClick={() => onSelect?.(agent)}\n    >\n      <div className=\"flex items-start justify-between gap-2\">\n        <div className=\"flex items-start gap-2 sm:gap-3 min-w-0 flex-1\">\n          {/* Selection Checkbox */}\n          {onToggleSelect && (\n            <button\n              onClick={(e) => {\n                e.stopPropagation();\n                onToggleSelect();\n              }}\n              className={`flex-shrink-0 w-5 h-5 min-w-[1.25rem] min-h-[1.25rem] rounded border transition-colors mt-0.5 ${\n                selected\n                  ? 'bg-action-primary-bg border-action-primary-bg text-action-primary-text'\n                  : 'border-border-default hover:border-border-strong bg-bg-surface'\n              } flex items-center justify-center`}\n            >\n              {selected && (\n                <svg\n                  className=\"w-3 h-3\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                  strokeWidth={3}\n                >\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n                </svg>\n              )}\n            </button>\n          )}\n          <div className=\"flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-bg-sunken flex items-center justify-center\">\n            <Server className=\"w-4 h-4 sm:w-5 sm:h-5 text-text-secondary\" />\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"flex items-center gap-1.5 sm:gap-2 flex-wrap\">\n              <h3 className=\"font-semibold text-text-primary truncate max-w-[120px] sm:max-w-none text-sm sm:text-base\">\n                {agent.name}\n              </h3>\n              <span className=\"text-base sm:text-lg flex-shrink-0\">{platformIcon}</span>\n            </div>\n            <p className=\"text-xs sm:text-sm text-text-secondary truncate\">\n              {agent.hostname || `ID: ${agent.id}`}\n            </p>\n          </div>\n        </div>\n        {/* Status and Actions - always visible */}\n        <div className=\"flex items-center gap-1 sm:gap-2 flex-shrink-0\">\n          <AgentStatusBadge status={status} />\n          {(handleConfigure || onStart || onStop) && (\n            <div className=\"relative\">\n              <button\n                onClick={(e) => {\n                  e.stopPropagation();\n                  setShowMenu(!showMenu);\n                }}\n                className=\"p-1 sm:p-1.5 rounded hover:bg-bg-sunken transition-colors flex items-center justify-center\"\n                aria-label=\"Agent actions menu\"\n              >\n                <MoreVertical className=\"w-4 h-4 text-text-primary opacity-70 hover:opacity-100\" />\n              </button>\n              <AnimatePresence>\n                {showMenu && (\n                  <motion.div\n                    initial={{ opacity: 0, scale: 0.95, y: -4 }}\n                    animate={{ opacity: 1, scale: 1, y: 0 }}\n                    exit={{ opacity: 0, scale: 0.95, y: -4 }}\n                    transition={{ duration: 0.15 }}\n                    className=\"absolute right-0 mt-1 w-40 bg-bg-surface border border-border-default rounded-lg shadow-lg z-10\"\n                  >\n                    {status === 'ACTIVE' && onStop && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onStop(agent);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-t-lg\"\n                      >\n                        <Square className=\"w-4 h-4\" />\n                        {tr('agentsPage.stopAgent', 'Stop Agent')}\n                      </motion.button>\n                    )}\n                    {(status === 'STOPPED' || status === 'OFFLINE') && onStart && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onStart(agent);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-t-lg\"\n                      >\n                        <Play className=\"w-4 h-4\" />\n                        {tr('agentsPage.startAgent', 'Start Agent')}\n                      </motion.button>\n                    )}\n                    {(status === 'ACTIVE' || status === 'STOPPED' || status === 'OFFLINE') &&\n                      onDisconnect && (\n                        <motion.button\n                          whileTap={{ scale: 0.97 }}\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            onDisconnect(agent);\n                            setShowMenu(false);\n                          }}\n                          className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-action-danger-text hover:bg-bg-sunken\"\n                        >\n                          <Square className=\"w-4 h-4\" />\n                          {status === 'OFFLINE' ? 'Clear Connection' : 'Disconnect'}\n                        </motion.button>\n                      )}\n                    {onEditTunnelUrl && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onEditTunnelUrl(agent);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken\"\n                      >\n                        <Link className=\"w-4 h-4\" />\n                        Edit Tunnel\n                      </motion.button>\n                    )}\n                    {handleConfigure && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          handleConfigure(agent);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-b-lg\"\n                      >\n                        <Settings className=\"w-4 h-4\" />\n                        Settings\n                      </motion.button>\n                    )}\n                  </motion.div>\n                )}\n              </AnimatePresence>\n            </div>\n          )}\n        </div>\n      </div>\n\n      <div className=\"mt-4 grid grid-cols-2 gap-3 text-sm\">\n        <div className=\"flex items-center gap-2 text-text-secondary\">\n          <Clock className=\"w-4 h-4\" />\n          <span>{formatLastHeartbeat(agent.lastHeartbeat)}</span>\n        </div>\n        {agent.architecture && (\n          <div className=\"flex items-center gap-2 text-text-secondary\">\n            <Cpu className=\"w-4 h-4\" />\n            <span>{agent.architecture}</span>\n          </div>\n        )}\n      </div>\n\n      {agent.tunnelUrl && (\n        <div className=\"mt-3 flex items-center gap-2 text-sm\">\n          <Globe className=\"w-4 h-4 text-status-success-text flex-shrink-0\" />\n          <a\n            href={agent.tunnelUrl}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            onClick={(e) => e.stopPropagation()}\n            className=\"text-action-primary-text hover:underline truncate\"\n          >\n            {agent.tunnelUrl}\n          </a>\n          {agent.tunnelStatus && (\n            <span\n              className={`px-1.5 py-0.5 text-xs rounded ${\n                agent.tunnelStatus === 'CONNECTED' || agent.tunnelStatus === 'ACTIVE'\n                  ? 'bg-status-success-bg text-status-success-text'\n                  : 'bg-bg-sunken text-text-secondary'\n              }`}\n            >\n              {agent.tunnelStatus}\n            </span>\n          )}\n        </div>\n      )}\n\n      {agent.capabilities && agent.capabilities.length > 0 && (\n        <div className=\"mt-3 flex flex-wrap gap-1\">\n          {agent.capabilities.slice(0, 4).map((cap) => (\n            <span\n              key={cap}\n              className=\"px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded\"\n            >\n              {cap}\n            </span>\n          ))}\n          {agent.capabilities.length > 4 && (\n            <span className=\"px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded\">\n              +{agent.capabilities.length - 4}\n            </span>\n          )}\n        </div>\n      )}\n    </motion.div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/agents/AgentForm.d.ts

@@ -0,0 +1,29 @@
+interface TargetOption {
+    id: string;
+    name: string;
+    type: string;
+    status: string;
+}
+interface AgentFormProps {
+    onSubmit: (data: Record<string, unknown>) => Promise<{
+        id: string;
+    } | void>;
+    onCancel: () => void;
+    isLoading?: boolean;
+    /** Navigate to a path (used to go to agent details after creation) */
+    onNavigate?: (path: string) => void;
+    /** Available targets for the agent to be installed on */
+    targets?: TargetOption[];
+    /** Whether targets are still loading */
+    targetsLoading?: boolean;
+    /**
+     * Create a new target inline. When provided, the form shows a
+     * "+ Create new target" affordance that lets users create a DIRECT
+     * target on the fly without leaving the dialog. Must return the new
+     * target so the form can auto-select it.
+     */
+    onCreateTarget?: (name: string) => Promise<TargetOption | null>;
+}
+export declare function AgentForm({ onSubmit, onCancel, isLoading, onNavigate, targets, targetsLoading, onCreateTarget, }: AgentFormProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AgentForm.d.ts.map

package/dist/components/agents/AgentForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentForm.d.ts","sourceRoot":"","sources":["../../../src/components/agents/AgentForm.tsx"],"names":[],"mappings":"AAwBA,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,cAAc;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,CAAC;IAC5E,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sEAAsE;IACtE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,yDAAyD;IACzD,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;CACjE;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,OAAO,EACP,cAAc,EACd,cAAc,GACf,EAAE,cAAc,2CAivBhB"}