@burdenoff/microfe-vibecontrols 2026.623.1 → 2026.623.3

package/dist/components/agents/AgentCard.js

@@ -48,7 +48,7 @@ var v = ({ agent: v, onSelect: y, onConfigure: b, onSettings: x, onStart: S, onS
 	}), /* @__PURE__ */ g("div", {
 		role: "button",
 		tabIndex: 0,
-		className: `bg-bg-surface border rounded-card p-4 h-full hover:border-border-strong hover:shadow-[var(--shadow-elevation-1)] transition-[colors,box-shadow] duration-150 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-action-primary-bg ring-1 ring-action-primary-bg/30" : "border-border-default"} ${O}`,
+		className: `bg-bg-surface border rounded-card shadow-elevation-1 p-5 h-full hover:border-border-strong hover:shadow-elevation-2 hover:-translate-y-0.5 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),
 		onKeyDown: (e) => {
 			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), y?.(v));
@@ -72,9 +72,9 @@ var v = ({ agent: v, onSelect: y, onConfigure: b, onSettings: x, onStart: S, onS
 							})
 						}),
 						/* @__PURE__ */ h("div", {
-							className: "flex-shrink-0 size-8 sm:size-10 rounded-lg bg-bg-sunken flex items-center justify-center",
+							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, {
-								className: "size-4 sm:size-5 text-text-secondary",
+								className: "size-4 sm:size-5 text-action-primary-bg",
 								"aria-hidden": "true"
 							})
 						}),
@@ -84,7 +84,7 @@ var v = ({ agent: v, onSelect: y, onConfigure: b, onSettings: x, onStart: S, onS
 								/* @__PURE__ */ g("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",
+										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,
@@ -133,13 +133,16 @@ var v = ({ agent: v, onSelect: y, onConfigure: b, onSettings: x, onStart: S, onS
 				})]
 			}),
 			/* @__PURE__ */ g("div", {
-				className: "mt-4 grid grid-cols-2 gap-3 text-sm",
+				className: "mt-5 grid grid-cols-2 gap-3 text-sm",
 				children: [/* @__PURE__ */ g("div", {
 					className: "flex items-center gap-2 text-text-secondary",
 					children: [/* @__PURE__ */ h(o, {
 						className: "size-4",
 						"aria-hidden": "true"
-					}), /* @__PURE__ */ h("span", { children: N(v.lastHeartbeat) })]
+					}), /* @__PURE__ */ h("span", {
+						className: "tabular-nums",
+						children: N(v.lastHeartbeat)
+					})]
 				}), v.architecture && /* @__PURE__ */ g("div", {
 					className: "flex items-center gap-2 text-text-secondary",
 					children: [/* @__PURE__ */ h(s, {
@@ -149,7 +152,7 @@ var v = ({ agent: v, onSelect: y, onConfigure: b, onSettings: x, onStart: S, onS
 				})]
 			}),
 			v.tunnelUrl && /* @__PURE__ */ g("div", {
-				className: "mt-3 flex items-center gap-2 text-sm",
+				className: "mt-4 flex items-center gap-2 text-sm",
 				children: [
 					/* @__PURE__ */ h(c, {
 						className: "size-4 flex-shrink-0 text-text-secondary",
@@ -165,18 +168,18 @@ var v = ({ agent: v, onSelect: y, onConfigure: b, onSettings: x, onStart: S, onS
 						rel: "noopener noreferrer",
 						onClick: (e) => e.stopPropagation(),
 						"aria-label": A("agentsPage.tunnelOpensInNewTab", "{{url}} (opens in new tab)", { url: v.tunnelUrl }),
-						className: "min-w-0 truncate text-text-link hover:text-text-linkHover hover:underline",
+						className: "min-w-0 truncate font-mono text-xs text-text-link hover:text-text-linkHover hover:underline",
 						children: v.tunnelUrl
 					})
 				]
 			}),
 			v.capabilities && v.capabilities.length > 0 && /* @__PURE__ */ g("div", {
-				className: "mt-3 flex flex-wrap gap-1",
+				className: "mt-4 flex flex-wrap gap-1.5",
 				children: [v.capabilities.slice(0, 4).map((e) => /* @__PURE__ */ h("span", {
-					className: "px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded-pill",
+					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", {
-					className: "px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded-pill",
+					className: "px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded-full",
 					children: ["+", v.capabilities.length - 4]
 				})]
 			})

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 p-4 h-full hover:border-border-strong hover:shadow-[var(--shadow-elevation-1)] transition-[colors,box-shadow] duration-150 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-action-primary-bg ring-1 ring-action-primary-bg/30'\n          : 'border-border-default'\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-8 sm:size-10 rounded-lg bg-bg-sunken flex items-center justify-center\">\n            <Server className=\"size-4 sm:size-5 text-text-secondary\" 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\">\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            {(() => {\n              // Always-visible (not just hover) guidance when degraded, so the\n              // user knows whether it's self-healing or needs their action.\n              const health = classifyAgentHealth(status, healthErrorMessage ?? null);\n              if (health.phase === 'none') return null;\n              return (\n                <p\n                  className={`mt-1 flex items-start gap-1 text-xs ${\n                    health.phase === 'attention'\n                      ? 'text-status-warning-text'\n                      : 'text-content-tertiary'\n                  }`}\n                >\n                  {health.inProgress && (\n                    <RefreshCw\n                      className=\"size-3 mt-0.5 flex-shrink-0 animate-spin\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>\n                    <span className=\"font-medium\">{health.label}.</span> {health.actionHint}\n                  </span>\n                </p>\n              );\n            })()}\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      <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=\"size-4\" aria-hidden=\"true\" />\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=\"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-3 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 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-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-pill\"\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-pill\">\n              +{agent.capabilities.length - 4}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AA2CA,IAAa,KAAiC,EAC5C,UACA,aACA,gBACA,eACA,YACA,WACA,iBACA,oBACA,cAAW,IACX,mBACA,eAAY,IACZ,4BACI;CACJ,IAAM,IAAK,GAAO,EAEZ,IAAkB,KAAe,GAEjC,IAAS,EAAe,EAAM,EAE9B,KAAuB,MAAyC;AACpE,MAAI,CAAC,EAAW,QAAO,EAAG,oBAAoB,QAAQ;EACtD,IAAM,IAAO,KAAK,KAAK,GAAG,IAAI,KAAK,EAAU,CAAC,SAAS;AAIvD,SAHI,IAAO,MAAc,EAAG,sBAAsB,WAAW,GACzD,IAAO,OAAgB,GAAG,KAAK,MAAM,IAAO,IAAM,CAAC,SACnD,IAAO,QAAiB,GAAG,KAAK,MAAM,IAAO,KAAQ,CAAC,SACnD,GAAG,KAAK,MAAM,IAAO,MAAS,CAAC;IAGlC,IAA8B,EAAE;AAiEtC,QAhEI,MAAW,YAAY,KACzB,EAAU,KAAK;EACb,KAAK;EACL,OAAO,EAAG,wBAAwB,aAAa;EAC/C,MAAM;EACN,gBAAgB,EAAO,EAAM;EAC9B,CAAC,GAEC,MAAW,aAAa,MAAW,cAAc,KACpD,EAAU,KAAK;EACb,KAAK;EACL,OAAO,EAAG,yBAAyB,cAAc;EACjD,MAAM;EACN,gBAAgB,EAAQ,EAAM;EAC/B,CAAC,EAEA,MAAW,cAAc,KAM3B,EAAU,KAAK;EACb,KAAK;EACL,OAAO,EAAG,6BAA6B,YAAY;EACnD,MAAM;EACN,gBAAgB,EAAQ,EAAM;EAC/B,CAAC,GAGD,MAAW,YACV,MAAW,aACX,MAAW,aACX,MAAW,eACb,KAEA,EAAU,KAAK;EACb,KAAK;EACL,OACE,MAAW,YACP,EAAG,8BAA8B,mBAAmB,GACpD,EAAG,yBAAyB,aAAa;EAC/C,MAAM;EACN,gBAAgB,EAAa,EAAM;EACnC,SAAS;EACV,CAAC,EAEA,KACF,EAAU,KAAK;EACb,KAAK;EACL,OAAO,EAAG,yBAAyB,cAAc;EACjD,MAAM;EACN,gBAAgB,EAAgB,EAAM;EACvC,CAAC,EAEA,KACF,EAAU,KAAK;EACb,KAAK;EACL,OAAO,EAAG,uBAAuB,WAAW;EAC5C,MAAM;EACN,gBAAgB,EAAgB,EAAM;EACvC,CAAC,EAIF,kBAAC,OAAD;EACE,MAAK;EACL,UAAU;EACV,WAAW,+TACT,IACI,8DACA,wBACL,GAAG;EACJ,eAAe,IAAW,EAAM;EAChC,YAAY,MAAM;AACZ,KAAE,WAAW,EAAE,kBACf,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,gBAAgB,EAClB,IAAW,EAAM;;YAbvB;GAiBE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEG,KACC,kBAAC,QAAD;OACE,WAAU;OACV,UAAU,MAAM;AAEd,QADA,EAAE,iBAAiB,EACf,EAAE,WAAW,EAAE,iBAAe,GAAgB;;iBAGpD,kBAAC,GAAD;QACE,SAAS;QACT,uBAAuB,GAAgB;QACvC,UAAU,MAAM,EAAE,iBAAiB;QACnC,cAAY,EAAG,0BAA0B,mBAAmB,EAAE,MAAM,EAAM,MAAM,CAAC;QACjF,CAAA;OACG,CAAA;MAET,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD;QAAQ,WAAU;QAAuC,eAAY;QAAS,CAAA;OAC1E,CAAA;MACN,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,MAAD;UAAI,WAAU;oBACX,EAAM;UACJ,CAAA,EACL,kBAAC,GAAD;UACE,UAAU,EAAM;UAChB,WAAU;UACV,CAAA,CACE;;QACN,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAM,YAAY,OAAO,EAAM;SAC9B,CAAA;eACI;SAGN,IAAM,IAAS,EAAoB,GAAQ,KAAsB,KAAK;AAEtE,gBADI,EAAO,UAAU,SAAe,OAElC,kBAAC,KAAD;UACE,WAAW,uCACT,EAAO,UAAU,cACb,6BACA;oBAJR,CAOG,EAAO,cACN,kBAAC,GAAD;WACE,WAAU;WACV,eAAY;WACZ,CAAA,EAEJ,kBAAC,QAAD,EAAA,UAAA;WACE,kBAAC,QAAD;YAAM,WAAU;sBAAhB,CAA+B,EAAO,OAAM,IAAQ;;;WAAE,EAAO;WACxD,EAAA,CAAA,CACL;;YAEJ;QACA;;MACF;QAEN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MACU;MACR,QAAQ,KAAsB;MAC9B,QAAQ,wBAAwB,EAAM,GAAG;MACzC,UAAU,MAAU;AAMlB,SAAM,iBAAiB;;MAEzB,CAAA,GACA,KAAmB,KAAW,MAAW,EAAU,SAAS,KAC5D,kBAAC,GAAD;MACE,WAAW,EAAG,+BAA+B,qBAAqB;MAClE,OAAO,EAAG,2BAA2B,gBAAgB;MACrD,OAAM;MACN,OAAO;MACP,CAAA,CAEA;OACF;;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MAAO,WAAU;MAAS,eAAY;MAAS,CAAA,EAC/C,kBAAC,QAAD,EAAA,UAAO,EAAoB,EAAM,cAAc,EAAQ,CAAA,CACnD;QACL,EAAM,gBACL,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MAAK,WAAU;MAAS,eAAY;MAAS,CAAA,EAC7C,kBAAC,QAAD,EAAA,UAAO,EAAM,cAAoB,CAAA,CAC7B;OAEJ;;GAEL,EAAM,aAKL,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD;MAAO,WAAU;MAA2C,eAAY;MAAS,CAAA;KACjF,kBAAC,QAAD;MAAM,WAAU;gBAAoC;MAAc,CAAA;KAClE,kBAAC,KAAD;MACE,MAAM,EAAM;MACZ,QAAO;MACP,KAAI;MACJ,UAAU,MAAM,EAAE,iBAAiB;MACnC,cAAY,EAAG,kCAAkC,8BAA8B,EAC7E,KAAK,EAAM,WACZ,CAAC;MACF,WAAU;gBAET,EAAM;MACL,CAAA;KACA;;GAGP,EAAM,gBAAgB,EAAM,aAAa,SAAS,KACjD,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,EAAM,aAAa,MAAM,GAAG,EAAE,CAAC,KAAK,MACnC,kBAAC,QAAD;KAEE,WAAU;eAET;KACI,EAJA,EAIA,CACP,EACD,EAAM,aAAa,SAAS,KAC3B,kBAAC,QAAD;KAAM,WAAU;eAAhB,CAAoF,KAChF,EAAM,aAAa,SAAS,EACzB;OAEL;;GAEJ"}
+{"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 hover:-translate-y-0.5 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            {(() => {\n              // Always-visible (not just hover) guidance when degraded, so the\n              // user knows whether it's self-healing or needs their action.\n              const health = classifyAgentHealth(status, healthErrorMessage ?? null);\n              if (health.phase === 'none') return null;\n              return (\n                <p\n                  className={`mt-1 flex items-start gap-1 text-xs ${\n                    health.phase === 'attention'\n                      ? 'text-status-warning-text'\n                      : 'text-content-tertiary'\n                  }`}\n                >\n                  {health.inProgress && (\n                    <RefreshCw\n                      className=\"size-3 mt-0.5 flex-shrink-0 animate-spin\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <span>\n                    <span className=\"font-medium\">{health.label}.</span> {health.actionHint}\n                  </span>\n                </p>\n              );\n            })()}\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      <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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"}

package/dist/components/ai/AIContextsTab.js

@@ -219,7 +219,7 @@ function w({ agent: w }) {
 											className: "font-semibold text-text-primary truncate",
 											children: e.name
 										}), /* @__PURE__ */ b("span", {
-											className: "px-1.5 py-0.5 text-xs bg-action-primary-bg/10 text-action-primary-bg rounded",
+											className: "px-1.5 py-0.5 text-xs bg-[var(--color-accent-soft)] text-text-primary rounded",
 											children: e.type
 										})]
 									})

package/dist/components/ai/AIContextsTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"AIContextsTab.js","names":[],"sources":["../../../src/components/ai/AIContextsTab.tsx"],"sourcesContent":["import { useState, useEffect, useCallback, useMemo } from 'react';\nimport { Plus, X, FileText, Trash2, Pencil } from 'lucide-react';\nimport {\n  Card,\n  LoadingState,\n  ErrorState,\n  EmptyState,\n  ConfirmDialog,\n  SelectionCheckbox,\n} from '@/components/shared';\nimport { EntityShareButton } from '@/components/sharing';\nimport type { AIContext, AgentRef } from '@/services/aiApi';\nimport { fetchContexts, createContext, updateContext, deleteContext } from '@/services/aiApi';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AIContextsTabProps {\n  agent: AgentRef;\n}\n\nconst contextTypes = [\n  { value: 'all', label: 'All Types' },\n  { value: 'system', label: 'System' },\n  { value: 'user', label: 'User' },\n  { value: 'file', label: 'File' },\n  { value: 'project', label: 'Project' },\n  { value: 'custom', label: 'Custom' },\n];\n\ninterface ContextFormData {\n  name: string;\n  type: string;\n  content: string;\n  tags: string[];\n}\n\nconst emptyForm: ContextFormData = { name: '', type: 'custom', content: '', tags: [] };\n\nexport function AIContextsTab({ agent }: AIContextsTabProps) {\n  const tr = useTr();\n  const [contexts, setContexts] = useState<AIContext[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [typeFilter, setTypeFilter] = useState('all');\n  const [showForm, setShowForm] = useState(false);\n  const [editingId, setEditingId] = useState<string | null>(null);\n  const [formData, setFormData] = useState<ContextFormData>(emptyForm);\n  const [tagInput, setTagInput] = useState('');\n  const [saving, setSaving] = useState(false);\n  const [deleteIds, setDeleteIds] = useState<string[]>([]);\n  const [deleting, setDeleting] = useState(false);\n  const [selectedContextIds, setSelectedContextIds] = useState<Set<string>>(new Set());\n\n  const loadContexts = useCallback(async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const params: Record<string, unknown> = {};\n      if (typeFilter !== 'all') params.type = typeFilter;\n      const result = await fetchContexts(agent, params);\n      setContexts(result);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to load contexts');\n    } finally {\n      setLoading(false);\n    }\n  }, [agent, typeFilter]);\n\n  useEffect(() => {\n    loadContexts();\n  }, [loadContexts]);\n\n  const selectedContexts = useMemo(\n    () => contexts.filter((context) => selectedContextIds.has(context.id)),\n    [contexts, selectedContextIds]\n  );\n  const allVisibleSelected =\n    contexts.length > 0 && contexts.every((context) => selectedContextIds.has(context.id));\n  const partiallySelected =\n    contexts.some((context) => selectedContextIds.has(context.id)) && !allVisibleSelected;\n\n  const openCreate = () => {\n    setEditingId(null);\n    setFormData(emptyForm);\n    setTagInput('');\n    setShowForm(true);\n  };\n\n  const openEdit = (ctx: AIContext) => {\n    setEditingId(ctx.id);\n    setFormData({ name: ctx.name, type: ctx.type, content: ctx.content, tags: ctx.tags ?? [] });\n    setTagInput('');\n    setShowForm(true);\n  };\n\n  const handleSave = async () => {\n    setSaving(true);\n    try {\n      if (editingId) {\n        await updateContext(agent, editingId, formData);\n      } else {\n        await createContext(agent, formData);\n      }\n      setShowForm(false);\n      await loadContexts();\n    } catch (err) {\n      console.error('Failed to save context:', err);\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  const handleDelete = async () => {\n    if (deleteIds.length === 0) return;\n    setDeleting(true);\n    try {\n      await Promise.allSettled(deleteIds.map((deleteId) => deleteContext(agent, deleteId)));\n      setSelectedContextIds((prev) => {\n        const next = new Set(prev);\n        deleteIds.forEach((deleteId) => next.delete(deleteId));\n        return next;\n      });\n      setDeleteIds([]);\n      await loadContexts();\n    } catch (err) {\n      console.error('Failed to delete context:', err);\n    } finally {\n      setDeleting(false);\n    }\n  };\n\n  const addTag = () => {\n    const tag = tagInput.trim();\n    if (tag && !formData.tags.includes(tag)) {\n      setFormData((prev) => ({ ...prev, tags: [...prev.tags, tag] }));\n    }\n    setTagInput('');\n  };\n\n  const removeTag = (tag: string) => {\n    setFormData((prev) => ({ ...prev, tags: prev.tags.filter((t) => t !== tag) }));\n  };\n\n  const toggleContextSelection = (contextId: string, checked: boolean) => {\n    setSelectedContextIds((prev) => {\n      const next = new Set(prev);\n      if (checked) {\n        next.add(contextId);\n      } else {\n        next.delete(contextId);\n      }\n      return next;\n    });\n  };\n\n  const toggleAllVisibleContexts = (checked: boolean) => {\n    setSelectedContextIds((prev) => {\n      const next = new Set(prev);\n      contexts.forEach((context) => {\n        if (checked) {\n          next.add(context.id);\n        } else {\n          next.delete(context.id);\n        }\n      });\n      return next;\n    });\n  };\n\n  const clearSelection = () => setSelectedContextIds(new Set());\n\n  if (loading)\n    return <LoadingState message={tr('vibecontrols.ai.contexts.loading', 'Loading contexts...')} />;\n  if (error)\n    return (\n      <ErrorState\n        title={tr('vibecontrols.ai.contexts.loadFailed', 'Failed to load contexts')}\n        message={error}\n        onRetry={loadContexts}\n      />\n    );\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Toolbar */}\n      <div className=\"flex flex-col sm:flex-row items-stretch sm:items-center gap-2\">\n        <select\n          value={typeFilter}\n          onChange={(e) => setTypeFilter(e.target.value)}\n          className=\"px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm\"\n        >\n          {contextTypes.map((t) => (\n            <option key={t.value} value={t.value}>\n              {t.label}\n            </option>\n          ))}\n        </select>\n        <div className=\"flex-1\" />\n        <button\n          type=\"button\"\n          onClick={openCreate}\n          className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors text-sm\"\n        >\n          <Plus className=\"size-4\" />\n          {tr('vibecontrols.ai.contexts.newContext', 'New Context')}\n        </button>\n      </div>\n\n      {contexts.length > 0 && (\n        <div className=\"rounded-lg border border-border-default bg-bg-surface p-4\">\n          <div className=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n            <div className=\"flex flex-wrap items-center gap-3\">\n              <div className=\"flex items-center gap-2\">\n                <SelectionCheckbox\n                  checked={allVisibleSelected}\n                  indeterminate={partiallySelected}\n                  onChange={toggleAllVisibleContexts}\n                  ariaLabel=\"Select all visible contexts\"\n                />\n                <span className=\"text-sm font-medium text-text-primary\">\n                  {tr('vibecontrols.ai.contexts.selectAllVisible', 'Select all visible')}\n                </span>\n              </div>\n              {selectedContextIds.size > 0 && (\n                <button\n                  type=\"button\"\n                  onClick={clearSelection}\n                  className=\"text-sm text-text-secondary hover:text-text-primary\"\n                >\n                  {tr('vibecontrols.ai.contexts.clearSelection', 'Clear selection')}\n                </button>\n              )}\n            </div>\n\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <span className=\"rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary\">\n                {selectedContextIds.size} {tr('vibecontrols.ai.contexts.selected', 'selected')}\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => setDeleteIds(selectedContexts.map((context) => context.id))}\n                disabled={selectedContexts.length === 0}\n                className=\"rounded-md border border-status-error-border px-3 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg disabled:cursor-not-allowed disabled:opacity-50\"\n              >\n                {tr('vibecontrols.ai.contexts.deleteSelected', 'Delete Selected')}\n                {selectedContexts.length > 0 ? ` (${selectedContexts.length})` : ''}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* Context List */}\n      {contexts.length === 0 ? (\n        <EmptyState\n          icon={<FileText className=\"size-8 text-text-secondary\" />}\n          title={tr('vibecontrols.ai.contexts.emptyTitle', 'No contexts yet')}\n          description={tr(\n            'vibecontrols.ai.contexts.emptyDescription',\n            'Create contexts to provide additional information to your AI sessions'\n          )}\n          action={\n            <button\n              type=\"button\"\n              onClick={openCreate}\n              className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              <Plus className=\"size-4\" />\n              {tr('vibecontrols.ai.contexts.newContext', 'New Context')}\n            </button>\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n          {contexts.map((ctx) => (\n            <Card\n              key={ctx.id}\n              className={`p-4 ${selectedContextIds.has(ctx.id) ? 'border-action-primary-bg ring-1 ring-action-primary-bg/25' : ''}`}\n            >\n              <div className=\"flex items-start justify-between gap-2\">\n                <div className=\"flex items-start gap-3 min-w-0 flex-1\">\n                  <div onClick={(event) => event.stopPropagation()}>\n                    <SelectionCheckbox\n                      checked={selectedContextIds.has(ctx.id)}\n                      onChange={(checked) => toggleContextSelection(ctx.id, checked)}\n                      ariaLabel={`Select context ${ctx.name}`}\n                    />\n                  </div>\n                  <div className=\"min-w-0 flex-1\">\n                    <div className=\"flex items-center gap-2\">\n                      <h4 className=\"font-semibold text-text-primary truncate\">{ctx.name}</h4>\n                      <span className=\"px-1.5 py-0.5 text-xs bg-action-primary-bg/10 text-action-primary-bg rounded\">\n                        {ctx.type}\n                      </span>\n                    </div>\n                  </div>\n                </div>\n                <div className=\"flex items-center gap-1 flex-shrink-0\">\n                  <button\n                    type=\"button\"\n                    onClick={() => openEdit(ctx)}\n                    className=\"p-1.5 hover:bg-bg-sunken rounded-md transition-colors\"\n                    title=\"Edit\"\n                  >\n                    <Pencil className=\"size-3.5 text-text-secondary\" />\n                  </button>\n                  <EntityShareButton\n                    entity=\"aicontext\"\n                    resource={{ id: ctx.id, name: ctx.name }}\n                    label={tr('vibecontrols.ai.contexts.share', 'Share')}\n                  />\n                  <button\n                    type=\"button\"\n                    onClick={() => setDeleteIds([ctx.id])}\n                    className=\"p-1.5 hover:bg-status-error-bg rounded-md transition-colors\"\n                    title=\"Delete\"\n                  >\n                    <Trash2 className=\"size-3.5 text-status-error-text\" />\n                  </button>\n                </div>\n              </div>\n              <pre className=\"mt-2 text-xs text-text-secondary bg-bg-sunken rounded p-2 max-h-20 overflow-auto whitespace-pre-wrap\">\n                {ctx.content}\n              </pre>\n              {ctx.tags.length > 0 && (\n                <div className=\"mt-2 flex flex-wrap gap-1\">\n                  {ctx.tags.map((tag) => (\n                    <span\n                      key={tag}\n                      className=\"px-1.5 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded\"\n                    >\n                      {tag}\n                    </span>\n                  ))}\n                </div>\n              )}\n            </Card>\n          ))}\n        </div>\n      )}\n\n      {/* Create/Edit Dialog */}\n      {showForm && (\n        <div\n          role=\"button\"\n          tabIndex={0}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              (() => setShowForm(false))();\n            }\n          }}\n          className=\"fixed inset-0 bg-bg-overlay flex items-center justify-center z-50 p-4\"\n          onClick={() => setShowForm(false)}\n        >\n          <div\n            className=\"bg-bg-surface border border-border-default rounded-lg shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto p-6\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            <div className=\"flex items-center justify-between mb-4\">\n              <h3 className=\"text-lg font-semibold text-text-primary\">\n                {editingId\n                  ? tr('vibecontrols.ai.contexts.editContext', 'Edit Context')\n                  : tr('vibecontrols.ai.contexts.newContext', 'New Context')}\n              </h3>\n              <button\n                type=\"button\"\n                onClick={() => setShowForm(false)}\n                className=\"p-1 hover:bg-bg-sunken rounded-md\"\n              >\n                <X className=\"size-4 text-text-secondary\" />\n              </button>\n            </div>\n\n            <div className=\"space-y-4\">\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('vibecontrols.ai.contexts.name', 'Name')}\n                </label>\n                <input\n                  aria-label=\"control\"\n                  type=\"text\"\n                  value={formData.name}\n                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}\n                  className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm focus:outline-none focus:border-border-strong\"\n                  placeholder={tr('vibecontrols.ai.contexts.namePlaceholder', 'Context name')}\n                />\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('vibecontrols.ai.contexts.type', 'Type')}\n                </label>\n                <select\n                  value={formData.type}\n                  onChange={(e) => setFormData({ ...formData, type: e.target.value })}\n                  className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm\"\n                >\n                  {contextTypes\n                    .filter((t) => t.value !== 'all')\n                    .map((t) => (\n                      <option key={t.value} value={t.value}>\n                        {t.label}\n                      </option>\n                    ))}\n                </select>\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('vibecontrols.ai.contexts.content', 'Content')}\n                </label>\n                <textarea\n                  aria-label=\"control\"\n                  value={formData.content}\n                  onChange={(e) => setFormData({ ...formData, content: e.target.value })}\n                  rows={8}\n                  className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm font-mono focus:outline-none focus:border-border-strong\"\n                  placeholder={tr(\n                    'vibecontrols.ai.contexts.contentPlaceholder',\n                    'Context content...'\n                  )}\n                />\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('vibecontrols.ai.contexts.tags', 'Tags')}\n                </label>\n                <div className=\"flex flex-wrap gap-1 mb-2\">\n                  {formData.tags.map((tag) => (\n                    <span\n                      key={tag}\n                      className=\"flex items-center gap-1 px-2 py-0.5 text-xs bg-bg-sunken text-text-primary rounded\"\n                    >\n                      {tag}\n                      <button type=\"button\" onClick={() => removeTag(tag)}>\n                        <X className=\"size-3 text-text-secondary hover:text-status-error-text\" />\n                      </button>\n                    </span>\n                  ))}\n                </div>\n                <div className=\"flex gap-2\">\n                  <input\n                    aria-label=\"control\"\n                    type=\"text\"\n                    value={tagInput}\n                    onChange={(e) => setTagInput(e.target.value)}\n                    onKeyDown={(e) => {\n                      if (e.key === 'Enter') {\n                        e.preventDefault();\n                        addTag();\n                      }\n                    }}\n                    className=\"flex-1 px-3 py-1.5 bg-bg-sunken border border-border-default rounded text-sm text-text-primary focus:outline-none focus:border-border-strong\"\n                    placeholder={tr('vibecontrols.ai.contexts.addTagPlaceholder', 'Add a tag...')}\n                  />\n                  <button\n                    type=\"button\"\n                    onClick={addTag}\n                    className=\"px-3 py-1.5 text-xs bg-bg-sunken border border-border-default rounded hover:bg-bg-surface transition-colors\"\n                  >\n                    {tr('vibecontrols.ai.contexts.add', 'Add')}\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div className=\"flex justify-end gap-2 mt-6\">\n              <button\n                type=\"button\"\n                onClick={() => setShowForm(false)}\n                className=\"px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken rounded-md transition-colors\"\n              >\n                {tr('vibecontrols.ai.contexts.cancel', 'Cancel')}\n              </button>\n              <button\n                type=\"button\"\n                onClick={handleSave}\n                disabled={saving || !formData.name || !formData.content}\n                className=\"px-4 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n              >\n                {saving\n                  ? tr('vibecontrols.ai.contexts.saving', 'Saving...')\n                  : editingId\n                    ? tr('vibecontrols.ai.contexts.update', 'Update')\n                    : tr('vibecontrols.ai.contexts.create', 'Create')}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* Delete Confirmation */}\n      <ConfirmDialog\n        isOpen={deleteIds.length > 0}\n        title={deleteIds.length > 1 ? 'Delete Contexts' : 'Delete Context'}\n        message={\n          deleteIds.length > 1\n            ? `Are you sure you want to delete ${deleteIds.length} selected contexts? This action cannot be undone.`\n            : 'Are you sure you want to delete this context? This action cannot be undone.'\n        }\n        confirmLabel={deleting ? 'Deleting...' : 'Delete'}\n        variant=\"danger\"\n        onConfirm={handleDelete}\n        onClose={() => setDeleteIds([])}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AIContextsTab.js","names":[],"sources":["../../../src/components/ai/AIContextsTab.tsx"],"sourcesContent":["import { useState, useEffect, useCallback, useMemo } from 'react';\nimport { Plus, X, FileText, Trash2, Pencil } from 'lucide-react';\nimport {\n  Card,\n  LoadingState,\n  ErrorState,\n  EmptyState,\n  ConfirmDialog,\n  SelectionCheckbox,\n} from '@/components/shared';\nimport { EntityShareButton } from '@/components/sharing';\nimport type { AIContext, AgentRef } from '@/services/aiApi';\nimport { fetchContexts, createContext, updateContext, deleteContext } from '@/services/aiApi';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AIContextsTabProps {\n  agent: AgentRef;\n}\n\nconst contextTypes = [\n  { value: 'all', label: 'All Types' },\n  { value: 'system', label: 'System' },\n  { value: 'user', label: 'User' },\n  { value: 'file', label: 'File' },\n  { value: 'project', label: 'Project' },\n  { value: 'custom', label: 'Custom' },\n];\n\ninterface ContextFormData {\n  name: string;\n  type: string;\n  content: string;\n  tags: string[];\n}\n\nconst emptyForm: ContextFormData = { name: '', type: 'custom', content: '', tags: [] };\n\nexport function AIContextsTab({ agent }: AIContextsTabProps) {\n  const tr = useTr();\n  const [contexts, setContexts] = useState<AIContext[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [typeFilter, setTypeFilter] = useState('all');\n  const [showForm, setShowForm] = useState(false);\n  const [editingId, setEditingId] = useState<string | null>(null);\n  const [formData, setFormData] = useState<ContextFormData>(emptyForm);\n  const [tagInput, setTagInput] = useState('');\n  const [saving, setSaving] = useState(false);\n  const [deleteIds, setDeleteIds] = useState<string[]>([]);\n  const [deleting, setDeleting] = useState(false);\n  const [selectedContextIds, setSelectedContextIds] = useState<Set<string>>(new Set());\n\n  const loadContexts = useCallback(async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const params: Record<string, unknown> = {};\n      if (typeFilter !== 'all') params.type = typeFilter;\n      const result = await fetchContexts(agent, params);\n      setContexts(result);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to load contexts');\n    } finally {\n      setLoading(false);\n    }\n  }, [agent, typeFilter]);\n\n  useEffect(() => {\n    loadContexts();\n  }, [loadContexts]);\n\n  const selectedContexts = useMemo(\n    () => contexts.filter((context) => selectedContextIds.has(context.id)),\n    [contexts, selectedContextIds]\n  );\n  const allVisibleSelected =\n    contexts.length > 0 && contexts.every((context) => selectedContextIds.has(context.id));\n  const partiallySelected =\n    contexts.some((context) => selectedContextIds.has(context.id)) && !allVisibleSelected;\n\n  const openCreate = () => {\n    setEditingId(null);\n    setFormData(emptyForm);\n    setTagInput('');\n    setShowForm(true);\n  };\n\n  const openEdit = (ctx: AIContext) => {\n    setEditingId(ctx.id);\n    setFormData({ name: ctx.name, type: ctx.type, content: ctx.content, tags: ctx.tags ?? [] });\n    setTagInput('');\n    setShowForm(true);\n  };\n\n  const handleSave = async () => {\n    setSaving(true);\n    try {\n      if (editingId) {\n        await updateContext(agent, editingId, formData);\n      } else {\n        await createContext(agent, formData);\n      }\n      setShowForm(false);\n      await loadContexts();\n    } catch (err) {\n      console.error('Failed to save context:', err);\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  const handleDelete = async () => {\n    if (deleteIds.length === 0) return;\n    setDeleting(true);\n    try {\n      await Promise.allSettled(deleteIds.map((deleteId) => deleteContext(agent, deleteId)));\n      setSelectedContextIds((prev) => {\n        const next = new Set(prev);\n        deleteIds.forEach((deleteId) => next.delete(deleteId));\n        return next;\n      });\n      setDeleteIds([]);\n      await loadContexts();\n    } catch (err) {\n      console.error('Failed to delete context:', err);\n    } finally {\n      setDeleting(false);\n    }\n  };\n\n  const addTag = () => {\n    const tag = tagInput.trim();\n    if (tag && !formData.tags.includes(tag)) {\n      setFormData((prev) => ({ ...prev, tags: [...prev.tags, tag] }));\n    }\n    setTagInput('');\n  };\n\n  const removeTag = (tag: string) => {\n    setFormData((prev) => ({ ...prev, tags: prev.tags.filter((t) => t !== tag) }));\n  };\n\n  const toggleContextSelection = (contextId: string, checked: boolean) => {\n    setSelectedContextIds((prev) => {\n      const next = new Set(prev);\n      if (checked) {\n        next.add(contextId);\n      } else {\n        next.delete(contextId);\n      }\n      return next;\n    });\n  };\n\n  const toggleAllVisibleContexts = (checked: boolean) => {\n    setSelectedContextIds((prev) => {\n      const next = new Set(prev);\n      contexts.forEach((context) => {\n        if (checked) {\n          next.add(context.id);\n        } else {\n          next.delete(context.id);\n        }\n      });\n      return next;\n    });\n  };\n\n  const clearSelection = () => setSelectedContextIds(new Set());\n\n  if (loading)\n    return <LoadingState message={tr('vibecontrols.ai.contexts.loading', 'Loading contexts...')} />;\n  if (error)\n    return (\n      <ErrorState\n        title={tr('vibecontrols.ai.contexts.loadFailed', 'Failed to load contexts')}\n        message={error}\n        onRetry={loadContexts}\n      />\n    );\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Toolbar */}\n      <div className=\"flex flex-col sm:flex-row items-stretch sm:items-center gap-2\">\n        <select\n          value={typeFilter}\n          onChange={(e) => setTypeFilter(e.target.value)}\n          className=\"px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm\"\n        >\n          {contextTypes.map((t) => (\n            <option key={t.value} value={t.value}>\n              {t.label}\n            </option>\n          ))}\n        </select>\n        <div className=\"flex-1\" />\n        <button\n          type=\"button\"\n          onClick={openCreate}\n          className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors text-sm\"\n        >\n          <Plus className=\"size-4\" />\n          {tr('vibecontrols.ai.contexts.newContext', 'New Context')}\n        </button>\n      </div>\n\n      {contexts.length > 0 && (\n        <div className=\"rounded-lg border border-border-default bg-bg-surface p-4\">\n          <div className=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n            <div className=\"flex flex-wrap items-center gap-3\">\n              <div className=\"flex items-center gap-2\">\n                <SelectionCheckbox\n                  checked={allVisibleSelected}\n                  indeterminate={partiallySelected}\n                  onChange={toggleAllVisibleContexts}\n                  ariaLabel=\"Select all visible contexts\"\n                />\n                <span className=\"text-sm font-medium text-text-primary\">\n                  {tr('vibecontrols.ai.contexts.selectAllVisible', 'Select all visible')}\n                </span>\n              </div>\n              {selectedContextIds.size > 0 && (\n                <button\n                  type=\"button\"\n                  onClick={clearSelection}\n                  className=\"text-sm text-text-secondary hover:text-text-primary\"\n                >\n                  {tr('vibecontrols.ai.contexts.clearSelection', 'Clear selection')}\n                </button>\n              )}\n            </div>\n\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <span className=\"rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary\">\n                {selectedContextIds.size} {tr('vibecontrols.ai.contexts.selected', 'selected')}\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => setDeleteIds(selectedContexts.map((context) => context.id))}\n                disabled={selectedContexts.length === 0}\n                className=\"rounded-md border border-status-error-border px-3 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg disabled:cursor-not-allowed disabled:opacity-50\"\n              >\n                {tr('vibecontrols.ai.contexts.deleteSelected', 'Delete Selected')}\n                {selectedContexts.length > 0 ? ` (${selectedContexts.length})` : ''}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* Context List */}\n      {contexts.length === 0 ? (\n        <EmptyState\n          icon={<FileText className=\"size-8 text-text-secondary\" />}\n          title={tr('vibecontrols.ai.contexts.emptyTitle', 'No contexts yet')}\n          description={tr(\n            'vibecontrols.ai.contexts.emptyDescription',\n            'Create contexts to provide additional information to your AI sessions'\n          )}\n          action={\n            <button\n              type=\"button\"\n              onClick={openCreate}\n              className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              <Plus className=\"size-4\" />\n              {tr('vibecontrols.ai.contexts.newContext', 'New Context')}\n            </button>\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n          {contexts.map((ctx) => (\n            <Card\n              key={ctx.id}\n              className={`p-4 ${selectedContextIds.has(ctx.id) ? 'border-action-primary-bg ring-1 ring-action-primary-bg/25' : ''}`}\n            >\n              <div className=\"flex items-start justify-between gap-2\">\n                <div className=\"flex items-start gap-3 min-w-0 flex-1\">\n                  <div onClick={(event) => event.stopPropagation()}>\n                    <SelectionCheckbox\n                      checked={selectedContextIds.has(ctx.id)}\n                      onChange={(checked) => toggleContextSelection(ctx.id, checked)}\n                      ariaLabel={`Select context ${ctx.name}`}\n                    />\n                  </div>\n                  <div className=\"min-w-0 flex-1\">\n                    <div className=\"flex items-center gap-2\">\n                      <h4 className=\"font-semibold text-text-primary truncate\">{ctx.name}</h4>\n                      <span className=\"px-1.5 py-0.5 text-xs bg-[var(--color-accent-soft)] text-text-primary rounded\">\n                        {ctx.type}\n                      </span>\n                    </div>\n                  </div>\n                </div>\n                <div className=\"flex items-center gap-1 flex-shrink-0\">\n                  <button\n                    type=\"button\"\n                    onClick={() => openEdit(ctx)}\n                    className=\"p-1.5 hover:bg-bg-sunken rounded-md transition-colors\"\n                    title=\"Edit\"\n                  >\n                    <Pencil className=\"size-3.5 text-text-secondary\" />\n                  </button>\n                  <EntityShareButton\n                    entity=\"aicontext\"\n                    resource={{ id: ctx.id, name: ctx.name }}\n                    label={tr('vibecontrols.ai.contexts.share', 'Share')}\n                  />\n                  <button\n                    type=\"button\"\n                    onClick={() => setDeleteIds([ctx.id])}\n                    className=\"p-1.5 hover:bg-status-error-bg rounded-md transition-colors\"\n                    title=\"Delete\"\n                  >\n                    <Trash2 className=\"size-3.5 text-status-error-text\" />\n                  </button>\n                </div>\n              </div>\n              <pre className=\"mt-2 text-xs text-text-secondary bg-bg-sunken rounded p-2 max-h-20 overflow-auto whitespace-pre-wrap\">\n                {ctx.content}\n              </pre>\n              {ctx.tags.length > 0 && (\n                <div className=\"mt-2 flex flex-wrap gap-1\">\n                  {ctx.tags.map((tag) => (\n                    <span\n                      key={tag}\n                      className=\"px-1.5 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded\"\n                    >\n                      {tag}\n                    </span>\n                  ))}\n                </div>\n              )}\n            </Card>\n          ))}\n        </div>\n      )}\n\n      {/* Create/Edit Dialog */}\n      {showForm && (\n        <div\n          role=\"button\"\n          tabIndex={0}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              (() => setShowForm(false))();\n            }\n          }}\n          className=\"fixed inset-0 bg-bg-overlay flex items-center justify-center z-50 p-4\"\n          onClick={() => setShowForm(false)}\n        >\n          <div\n            className=\"bg-bg-surface border border-border-default rounded-lg shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto p-6\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            <div className=\"flex items-center justify-between mb-4\">\n              <h3 className=\"text-lg font-semibold text-text-primary\">\n                {editingId\n                  ? tr('vibecontrols.ai.contexts.editContext', 'Edit Context')\n                  : tr('vibecontrols.ai.contexts.newContext', 'New Context')}\n              </h3>\n              <button\n                type=\"button\"\n                onClick={() => setShowForm(false)}\n                className=\"p-1 hover:bg-bg-sunken rounded-md\"\n              >\n                <X className=\"size-4 text-text-secondary\" />\n              </button>\n            </div>\n\n            <div className=\"space-y-4\">\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('vibecontrols.ai.contexts.name', 'Name')}\n                </label>\n                <input\n                  aria-label=\"control\"\n                  type=\"text\"\n                  value={formData.name}\n                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}\n                  className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm focus:outline-none focus:border-border-strong\"\n                  placeholder={tr('vibecontrols.ai.contexts.namePlaceholder', 'Context name')}\n                />\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('vibecontrols.ai.contexts.type', 'Type')}\n                </label>\n                <select\n                  value={formData.type}\n                  onChange={(e) => setFormData({ ...formData, type: e.target.value })}\n                  className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm\"\n                >\n                  {contextTypes\n                    .filter((t) => t.value !== 'all')\n                    .map((t) => (\n                      <option key={t.value} value={t.value}>\n                        {t.label}\n                      </option>\n                    ))}\n                </select>\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('vibecontrols.ai.contexts.content', 'Content')}\n                </label>\n                <textarea\n                  aria-label=\"control\"\n                  value={formData.content}\n                  onChange={(e) => setFormData({ ...formData, content: e.target.value })}\n                  rows={8}\n                  className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm font-mono focus:outline-none focus:border-border-strong\"\n                  placeholder={tr(\n                    'vibecontrols.ai.contexts.contentPlaceholder',\n                    'Context content...'\n                  )}\n                />\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('vibecontrols.ai.contexts.tags', 'Tags')}\n                </label>\n                <div className=\"flex flex-wrap gap-1 mb-2\">\n                  {formData.tags.map((tag) => (\n                    <span\n                      key={tag}\n                      className=\"flex items-center gap-1 px-2 py-0.5 text-xs bg-bg-sunken text-text-primary rounded\"\n                    >\n                      {tag}\n                      <button type=\"button\" onClick={() => removeTag(tag)}>\n                        <X className=\"size-3 text-text-secondary hover:text-status-error-text\" />\n                      </button>\n                    </span>\n                  ))}\n                </div>\n                <div className=\"flex gap-2\">\n                  <input\n                    aria-label=\"control\"\n                    type=\"text\"\n                    value={tagInput}\n                    onChange={(e) => setTagInput(e.target.value)}\n                    onKeyDown={(e) => {\n                      if (e.key === 'Enter') {\n                        e.preventDefault();\n                        addTag();\n                      }\n                    }}\n                    className=\"flex-1 px-3 py-1.5 bg-bg-sunken border border-border-default rounded text-sm text-text-primary focus:outline-none focus:border-border-strong\"\n                    placeholder={tr('vibecontrols.ai.contexts.addTagPlaceholder', 'Add a tag...')}\n                  />\n                  <button\n                    type=\"button\"\n                    onClick={addTag}\n                    className=\"px-3 py-1.5 text-xs bg-bg-sunken border border-border-default rounded hover:bg-bg-surface transition-colors\"\n                  >\n                    {tr('vibecontrols.ai.contexts.add', 'Add')}\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div className=\"flex justify-end gap-2 mt-6\">\n              <button\n                type=\"button\"\n                onClick={() => setShowForm(false)}\n                className=\"px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken rounded-md transition-colors\"\n              >\n                {tr('vibecontrols.ai.contexts.cancel', 'Cancel')}\n              </button>\n              <button\n                type=\"button\"\n                onClick={handleSave}\n                disabled={saving || !formData.name || !formData.content}\n                className=\"px-4 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n              >\n                {saving\n                  ? tr('vibecontrols.ai.contexts.saving', 'Saving...')\n                  : editingId\n                    ? tr('vibecontrols.ai.contexts.update', 'Update')\n                    : tr('vibecontrols.ai.contexts.create', 'Create')}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* Delete Confirmation */}\n      <ConfirmDialog\n        isOpen={deleteIds.length > 0}\n        title={deleteIds.length > 1 ? 'Delete Contexts' : 'Delete Context'}\n        message={\n          deleteIds.length > 1\n            ? `Are you sure you want to delete ${deleteIds.length} selected contexts? This action cannot be undone.`\n            : 'Are you sure you want to delete this context? This action cannot be undone.'\n        }\n        confirmLabel={deleting ? 'Deleting...' : 'Delete'}\n        variant=\"danger\"\n        onConfirm={handleDelete}\n        onClose={() => setDeleteIds([])}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/ai/AIOverviewTab.js

@@ -11,10 +11,10 @@ import { jsx as m, jsxs as h } from "react/jsx-runtime";
 import { MotionItem as g, MotionList as _ } from "@burdenoff/fe-libs/shared/motion";
 //#region src/components/ai/AIOverviewTab.tsx
 var v = {
-	active: "bg-status-success-bg text-status-success-text",
-	idle: "bg-status-warning-bg text-status-warning-text",
-	processing: "bg-action-primary-bg/20 text-action-primary-bg",
-	error: "bg-status-error-bg text-status-error-text",
+	active: "bg-status-success-bg-subtle text-status-success-text",
+	idle: "bg-status-warning-bg-subtle text-status-warning-text",
+	processing: "bg-[var(--color-accent-soft)] text-text-primary",
+	error: "bg-status-error-bg-subtle text-status-error-text",
 	terminated: "bg-bg-sunken text-text-secondary"
 };
 function y({ agent: y, onNavigateToSession: b }) {

package/dist/components/ai/AIOverviewTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"AIOverviewTab.js","names":[],"sources":["../../../src/components/ai/AIOverviewTab.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { Activity, Zap, Clock, MessageSquare } from 'lucide-react';\nimport { StatCard, Card, LoadingState, ErrorState } from '@/components/shared';\nimport { MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport type { AIStatsOverview, AISession, AIDispatch, AgentRef } from '@/services/aiApi';\nimport { fetchStatsOverview, fetchSessions, fetchDispatchHistory } from '@/services/aiApi';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AIOverviewTabProps {\n  agent: AgentRef;\n  onNavigateToSession?: (sessionId: string) => void;\n}\n\nconst statusColors: Record<string, string> = {\n  active: 'bg-status-success-bg text-status-success-text',\n  idle: 'bg-status-warning-bg text-status-warning-text',\n  processing: 'bg-action-primary-bg/20 text-action-primary-bg',\n  error: 'bg-status-error-bg text-status-error-text',\n  terminated: 'bg-bg-sunken text-text-secondary',\n};\n\nexport function AIOverviewTab({ agent, onNavigateToSession }: AIOverviewTabProps) {\n  const tr = useTr();\n  const [stats, setStats] = useState<AIStatsOverview | null>(null);\n  const [recentSessions, setRecentSessions] = useState<AISession[]>([]);\n  const [recentPrompts, setRecentPrompts] = useState<AIDispatch[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    async function load() {\n      setLoading(true);\n      setError(null);\n      try {\n        const [s, sess, hist] = await Promise.all([\n          fetchStatsOverview(agent),\n          fetchSessions(agent, { limit: 5, sort: 'updatedAt:desc' }),\n          fetchDispatchHistory(agent, { limit: 5 }),\n        ]);\n        if (cancelled) return;\n        setStats(s);\n        setRecentSessions(sess);\n        setRecentPrompts(hist);\n      } catch (err) {\n        if (!cancelled) setError(err instanceof Error ? err.message : 'Failed to load overview');\n      } finally {\n        if (!cancelled) setLoading(false);\n      }\n    }\n    load();\n    return () => {\n      cancelled = true;\n    };\n  }, [agent.id, agent.profile]);\n\n  if (loading)\n    return (\n      <LoadingState message={tr('vibecontrols.ai.overview.loading', 'Loading AI overview...')} />\n    );\n  if (error)\n    return (\n      <ErrorState\n        title={tr('vibecontrols.ai.overview.loadFailed', 'Failed to load overview')}\n        message={error}\n      />\n    );\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Quick Stats */}\n      <MotionList stagger={0.04} className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n        <MotionItem>\n          <StatCard\n            title={tr('vibecontrols.ai.overview.activeSessions', 'Active Sessions')}\n            value={stats?.activeSessions ?? 0}\n            icon={<Activity className=\"size-5\" />}\n            variant=\"success\"\n          />\n        </MotionItem>\n        <MotionItem>\n          <StatCard\n            title={tr('vibecontrols.ai.overview.totalTokens', 'Total Tokens')}\n            value={stats?.totalTokens?.toLocaleString() ?? '0'}\n            subtitle={`In: ${stats?.inputTokens?.toLocaleString() ?? 0} / Out: ${stats?.outputTokens?.toLocaleString() ?? 0}`}\n            icon={<Zap className=\"size-5\" />}\n          />\n        </MotionItem>\n        <MotionItem>\n          <StatCard\n            title={tr('vibecontrols.ai.overview.queuedPrompts', 'Queued Prompts')}\n            value={stats?.queuedPrompts ?? 0}\n            icon={<Clock className=\"size-5\" />}\n            variant={stats?.queuedPrompts && stats.queuedPrompts > 0 ? 'warning' : 'default'}\n          />\n        </MotionItem>\n        <MotionItem>\n          <StatCard\n            title={tr('vibecontrols.ai.overview.totalSessions', 'Total Sessions')}\n            value={stats?.totalSessions ?? 0}\n            icon={<MessageSquare className=\"size-5\" />}\n          />\n        </MotionItem>\n      </MotionList>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n        {/* Recent Sessions */}\n        <Card className=\"p-0\">\n          <div className=\"px-4 py-3 border-b border-border-default\">\n            <h3 className=\"font-semibold text-text-primary\">\n              {tr('vibecontrols.ai.overview.recentSessions', 'Recent Sessions')}\n            </h3>\n          </div>\n          <div className=\"divide-y divide-border-default\">\n            {recentSessions.length === 0 ? (\n              <p className=\"px-4 py-6 text-sm text-text-secondary text-center\">\n                {tr('vibecontrols.ai.overview.noSessions', 'No sessions yet')}\n              </p>\n            ) : (\n              recentSessions.map((session) => (\n                <button\n                  type=\"button\"\n                  key={session.id}\n                  onClick={() => onNavigateToSession?.(session.id)}\n                  className=\"flex w-full flex-col items-start gap-2 px-4 py-3 text-left transition-colors hover:bg-bg-sunken sm:flex-row sm:items-center sm:justify-between\"\n                >\n                  <div className=\"min-w-0 flex-1\">\n                    <div className=\"font-medium text-text-primary text-sm truncate\">\n                      {session.name}\n                    </div>\n                    <div className=\"text-xs text-text-secondary\">{session.agentType}</div>\n                  </div>\n                  <span\n                    className={`rounded-full px-2 py-0.5 text-xs font-medium ${statusColors[session.status] ?? 'bg-bg-sunken text-text-secondary'}`}\n                  >\n                    {session.status}\n                  </span>\n                </button>\n              ))\n            )}\n          </div>\n        </Card>\n\n        {/* Recent Prompts */}\n        <Card className=\"p-0\">\n          <div className=\"px-4 py-3 border-b border-border-default\">\n            <h3 className=\"font-semibold text-text-primary\">\n              {tr('vibecontrols.ai.overview.recentPrompts', 'Recent Prompts')}\n            </h3>\n          </div>\n          <div className=\"divide-y divide-border-default\">\n            {recentPrompts.length === 0 ? (\n              <p className=\"px-4 py-6 text-sm text-text-secondary text-center\">\n                {tr('vibecontrols.ai.overview.noPrompts', 'No prompts dispatched yet')}\n              </p>\n            ) : (\n              recentPrompts.map((dispatch) => (\n                <div key={dispatch.id} className=\"px-4 py-3\">\n                  <div className=\"text-sm text-text-primary line-clamp-2\">{dispatch.prompt}</div>\n                  <div className=\"mt-1 flex flex-wrap items-center gap-2 text-xs text-text-secondary\">\n                    <span>{dispatch.status}</span>\n                    {dispatch.createdAt && (\n                      <span>{new Date(dispatch.createdAt).toLocaleString()}</span>\n                    )}\n                  </div>\n                </div>\n              ))\n            )}\n          </div>\n        </Card>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AIOverviewTab.js","names":[],"sources":["../../../src/components/ai/AIOverviewTab.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { Activity, Zap, Clock, MessageSquare } from 'lucide-react';\nimport { StatCard, Card, LoadingState, ErrorState } from '@/components/shared';\nimport { MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport type { AIStatsOverview, AISession, AIDispatch, AgentRef } from '@/services/aiApi';\nimport { fetchStatsOverview, fetchSessions, fetchDispatchHistory } from '@/services/aiApi';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AIOverviewTabProps {\n  agent: AgentRef;\n  onNavigateToSession?: (sessionId: string) => void;\n}\n\nconst statusColors: Record<string, string> = {\n  active: 'bg-status-success-bg-subtle text-status-success-text',\n  idle: 'bg-status-warning-bg-subtle text-status-warning-text',\n  processing: 'bg-[var(--color-accent-soft)] text-text-primary',\n  error: 'bg-status-error-bg-subtle text-status-error-text',\n  terminated: 'bg-bg-sunken text-text-secondary',\n};\n\nexport function AIOverviewTab({ agent, onNavigateToSession }: AIOverviewTabProps) {\n  const tr = useTr();\n  const [stats, setStats] = useState<AIStatsOverview | null>(null);\n  const [recentSessions, setRecentSessions] = useState<AISession[]>([]);\n  const [recentPrompts, setRecentPrompts] = useState<AIDispatch[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    async function load() {\n      setLoading(true);\n      setError(null);\n      try {\n        const [s, sess, hist] = await Promise.all([\n          fetchStatsOverview(agent),\n          fetchSessions(agent, { limit: 5, sort: 'updatedAt:desc' }),\n          fetchDispatchHistory(agent, { limit: 5 }),\n        ]);\n        if (cancelled) return;\n        setStats(s);\n        setRecentSessions(sess);\n        setRecentPrompts(hist);\n      } catch (err) {\n        if (!cancelled) setError(err instanceof Error ? err.message : 'Failed to load overview');\n      } finally {\n        if (!cancelled) setLoading(false);\n      }\n    }\n    load();\n    return () => {\n      cancelled = true;\n    };\n  }, [agent.id, agent.profile]);\n\n  if (loading)\n    return (\n      <LoadingState message={tr('vibecontrols.ai.overview.loading', 'Loading AI overview...')} />\n    );\n  if (error)\n    return (\n      <ErrorState\n        title={tr('vibecontrols.ai.overview.loadFailed', 'Failed to load overview')}\n        message={error}\n      />\n    );\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Quick Stats */}\n      <MotionList stagger={0.04} className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n        <MotionItem>\n          <StatCard\n            title={tr('vibecontrols.ai.overview.activeSessions', 'Active Sessions')}\n            value={stats?.activeSessions ?? 0}\n            icon={<Activity className=\"size-5\" />}\n            variant=\"success\"\n          />\n        </MotionItem>\n        <MotionItem>\n          <StatCard\n            title={tr('vibecontrols.ai.overview.totalTokens', 'Total Tokens')}\n            value={stats?.totalTokens?.toLocaleString() ?? '0'}\n            subtitle={`In: ${stats?.inputTokens?.toLocaleString() ?? 0} / Out: ${stats?.outputTokens?.toLocaleString() ?? 0}`}\n            icon={<Zap className=\"size-5\" />}\n          />\n        </MotionItem>\n        <MotionItem>\n          <StatCard\n            title={tr('vibecontrols.ai.overview.queuedPrompts', 'Queued Prompts')}\n            value={stats?.queuedPrompts ?? 0}\n            icon={<Clock className=\"size-5\" />}\n            variant={stats?.queuedPrompts && stats.queuedPrompts > 0 ? 'warning' : 'default'}\n          />\n        </MotionItem>\n        <MotionItem>\n          <StatCard\n            title={tr('vibecontrols.ai.overview.totalSessions', 'Total Sessions')}\n            value={stats?.totalSessions ?? 0}\n            icon={<MessageSquare className=\"size-5\" />}\n          />\n        </MotionItem>\n      </MotionList>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n        {/* Recent Sessions */}\n        <Card className=\"p-0\">\n          <div className=\"px-4 py-3 border-b border-border-default\">\n            <h3 className=\"font-semibold text-text-primary\">\n              {tr('vibecontrols.ai.overview.recentSessions', 'Recent Sessions')}\n            </h3>\n          </div>\n          <div className=\"divide-y divide-border-default\">\n            {recentSessions.length === 0 ? (\n              <p className=\"px-4 py-6 text-sm text-text-secondary text-center\">\n                {tr('vibecontrols.ai.overview.noSessions', 'No sessions yet')}\n              </p>\n            ) : (\n              recentSessions.map((session) => (\n                <button\n                  type=\"button\"\n                  key={session.id}\n                  onClick={() => onNavigateToSession?.(session.id)}\n                  className=\"flex w-full flex-col items-start gap-2 px-4 py-3 text-left transition-colors hover:bg-bg-sunken sm:flex-row sm:items-center sm:justify-between\"\n                >\n                  <div className=\"min-w-0 flex-1\">\n                    <div className=\"font-medium text-text-primary text-sm truncate\">\n                      {session.name}\n                    </div>\n                    <div className=\"text-xs text-text-secondary\">{session.agentType}</div>\n                  </div>\n                  <span\n                    className={`rounded-full px-2 py-0.5 text-xs font-medium ${statusColors[session.status] ?? 'bg-bg-sunken text-text-secondary'}`}\n                  >\n                    {session.status}\n                  </span>\n                </button>\n              ))\n            )}\n          </div>\n        </Card>\n\n        {/* Recent Prompts */}\n        <Card className=\"p-0\">\n          <div className=\"px-4 py-3 border-b border-border-default\">\n            <h3 className=\"font-semibold text-text-primary\">\n              {tr('vibecontrols.ai.overview.recentPrompts', 'Recent Prompts')}\n            </h3>\n          </div>\n          <div className=\"divide-y divide-border-default\">\n            {recentPrompts.length === 0 ? (\n              <p className=\"px-4 py-6 text-sm text-text-secondary text-center\">\n                {tr('vibecontrols.ai.overview.noPrompts', 'No prompts dispatched yet')}\n              </p>\n            ) : (\n              recentPrompts.map((dispatch) => (\n                <div key={dispatch.id} className=\"px-4 py-3\">\n                  <div className=\"text-sm text-text-primary line-clamp-2\">{dispatch.prompt}</div>\n                  <div className=\"mt-1 flex flex-wrap items-center gap-2 text-xs text-text-secondary\">\n                    <span>{dispatch.status}</span>\n                    {dispatch.createdAt && (\n                      <span>{new Date(dispatch.createdAt).toLocaleString()}</span>\n                    )}\n                  </div>\n                </div>\n              ))\n            )}\n          </div>\n        </Card>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAaA,IAAM,IAAuC;CAC3C,QAAQ;CACR,MAAM;CACN,YAAY;CACZ,OAAO;CACP,YAAY;CACb;AAED,SAAgB,EAAc,EAAE,UAAO,0BAA2C;CAChF,IAAM,IAAK,GAAO,EACZ,CAAC,GAAO,KAAY,EAAiC,KAAK,EAC1D,CAAC,GAAgB,KAAqB,EAAsB,EAAE,CAAC,EAC/D,CAAC,GAAe,KAAoB,EAAuB,EAAE,CAAC,EAC9D,CAAC,GAAS,KAAc,EAAS,GAAK,EACtC,CAAC,GAAO,KAAY,EAAwB,KAAK;AAyCvD,QAvCA,QAAgB;EACd,IAAI,IAAY;EAChB,eAAe,IAAO;AAEpB,GADA,EAAW,GAAK,EAChB,EAAS,KAAK;AACd,OAAI;IACF,IAAM,CAAC,GAAG,GAAM,KAAQ,MAAM,QAAQ,IAAI;KACxC,EAAmB,EAAM;KACzB,EAAc,GAAO;MAAE,OAAO;MAAG,MAAM;MAAkB,CAAC;KAC1D,EAAqB,GAAO,EAAE,OAAO,GAAG,CAAC;KAC1C,CAAC;AACF,QAAI,EAAW;AAGf,IAFA,EAAS,EAAE,EACX,EAAkB,EAAK,EACvB,EAAiB,EAAK;YACf,GAAK;AACZ,IAAK,KAAW,EAAS,aAAe,QAAQ,EAAI,UAAU,0BAA0B;aAChF;AACR,IAAK,KAAW,EAAW,GAAM;;;AAIrC,SADA,GAAM,QACO;AACX,OAAY;;IAEb,CAAC,EAAM,IAAI,EAAM,QAAQ,CAAC,EAEzB,IAEA,kBAAC,GAAD,EAAc,SAAS,EAAG,oCAAoC,yBAAyB,EAAI,CAAA,GAE3F,IAEA,kBAAC,GAAD;EACE,OAAO,EAAG,uCAAuC,0BAA0B;EAC3E,SAAS;EACT,CAAA,GAIJ,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,GAAD;GAAY,SAAS;GAAM,WAAU;aAArC;IACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;KACE,OAAO,EAAG,2CAA2C,kBAAkB;KACvE,OAAO,GAAO,kBAAkB;KAChC,MAAM,kBAAC,GAAD,EAAU,WAAU,UAAW,CAAA;KACrC,SAAQ;KACR,CAAA,EACS,CAAA;IACb,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;KACE,OAAO,EAAG,wCAAwC,eAAe;KACjE,OAAO,GAAO,aAAa,gBAAgB,IAAI;KAC/C,UAAU,OAAO,GAAO,aAAa,gBAAgB,IAAI,EAAE,UAAU,GAAO,cAAc,gBAAgB,IAAI;KAC9G,MAAM,kBAAC,GAAD,EAAK,WAAU,UAAW,CAAA;KAChC,CAAA,EACS,CAAA;IACb,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;KACE,OAAO,EAAG,0CAA0C,iBAAiB;KACrE,OAAO,GAAO,iBAAiB;KAC/B,MAAM,kBAAC,GAAD,EAAO,WAAU,UAAW,CAAA;KAClC,SAAS,GAAO,iBAAiB,EAAM,gBAAgB,IAAI,YAAY;KACvE,CAAA,EACS,CAAA;IACb,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;KACE,OAAO,EAAG,0CAA0C,iBAAiB;KACrE,OAAO,GAAO,iBAAiB;KAC/B,MAAM,kBAAC,GAAD,EAAe,WAAU,UAAW,CAAA;KAC1C,CAAA,EACS,CAAA;IACF;MAEb,kBAAC,OAAD;GAAK,WAAU;aAAf,CAEE,kBAAC,GAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,2CAA2C,kBAAkB;MAC9D,CAAA;KACD,CAAA,EACN,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAe,WAAW,IACzB,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAG,uCAAuC,kBAAkB;MAC3D,CAAA,GAEJ,EAAe,KAAK,MAClB,kBAAC,UAAD;MACE,MAAK;MAEL,eAAe,IAAsB,EAAQ,GAAG;MAChD,WAAU;gBAJZ,CAME,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACZ,EAAQ;QACL,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBAA+B,EAAQ;QAAgB,CAAA,CAClE;UACN,kBAAC,QAAD;OACE,WAAW,gDAAgD,EAAa,EAAQ,WAAW;iBAE1F,EAAQ;OACJ,CAAA,CACA;QAfF,EAAQ,GAeN,CACT;KAEA,CAAA,CACD;OAGP,kBAAC,GAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,0CAA0C,iBAAiB;MAC5D,CAAA;KACD,CAAA,EACN,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAc,WAAW,IACxB,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAG,sCAAsC,4BAA4B;MACpE,CAAA,GAEJ,EAAc,KAAK,MACjB,kBAAC,OAAD;MAAuB,WAAU;gBAAjC,CACE,kBAAC,OAAD;OAAK,WAAU;iBAA0C,EAAS;OAAa,CAAA,EAC/E,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD,EAAA,UAAO,EAAS,QAAc,CAAA,EAC7B,EAAS,aACR,kBAAC,QAAD,EAAA,UAAO,IAAI,KAAK,EAAS,UAAU,CAAC,gBAAgB,EAAQ,CAAA,CAE1D;SACF;QARI,EAAS,GAQb,CACN;KAEA,CAAA,CACD;MACH;KACF"}

package/dist/components/ai/AIPlanPanel.js

@@ -94,7 +94,7 @@ function O({ agent: e, tunnelUrl: t }) {
 		className: "flex items-center gap-2 p-6 text-text-secondary",
 		children: [/* @__PURE__ */ T(v, { className: "size-4 animate-spin" }), /* @__PURE__ */ T("span", { children: r("plan.loadingStatus", "Loading plan status…") })]
 	}) : H === "status-error" ? /* @__PURE__ */ T("div", {
-		className: "rounded-md border border-status-error-border bg-status-error-bg p-4 text-sm text-status-error-text",
+		className: "rounded-md border border-status-error-border bg-status-error-bg-subtle p-4 text-sm text-status-error-text",
 		children: /* @__PURE__ */ E("div", {
 			className: "flex items-start gap-2",
 			children: [/* @__PURE__ */ T(h, { className: "size-4 mt-0.5 shrink-0" }), /* @__PURE__ */ E("div", {
@@ -126,12 +126,12 @@ function O({ agent: e, tunnelUrl: t }) {
 		children: [
 			N && /* @__PURE__ */ T("div", {
 				role: "status",
-				className: "rounded-md border border-status-success-border bg-status-success-bg px-3 py-2 text-xs text-status-success-text",
+				className: "rounded-md border border-status-success-border bg-status-success-bg-subtle px-3 py-2 text-xs text-status-success-text",
 				children: N
 			}),
 			F && /* @__PURE__ */ T("div", {
 				role: "alert",
-				className: "rounded-md border border-status-error-border bg-status-error-bg px-3 py-2 text-xs text-status-error-text",
+				className: "rounded-md border border-status-error-border bg-status-error-bg-subtle px-3 py-2 text-xs text-status-error-text",
 				children: F
 			}),
 			H === "install-cli" && /* @__PURE__ */ T(k, {
@@ -304,7 +304,7 @@ function j({ agent: n, agents: r, tunnelUrl: i, runningSessions: a, onReconfigur
 		});
 	}, []);
 	if (!i) return /* @__PURE__ */ T("div", {
-		className: "rounded-lg border border-status-warning-border bg-status-warning-bg p-4 text-sm text-status-warning-text",
+		className: "rounded-lg border border-status-warning-border bg-status-warning-bg-subtle p-4 text-sm text-status-warning-text",
 		children: s("plan.tunnelMissing", "Agent tunnel URL is missing. Bring the agent online and refresh.")
 	});
 	let I = r.filter((e) => e.hookConfigured);