@burdenoff/microfe-vibecontrols 2026.531.16 → 2026.601.2

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 { useState } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport {\n  Server,\n  Clock,\n  Cpu,\n  MoreVertical,\n  Play,\n  Square,\n  Settings,\n  Globe,\n  Link,\n  RefreshCw,\n} from 'lucide-react';\nimport { AgentStatusBadge } from './AgentStatusBadge';\nimport type { Agent, AgentStatus } from './types';\nimport { getAgentStatus } from './agentStatus';\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 { t } = useI18n();\n  const tr = (key: string, fallback: string) => {\n    const v = t(key);\n    return v === key ? fallback : v;\n  };\n  // Support both onConfigure and onSettings\n  const handleConfigure = onConfigure || onSettings;\n  const [showMenu, setShowMenu] = useState(false);\n\n  const 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 platformIcon =\n    {\n      darwin: '🍎',\n      linux: '🐧',\n      windows: '🪟',\n    }[agent.platform || ''] || '💻';\n\n  return (\n    <motion.div\n      whileHover={{ y: -2, transition: { duration: 0.15, ease: [0.4, 0, 0.2, 1] } }}\n      whileTap={{ scale: 0.98 }}\n      className={`bg-bg-surface border rounded-lg p-4 h-full hover:border-border-strong hover:shadow-md transition-all cursor-pointer ${\n        selected\n          ? 'border-action-primary-bg ring-1 ring-action-primary-bg/30'\n          : 'border-border-default'\n      } ${className}`}\n      onClick={() => onSelect?.(agent)}\n    >\n      <div className=\"flex items-start justify-between gap-2\">\n        <div className=\"flex items-start gap-2 sm:gap-3 min-w-0 flex-1\">\n          {/* Selection Checkbox */}\n          {onToggleSelect && (\n            <button\n              type=\"button\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onToggleSelect();\n              }}\n              className={`flex-shrink-0 size-5 min-w-[1.25rem] min-h-[1.25rem] rounded border transition-colors mt-0.5 ${\n                selected\n                  ? 'bg-action-primary-bg border-action-primary-bg text-action-primary-text'\n                  : 'border-border-default hover:border-border-strong bg-bg-surface'\n              } flex items-center justify-center`}\n            >\n              {selected && (\n                <svg\n                  className=\"size-3\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                  strokeWidth={3}\n                >\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n                </svg>\n              )}\n            </button>\n          )}\n          <div className=\"flex-shrink-0 size-8 sm:w-10 sm:h-10 rounded-lg bg-bg-sunken flex items-center justify-center\">\n            <Server className=\"size-4 sm:w-5 sm:h-5 text-text-secondary\" />\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"flex items-center gap-1.5 sm:gap-2 min-w-0\">\n              <h3 className=\"font-semibold text-text-primary truncate min-w-0 max-w-[120px] sm:max-w-none text-sm sm:text-base\">\n                {agent.name}\n              </h3>\n              <span className=\"text-base sm:text-lg flex-shrink-0\">{platformIcon}</span>\n            </div>\n            <p className=\"text-xs sm:text-sm text-text-secondary truncate\">\n              {agent.hostname || `ID: ${agent.id}`}\n            </p>\n          </div>\n        </div>\n        {/* Status and Actions - always visible */}\n        <div className=\"flex items-center gap-1 sm:gap-2 flex-shrink-0\">\n          <AgentStatusBadge\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) && (\n            <div className=\"relative\">\n              <button\n                type=\"button\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  setShowMenu(!showMenu);\n                }}\n                className=\"p-1 sm:p-1.5 rounded hover:bg-bg-sunken transition-colors flex items-center justify-center\"\n                aria-label=\"Agent actions menu\"\n              >\n                <MoreVertical className=\"size-4 text-text-primary opacity-70 hover:opacity-100\" />\n              </button>\n              <AnimatePresence>\n                {showMenu && (\n                  <motion.div\n                    initial={{ opacity: 0, scale: 0.95, y: -4 }}\n                    animate={{ opacity: 1, scale: 1, y: 0 }}\n                    exit={{ opacity: 0, scale: 0.95, y: -4 }}\n                    transition={{ duration: 0.15 }}\n                    className=\"absolute right-0 mt-1 w-40 bg-bg-surface border border-border-default rounded-lg shadow-lg z-10\"\n                  >\n                    {status === 'ACTIVE' && onStop && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onStop(agent);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-t-lg\"\n                      >\n                        <Square className=\"size-4\" />\n                        {tr('agentsPage.stopAgent', 'Stop Agent')}\n                      </motion.button>\n                    )}\n                    {(status === 'STOPPED' || status === 'OFFLINE') && onStart && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onStart(agent);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-t-lg\"\n                      >\n                        <Play className=\"size-4\" />\n                        {tr('agentsPage.startAgent', 'Start Agent')}\n                      </motion.button>\n                    )}\n                    {status === 'DEGRADED' && onStart && (\n                      // Reconnect on a degraded agent fires the same\n                      // startVibecontrolsAgent mutation as a fresh start —\n                      // svc-side that POSTs lifecycle/start to the agent's\n                      // tunnel, which usually clears transient failures\n                      // (tunnel hiccup, finalize retry). Labelled\n                      // \"Reconnect\" not \"Start\" so the user knows it's a\n                      // recovery action, not creating a new instance.\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onStart(agent);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-t-lg\"\n                        title={\n                          healthErrorMessage\n                            ? `Retry lifecycle/start — last error: ${healthErrorMessage}`\n                            : 'Retry lifecycle/start'\n                        }\n                      >\n                        <RefreshCw className=\"size-4\" />\n                        {tr('agentsPage.reconnectAgent', 'Reconnect')}\n                      </motion.button>\n                    )}\n                    {(status === 'ACTIVE' ||\n                      status === 'STOPPED' ||\n                      status === 'OFFLINE' ||\n                      status === 'DEGRADED') &&\n                      onDisconnect && (\n                        <motion.button\n                          whileTap={{ scale: 0.97 }}\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            onDisconnect(agent);\n                            setShowMenu(false);\n                          }}\n                          className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-action-danger-text hover:bg-bg-sunken\"\n                        >\n                          <Square className=\"size-4\" />\n                          {status === 'OFFLINE' ? 'Clear Connection' : 'Disconnect'}\n                        </motion.button>\n                      )}\n                    {onEditTunnelUrl && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onEditTunnelUrl(agent);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken\"\n                      >\n                        <Link className=\"size-4\" />\n                        Edit Tunnel\n                      </motion.button>\n                    )}\n                    {handleConfigure && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          handleConfigure(agent);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-b-lg\"\n                      >\n                        <Settings className=\"size-4\" />\n                        Settings\n                      </motion.button>\n                    )}\n                  </motion.div>\n                )}\n              </AnimatePresence>\n            </div>\n          )}\n        </div>\n      </div>\n\n      <div className=\"mt-4 grid grid-cols-2 gap-3 text-sm\">\n        <div className=\"flex items-center gap-2 text-text-secondary\">\n          <Clock className=\"size-4\" />\n          <span>{formatLastHeartbeat(agent.lastHeartbeat)}</span>\n        </div>\n        {agent.architecture && (\n          <div className=\"flex items-center gap-2 text-text-secondary\">\n            <Cpu className=\"size-4\" />\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\" />\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            className=\"text-action-primary-text hover:underline truncate\"\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\"\n            >\n              {cap}\n            </span>\n          ))}\n          {agent.capabilities.length > 4 && (\n            <span className=\"px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded\">\n              +{agent.capabilities.length - 4}\n            </span>\n          )}\n        </div>\n      )}\n    </motion.div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"AgentCard.js","names":[],"sources":["../../../src/components/agents/AgentCard.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useState } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport {\n  Server,\n  Clock,\n  Cpu,\n  MoreVertical,\n  Play,\n  Square,\n  Settings,\n  Globe,\n  Link,\n  RefreshCw,\n} from 'lucide-react';\nimport { AgentStatusBadge } from './AgentStatusBadge';\nimport type { Agent, AgentStatus } from './types';\nimport { getAgentStatus } from './agentStatus';\nimport { classifyAgentHealth } from '../../utils/agentHealth';\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 { t } = useI18n();\n  const tr = (key: string, fallback: string) => {\n    const v = t(key);\n    return v === key ? fallback : v;\n  };\n  // Support both onConfigure and onSettings\n  const handleConfigure = onConfigure || onSettings;\n  const [showMenu, setShowMenu] = useState(false);\n\n  const 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 platformIcon =\n    {\n      darwin: '🍎',\n      linux: '🐧',\n      windows: '🪟',\n    }[agent.platform || ''] || '💻';\n\n  return (\n    <motion.div\n      whileHover={{ y: -2, transition: { duration: 0.15, ease: [0.4, 0, 0.2, 1] } }}\n      whileTap={{ scale: 0.98 }}\n      className={`bg-bg-surface border rounded-lg p-4 h-full hover:border-border-strong hover:shadow-md transition-all cursor-pointer ${\n        selected\n          ? 'border-action-primary-bg ring-1 ring-action-primary-bg/30'\n          : 'border-border-default'\n      } ${className}`}\n      onClick={() => onSelect?.(agent)}\n    >\n      <div className=\"flex items-start justify-between gap-2\">\n        <div className=\"flex items-start gap-2 sm:gap-3 min-w-0 flex-1\">\n          {/* Selection Checkbox */}\n          {onToggleSelect && (\n            <button\n              type=\"button\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onToggleSelect();\n              }}\n              className={`flex-shrink-0 size-5 min-w-[1.25rem] min-h-[1.25rem] rounded border transition-colors mt-0.5 ${\n                selected\n                  ? 'bg-action-primary-bg border-action-primary-bg text-action-primary-text'\n                  : 'border-border-default hover:border-border-strong bg-bg-surface'\n              } flex items-center justify-center`}\n            >\n              {selected && (\n                <svg\n                  className=\"size-3\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                  strokeWidth={3}\n                >\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n                </svg>\n              )}\n            </button>\n          )}\n          <div className=\"flex-shrink-0 size-8 sm:w-10 sm:h-10 rounded-lg bg-bg-sunken flex items-center justify-center\">\n            <Server className=\"size-4 sm:w-5 sm:h-5 text-text-secondary\" />\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"flex items-center gap-1.5 sm:gap-2 min-w-0\">\n              <h3 className=\"font-semibold text-text-primary truncate min-w-0 max-w-[120px] sm:max-w-none text-sm sm:text-base\">\n                {agent.name}\n              </h3>\n              <span className=\"text-base sm:text-lg flex-shrink-0\">{platformIcon}</span>\n            </div>\n            <p className=\"text-xs sm:text-sm text-text-secondary truncate\">\n              {agent.hostname || `ID: ${agent.id}`}\n            </p>\n            {(() => {\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' ? 'text-status-warning-text' : 'text-text-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) && (\n            <div className=\"relative\">\n              <button\n                type=\"button\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  setShowMenu(!showMenu);\n                }}\n                className=\"p-1 sm:p-1.5 rounded hover:bg-bg-sunken transition-colors flex items-center justify-center\"\n                aria-label=\"Agent actions menu\"\n              >\n                <MoreVertical className=\"size-4 text-text-primary opacity-70 hover:opacity-100\" />\n              </button>\n              <AnimatePresence>\n                {showMenu && (\n                  <motion.div\n                    initial={{ opacity: 0, scale: 0.95, y: -4 }}\n                    animate={{ opacity: 1, scale: 1, y: 0 }}\n                    exit={{ opacity: 0, scale: 0.95, y: -4 }}\n                    transition={{ duration: 0.15 }}\n                    className=\"absolute right-0 mt-1 w-40 bg-bg-surface border border-border-default rounded-lg shadow-lg z-10\"\n                  >\n                    {status === 'ACTIVE' && onStop && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onStop(agent);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-t-lg\"\n                      >\n                        <Square className=\"size-4\" />\n                        {tr('agentsPage.stopAgent', 'Stop Agent')}\n                      </motion.button>\n                    )}\n                    {(status === 'STOPPED' || status === 'OFFLINE') && onStart && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onStart(agent);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-t-lg\"\n                      >\n                        <Play className=\"size-4\" />\n                        {tr('agentsPage.startAgent', 'Start Agent')}\n                      </motion.button>\n                    )}\n                    {status === 'DEGRADED' && onStart && (\n                      // Reconnect on a degraded agent fires the same\n                      // startVibecontrolsAgent mutation as a fresh start —\n                      // svc-side that POSTs lifecycle/start to the agent's\n                      // tunnel, which usually clears transient failures\n                      // (tunnel hiccup, finalize retry). Labelled\n                      // \"Reconnect\" not \"Start\" so the user knows it's a\n                      // recovery action, not creating a new instance.\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onStart(agent);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-t-lg\"\n                        title={\n                          healthErrorMessage\n                            ? `Retry lifecycle/start — last error: ${healthErrorMessage}`\n                            : 'Retry lifecycle/start'\n                        }\n                      >\n                        <RefreshCw className=\"size-4\" />\n                        {tr('agentsPage.reconnectAgent', 'Reconnect')}\n                      </motion.button>\n                    )}\n                    {(status === 'ACTIVE' ||\n                      status === 'STOPPED' ||\n                      status === 'OFFLINE' ||\n                      status === 'DEGRADED') &&\n                      onDisconnect && (\n                        <motion.button\n                          whileTap={{ scale: 0.97 }}\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            onDisconnect(agent);\n                            setShowMenu(false);\n                          }}\n                          className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-action-danger-text hover:bg-bg-sunken\"\n                        >\n                          <Square className=\"size-4\" />\n                          {status === 'OFFLINE' ? 'Clear Connection' : 'Disconnect'}\n                        </motion.button>\n                      )}\n                    {onEditTunnelUrl && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onEditTunnelUrl(agent);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken\"\n                      >\n                        <Link className=\"size-4\" />\n                        Edit Tunnel\n                      </motion.button>\n                    )}\n                    {handleConfigure && (\n                      <motion.button\n                        whileTap={{ scale: 0.97 }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          handleConfigure(agent);\n                          setShowMenu(false);\n                        }}\n                        className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-b-lg\"\n                      >\n                        <Settings className=\"size-4\" />\n                        Settings\n                      </motion.button>\n                    )}\n                  </motion.div>\n                )}\n              </AnimatePresence>\n            </div>\n          )}\n        </div>\n      </div>\n\n      <div className=\"mt-4 grid grid-cols-2 gap-3 text-sm\">\n        <div className=\"flex items-center gap-2 text-text-secondary\">\n          <Clock className=\"size-4\" />\n          <span>{formatLastHeartbeat(agent.lastHeartbeat)}</span>\n        </div>\n        {agent.architecture && (\n          <div className=\"flex items-center gap-2 text-text-secondary\">\n            <Cpu className=\"size-4\" />\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\" />\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            className=\"text-action-primary-text hover:underline truncate\"\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\"\n            >\n              {cap}\n            </span>\n          ))}\n          {agent.capabilities.length > 4 && (\n            <span className=\"px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded\">\n              +{agent.capabilities.length - 4}\n            </span>\n          )}\n        </div>\n      )}\n    </motion.div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/agents/AgentStatusBadge.js

