@burdenoff/microfe-vibecontrols 2026.601.7 → 2026.601.9

package/dist/_virtual/_rolldown/runtime.js

@@ -15,6 +15,9 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 }, l = (n, r, a) => (a = n == null ? {} : e(i(n)), c(r || !n || !n.__esModule ? t(a, "default", {
 	value: n,
 	enumerable: !0
-}) : a, n));
+}) : a, n)), u = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+	if (typeof require < "u") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+});
 //#endregion
-export { o as __commonJSMin, s as __exportAll, l as __toESM };
+export { o as __commonJSMin, s as __exportAll, u as __require, l as __toESM };

package/dist/components/agents/AgentForm.js

@@ -191,7 +191,7 @@ function m({ onSubmit: m, onCancel: h, isLoading: me, onNavigate: g, targets: _,
 										className: "space-y-2",
 										children: [[{
 											label: b("agentsPage.installStep1", "1. Install the agent CLI"),
-											cmd: "curl -fsSL https://app.vibecontrols.com/install | bash"
+											cmd: "curl -fsSL https://app.vibecontrols.com/install | bash && hash -r 2>/dev/null"
 										}, {
 											label: b("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 { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  X,\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 { useProbeAgentTunnelLazyQuery } from '@/generated/wspace-operations';\nimport { SearchableSelect } from '@/components/shared';\nimport type { SearchableSelectOption } from '@/components/shared';\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 { t } = useI18n();\n  const tr = (key: string, fallback: string) => {\n    const v = t(key);\n    return v === key ? fallback : v;\n  };\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  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    <button\n      type=\"button\"\n      onClick={() => copyToClipboard(text, id)}\n      className=\"p-1 rounded hover:bg-bg-elevated transition-colors\"\n      title={tr('agentsPage.copy', 'Copy')}\n    >\n      {copiedCommand === id ? (\n        <Check className=\"size-3.5 text-status-success-text\" />\n      ) : (\n        <Copy className=\"size-3.5 text-text-secondary\" />\n      )}\n    </button>\n  );\n\n  // Stepper\n  const steps = [\n    { key: 'details', label: 'Setup' },\n    { key: 'validate', label: 'Validate' },\n  ];\n\n  const currentStepIndex = steps.findIndex((s) => s.key === stage);\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay\">\n      <div className=\"w-full max-w-xl bg-bg-surface rounded-lg shadow-xl max-h-[90vh] overflow-y-auto\">\n        {/* Header */}\n        <div className=\"flex items-center justify-between px-6 py-4 border-b border-border-default sticky top-0 bg-bg-surface z-10\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('agentsPage.addNewAgent', 'Add New Agent')}\n          </h2>\n          <button\n            type=\"button\"\n            onClick={onCancel}\n            className=\"p-1 rounded hover:bg-bg-sunken transition-colors\"\n          >\n            <X className=\"size-5 text-text-secondary\" />\n          </button>\n        </div>\n\n        {/* Stepper */}\n        <div className=\"flex items-center gap-2 px-6 pt-4 pb-2\">\n          {steps.map((step, i) => (\n            <div key={step.key} className=\"flex items-center gap-2\">\n              <div\n                className={`flex items-center justify-center size-7 rounded-full text-xs font-semibold transition-colors ${\n                  i < currentStepIndex\n                    ? 'bg-status-success-bg text-status-success-text'\n                    : i === currentStepIndex\n                      ? 'bg-action-primary-bg text-action-primary-text'\n                      : 'bg-bg-sunken text-text-secondary'\n                }`}\n              >\n                {i < currentStepIndex ? <CheckCircle2 className=\"size-4\" /> : i + 1}\n              </div>\n              <span\n                className={`text-sm ${i === currentStepIndex ? 'font-medium text-text-primary' : 'text-text-secondary'}`}\n              >\n                {step.label}\n              </span>\n              {i < steps.length - 1 && <ChevronRight className=\"size-4 text-text-muted\" />}\n            </div>\n          ))}\n        </div>\n\n        <div className=\"p-6\">\n          {/* Stage 1: Setup */}\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                  className=\"w-full flex items-center justify-between px-4 py-3 bg-bg-sunken hover:bg-bg-sunken/80 transition-colors\"\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <Download className=\"size-4 text-action-primary-bg\" />\n                    <span className=\"text-sm font-medium text-text-primary\">\n                      {tr('agentsPage.installInstructions', 'Agent Install Instructions')}\n                    </span>\n                  </div>\n                  <ChevronRight\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                          cmd: 'curl -fsSL https://app.vibecontrols.com/install | bash',\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 className=\"size-3 text-text-muted flex-shrink-0\" />\n                            <code className=\"flex-1\">{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 className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('agentsPage.name', 'Name')}\n                </label>\n                <input\n                  aria-label={tr('agentsPage.name', 'Name')}\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=\"w-full px-3 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                  data-testid=\"agent-form-name-input\"\n                />\n                <p className=\"mt-1 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                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('agentsPage.target', 'Target')}{' '}\n                  <span className=\"text-status-error-text\">*</span>\n                </label>\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 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-action-primary-bg hover:underline inline-flex items-center gap-1\"\n                        >\n                          <Plus className=\"size-3\" />\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                      onClick={() => {\n                        setShowInlineTarget(true);\n                        setInlineTargetName(name.trim() || '');\n                      }}\n                      className=\"inline-flex items-center gap-1.5 px-3 py-1.5 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:opacity-90\"\n                    >\n                      <Plus className=\"size-4\" />\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                    <input\n                      aria-label=\"control\"\n                      type=\"text\"\n                      value={inlineTargetName}\n                      onChange={(e) => setInlineTargetName(e.target.value)}\n                      placeholder={tr('agentsPage.targetName', 'Target name')}\n                      className=\"w-full px-3 py-2 text-sm bg-bg-elevated border border-border-default rounded-md text-text-primary placeholder-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                      onKeyDown={(e) => {\n                        if (e.key === 'Enter') {\n                          e.preventDefault();\n                          void handleInlineCreateTarget();\n                        }\n                      }}\n                    />\n                    {inlineTargetError && (\n                      <p className=\"text-xs text-status-error-text\">{inlineTargetError}</p>\n                    )}\n                    <div className=\"flex items-center gap-2\">\n                      <button\n                        type=\"button\"\n                        onClick={() => void handleInlineCreateTarget()}\n                        disabled={!inlineTargetName.trim() || creatingTarget}\n                        className=\"inline-flex items-center gap-1.5 px-3 py-1.5 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:opacity-90 disabled:opacity-50\"\n                      >\n                        {creatingTarget ? (\n                          <Loader2 className=\"size-3.5 animate-spin\" />\n                        ) : (\n                          <Check className=\"size-3.5\" />\n                        )}\n                        {tr('agentsPage.create', 'Create')}\n                      </button>\n                      <button\n                        type=\"button\"\n                        onClick={() => {\n                          setShowInlineTarget(false);\n                          setInlineTargetName('');\n                          setInlineTargetError(null);\n                        }}\n                        className=\"px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary\"\n                      >\n                        {tr('agentsPage.cancel', 'Cancel')}\n                      </button>\n                    </div>\n                  </div>\n                )}\n\n                {/* Loading placeholder */}\n                {targetsLoading && !hasTargets && (\n                  <div className=\"p-3 bg-bg-sunken border border-border-default rounded-lg flex items-center gap-2 text-sm text-text-secondary\">\n                    <Loader2 className=\"size-4 animate-spin\" />\n                    {tr('agentsPage.loadingTargets', 'Loading targets...')}\n                  </div>\n                )}\n              </div>\n\n              {/* API/Tunnel URL */}\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('agentsPage.apiTunnelUrl', 'API / Tunnel URL')}{' '}\n                  <span className=\"text-status-error-text\">*</span>\n                </label>\n                <input\n                  aria-label=\"https://your-tunnel.trycloudflare.com\"\n                  type=\"url\"\n                  value={tunnelUrl}\n                  onChange={(e) => setTunnelUrl(e.target.value)}\n                  placeholder=\"https://your-tunnel.trycloudflare.com\"\n                  required\n                  className=\"w-full px-3 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg font-mono\"\n                />\n                <p className=\"mt-1 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 className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('agentsPage.agentApiKey', 'Agent API Key')}{' '}\n                  <span className=\"text-status-error-text\">*</span>\n                </label>\n                <div className=\"relative\">\n                  <input\n                    aria-label=\"vcak_...\"\n                    type={showApiKey ? 'text' : 'password'}\n                    value={agentApiKey}\n                    onChange={(e) => setAgentApiKey(e.target.value)}\n                    placeholder=\"vcak_...\"\n                    required\n                    className=\"w-full px-3 py-2 pr-10 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg font-mono\"\n                  />\n                  <button\n                    type=\"button\"\n                    onClick={() => setShowApiKey(!showApiKey)}\n                    className=\"absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-bg-elevated transition-colors\"\n                  >\n                    {showApiKey ? (\n                      <EyeOff className=\"size-4 text-text-secondary\" />\n                    ) : (\n                      <Eye className=\"size-4 text-text-secondary\" />\n                    )}\n                  </button>\n                </div>\n                <p className=\"mt-1 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\"\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\" />\n                    <span className=\"text-sm font-medium text-text-primary\">\n                      {tr('agentsPage.advancedOptions', 'Advanced options')}\n                    </span>\n                  </div>\n                  <ChevronDown\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 className=\"block text-sm font-medium text-text-primary mb-1\">\n                        {tr('agentsPage.profileName', 'Profile name')}\n                      </label>\n                      <input\n                        aria-label=\"default\"\n                        type=\"text\"\n                        value={profile}\n                        onChange={(e) => setProfile(e.target.value)}\n                        placeholder=\"default\"\n                        className=\"w-full px-3 py-2 text-sm bg-bg-surface border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg font-mono\"\n                        data-testid=\"agent-form-profile-input\"\n                      />\n                      <p className=\"mt-1 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              <div className=\"flex items-center justify-between pt-4\">\n                <button\n                  type=\"button\"\n                  onClick={onCancel}\n                  className=\"px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-md hover:bg-bg-elevated transition-colors\"\n                >\n                  {tr('agentsPage.cancel', 'Cancel')}\n                </button>\n                <button\n                  type=\"button\"\n                  disabled={!canProceedToValidate}\n                  onClick={() => {\n                    setStage('validate');\n                    validateAgent();\n                  }}\n                  className=\"flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n                >\n                  {tr('agentsPage.nextValidate', 'Next: Validate')}\n                  <ChevronRight className=\"size-4\" />\n                </button>\n              </div>\n            </div>\n          )}\n\n          {/* Stage 2: Validate */}\n          {stage === 'validate' && (\n            <div className=\"space-y-4\">\n              {/* Validation Results */}\n              <div className=\"space-y-3\">\n                {/* Health Check */}\n                <div\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-text/20 bg-status-success-bg/30'\n                        : 'border-status-error-text/20 bg-status-error-bg/30'\n                  }`}\n                >\n                  {validating && !healthResult ? (\n                    <Loader2 className=\"size-5 text-text-secondary animate-spin\" />\n                  ) : healthResult?.ok ? (\n                    <CheckCircle2 className=\"size-5 text-status-success-text\" />\n                  ) : healthResult ? (\n                    <XCircle className=\"size-5 text-status-error-text\" />\n                  ) : (\n                    <div className=\"size-5 rounded-full border-2 border-border-default\" />\n                  )}\n                  <div className=\"flex-1\">\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\">\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\">{healthResult.error}</p>\n                    )}\n                  </div>\n                </div>\n\n                {/* API Access Check */}\n                <div\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-text/20 bg-status-success-bg/30'\n                        : 'border-status-error-text/20 bg-status-error-bg/30'\n                  }`}\n                >\n                  {validating && !identityResult ? (\n                    <Loader2 className=\"size-5 text-text-secondary animate-spin\" />\n                  ) : identityResult?.ok ? (\n                    <CheckCircle2 className=\"size-5 text-status-success-text\" />\n                  ) : identityResult ? (\n                    <XCircle className=\"size-5 text-status-error-text\" />\n                  ) : (\n                    <div className=\"size-5 rounded-full border-2 border-border-default\" />\n                  )}\n                  <div className=\"flex-1\">\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\">\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\">{identityResult.error}</p>\n                    )}\n                  </div>\n                </div>\n              </div>\n\n              {/* Retry button */}\n              {!validating && (!healthResult?.ok || !identityResult?.ok) && (\n                <button\n                  type=\"button\"\n                  onClick={validateAgent}\n                  className=\"flex items-center gap-2 px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n                >\n                  <RefreshCw className=\"size-3.5\" />\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-2 gap-3\">\n                    <div>\n                      <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n                        {tr('agentsPage.platform', 'Platform')}\n                      </label>\n                      <select\n                        value={detectedPlatform}\n                        onChange={(e) => setDetectedPlatform(e.target.value)}\n                        className=\"w-full px-3 py-1.5 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                      >\n                        <option value=\"linux\">Linux</option>\n                        <option value=\"darwin\">macOS</option>\n                        <option value=\"windows\">Windows</option>\n                      </select>\n                    </div>\n                    <div>\n                      <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n                        {tr('agentsPage.architecture', 'Architecture')}\n                      </label>\n                      <select\n                        value={detectedArch}\n                        onChange={(e) => setDetectedArch(e.target.value)}\n                        className=\"w-full px-3 py-1.5 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                      >\n                        <option value=\"x86_64\">x86_64</option>\n                        <option value=\"arm64\">arm64</option>\n                        <option value=\"aarch64\">aarch64</option>\n                      </select>\n                    </div>\n                  </div>\n                </div>\n              )}\n\n              {/* Creation error */}\n              {createError && (\n                <div className=\"p-3 bg-status-error-bg/30 border border-status-error-text/20 rounded-lg\">\n                  <div className=\"flex items-center gap-2\">\n                    <XCircle className=\"size-5 text-status-error-text flex-shrink-0\" />\n                    <p className=\"text-sm text-status-error-text\">{createError}</p>\n                  </div>\n                  <div className=\"flex items-center gap-2 mt-3\">\n                    <button\n                      type=\"button\"\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                      className=\"flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-md hover:bg-bg-elevated transition-colors\"\n                    >\n                      <RefreshCw className=\"size-3.5\" />\n                      {tr('agentsPage.tryDifferentAgent', 'Try Different Agent')}\n                    </button>\n                    <button\n                      type=\"button\"\n                      onClick={onCancel}\n                      className=\"px-3 py-1.5 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors\"\n                    >\n                      {tr('agentsPage.close', 'Close')}\n                    </button>\n                  </div>\n                </div>\n              )}\n\n              {/* Actions */}\n              <div className=\"flex items-center justify-between pt-4\">\n                <button\n                  type=\"button\"\n                  onClick={() => setStage('details')}\n                  className=\"flex items-center gap-1 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-md hover:bg-bg-elevated transition-colors\"\n                >\n                  <ChevronLeft className=\"size-4\" />\n                  {tr('agentsPage.back', 'Back')}\n                </button>\n                <button\n                  type=\"button\"\n                  disabled={!isValidationPassed || isLoading || validating}\n                  onClick={handleCreateAgent}\n                  className=\"flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n                >\n                  {isLoading ? (\n                    <>\n                      <Loader2 className=\"size-4 animate-spin\" />\n                      {tr('agentsPage.adding', 'Adding...')}\n                    </>\n                  ) : (\n                    <>\n                      {tr('agentsPage.addAgent', 'Add Agent')}\n                      <ChevronRight className=\"size-4\" />\n                    </>\n                  )}\n                </button>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\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 { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  X,\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 { useProbeAgentTunnelLazyQuery } from '@/generated/wspace-operations';\nimport { SearchableSelect } from '@/components/shared';\nimport type { SearchableSelectOption } from '@/components/shared';\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 { t } = useI18n();\n  const tr = (key: string, fallback: string) => {\n    const v = t(key);\n    return v === key ? fallback : v;\n  };\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  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    <button\n      type=\"button\"\n      onClick={() => copyToClipboard(text, id)}\n      className=\"p-1 rounded hover:bg-bg-elevated transition-colors\"\n      title={tr('agentsPage.copy', 'Copy')}\n    >\n      {copiedCommand === id ? (\n        <Check className=\"size-3.5 text-status-success-text\" />\n      ) : (\n        <Copy className=\"size-3.5 text-text-secondary\" />\n      )}\n    </button>\n  );\n\n  // Stepper\n  const steps = [\n    { key: 'details', label: 'Setup' },\n    { key: 'validate', label: 'Validate' },\n  ];\n\n  const currentStepIndex = steps.findIndex((s) => s.key === stage);\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay\">\n      <div className=\"w-full max-w-xl bg-bg-surface rounded-lg shadow-xl max-h-[90vh] overflow-y-auto\">\n        {/* Header */}\n        <div className=\"flex items-center justify-between px-6 py-4 border-b border-border-default sticky top-0 bg-bg-surface z-10\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('agentsPage.addNewAgent', 'Add New Agent')}\n          </h2>\n          <button\n            type=\"button\"\n            onClick={onCancel}\n            className=\"p-1 rounded hover:bg-bg-sunken transition-colors\"\n          >\n            <X className=\"size-5 text-text-secondary\" />\n          </button>\n        </div>\n\n        {/* Stepper */}\n        <div className=\"flex items-center gap-2 px-6 pt-4 pb-2\">\n          {steps.map((step, i) => (\n            <div key={step.key} className=\"flex items-center gap-2\">\n              <div\n                className={`flex items-center justify-center size-7 rounded-full text-xs font-semibold transition-colors ${\n                  i < currentStepIndex\n                    ? 'bg-status-success-bg text-status-success-text'\n                    : i === currentStepIndex\n                      ? 'bg-action-primary-bg text-action-primary-text'\n                      : 'bg-bg-sunken text-text-secondary'\n                }`}\n              >\n                {i < currentStepIndex ? <CheckCircle2 className=\"size-4\" /> : i + 1}\n              </div>\n              <span\n                className={`text-sm ${i === currentStepIndex ? 'font-medium text-text-primary' : 'text-text-secondary'}`}\n              >\n                {step.label}\n              </span>\n              {i < steps.length - 1 && <ChevronRight className=\"size-4 text-text-muted\" />}\n            </div>\n          ))}\n        </div>\n\n        <div className=\"p-6\">\n          {/* Stage 1: Setup */}\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                  className=\"w-full flex items-center justify-between px-4 py-3 bg-bg-sunken hover:bg-bg-sunken/80 transition-colors\"\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <Download className=\"size-4 text-action-primary-bg\" />\n                    <span className=\"text-sm font-medium text-text-primary\">\n                      {tr('agentsPage.installInstructions', 'Agent Install Instructions')}\n                    </span>\n                  </div>\n                  <ChevronRight\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 className=\"size-3 text-text-muted flex-shrink-0\" />\n                            <code className=\"flex-1\">{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 className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('agentsPage.name', 'Name')}\n                </label>\n                <input\n                  aria-label={tr('agentsPage.name', 'Name')}\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=\"w-full px-3 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                  data-testid=\"agent-form-name-input\"\n                />\n                <p className=\"mt-1 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                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('agentsPage.target', 'Target')}{' '}\n                  <span className=\"text-status-error-text\">*</span>\n                </label>\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 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-action-primary-bg hover:underline inline-flex items-center gap-1\"\n                        >\n                          <Plus className=\"size-3\" />\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                      onClick={() => {\n                        setShowInlineTarget(true);\n                        setInlineTargetName(name.trim() || '');\n                      }}\n                      className=\"inline-flex items-center gap-1.5 px-3 py-1.5 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:opacity-90\"\n                    >\n                      <Plus className=\"size-4\" />\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                    <input\n                      aria-label=\"control\"\n                      type=\"text\"\n                      value={inlineTargetName}\n                      onChange={(e) => setInlineTargetName(e.target.value)}\n                      placeholder={tr('agentsPage.targetName', 'Target name')}\n                      className=\"w-full px-3 py-2 text-sm bg-bg-elevated border border-border-default rounded-md text-text-primary placeholder-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                      onKeyDown={(e) => {\n                        if (e.key === 'Enter') {\n                          e.preventDefault();\n                          void handleInlineCreateTarget();\n                        }\n                      }}\n                    />\n                    {inlineTargetError && (\n                      <p className=\"text-xs text-status-error-text\">{inlineTargetError}</p>\n                    )}\n                    <div className=\"flex items-center gap-2\">\n                      <button\n                        type=\"button\"\n                        onClick={() => void handleInlineCreateTarget()}\n                        disabled={!inlineTargetName.trim() || creatingTarget}\n                        className=\"inline-flex items-center gap-1.5 px-3 py-1.5 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:opacity-90 disabled:opacity-50\"\n                      >\n                        {creatingTarget ? (\n                          <Loader2 className=\"size-3.5 animate-spin\" />\n                        ) : (\n                          <Check className=\"size-3.5\" />\n                        )}\n                        {tr('agentsPage.create', 'Create')}\n                      </button>\n                      <button\n                        type=\"button\"\n                        onClick={() => {\n                          setShowInlineTarget(false);\n                          setInlineTargetName('');\n                          setInlineTargetError(null);\n                        }}\n                        className=\"px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary\"\n                      >\n                        {tr('agentsPage.cancel', 'Cancel')}\n                      </button>\n                    </div>\n                  </div>\n                )}\n\n                {/* Loading placeholder */}\n                {targetsLoading && !hasTargets && (\n                  <div className=\"p-3 bg-bg-sunken border border-border-default rounded-lg flex items-center gap-2 text-sm text-text-secondary\">\n                    <Loader2 className=\"size-4 animate-spin\" />\n                    {tr('agentsPage.loadingTargets', 'Loading targets...')}\n                  </div>\n                )}\n              </div>\n\n              {/* API/Tunnel URL */}\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('agentsPage.apiTunnelUrl', 'API / Tunnel URL')}{' '}\n                  <span className=\"text-status-error-text\">*</span>\n                </label>\n                <input\n                  aria-label=\"https://your-tunnel.trycloudflare.com\"\n                  type=\"url\"\n                  value={tunnelUrl}\n                  onChange={(e) => setTunnelUrl(e.target.value)}\n                  placeholder=\"https://your-tunnel.trycloudflare.com\"\n                  required\n                  className=\"w-full px-3 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg font-mono\"\n                />\n                <p className=\"mt-1 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 className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('agentsPage.agentApiKey', 'Agent API Key')}{' '}\n                  <span className=\"text-status-error-text\">*</span>\n                </label>\n                <div className=\"relative\">\n                  <input\n                    aria-label=\"vcak_...\"\n                    type={showApiKey ? 'text' : 'password'}\n                    value={agentApiKey}\n                    onChange={(e) => setAgentApiKey(e.target.value)}\n                    placeholder=\"vcak_...\"\n                    required\n                    className=\"w-full px-3 py-2 pr-10 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg font-mono\"\n                  />\n                  <button\n                    type=\"button\"\n                    onClick={() => setShowApiKey(!showApiKey)}\n                    className=\"absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-bg-elevated transition-colors\"\n                  >\n                    {showApiKey ? (\n                      <EyeOff className=\"size-4 text-text-secondary\" />\n                    ) : (\n                      <Eye className=\"size-4 text-text-secondary\" />\n                    )}\n                  </button>\n                </div>\n                <p className=\"mt-1 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\"\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\" />\n                    <span className=\"text-sm font-medium text-text-primary\">\n                      {tr('agentsPage.advancedOptions', 'Advanced options')}\n                    </span>\n                  </div>\n                  <ChevronDown\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 className=\"block text-sm font-medium text-text-primary mb-1\">\n                        {tr('agentsPage.profileName', 'Profile name')}\n                      </label>\n                      <input\n                        aria-label=\"default\"\n                        type=\"text\"\n                        value={profile}\n                        onChange={(e) => setProfile(e.target.value)}\n                        placeholder=\"default\"\n                        className=\"w-full px-3 py-2 text-sm bg-bg-surface border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg font-mono\"\n                        data-testid=\"agent-form-profile-input\"\n                      />\n                      <p className=\"mt-1 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              <div className=\"flex items-center justify-between pt-4\">\n                <button\n                  type=\"button\"\n                  onClick={onCancel}\n                  className=\"px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-md hover:bg-bg-elevated transition-colors\"\n                >\n                  {tr('agentsPage.cancel', 'Cancel')}\n                </button>\n                <button\n                  type=\"button\"\n                  disabled={!canProceedToValidate}\n                  onClick={() => {\n                    setStage('validate');\n                    validateAgent();\n                  }}\n                  className=\"flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n                >\n                  {tr('agentsPage.nextValidate', 'Next: Validate')}\n                  <ChevronRight className=\"size-4\" />\n                </button>\n              </div>\n            </div>\n          )}\n\n          {/* Stage 2: Validate */}\n          {stage === 'validate' && (\n            <div className=\"space-y-4\">\n              {/* Validation Results */}\n              <div className=\"space-y-3\">\n                {/* Health Check */}\n                <div\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-text/20 bg-status-success-bg/30'\n                        : 'border-status-error-text/20 bg-status-error-bg/30'\n                  }`}\n                >\n                  {validating && !healthResult ? (\n                    <Loader2 className=\"size-5 text-text-secondary animate-spin\" />\n                  ) : healthResult?.ok ? (\n                    <CheckCircle2 className=\"size-5 text-status-success-text\" />\n                  ) : healthResult ? (\n                    <XCircle className=\"size-5 text-status-error-text\" />\n                  ) : (\n                    <div className=\"size-5 rounded-full border-2 border-border-default\" />\n                  )}\n                  <div className=\"flex-1\">\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\">\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\">{healthResult.error}</p>\n                    )}\n                  </div>\n                </div>\n\n                {/* API Access Check */}\n                <div\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-text/20 bg-status-success-bg/30'\n                        : 'border-status-error-text/20 bg-status-error-bg/30'\n                  }`}\n                >\n                  {validating && !identityResult ? (\n                    <Loader2 className=\"size-5 text-text-secondary animate-spin\" />\n                  ) : identityResult?.ok ? (\n                    <CheckCircle2 className=\"size-5 text-status-success-text\" />\n                  ) : identityResult ? (\n                    <XCircle className=\"size-5 text-status-error-text\" />\n                  ) : (\n                    <div className=\"size-5 rounded-full border-2 border-border-default\" />\n                  )}\n                  <div className=\"flex-1\">\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\">\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\">{identityResult.error}</p>\n                    )}\n                  </div>\n                </div>\n              </div>\n\n              {/* Retry button */}\n              {!validating && (!healthResult?.ok || !identityResult?.ok) && (\n                <button\n                  type=\"button\"\n                  onClick={validateAgent}\n                  className=\"flex items-center gap-2 px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n                >\n                  <RefreshCw className=\"size-3.5\" />\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-2 gap-3\">\n                    <div>\n                      <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n                        {tr('agentsPage.platform', 'Platform')}\n                      </label>\n                      <select\n                        value={detectedPlatform}\n                        onChange={(e) => setDetectedPlatform(e.target.value)}\n                        className=\"w-full px-3 py-1.5 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                      >\n                        <option value=\"linux\">Linux</option>\n                        <option value=\"darwin\">macOS</option>\n                        <option value=\"windows\">Windows</option>\n                      </select>\n                    </div>\n                    <div>\n                      <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n                        {tr('agentsPage.architecture', 'Architecture')}\n                      </label>\n                      <select\n                        value={detectedArch}\n                        onChange={(e) => setDetectedArch(e.target.value)}\n                        className=\"w-full px-3 py-1.5 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                      >\n                        <option value=\"x86_64\">x86_64</option>\n                        <option value=\"arm64\">arm64</option>\n                        <option value=\"aarch64\">aarch64</option>\n                      </select>\n                    </div>\n                  </div>\n                </div>\n              )}\n\n              {/* Creation error */}\n              {createError && (\n                <div className=\"p-3 bg-status-error-bg/30 border border-status-error-text/20 rounded-lg\">\n                  <div className=\"flex items-center gap-2\">\n                    <XCircle className=\"size-5 text-status-error-text flex-shrink-0\" />\n                    <p className=\"text-sm text-status-error-text\">{createError}</p>\n                  </div>\n                  <div className=\"flex items-center gap-2 mt-3\">\n                    <button\n                      type=\"button\"\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                      className=\"flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-md hover:bg-bg-elevated transition-colors\"\n                    >\n                      <RefreshCw className=\"size-3.5\" />\n                      {tr('agentsPage.tryDifferentAgent', 'Try Different Agent')}\n                    </button>\n                    <button\n                      type=\"button\"\n                      onClick={onCancel}\n                      className=\"px-3 py-1.5 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors\"\n                    >\n                      {tr('agentsPage.close', 'Close')}\n                    </button>\n                  </div>\n                </div>\n              )}\n\n              {/* Actions */}\n              <div className=\"flex items-center justify-between pt-4\">\n                <button\n                  type=\"button\"\n                  onClick={() => setStage('details')}\n                  className=\"flex items-center gap-1 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-md hover:bg-bg-elevated transition-colors\"\n                >\n                  <ChevronLeft className=\"size-4\" />\n                  {tr('agentsPage.back', 'Back')}\n                </button>\n                <button\n                  type=\"button\"\n                  disabled={!isValidationPassed || isLoading || validating}\n                  onClick={handleCreateAgent}\n                  className=\"flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n                >\n                  {isLoading ? (\n                    <>\n                      <Loader2 className=\"size-4 animate-spin\" />\n                      {tr('agentsPage.adding', 'Adding...')}\n                    </>\n                  ) : (\n                    <>\n                      {tr('agentsPage.addAgent', 'Add Agent')}\n                      <ChevronRight className=\"size-4\" />\n                    </>\n                  )}\n                </button>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/graph/MeshAgentNode.js

@@ -0,0 +1,74 @@
+import { getNodeTypeConfig as e } from "./nodeIcons.js";
+import { memo as t } from "react";
+import { Bot as n, User as r, Users as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Handle as s, Position as c } from "@xyflow/react";
+//#region src/components/graph/MeshAgentNode.tsx
+function l({ data: t, selected: l }) {
+	let u = t, d = e(u.hostType), f = d.icon, p = u.isShared ? i : r;
+	return /* @__PURE__ */ o("div", {
+		className: `rounded-lg border bg-bg-surface shadow-sm p-2.5 flex flex-col gap-1.5 transition-shadow hover:shadow-md ${l ? "border-action-primary-bg ring-1 ring-action-primary-bg/40" : "border-border-default"}`,
+		style: { width: 200 },
+		role: u.onActivate ? "button" : void 0,
+		tabIndex: u.onActivate ? 0 : void 0,
+		"aria-label": u.onActivate ? `Open agent ${u.name}` : void 0,
+		onKeyDown: (e) => {
+			u.onActivate && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), u.onActivate());
+		},
+		children: [
+			/* @__PURE__ */ a(s, {
+				type: "target",
+				position: c.Left,
+				className: "!bg-text-tertiary !w-2 !h-2 !border-0"
+			}),
+			/* @__PURE__ */ a(s, {
+				type: "source",
+				position: c.Right,
+				className: "!bg-action-primary-bg !w-2 !h-2 !border-0"
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ a(n, {
+						size: 14,
+						className: "text-action-primary-bg shrink-0"
+					}),
+					/* @__PURE__ */ o("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ a("div", {
+							className: "text-xs font-semibold text-text-primary truncate",
+							children: u.name
+						}), u.version ? /* @__PURE__ */ o("div", {
+							className: "text-[10px] text-text-tertiary",
+							children: ["v", u.version]
+						}) : null]
+					}),
+					/* @__PURE__ */ a(p, {
+						size: 12,
+						className: `shrink-0 ${u.isShared ? "text-text-tertiary" : "text-accent-purple"}`,
+						"aria-label": u.isShared ? "Shared agent" : "Personal agent"
+					}),
+					/* @__PURE__ */ a("span", {
+						className: `size-2 rounded-full shrink-0 ${u.isActive ? "bg-status-success-bg" : "bg-bg-disabled"}`,
+						title: u.isActive ? "Active" : "Offline"
+					})
+				]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ o("span", {
+					className: `inline-flex items-center gap-1 px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider rounded ${d.badge}`,
+					children: [/* @__PURE__ */ a(f, { size: 9 }), u.hostType ?? "HOST"]
+				}), u.hostLabel ? /* @__PURE__ */ a("span", {
+					className: "text-[10px] text-text-tertiary truncate",
+					children: u.hostLabel
+				}) : null]
+			})
+		]
+	});
+}
+var u = t(l);
+//#endregion
+export { u as MeshAgentNode };
+
+//# sourceMappingURL=MeshAgentNode.js.map

