@burdenoff/microfe-vibecontrols 2026.815.1 → 2026.824.1

package/dist/components/agents/AgentCard.js

@@ -4,125 +4,144 @@ import { PlatformIcon as n } from "../shared/PlatformIcon.js";
 import { getAgentStatus as r } from "./agentStatus.js";
 import { classifyAgentHealth as i } from "../../utils/agentHealth.js";
 import { AgentStatusBadge as a } from "./AgentStatusBadge.js";
-import { Clock as o, Cpu as s, Globe as c, Link as l, Play as u, RefreshCw as d, Server as f, Settings as p, Square as m } from "lucide-react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { Checkbox as _ } from "@burdenoff/fe-libs/ui";
+import { isWorkspaceAgent as o } from "../../utils/agentVisibility.js";
+import { Clock as s, Cpu as c, Globe as l, Link as u, Lock as d, Play as f, RefreshCw as p, Server as m, Settings as h, Square as g, Users as _ } from "lucide-react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { Checkbox as b } from "@burdenoff/fe-libs/ui";
 //#region src/components/agents/AgentCard.tsx
-var v = ({ agent: v, onSelect: y, onConfigure: b, onSettings: x, onStart: S, onStop: C, onDisconnect: w, onEditTunnelUrl: T, selected: E = !1, onToggleSelect: D, className: O = "", healthErrorMessage: k }) => {
-	let A = e(), j = b || x, M = r(v), N = (e) => {
-		if (!e) return A("agentsPage.never", "Never");
+var x = ({ agent: x, onSelect: S, onConfigure: C, onSettings: w, onStart: T, onStop: E, onDisconnect: D, onEditTunnelUrl: O, selected: k = !1, onToggleSelect: A, className: j = "", healthErrorMessage: M }) => {
+	let N = e(), P = C || w, F = r(x), I = (e) => {
+		if (!e) return N("agentsPage.never", "Never");
 		let t = Date.now() - new Date(e).getTime();
-		return t < 6e4 ? A("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 = [];
-	return M === "ACTIVE" && C && P.push({
+		return t < 6e4 ? N("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`;
+	}, L = [];
+	return F === "ACTIVE" && E && L.push({
 		key: "stop",
-		label: A("agentsPage.stopAgent", "Stop Agent"),
-		icon: m,
-		onSelect: () => C(v)
-	}), (M === "STOPPED" || M === "OFFLINE") && S && P.push({
+		label: N("agentsPage.stopAgent", "Stop Agent"),
+		icon: g,
+		onSelect: () => E(x)
+	}), (F === "STOPPED" || F === "OFFLINE") && T && L.push({
 		key: "start",
-		label: A("agentsPage.startAgent", "Start Agent"),
-		icon: u,
-		onSelect: () => S(v)
-	}), M === "DEGRADED" && S && P.push({
+		label: N("agentsPage.startAgent", "Start Agent"),
+		icon: f,
+		onSelect: () => T(x)
+	}), F === "DEGRADED" && T && L.push({
 		key: "reconnect",
-		label: A("agentsPage.reconnectAgent", "Reconnect"),
-		icon: d,
-		onSelect: () => S(v)
-	}), (M === "ACTIVE" || M === "STOPPED" || M === "OFFLINE" || M === "DEGRADED") && w && P.push({
+		label: N("agentsPage.reconnectAgent", "Reconnect"),
+		icon: p,
+		onSelect: () => T(x)
+	}), (F === "ACTIVE" || F === "STOPPED" || F === "OFFLINE" || F === "DEGRADED") && D && L.push({
 		key: "disconnect",
-		label: M === "OFFLINE" ? A("agentsPage.clearConnection", "Clear Connection") : A("agentsPage.disconnect", "Disconnect"),
-		icon: m,
-		onSelect: () => w(v),
+		label: F === "OFFLINE" ? N("agentsPage.clearConnection", "Clear Connection") : N("agentsPage.disconnect", "Disconnect"),
+		icon: g,
+		onSelect: () => D(x),
 		variant: "danger"
-	}), T && P.push({
+	}), O && L.push({
 		key: "edit-tunnel",
-		label: A("agentsPage.editTunnel", "Edit Tunnel"),
-		icon: l,
-		onSelect: () => T(v)
-	}), j && P.push({
+		label: N("agentsPage.editTunnel", "Edit Tunnel"),
+		icon: u,
+		onSelect: () => O(x)
+	}), P && L.push({
 		key: "settings",
-		label: A("agentsPage.settings", "Settings"),
-		icon: p,
-		onSelect: () => j(v)
-	}), /* @__PURE__ */ g("div", {
+		label: N("agentsPage.settings", "Settings"),
+		icon: h,
+		onSelect: () => P(x)
+	}), /* @__PURE__ */ y("div", {
 		role: "button",
 		tabIndex: 0,
-		className: `bg-bg-surface border rounded-card shadow-elevation-1 p-5 h-full hover:border-border-strong hover:shadow-elevation-2 transition-all duration-200 ease-[var(--motion-easing-out)] cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-canvas ${E ? "border-transparent ring-1 ring-[var(--color-focus-ring)] bg-[var(--color-accent-soft)]" : "border-border-subtle"} ${O}`,
-		onClick: () => y?.(v),
+		className: `bg-bg-surface border rounded-card shadow-elevation-1 p-5 h-full hover:border-border-strong hover:shadow-elevation-2 transition-all duration-200 ease-[var(--motion-easing-out)] cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-canvas ${k ? "border-transparent ring-1 ring-[var(--color-focus-ring)] bg-[var(--color-accent-soft)]" : "border-border-subtle"} ${j}`,
+		onClick: () => S?.(x),
 		onKeyDown: (e) => {
-			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), y?.(v));
+			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), S?.(x));
 		},
 		children: [
-			/* @__PURE__ */ g("div", {
+			/* @__PURE__ */ y("div", {
 				className: "flex items-start justify-between gap-2",
-				children: [/* @__PURE__ */ g("div", {
+				children: [/* @__PURE__ */ y("div", {
 					className: "flex items-start gap-2 sm:gap-3 min-w-0 flex-1",
 					children: [
-						D && /* @__PURE__ */ h("span", {
+						A && /* @__PURE__ */ v("span", {
 							className: "flex flex-shrink-0 items-center justify-center max-md:min-h-11 max-md:min-w-11 max-md:-m-2 md:mt-0.5",
 							onClick: (e) => {
-								e.stopPropagation(), e.target === e.currentTarget && D();
+								e.stopPropagation(), e.target === e.currentTarget && A();
 							},
-							children: /* @__PURE__ */ h(_, {
-								checked: E,
-								onCheckedChange: () => D(),
+							children: /* @__PURE__ */ v(b, {
+								checked: k,
+								onCheckedChange: () => A(),
 								onClick: (e) => e.stopPropagation(),
-								"aria-label": A("agentsPage.selectAgent", "Select {{name}}", { name: v.name })
+								"aria-label": N("agentsPage.selectAgent", "Select {{name}}", { name: x.name })
 							})
 						}),
-						/* @__PURE__ */ h("div", {
+						/* @__PURE__ */ v("div", {
 							className: "flex-shrink-0 size-9 sm:size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center",
-							children: /* @__PURE__ */ h(f, {
+							children: /* @__PURE__ */ v(m, {
 								className: "size-4 sm:size-5 text-action-primary-bg",
 								"aria-hidden": "true"
 							})
 						}),
-						/* @__PURE__ */ g("div", {
+						/* @__PURE__ */ y("div", {
 							className: "min-w-0 flex-1",
-							children: [/* @__PURE__ */ g("div", {
+							children: [/* @__PURE__ */ y("div", {
 								className: "flex items-center gap-1.5 sm:gap-2 min-w-0",
-								children: [/* @__PURE__ */ h("h3", {
-									className: "font-semibold text-text-primary truncate min-w-0 text-sm sm:text-base tracking-tight",
-									children: v.name
-								}), /* @__PURE__ */ h(n, {
-									platform: v.platform,
-									className: "size-4 flex-shrink-0 text-text-secondary"
-								})]
-							}), /* @__PURE__ */ h("p", {
+								children: [
+									/* @__PURE__ */ v("h3", {
+										className: "font-semibold text-text-primary truncate min-w-0 text-sm sm:text-base tracking-tight",
+										children: x.name
+									}),
+									/* @__PURE__ */ v(n, {
+										platform: x.platform,
+										className: "size-4 flex-shrink-0 text-text-secondary"
+									}),
+									o(x) ? /* @__PURE__ */ y("span", {
+										className: "inline-flex items-center gap-1 flex-shrink-0 text-[10px] uppercase font-semibold px-1.5 py-0.5 rounded bg-bg-sunken text-text-secondary",
+										title: N("agentsPage.visibility.workspaceHint", "Shared with the workspace — any member with agent access can use it"),
+										children: [/* @__PURE__ */ v(_, {
+											className: "size-3",
+											"aria-hidden": "true"
+										}), N("agentsPage.visibility.workspace", "Shared")]
+									}) : /* @__PURE__ */ y("span", {
+										className: "inline-flex items-center gap-1 flex-shrink-0 text-[10px] uppercase font-semibold px-1.5 py-0.5 rounded bg-[var(--color-accent-soft)] text-action-primary-bg",
+										title: N("agentsPage.visibility.privateHint", "Private to its owner — nobody else in the workspace can see or use it"),
+										children: [/* @__PURE__ */ v(d, {
+											className: "size-3",
+											"aria-hidden": "true"
+										}), N("agentsPage.visibility.private", "Private")]
+									})
+								]
+							}), /* @__PURE__ */ v("p", {
 								className: "text-xs sm:text-sm text-text-secondary truncate",
-								children: v.hostname || `ID: ${v.id}`
+								children: x.hostname || `ID: ${x.id}`
 							})]
 						})
 					]
-				}), /* @__PURE__ */ g("div", {
+				}), /* @__PURE__ */ y("div", {
 					className: "flex items-center gap-1 sm:gap-2 flex-shrink-0",
-					children: [/* @__PURE__ */ h(a, {
-						status: M,
-						reason: k ?? null,
-						linkTo: `/vibecontrols/agents/${v.id}?tab=connection`,
+					children: [/* @__PURE__ */ v(a, {
+						status: F,
+						reason: M ?? null,
+						linkTo: `/vibecontrols/agents/${x.id}?tab=connection`,
 						onClick: (e) => {
 							e.stopPropagation();
 						}
-					}), (j || S || C) && P.length > 0 && /* @__PURE__ */ h(t, {
-						ariaLabel: A("agentsPage.agentActionsMenu", "Agent actions menu"),
-						title: A("agentsPage.agentActions", "Agent actions"),
+					}), (P || T || E) && L.length > 0 && /* @__PURE__ */ v(t, {
+						ariaLabel: N("agentsPage.agentActionsMenu", "Agent actions menu"),
+						title: N("agentsPage.agentActions", "Agent actions"),
 						align: "end",
-						items: P
+						items: L
 					})]
 				})]
 			}),
 			(() => {
-				let e = i(M, k ?? null);
-				return e.phase === "none" ? null : /* @__PURE__ */ g("div", {
+				let e = i(F, M ?? null);
+				return e.phase === "none" ? null : /* @__PURE__ */ y("div", {
 					className: `mt-3 flex items-start gap-1.5 text-xs ${e.phase === "attention" ? "text-status-warning-text" : "text-content-tertiary"}`,
-					children: [e.inProgress && /* @__PURE__ */ h(d, {
+					children: [e.inProgress && /* @__PURE__ */ v(p, {
 						className: "size-3.5 mt-0.5 flex-shrink-0 animate-spin",
 						"aria-hidden": "true"
-					}), /* @__PURE__ */ g("p", {
+					}), /* @__PURE__ */ y("p", {
 						className: "min-w-0 flex-1 break-words leading-relaxed",
 						children: [
-							/* @__PURE__ */ g("span", {
+							/* @__PURE__ */ y("span", {
 								className: "font-medium",
 								children: [e.label, "."]
 							}),
@@ -132,61 +151,61 @@ var v = ({ agent: v, onSelect: y, onConfigure: b, onSettings: x, onStart: S, onS
 					})]
 				});
 			})(),
-			/* @__PURE__ */ g("div", {
+			/* @__PURE__ */ y("div", {
 				className: "mt-5 grid grid-cols-2 gap-3 text-sm",
-				children: [/* @__PURE__ */ g("div", {
+				children: [/* @__PURE__ */ y("div", {
 					className: "flex items-center gap-2 text-text-secondary",
-					children: [/* @__PURE__ */ h(o, {
+					children: [/* @__PURE__ */ v(s, {
 						className: "size-4",
 						"aria-hidden": "true"
-					}), /* @__PURE__ */ h("span", {
+					}), /* @__PURE__ */ v("span", {
 						className: "tabular-nums",
-						children: N(v.lastHeartbeat)
+						children: I(x.lastHeartbeat)
 					})]
-				}), v.architecture && /* @__PURE__ */ g("div", {
+				}), x.architecture && /* @__PURE__ */ y("div", {
 					className: "flex items-center gap-2 text-text-secondary",
-					children: [/* @__PURE__ */ h(s, {
+					children: [/* @__PURE__ */ v(c, {
 						className: "size-4",
 						"aria-hidden": "true"
-					}), /* @__PURE__ */ h("span", { children: v.architecture })]
+					}), /* @__PURE__ */ v("span", { children: x.architecture })]
 				})]
 			}),
-			v.tunnelUrl && /* @__PURE__ */ g("div", {
+			x.tunnelUrl && /* @__PURE__ */ y("div", {
 				className: "mt-4 flex items-center gap-2 text-sm",
 				children: [
-					/* @__PURE__ */ h(c, {
+					/* @__PURE__ */ v(l, {
 						className: "size-4 flex-shrink-0 text-text-secondary",
 						"aria-hidden": "true"
 					}),
-					/* @__PURE__ */ h("span", {
+					/* @__PURE__ */ v("span", {
 						className: "text-text-secondary flex-shrink-0",
 						children: "Tunnel:"
 					}),
-					/* @__PURE__ */ h("a", {
-						href: v.tunnelUrl,
+					/* @__PURE__ */ v("a", {
+						href: x.tunnelUrl,
 						target: "_blank",
 						rel: "noopener noreferrer",
 						onClick: (e) => e.stopPropagation(),
-						"aria-label": A("agentsPage.tunnelOpensInNewTab", "{{url}} (opens in new tab)", { url: v.tunnelUrl }),
+						"aria-label": N("agentsPage.tunnelOpensInNewTab", "{{url}} (opens in new tab)", { url: x.tunnelUrl }),
 						className: "min-w-0 truncate font-mono text-xs text-text-link hover:text-text-linkHover hover:underline",
-						children: v.tunnelUrl
+						children: x.tunnelUrl
 					})
 				]
 			}),
-			v.capabilities && v.capabilities.length > 0 && /* @__PURE__ */ g("div", {
+			x.capabilities && x.capabilities.length > 0 && /* @__PURE__ */ y("div", {
 				className: "mt-4 flex flex-wrap gap-1.5",
-				children: [v.capabilities.slice(0, 4).map((e) => /* @__PURE__ */ h("span", {
+				children: [x.capabilities.slice(0, 4).map((e) => /* @__PURE__ */ v("span", {
 					className: "px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded-full",
 					children: e
-				}, e)), v.capabilities.length > 4 && /* @__PURE__ */ g("span", {
+				}, e)), x.capabilities.length > 4 && /* @__PURE__ */ y("span", {
 					className: "px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded-full",
-					children: ["+", v.capabilities.length - 4]
+					children: ["+", x.capabilities.length - 4]
 				})]
 			})
 		]
 	});
 };
 //#endregion
-export { v as AgentCard };
+export { x as AgentCard };
 
 //# sourceMappingURL=AgentCard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AgentCard.js","names":[],"sources":["../../../src/components/agents/AgentCard.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { Server, Clock, Cpu, Play, Square, Settings, Globe, Link, RefreshCw } from 'lucide-react';\nimport { Checkbox } from '@burdenoff/fe-libs/ui';\nimport { AgentStatusBadge } from './AgentStatusBadge';\nimport type { Agent } from './types';\nimport { getAgentStatus } from './agentStatus';\nimport { classifyAgentHealth } from '../../utils/agentHealth';\nimport { ActionMenu, type ActionMenuItem } from '../shared/ActionMenu';\nimport { PlatformIcon } from '../shared/PlatformIcon';\nimport { useTr } from '../../shared/hooks/useTr';\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   * Last error from /health/ready or the live probe — shown in the badge\n   * tooltip when the agent is degraded so users know WHY without curling\n   * the tunnel themselves.\n   */\n  healthErrorMessage?: string | null;\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  healthErrorMessage,\n}) => {\n  const tr = useTr();\n  // Support both onConfigure and onSettings\n  const handleConfigure = onConfigure || onSettings;\n\n  const status = getAgentStatus(agent);\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 menuItems: ActionMenuItem[] = [];\n  if (status === 'ACTIVE' && onStop) {\n    menuItems.push({\n      key: 'stop',\n      label: tr('agentsPage.stopAgent', 'Stop Agent'),\n      icon: Square,\n      onSelect: () => onStop(agent),\n    });\n  }\n  if ((status === 'STOPPED' || status === 'OFFLINE') && onStart) {\n    menuItems.push({\n      key: 'start',\n      label: tr('agentsPage.startAgent', 'Start Agent'),\n      icon: Play,\n      onSelect: () => onStart(agent),\n    });\n  }\n  if (status === 'DEGRADED' && onStart) {\n    // Reconnect on a degraded agent fires the same startVibecontrolsAgent\n    // mutation as a fresh start — svc-side that POSTs lifecycle/start to the\n    // agent's tunnel, which usually clears transient failures (tunnel hiccup,\n    // finalize retry). Labelled \"Reconnect\" not \"Start\" so the user knows\n    // it's a recovery action, not creating a new instance.\n    menuItems.push({\n      key: 'reconnect',\n      label: tr('agentsPage.reconnectAgent', 'Reconnect'),\n      icon: RefreshCw,\n      onSelect: () => onStart(agent),\n    });\n  }\n  if (\n    (status === 'ACTIVE' ||\n      status === 'STOPPED' ||\n      status === 'OFFLINE' ||\n      status === 'DEGRADED') &&\n    onDisconnect\n  ) {\n    menuItems.push({\n      key: 'disconnect',\n      label:\n        status === 'OFFLINE'\n          ? tr('agentsPage.clearConnection', 'Clear Connection')\n          : tr('agentsPage.disconnect', 'Disconnect'),\n      icon: Square,\n      onSelect: () => onDisconnect(agent),\n      variant: 'danger',\n    });\n  }\n  if (onEditTunnelUrl) {\n    menuItems.push({\n      key: 'edit-tunnel',\n      label: tr('agentsPage.editTunnel', 'Edit Tunnel'),\n      icon: Link,\n      onSelect: () => onEditTunnelUrl(agent),\n    });\n  }\n  if (handleConfigure) {\n    menuItems.push({\n      key: 'settings',\n      label: tr('agentsPage.settings', 'Settings'),\n      icon: Settings,\n      onSelect: () => handleConfigure(agent),\n    });\n  }\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      className={`bg-bg-surface border rounded-card shadow-elevation-1 p-5 h-full hover:border-border-strong hover:shadow-elevation-2 transition-all duration-200 ease-[var(--motion-easing-out)] cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-canvas ${\n        selected\n          ? 'border-transparent ring-1 ring-[var(--color-focus-ring)] bg-[var(--color-accent-soft)]'\n          : 'border-border-subtle'\n      } ${className}`}\n      onClick={() => onSelect?.(agent)}\n      onKeyDown={(e) => {\n        if (e.target !== e.currentTarget) return; // children (menu, checkbox, links) handle their own keys\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          onSelect?.(agent);\n        }\n      }}\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            <span\n              className=\"flex flex-shrink-0 items-center justify-center max-md:min-h-11 max-md:min-w-11 max-md:-m-2 md:mt-0.5\"\n              onClick={(e) => {\n                e.stopPropagation();\n                if (e.target === e.currentTarget) onToggleSelect();\n              }}\n            >\n              <Checkbox\n                checked={selected}\n                onCheckedChange={() => onToggleSelect()}\n                onClick={(e) => e.stopPropagation()}\n                aria-label={tr('agentsPage.selectAgent', 'Select {{name}}', { name: agent.name })}\n              />\n            </span>\n          )}\n          <div className=\"flex-shrink-0 size-9 sm:size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center\">\n            <Server className=\"size-4 sm:size-5 text-action-primary-bg\" aria-hidden=\"true\" />\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"flex items-center gap-1.5 sm:gap-2 min-w-0\">\n              <h3 className=\"font-semibold text-text-primary truncate min-w-0 text-sm sm:text-base tracking-tight\">\n                {agent.name}\n              </h3>\n              <PlatformIcon\n                platform={agent.platform}\n                className=\"size-4 flex-shrink-0 text-text-secondary\"\n              />\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\n            status={status}\n            reason={healthErrorMessage ?? null}\n            linkTo={`/vibecontrols/agents/${agent.id}?tab=connection`}\n            onClick={(event) => {\n              // The card itself has a `onSelect` click target that\n              // routes to the agent detail. Stop propagation so a\n              // badge click doesn't *also* fire that handler — the\n              // anchor's href already routes to the right tab and\n              // React Router picks it up via the surrounding shell.\n              event.stopPropagation();\n            }}\n          />\n          {(handleConfigure || onStart || onStop) && menuItems.length > 0 && (\n            <ActionMenu\n              ariaLabel={tr('agentsPage.agentActionsMenu', 'Agent actions menu')}\n              title={tr('agentsPage.agentActions', 'Agent actions')}\n              align=\"end\"\n              items={menuItems}\n            />\n          )}\n        </div>\n      </div>\n\n      {(() => {\n        // Full-width status guidance row (below the header) so the degraded /\n        // recovering copy gets the whole card width to wrap on narrow screens,\n        // instead of being crushed into the narrow name column next to the\n        // status badge + actions menu.\n        const health = classifyAgentHealth(status, healthErrorMessage ?? null);\n        if (health.phase === 'none') return null;\n        return (\n          <div\n            className={`mt-3 flex items-start gap-1.5 text-xs ${\n              health.phase === 'attention' ? 'text-status-warning-text' : 'text-content-tertiary'\n            }`}\n          >\n            {health.inProgress && (\n              <RefreshCw\n                className=\"size-3.5 mt-0.5 flex-shrink-0 animate-spin\"\n                aria-hidden=\"true\"\n              />\n            )}\n            <p className=\"min-w-0 flex-1 break-words leading-relaxed\">\n              <span className=\"font-medium\">{health.label}.</span> {health.actionHint}\n            </p>\n          </div>\n        );\n      })()}\n\n      <div className=\"mt-5 grid grid-cols-2 gap-3 text-sm\">\n        <div className=\"flex items-center gap-2 text-text-secondary\">\n          <Clock className=\"size-4\" aria-hidden=\"true\" />\n          <span className=\"tabular-nums\">{formatLastHeartbeat(agent.lastHeartbeat)}</span>\n        </div>\n        {agent.architecture && (\n          <div className=\"flex items-center gap-2 text-text-secondary\">\n            <Cpu className=\"size-4\" aria-hidden=\"true\" />\n            <span>{agent.architecture}</span>\n          </div>\n        )}\n      </div>\n\n      {agent.tunnelUrl && (\n        // Plain \"Tunnel: <link>\" row. The colored status chip that used\n        // to sit here was a redundant second status surface — the\n        // canonical state lives in the <AgentStatusBadge> top-right.\n        // The Globe glyph stays as a neutral icon (no status color).\n        <div className=\"mt-4 flex items-center gap-2 text-sm\">\n          <Globe className=\"size-4 flex-shrink-0 text-text-secondary\" aria-hidden=\"true\" />\n          <span className=\"text-text-secondary flex-shrink-0\">Tunnel:</span>\n          <a\n            href={agent.tunnelUrl}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            onClick={(e) => e.stopPropagation()}\n            aria-label={tr('agentsPage.tunnelOpensInNewTab', '{{url}} (opens in new tab)', {\n              url: agent.tunnelUrl,\n            })}\n            className=\"min-w-0 truncate font-mono text-xs text-text-link hover:text-text-linkHover hover:underline\"\n          >\n            {agent.tunnelUrl}\n          </a>\n        </div>\n      )}\n\n      {agent.capabilities && agent.capabilities.length > 0 && (\n        <div className=\"mt-4 flex flex-wrap gap-1.5\">\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-full\"\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-full\">\n              +{agent.capabilities.length - 4}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"AgentCard.js","names":[],"sources":["../../../src/components/agents/AgentCard.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport {\n  Server,\n  Clock,\n  Cpu,\n  Play,\n  Square,\n  Settings,\n  Globe,\n  Link,\n  RefreshCw,\n  Lock,\n  Users,\n} from 'lucide-react';\nimport { Checkbox } from '@burdenoff/fe-libs/ui';\nimport { AgentStatusBadge } from './AgentStatusBadge';\nimport type { Agent } from './types';\nimport { getAgentStatus } from './agentStatus';\nimport { classifyAgentHealth } from '../../utils/agentHealth';\nimport { isWorkspaceAgent } from '../../utils/agentVisibility';\nimport { ActionMenu, type ActionMenuItem } from '../shared/ActionMenu';\nimport { PlatformIcon } from '../shared/PlatformIcon';\nimport { useTr } from '../../shared/hooks/useTr';\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   * Last error from /health/ready or the live probe — shown in the badge\n   * tooltip when the agent is degraded so users know WHY without curling\n   * the tunnel themselves.\n   */\n  healthErrorMessage?: string | null;\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  healthErrorMessage,\n}) => {\n  const tr = useTr();\n  // Support both onConfigure and onSettings\n  const handleConfigure = onConfigure || onSettings;\n\n  const status = getAgentStatus(agent);\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 menuItems: ActionMenuItem[] = [];\n  if (status === 'ACTIVE' && onStop) {\n    menuItems.push({\n      key: 'stop',\n      label: tr('agentsPage.stopAgent', 'Stop Agent'),\n      icon: Square,\n      onSelect: () => onStop(agent),\n    });\n  }\n  if ((status === 'STOPPED' || status === 'OFFLINE') && onStart) {\n    menuItems.push({\n      key: 'start',\n      label: tr('agentsPage.startAgent', 'Start Agent'),\n      icon: Play,\n      onSelect: () => onStart(agent),\n    });\n  }\n  if (status === 'DEGRADED' && onStart) {\n    // Reconnect on a degraded agent fires the same startVibecontrolsAgent\n    // mutation as a fresh start — svc-side that POSTs lifecycle/start to the\n    // agent's tunnel, which usually clears transient failures (tunnel hiccup,\n    // finalize retry). Labelled \"Reconnect\" not \"Start\" so the user knows\n    // it's a recovery action, not creating a new instance.\n    menuItems.push({\n      key: 'reconnect',\n      label: tr('agentsPage.reconnectAgent', 'Reconnect'),\n      icon: RefreshCw,\n      onSelect: () => onStart(agent),\n    });\n  }\n  if (\n    (status === 'ACTIVE' ||\n      status === 'STOPPED' ||\n      status === 'OFFLINE' ||\n      status === 'DEGRADED') &&\n    onDisconnect\n  ) {\n    menuItems.push({\n      key: 'disconnect',\n      label:\n        status === 'OFFLINE'\n          ? tr('agentsPage.clearConnection', 'Clear Connection')\n          : tr('agentsPage.disconnect', 'Disconnect'),\n      icon: Square,\n      onSelect: () => onDisconnect(agent),\n      variant: 'danger',\n    });\n  }\n  if (onEditTunnelUrl) {\n    menuItems.push({\n      key: 'edit-tunnel',\n      label: tr('agentsPage.editTunnel', 'Edit Tunnel'),\n      icon: Link,\n      onSelect: () => onEditTunnelUrl(agent),\n    });\n  }\n  if (handleConfigure) {\n    menuItems.push({\n      key: 'settings',\n      label: tr('agentsPage.settings', 'Settings'),\n      icon: Settings,\n      onSelect: () => handleConfigure(agent),\n    });\n  }\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      className={`bg-bg-surface border rounded-card shadow-elevation-1 p-5 h-full hover:border-border-strong hover:shadow-elevation-2 transition-all duration-200 ease-[var(--motion-easing-out)] cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-canvas ${\n        selected\n          ? 'border-transparent ring-1 ring-[var(--color-focus-ring)] bg-[var(--color-accent-soft)]'\n          : 'border-border-subtle'\n      } ${className}`}\n      onClick={() => onSelect?.(agent)}\n      onKeyDown={(e) => {\n        if (e.target !== e.currentTarget) return; // children (menu, checkbox, links) handle their own keys\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          onSelect?.(agent);\n        }\n      }}\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            <span\n              className=\"flex flex-shrink-0 items-center justify-center max-md:min-h-11 max-md:min-w-11 max-md:-m-2 md:mt-0.5\"\n              onClick={(e) => {\n                e.stopPropagation();\n                if (e.target === e.currentTarget) onToggleSelect();\n              }}\n            >\n              <Checkbox\n                checked={selected}\n                onCheckedChange={() => onToggleSelect()}\n                onClick={(e) => e.stopPropagation()}\n                aria-label={tr('agentsPage.selectAgent', 'Select {{name}}', { name: agent.name })}\n              />\n            </span>\n          )}\n          <div className=\"flex-shrink-0 size-9 sm:size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center\">\n            <Server className=\"size-4 sm:size-5 text-action-primary-bg\" aria-hidden=\"true\" />\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"flex items-center gap-1.5 sm:gap-2 min-w-0\">\n              <h3 className=\"font-semibold text-text-primary truncate min-w-0 text-sm sm:text-base tracking-tight\">\n                {agent.name}\n              </h3>\n              <PlatformIcon\n                platform={agent.platform}\n                className=\"size-4 flex-shrink-0 text-text-secondary\"\n              />\n              {/* BOFF-6394: an agent is private to whoever added it unless they\n                  share it, so the card has to say which — otherwise \"who else\n                  can run commands on this machine\" is invisible. */}\n              {isWorkspaceAgent(agent) ? (\n                <span\n                  className=\"inline-flex items-center gap-1 flex-shrink-0 text-[10px] uppercase font-semibold px-1.5 py-0.5 rounded bg-bg-sunken text-text-secondary\"\n                  title={tr(\n                    'agentsPage.visibility.workspaceHint',\n                    'Shared with the workspace — any member with agent access can use it'\n                  )}\n                >\n                  <Users className=\"size-3\" aria-hidden=\"true\" />\n                  {tr('agentsPage.visibility.workspace', 'Shared')}\n                </span>\n              ) : (\n                <span\n                  className=\"inline-flex items-center gap-1 flex-shrink-0 text-[10px] uppercase font-semibold px-1.5 py-0.5 rounded bg-[var(--color-accent-soft)] text-action-primary-bg\"\n                  title={tr(\n                    'agentsPage.visibility.privateHint',\n                    'Private to its owner — nobody else in the workspace can see or use it'\n                  )}\n                >\n                  <Lock className=\"size-3\" aria-hidden=\"true\" />\n                  {tr('agentsPage.visibility.private', 'Private')}\n                </span>\n              )}\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\n            status={status}\n            reason={healthErrorMessage ?? null}\n            linkTo={`/vibecontrols/agents/${agent.id}?tab=connection`}\n            onClick={(event) => {\n              // The card itself has a `onSelect` click target that\n              // routes to the agent detail. Stop propagation so a\n              // badge click doesn't *also* fire that handler — the\n              // anchor's href already routes to the right tab and\n              // React Router picks it up via the surrounding shell.\n              event.stopPropagation();\n            }}\n          />\n          {(handleConfigure || onStart || onStop) && menuItems.length > 0 && (\n            <ActionMenu\n              ariaLabel={tr('agentsPage.agentActionsMenu', 'Agent actions menu')}\n              title={tr('agentsPage.agentActions', 'Agent actions')}\n              align=\"end\"\n              items={menuItems}\n            />\n          )}\n        </div>\n      </div>\n\n      {(() => {\n        // Full-width status guidance row (below the header) so the degraded /\n        // recovering copy gets the whole card width to wrap on narrow screens,\n        // instead of being crushed into the narrow name column next to the\n        // status badge + actions menu.\n        const health = classifyAgentHealth(status, healthErrorMessage ?? null);\n        if (health.phase === 'none') return null;\n        return (\n          <div\n            className={`mt-3 flex items-start gap-1.5 text-xs ${\n              health.phase === 'attention' ? 'text-status-warning-text' : 'text-content-tertiary'\n            }`}\n          >\n            {health.inProgress && (\n              <RefreshCw\n                className=\"size-3.5 mt-0.5 flex-shrink-0 animate-spin\"\n                aria-hidden=\"true\"\n              />\n            )}\n            <p className=\"min-w-0 flex-1 break-words leading-relaxed\">\n              <span className=\"font-medium\">{health.label}.</span> {health.actionHint}\n            </p>\n          </div>\n        );\n      })()}\n\n      <div className=\"mt-5 grid grid-cols-2 gap-3 text-sm\">\n        <div className=\"flex items-center gap-2 text-text-secondary\">\n          <Clock className=\"size-4\" aria-hidden=\"true\" />\n          <span className=\"tabular-nums\">{formatLastHeartbeat(agent.lastHeartbeat)}</span>\n        </div>\n        {agent.architecture && (\n          <div className=\"flex items-center gap-2 text-text-secondary\">\n            <Cpu className=\"size-4\" aria-hidden=\"true\" />\n            <span>{agent.architecture}</span>\n          </div>\n        )}\n      </div>\n\n      {agent.tunnelUrl && (\n        // Plain \"Tunnel: <link>\" row. The colored status chip that used\n        // to sit here was a redundant second status surface — the\n        // canonical state lives in the <AgentStatusBadge> top-right.\n        // The Globe glyph stays as a neutral icon (no status color).\n        <div className=\"mt-4 flex items-center gap-2 text-sm\">\n          <Globe className=\"size-4 flex-shrink-0 text-text-secondary\" aria-hidden=\"true\" />\n          <span className=\"text-text-secondary flex-shrink-0\">Tunnel:</span>\n          <a\n            href={agent.tunnelUrl}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            onClick={(e) => e.stopPropagation()}\n            aria-label={tr('agentsPage.tunnelOpensInNewTab', '{{url}} (opens in new tab)', {\n              url: agent.tunnelUrl,\n            })}\n            className=\"min-w-0 truncate font-mono text-xs text-text-link hover:text-text-linkHover hover:underline\"\n          >\n            {agent.tunnelUrl}\n          </a>\n        </div>\n      )}\n\n      {agent.capabilities && agent.capabilities.length > 0 && (\n        <div className=\"mt-4 flex flex-wrap gap-1.5\">\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-full\"\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-full\">\n              +{agent.capabilities.length - 4}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}