@@ -1,8 +1,9 @@
-import { useI18n as e } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Loader2 as t } from "lucide-react";
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { classifyAgentHealth as e } from "../../utils/agentHealth.js";
+import { useI18n as t } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Loader2 as n } from "lucide-react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/agents/AgentStatusBadge.tsx
-var a = {
+var o = {
 	REGISTERING: {
 		label: "Registering",
 		color: "bg-status-info-bg text-status-info-text border-status-info-border"
@@ -36,33 +37,33 @@ var a = {
 		label: "Deleted",
 		color: "bg-status-error-bg text-status-error-text border-status-error-border"
 	}
-}, o = "See connection log for details", s = ({ status: s, className: c = "", reason: l, linkTo: u, onClick: d }) => {
-	let { t: f } = e(), p = (e, t) => {
-		let n = f(e);
+}, s = "See connection log for details", c = ({ status: c, className: l = "", reason: u, linkTo: d, onClick: f }) => {
+	let { t: p } = t(), m = (e, t) => {
+		let n = p(e);
 		return n === e ? t : n;
-	}, m = a[s], h = !!u || !!d, g = [];
-	l && (s === "DEGRADED" || s === "OFFLINE") && g.push(`${m.label}: ${l}`), h && g.push(p("agents.statusBadge.connectionLogHint", o));
-	let _ = g.length > 0 ? g.join(" · ") : void 0, v = `inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium border transition-colors duration-150 ${m.color} ${c}`, y = h ? " cursor-pointer hover:opacity-90 active:scale-95 transition-transform duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-strong" : "", b = /* @__PURE__ */ i(n, { children: [m.spinner && /* @__PURE__ */ r(t, {
+	}, h = o[c], g = !!d || !!f, _ = e(c, u), v = [];
+	_.phase === "none" ? u && (c === "DEGRADED" || c === "OFFLINE") && v.push(`${h.label}: ${u}`) : (v.push(`${_.label} — ${_.actionHint}`), u && v.push(`Details: ${u}`)), g && v.push(m("agents.statusBadge.connectionLogHint", s));
+	let y = v.length > 0 ? v.join(" · ") : void 0, b = !!h.spinner || _.inProgress, x = `inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium border transition-colors duration-150 ${h.color} ${l}`, S = g ? " cursor-pointer hover:opacity-90 active:scale-95 transition-transform duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-strong" : "", C = /* @__PURE__ */ a(r, { children: [b && /* @__PURE__ */ i(n, {
 		className: "size-3 animate-spin",
 		"aria-hidden": "true"
-	}), m.label] });
-	return h ? /* @__PURE__ */ r("a", {
-		href: u ?? "#",
-		title: _,
-		"aria-label": _ ?? m.label,
-		className: v + y,
+	}), h.label] });
+	return g ? /* @__PURE__ */ i("a", {
+		href: d ?? "#",
+		title: y,
+		"aria-label": y ?? h.label,
+		className: x + S,
 		onClick: (e) => {
-			e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0 || d && d(e);
+			e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0 || f && f(e);
 		},
-		children: b
-	}) : /* @__PURE__ */ r("span", {
-		title: _,
-		"aria-label": _ ?? m.label,
-		className: v,
-		children: b
+		children: C
+	}) : /* @__PURE__ */ i("span", {
+		title: y,
+		"aria-label": y ?? h.label,
+		className: x,
+		children: C
 	});
 };
 //#endregion
-export { s as AgentStatusBadge };
+export { c as AgentStatusBadge };
 
 //# sourceMappingURL=AgentStatusBadge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AgentStatusBadge.js","names":[],"sources":["../../../src/components/agents/AgentStatusBadge.tsx"],"sourcesContent":["import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { Loader2 } from 'lucide-react';\nimport type { FC, MouseEvent as ReactMouseEvent } from 'react';\nimport type { AgentStatus } from './types';\n\nexport interface AgentStatusBadgeProps {\n  status: AgentStatus;\n  className?: string;\n  /**\n   * Optional probe error to expose as a hover tooltip (and aria-label).\n   * Surfaces the actual reason a `DEGRADED` agent is unhealthy — most\n   * commonly \"boot state awaiting-config\" when the gateway-auth push\n   * during onboarding silently failed. Without this, users see a yellow\n   * badge with no signal about WHY, and have to curl /health/ready\n   * themselves to debug.\n   */\n  reason?: string | null;\n  /**\n   * Optional href that turns the badge into an anchor pointing at the\n   * agent's Connection Log tab. When this is set the badge is keyboard-\n   * focusable, supports Ctrl/Cmd-click to open in a new tab, and surfaces\n   * a \"click to see connection log\" tooltip suffix so users know it's\n   * actionable. Provide together with `onClick` if you also need a SPA\n   * navigation handler — the anchor `href` will still be the source of\n   * truth for the browser's new-tab affordance.\n   */\n  linkTo?: string;\n  /**\n   * SPA navigation callback fired on unmodified left-click. When the\n   * caller is already on the agent's detail page this is typically a\n   * `setActiveTab('connection')` call; when the caller is on a list view\n   * it's typically a `navigate(detailUrl + '?tab=connection')` call. The\n   * anchor still owns the modifier-key path so Ctrl-click opens the\n   * destination in a new tab regardless.\n   */\n  onClick?: (event: ReactMouseEvent<HTMLAnchorElement>) => void;\n}\n\nconst statusConfig: Record<AgentStatus, { label: string; color: string; spinner?: boolean }> = {\n  REGISTERING: {\n    label: 'Registering',\n    color: 'bg-status-info-bg text-status-info-text border-status-info-border',\n  },\n  CONNECTING: {\n    label: 'Connecting',\n    color: 'bg-status-info-bg text-status-info-text border-status-info-border',\n    spinner: true,\n  },\n  ACTIVE: {\n    label: 'Active',\n    color: 'bg-status-success-bg text-status-success-text border-status-success-border',\n  },\n  STOPPED: {\n    label: 'Stopped',\n    color: 'bg-status-warning-bg text-status-warning-text border-status-warning-border',\n  },\n  IDLE: {\n    label: 'Idle',\n    color: 'bg-status-warning-bg text-status-warning-text border-status-warning-border',\n  },\n  DEGRADED: {\n    label: 'Degraded',\n    color: 'bg-status-warning-bg text-status-warning-text border-status-warning-border',\n  },\n  OFFLINE: {\n    label: 'Offline',\n    color: 'bg-bg-sunken text-text-secondary border-border-default',\n  },\n  DELETED: {\n    label: 'Deleted',\n    color: 'bg-status-error-bg text-status-error-text border-status-error-border',\n  },\n};\n\nconst CONNECTION_LOG_HINT = 'See connection log for details';\n\n/**\n * AgentStatusBadge - Display agent status with appropriate styling.\n *\n * When `linkTo` or `onClick` is supplied the badge renders as an anchor\n * and becomes the canonical entry point into the agent's Connection Log\n * tab. This keeps the user one click away from the timeline of probe /\n * register / gateway-auth-push events any time they spot a non-Active\n * badge.\n */\nexport const AgentStatusBadge: FC<AgentStatusBadgeProps> = ({\n  status,\n  className = '',\n  reason,\n  linkTo,\n  onClick,\n}) => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string) => {\n    const v = t(key);\n    return v === key ? fallback : v;\n  };\n  const config = statusConfig[status];\n  const isInteractive = Boolean(linkTo) || Boolean(onClick);\n  const tooltipParts: string[] = [];\n  if (reason && (status === 'DEGRADED' || status === 'OFFLINE')) {\n    tooltipParts.push(`${config.label}: ${reason}`);\n  }\n  if (isInteractive) {\n    tooltipParts.push(tr('agents.statusBadge.connectionLogHint', CONNECTION_LOG_HINT));\n  }\n  const tooltip = tooltipParts.length > 0 ? tooltipParts.join(' · ') : undefined;\n\n  const baseClassName = `inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium border transition-colors duration-150 ${config.color} ${className}`;\n  const interactiveClassName = isInteractive\n    ? ' cursor-pointer hover:opacity-90 active:scale-95 transition-transform duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-strong'\n    : '';\n\n  const content = (\n    <>\n      {config.spinner && <Loader2 className=\"size-3 animate-spin\" aria-hidden=\"true\" />}\n      {config.label}\n    </>\n  );\n\n  if (isInteractive) {\n    return (\n      <a\n        href={linkTo ?? '#'}\n        title={tooltip}\n        aria-label={tooltip ?? config.label}\n        className={baseClassName + interactiveClassName}\n        onClick={(event) => {\n          // Let modifier-clicks reach the browser's default tab-opener so\n          // Ctrl/Cmd-click + middle-click open the connection log in a\n          // new tab. SPA navigation only fires on plain left-click.\n          if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) {\n            return;\n          }\n          if (onClick) {\n            onClick(event);\n          }\n        }}\n      >\n        {content}\n      </a>\n    );\n  }\n\n  return (\n    <span title={tooltip} aria-label={tooltip ?? config.label} className={baseClassName}>\n      {content}\n    </span>\n  );\n};\n"],"mappings":";;;;AAsCA,IAAM,IAAyF;CAC7F,aAAa;EACX,OAAO;EACP,OAAO;EACR;CACD,YAAY;EACV,OAAO;EACP,OAAO;EACP,SAAS;EACV;CACD,QAAQ;EACN,OAAO;EACP,OAAO;EACR;CACD,SAAS;EACP,OAAO;EACP,OAAO;EACR;CACD,MAAM;EACJ,OAAO;EACP,OAAO;EACR;CACD,UAAU;EACR,OAAO;EACP,OAAO;EACR;CACD,SAAS;EACP,OAAO;EACP,OAAO;EACR;CACD,SAAS;EACP,OAAO;EACP,OAAO;EACR;CACF,EAEK,IAAsB,kCAWf,KAA+C,EAC1D,WACA,eAAY,IACZ,WACA,WACA,iBACI;CACJ,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAAqB;EAC5C,IAAM,IAAI,EAAE,EAAI;AAChB,SAAO,MAAM,IAAM,IAAW;IAE1B,IAAS,EAAa,IACtB,IAAgB,EAAQ,KAAW,EAAQ,GAC3C,IAAyB,EAAE;AAIjC,CAHI,MAAW,MAAW,cAAc,MAAW,cACjD,EAAa,KAAK,GAAG,EAAO,MAAM,IAAI,IAAS,EAE7C,KACF,EAAa,KAAK,EAAG,wCAAwC,EAAoB,CAAC;CAEpF,IAAM,IAAU,EAAa,SAAS,IAAI,EAAa,KAAK,MAAM,GAAG,KAAA,GAE/D,IAAgB,uHAAuH,EAAO,MAAM,GAAG,KACvJ,IAAuB,IACzB,wKACA,IAEE,IACJ,kBAAA,GAAA,EAAA,UAAA,CACG,EAAO,WAAW,kBAAC,GAAD;EAAS,WAAU;EAAsB,eAAY;EAAS,CAAA,EAChF,EAAO,MACP,EAAA,CAAA;AA2BL,QAxBI,IAEA,kBAAC,KAAD;EACE,MAAM,KAAU;EAChB,OAAO;EACP,cAAY,KAAW,EAAO;EAC9B,WAAW,IAAgB;EAC3B,UAAU,MAAU;AAId,KAAM,WAAW,EAAM,WAAW,EAAM,YAAY,EAAM,WAAW,KAGrE,KACF,EAAQ,EAAM;;YAIjB;EACC,CAAA,GAKN,kBAAC,QAAD;EAAM,OAAO;EAAS,cAAY,KAAW,EAAO;EAAO,WAAW;YACnE;EACI,CAAA"}
+{"version":3,"file":"AgentStatusBadge.js","names":[],"sources":["../../../src/components/agents/AgentStatusBadge.tsx"],"sourcesContent":["import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { Loader2 } from 'lucide-react';\nimport type { FC, MouseEvent as ReactMouseEvent } from 'react';\nimport type { AgentStatus } from './types';\nimport { classifyAgentHealth } from '../../utils/agentHealth';\n\nexport interface AgentStatusBadgeProps {\n  status: AgentStatus;\n  className?: string;\n  /**\n   * Optional probe error to expose as a hover tooltip (and aria-label).\n   * Surfaces the actual reason a `DEGRADED` agent is unhealthy — most\n   * commonly \"boot state awaiting-config\" when the gateway-auth push\n   * during onboarding silently failed. Without this, users see a yellow\n   * badge with no signal about WHY, and have to curl /health/ready\n   * themselves to debug.\n   */\n  reason?: string | null;\n  /**\n   * Optional href that turns the badge into an anchor pointing at the\n   * agent's Connection Log tab. When this is set the badge is keyboard-\n   * focusable, supports Ctrl/Cmd-click to open in a new tab, and surfaces\n   * a \"click to see connection log\" tooltip suffix so users know it's\n   * actionable. Provide together with `onClick` if you also need a SPA\n   * navigation handler — the anchor `href` will still be the source of\n   * truth for the browser's new-tab affordance.\n   */\n  linkTo?: string;\n  /**\n   * SPA navigation callback fired on unmodified left-click. When the\n   * caller is already on the agent's detail page this is typically a\n   * `setActiveTab('connection')` call; when the caller is on a list view\n   * it's typically a `navigate(detailUrl + '?tab=connection')` call. The\n   * anchor still owns the modifier-key path so Ctrl-click opens the\n   * destination in a new tab regardless.\n   */\n  onClick?: (event: ReactMouseEvent<HTMLAnchorElement>) => void;\n}\n\nconst statusConfig: Record<AgentStatus, { label: string; color: string; spinner?: boolean }> = {\n  REGISTERING: {\n    label: 'Registering',\n    color: 'bg-status-info-bg text-status-info-text border-status-info-border',\n  },\n  CONNECTING: {\n    label: 'Connecting',\n    color: 'bg-status-info-bg text-status-info-text border-status-info-border',\n    spinner: true,\n  },\n  ACTIVE: {\n    label: 'Active',\n    color: 'bg-status-success-bg text-status-success-text border-status-success-border',\n  },\n  STOPPED: {\n    label: 'Stopped',\n    color: 'bg-status-warning-bg text-status-warning-text border-status-warning-border',\n  },\n  IDLE: {\n    label: 'Idle',\n    color: 'bg-status-warning-bg text-status-warning-text border-status-warning-border',\n  },\n  DEGRADED: {\n    label: 'Degraded',\n    color: 'bg-status-warning-bg text-status-warning-text border-status-warning-border',\n  },\n  OFFLINE: {\n    label: 'Offline',\n    color: 'bg-bg-sunken text-text-secondary border-border-default',\n  },\n  DELETED: {\n    label: 'Deleted',\n    color: 'bg-status-error-bg text-status-error-text border-status-error-border',\n  },\n};\n\nconst CONNECTION_LOG_HINT = 'See connection log for details';\n\n/**\n * AgentStatusBadge - Display agent status with appropriate styling.\n *\n * When `linkTo` or `onClick` is supplied the badge renders as an anchor\n * and becomes the canonical entry point into the agent's Connection Log\n * tab. This keeps the user one click away from the timeline of probe /\n * register / gateway-auth-push events any time they spot a non-Active\n * badge.\n */\nexport const AgentStatusBadge: FC<AgentStatusBadgeProps> = ({\n  status,\n  className = '',\n  reason,\n  linkTo,\n  onClick,\n}) => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string) => {\n    const v = t(key);\n    return v === key ? fallback : v;\n  };\n  const config = statusConfig[status];\n  const isInteractive = Boolean(linkTo) || Boolean(onClick);\n\n  // Classify a degraded/offline agent so the badge can say whether work is\n  // happening behind the scenes (spinner, \"no action needed\") or the user has\n  // an action item — rather than just a yellow badge with a raw health string.\n  const health = classifyAgentHealth(status, reason);\n\n  const tooltipParts: string[] = [];\n  if (health.phase !== 'none') {\n    tooltipParts.push(`${health.label} — ${health.actionHint}`);\n    if (reason) tooltipParts.push(`Details: ${reason}`);\n  } else if (reason && (status === 'DEGRADED' || status === 'OFFLINE')) {\n    tooltipParts.push(`${config.label}: ${reason}`);\n  }\n  if (isInteractive) {\n    tooltipParts.push(tr('agents.statusBadge.connectionLogHint', CONNECTION_LOG_HINT));\n  }\n  const tooltip = tooltipParts.length > 0 ? tooltipParts.join(' · ') : undefined;\n\n  // Show the in-progress spinner for CONNECTING and for a DEGRADED agent that\n  // is still provisioning, so \"something is happening\" is visible at a glance.\n  const showSpinner = Boolean(config.spinner) || health.inProgress;\n\n  const baseClassName = `inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium border transition-colors duration-150 ${config.color} ${className}`;\n  const interactiveClassName = isInteractive\n    ? ' cursor-pointer hover:opacity-90 active:scale-95 transition-transform duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-strong'\n    : '';\n\n  const content = (\n    <>\n      {showSpinner && <Loader2 className=\"size-3 animate-spin\" aria-hidden=\"true\" />}\n      {config.label}\n    </>\n  );\n\n  if (isInteractive) {\n    return (\n      <a\n        href={linkTo ?? '#'}\n        title={tooltip}\n        aria-label={tooltip ?? config.label}\n        className={baseClassName + interactiveClassName}\n        onClick={(event) => {\n          // Let modifier-clicks reach the browser's default tab-opener so\n          // Ctrl/Cmd-click + middle-click open the connection log in a\n          // new tab. SPA navigation only fires on plain left-click.\n          if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) {\n            return;\n          }\n          if (onClick) {\n            onClick(event);\n          }\n        }}\n      >\n        {content}\n      </a>\n    );\n  }\n\n  return (\n    <span title={tooltip} aria-label={tooltip ?? config.label} className={baseClassName}>\n      {content}\n    </span>\n  );\n};\n"],"mappings":";;;;;AAuCA,IAAM,IAAyF;CAC7F,aAAa;EACX,OAAO;EACP,OAAO;EACR;CACD,YAAY;EACV,OAAO;EACP,OAAO;EACP,SAAS;EACV;CACD,QAAQ;EACN,OAAO;EACP,OAAO;EACR;CACD,SAAS;EACP,OAAO;EACP,OAAO;EACR;CACD,MAAM;EACJ,OAAO;EACP,OAAO;EACR;CACD,UAAU;EACR,OAAO;EACP,OAAO;EACR;CACD,SAAS;EACP,OAAO;EACP,OAAO;EACR;CACD,SAAS;EACP,OAAO;EACP,OAAO;EACR;CACF,EAEK,IAAsB,kCAWf,KAA+C,EAC1D,WACA,eAAY,IACZ,WACA,WACA,iBACI;CACJ,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAAqB;EAC5C,IAAM,IAAI,EAAE,EAAI;AAChB,SAAO,MAAM,IAAM,IAAW;IAE1B,IAAS,EAAa,IACtB,IAAgB,EAAQ,KAAW,EAAQ,GAK3C,IAAS,EAAoB,GAAQ,EAAO,EAE5C,IAAyB,EAAE;AAOjC,CANI,EAAO,UAAU,SAGV,MAAW,MAAW,cAAc,MAAW,cACxD,EAAa,KAAK,GAAG,EAAO,MAAM,IAAI,IAAS,IAH/C,EAAa,KAAK,GAAG,EAAO,MAAM,KAAK,EAAO,aAAa,EACvD,KAAQ,EAAa,KAAK,YAAY,IAAS,GAIjD,KACF,EAAa,KAAK,EAAG,wCAAwC,EAAoB,CAAC;CAEpF,IAAM,IAAU,EAAa,SAAS,IAAI,EAAa,KAAK,MAAM,GAAG,KAAA,GAI/D,IAAc,EAAQ,EAAO,WAAY,EAAO,YAEhD,IAAgB,uHAAuH,EAAO,MAAM,GAAG,KACvJ,IAAuB,IACzB,wKACA,IAEE,IACJ,kBAAA,GAAA,EAAA,UAAA,CACG,KAAe,kBAAC,GAAD;EAAS,WAAU;EAAsB,eAAY;EAAS,CAAA,EAC7E,EAAO,MACP,EAAA,CAAA;AA2BL,QAxBI,IAEA,kBAAC,KAAD;EACE,MAAM,KAAU;EAChB,OAAO;EACP,cAAY,KAAW,EAAO;EAC9B,WAAW,IAAgB;EAC3B,UAAU,MAAU;AAId,KAAM,WAAW,EAAM,WAAW,EAAM,YAAY,EAAM,WAAW,KAGrE,KACF,EAAQ,EAAM;;YAIjB;EACC,CAAA,GAKN,kBAAC,QAAD;EAAM,OAAO;EAAS,cAAY,KAAW,EAAO;EAAO,WAAW;YACnE;EACI,CAAA"}

package/dist/components/shared/LinkToVibePanel.js

@@ -1,83 +1,84 @@
 import { useListVibesQuery as e } from "../../generated/wspace-operations.js";
 import { useTr as t } from "../../shared/hooks/useTr.js";
-import { useMemo as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { VibeVisibility as n } from "../../generated/wspace-types.js";
+import { useMemo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/shared/LinkToVibePanel.tsx
-function a({ value: a, onChange: o, label: s, disabled: c = !1 }) {
+function o({ value: n, onChange: o, label: s, disabled: c = !1 }) {
 	let l = t(), { data: u, loading: d } = e({
 		variables: { pagination: { limit: 200 } },
 		fetchPolicy: "cache-first"
-	}), f = n(() => (u?.vibes?.items ?? []).map((e) => ({
+	}), f = r(() => (u?.vibes?.items ?? []).map((e) => ({
 		id: e.id,
 		name: e.name
 	})), [u?.vibes?.items]), p = (e) => {
 		o({
 			vibeId: e,
-			visibility: e ? a.visibility : "PRIVATE"
+			visibility: e ? n.visibility : "PRIVATE"
 		});
 	}, m = (e) => {
 		o({
-			...a,
+			...n,
 			visibility: e
 		});
 	};
-	return /* @__PURE__ */ i("fieldset", {
+	return /* @__PURE__ */ a("fieldset", {
 		disabled: c,
 		className: "space-y-3 rounded-md border border-border-default bg-bg-surface p-3",
 		children: [
-			/* @__PURE__ */ r("legend", {
+			/* @__PURE__ */ i("legend", {
 				className: "px-1 text-sm font-medium text-text-secondary",
 				children: s || l("vibecontrols.linkToVibe.title", "Link to Vibe (optional)")
 			}),
-			/* @__PURE__ */ r("p", {
+			/* @__PURE__ */ i("p", {
 				className: "text-xs text-text-tertiary",
 				children: l("vibecontrols.linkToVibe.description", "Associate this entity with a vibe so it shows up under the vibe’s related tabs.")
 			}),
-			/* @__PURE__ */ i("select", {
-				value: a.vibeId ?? "",
+			/* @__PURE__ */ a("select", {
+				value: n.vibeId ?? "",
 				onChange: (e) => p(e.target.value === "" ? null : e.target.value),
 				"aria-label": l("vibecontrols.linkToVibe.pickVibeAria", "Pick a vibe to link"),
 				className: "w-full rounded-md border border-border-default bg-bg-sunken px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-action-primary-bg",
-				children: [/* @__PURE__ */ r("option", {
+				children: [/* @__PURE__ */ i("option", {
 					value: "",
 					children: d ? l("vibecontrols.linkToVibe.loadingVibes", "Loading vibes…") : l("vibecontrols.linkToVibe.pickVibe", "Pick a vibe to link…")
-				}), f.map((e) => /* @__PURE__ */ r("option", {
+				}), f.map((e) => /* @__PURE__ */ i("option", {
 					value: e.id,
 					children: e.name
 				}, e.id))]
 			}),
-			a.vibeId && /* @__PURE__ */ i("div", {
+			n.vibeId && /* @__PURE__ */ a("div", {
 				className: "space-y-2",
-				children: [/* @__PURE__ */ r("p", {
+				children: [/* @__PURE__ */ i("p", {
 					className: "text-xs font-medium text-text-secondary",
 					children: l("vibecontrols.linkToVibe.visibilityLabel", "Who can see it")
-				}), /* @__PURE__ */ i("div", {
+				}), /* @__PURE__ */ a("div", {
 					role: "radiogroup",
 					"aria-label": l("vibecontrols.linkToVibe.visibilityLabel", "Who can see it"),
 					className: "space-y-1.5",
-					children: [/* @__PURE__ */ i("label", {
+					children: [/* @__PURE__ */ a("label", {
 						className: "flex cursor-pointer items-start gap-2 text-sm",
-						children: [/* @__PURE__ */ r("input", {
+						children: [/* @__PURE__ */ i("input", {
 							type: "radio",
 							name: "link-to-vibe-visibility",
 							value: "PRIVATE",
-							checked: a.visibility === "PRIVATE",
+							checked: n.visibility === "PRIVATE",
 							onChange: () => m("PRIVATE"),
 							className: "mt-1"
-						}), /* @__PURE__ */ r("span", {
+						}), /* @__PURE__ */ i("span", {
 							className: "text-text-primary",
 							children: l("vibecontrols.linkToVibe.private", "Private to me")
 						})]
-					}), /* @__PURE__ */ i("label", {
+					}), /* @__PURE__ */ a("label", {
 						className: "flex cursor-pointer items-start gap-2 text-sm",
-						children: [/* @__PURE__ */ r("input", {
+						children: [/* @__PURE__ */ i("input", {
 							type: "radio",
 							name: "link-to-vibe-visibility",
 							value: "SHARED_WITH_VIBE",
-							checked: a.visibility === "SHARED_WITH_VIBE",
+							checked: n.visibility === "SHARED_WITH_VIBE",
 							onChange: () => m("SHARED_WITH_VIBE"),
 							className: "mt-1"
-						}), /* @__PURE__ */ r("span", {
+						}), /* @__PURE__ */ i("span", {
 							className: "text-text-primary",
 							children: l("vibecontrols.linkToVibe.shared", "Shared with everyone who has access to this vibe")
 						})]
@@ -87,11 +88,20 @@ function a({ value: a, onChange: o, label: s, disabled: c = !1 }) {
 		]
 	});
 }
-var o = {
+var s = {
 	vibeId: null,
 	visibility: "PRIVATE"
 };
+function c(e) {
+	return e === "SHARED_WITH_VIBE" ? n.SharedWithVibe : n.Private;
+}
+function l(e) {
+	return e.vibeId ? {
+		vibeId: e.vibeId,
+		visibility: c(e.visibility)
+	} : {};
+}
 //#endregion
-export { o as LINK_TO_VIBE_DEFAULT, a as LinkToVibePanel };
+export { s as LINK_TO_VIBE_DEFAULT, o as LinkToVibePanel, l as linkToVibeInput, c as toVibeVisibility };
 
 //# sourceMappingURL=LinkToVibePanel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LinkToVibePanel.js","names":[],"sources":["../../../src/components/shared/LinkToVibePanel.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useListVibesQuery } from '@/generated/wspace-operations';\nimport { useTr } from '../../shared/hooks/useTr';\n\n/**\n * Visibility for an entity that links to a vibe.\n *\n * - `PRIVATE`: only the creator can see it.\n * - `SHARED_WITH_VIBE`: anyone with access to the linked vibe can see it.\n *\n * Mirrors the proposed `EntityVisibility` enum on the wspace-vibecontrols-svc\n * schema. If the schema does not yet define this enum, callers should drop\n * the field from their mutation input (see the TODO in each form).\n */\nexport type LinkToVibeVisibility = 'PRIVATE' | 'SHARED_WITH_VIBE';\n\nexport interface LinkToVibeValue {\n  vibeId: string | null;\n  visibility: LinkToVibeVisibility;\n}\n\ninterface LinkToVibePanelProps {\n  value: LinkToVibeValue;\n  onChange: (value: LinkToVibeValue) => void;\n  /** Optional label override */\n  label?: string;\n  /** Disable the panel entirely (e.g. while submitting). */\n  disabled?: boolean;\n}\n\n/**\n * Optional \"Link to Vibe\" + visibility selector reusable across every entity\n * create form (VibeDeck / Action / Tunnel / Sandbox / AiPrompt / ScheduledJob).\n *\n * Forms thread the value into their mutation input as `vibeId` + `visibility`.\n * If the underlying schema does not yet define either field, the form should\n * omit it from the mutation; the resolver will pick a sensible default.\n */\nexport function LinkToVibePanel({\n  value,\n  onChange,\n  label,\n  disabled = false,\n}: LinkToVibePanelProps) {\n  const tr = useTr();\n  const { data, loading } = useListVibesQuery({\n    variables: { pagination: { limit: 200 } },\n    fetchPolicy: 'cache-first',\n  });\n\n  const vibeOptions = useMemo(() => {\n    const items = data?.vibes?.items ?? [];\n    return items.map((v: { id: string; name: string }) => ({ id: v.id, name: v.name }));\n  }, [data?.vibes?.items]);\n\n  const handleVibeChange = (vibeId: string | null) => {\n    onChange({ vibeId, visibility: vibeId ? value.visibility : 'PRIVATE' });\n  };\n\n  const handleVisibilityChange = (visibility: LinkToVibeVisibility) => {\n    onChange({ ...value, visibility });\n  };\n\n  return (\n    <fieldset\n      disabled={disabled}\n      className=\"space-y-3 rounded-md border border-border-default bg-bg-surface p-3\"\n    >\n      <legend className=\"px-1 text-sm font-medium text-text-secondary\">\n        {label || tr('vibecontrols.linkToVibe.title', 'Link to Vibe (optional)')}\n      </legend>\n      <p className=\"text-xs text-text-tertiary\">\n        {tr(\n          'vibecontrols.linkToVibe.description',\n          'Associate this entity with a vibe so it shows up under the vibe’s related tabs.'\n        )}\n      </p>\n\n      <select\n        value={value.vibeId ?? ''}\n        onChange={(e) => handleVibeChange(e.target.value === '' ? null : e.target.value)}\n        aria-label={tr('vibecontrols.linkToVibe.pickVibeAria', 'Pick a vibe to link')}\n        className=\"w-full rounded-md border border-border-default bg-bg-sunken px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-action-primary-bg\"\n      >\n        <option value=\"\">\n          {loading\n            ? tr('vibecontrols.linkToVibe.loadingVibes', 'Loading vibes…')\n            : tr('vibecontrols.linkToVibe.pickVibe', 'Pick a vibe to link…')}\n        </option>\n        {vibeOptions.map((opt: { id: string; name: string }) => (\n          <option key={opt.id} value={opt.id}>\n            {opt.name}\n          </option>\n        ))}\n      </select>\n\n      {value.vibeId && (\n        <div className=\"space-y-2\">\n          <p className=\"text-xs font-medium text-text-secondary\">\n            {tr('vibecontrols.linkToVibe.visibilityLabel', 'Who can see it')}\n          </p>\n          <div\n            role=\"radiogroup\"\n            aria-label={tr('vibecontrols.linkToVibe.visibilityLabel', 'Who can see it')}\n            className=\"space-y-1.5\"\n          >\n            <label className=\"flex cursor-pointer items-start gap-2 text-sm\">\n              <input\n                type=\"radio\"\n                name=\"link-to-vibe-visibility\"\n                value=\"PRIVATE\"\n                checked={value.visibility === 'PRIVATE'}\n                onChange={() => handleVisibilityChange('PRIVATE')}\n                className=\"mt-1\"\n              />\n              <span className=\"text-text-primary\">\n                {tr('vibecontrols.linkToVibe.private', 'Private to me')}\n              </span>\n            </label>\n            <label className=\"flex cursor-pointer items-start gap-2 text-sm\">\n              <input\n                type=\"radio\"\n                name=\"link-to-vibe-visibility\"\n                value=\"SHARED_WITH_VIBE\"\n                checked={value.visibility === 'SHARED_WITH_VIBE'}\n                onChange={() => handleVisibilityChange('SHARED_WITH_VIBE')}\n                className=\"mt-1\"\n              />\n              <span className=\"text-text-primary\">\n                {tr(\n                  'vibecontrols.linkToVibe.shared',\n                  'Shared with everyone who has access to this vibe'\n                )}\n              </span>\n            </label>\n          </div>\n        </div>\n      )}\n    </fieldset>\n  );\n}\n\nexport const LINK_TO_VIBE_DEFAULT: LinkToVibeValue = {\n  vibeId: null,\n  visibility: 'PRIVATE',\n};\n"],"mappings":";;;;;AAsCA,SAAgB,EAAgB,EAC9B,UACA,aACA,UACA,cAAW,MACY;CACvB,IAAM,IAAK,GAAO,EACZ,EAAE,SAAM,eAAY,EAAkB;EAC1C,WAAW,EAAE,YAAY,EAAE,OAAO,KAAK,EAAE;EACzC,aAAa;EACd,CAAC,EAEI,IAAc,SACJ,GAAM,OAAO,SAAS,EAAE,EACzB,KAAK,OAAqC;EAAE,IAAI,EAAE;EAAI,MAAM,EAAE;EAAM,EAAE,EAClF,CAAC,GAAM,OAAO,MAAM,CAAC,EAElB,KAAoB,MAA0B;AAClD,IAAS;GAAE;GAAQ,YAAY,IAAS,EAAM,aAAa;GAAW,CAAC;IAGnE,KAA0B,MAAqC;AACnE,IAAS;GAAE,GAAG;GAAO;GAAY,CAAC;;AAGpC,QACE,kBAAC,YAAD;EACY;EACV,WAAU;YAFZ;GAIE,kBAAC,UAAD;IAAQ,WAAU;cACf,KAAS,EAAG,iCAAiC,0BAA0B;IACjE,CAAA;GACT,kBAAC,KAAD;IAAG,WAAU;cACV,EACC,uCACA,kFACD;IACC,CAAA;GAEJ,kBAAC,UAAD;IACE,OAAO,EAAM,UAAU;IACvB,WAAW,MAAM,EAAiB,EAAE,OAAO,UAAU,KAAK,OAAO,EAAE,OAAO,MAAM;IAChF,cAAY,EAAG,wCAAwC,sBAAsB;IAC7E,WAAU;cAJZ,CAME,kBAAC,UAAD;KAAQ,OAAM;eACX,IACG,EAAG,wCAAwC,iBAAiB,GAC5D,EAAG,oCAAoC,uBAAuB;KAC3D,CAAA,EACR,EAAY,KAAK,MAChB,kBAAC,UAAD;KAAqB,OAAO,EAAI;eAC7B,EAAI;KACE,EAFI,EAAI,GAER,CACT,CACK;;GAER,EAAM,UACL,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,KAAD;KAAG,WAAU;eACV,EAAG,2CAA2C,iBAAiB;KAC9D,CAAA,EACJ,kBAAC,OAAD;KACE,MAAK;KACL,cAAY,EAAG,2CAA2C,iBAAiB;KAC3E,WAAU;eAHZ,CAKE,kBAAC,SAAD;MAAO,WAAU;gBAAjB,CACE,kBAAC,SAAD;OACE,MAAK;OACL,MAAK;OACL,OAAM;OACN,SAAS,EAAM,eAAe;OAC9B,gBAAgB,EAAuB,UAAU;OACjD,WAAU;OACV,CAAA,EACF,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAG,mCAAmC,gBAAgB;OAClD,CAAA,CACD;SACR,kBAAC,SAAD;MAAO,WAAU;gBAAjB,CACE,kBAAC,SAAD;OACE,MAAK;OACL,MAAK;OACL,OAAM;OACN,SAAS,EAAM,eAAe;OAC9B,gBAAgB,EAAuB,mBAAmB;OAC1D,WAAU;OACV,CAAA,EACF,kBAAC,QAAD;OAAM,WAAU;iBACb,EACC,kCACA,mDACD;OACI,CAAA,CACD;QACJ;OACF;;GAEC;;;AAIf,IAAa,IAAwC;CACnD,QAAQ;CACR,YAAY;CACb"}
+{"version":3,"file":"LinkToVibePanel.js","names":[],"sources":["../../../src/components/shared/LinkToVibePanel.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useListVibesQuery } from '@/generated/wspace-operations';\nimport { VibeVisibility } from '@/generated/wspace-types';\nimport { useTr } from '../../shared/hooks/useTr';\n\n/**\n * Visibility for an entity that links to a vibe.\n *\n * - `PRIVATE`: only the creator can see it.\n * - `SHARED_WITH_VIBE`: anyone with access to the linked vibe can see it.\n *\n * Mirrors the proposed `EntityVisibility` enum on the wspace-vibecontrols-svc\n * schema. If the schema does not yet define this enum, callers should drop\n * the field from their mutation input (see the TODO in each form).\n */\nexport type LinkToVibeVisibility = 'PRIVATE' | 'SHARED_WITH_VIBE';\n\nexport interface LinkToVibeValue {\n  vibeId: string | null;\n  visibility: LinkToVibeVisibility;\n}\n\ninterface LinkToVibePanelProps {\n  value: LinkToVibeValue;\n  onChange: (value: LinkToVibeValue) => void;\n  /** Optional label override */\n  label?: string;\n  /** Disable the panel entirely (e.g. while submitting). */\n  disabled?: boolean;\n}\n\n/**\n * Optional \"Link to Vibe\" + visibility selector reusable across every entity\n * create form (VibeDeck / Action / Tunnel / Sandbox / AiPrompt / ScheduledJob).\n *\n * Forms thread the value into their mutation input as `vibeId` + `visibility`.\n * If the underlying schema does not yet define either field, the form should\n * omit it from the mutation; the resolver will pick a sensible default.\n */\nexport function LinkToVibePanel({\n  value,\n  onChange,\n  label,\n  disabled = false,\n}: LinkToVibePanelProps) {\n  const tr = useTr();\n  const { data, loading } = useListVibesQuery({\n    variables: { pagination: { limit: 200 } },\n    fetchPolicy: 'cache-first',\n  });\n\n  const vibeOptions = useMemo(() => {\n    const items = data?.vibes?.items ?? [];\n    return items.map((v: { id: string; name: string }) => ({ id: v.id, name: v.name }));\n  }, [data?.vibes?.items]);\n\n  const handleVibeChange = (vibeId: string | null) => {\n    onChange({ vibeId, visibility: vibeId ? value.visibility : 'PRIVATE' });\n  };\n\n  const handleVisibilityChange = (visibility: LinkToVibeVisibility) => {\n    onChange({ ...value, visibility });\n  };\n\n  return (\n    <fieldset\n      disabled={disabled}\n      className=\"space-y-3 rounded-md border border-border-default bg-bg-surface p-3\"\n    >\n      <legend className=\"px-1 text-sm font-medium text-text-secondary\">\n        {label || tr('vibecontrols.linkToVibe.title', 'Link to Vibe (optional)')}\n      </legend>\n      <p className=\"text-xs text-text-tertiary\">\n        {tr(\n          'vibecontrols.linkToVibe.description',\n          'Associate this entity with a vibe so it shows up under the vibe’s related tabs.'\n        )}\n      </p>\n\n      <select\n        value={value.vibeId ?? ''}\n        onChange={(e) => handleVibeChange(e.target.value === '' ? null : e.target.value)}\n        aria-label={tr('vibecontrols.linkToVibe.pickVibeAria', 'Pick a vibe to link')}\n        className=\"w-full rounded-md border border-border-default bg-bg-sunken px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-action-primary-bg\"\n      >\n        <option value=\"\">\n          {loading\n            ? tr('vibecontrols.linkToVibe.loadingVibes', 'Loading vibes…')\n            : tr('vibecontrols.linkToVibe.pickVibe', 'Pick a vibe to link…')}\n        </option>\n        {vibeOptions.map((opt: { id: string; name: string }) => (\n          <option key={opt.id} value={opt.id}>\n            {opt.name}\n          </option>\n        ))}\n      </select>\n\n      {value.vibeId && (\n        <div className=\"space-y-2\">\n          <p className=\"text-xs font-medium text-text-secondary\">\n            {tr('vibecontrols.linkToVibe.visibilityLabel', 'Who can see it')}\n          </p>\n          <div\n            role=\"radiogroup\"\n            aria-label={tr('vibecontrols.linkToVibe.visibilityLabel', 'Who can see it')}\n            className=\"space-y-1.5\"\n          >\n            <label className=\"flex cursor-pointer items-start gap-2 text-sm\">\n              <input\n                type=\"radio\"\n                name=\"link-to-vibe-visibility\"\n                value=\"PRIVATE\"\n                checked={value.visibility === 'PRIVATE'}\n                onChange={() => handleVisibilityChange('PRIVATE')}\n                className=\"mt-1\"\n              />\n              <span className=\"text-text-primary\">\n                {tr('vibecontrols.linkToVibe.private', 'Private to me')}\n              </span>\n            </label>\n            <label className=\"flex cursor-pointer items-start gap-2 text-sm\">\n              <input\n                type=\"radio\"\n                name=\"link-to-vibe-visibility\"\n                value=\"SHARED_WITH_VIBE\"\n                checked={value.visibility === 'SHARED_WITH_VIBE'}\n                onChange={() => handleVisibilityChange('SHARED_WITH_VIBE')}\n                className=\"mt-1\"\n              />\n              <span className=\"text-text-primary\">\n                {tr(\n                  'vibecontrols.linkToVibe.shared',\n                  'Shared with everyone who has access to this vibe'\n                )}\n              </span>\n            </label>\n          </div>\n        </div>\n      )}\n    </fieldset>\n  );\n}\n\nexport const LINK_TO_VIBE_DEFAULT: LinkToVibeValue = {\n  vibeId: null,\n  visibility: 'PRIVATE',\n};\n\n/**\n * Maps the panel's string-union visibility onto the generated `VibeVisibility`\n * enum used by every mutation input that carries a vibe link. The string values\n * match the enum members 1:1, so this is a total, exhaustive mapping.\n */\nexport function toVibeVisibility(visibility: LinkToVibeVisibility): VibeVisibility {\n  return visibility === 'SHARED_WITH_VIBE'\n    ? VibeVisibility.SharedWithVibe\n    : VibeVisibility.Private;\n}\n\n/**\n * Converts a `LinkToVibeValue` into the `{ vibeId, visibility }` fragment to\n * spread into a create/update mutation input. Returns an empty object when no\n * vibe is selected so the resolver applies its default (unlinked + PRIVATE),\n * avoiding a spurious `vibeId: null` in the request.\n */\nexport function linkToVibeInput(\n  value: LinkToVibeValue\n): { vibeId?: string; visibility?: VibeVisibility } {\n  if (!value.vibeId) return {};\n  return { vibeId: value.vibeId, visibility: toVibeVisibility(value.visibility) };\n}\n"],"mappings":";;;;;;AAuCA,SAAgB,EAAgB,EAC9B,UACA,aACA,UACA,cAAW,MACY;CACvB,IAAM,IAAK,GAAO,EACZ,EAAE,SAAM,eAAY,EAAkB;EAC1C,WAAW,EAAE,YAAY,EAAE,OAAO,KAAK,EAAE;EACzC,aAAa;EACd,CAAC,EAEI,IAAc,SACJ,GAAM,OAAO,SAAS,EAAE,EACzB,KAAK,OAAqC;EAAE,IAAI,EAAE;EAAI,MAAM,EAAE;EAAM,EAAE,EAClF,CAAC,GAAM,OAAO,MAAM,CAAC,EAElB,KAAoB,MAA0B;AAClD,IAAS;GAAE;GAAQ,YAAY,IAAS,EAAM,aAAa;GAAW,CAAC;IAGnE,KAA0B,MAAqC;AACnE,IAAS;GAAE,GAAG;GAAO;GAAY,CAAC;;AAGpC,QACE,kBAAC,YAAD;EACY;EACV,WAAU;YAFZ;GAIE,kBAAC,UAAD;IAAQ,WAAU;cACf,KAAS,EAAG,iCAAiC,0BAA0B;IACjE,CAAA;GACT,kBAAC,KAAD;IAAG,WAAU;cACV,EACC,uCACA,kFACD;IACC,CAAA;GAEJ,kBAAC,UAAD;IACE,OAAO,EAAM,UAAU;IACvB,WAAW,MAAM,EAAiB,EAAE,OAAO,UAAU,KAAK,OAAO,EAAE,OAAO,MAAM;IAChF,cAAY,EAAG,wCAAwC,sBAAsB;IAC7E,WAAU;cAJZ,CAME,kBAAC,UAAD;KAAQ,OAAM;eACX,IACG,EAAG,wCAAwC,iBAAiB,GAC5D,EAAG,oCAAoC,uBAAuB;KAC3D,CAAA,EACR,EAAY,KAAK,MAChB,kBAAC,UAAD;KAAqB,OAAO,EAAI;eAC7B,EAAI;KACE,EAFI,EAAI,GAER,CACT,CACK;;GAER,EAAM,UACL,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,KAAD;KAAG,WAAU;eACV,EAAG,2CAA2C,iBAAiB;KAC9D,CAAA,EACJ,kBAAC,OAAD;KACE,MAAK;KACL,cAAY,EAAG,2CAA2C,iBAAiB;KAC3E,WAAU;eAHZ,CAKE,kBAAC,SAAD;MAAO,WAAU;gBAAjB,CACE,kBAAC,SAAD;OACE,MAAK;OACL,MAAK;OACL,OAAM;OACN,SAAS,EAAM,eAAe;OAC9B,gBAAgB,EAAuB,UAAU;OACjD,WAAU;OACV,CAAA,EACF,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAG,mCAAmC,gBAAgB;OAClD,CAAA,CACD;SACR,kBAAC,SAAD;MAAO,WAAU;gBAAjB,CACE,kBAAC,SAAD;OACE,MAAK;OACL,MAAK;OACL,OAAM;OACN,SAAS,EAAM,eAAe;OAC9B,gBAAgB,EAAuB,mBAAmB;OAC1D,WAAU;OACV,CAAA,EACF,kBAAC,QAAD;OAAM,WAAU;iBACb,EACC,kCACA,mDACD;OACI,CAAA,CACD;QACJ;OACF;;GAEC;;;AAIf,IAAa,IAAwC;CACnD,QAAQ;CACR,YAAY;CACb;AAOD,SAAgB,EAAiB,GAAkD;AACjF,QAAO,MAAe,qBAClB,EAAe,iBACf,EAAe;;AASrB,SAAgB,EACd,GACkD;AAElD,QADK,EAAM,SACJ;EAAE,QAAQ,EAAM;EAAQ,YAAY,EAAiB,EAAM,WAAW;EAAE,GADrD,EAAE"}