@burdenoff/microfe-vibecontrols 2026.623.2 → 2026.623.4

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

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

package/dist/components/ai/AIContextsTab.js

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

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

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

package/dist/components/ai/AIOverviewTab.js

@@ -13,7 +13,7 @@ import { MotionItem as g, MotionList as _ } from "@burdenoff/fe-libs/shared/moti
 var v = {
 	active: "bg-status-success-bg-subtle text-status-success-text",
 	idle: "bg-status-warning-bg-subtle text-status-warning-text",
-	processing: "bg-[var(--color-accent-soft)] text-action-primary-bg",
+	processing: "bg-[var(--color-accent-soft)] text-text-primary",
 	error: "bg-status-error-bg-subtle text-status-error-text",
 	terminated: "bg-bg-sunken text-text-secondary"
 };

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

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

package/dist/components/ai/AIPromptsTab.js

@@ -77,7 +77,7 @@ function y({ agent: y }) {
 								}), /* @__PURE__ */ v("button", {
 									type: "button",
 									onClick: () => M(!j),
-									className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-action-primary-bg bg-[var(--color-accent-soft)] rounded-md hover:bg-[var(--color-accent-soft)] transition-colors",
+									className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-text-primary bg-[var(--color-accent-soft)] rounded-md hover:bg-[var(--color-accent-soft)] transition-colors",
 									children: [/* @__PURE__ */ _(g, { className: "size-3.5" }), b("vibecontrols.ai.prompts.generateFromTemplate", "Generate from Template")]
 								})]
 							}),