@burdenoff/microfe-vibecontrols 2026.623.3 → 2026.623.4

package/dist/components/agents/AgentForm.js

@@ -196,8 +196,8 @@ function Oe({ onSubmit: Oe, onCancel: h, isLoading: g, onNavigate: ke, targets:
 									children: /* @__PURE__ */ d("div", {
 										className: "space-y-2",
 										children: [[{
-											label: y("agentsPage.installStep1", "1. Install the agent CLI"),
-											cmd: "curl -fsSL https://app.vibecontrols.com/install | bash && hash -r 2>/dev/null"
+											label: y("agentsPage.installStep1", "1. Install the agent globally"),
+											cmd: "bun install -g @vibecontrols/agent"
 										}, {
 											label: y("agentsPage.installStep2", "2. Start the agent (prints tunnel URL + API key)"),
 											cmd: "vibe start"

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

@@ -1 +1 @@
-{"version":3,"file":"AgentForm.js","names":[],"sources":["../../../src/components/agents/AgentForm.tsx"],"sourcesContent":["import { useEffect, useRef, useState, useCallback } from 'react';\nimport type { ReactNode } from 'react';\nimport {\n  Eye,\n  EyeOff,\n  CheckCircle2,\n  XCircle,\n  Loader2,\n  ChevronRight,\n  ChevronLeft,\n  ChevronDown,\n  Copy,\n  Check,\n  Terminal,\n  Download,\n  RefreshCw,\n  Plus,\n  Settings2,\n} from 'lucide-react';\nimport {\n  Button,\n  Input,\n  ResponsiveDialog,\n  ResponsiveDialogContent,\n  ResponsiveDialogDescription,\n  ResponsiveDialogFooter,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  Stepper,\n} from '@burdenoff/fe-libs/ui';\nimport { useProbeAgentTunnelLazyQuery } from '@/generated/wspace-operations';\nimport { SearchableSelect, MotionTabPanel } from '@/components/shared';\nimport type { SearchableSelectOption } from '@/components/shared';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { useField } from '../../shared/hooks/useField';\nimport { isQuotaExhaustedError, wasQuotaHandledLocally } from '@/utils/quotaUtils';\n\ntype WizardStage = 'details' | 'validate';\n\ninterface TargetOption {\n  id: string;\n  name: string;\n  type: string;\n  status: string;\n}\n\ninterface AgentFormProps {\n  onSubmit: (data: Record<string, unknown>) => Promise<{ id: string } | void>;\n  onCancel: () => void;\n  isLoading?: boolean;\n  /** Navigate to a path (used to go to agent details after creation) */\n  onNavigate?: (path: string) => void;\n  /** Available targets for the agent to be installed on */\n  targets?: TargetOption[];\n  /** Whether targets are still loading */\n  targetsLoading?: boolean;\n  /**\n   * Create a new target inline. When provided, the form shows a\n   * \"+ Create new target\" affordance that lets users create a DIRECT\n   * target on the fly without leaving the dialog. Must return the new\n   * target so the form can auto-select it.\n   */\n  onCreateTarget?: (name: string) => Promise<TargetOption | null>;\n  /** Optional extra content (e.g. a draft EntityTagPicker) rendered above the configure-stage actions. */\n  extraSection?: ReactNode;\n}\n\nexport function AgentForm({\n  onSubmit,\n  onCancel,\n  isLoading,\n  onNavigate,\n  targets,\n  targetsLoading,\n  onCreateTarget,\n  extraSection,\n}: AgentFormProps) {\n  const tr = useTr();\n  const [stage, setStage] = useState<WizardStage>('details');\n  const [showApiKey, setShowApiKey] = useState(false);\n  const [showInstallInstructions, setShowInstallInstructions] = useState(false);\n  const [copiedCommand, setCopiedCommand] = useState<string | null>(null);\n\n  // Stage 1: Basic details\n  const [name, setName] = useState('');\n  // Tracks whether the operator has typed into the name field. Once true,\n  // we stop overwriting the value from auto-fill sources (target select +\n  // identity probe) so we never clobber their input.\n  const [nameEdited, setNameEdited] = useState(false);\n  const [tunnelUrl, setTunnelUrl] = useState('');\n  const [agentApiKey, setAgentApiKey] = useState('');\n  const [selectedTargetId, setSelectedTargetId] = useState('');\n\n  // When the operator picks a target, autofill the agent name with the\n  // target's display name. Skip if they've already typed something into\n  // the name field. The svc append a `-2`/`-3` suffix on collision so\n  // it's safe to suggest a duplicate; the actual stored name comes back\n  // on the create response.\n  useEffect(() => {\n    if (nameEdited) return;\n    if (!selectedTargetId) return;\n    const picked = (targets ?? []).find((t) => t.id === selectedTargetId);\n    if (picked?.name) setName(picked.name);\n  }, [selectedTargetId, targets, nameEdited]);\n\n  // Inline target creation state\n  const [showInlineTarget, setShowInlineTarget] = useState(false);\n  const [inlineTargetName, setInlineTargetName] = useState('');\n  const [creatingTarget, setCreatingTarget] = useState(false);\n  const [inlineTargetError, setInlineTargetError] = useState<string | null>(null);\n\n  // Stage 2: Validation (via backend-proxied GraphQL query)\n  const [validating, setValidating] = useState(false);\n  const [healthResult, setHealthResult] = useState<{\n    ok: boolean;\n    data?: { status: string; version: string; uptime: number };\n    error?: string;\n  } | null>(null);\n  const [identityResult, setIdentityResult] = useState<{\n    ok: boolean;\n    data?: { hostname: string; platform: string; arch: string };\n    error?: string;\n  } | null>(null);\n\n  // Auto-detected fields (editable overrides)\n  const [detectedHostname, setDetectedHostname] = useState('');\n  const [detectedPlatform, setDetectedPlatform] = useState('linux');\n  const [detectedArch, setDetectedArch] = useState('x86_64');\n  const [detectedVersion, setDetectedVersion] = useState('1.0.0');\n\n  // Error state for creation failures\n  const [createError, setCreateError] = useState<string | null>(null);\n\n  // Advanced options (Phase 5B: per-daemon profile name).\n  // Defaults to \"default\" (autofilled but editable). Disclosure is closed\n  // by default — users only need to touch this for multi-profile setups.\n  const [showAdvanced, setShowAdvanced] = useState(false);\n  const [profile, setProfile] = useState('default');\n\n  // Accessible label/hint/error wiring for every form control. The hook\n  // only checks truthiness of `hint` to chain aria-describedby to the\n  // always-visible hint <p id={field.hintId}> below each input.\n  const HAS_HINT = 'visible';\n  const nameField = useField({ hint: HAS_HINT });\n  const inlineTargetField = useField({ error: inlineTargetError });\n  const tunnelField = useField({ hint: HAS_HINT });\n  const apiKeyField = useField({ hint: HAS_HINT });\n  const profileField = useField({ hint: HAS_HINT });\n  const platformField = useField();\n  const archField = useField();\n\n  const copyToClipboard = useCallback((text: string, id: string) => {\n    navigator.clipboard.writeText(text);\n    setCopiedCommand(id);\n    setTimeout(() => setCopiedCommand(null), 2000);\n  }, []);\n\n  const normalizeUrl = (url: string) => {\n    let u = url.trim();\n    if (u.endsWith('/')) u = u.slice(0, -1);\n    return u;\n  };\n\n  const [runProbe] = useProbeAgentTunnelLazyQuery({ fetchPolicy: 'network-only' });\n\n  // Validate the agent through the svc-proxied `probeAgentTunnel` query.\n  // svc fans out to /health + /api/profiles/default/agent/identity over\n  // its own egress and returns a combined AgentProbeResult — the\n  // operator's API key never touches the browser→tunnel path.\n  const validateAgent = async () => {\n    const baseUrl = normalizeUrl(tunnelUrl);\n    if (!baseUrl) return;\n\n    setValidating(true);\n    setHealthResult(null);\n    setIdentityResult(null);\n\n    try {\n      const { data, error } = await runProbe({\n        variables: { url: baseUrl, agentApiKey: agentApiKey || null },\n      });\n      const probe = data?.probeAgentTunnel;\n      if (error || !probe) {\n        const msg = error?.message ?? 'Probe failed';\n        setHealthResult({ ok: false, error: msg });\n        setIdentityResult({ ok: false, error: msg });\n      } else {\n        setHealthResult(\n          probe.healthOk\n            ? {\n                ok: true,\n                data: {\n                  status: probe.healthStatus ?? 'healthy',\n                  version: probe.agentVersion ?? 'unknown',\n                  uptime: probe.uptime ?? 0,\n                },\n              }\n            : { ok: false, error: probe.healthError ?? 'Health check failed' }\n        );\n        if (probe.agentVersion) setDetectedVersion(probe.agentVersion);\n\n        setIdentityResult(\n          probe.identityOk\n            ? {\n                ok: true,\n                data: {\n                  hostname: probe.hostname ?? '',\n                  platform: probe.platform ?? 'linux',\n                  arch: probe.architecture ?? 'x86_64',\n                },\n              }\n            : { ok: false, error: probe.identityError ?? 'Identity check failed' }\n        );\n        if (probe.identityOk) {\n          if (probe.platform) setDetectedPlatform(probe.platform);\n          if (probe.architecture) setDetectedArch(probe.architecture);\n          // Auto-fill name from probe hostname unless (a) the operator\n          // has manually typed one, or (b) a target is already selected\n          // (target wins as the canonical autogen value).\n          if (probe.hostname) {\n            setDetectedHostname(probe.hostname);\n            if (!nameEdited && !selectedTargetId) setName(probe.hostname);\n          }\n        }\n      }\n    } catch (err) {\n      const msg = err instanceof Error ? err.message : 'Probe failed';\n      setHealthResult({ ok: false, error: msg });\n      setIdentityResult({ ok: false, error: msg });\n    }\n\n    setValidating(false);\n  };\n\n  // Refs let us short-circuit double-submits before React re-renders\n  // the button as disabled. The parent passes `isLoading` (driven by\n  // `useState`) and we wire it to the button's `disabled` prop, but\n  // `setState` is asynchronous — between the user's first click and\n  // React's next commit there is a microtask window in which the button\n  // is still clickable. Without this ref a fast double-click fires\n  // `addAgentFromTunnel` twice in parallel; the svc sees one in-flight\n  // and one fresh call, the second one wins the (workspaceId, name)\n  // unique-resolution race, and the workspace ends up with two agent\n  // rows (the original autogen + the operator's custom name).\n  const submittingRef = useRef(false);\n\n  // Create the agent and close the modal\n  const handleCreateAgent = async () => {\n    if (submittingRef.current) return;\n    submittingRef.current = true;\n    setCreateError(null);\n\n    // Pipe the chosen profile through `metadata.profile`. Phase 5A (svc) is\n    // adding first-class AgentProfile rows; in the meantime the backend\n    // also reads `metadata.profile` so the create path keeps working\n    // regardless of which side of the cut-over the cluster is on.\n    const trimmedProfile = profile.trim() || 'default';\n    const data: Record<string, unknown> = {\n      name: name || detectedHostname || 'Unnamed Agent',\n      hostname: detectedHostname || 'unknown',\n      platform: detectedPlatform,\n      architecture: detectedArch,\n      version: detectedVersion,\n      tunnelUrl: normalizeUrl(tunnelUrl),\n      tunnelStatus: 'ACTIVE',\n      agentApiKey,\n      metadata: { profile: trimmedProfile },\n      ...(selectedTargetId ? { targetId: selectedTargetId } : {}),\n    };\n\n    try {\n      const result = await onSubmit(data);\n      const newAgentId = result?.id || null;\n\n      if (!newAgentId) {\n        // Mutation succeeded but returned no agent ID — treat as failure\n        setCreateError('Agent creation returned no ID. The agent may already exist.');\n        return;\n      }\n\n      // Close the modal — the agent list will refetch automatically\n      if (onNavigate) {\n        onNavigate(`/agents/${newAgentId}`);\n      } else {\n        onCancel();\n      }\n    } catch (err) {\n      const message = err instanceof Error ? err.message : 'Failed to create agent';\n      setCreateError(message);\n    } finally {\n      submittingRef.current = false;\n    }\n  };\n\n  const isValidationPassed = healthResult?.ok && identityResult?.ok;\n  const hasTargets = targets && targets.length > 0;\n  // The user must either pick or inline-create a target if inline creation\n  // is enabled; otherwise we only require it when targets already exist.\n  const targetRequiredButMissing = onCreateTarget\n    ? selectedTargetId.length === 0\n    : hasTargets && selectedTargetId.length === 0;\n  const canProceedToValidate = tunnelUrl.trim().length > 0 && !targetRequiredButMissing;\n\n  const handleInlineCreateTarget = useCallback(async () => {\n    if (!onCreateTarget || !inlineTargetName.trim()) return;\n    setCreatingTarget(true);\n    setInlineTargetError(null);\n    try {\n      const created = await onCreateTarget(inlineTargetName.trim());\n      if (created) {\n        setSelectedTargetId(created.id);\n        setShowInlineTarget(false);\n        setInlineTargetName('');\n      } else if (wasQuotaHandledLocally()) {\n        // Parent surfaced the quota modal — collapse the inline row\n        // quietly so the user isn't left with a vague \"try again\"\n        // message under an explicit upgrade-your-plan dialog.\n        setShowInlineTarget(false);\n        setInlineTargetName('');\n      } else {\n        setInlineTargetError(\n          tr('agentsPage.inlineTargetFailed', 'Failed to create target. Please try again.')\n        );\n      }\n    } catch (err) {\n      if (isQuotaExhaustedError(err)) {\n        // Quota dialog will (or already has) opened at the parent;\n        // suppress the generic inline error so the two don't compete.\n        setShowInlineTarget(false);\n        setInlineTargetName('');\n      } else {\n        setInlineTargetError(err instanceof Error ? err.message : 'Failed to create target');\n      }\n    } finally {\n      setCreatingTarget(false);\n    }\n  }, [onCreateTarget, inlineTargetName, tr]);\n\n  const renderCopyButton = (text: string, id: string) => {\n    const copied = copiedCommand === id;\n    return (\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        onClick={() => copyToClipboard(text, id)}\n        aria-label={copied ? tr('agentsPage.copied', 'Copied') : tr('agentsPage.copy', 'Copy')}\n        className=\"shrink-0\"\n      >\n        {copied ? (\n          <Check className=\"size-3.5 text-status-success-text\" aria-hidden=\"true\" />\n        ) : (\n          <Copy className=\"size-3.5 text-text-secondary\" aria-hidden=\"true\" />\n        )}\n      </Button>\n    );\n  };\n\n  const requiredMark = (\n    <span aria-hidden=\"true\" className=\"text-status-error-text\">\n      {' '}\n      *\n    </span>\n  );\n\n  // Stepper\n  const steps = [\n    { key: 'details', label: tr('agentsPage.stepSetup', 'Setup') },\n    { key: 'validate', label: tr('agentsPage.stepValidate', 'Validate') },\n  ];\n\n  const currentStepIndex = steps.findIndex((s) => s.key === stage);\n\n  return (\n    <ResponsiveDialog\n      open\n      onOpenChange={(open) => {\n        if (!open && !isLoading) onCancel();\n      }}\n    >\n      {/* Multi-field data-entry dialog: a stray click on the scrim must not\n          discard typed input. Escape and the explicit Cancel/X still close. */}\n      <ResponsiveDialogContent\n        className=\"sm:max-w-xl md:max-h-[min(90vh,52rem)] md:overflow-y-auto\"\n        onPointerDownOutside={(event) => event.preventDefault()}\n      >\n        <ResponsiveDialogHeader>\n          <ResponsiveDialogTitle>\n            {tr('agentsPage.addNewAgent', 'Add New Agent')}\n          </ResponsiveDialogTitle>\n          <ResponsiveDialogDescription>\n            {tr(\n              'agentsPage.addNewAgentDescription',\n              'Connect a running vibe agent to this workspace.'\n            )}\n          </ResponsiveDialogDescription>\n        </ResponsiveDialogHeader>\n\n        <Stepper\n          steps={steps}\n          active={currentStepIndex}\n          onStepClick={(index) => {\n            const target = steps[index];\n            if (target) setStage(target.key === 'validate' ? 'validate' : 'details');\n          }}\n        />\n\n        <MotionTabPanel tabKey={stage}>\n          {stage === 'details' ? (\n            <div className=\"space-y-4\">\n              {/* Install instructions (collapsible) */}\n              <div className=\"border border-border-default rounded-lg overflow-hidden\">\n                <button\n                  type=\"button\"\n                  onClick={() => setShowInstallInstructions(!showInstallInstructions)}\n                  aria-expanded={showInstallInstructions}\n                  className=\"w-full flex items-center justify-between px-4 py-3 bg-bg-sunken hover:bg-bg-sunken/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <Download className=\"size-4 text-text-secondary\" aria-hidden=\"true\" />\n                    <span className=\"text-sm font-medium text-text-primary\">\n                      {tr('agentsPage.installInstructions', 'Agent Install Instructions')}\n                    </span>\n                  </div>\n                  <ChevronRight\n                    aria-hidden=\"true\"\n                    className={`size-4 text-text-secondary transition-transform ${showInstallInstructions ? 'rotate-90' : ''}`}\n                  />\n                </button>\n                {showInstallInstructions && (\n                  <div className=\"px-4 py-3 space-y-3 border-t border-border-default\">\n                    <div className=\"space-y-2\">\n                      {[\n                        {\n                          label: tr('agentsPage.installStep1', '1. Install the agent CLI'),\n                          // `&& hash -r` refreshes the shell so the new `vibe`\n                          // resolves immediately (no manual hash -r needed).\n                          cmd: 'curl -fsSL https://app.vibecontrols.com/install | bash && hash -r 2>/dev/null',\n                        },\n                        {\n                          label: tr(\n                            'agentsPage.installStep2',\n                            '2. Start the agent (prints tunnel URL + API key)'\n                          ),\n                          cmd: 'vibe start',\n                        },\n                      ].map((step) => (\n                        <div key={step.cmd}>\n                          <p className=\"text-xs text-text-secondary mb-1\">{step.label}</p>\n                          <div className=\"flex items-center gap-2 bg-bg-sunken rounded-md px-3 py-1.5 font-mono text-xs text-text-primary\">\n                            <Terminal\n                              className=\"size-3 text-text-muted flex-shrink-0\"\n                              aria-hidden=\"true\"\n                            />\n                            <code className=\"flex-1 min-w-0 break-words\">{step.cmd}</code>\n                            {renderCopyButton(step.cmd, step.cmd)}\n                          </div>\n                        </div>\n                      ))}\n                      <p className=\"text-xs text-text-secondary pt-1\">\n                        {tr(\n                          'agentsPage.installHint',\n                          'After running vibe start, copy the printed tunnel URL and API key into the fields above.'\n                        )}\n                      </p>\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {/* Agent Name — visible upfront so operators see (and can\n                  override) the autogen before validation. The autofill\n                  chain still runs in the background: picking a target\n                  pulls in its name; clicking Validate falls back to the\n                  probed hostname when the user hasn't typed anything.\n                  The svc dedupes inside the workspace via\n                  resolveUniqueAgentName(), so suffixes like `-2` may\n                  still get appended at submit time even when the user\n                  picked their own string. */}\n              <div>\n                <label\n                  htmlFor={nameField.id}\n                  className=\"mb-1.5 block text-sm font-medium text-text-primary\"\n                >\n                  {tr('agentsPage.name', 'Name')}\n                </label>\n                <Input\n                  {...nameField.inputProps}\n                  type=\"text\"\n                  value={name}\n                  onChange={(e) => {\n                    setName(e.target.value);\n                    setNameEdited(true);\n                  }}\n                  placeholder={tr(\n                    'agentsPage.namePlaceholderUpfront',\n                    'My laptop, prod jump-host, …'\n                  )}\n                  className=\"text-base md:text-sm\"\n                  data-testid=\"agent-form-name-input\"\n                />\n                <p id={nameField.hintId} className=\"mt-1.5 text-xs text-text-muted\">\n                  {tr(\n                    'agentsPage.nameHint',\n                    \"How this agent shows up in the UI. Defaults to the target's name (or the machine's hostname after Validate) — leave blank to accept the autogen.\"\n                  )}\n                </p>\n              </div>\n\n              {/* Target Selection — with inline creation */}\n              <div>\n                <span className=\"mb-1.5 block text-sm font-medium text-text-primary\">\n                  {tr('agentsPage.target', 'Target')}\n                  {requiredMark}\n                </span>\n\n                {hasTargets && !showInlineTarget && (\n                  <>\n                    <SearchableSelect\n                      placeholder={tr('agentsPage.selectTarget', 'Select a target...')}\n                      searchPlaceholder={tr('agentsPage.searchTargets', 'Search targets...')}\n                      options={(targets ?? []).map(\n                        (tgt): SearchableSelectOption => ({\n                          value: tgt.id,\n                          label: tgt.name,\n                          description: `${tgt.type}${tgt.status ? ` · ${tgt.status}` : ''}`,\n                        })\n                      )}\n                      value={selectedTargetId}\n                      onChange={setSelectedTargetId}\n                      clearable\n                    />\n                    <p className=\"mt-1.5 text-xs text-text-muted\">\n                      {tr(\n                        'agentsPage.targetDescription',\n                        'The target machine this agent will be installed on.'\n                      )}{' '}\n                      {onCreateTarget && (\n                        <button\n                          type=\"button\"\n                          onClick={() => {\n                            setShowInlineTarget(true);\n                            setInlineTargetName(name.trim() || '');\n                          }}\n                          className=\"text-text-link hover:text-text-linkHover hover:underline inline-flex items-center gap-1 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n                        >\n                          <Plus className=\"size-3\" aria-hidden=\"true\" />\n                          {tr('agentsPage.createNewTarget', 'Create a new target')}\n                        </button>\n                      )}\n                    </p>\n                  </>\n                )}\n\n                {/* Empty state prompt (no targets exist yet) */}\n                {!hasTargets && !targetsLoading && onCreateTarget && !showInlineTarget && (\n                  <div className=\"p-3 bg-bg-sunken border border-border-default rounded-lg\">\n                    <p className=\"text-sm text-text-secondary mb-2\">\n                      {tr(\n                        'agentsPage.noTargetsInlinePrompt',\n                        \"You don't have any targets yet. Create one now to install this agent on it.\"\n                      )}\n                    </p>\n                    <Button\n                      type=\"button\"\n                      size=\"sm\"\n                      onClick={() => {\n                        setShowInlineTarget(true);\n                        setInlineTargetName(name.trim() || '');\n                      }}\n                    >\n                      <Plus className=\"size-4\" aria-hidden=\"true\" />\n                      {tr('agentsPage.createFirstTarget', 'Create first target')}\n                    </Button>\n                  </div>\n                )}\n\n                {/* Inline creation form */}\n                {showInlineTarget && onCreateTarget && (\n                  <div className=\"p-3 bg-bg-sunken border border-border-default rounded-lg space-y-2\">\n                    <p className=\"text-xs font-medium text-text-secondary\">\n                      {tr(\n                        'agentsPage.newDirectTarget',\n                        'New target (Direct — you can change the type later)'\n                      )}\n                    </p>\n                    <div>\n                      <label\n                        htmlFor={inlineTargetField.id}\n                        className=\"mb-1.5 block text-sm font-medium text-text-primary\"\n                      >\n                        {tr('agentsPage.targetName', 'Target name')}\n                      </label>\n                      <Input\n                        {...inlineTargetField.inputProps}\n                        type=\"text\"\n                        value={inlineTargetName}\n                        onChange={(e) => setInlineTargetName(e.target.value)}\n                        placeholder={tr('agentsPage.targetName', 'Target name')}\n                        className=\"text-base md:text-sm\"\n                        onKeyDown={(e) => {\n                          if (e.key === 'Enter') {\n                            e.preventDefault();\n                            void handleInlineCreateTarget();\n                          }\n                        }}\n                      />\n                      {inlineTargetError && (\n                        <p\n                          id={inlineTargetField.errorId}\n                          role=\"alert\"\n                          className=\"mt-1.5 text-sm text-status-error-text\"\n                        >\n                          {inlineTargetError}\n                        </p>\n                      )}\n                    </div>\n                    <div className=\"flex flex-wrap items-center gap-2\">\n                      <Button\n                        type=\"button\"\n                        size=\"sm\"\n                        onClick={() => void handleInlineCreateTarget()}\n                        disabled={!inlineTargetName.trim() || creatingTarget}\n                        aria-busy={creatingTarget}\n                      >\n                        {creatingTarget ? (\n                          <Loader2 className=\"size-3.5 animate-spin\" aria-hidden=\"true\" />\n                        ) : (\n                          <Check className=\"size-3.5\" aria-hidden=\"true\" />\n                        )}\n                        {tr('agentsPage.create', 'Create')}\n                      </Button>\n                      <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={() => {\n                          setShowInlineTarget(false);\n                          setInlineTargetName('');\n                          setInlineTargetError(null);\n                        }}\n                      >\n                        {tr('agentsPage.cancel', 'Cancel')}\n                      </Button>\n                    </div>\n                  </div>\n                )}\n\n                {/* Loading placeholder */}\n                {targetsLoading && !hasTargets && (\n                  <div\n                    role=\"status\"\n                    className=\"p-3 bg-bg-sunken border border-border-default rounded-lg flex items-center gap-2 text-sm text-text-secondary\"\n                  >\n                    <Loader2 className=\"size-4 animate-spin\" aria-hidden=\"true\" />\n                    {tr('agentsPage.loadingTargets', 'Loading targets...')}\n                  </div>\n                )}\n              </div>\n\n              {/* API/Tunnel URL */}\n              <div>\n                <label\n                  htmlFor={tunnelField.id}\n                  className=\"mb-1.5 block text-sm font-medium text-text-primary\"\n                >\n                  {tr('agentsPage.apiTunnelUrl', 'API / Tunnel URL')}\n                  {requiredMark}\n                </label>\n                <Input\n                  {...tunnelField.inputProps}\n                  type=\"url\"\n                  value={tunnelUrl}\n                  onChange={(e) => setTunnelUrl(e.target.value)}\n                  placeholder=\"https://your-tunnel.trycloudflare.com\"\n                  aria-required=\"true\"\n                  className=\"text-base md:text-sm font-mono\"\n                />\n                <p id={tunnelField.hintId} className=\"mt-1.5 text-xs text-text-muted\">\n                  {tr(\n                    'agentsPage.tunnelUrlHint',\n                    \"The agent's tunnel URL or local API URL (e.g. http://localhost:3005)\"\n                  )}\n                </p>\n              </div>\n\n              {/* Agent API Key */}\n              <div>\n                <label\n                  htmlFor={apiKeyField.id}\n                  className=\"mb-1.5 block text-sm font-medium text-text-primary\"\n                >\n                  {tr('agentsPage.agentApiKey', 'Agent API Key')}\n                  {requiredMark}\n                </label>\n                <div className=\"relative\">\n                  <Input\n                    {...apiKeyField.inputProps}\n                    type={showApiKey ? 'text' : 'password'}\n                    value={agentApiKey}\n                    onChange={(e) => setAgentApiKey(e.target.value)}\n                    placeholder=\"vcak_...\"\n                    aria-required=\"true\"\n                    className=\"pr-10 text-base md:text-sm font-mono\"\n                  />\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setShowApiKey(!showApiKey)}\n                    aria-label={\n                      showApiKey\n                        ? tr('agentsPage.hideApiKey', 'Hide API key')\n                        : tr('agentsPage.showApiKey', 'Show API key')\n                    }\n                    aria-pressed={showApiKey}\n                    className=\"absolute right-1 top-1/2 -translate-y-1/2\"\n                  >\n                    {showApiKey ? (\n                      <EyeOff className=\"size-4 text-text-secondary\" aria-hidden=\"true\" />\n                    ) : (\n                      <Eye className=\"size-4 text-text-secondary\" aria-hidden=\"true\" />\n                    )}\n                  </Button>\n                </div>\n                <p id={apiKeyField.hintId} className=\"mt-1.5 text-xs text-text-muted\">\n                  {tr('agentsPage.apiKeyHint', 'Run')}{' '}\n                  <code className=\"bg-bg-sunken px-1 rounded\">vibe key</code>{' '}\n                  {tr(\n                    'agentsPage.apiKeyHintSuffix',\n                    'on the agent to get this. Changes on restart.'\n                  )}\n                </p>\n              </div>\n\n              {/* Advanced options — per-daemon profile name (Phase 5B) */}\n              <div className=\"border border-border-default rounded-lg overflow-hidden\">\n                <button\n                  type=\"button\"\n                  onClick={() => setShowAdvanced((v) => !v)}\n                  className=\"w-full flex items-center justify-between px-4 py-2.5 bg-bg-sunken hover:bg-bg-sunken/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n                  aria-expanded={showAdvanced}\n                  data-testid=\"agent-form-advanced-toggle\"\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <Settings2 className=\"size-4 text-text-secondary\" aria-hidden=\"true\" />\n                    <span className=\"text-sm font-medium text-text-primary\">\n                      {tr('agentsPage.advancedOptions', 'Advanced options')}\n                    </span>\n                  </div>\n                  <ChevronDown\n                    aria-hidden=\"true\"\n                    className={`size-4 text-text-secondary transition-transform ${showAdvanced ? 'rotate-180' : ''}`}\n                  />\n                </button>\n                {showAdvanced && (\n                  <div className=\"px-4 py-3 space-y-3 border-t border-border-default\">\n                    <div>\n                      <label\n                        htmlFor={profileField.id}\n                        className=\"mb-1.5 block text-sm font-medium text-text-primary\"\n                      >\n                        {tr('agentsPage.profileName', 'Profile name')}\n                      </label>\n                      <Input\n                        {...profileField.inputProps}\n                        type=\"text\"\n                        value={profile}\n                        onChange={(e) => setProfile(e.target.value)}\n                        placeholder=\"default\"\n                        className=\"text-base md:text-sm font-mono\"\n                        data-testid=\"agent-form-profile-input\"\n                      />\n                      <p id={profileField.hintId} className=\"mt-1.5 text-xs text-text-muted\">\n                        {tr(\n                          'agentsPage.profileNameHint',\n                          'Each profile runs an isolated CLI on the daemon. Leave as \"default\" unless you want this agent to host multiple parallel profiles.'\n                        )}\n                      </p>\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {extraSection && (\n                <div className=\"border-t border-border-default pt-4 mt-4\">{extraSection}</div>\n              )}\n\n              {/* Actions */}\n              <ResponsiveDialogFooter className=\"pt-2\">\n                <Button type=\"button\" variant=\"outline\" onClick={onCancel}>\n                  {tr('agentsPage.cancel', 'Cancel')}\n                </Button>\n                <Button\n                  type=\"button\"\n                  disabled={!canProceedToValidate}\n                  onClick={() => {\n                    setStage('validate');\n                    validateAgent();\n                  }}\n                >\n                  {tr('agentsPage.nextValidate', 'Next: Validate')}\n                  <ChevronRight className=\"size-4\" aria-hidden=\"true\" />\n                </Button>\n              </ResponsiveDialogFooter>\n            </div>\n          ) : (\n            <div className=\"space-y-4\">\n              {/* Validation Results */}\n              <div className=\"space-y-3\">\n                {/* Health Check */}\n                <div\n                  role=\"status\"\n                  className={`flex items-center gap-3 p-3 rounded-lg border ${\n                    healthResult === null\n                      ? 'border-border-default bg-bg-sunken'\n                      : healthResult.ok\n                        ? 'border-status-success-border bg-status-success-bg-subtle'\n                        : 'border-status-error-border bg-status-error-bg-subtle'\n                  }`}\n                >\n                  {validating && !healthResult ? (\n                    <Loader2\n                      className=\"size-5 text-text-secondary animate-spin\"\n                      aria-hidden=\"true\"\n                    />\n                  ) : healthResult?.ok ? (\n                    <CheckCircle2 className=\"size-5 text-status-success-text\" aria-hidden=\"true\" />\n                  ) : healthResult ? (\n                    <XCircle className=\"size-5 text-status-error-text\" aria-hidden=\"true\" />\n                  ) : (\n                    <div\n                      className=\"size-5 rounded-full border-2 border-border-default\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <div className=\"flex-1 min-w-0\">\n                    <p className=\"text-sm font-medium text-text-primary\">\n                      {tr('agentsPage.healthCheck', 'Health Check')}\n                    </p>\n                    {healthResult?.ok && healthResult.data && (\n                      <p className=\"text-xs text-text-secondary break-words\">\n                        Status: {healthResult.data.status} | Version: {healthResult.data.version} |\n                        Uptime: {Math.round(healthResult.data.uptime)}s\n                      </p>\n                    )}\n                    {healthResult && !healthResult.ok && (\n                      <p className=\"text-xs text-status-error-text break-words\">\n                        {healthResult.error}\n                      </p>\n                    )}\n                  </div>\n                </div>\n\n                {/* API Access Check */}\n                <div\n                  role=\"status\"\n                  className={`flex items-center gap-3 p-3 rounded-lg border ${\n                    identityResult === null\n                      ? 'border-border-default bg-bg-sunken'\n                      : identityResult.ok\n                        ? 'border-status-success-border bg-status-success-bg-subtle'\n                        : 'border-status-error-border bg-status-error-bg-subtle'\n                  }`}\n                >\n                  {validating && !identityResult ? (\n                    <Loader2\n                      className=\"size-5 text-text-secondary animate-spin\"\n                      aria-hidden=\"true\"\n                    />\n                  ) : identityResult?.ok ? (\n                    <CheckCircle2 className=\"size-5 text-status-success-text\" aria-hidden=\"true\" />\n                  ) : identityResult ? (\n                    <XCircle className=\"size-5 text-status-error-text\" aria-hidden=\"true\" />\n                  ) : (\n                    <div\n                      className=\"size-5 rounded-full border-2 border-border-default\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <div className=\"flex-1 min-w-0\">\n                    <p className=\"text-sm font-medium text-text-primary\">\n                      {tr('agentsPage.apiAccess', 'API Access')}\n                    </p>\n                    {identityResult?.ok && identityResult.data && (\n                      <p className=\"text-xs text-text-secondary break-words\">\n                        Host: {identityResult.data.hostname} | {identityResult.data.platform} /{' '}\n                        {identityResult.data.arch}\n                      </p>\n                    )}\n                    {identityResult && !identityResult.ok && (\n                      <p className=\"text-xs text-status-error-text break-words\">\n                        {identityResult.error}\n                      </p>\n                    )}\n                  </div>\n                </div>\n              </div>\n\n              {/* Retry button */}\n              {!validating && (!healthResult?.ok || !identityResult?.ok) && (\n                <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={validateAgent}>\n                  <RefreshCw className=\"size-3.5\" aria-hidden=\"true\" />\n                  {tr('agentsPage.retryValidation', 'Retry validation')}\n                </Button>\n              )}\n\n              {/* Detected info (editable overrides) — Name lives upfront\n                  now; this section shows the validate-time fields only. */}\n              {isValidationPassed && (\n                <div className=\"space-y-3 pt-2\">\n                  <p className=\"text-sm font-medium text-text-primary\">\n                    {tr('agentsPage.detectedAgentInfo', 'Detected Agent Info')}\n                  </p>\n\n                  <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n                    <div>\n                      <label\n                        htmlFor={platformField.id}\n                        className=\"mb-1.5 block text-sm font-medium text-text-primary\"\n                      >\n                        {tr('agentsPage.platform', 'Platform')}\n                      </label>\n                      <Select value={detectedPlatform} onValueChange={setDetectedPlatform}>\n                        <SelectTrigger id={platformField.id} className=\"text-base md:text-sm\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"linux\">Linux</SelectItem>\n                          <SelectItem value=\"darwin\">macOS</SelectItem>\n                          <SelectItem value=\"windows\">Windows</SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                    <div>\n                      <label\n                        htmlFor={archField.id}\n                        className=\"mb-1.5 block text-sm font-medium text-text-primary\"\n                      >\n                        {tr('agentsPage.architecture', 'Architecture')}\n                      </label>\n                      <Select value={detectedArch} onValueChange={setDetectedArch}>\n                        <SelectTrigger id={archField.id} className=\"text-base md:text-sm\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"x86_64\">x86_64</SelectItem>\n                          <SelectItem value=\"arm64\">arm64</SelectItem>\n                          <SelectItem value=\"aarch64\">aarch64</SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </div>\n              )}\n\n              {/* Creation error */}\n              {createError && (\n                <div\n                  role=\"alert\"\n                  className=\"p-3 bg-status-error-bg-subtle border border-status-error-border rounded-lg\"\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <XCircle\n                      className=\"size-5 text-status-error-text flex-shrink-0\"\n                      aria-hidden=\"true\"\n                    />\n                    <p className=\"text-sm text-status-error-text break-words\">{createError}</p>\n                  </div>\n                  <div className=\"flex flex-wrap items-center gap-2 mt-3\">\n                    <Button\n                      type=\"button\"\n                      variant=\"outline\"\n                      size=\"sm\"\n                      onClick={() => {\n                        setCreateError(null);\n                        // Reset form to allow entering different credentials\n                        setStage('details');\n                        setTunnelUrl('');\n                        setAgentApiKey('');\n                        setHealthResult(null);\n                        setIdentityResult(null);\n                      }}\n                    >\n                      <RefreshCw className=\"size-3.5\" aria-hidden=\"true\" />\n                      {tr('agentsPage.tryDifferentAgent', 'Try Different Agent')}\n                    </Button>\n                    <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n                      {tr('agentsPage.close', 'Close')}\n                    </Button>\n                  </div>\n                </div>\n              )}\n\n              {/* Actions */}\n              <ResponsiveDialogFooter className=\"pt-2\">\n                <Button type=\"button\" variant=\"outline\" onClick={() => setStage('details')}>\n                  <ChevronLeft className=\"size-4\" aria-hidden=\"true\" />\n                  {tr('agentsPage.back', 'Back')}\n                </Button>\n                <Button\n                  type=\"button\"\n                  disabled={!isValidationPassed || isLoading || validating}\n                  onClick={handleCreateAgent}\n                  aria-busy={isLoading}\n                >\n                  {isLoading ? (\n                    <>\n                      <Loader2 className=\"size-4 animate-spin\" aria-hidden=\"true\" />\n                      {tr('agentsPage.adding', 'Adding...')}\n                    </>\n                  ) : (\n                    <>\n                      {tr('agentsPage.addAgent', 'Add Agent')}\n                      <ChevronRight className=\"size-4\" aria-hidden=\"true\" />\n                    </>\n                  )}\n                </Button>\n              </ResponsiveDialogFooter>\n            </div>\n          )}\n        </MotionTabPanel>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AgentForm.js","names":[],"sources":["../../../src/components/agents/AgentForm.tsx"],"sourcesContent":["import { useEffect, useRef, useState, useCallback } from 'react';\nimport type { ReactNode } from 'react';\nimport {\n  Eye,\n  EyeOff,\n  CheckCircle2,\n  XCircle,\n  Loader2,\n  ChevronRight,\n  ChevronLeft,\n  ChevronDown,\n  Copy,\n  Check,\n  Terminal,\n  Download,\n  RefreshCw,\n  Plus,\n  Settings2,\n} from 'lucide-react';\nimport {\n  Button,\n  Input,\n  ResponsiveDialog,\n  ResponsiveDialogContent,\n  ResponsiveDialogDescription,\n  ResponsiveDialogFooter,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  Stepper,\n} from '@burdenoff/fe-libs/ui';\nimport { useProbeAgentTunnelLazyQuery } from '@/generated/wspace-operations';\nimport { SearchableSelect, MotionTabPanel } from '@/components/shared';\nimport type { SearchableSelectOption } from '@/components/shared';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { useField } from '../../shared/hooks/useField';\nimport { isQuotaExhaustedError, wasQuotaHandledLocally } from '@/utils/quotaUtils';\n\ntype WizardStage = 'details' | 'validate';\n\ninterface TargetOption {\n  id: string;\n  name: string;\n  type: string;\n  status: string;\n}\n\ninterface AgentFormProps {\n  onSubmit: (data: Record<string, unknown>) => Promise<{ id: string } | void>;\n  onCancel: () => void;\n  isLoading?: boolean;\n  /** Navigate to a path (used to go to agent details after creation) */\n  onNavigate?: (path: string) => void;\n  /** Available targets for the agent to be installed on */\n  targets?: TargetOption[];\n  /** Whether targets are still loading */\n  targetsLoading?: boolean;\n  /**\n   * Create a new target inline. When provided, the form shows a\n   * \"+ Create new target\" affordance that lets users create a DIRECT\n   * target on the fly without leaving the dialog. Must return the new\n   * target so the form can auto-select it.\n   */\n  onCreateTarget?: (name: string) => Promise<TargetOption | null>;\n  /** Optional extra content (e.g. a draft EntityTagPicker) rendered above the configure-stage actions. */\n  extraSection?: ReactNode;\n}\n\nexport function AgentForm({\n  onSubmit,\n  onCancel,\n  isLoading,\n  onNavigate,\n  targets,\n  targetsLoading,\n  onCreateTarget,\n  extraSection,\n}: AgentFormProps) {\n  const tr = useTr();\n  const [stage, setStage] = useState<WizardStage>('details');\n  const [showApiKey, setShowApiKey] = useState(false);\n  const [showInstallInstructions, setShowInstallInstructions] = useState(false);\n  const [copiedCommand, setCopiedCommand] = useState<string | null>(null);\n\n  // Stage 1: Basic details\n  const [name, setName] = useState('');\n  // Tracks whether the operator has typed into the name field. Once true,\n  // we stop overwriting the value from auto-fill sources (target select +\n  // identity probe) so we never clobber their input.\n  const [nameEdited, setNameEdited] = useState(false);\n  const [tunnelUrl, setTunnelUrl] = useState('');\n  const [agentApiKey, setAgentApiKey] = useState('');\n  const [selectedTargetId, setSelectedTargetId] = useState('');\n\n  // When the operator picks a target, autofill the agent name with the\n  // target's display name. Skip if they've already typed something into\n  // the name field. The svc append a `-2`/`-3` suffix on collision so\n  // it's safe to suggest a duplicate; the actual stored name comes back\n  // on the create response.\n  useEffect(() => {\n    if (nameEdited) return;\n    if (!selectedTargetId) return;\n    const picked = (targets ?? []).find((t) => t.id === selectedTargetId);\n    if (picked?.name) setName(picked.name);\n  }, [selectedTargetId, targets, nameEdited]);\n\n  // Inline target creation state\n  const [showInlineTarget, setShowInlineTarget] = useState(false);\n  const [inlineTargetName, setInlineTargetName] = useState('');\n  const [creatingTarget, setCreatingTarget] = useState(false);\n  const [inlineTargetError, setInlineTargetError] = useState<string | null>(null);\n\n  // Stage 2: Validation (via backend-proxied GraphQL query)\n  const [validating, setValidating] = useState(false);\n  const [healthResult, setHealthResult] = useState<{\n    ok: boolean;\n    data?: { status: string; version: string; uptime: number };\n    error?: string;\n  } | null>(null);\n  const [identityResult, setIdentityResult] = useState<{\n    ok: boolean;\n    data?: { hostname: string; platform: string; arch: string };\n    error?: string;\n  } | null>(null);\n\n  // Auto-detected fields (editable overrides)\n  const [detectedHostname, setDetectedHostname] = useState('');\n  const [detectedPlatform, setDetectedPlatform] = useState('linux');\n  const [detectedArch, setDetectedArch] = useState('x86_64');\n  const [detectedVersion, setDetectedVersion] = useState('1.0.0');\n\n  // Error state for creation failures\n  const [createError, setCreateError] = useState<string | null>(null);\n\n  // Advanced options (Phase 5B: per-daemon profile name).\n  // Defaults to \"default\" (autofilled but editable). Disclosure is closed\n  // by default — users only need to touch this for multi-profile setups.\n  const [showAdvanced, setShowAdvanced] = useState(false);\n  const [profile, setProfile] = useState('default');\n\n  // Accessible label/hint/error wiring for every form control. The hook\n  // only checks truthiness of `hint` to chain aria-describedby to the\n  // always-visible hint <p id={field.hintId}> below each input.\n  const HAS_HINT = 'visible';\n  const nameField = useField({ hint: HAS_HINT });\n  const inlineTargetField = useField({ error: inlineTargetError });\n  const tunnelField = useField({ hint: HAS_HINT });\n  const apiKeyField = useField({ hint: HAS_HINT });\n  const profileField = useField({ hint: HAS_HINT });\n  const platformField = useField();\n  const archField = useField();\n\n  const copyToClipboard = useCallback((text: string, id: string) => {\n    navigator.clipboard.writeText(text);\n    setCopiedCommand(id);\n    setTimeout(() => setCopiedCommand(null), 2000);\n  }, []);\n\n  const normalizeUrl = (url: string) => {\n    let u = url.trim();\n    if (u.endsWith('/')) u = u.slice(0, -1);\n    return u;\n  };\n\n  const [runProbe] = useProbeAgentTunnelLazyQuery({ fetchPolicy: 'network-only' });\n\n  // Validate the agent through the svc-proxied `probeAgentTunnel` query.\n  // svc fans out to /health + /api/profiles/default/agent/identity over\n  // its own egress and returns a combined AgentProbeResult — the\n  // operator's API key never touches the browser→tunnel path.\n  const validateAgent = async () => {\n    const baseUrl = normalizeUrl(tunnelUrl);\n    if (!baseUrl) return;\n\n    setValidating(true);\n    setHealthResult(null);\n    setIdentityResult(null);\n\n    try {\n      const { data, error } = await runProbe({\n        variables: { url: baseUrl, agentApiKey: agentApiKey || null },\n      });\n      const probe = data?.probeAgentTunnel;\n      if (error || !probe) {\n        const msg = error?.message ?? 'Probe failed';\n        setHealthResult({ ok: false, error: msg });\n        setIdentityResult({ ok: false, error: msg });\n      } else {\n        setHealthResult(\n          probe.healthOk\n            ? {\n                ok: true,\n                data: {\n                  status: probe.healthStatus ?? 'healthy',\n                  version: probe.agentVersion ?? 'unknown',\n                  uptime: probe.uptime ?? 0,\n                },\n              }\n            : { ok: false, error: probe.healthError ?? 'Health check failed' }\n        );\n        if (probe.agentVersion) setDetectedVersion(probe.agentVersion);\n\n        setIdentityResult(\n          probe.identityOk\n            ? {\n                ok: true,\n                data: {\n                  hostname: probe.hostname ?? '',\n                  platform: probe.platform ?? 'linux',\n                  arch: probe.architecture ?? 'x86_64',\n                },\n              }\n            : { ok: false, error: probe.identityError ?? 'Identity check failed' }\n        );\n        if (probe.identityOk) {\n          if (probe.platform) setDetectedPlatform(probe.platform);\n          if (probe.architecture) setDetectedArch(probe.architecture);\n          // Auto-fill name from probe hostname unless (a) the operator\n          // has manually typed one, or (b) a target is already selected\n          // (target wins as the canonical autogen value).\n          if (probe.hostname) {\n            setDetectedHostname(probe.hostname);\n            if (!nameEdited && !selectedTargetId) setName(probe.hostname);\n          }\n        }\n      }\n    } catch (err) {\n      const msg = err instanceof Error ? err.message : 'Probe failed';\n      setHealthResult({ ok: false, error: msg });\n      setIdentityResult({ ok: false, error: msg });\n    }\n\n    setValidating(false);\n  };\n\n  // Refs let us short-circuit double-submits before React re-renders\n  // the button as disabled. The parent passes `isLoading` (driven by\n  // `useState`) and we wire it to the button's `disabled` prop, but\n  // `setState` is asynchronous — between the user's first click and\n  // React's next commit there is a microtask window in which the button\n  // is still clickable. Without this ref a fast double-click fires\n  // `addAgentFromTunnel` twice in parallel; the svc sees one in-flight\n  // and one fresh call, the second one wins the (workspaceId, name)\n  // unique-resolution race, and the workspace ends up with two agent\n  // rows (the original autogen + the operator's custom name).\n  const submittingRef = useRef(false);\n\n  // Create the agent and close the modal\n  const handleCreateAgent = async () => {\n    if (submittingRef.current) return;\n    submittingRef.current = true;\n    setCreateError(null);\n\n    // Pipe the chosen profile through `metadata.profile`. Phase 5A (svc) is\n    // adding first-class AgentProfile rows; in the meantime the backend\n    // also reads `metadata.profile` so the create path keeps working\n    // regardless of which side of the cut-over the cluster is on.\n    const trimmedProfile = profile.trim() || 'default';\n    const data: Record<string, unknown> = {\n      name: name || detectedHostname || 'Unnamed Agent',\n      hostname: detectedHostname || 'unknown',\n      platform: detectedPlatform,\n      architecture: detectedArch,\n      version: detectedVersion,\n      tunnelUrl: normalizeUrl(tunnelUrl),\n      tunnelStatus: 'ACTIVE',\n      agentApiKey,\n      metadata: { profile: trimmedProfile },\n      ...(selectedTargetId ? { targetId: selectedTargetId } : {}),\n    };\n\n    try {\n      const result = await onSubmit(data);\n      const newAgentId = result?.id || null;\n\n      if (!newAgentId) {\n        // Mutation succeeded but returned no agent ID — treat as failure\n        setCreateError('Agent creation returned no ID. The agent may already exist.');\n        return;\n      }\n\n      // Close the modal — the agent list will refetch automatically\n      if (onNavigate) {\n        onNavigate(`/agents/${newAgentId}`);\n      } else {\n        onCancel();\n      }\n    } catch (err) {\n      const message = err instanceof Error ? err.message : 'Failed to create agent';\n      setCreateError(message);\n    } finally {\n      submittingRef.current = false;\n    }\n  };\n\n  const isValidationPassed = healthResult?.ok && identityResult?.ok;\n  const hasTargets = targets && targets.length > 0;\n  // The user must either pick or inline-create a target if inline creation\n  // is enabled; otherwise we only require it when targets already exist.\n  const targetRequiredButMissing = onCreateTarget\n    ? selectedTargetId.length === 0\n    : hasTargets && selectedTargetId.length === 0;\n  const canProceedToValidate = tunnelUrl.trim().length > 0 && !targetRequiredButMissing;\n\n  const handleInlineCreateTarget = useCallback(async () => {\n    if (!onCreateTarget || !inlineTargetName.trim()) return;\n    setCreatingTarget(true);\n    setInlineTargetError(null);\n    try {\n      const created = await onCreateTarget(inlineTargetName.trim());\n      if (created) {\n        setSelectedTargetId(created.id);\n        setShowInlineTarget(false);\n        setInlineTargetName('');\n      } else if (wasQuotaHandledLocally()) {\n        // Parent surfaced the quota modal — collapse the inline row\n        // quietly so the user isn't left with a vague \"try again\"\n        // message under an explicit upgrade-your-plan dialog.\n        setShowInlineTarget(false);\n        setInlineTargetName('');\n      } else {\n        setInlineTargetError(\n          tr('agentsPage.inlineTargetFailed', 'Failed to create target. Please try again.')\n        );\n      }\n    } catch (err) {\n      if (isQuotaExhaustedError(err)) {\n        // Quota dialog will (or already has) opened at the parent;\n        // suppress the generic inline error so the two don't compete.\n        setShowInlineTarget(false);\n        setInlineTargetName('');\n      } else {\n        setInlineTargetError(err instanceof Error ? err.message : 'Failed to create target');\n      }\n    } finally {\n      setCreatingTarget(false);\n    }\n  }, [onCreateTarget, inlineTargetName, tr]);\n\n  const renderCopyButton = (text: string, id: string) => {\n    const copied = copiedCommand === id;\n    return (\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        onClick={() => copyToClipboard(text, id)}\n        aria-label={copied ? tr('agentsPage.copied', 'Copied') : tr('agentsPage.copy', 'Copy')}\n        className=\"shrink-0\"\n      >\n        {copied ? (\n          <Check className=\"size-3.5 text-status-success-text\" aria-hidden=\"true\" />\n        ) : (\n          <Copy className=\"size-3.5 text-text-secondary\" aria-hidden=\"true\" />\n        )}\n      </Button>\n    );\n  };\n\n  const requiredMark = (\n    <span aria-hidden=\"true\" className=\"text-status-error-text\">\n      {' '}\n      *\n    </span>\n  );\n\n  // Stepper\n  const steps = [\n    { key: 'details', label: tr('agentsPage.stepSetup', 'Setup') },\n    { key: 'validate', label: tr('agentsPage.stepValidate', 'Validate') },\n  ];\n\n  const currentStepIndex = steps.findIndex((s) => s.key === stage);\n\n  return (\n    <ResponsiveDialog\n      open\n      onOpenChange={(open) => {\n        if (!open && !isLoading) onCancel();\n      }}\n    >\n      {/* Multi-field data-entry dialog: a stray click on the scrim must not\n          discard typed input. Escape and the explicit Cancel/X still close. */}\n      <ResponsiveDialogContent\n        className=\"sm:max-w-xl md:max-h-[min(90vh,52rem)] md:overflow-y-auto\"\n        onPointerDownOutside={(event) => event.preventDefault()}\n      >\n        <ResponsiveDialogHeader>\n          <ResponsiveDialogTitle>\n            {tr('agentsPage.addNewAgent', 'Add New Agent')}\n          </ResponsiveDialogTitle>\n          <ResponsiveDialogDescription>\n            {tr(\n              'agentsPage.addNewAgentDescription',\n              'Connect a running vibe agent to this workspace.'\n            )}\n          </ResponsiveDialogDescription>\n        </ResponsiveDialogHeader>\n\n        <Stepper\n          steps={steps}\n          active={currentStepIndex}\n          onStepClick={(index) => {\n            const target = steps[index];\n            if (target) setStage(target.key === 'validate' ? 'validate' : 'details');\n          }}\n        />\n\n        <MotionTabPanel tabKey={stage}>\n          {stage === 'details' ? (\n            <div className=\"space-y-4\">\n              {/* Install instructions (collapsible) */}\n              <div className=\"border border-border-default rounded-lg overflow-hidden\">\n                <button\n                  type=\"button\"\n                  onClick={() => setShowInstallInstructions(!showInstallInstructions)}\n                  aria-expanded={showInstallInstructions}\n                  className=\"w-full flex items-center justify-between px-4 py-3 bg-bg-sunken hover:bg-bg-sunken/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <Download className=\"size-4 text-text-secondary\" aria-hidden=\"true\" />\n                    <span className=\"text-sm font-medium text-text-primary\">\n                      {tr('agentsPage.installInstructions', 'Agent Install Instructions')}\n                    </span>\n                  </div>\n                  <ChevronRight\n                    aria-hidden=\"true\"\n                    className={`size-4 text-text-secondary transition-transform ${showInstallInstructions ? 'rotate-90' : ''}`}\n                  />\n                </button>\n                {showInstallInstructions && (\n                  <div className=\"px-4 py-3 space-y-3 border-t border-border-default\">\n                    <div className=\"space-y-2\">\n                      {[\n                        {\n                          label: tr('agentsPage.installStep1', '1. Install the agent globally'),\n                          // Documented quick install — bun is the platform\n                          // default. See docs.vibecontrols.com/users/installing-the-agent\n                          cmd: 'bun install -g @vibecontrols/agent',\n                        },\n                        {\n                          label: tr(\n                            'agentsPage.installStep2',\n                            '2. Start the agent (prints tunnel URL + API key)'\n                          ),\n                          cmd: 'vibe start',\n                        },\n                      ].map((step) => (\n                        <div key={step.cmd}>\n                          <p className=\"text-xs text-text-secondary mb-1\">{step.label}</p>\n                          <div className=\"flex items-center gap-2 bg-bg-sunken rounded-md px-3 py-1.5 font-mono text-xs text-text-primary\">\n                            <Terminal\n                              className=\"size-3 text-text-muted flex-shrink-0\"\n                              aria-hidden=\"true\"\n                            />\n                            <code className=\"flex-1 min-w-0 break-words\">{step.cmd}</code>\n                            {renderCopyButton(step.cmd, step.cmd)}\n                          </div>\n                        </div>\n                      ))}\n                      <p className=\"text-xs text-text-secondary pt-1\">\n                        {tr(\n                          'agentsPage.installHint',\n                          'After running vibe start, copy the printed tunnel URL and API key into the fields above.'\n                        )}\n                      </p>\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {/* Agent Name — visible upfront so operators see (and can\n                  override) the autogen before validation. The autofill\n                  chain still runs in the background: picking a target\n                  pulls in its name; clicking Validate falls back to the\n                  probed hostname when the user hasn't typed anything.\n                  The svc dedupes inside the workspace via\n                  resolveUniqueAgentName(), so suffixes like `-2` may\n                  still get appended at submit time even when the user\n                  picked their own string. */}\n              <div>\n                <label\n                  htmlFor={nameField.id}\n                  className=\"mb-1.5 block text-sm font-medium text-text-primary\"\n                >\n                  {tr('agentsPage.name', 'Name')}\n                </label>\n                <Input\n                  {...nameField.inputProps}\n                  type=\"text\"\n                  value={name}\n                  onChange={(e) => {\n                    setName(e.target.value);\n                    setNameEdited(true);\n                  }}\n                  placeholder={tr(\n                    'agentsPage.namePlaceholderUpfront',\n                    'My laptop, prod jump-host, …'\n                  )}\n                  className=\"text-base md:text-sm\"\n                  data-testid=\"agent-form-name-input\"\n                />\n                <p id={nameField.hintId} className=\"mt-1.5 text-xs text-text-muted\">\n                  {tr(\n                    'agentsPage.nameHint',\n                    \"How this agent shows up in the UI. Defaults to the target's name (or the machine's hostname after Validate) — leave blank to accept the autogen.\"\n                  )}\n                </p>\n              </div>\n\n              {/* Target Selection — with inline creation */}\n              <div>\n                <span className=\"mb-1.5 block text-sm font-medium text-text-primary\">\n                  {tr('agentsPage.target', 'Target')}\n                  {requiredMark}\n                </span>\n\n                {hasTargets && !showInlineTarget && (\n                  <>\n                    <SearchableSelect\n                      placeholder={tr('agentsPage.selectTarget', 'Select a target...')}\n                      searchPlaceholder={tr('agentsPage.searchTargets', 'Search targets...')}\n                      options={(targets ?? []).map(\n                        (tgt): SearchableSelectOption => ({\n                          value: tgt.id,\n                          label: tgt.name,\n                          description: `${tgt.type}${tgt.status ? ` · ${tgt.status}` : ''}`,\n                        })\n                      )}\n                      value={selectedTargetId}\n                      onChange={setSelectedTargetId}\n                      clearable\n                    />\n                    <p className=\"mt-1.5 text-xs text-text-muted\">\n                      {tr(\n                        'agentsPage.targetDescription',\n                        'The target machine this agent will be installed on.'\n                      )}{' '}\n                      {onCreateTarget && (\n                        <button\n                          type=\"button\"\n                          onClick={() => {\n                            setShowInlineTarget(true);\n                            setInlineTargetName(name.trim() || '');\n                          }}\n                          className=\"text-text-link hover:text-text-linkHover hover:underline inline-flex items-center gap-1 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n                        >\n                          <Plus className=\"size-3\" aria-hidden=\"true\" />\n                          {tr('agentsPage.createNewTarget', 'Create a new target')}\n                        </button>\n                      )}\n                    </p>\n                  </>\n                )}\n\n                {/* Empty state prompt (no targets exist yet) */}\n                {!hasTargets && !targetsLoading && onCreateTarget && !showInlineTarget && (\n                  <div className=\"p-3 bg-bg-sunken border border-border-default rounded-lg\">\n                    <p className=\"text-sm text-text-secondary mb-2\">\n                      {tr(\n                        'agentsPage.noTargetsInlinePrompt',\n                        \"You don't have any targets yet. Create one now to install this agent on it.\"\n                      )}\n                    </p>\n                    <Button\n                      type=\"button\"\n                      size=\"sm\"\n                      onClick={() => {\n                        setShowInlineTarget(true);\n                        setInlineTargetName(name.trim() || '');\n                      }}\n                    >\n                      <Plus className=\"size-4\" aria-hidden=\"true\" />\n                      {tr('agentsPage.createFirstTarget', 'Create first target')}\n                    </Button>\n                  </div>\n                )}\n\n                {/* Inline creation form */}\n                {showInlineTarget && onCreateTarget && (\n                  <div className=\"p-3 bg-bg-sunken border border-border-default rounded-lg space-y-2\">\n                    <p className=\"text-xs font-medium text-text-secondary\">\n                      {tr(\n                        'agentsPage.newDirectTarget',\n                        'New target (Direct — you can change the type later)'\n                      )}\n                    </p>\n                    <div>\n                      <label\n                        htmlFor={inlineTargetField.id}\n                        className=\"mb-1.5 block text-sm font-medium text-text-primary\"\n                      >\n                        {tr('agentsPage.targetName', 'Target name')}\n                      </label>\n                      <Input\n                        {...inlineTargetField.inputProps}\n                        type=\"text\"\n                        value={inlineTargetName}\n                        onChange={(e) => setInlineTargetName(e.target.value)}\n                        placeholder={tr('agentsPage.targetName', 'Target name')}\n                        className=\"text-base md:text-sm\"\n                        onKeyDown={(e) => {\n                          if (e.key === 'Enter') {\n                            e.preventDefault();\n                            void handleInlineCreateTarget();\n                          }\n                        }}\n                      />\n                      {inlineTargetError && (\n                        <p\n                          id={inlineTargetField.errorId}\n                          role=\"alert\"\n                          className=\"mt-1.5 text-sm text-status-error-text\"\n                        >\n                          {inlineTargetError}\n                        </p>\n                      )}\n                    </div>\n                    <div className=\"flex flex-wrap items-center gap-2\">\n                      <Button\n                        type=\"button\"\n                        size=\"sm\"\n                        onClick={() => void handleInlineCreateTarget()}\n                        disabled={!inlineTargetName.trim() || creatingTarget}\n                        aria-busy={creatingTarget}\n                      >\n                        {creatingTarget ? (\n                          <Loader2 className=\"size-3.5 animate-spin\" aria-hidden=\"true\" />\n                        ) : (\n                          <Check className=\"size-3.5\" aria-hidden=\"true\" />\n                        )}\n                        {tr('agentsPage.create', 'Create')}\n                      </Button>\n                      <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={() => {\n                          setShowInlineTarget(false);\n                          setInlineTargetName('');\n                          setInlineTargetError(null);\n                        }}\n                      >\n                        {tr('agentsPage.cancel', 'Cancel')}\n                      </Button>\n                    </div>\n                  </div>\n                )}\n\n                {/* Loading placeholder */}\n                {targetsLoading && !hasTargets && (\n                  <div\n                    role=\"status\"\n                    className=\"p-3 bg-bg-sunken border border-border-default rounded-lg flex items-center gap-2 text-sm text-text-secondary\"\n                  >\n                    <Loader2 className=\"size-4 animate-spin\" aria-hidden=\"true\" />\n                    {tr('agentsPage.loadingTargets', 'Loading targets...')}\n                  </div>\n                )}\n              </div>\n\n              {/* API/Tunnel URL */}\n              <div>\n                <label\n                  htmlFor={tunnelField.id}\n                  className=\"mb-1.5 block text-sm font-medium text-text-primary\"\n                >\n                  {tr('agentsPage.apiTunnelUrl', 'API / Tunnel URL')}\n                  {requiredMark}\n                </label>\n                <Input\n                  {...tunnelField.inputProps}\n                  type=\"url\"\n                  value={tunnelUrl}\n                  onChange={(e) => setTunnelUrl(e.target.value)}\n                  placeholder=\"https://your-tunnel.trycloudflare.com\"\n                  aria-required=\"true\"\n                  className=\"text-base md:text-sm font-mono\"\n                />\n                <p id={tunnelField.hintId} className=\"mt-1.5 text-xs text-text-muted\">\n                  {tr(\n                    'agentsPage.tunnelUrlHint',\n                    \"The agent's tunnel URL or local API URL (e.g. http://localhost:3005)\"\n                  )}\n                </p>\n              </div>\n\n              {/* Agent API Key */}\n              <div>\n                <label\n                  htmlFor={apiKeyField.id}\n                  className=\"mb-1.5 block text-sm font-medium text-text-primary\"\n                >\n                  {tr('agentsPage.agentApiKey', 'Agent API Key')}\n                  {requiredMark}\n                </label>\n                <div className=\"relative\">\n                  <Input\n                    {...apiKeyField.inputProps}\n                    type={showApiKey ? 'text' : 'password'}\n                    value={agentApiKey}\n                    onChange={(e) => setAgentApiKey(e.target.value)}\n                    placeholder=\"vcak_...\"\n                    aria-required=\"true\"\n                    className=\"pr-10 text-base md:text-sm font-mono\"\n                  />\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setShowApiKey(!showApiKey)}\n                    aria-label={\n                      showApiKey\n                        ? tr('agentsPage.hideApiKey', 'Hide API key')\n                        : tr('agentsPage.showApiKey', 'Show API key')\n                    }\n                    aria-pressed={showApiKey}\n                    className=\"absolute right-1 top-1/2 -translate-y-1/2\"\n                  >\n                    {showApiKey ? (\n                      <EyeOff className=\"size-4 text-text-secondary\" aria-hidden=\"true\" />\n                    ) : (\n                      <Eye className=\"size-4 text-text-secondary\" aria-hidden=\"true\" />\n                    )}\n                  </Button>\n                </div>\n                <p id={apiKeyField.hintId} className=\"mt-1.5 text-xs text-text-muted\">\n                  {tr('agentsPage.apiKeyHint', 'Run')}{' '}\n                  <code className=\"bg-bg-sunken px-1 rounded\">vibe key</code>{' '}\n                  {tr(\n                    'agentsPage.apiKeyHintSuffix',\n                    'on the agent to get this. Changes on restart.'\n                  )}\n                </p>\n              </div>\n\n              {/* Advanced options — per-daemon profile name (Phase 5B) */}\n              <div className=\"border border-border-default rounded-lg overflow-hidden\">\n                <button\n                  type=\"button\"\n                  onClick={() => setShowAdvanced((v) => !v)}\n                  className=\"w-full flex items-center justify-between px-4 py-2.5 bg-bg-sunken hover:bg-bg-sunken/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n                  aria-expanded={showAdvanced}\n                  data-testid=\"agent-form-advanced-toggle\"\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <Settings2 className=\"size-4 text-text-secondary\" aria-hidden=\"true\" />\n                    <span className=\"text-sm font-medium text-text-primary\">\n                      {tr('agentsPage.advancedOptions', 'Advanced options')}\n                    </span>\n                  </div>\n                  <ChevronDown\n                    aria-hidden=\"true\"\n                    className={`size-4 text-text-secondary transition-transform ${showAdvanced ? 'rotate-180' : ''}`}\n                  />\n                </button>\n                {showAdvanced && (\n                  <div className=\"px-4 py-3 space-y-3 border-t border-border-default\">\n                    <div>\n                      <label\n                        htmlFor={profileField.id}\n                        className=\"mb-1.5 block text-sm font-medium text-text-primary\"\n                      >\n                        {tr('agentsPage.profileName', 'Profile name')}\n                      </label>\n                      <Input\n                        {...profileField.inputProps}\n                        type=\"text\"\n                        value={profile}\n                        onChange={(e) => setProfile(e.target.value)}\n                        placeholder=\"default\"\n                        className=\"text-base md:text-sm font-mono\"\n                        data-testid=\"agent-form-profile-input\"\n                      />\n                      <p id={profileField.hintId} className=\"mt-1.5 text-xs text-text-muted\">\n                        {tr(\n                          'agentsPage.profileNameHint',\n                          'Each profile runs an isolated CLI on the daemon. Leave as \"default\" unless you want this agent to host multiple parallel profiles.'\n                        )}\n                      </p>\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {extraSection && (\n                <div className=\"border-t border-border-default pt-4 mt-4\">{extraSection}</div>\n              )}\n\n              {/* Actions */}\n              <ResponsiveDialogFooter className=\"pt-2\">\n                <Button type=\"button\" variant=\"outline\" onClick={onCancel}>\n                  {tr('agentsPage.cancel', 'Cancel')}\n                </Button>\n                <Button\n                  type=\"button\"\n                  disabled={!canProceedToValidate}\n                  onClick={() => {\n                    setStage('validate');\n                    validateAgent();\n                  }}\n                >\n                  {tr('agentsPage.nextValidate', 'Next: Validate')}\n                  <ChevronRight className=\"size-4\" aria-hidden=\"true\" />\n                </Button>\n              </ResponsiveDialogFooter>\n            </div>\n          ) : (\n            <div className=\"space-y-4\">\n              {/* Validation Results */}\n              <div className=\"space-y-3\">\n                {/* Health Check */}\n                <div\n                  role=\"status\"\n                  className={`flex items-center gap-3 p-3 rounded-lg border ${\n                    healthResult === null\n                      ? 'border-border-default bg-bg-sunken'\n                      : healthResult.ok\n                        ? 'border-status-success-border bg-status-success-bg-subtle'\n                        : 'border-status-error-border bg-status-error-bg-subtle'\n                  }`}\n                >\n                  {validating && !healthResult ? (\n                    <Loader2\n                      className=\"size-5 text-text-secondary animate-spin\"\n                      aria-hidden=\"true\"\n                    />\n                  ) : healthResult?.ok ? (\n                    <CheckCircle2 className=\"size-5 text-status-success-text\" aria-hidden=\"true\" />\n                  ) : healthResult ? (\n                    <XCircle className=\"size-5 text-status-error-text\" aria-hidden=\"true\" />\n                  ) : (\n                    <div\n                      className=\"size-5 rounded-full border-2 border-border-default\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <div className=\"flex-1 min-w-0\">\n                    <p className=\"text-sm font-medium text-text-primary\">\n                      {tr('agentsPage.healthCheck', 'Health Check')}\n                    </p>\n                    {healthResult?.ok && healthResult.data && (\n                      <p className=\"text-xs text-text-secondary break-words\">\n                        Status: {healthResult.data.status} | Version: {healthResult.data.version} |\n                        Uptime: {Math.round(healthResult.data.uptime)}s\n                      </p>\n                    )}\n                    {healthResult && !healthResult.ok && (\n                      <p className=\"text-xs text-status-error-text break-words\">\n                        {healthResult.error}\n                      </p>\n                    )}\n                  </div>\n                </div>\n\n                {/* API Access Check */}\n                <div\n                  role=\"status\"\n                  className={`flex items-center gap-3 p-3 rounded-lg border ${\n                    identityResult === null\n                      ? 'border-border-default bg-bg-sunken'\n                      : identityResult.ok\n                        ? 'border-status-success-border bg-status-success-bg-subtle'\n                        : 'border-status-error-border bg-status-error-bg-subtle'\n                  }`}\n                >\n                  {validating && !identityResult ? (\n                    <Loader2\n                      className=\"size-5 text-text-secondary animate-spin\"\n                      aria-hidden=\"true\"\n                    />\n                  ) : identityResult?.ok ? (\n                    <CheckCircle2 className=\"size-5 text-status-success-text\" aria-hidden=\"true\" />\n                  ) : identityResult ? (\n                    <XCircle className=\"size-5 text-status-error-text\" aria-hidden=\"true\" />\n                  ) : (\n                    <div\n                      className=\"size-5 rounded-full border-2 border-border-default\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  <div className=\"flex-1 min-w-0\">\n                    <p className=\"text-sm font-medium text-text-primary\">\n                      {tr('agentsPage.apiAccess', 'API Access')}\n                    </p>\n                    {identityResult?.ok && identityResult.data && (\n                      <p className=\"text-xs text-text-secondary break-words\">\n                        Host: {identityResult.data.hostname} | {identityResult.data.platform} /{' '}\n                        {identityResult.data.arch}\n                      </p>\n                    )}\n                    {identityResult && !identityResult.ok && (\n                      <p className=\"text-xs text-status-error-text break-words\">\n                        {identityResult.error}\n                      </p>\n                    )}\n                  </div>\n                </div>\n              </div>\n\n              {/* Retry button */}\n              {!validating && (!healthResult?.ok || !identityResult?.ok) && (\n                <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={validateAgent}>\n                  <RefreshCw className=\"size-3.5\" aria-hidden=\"true\" />\n                  {tr('agentsPage.retryValidation', 'Retry validation')}\n                </Button>\n              )}\n\n              {/* Detected info (editable overrides) — Name lives upfront\n                  now; this section shows the validate-time fields only. */}\n              {isValidationPassed && (\n                <div className=\"space-y-3 pt-2\">\n                  <p className=\"text-sm font-medium text-text-primary\">\n                    {tr('agentsPage.detectedAgentInfo', 'Detected Agent Info')}\n                  </p>\n\n                  <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n                    <div>\n                      <label\n                        htmlFor={platformField.id}\n                        className=\"mb-1.5 block text-sm font-medium text-text-primary\"\n                      >\n                        {tr('agentsPage.platform', 'Platform')}\n                      </label>\n                      <Select value={detectedPlatform} onValueChange={setDetectedPlatform}>\n                        <SelectTrigger id={platformField.id} className=\"text-base md:text-sm\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"linux\">Linux</SelectItem>\n                          <SelectItem value=\"darwin\">macOS</SelectItem>\n                          <SelectItem value=\"windows\">Windows</SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                    <div>\n                      <label\n                        htmlFor={archField.id}\n                        className=\"mb-1.5 block text-sm font-medium text-text-primary\"\n                      >\n                        {tr('agentsPage.architecture', 'Architecture')}\n                      </label>\n                      <Select value={detectedArch} onValueChange={setDetectedArch}>\n                        <SelectTrigger id={archField.id} className=\"text-base md:text-sm\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"x86_64\">x86_64</SelectItem>\n                          <SelectItem value=\"arm64\">arm64</SelectItem>\n                          <SelectItem value=\"aarch64\">aarch64</SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </div>\n              )}\n\n              {/* Creation error */}\n              {createError && (\n                <div\n                  role=\"alert\"\n                  className=\"p-3 bg-status-error-bg-subtle border border-status-error-border rounded-lg\"\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <XCircle\n                      className=\"size-5 text-status-error-text flex-shrink-0\"\n                      aria-hidden=\"true\"\n                    />\n                    <p className=\"text-sm text-status-error-text break-words\">{createError}</p>\n                  </div>\n                  <div className=\"flex flex-wrap items-center gap-2 mt-3\">\n                    <Button\n                      type=\"button\"\n                      variant=\"outline\"\n                      size=\"sm\"\n                      onClick={() => {\n                        setCreateError(null);\n                        // Reset form to allow entering different credentials\n                        setStage('details');\n                        setTunnelUrl('');\n                        setAgentApiKey('');\n                        setHealthResult(null);\n                        setIdentityResult(null);\n                      }}\n                    >\n                      <RefreshCw className=\"size-3.5\" aria-hidden=\"true\" />\n                      {tr('agentsPage.tryDifferentAgent', 'Try Different Agent')}\n                    </Button>\n                    <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n                      {tr('agentsPage.close', 'Close')}\n                    </Button>\n                  </div>\n                </div>\n              )}\n\n              {/* Actions */}\n              <ResponsiveDialogFooter className=\"pt-2\">\n                <Button type=\"button\" variant=\"outline\" onClick={() => setStage('details')}>\n                  <ChevronLeft className=\"size-4\" aria-hidden=\"true\" />\n                  {tr('agentsPage.back', 'Back')}\n                </Button>\n                <Button\n                  type=\"button\"\n                  disabled={!isValidationPassed || isLoading || validating}\n                  onClick={handleCreateAgent}\n                  aria-busy={isLoading}\n                >\n                  {isLoading ? (\n                    <>\n                      <Loader2 className=\"size-4 animate-spin\" aria-hidden=\"true\" />\n                      {tr('agentsPage.adding', 'Adding...')}\n                    </>\n                  ) : (\n                    <>\n                      {tr('agentsPage.addAgent', 'Add Agent')}\n                      <ChevronRight className=\"size-4\" aria-hidden=\"true\" />\n                    </>\n                  )}\n                </Button>\n              </ResponsiveDialogFooter>\n            </div>\n          )}\n        </MotionTabPanel>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n"],"mappings":"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"}

package/dist/components/shared/AgentSetupBanner.js

@@ -10,7 +10,7 @@ import { Button as _ } from "@burdenoff/fe-libs/ui";
 //#region src/components/shared/AgentSetupBanner.tsx
 var v = "https://www.npmjs.com/package/@vibecontrols/agent";
 function y() {
-	return typeof window > "u" ? "curl -fsSL https://app.vibecontrols.com/install | bash && hash -r 2>/dev/null" : `curl -fsSL https://${window.__VIBECONTROLS_HOST__ ?? window.location.host}/install | bash && hash -r 2>/dev/null`;
+	return "bun install -g @vibecontrols/agent";
 }
 function b({ variant: b = "compact", dismissible: x = !0, dismissKey: S = "vibecontrols-setup-banner-dismissed", className: C = "" }) {
 	let w = e(), T = t(), E = i(() => y(), []), [D, O] = a(!1), [k, A] = a(() => {
@@ -137,7 +137,7 @@ function b({ variant: b = "compact", dismissible: x = !0, dismissKey: S = "vibec
 						children: w("vibecontrols.shared.agentSetupBanner.title", "Get Started with VibeControls Agent")
 					}), /* @__PURE__ */ h("p", {
 						className: "text-sm text-text-secondary mt-0.5",
-						children: w("vibecontrols.shared.agentSetupBanner.description", "Install the CLI on any machine you want to manage. The only prerequisite is bun — the curl script installs it for you.")
+						children: w("vibecontrols.shared.agentSetupBanner.description", "Install the agent globally on any machine you want to manage. Bun (or Node >= 18 for npm) is the only prerequisite.")
 					})] })]
 				}),
 				/* @__PURE__ */ h("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"AgentSetupBanner.js","names":[],"sources":["../../../src/components/shared/AgentSetupBanner.tsx"],"sourcesContent":["import { useState, useCallback, useMemo } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Download, Copy, Check, ExternalLink, X, Terminal } from 'lucide-react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { getProfileScopedKey } from '@burdenoff/fe-libs/shared/utils';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { InstallTabs } from './InstallTabs';\n\ninterface AgentSetupBannerProps {\n  /** Compact mode shows a single-line banner; full mode shows a multi-step card */\n  variant?: 'compact' | 'full';\n  /** Allow the banner to be dismissed */\n  dismissible?: boolean;\n  /** Storage key for dismissed state */\n  dismissKey?: string;\n  /** Additional CSS class names */\n  className?: string;\n}\n\nconst NPM_URL = 'https://www.npmjs.com/package/@vibecontrols/agent';\n\n/**\n * Build the quick-install one-liner using the live host so the command shown\n * to the user reflects the environment they are actually on (local dev,\n * alpha, prod). InstallTabs uses the same `resolveHost()` shape — keep them\n * aligned by reading from `window.__VIBECONTROLS_HOST__` first, then\n * falling back to `window.location.host`.\n */\nfunction getQuickInstallCommand(): string {\n  // Trailing `&& hash -r` runs in the user's shell to flush a stale cached\n  // `vibe` path so the new binary resolves immediately (the install script also\n  // rebinds it on disk; this is belt-and-braces, harmless when nothing stale).\n  if (typeof window === 'undefined') {\n    return 'curl -fsSL https://app.vibecontrols.com/install | bash && hash -r 2>/dev/null';\n  }\n  const injected = (window as { __VIBECONTROLS_HOST__?: string }).__VIBECONTROLS_HOST__;\n  const host = injected ?? window.location.host;\n  return `curl -fsSL https://${host}/install | bash && hash -r 2>/dev/null`;\n}\n\n/**\n * Reusable banner/card prompting users to install the VibeControls Agent CLI.\n * Used across multiple pages (Overview, Agents, Sessions, Tunnels, SSH, etc.)\n *\n * The full variant mirrors the Getting Started page's tabbed install widget\n * (`InstallTabs`) so users see a single consistent install flow wherever\n * the banner shows up.\n */\nexport function AgentSetupBanner({\n  variant = 'compact',\n  dismissible = true,\n  dismissKey = 'vibecontrols-setup-banner-dismissed',\n  className = '',\n}: AgentSetupBannerProps) {\n  const tr = useTr();\n  const handleNavigate = useVibeNavigate();\n  const quickInstall = useMemo(() => getQuickInstallCommand(), []);\n  const [copied, setCopied] = useState(false);\n  const [dismissed, setDismissed] = useState(() => {\n    try {\n      return localStorage.getItem(getProfileScopedKey(dismissKey)) === 'true';\n    } catch {\n      return false;\n    }\n  });\n\n  const handleCopy = useCallback(async (text: string) => {\n    try {\n      await navigator.clipboard.writeText(text);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch {\n      const el = document.createElement('textarea');\n      el.value = text;\n      document.body.appendChild(el);\n      el.select();\n      document.execCommand('copy');\n      document.body.removeChild(el);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    }\n  }, []);\n\n  const handleDismiss = useCallback(() => {\n    setDismissed(true);\n    try {\n      localStorage.setItem(getProfileScopedKey(dismissKey), 'true');\n    } catch {\n      // ignore\n    }\n  }, [dismissKey]);\n\n  const bannerTransition = { duration: 0.3, ease: [0.4, 0, 0.2, 1] as const };\n\n  // ─── Compact variant: single-line info banner ─────────────────────────\n  if (variant === 'compact') {\n    return (\n      <AnimatePresence>\n        {!dismissed && (\n          <motion.div\n            initial={{ opacity: 0, y: -8, height: 0 }}\n            animate={{ opacity: 1, y: 0, height: 'auto' }}\n            exit={{ opacity: 0, y: -8, height: 0 }}\n            transition={bannerTransition}\n            className={`relative flex flex-col items-start gap-3 px-4 py-3 bg-bg-elevated border border-border-subtle rounded-card sm:flex-row sm:items-center ${className}`}\n          >\n            <Download className=\"size-5 text-accent-purple flex-shrink-0\" />\n            <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1\">\n              <span className=\"text-sm font-medium text-text-primary\">\n                {tr(\n                  'vibecontrols.shared.agentSetupBanner.installPrompt',\n                  'Install the VibeControls Agent CLI to get started'\n                )}\n              </span>\n              <code\n                className=\"inline-flex min-w-0 max-w-full items-center gap-1.5 rounded border border-border-subtle bg-bg-sunken px-2.5 py-1 font-mono text-xs text-text-primary transition-colors hover:bg-bg-elevated cursor-pointer\"\n                onClick={() => handleCopy(quickInstall)}\n                title={tr('vibecontrols.shared.agentSetupBanner.clickToCopy', 'Click to copy')}\n              >\n                <Terminal className=\"size-3\" />\n                <span className=\"min-w-0 break-all\">{quickInstall}</span>\n                {copied ? (\n                  <Check className=\"size-3 text-status-success-text\" />\n                ) : (\n                  <Copy className=\"size-3 text-text-muted\" />\n                )}\n              </code>\n              <button\n                type=\"button\"\n                onClick={() => handleNavigate('/getting-started')}\n                className=\"text-sm text-accent-purple hover:underline flex items-center gap-1\"\n              >\n                {tr('vibecontrols.shared.agentSetupBanner.setupGuide', 'Setup guide')}{' '}\n                <ExternalLink className=\"size-3\" />\n              </button>\n            </div>\n            {dismissible && (\n              <button\n                type=\"button\"\n                onClick={handleDismiss}\n                className=\"flex-shrink-0 p-1 text-text-muted hover:text-text-secondary rounded transition-colors\"\n                title={tr('vibecontrols.shared.agentSetupBanner.dismiss', 'Dismiss')}\n              >\n                <X className=\"size-4\" />\n              </button>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    );\n  }\n\n  // ─── Full variant: tabbed install card (mirrors Getting Started) ──────\n  return (\n    <AnimatePresence>\n      {!dismissed && (\n        <motion.div\n          initial={{ opacity: 0, y: -8, height: 0 }}\n          animate={{ opacity: 1, y: 0, height: 'auto' }}\n          exit={{ opacity: 0, y: -8, height: 0 }}\n          transition={bannerTransition}\n          className={`relative border border-border-subtle bg-bg-elevated rounded-card overflow-hidden ${className}`}\n        >\n          {dismissible && (\n            <button\n              type=\"button\"\n              onClick={handleDismiss}\n              className=\"absolute top-3 right-3 p-1 text-text-muted hover:text-text-secondary rounded transition-colors z-10\"\n              title={tr('vibecontrols.shared.agentSetupBanner.dismiss', 'Dismiss')}\n            >\n              <X className=\"size-4\" />\n            </button>\n          )}\n\n          <div className=\"p-5 sm:p-6\">\n            <div className=\"flex items-start gap-3 mb-4\">\n              <div className=\"flex-shrink-0 size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center\">\n                <Download className=\"size-5 text-accent-purple\" />\n              </div>\n              <div>\n                <h3 className=\"text-base font-semibold text-text-primary\">\n                  {tr(\n                    'vibecontrols.shared.agentSetupBanner.title',\n                    'Get Started with VibeControls Agent'\n                  )}\n                </h3>\n                <p className=\"text-sm text-text-secondary mt-0.5\">\n                  {tr(\n                    'vibecontrols.shared.agentSetupBanner.description',\n                    'Install the CLI on any machine you want to manage. The only prerequisite is bun — the curl script installs it for you.'\n                  )}\n                </p>\n              </div>\n            </div>\n\n            {/* Tabbed install widget mirrors the Getting Started page */}\n            <div className=\"ml-0 sm:ml-13\">\n              <InstallTabs compact />\n            </div>\n\n            {/* Actions */}\n            <div className=\"flex flex-wrap items-center gap-3 mt-5 ml-0 sm:ml-13\">\n              <Button\n                variant=\"default\"\n                onClick={() => handleNavigate('/getting-started')}\n                className=\"gap-2\"\n              >\n                {tr(\n                  'vibecontrols.shared.agentSetupBanner.viewFullSetupGuide',\n                  'View full setup guide'\n                )}\n                <ExternalLink className=\"size-3.5\" />\n              </Button>\n              <Button variant=\"outline\" asChild className=\"gap-2\">\n                <a href={NPM_URL} target=\"_blank\" rel=\"noopener noreferrer\">\n                  {tr('vibecontrols.shared.agentSetupBanner.npmPackage', 'npm package')}\n                  <ExternalLink className=\"size-3.5\" />\n                </a>\n              </Button>\n            </div>\n          </div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AgentSetupBanner.js","names":[],"sources":["../../../src/components/shared/AgentSetupBanner.tsx"],"sourcesContent":["import { useState, useCallback, useMemo } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Download, Copy, Check, ExternalLink, X, Terminal } from 'lucide-react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { getProfileScopedKey } from '@burdenoff/fe-libs/shared/utils';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { InstallTabs } from './InstallTabs';\n\ninterface AgentSetupBannerProps {\n  /** Compact mode shows a single-line banner; full mode shows a multi-step card */\n  variant?: 'compact' | 'full';\n  /** Allow the banner to be dismissed */\n  dismissible?: boolean;\n  /** Storage key for dismissed state */\n  dismissKey?: string;\n  /** Additional CSS class names */\n  className?: string;\n}\n\nconst NPM_URL = 'https://www.npmjs.com/package/@vibecontrols/agent';\n\n/**\n * The documented quick-install command — install the agent globally with bun\n * (the platform default). Mirrors `InstallTabs`' recommended method so the\n * banner and the Getting Started guide stay in sync.\n *\n * Official docs: https://docs.vibecontrols.com/users/installing-the-agent\n */\nfunction getQuickInstallCommand(): string {\n  return 'bun install -g @vibecontrols/agent';\n}\n\n/**\n * Reusable banner/card prompting users to install the VibeControls Agent CLI.\n * Used across multiple pages (Overview, Agents, Sessions, Tunnels, SSH, etc.)\n *\n * The full variant mirrors the Getting Started page's tabbed install widget\n * (`InstallTabs`) so users see a single consistent install flow wherever\n * the banner shows up.\n */\nexport function AgentSetupBanner({\n  variant = 'compact',\n  dismissible = true,\n  dismissKey = 'vibecontrols-setup-banner-dismissed',\n  className = '',\n}: AgentSetupBannerProps) {\n  const tr = useTr();\n  const handleNavigate = useVibeNavigate();\n  const quickInstall = useMemo(() => getQuickInstallCommand(), []);\n  const [copied, setCopied] = useState(false);\n  const [dismissed, setDismissed] = useState(() => {\n    try {\n      return localStorage.getItem(getProfileScopedKey(dismissKey)) === 'true';\n    } catch {\n      return false;\n    }\n  });\n\n  const handleCopy = useCallback(async (text: string) => {\n    try {\n      await navigator.clipboard.writeText(text);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch {\n      const el = document.createElement('textarea');\n      el.value = text;\n      document.body.appendChild(el);\n      el.select();\n      document.execCommand('copy');\n      document.body.removeChild(el);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    }\n  }, []);\n\n  const handleDismiss = useCallback(() => {\n    setDismissed(true);\n    try {\n      localStorage.setItem(getProfileScopedKey(dismissKey), 'true');\n    } catch {\n      // ignore\n    }\n  }, [dismissKey]);\n\n  const bannerTransition = { duration: 0.3, ease: [0.4, 0, 0.2, 1] as const };\n\n  // ─── Compact variant: single-line info banner ─────────────────────────\n  if (variant === 'compact') {\n    return (\n      <AnimatePresence>\n        {!dismissed && (\n          <motion.div\n            initial={{ opacity: 0, y: -8, height: 0 }}\n            animate={{ opacity: 1, y: 0, height: 'auto' }}\n            exit={{ opacity: 0, y: -8, height: 0 }}\n            transition={bannerTransition}\n            className={`relative flex flex-col items-start gap-3 px-4 py-3 bg-bg-elevated border border-border-subtle rounded-card sm:flex-row sm:items-center ${className}`}\n          >\n            <Download className=\"size-5 text-accent-purple flex-shrink-0\" />\n            <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1\">\n              <span className=\"text-sm font-medium text-text-primary\">\n                {tr(\n                  'vibecontrols.shared.agentSetupBanner.installPrompt',\n                  'Install the VibeControls Agent CLI to get started'\n                )}\n              </span>\n              <code\n                className=\"inline-flex min-w-0 max-w-full items-center gap-1.5 rounded border border-border-subtle bg-bg-sunken px-2.5 py-1 font-mono text-xs text-text-primary transition-colors hover:bg-bg-elevated cursor-pointer\"\n                onClick={() => handleCopy(quickInstall)}\n                title={tr('vibecontrols.shared.agentSetupBanner.clickToCopy', 'Click to copy')}\n              >\n                <Terminal className=\"size-3\" />\n                <span className=\"min-w-0 break-all\">{quickInstall}</span>\n                {copied ? (\n                  <Check className=\"size-3 text-status-success-text\" />\n                ) : (\n                  <Copy className=\"size-3 text-text-muted\" />\n                )}\n              </code>\n              <button\n                type=\"button\"\n                onClick={() => handleNavigate('/getting-started')}\n                className=\"text-sm text-accent-purple hover:underline flex items-center gap-1\"\n              >\n                {tr('vibecontrols.shared.agentSetupBanner.setupGuide', 'Setup guide')}{' '}\n                <ExternalLink className=\"size-3\" />\n              </button>\n            </div>\n            {dismissible && (\n              <button\n                type=\"button\"\n                onClick={handleDismiss}\n                className=\"flex-shrink-0 p-1 text-text-muted hover:text-text-secondary rounded transition-colors\"\n                title={tr('vibecontrols.shared.agentSetupBanner.dismiss', 'Dismiss')}\n              >\n                <X className=\"size-4\" />\n              </button>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    );\n  }\n\n  // ─── Full variant: tabbed install card (mirrors Getting Started) ──────\n  return (\n    <AnimatePresence>\n      {!dismissed && (\n        <motion.div\n          initial={{ opacity: 0, y: -8, height: 0 }}\n          animate={{ opacity: 1, y: 0, height: 'auto' }}\n          exit={{ opacity: 0, y: -8, height: 0 }}\n          transition={bannerTransition}\n          className={`relative border border-border-subtle bg-bg-elevated rounded-card overflow-hidden ${className}`}\n        >\n          {dismissible && (\n            <button\n              type=\"button\"\n              onClick={handleDismiss}\n              className=\"absolute top-3 right-3 p-1 text-text-muted hover:text-text-secondary rounded transition-colors z-10\"\n              title={tr('vibecontrols.shared.agentSetupBanner.dismiss', 'Dismiss')}\n            >\n              <X className=\"size-4\" />\n            </button>\n          )}\n\n          <div className=\"p-5 sm:p-6\">\n            <div className=\"flex items-start gap-3 mb-4\">\n              <div className=\"flex-shrink-0 size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center\">\n                <Download className=\"size-5 text-accent-purple\" />\n              </div>\n              <div>\n                <h3 className=\"text-base font-semibold text-text-primary\">\n                  {tr(\n                    'vibecontrols.shared.agentSetupBanner.title',\n                    'Get Started with VibeControls Agent'\n                  )}\n                </h3>\n                <p className=\"text-sm text-text-secondary mt-0.5\">\n                  {tr(\n                    'vibecontrols.shared.agentSetupBanner.description',\n                    'Install the agent globally on any machine you want to manage. Bun (or Node >= 18 for npm) is the only prerequisite.'\n                  )}\n                </p>\n              </div>\n            </div>\n\n            {/* Tabbed install widget mirrors the Getting Started page */}\n            <div className=\"ml-0 sm:ml-13\">\n              <InstallTabs compact />\n            </div>\n\n            {/* Actions */}\n            <div className=\"flex flex-wrap items-center gap-3 mt-5 ml-0 sm:ml-13\">\n              <Button\n                variant=\"default\"\n                onClick={() => handleNavigate('/getting-started')}\n                className=\"gap-2\"\n              >\n                {tr(\n                  'vibecontrols.shared.agentSetupBanner.viewFullSetupGuide',\n                  'View full setup guide'\n                )}\n                <ExternalLink className=\"size-3.5\" />\n              </Button>\n              <Button variant=\"outline\" asChild className=\"gap-2\">\n                <a href={NPM_URL} target=\"_blank\" rel=\"noopener noreferrer\">\n                  {tr('vibecontrols.shared.agentSetupBanner.npmPackage', 'npm package')}\n                  <ExternalLink className=\"size-3.5\" />\n                </a>\n              </Button>\n            </div>\n          </div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n"],"mappings":"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"}

package/dist/components/shared/InstallTabs.js

@@ -4,10 +4,7 @@ import { Check as i, Copy as a, Terminal as o } from "lucide-react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import { Tabs as l } from "@burdenoff/fe-libs/chrome";
 //#region src/components/shared/InstallTabs.tsx
-function u() {
-	return typeof window > "u" ? "vibecontrols.local.burdenoff.com" : window.__VIBECONTROLS_HOST__ ?? window.location.host;
-}
-function d({ command: n }) {
+function u({ command: n }) {
 	let l = e(), [u, d] = r(!1), f = t(async () => {
 		try {
 			await navigator.clipboard.writeText(n);
@@ -36,75 +33,39 @@ function d({ command: n }) {
 		]
 	});
 }
-function f({ pinnedAgentVersion: t, compact: i = !1 }) {
-	let a = e(), o = u(), [f, p] = r("curl"), [m, h] = r("linux"), g = n(() => [{
-		id: "curl",
-		label: a("vibecontrols.shared.installTabs.curlRecommended", "Curl (Recommended)")
+function d({ pinnedAgentVersion: t, compact: i = !1 }) {
+	let a = e(), [o, d] = r("bun"), f = n(() => [{
+		id: "bun",
+		label: a("vibecontrols.shared.installTabs.bunRecommended", "Bun (Recommended)")
 	}, {
 		id: "npm",
 		label: a("vibecontrols.shared.installTabs.npm", "NPM")
-	}], [a]), _ = n(() => [
-		{
-			id: "linux",
-			label: a("vibecontrols.shared.installTabs.linux", "Linux")
-		},
-		{
-			id: "macos",
-			label: a("vibecontrols.shared.installTabs.macos", "macOS")
-		},
-		{
-			id: "windows",
-			label: a("vibecontrols.shared.installTabs.windows", "Windows")
-		}
-	], [a]), v = n(() => {
+	}], [a]), p = n(() => {
 		let e = t ? `@${t}` : "@latest";
-		return f === "curl" ? m === "windows" ? `powershell -c "irm ${o}/install.ps1 | iex"` : `curl -fsSL https://${o}/install | bash && hash -r 2>/dev/null` : `npm install -g @vibecontrols/agent${e}`;
-	}, [
-		f,
-		m,
-		o,
-		t
-	]), y = f === "curl" ? m === "windows" ? `https://${o}/install.ps1` : `https://${o}/install` : null;
+		return o === "bun" ? `bun install -g @vibecontrols/agent${e}` : `npm install -g @vibecontrols/agent${e}`;
+	}, [o, t]);
 	return /* @__PURE__ */ c("div", {
 		className: i ? "space-y-3" : "space-y-4",
 		children: [
 			/* @__PURE__ */ s(l, {
-				items: g,
-				activeTabId: f,
-				onTabChange: (e) => p(e),
+				items: f,
+				activeTabId: o,
+				onTabChange: (e) => d(e),
 				variant: "underline"
 			}),
-			/* @__PURE__ */ s(l, {
-				items: _,
-				activeTabId: m,
-				onTabChange: (e) => h(e),
-				variant: "pills",
-				size: "sm"
-			}),
-			/* @__PURE__ */ s(d, { command: v }),
-			f === "curl" && y && /* @__PURE__ */ c("p", {
+			/* @__PURE__ */ s(u, { command: p }),
+			o === "bun" && /* @__PURE__ */ s("p", {
 				className: "text-xs text-text-muted",
-				children: [
-					a("vibecontrols.shared.installTabs.curlDescription", "The script installs bun (pinned, v1.3.10) then installs @vibecontrols/agent and core plugins. Only bun is required on your machine — no other prerequisites. The trailing “&& hash -r” refreshes your shell so “vibe” works immediately (using fish? drop it — fish auto-rehashes)."),
-					" ",
-					/* @__PURE__ */ s("a", {
-						href: y,
-						target: "_blank",
-						rel: "noreferrer",
-						className: "text-text-link hover:text-text-linkHover hover:underline",
-						children: a("vibecontrols.shared.installTabs.viewInstallScript", "View the install script")
-					}),
-					"."
-				]
+				children: a("vibecontrols.shared.installTabs.bunDescription", "Bun is the platform default and the only prerequisite. You can pin a specific release with @<version> (defaults to the latest).")
 			}),
-			f === "npm" && /* @__PURE__ */ s("p", {
+			o === "npm" && /* @__PURE__ */ s("p", {
 				className: "text-xs text-text-muted",
-				children: a("vibecontrols.shared.installTabs.npmDescription", "Requires Node.js >= 18. You can also pass @<version> to pin a specific release.")
+				children: a("vibecontrols.shared.installTabs.npmDescription", "Requires Node.js >= 18. You can pin a specific release with @<version> (defaults to the latest).")
 			})
 		]
 	});
 }
 //#endregion
-export { f as InstallTabs };
+export { d as InstallTabs };
 
 //# sourceMappingURL=InstallTabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InstallTabs.js","names":[],"sources":["../../../src/components/shared/InstallTabs.tsx"],"sourcesContent":["import { useMemo, useState, useCallback } from 'react';\nimport { Copy, Check, Terminal } from 'lucide-react';\nimport { Tabs, type TabItem } from '@burdenoff/fe-libs/chrome';\nimport { useTr } from '../../shared/hooks/useTr';\n\ntype InstallMethod = 'curl' | 'npm';\ntype InstallOs = 'linux' | 'macos' | 'windows';\n\n/**\n * Resolves the current host for the curl install URL so the instructions\n * always match the environment the user is looking at (local / alpha / prod).\n * The `VIBECONTROLS_HOST` global can be set by the shell if it needs to\n * override (e.g. for previews), otherwise we read from `window.location`.\n */\nfunction resolveHost(): string {\n  if (typeof window === 'undefined') return 'vibecontrols.local.burdenoff.com';\n  const injected = (window as unknown as { __VIBECONTROLS_HOST__?: string }).__VIBECONTROLS_HOST__;\n  return injected ?? window.location.host;\n}\n\nfunction CopyableCommand({ command }: { command: string }) {\n  const tr = useTr();\n  const [copied, setCopied] = useState(false);\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(command);\n    } catch {\n      const el = document.createElement('textarea');\n      el.value = command;\n      document.body.appendChild(el);\n      el.select();\n      document.execCommand('copy');\n      document.body.removeChild(el);\n    }\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  }, [command]);\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleCopy}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') handleCopy();\n      }}\n      className=\"flex items-center gap-2 px-3 py-2.5 bg-bg-sunken border border-border-default rounded-md cursor-pointer hover:bg-bg-elevated transition-colors group\"\n      title={tr('vibecontrols.shared.installTabs.clickToCopy', 'Click to copy')}\n    >\n      <Terminal className=\"size-4 text-text-muted flex-shrink-0\" />\n      <code className=\"text-sm font-mono text-text-primary flex-1 break-all\">{command}</code>\n      {copied ? (\n        <Check className=\"size-4 text-status-success-text flex-shrink-0\" />\n      ) : (\n        <Copy className=\"size-4 text-text-muted group-hover:text-text-secondary flex-shrink-0\" />\n      )}\n    </div>\n  );\n}\n\nexport interface InstallTabsProps {\n  /** Optional pinned agent version to embed in instructions */\n  pinnedAgentVersion?: string;\n  /** Optional compact layout when rendered inside a narrow callout card */\n  compact?: boolean;\n}\n\n/**\n * Unified install instructions widget used by the Getting Started page and\n * the Agents \"Get started\" callout. Two top tabs — Curl (preferred) and\n * NPM — each with Linux/macOS/Windows sub-tabs, so the user always sees a\n * single command they can copy.\n *\n * The curl install script is served by the app shell at `/install` (bash)\n * and `/install.ps1` (PowerShell). The only prerequisite is bun, which the\n * script installs automatically at a pinned version.\n */\nexport function InstallTabs({ pinnedAgentVersion, compact = false }: InstallTabsProps) {\n  const tr = useTr();\n  const host = resolveHost();\n  const [method, setMethod] = useState<InstallMethod>('curl');\n  const [os, setOs] = useState<InstallOs>('linux');\n\n  const methodTabs: TabItem[] = useMemo(\n    () => [\n      {\n        id: 'curl',\n        label: tr('vibecontrols.shared.installTabs.curlRecommended', 'Curl (Recommended)'),\n      },\n      { id: 'npm', label: tr('vibecontrols.shared.installTabs.npm', 'NPM') },\n    ],\n    [tr]\n  );\n\n  const osTabs: TabItem[] = useMemo(\n    () => [\n      { id: 'linux', label: tr('vibecontrols.shared.installTabs.linux', 'Linux') },\n      { id: 'macos', label: tr('vibecontrols.shared.installTabs.macos', 'macOS') },\n      { id: 'windows', label: tr('vibecontrols.shared.installTabs.windows', 'Windows') },\n    ],\n    [tr]\n  );\n\n  // Resolve the actual command string per (method, os).\n  const command = useMemo(() => {\n    const agentSuffix = pinnedAgentVersion ? `@${pinnedAgentVersion}` : '@latest';\n    if (method === 'curl') {\n      if (os === 'windows') {\n        return `powershell -c \"irm ${host}/install.ps1 | iex\"`;\n      }\n      // The trailing `&& hash -r` runs in the user's shell (right of the pipe),\n      // flushing any stale cached `vibe` path so the freshly-installed binary\n      // resolves immediately — no manual `hash -r` / new terminal. The install\n      // script also rebinds a stale path on disk, so this is belt-and-braces\n      // (and a harmless no-op when nothing is cached). fish users: drop it.\n      return `curl -fsSL https://${host}/install | bash && hash -r 2>/dev/null`;\n    }\n    // npm\n    return `npm install -g @vibecontrols/agent${agentSuffix}`;\n  }, [method, os, host, pinnedAgentVersion]);\n\n  const scriptUrl =\n    method === 'curl'\n      ? os === 'windows'\n        ? `https://${host}/install.ps1`\n        : `https://${host}/install`\n      : null;\n\n  return (\n    <div className={compact ? 'space-y-3' : 'space-y-4'}>\n      <Tabs\n        items={methodTabs}\n        activeTabId={method}\n        onTabChange={(id) => setMethod(id as InstallMethod)}\n        variant=\"underline\"\n      />\n\n      <Tabs\n        items={osTabs}\n        activeTabId={os}\n        onTabChange={(id) => setOs(id as InstallOs)}\n        variant=\"pills\"\n        size=\"sm\"\n      />\n\n      <CopyableCommand command={command} />\n\n      {method === 'curl' && scriptUrl && (\n        <p className=\"text-xs text-text-muted\">\n          {tr(\n            'vibecontrols.shared.installTabs.curlDescription',\n            'The script installs bun (pinned, v1.3.10) then installs @vibecontrols/agent and core plugins. Only bun is required on your machine — no other prerequisites. The trailing “&& hash -r” refreshes your shell so “vibe” works immediately (using fish? drop it — fish auto-rehashes).'\n          )}{' '}\n          <a\n            href={scriptUrl}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className=\"text-text-link hover:text-text-linkHover hover:underline\"\n          >\n            {tr('vibecontrols.shared.installTabs.viewInstallScript', 'View the install script')}\n          </a>\n          .\n        </p>\n      )}\n      {method === 'npm' && (\n        <p className=\"text-xs text-text-muted\">\n          {tr(\n            'vibecontrols.shared.installTabs.npmDescription',\n            'Requires Node.js >= 18. You can also pass @<version> to pin a specific release.'\n          )}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAcA,SAAS,IAAsB;AAG7B,QAFI,OAAO,SAAW,MAAoB,qCACxB,OAAyD,yBACxD,OAAO,SAAS;;AAGrC,SAAS,EAAgB,EAAE,cAAgC;CACzD,IAAM,IAAK,GAAO,EACZ,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,IAAa,EAAY,YAAY;AACzC,MAAI;AACF,SAAM,UAAU,UAAU,UAAU,EAAQ;UACtC;GACN,IAAM,IAAK,SAAS,cAAc,WAAW;AAK7C,GAJA,EAAG,QAAQ,GACX,SAAS,KAAK,YAAY,EAAG,EAC7B,EAAG,QAAQ,EACX,SAAS,YAAY,OAAO,EAC5B,SAAS,KAAK,YAAY,EAAG;;AAG/B,EADA,EAAU,GAAK,EACf,iBAAiB,EAAU,GAAM,EAAE,IAAK;IACvC,CAAC,EAAQ,CAAC;AAEb,QACE,kBAAC,OAAD;EACE,MAAK;EACL,UAAU;EACV,SAAS;EACT,YAAY,MAAM;AAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,QAAK,GAAY;;EAEtD,WAAU;EACV,OAAO,EAAG,+CAA+C,gBAAgB;YAR3E;GAUE,kBAAC,GAAD,EAAU,WAAU,wCAAyC,CAAA;GAC7D,kBAAC,QAAD;IAAM,WAAU;cAAwD;IAAe,CAAA;GACtF,IACC,kBAAC,GAAD,EAAO,WAAU,iDAAkD,CAAA,GAEnE,kBAAC,GAAD,EAAM,WAAU,wEAAyE,CAAA;GAEvF;;;AAqBV,SAAgB,EAAY,EAAE,uBAAoB,aAAU,MAA2B;CACrF,IAAM,IAAK,GAAO,EACZ,IAAO,GAAa,EACpB,CAAC,GAAQ,KAAa,EAAwB,OAAO,EACrD,CAAC,GAAI,KAAS,EAAoB,QAAQ,EAE1C,IAAwB,QACtB,CACJ;EACE,IAAI;EACJ,OAAO,EAAG,mDAAmD,qBAAqB;EACnF,EACD;EAAE,IAAI;EAAO,OAAO,EAAG,uCAAuC,MAAM;EAAE,CACvE,EACD,CAAC,EAAG,CACL,EAEK,IAAoB,QAClB;EACJ;GAAE,IAAI;GAAS,OAAO,EAAG,yCAAyC,QAAQ;GAAE;EAC5E;GAAE,IAAI;GAAS,OAAO,EAAG,yCAAyC,QAAQ;GAAE;EAC5E;GAAE,IAAI;GAAW,OAAO,EAAG,2CAA2C,UAAU;GAAE;EACnF,EACD,CAAC,EAAG,CACL,EAGK,IAAU,QAAc;EAC5B,IAAM,IAAc,IAAqB,IAAI,MAAuB;AAapE,SAZI,MAAW,SACT,MAAO,YACF,sBAAsB,EAAK,uBAO7B,sBAAsB,EAAK,0CAG7B,qCAAqC;IAC3C;EAAC;EAAQ;EAAI;EAAM;EAAmB,CAAC,EAEpC,IACJ,MAAW,SACP,MAAO,YACL,WAAW,EAAK,gBAChB,WAAW,EAAK,YAClB;AAEN,QACE,kBAAC,OAAD;EAAK,WAAW,IAAU,cAAc;YAAxC;GACE,kBAAC,GAAD;IACE,OAAO;IACP,aAAa;IACb,cAAc,MAAO,EAAU,EAAoB;IACnD,SAAQ;IACR,CAAA;GAEF,kBAAC,GAAD;IACE,OAAO;IACP,aAAa;IACb,cAAc,MAAO,EAAM,EAAgB;IAC3C,SAAQ;IACR,MAAK;IACL,CAAA;GAEF,kBAAC,GAAD,EAA0B,YAAW,CAAA;GAEpC,MAAW,UAAU,KACpB,kBAAC,KAAD;IAAG,WAAU;cAAb;KACG,EACC,mDACA,sRACD;KAAE;KACH,kBAAC,KAAD;MACE,MAAM;MACN,QAAO;MACP,KAAI;MACJ,WAAU;gBAET,EAAG,qDAAqD,0BAA0B;MACjF,CAAA;;KAEF;;GAEL,MAAW,SACV,kBAAC,KAAD;IAAG,WAAU;cACV,EACC,kDACA,kFACD;IACC,CAAA;GAEF"}
+{"version":3,"file":"InstallTabs.js","names":[],"sources":["../../../src/components/shared/InstallTabs.tsx"],"sourcesContent":["import { useMemo, useState, useCallback } from 'react';\nimport { Copy, Check, Terminal } from 'lucide-react';\nimport { Tabs, type TabItem } from '@burdenoff/fe-libs/chrome';\nimport { useTr } from '../../shared/hooks/useTr';\n\ntype InstallMethod = 'bun' | 'npm';\n\nfunction CopyableCommand({ command }: { command: string }) {\n  const tr = useTr();\n  const [copied, setCopied] = useState(false);\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(command);\n    } catch {\n      const el = document.createElement('textarea');\n      el.value = command;\n      document.body.appendChild(el);\n      el.select();\n      document.execCommand('copy');\n      document.body.removeChild(el);\n    }\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  }, [command]);\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleCopy}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') handleCopy();\n      }}\n      className=\"flex items-center gap-2 px-3 py-2.5 bg-bg-sunken border border-border-default rounded-md cursor-pointer hover:bg-bg-elevated transition-colors group\"\n      title={tr('vibecontrols.shared.installTabs.clickToCopy', 'Click to copy')}\n    >\n      <Terminal className=\"size-4 text-text-muted flex-shrink-0\" />\n      <code className=\"text-sm font-mono text-text-primary flex-1 break-all\">{command}</code>\n      {copied ? (\n        <Check className=\"size-4 text-status-success-text flex-shrink-0\" />\n      ) : (\n        <Copy className=\"size-4 text-text-muted group-hover:text-text-secondary flex-shrink-0\" />\n      )}\n    </div>\n  );\n}\n\nexport interface InstallTabsProps {\n  /** Optional pinned agent version to embed in instructions */\n  pinnedAgentVersion?: string;\n  /** Optional compact layout when rendered inside a narrow callout card */\n  compact?: boolean;\n}\n\n/**\n * Unified install instructions widget used by the Getting Started page and\n * the Agents \"Get started\" callout. Two tabs — Bun (recommended, the platform\n * default) and NPM — each showing a single global install command the user\n * can copy. Bun (or Node >= 18 for npm) is the only prerequisite; an\n * optional `@<version>` suffix pins a specific release.\n *\n * Official docs: https://docs.vibecontrols.com/users/installing-the-agent\n */\nexport function InstallTabs({ pinnedAgentVersion, compact = false }: InstallTabsProps) {\n  const tr = useTr();\n  const [method, setMethod] = useState<InstallMethod>('bun');\n\n  const methodTabs: TabItem[] = useMemo(\n    () => [\n      {\n        id: 'bun',\n        label: tr('vibecontrols.shared.installTabs.bunRecommended', 'Bun (Recommended)'),\n      },\n      { id: 'npm', label: tr('vibecontrols.shared.installTabs.npm', 'NPM') },\n    ],\n    [tr]\n  );\n\n  // Resolve the global install command for the selected package manager.\n  // The `@<version>` suffix pins a release; default is `@latest`.\n  const command = useMemo(() => {\n    const ver = pinnedAgentVersion ? `@${pinnedAgentVersion}` : '@latest';\n    if (method === 'bun') {\n      return `bun install -g @vibecontrols/agent${ver}`;\n    }\n    return `npm install -g @vibecontrols/agent${ver}`;\n  }, [method, pinnedAgentVersion]);\n\n  return (\n    <div className={compact ? 'space-y-3' : 'space-y-4'}>\n      <Tabs\n        items={methodTabs}\n        activeTabId={method}\n        onTabChange={(id) => setMethod(id as InstallMethod)}\n        variant=\"underline\"\n      />\n\n      <CopyableCommand command={command} />\n\n      {method === 'bun' && (\n        <p className=\"text-xs text-text-muted\">\n          {tr(\n            'vibecontrols.shared.installTabs.bunDescription',\n            'Bun is the platform default and the only prerequisite. You can pin a specific release with @<version> (defaults to the latest).'\n          )}\n        </p>\n      )}\n      {method === 'npm' && (\n        <p className=\"text-xs text-text-muted\">\n          {tr(\n            'vibecontrols.shared.installTabs.npmDescription',\n            'Requires Node.js >= 18. You can pin a specific release with @<version> (defaults to the latest).'\n          )}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAOA,SAAS,EAAgB,EAAE,cAAgC;CACzD,IAAM,IAAK,GAAO,EACZ,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,IAAa,EAAY,YAAY;AACzC,MAAI;AACF,SAAM,UAAU,UAAU,UAAU,EAAQ;UACtC;GACN,IAAM,IAAK,SAAS,cAAc,WAAW;AAK7C,GAJA,EAAG,QAAQ,GACX,SAAS,KAAK,YAAY,EAAG,EAC7B,EAAG,QAAQ,EACX,SAAS,YAAY,OAAO,EAC5B,SAAS,KAAK,YAAY,EAAG;;AAG/B,EADA,EAAU,GAAK,EACf,iBAAiB,EAAU,GAAM,EAAE,IAAK;IACvC,CAAC,EAAQ,CAAC;AAEb,QACE,kBAAC,OAAD;EACE,MAAK;EACL,UAAU;EACV,SAAS;EACT,YAAY,MAAM;AAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,QAAK,GAAY;;EAEtD,WAAU;EACV,OAAO,EAAG,+CAA+C,gBAAgB;YAR3E;GAUE,kBAAC,GAAD,EAAU,WAAU,wCAAyC,CAAA;GAC7D,kBAAC,QAAD;IAAM,WAAU;cAAwD;IAAe,CAAA;GACtF,IACC,kBAAC,GAAD,EAAO,WAAU,iDAAkD,CAAA,GAEnE,kBAAC,GAAD,EAAM,WAAU,wEAAyE,CAAA;GAEvF;;;AAoBV,SAAgB,EAAY,EAAE,uBAAoB,aAAU,MAA2B;CACrF,IAAM,IAAK,GAAO,EACZ,CAAC,GAAQ,KAAa,EAAwB,MAAM,EAEpD,IAAwB,QACtB,CACJ;EACE,IAAI;EACJ,OAAO,EAAG,kDAAkD,oBAAoB;EACjF,EACD;EAAE,IAAI;EAAO,OAAO,EAAG,uCAAuC,MAAM;EAAE,CACvE,EACD,CAAC,EAAG,CACL,EAIK,IAAU,QAAc;EAC5B,IAAM,IAAM,IAAqB,IAAI,MAAuB;AAI5D,SAHI,MAAW,QACN,qCAAqC,MAEvC,qCAAqC;IAC3C,CAAC,GAAQ,EAAmB,CAAC;AAEhC,QACE,kBAAC,OAAD;EAAK,WAAW,IAAU,cAAc;YAAxC;GACE,kBAAC,GAAD;IACE,OAAO;IACP,aAAa;IACb,cAAc,MAAO,EAAU,EAAoB;IACnD,SAAQ;IACR,CAAA;GAEF,kBAAC,GAAD,EAA0B,YAAW,CAAA;GAEpC,MAAW,SACV,kBAAC,KAAD;IAAG,WAAU;cACV,EACC,kDACA,kIACD;IACC,CAAA;GAEL,MAAW,SACV,kBAAC,KAAD;IAAG,WAAU;cACV,EACC,kDACA,mGACD;IACC,CAAA;GAEF"}