package/dist/components/graph/MeshAgentNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MeshAgentNode.js","names":[],"sources":["../../../src/components/graph/MeshAgentNode.tsx"],"sourcesContent":["/**\n * MeshAgentNode — React Flow custom node for an Agent in the agent-mesh graph.\n *\n * Unlike the target-centric AgentGraphView (where agents are children of a\n * target group), here the AGENT is the first-class node. It renders:\n *  - the agent name + version\n *  - an active/offline status dot\n *  - a shared-vs-personal owner glyph (Users = shared, User = personal)\n *  - a HOST badge built from the agent's `target.type` / `target.host` using\n *    the shared node-icon map.\n *\n * Uses design tokens for seamless light/dark mode.\n */\n\nimport { memo } from 'react';\nimport { Handle, Position, type NodeProps } from '@xyflow/react';\nimport { Bot, User, Users } from 'lucide-react';\nimport { getNodeTypeConfig } from './nodeIcons';\n\nexport interface MeshAgentNodeData {\n  name: string;\n  version?: string | null;\n  isActive: boolean;\n  /** NULL ownerUserId => shared workspace agent; non-null => personal. */\n  isShared: boolean;\n  hostType?: string | null;\n  hostLabel?: string | null;\n  onActivate?: () => void;\n  [key: string]: unknown;\n}\n\nfunction MeshAgentNodeComponent({ data, selected }: NodeProps) {\n  const d = data as MeshAgentNodeData;\n  const hostConfig = getNodeTypeConfig(d.hostType);\n  const HostIcon = hostConfig.icon;\n  const OwnerIcon = d.isShared ? Users : User;\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!d.onActivate) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      d.onActivate();\n    }\n  };\n\n  return (\n    <div\n      className={`rounded-lg border bg-bg-surface shadow-sm p-2.5 flex flex-col gap-1.5 transition-shadow hover:shadow-md ${\n        selected\n          ? 'border-action-primary-bg ring-1 ring-action-primary-bg/40'\n          : 'border-border-default'\n      }`}\n      style={{ width: 200 }}\n      role={d.onActivate ? 'button' : undefined}\n      tabIndex={d.onActivate ? 0 : undefined}\n      aria-label={d.onActivate ? `Open agent ${d.name}` : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <Handle\n        type=\"target\"\n        position={Position.Left}\n        className=\"!bg-text-tertiary !w-2 !h-2 !border-0\"\n      />\n      <Handle\n        type=\"source\"\n        position={Position.Right}\n        className=\"!bg-action-primary-bg !w-2 !h-2 !border-0\"\n      />\n\n      <div className=\"flex items-center gap-2\">\n        <Bot size={14} className=\"text-action-primary-bg shrink-0\" />\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"text-xs font-semibold text-text-primary truncate\">{d.name}</div>\n          {d.version ? <div className=\"text-[10px] text-text-tertiary\">v{d.version}</div> : null}\n        </div>\n        <OwnerIcon\n          size={12}\n          className={`shrink-0 ${d.isShared ? 'text-text-tertiary' : 'text-accent-purple'}`}\n          aria-label={d.isShared ? 'Shared agent' : 'Personal agent'}\n        />\n        <span\n          className={`size-2 rounded-full shrink-0 ${d.isActive ? 'bg-status-success-bg' : 'bg-bg-disabled'}`}\n          title={d.isActive ? 'Active' : 'Offline'}\n        />\n      </div>\n\n      <div className=\"flex items-center gap-1\">\n        <span\n          className={`inline-flex items-center gap-1 px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider rounded ${hostConfig.badge}`}\n        >\n          <HostIcon size={9} />\n          {d.hostType ?? 'HOST'}\n        </span>\n        {d.hostLabel ? (\n          <span className=\"text-[10px] text-text-tertiary truncate\">{d.hostLabel}</span>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nexport const MeshAgentNode = memo(MeshAgentNodeComponent);\n"],"mappings":";;;;;;AA+BA,SAAS,EAAuB,EAAE,SAAM,eAAuB;CAC7D,IAAM,IAAI,GACJ,IAAa,EAAkB,EAAE,SAAS,EAC1C,IAAW,EAAW,MACtB,IAAY,EAAE,WAAW,IAAQ;AAUvC,QACE,kBAAC,OAAD;EACE,WAAW,2GACT,IACI,8DACA;EAEN,OAAO,EAAE,OAAO,KAAK;EACrB,MAAM,EAAE,aAAa,WAAW,KAAA;EAChC,UAAU,EAAE,aAAa,IAAI,KAAA;EAC7B,cAAY,EAAE,aAAa,cAAc,EAAE,SAAS,KAAA;EACpD,YAnBmB,MAA+C;AAC/D,KAAE,eACH,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,gBAAgB,EACtB,EAAE,YAAY;;YAKhB;GAYE,kBAAC,GAAD;IACE,MAAK;IACL,UAAU,EAAS;IACnB,WAAU;IACV,CAAA;GACF,kBAAC,GAAD;IACE,MAAK;IACL,UAAU,EAAS;IACnB,WAAU;IACV,CAAA;GAEF,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD;MAAK,MAAM;MAAI,WAAU;MAAoC,CAAA;KAC7D,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAoD,EAAE;OAAW,CAAA,EAC/E,EAAE,UAAU,kBAAC,OAAD;OAAK,WAAU;iBAAf,CAAgD,KAAE,EAAE,QAAc;WAAG,KAC9E;;KACN,kBAAC,GAAD;MACE,MAAM;MACN,WAAW,YAAY,EAAE,WAAW,uBAAuB;MAC3D,cAAY,EAAE,WAAW,iBAAiB;MAC1C,CAAA;KACF,kBAAC,QAAD;MACE,WAAW,gCAAgC,EAAE,WAAW,yBAAyB;MACjF,OAAO,EAAE,WAAW,WAAW;MAC/B,CAAA;KACE;;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KACE,WAAW,sGAAsG,EAAW;eAD9H,CAGE,kBAAC,GAAD,EAAU,MAAM,GAAK,CAAA,EACpB,EAAE,YAAY,OACV;QACN,EAAE,YACD,kBAAC,QAAD;KAAM,WAAU;eAA2C,EAAE;KAAiB,CAAA,GAC5E,KACA;;GACF;;;AAIV,IAAa,IAAgB,EAAK,EAAuB"}