@skyhook-io/radar-app 1.14.6 → 1.16.0

package/src/components/settings/LocalIntegrationStatus.tsx

@@ -0,0 +1,50 @@
+import { useOpenCostSummary, usePrometheusStatus, type useArgoStatus } from '../../api/client'
+import { costIntegrationUnavailableMessage, costSourceLabel } from '../cost/source'
+import type { IntegrationKind, IntegrationProfile } from './LocalConnectionSettings'
+import { Badge, Collapse } from '@skyhook-io/k8s-ui'
+import { useRef } from 'react'
+
+export function LocalIntegrationStatus({ kind, profile, argo, busy, changedAt }: {
+  kind: IntegrationKind
+  profile: IntegrationProfile
+  argo: ReturnType<typeof useArgoStatus>
+  busy: boolean
+  changedAt: number
+}) {
+  const prom = usePrometheusStatus(kind === 'metrics')
+  const cost = useOpenCostSummary(kind === 'cost')
+  const query = kind === 'metrics' ? prom : kind === 'cost' ? cost : argo
+  // Background polls keep the last status; only the first load, or a result
+  // older than the latest saved integration change, reads as "Checking…".
+  const checking = busy || query.isPlaceholderData || (query.isFetching && !query.data) ||
+    Math.max(query.dataUpdatedAt, query.errorUpdatedAt) < changedAt
+  let status = 'Checking…'
+  let detail: string | undefined
+  if (!checking) {
+    if (query.isError) status = 'Status unavailable'
+    else if (kind === 'metrics' && prom.data) {
+      status = prom.data.connected ? 'Connected' : prom.data.discovering ? 'Discovering…' : 'Not connected'
+      detail = prom.data.connected ? !profile.url ? `Discovered: ${prom.data.address}` : undefined : prom.data.error
+    } else if (kind === 'argocd' && argo.data) {
+      status = argo.data.connected ? argo.data.anonymous ? 'Connected · no token needed' : 'Connected' : 'Not connected'
+      detail = argo.data.connected ? !profile.url ? `Discovered: ${argo.data.address}` : undefined : argo.data.reason
+    } else if (kind === 'cost' && cost.data) {
+      status = cost.data.available ? `Available · ${costSourceLabel(cost.data.source)}`
+        : ['no_prometheus', 'no_cost_source', 'no_metrics'].includes(cost.data.reason ?? '') ? 'No cost data' : 'Unavailable'
+      detail = cost.data.reason ? costIntegrationUnavailableMessage(cost.data.reason)
+        ?? (cost.data.reason === 'query_error' ? 'The active cost source query failed.' : undefined) : undefined
+    }
+  }
+  const lastDetail = useRef({ text: detail, visible: !!detail })
+  if (!checking) lastDetail.current = { text: detail ?? lastDetail.current.text, visible: !!detail }
+  const configured = !!(profile.url || profile.secretSet || profile.headerKeys.length || profile.clusterId || profile.mode === 'prometheus')
+  const failed = !checking && (query.isError || configured && ['Not connected', 'Unavailable', 'No cost data'].includes(status))
+  return (
+    <div role="group" className="contents text-xs text-theme-text-secondary" aria-label="Current connection">
+      <Badge severity={status.startsWith('Connected') || status.startsWith('Available') ? 'success' : failed ? 'warning' : 'neutral'}>{status}</Badge>
+      <Collapse open={lastDetail.current.visible} className="basis-full min-w-0">
+        <p className={`break-words text-theme-text-tertiary ${checking ? 'invisible' : ''}`}>{lastDetail.current.text}</p>
+      </Collapse>
+    </div>
+  )
+}

package/src/components/settings/PrivacySection.test.tsx

@@ -0,0 +1,84 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderToString } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import type { UsageDataStatus } from '../../api/usage-data'
+import { exampleReport, exampleStatus } from '../../api/usage-data.fixtures'
+
+let current: UsageDataStatus
+
+vi.mock('../../api/usage-data', async (orig) => ({
+  ...(await orig<typeof import('../../api/usage-data')>()),
+  useUsageData: () => ({ data: current, isLoading: false, error: null }),
+  useSetUsageData: () => ({ mutate: vi.fn(), isPending: false }),
+}))
+
+import { PrivacySection } from './PrivacySection'
+
+function make(patch: Partial<UsageDataStatus>): UsageDataStatus {
+  return exampleStatus({ preview: exampleReport({ views: { topology: 3 } }), ...patch })
+}
+
+function render(status: UsageDataStatus) {
+  current = status
+  return renderToString(
+    <QueryClientProvider client={new QueryClient()}>
+      <PrivacySection active />
+    </QueryClientProvider>,
+  )
+}
+
+describe('PrivacySection', () => {
+  it('shows an example report and promises nothing is sent while off', () => {
+    const html = render(make({}))
+    expect(html).toContain('See an example report')
+    expect(html).toContain('What isn')
+    expect(html).not.toContain('usage-report.json')
+    expect(html).toContain('aria-checked="false"')
+  })
+
+  it('shows the pending report and where it lives once on', () => {
+    const html = render(make({ state: 'on', source: 'user', nextReportAt: '2026-09-30T12:00:00Z' }))
+    expect(html).toContain('See the next report')
+    expect(html).toContain('usage-report.json')
+    expect(html).toContain('&quot;topology&quot;: 3')
+  })
+
+  it('names the control that fixed the choice', () => {
+    expect(render(make({ state: 'off', source: 'deployment', canChange: false }))).toContain('Radar Cloud manages')
+    const helm = make({ state: 'on', source: 'env', canChange: false, shared: true })
+    expect(render({ ...helm, preview: { ...helm.preview, mode: 'in-cluster' } })).toContain('Helm value usageReporting.enabled')
+    expect(render(make({ state: 'off', source: 'env', canChange: false }))).toContain('RADAR_USAGE_REPORTING=off')
+  })
+})
+
+describe('PrivacySection intro', () => {
+  it('does not claim data stays on this machine for an in-cluster install', () => {
+    const base = make({ state: 'off', source: 'deployment', canChange: false })
+    const html = render({ ...base, preview: { ...base.preview, mode: 'in-cluster' } })
+    expect(html).toContain('from inside it')
+    expect(html).not.toContain('from this machine')
+  })
+})
+
+describe('PrivacySection on a shared Radar', () => {
+  it('points at the Helm value while nothing set it', () => {
+    const base = make({ shared: true, canChange: false })
+    const html = render({ ...base, preview: { ...base.preview, mode: 'in-cluster' } })
+    expect(html).toContain('Applies to everyone using this Radar.')
+    expect(html).toContain('usageReporting.enabled')
+    expect(html).toContain('aria-checked="false"')
+  })
+
+  it('uses the environment variable outside a cluster', () => {
+    expect(render(make({ shared: true, canChange: false }))).toContain('RADAR_USAGE_REPORTING=on')
+  })
+})
+
+describe('PrivacySection storage and log wording', () => {
+  it('says logs, not sends, for development builds', () => {
+    const html = render(make({ state: 'on', source: 'user', developmentBuild: true, nextReportAt: '2026-09-25T12:00:00Z' }))
+    expect(html).toContain('logs')
+    expect(html).toContain('reports go to the log, never sent')
+    expect(render(make({ state: 'on', source: 'user', nextReportAt: '2026-09-25T12:00:00Z' }))).toContain('sends')
+  })
+})

package/src/components/settings/PrivacySection.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useState } from 'react'
+import { ExternalLink } from 'lucide-react'
+import { Collapse, CollapseChevron, useDisclosure } from '@skyhook-io/k8s-ui/components/ui/Collapse'
+import { ConfigToggle, SubHeading } from './controls'
+import { isRecording, useSetUsageData, useUsageData, type UsageDataStatus } from '../../api/usage-data'
+
+const DOCS_URL = 'https://radarhq.io/docs/configuration/usage-stats'
+
+export function PrivacySection({ active }: { active: boolean }) {
+  const { data: status, isLoading, error, refetch } = useUsageData(active, { fresh: true })
+  const setUsageData = useSetUsageData()
+
+  // The pane stays mounted while hidden, so refetch each time it is revealed.
+  useEffect(() => {
+    if (active) void refetch()
+  }, [active, refetch])
+
+  if (isLoading) {
+    return <p className="text-sm text-theme-text-tertiary">Loading…</p>
+  }
+  if (error || !status) {
+    return <p className="text-sm text-theme-text-secondary">Couldn't load privacy settings.</p>
+  }
+
+  const recording = isRecording(status)
+
+  return (
+    <div className="space-y-6">
+      <p className="text-sm text-theme-text-secondary">
+        {status.preview.mode === 'in-cluster' || status.preview.mode === 'cloud'
+          ? 'Radar reads this cluster from inside it and keeps what it reads there.'
+          : 'Radar reads your cluster from this machine and keeps what it reads here.'}
+      </p>
+
+      <section className="space-y-3">
+        <SubHeading>Usage stats</SubHeading>
+        <ConfigToggle
+          label="Send anonymous usage stats"
+          description={<>Shows us which features get used, so we know what to build next.<br />Sent straight to us, with no third-party trackers.</>}
+          value={recording}
+          disabled={!status.canChange || setUsageData.isPending}
+          onChange={(v) => setUsageData.mutate(v)}
+        />
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-xs">
+          <dt className="text-theme-text-tertiary">What's sent</dt>
+          <dd className="text-theme-text-secondary">
+            The views you open, the actions and MCP tools you use, and each cluster's version,
+            platform, size range and known integrations.
+          </dd>
+          <dt className="text-theme-text-tertiary">What isn't</dt>
+          <dd className="text-theme-text-secondary">
+            Names, contents, logs, identifiers, timestamps, or the resources in your clusters.
+          </dd>
+        </dl>
+        <ManagedReason status={status} />
+        <SharedNote status={status} />
+        <ReportPreview status={status} />
+      </section>
+
+    </div>
+  )
+}
+
+function ManagedReason({ status }: { status: UsageDataStatus }) {
+  let text: string | null = null
+  switch (status.source) {
+    case 'env':
+      text = status.shared && status.preview.mode === 'in-cluster'
+        ? 'Set for everyone by the Helm value usageReporting.enabled.'
+        : `Set by RADAR_USAGE_REPORTING=${status.state}.`
+      break
+    case 'deployment':
+      text = 'Radar Cloud manages usage data for this installation.'
+      break
+  }
+  if (!text && status.developmentBuild && isRecording(status)) {
+    text = 'Development build: reports go to the log, never sent.'
+  }
+  return text ? <p className="text-xs text-theme-text-tertiary">{text}</p> : null
+}
+
+// A shared Radar is decided by its configuration; say where, while nothing set it.
+function SharedNote({ status }: { status: UsageDataStatus }) {
+  if (!status.shared || status.source !== 'default') return null
+  return (
+    <p className="text-xs text-theme-text-tertiary">
+      Applies to everyone using this Radar. Set it with{' '}
+      {status.preview.mode === 'in-cluster'
+        ? <>the Helm value <code className="inline-code">usageReporting.enabled</code></>
+        : <code className="inline-code">RADAR_USAGE_REPORTING=on</code>}.
+    </p>
+  )
+}
+
+function ReportPreview({ status }: { status: UsageDataStatus }) {
+  const recording = isRecording(status)
+  const [open, setOpen] = useState(false)
+  const disclosure = useDisclosure(open)
+  // Development builds write the report to the log instead of sending it.
+  const logsOnly = status.developmentBuild
+  const next = status.nextReportAt ? new Date(status.nextReportAt) : null
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between gap-3">
+        <button
+          type="button"
+          onClick={() => setOpen(o => !o)}
+          {...disclosure.buttonProps}
+          className="flex items-center gap-1 text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary"
+        >
+          <CollapseChevron open={open} />
+          {recording ? 'See the next report' : 'See an example report'}
+          {recording && next && (
+            <span className="font-normal text-theme-text-tertiary">
+              {' '}· {logsOnly ? 'logs' : 'sends'} {next.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}
+            </span>
+          )}
+        </button>
+        <a
+          href={DOCS_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-1 text-xs text-theme-text-secondary hover:text-theme-text-primary hover:underline"
+        >
+          How it works <ExternalLink className="w-3 h-3" aria-hidden />
+        </a>
+      </div>
+      <Collapse open={open} id={disclosure.panelId}>
+        <pre className="max-h-80 overflow-auto rounded-md border border-theme-border bg-theme-elevated px-3 py-2 text-[11px] leading-relaxed font-mono text-theme-text-primary">
+          {JSON.stringify(status.preview, null, 2)}
+        </pre>
+      </Collapse>
+      {recording && status.canChange && (
+        <p className="text-xs text-theme-text-tertiary">
+          Waiting in <code className="inline-code">~/.radar/usage-report.json</code>. Turning this off deletes it.
+        </p>
+      )}
+    </div>
+  )
+}

package/src/components/settings/PrometheusConfigField.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useRef, type ComponentProps } from 'react'
+import { apiUrl, getApiBase, getAuthHeaders, getCredentialsMode } from '../../api/config'
+import { PrometheusConnectionForm, type PrometheusApplyResult } from './PrometheusConnectionForm'
+
+export function PrometheusConfigField({ onBusyChange, ...props }: Omit<ComponentProps<typeof PrometheusConnectionForm>, 'onApply'> & { onBusyChange?: (busy: boolean) => void }) {
+  const request = useRef<AbortController | null>(null)
+  useEffect(() => () => request.current?.abort(), [])
+  useEffect(() => () => onBusyChange?.(false), [onBusyChange])
+  const apply = async (url: string, headers?: Record<string, string>): Promise<PrometheusApplyResult> => {
+    if (request.current) throw new Error('A connection update is already in progress.')
+    const controller = new AbortController(); request.current = controller
+    const base = getApiBase()
+    onBusyChange?.(true)
+    try {
+      const response = await fetch(apiUrl('/integrations/prometheus'), {
+        method: 'PUT', signal: controller.signal, credentials: getCredentialsMode(),
+        headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+        body: JSON.stringify({ prometheusUrl: url, ...(headers !== undefined ? { headers } : {}) }),
+      })
+      const data = await response.json().catch(() => ({})) as PrometheusApplyResult
+      if (controller.signal.aborted || base !== getApiBase()) throw new Error('Cluster changed; reload Settings.')
+      if (!response.ok) throw new Error(data.error || `Request failed (${response.status})`)
+      return data
+    } finally {
+      if (request.current === controller) request.current = null
+      if (!controller.signal.aborted) onBusyChange?.(false)
+    }
+  }
+  return <PrometheusConnectionForm {...props} onApply={apply} />
+}

package/src/components/settings/PrometheusConnectionForm.tsx

@@ -0,0 +1,295 @@
+import { useEffect, useRef, useState, useId, type ReactNode } from 'react'
+import { Check, Info, Loader2, Plug, Plus, X } from 'lucide-react'
+import { Collapse, Input } from '@skyhook-io/k8s-ui'
+import { Tooltip } from '../ui/Tooltip'
+import { prometheusHeadersFromRows } from './settings-state'
+import { ConnectionHeadersEditor, type HeaderOperation } from './ConnectionHeadersEditor'
+import { FormSaveActions, type FormFeedback } from './FormSaveActions'
+
+export interface PrometheusApplyResult { connected: boolean; address?: string; error?: string }
+
+type ApplyState =
+  | { status: 'idle' }
+  | { status: 'applying' }
+  | { status: 'connected'; address: string }
+  | { status: 'unreachable'; error: string } // persisted, but the probe failed
+  | { status: 'failed'; error: string }       // request itself failed — nothing saved
+
+type HeaderRow = { key: string; value: string }
+
+export function PrometheusConnectionForm({
+  local,
+  value,
+  onChange,
+  configuredHeaderKeys,
+  serverManaged,
+  headersManaged,
+  urlFromFlag,
+  onApplied,
+  onApply,
+  onDirtyChange,
+  onApplyOperations,
+  environmentHeaderKeys = [],
+  dirty = false,
+  onDiscard,
+  connectionAction,
+  feedback,
+}: {
+  local: boolean
+  value: string
+  onChange: (value: string) => void
+  configuredHeaderKeys: string[]
+  serverManaged: boolean
+  headersManaged: boolean
+  urlFromFlag: boolean
+  onApplied?: (url: string) => void
+  onApply: (url: string, headers?: Record<string, string>) => Promise<PrometheusApplyResult>
+  onDirtyChange?: (dirty: boolean) => void
+  onApplyOperations?: (url: string, operations: HeaderOperation[]) => Promise<PrometheusApplyResult | null>
+  environmentHeaderKeys?: string[]
+  dirty?: boolean
+  onDiscard?: () => void
+  connectionAction?: ReactNode
+  feedback?: FormFeedback
+}) {
+  const mounted = useRef(true)
+  const urlId = useId()
+  useEffect(() => { mounted.current = true; return () => { mounted.current = false } }, [])
+  const [apply, setApply] = useState<ApplyState>({ status: 'idle' })
+  // null = not editing headers (preserve what's stored). A non-null array means
+  // the user opened the editor; see handleApply for how rows become a
+  // replacement (values are write-only, so the server never sends them back).
+  const [headerRows, setHeaderRows] = useState<HeaderRow[] | null>(null)
+  // Show the server's configured header keys, but let a successful apply override
+  // optimistically (config isn't refetched). Derived from the prop — not a
+  // mount-time snapshot — so it stays correct as config loads asynchronously.
+  const [appliedKeys, setAppliedKeys] = useState<string[] | null>(null)
+  const [operations, setOperations] = useState<HeaderOperation[]>([])
+  const storedKeys = appliedKeys ?? configuredHeaderKeys
+  useEffect(() => { onDirtyChange?.(headerRows !== null || operations.some(operation => operation.action !== 'keep')) }, [headerRows, operations, onDirtyChange])
+
+  const clearStatus = () => {
+    if (apply.status !== 'applying') setApply({ status: 'idle' })
+  }
+
+  // Footer Reset (and any external edit) clears the URL field without a keystroke;
+  // drop a stale "Connected"/"Saved" status so it doesn't describe an emptied field.
+  useEffect(() => {
+    setApply((s) => (s.status === 'idle' || s.status === 'applying' ? s : { status: 'idle' }))
+  }, [value])
+
+  const handleApply = async () => {
+    setApply({ status: 'applying' })
+    // Decide what to do with headers. undefined = leave them untouched. Only send
+    // a replacement when the editor has real content, or {} when the user emptied
+    // every row (explicit clear) — blank in-progress rows must NOT wipe stored
+    // secrets just because the editor happens to be open for a URL-only change.
+    try {
+      const editedHeaders = prometheusHeadersFromRows(headerRows)
+      const editedOperations = operations.filter(operation => operation.key.trim() || operation.value)
+      if (onApplyOperations) {
+        const names = new Set<string>()
+        for (const operation of editedOperations) {
+          const name = operation.key.trim().toLowerCase()
+          if (!name) throw new Error('Enter a name for each header with a value.')
+          if (names.has(name)) throw new Error(`Header names must be unique: ${operation.key.trim()}.`)
+          if (operation.action === 'set' && !operation.value) throw new Error(`Enter a value for ${operation.key.trim()}.`)
+          names.add(name)
+        }
+      }
+      const data = onApplyOperations ? await onApplyOperations(value.trim(), editedOperations) : await onApply(value.trim(), editedHeaders)
+      if (!mounted.current) return
+      if (!data) { setApply({ status: 'idle' }); return }
+      onApplied?.(value.trim())
+      if (editedHeaders !== undefined) {
+        setAppliedKeys(Object.keys(editedHeaders).sort())
+      }
+      if (headerRows !== null) {
+        setHeaderRows(null)
+      }
+      setOperations([])
+      if (data.connected) {
+        setApply({ status: 'connected', address: data.address || value.trim() })
+      } else {
+        setApply({ status: 'unreachable', error: data.error || 'not reachable' })
+      }
+    } catch (err) {
+      if (mounted.current) setApply({ status: 'failed', error: err instanceof Error ? err.message : String(err) })
+    }
+  }
+
+  return (
+    <div>
+      <div className="mb-4 space-y-1">
+        <p className="text-sm text-theme-text-secondary">
+          Connect a Prometheus-compatible backend, such as Prometheus, VictoriaMetrics, Thanos or Grafana Mimir.
+        </p>
+      </div>
+      <div className="flex flex-wrap items-center gap-1 mb-1">
+        <label htmlFor={urlId} className="text-sm font-medium text-theme-text-primary">Metrics backend URL</label>
+        <Tooltip content="Use a base URL reachable from Radar, not your browser. Include the backend path prefix, but not /api/v1/query. Available charts depend on the metrics collected.">
+          <button type="button" aria-label="Metrics URL help" className="text-theme-text-tertiary"><Info className="w-3.5 h-3.5" /></button>
+        </Tooltip>
+      </div>
+      <p className="text-xs text-theme-text-tertiary mb-1">
+        Leave empty to discover a backend in this cluster.
+      </p>
+      <div className="flex items-center gap-2">
+        <Input
+          id={urlId}
+          value={value}
+          disabled={apply.status === 'applying'}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder="http://prometheus-server.monitoring:9090"
+          className="flex-1 min-w-0 px-3 py-1.5 text-sm bg-theme-elevated border border-theme-border rounded-md text-theme-text-primary placeholder:text-theme-text-tertiary focus:outline-none focus:border-skyhook-500"
+        />
+      </div>
+      {connectionAction}
+      {!onApplyOperations && <p className="mt-2 text-xs text-theme-text-tertiary">
+        {local ? 'Applies only to this cluster.' : 'Changes affect this Radar installation. Use deployment settings for configuration that survives Pod replacement.'}
+      </p>}
+      {value.startsWith('http://') && (configuredHeaderKeys.length > 0 || operations.some(operation => operation.action === 'set')) && (
+        <p className="mt-2 text-xs text-warning-text">Headers will travel over unencrypted HTTP. Prefer HTTPS outside a trusted private network.</p>
+      )}
+      {serverManaged && (
+        <p className="mt-2 text-xs text-theme-text-secondary">
+          Server controlled by startup configuration. To set or change the server,
+          {local ? ' update the startup flags or environment references and restart Radar.' : ' update the deployment configuration (such as Helm values) and restart Radar.'}
+        </p>
+      )}
+      {urlFromFlag && (
+        <p className="mt-1 text-xs text-theme-text-secondary">
+          Path edits apply until restart; the URL supplied at launch will then be restored.
+        </p>
+      )}
+
+      {onApplyOperations ? <ConnectionHeadersEditor keys={configuredHeaderKeys} environmentKeys={environmentHeaderKeys} value={operations} onChange={setOperations} /> : <section className="mt-5 border-t border-theme-border pt-4">
+        <h4 className="text-sm font-medium text-theme-text-primary mb-2">Authentication headers</h4>
+        <p className="text-xs text-theme-text-tertiary mb-3">
+          Optional authentication or tenant headers, such as Authorization or X-Scope-OrgID. Requires a backend URL.
+          {!headersManaged && storedKeys.length > 0 && ' Changing servers requires replacing or clearing the saved headers.'}
+        </p>
+        {headerRows === null ? (
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <span className="min-w-0 break-words text-xs text-theme-text-tertiary">
+              {storedKeys.length > 0
+                ? <><span className="text-theme-text-secondary">{storedKeys.join(', ')}</span> (values hidden)</>
+                : 'No headers configured'}
+            </span>
+            {!headersManaged && <button
+              onClick={() => { setHeaderRows([{ key: '', value: '' }]); clearStatus() }}
+              disabled={apply.status === 'applying'}
+              className="shrink-0 text-xs font-medium text-accent-text hover:underline"
+            >
+              {storedKeys.length > 0 ? 'Edit headers' : 'Add auth headers'}
+            </button>}
+          </div>
+        ) : (
+          <div className="rounded-md border border-theme-border bg-theme-elevated/40 p-2.5 space-y-2">
+            {headerRows.map((row, i) => (
+              <div key={i} className="flex items-center gap-2">
+                <Input
+                  value={row.key}
+                  disabled={apply.status === 'applying'}
+                  onChange={(e) => {
+                    setHeaderRows((rows) => rows!.map((r, j) => j === i ? { ...r, key: e.target.value } : r))
+                    clearStatus()
+                  }}
+                  placeholder="Header (e.g. Authorization)"
+                  className="flex-1 min-w-0 px-2.5 py-1.5 text-xs bg-theme-base border border-theme-border rounded-md text-theme-text-primary placeholder:text-theme-text-tertiary focus:outline-none focus:border-skyhook-500"
+                />
+                <input
+                  type="password"
+                  value={row.value}
+                  disabled={apply.status === 'applying'}
+                  onChange={(e) => {
+                    setHeaderRows((rows) => rows!.map((r, j) => j === i ? { ...r, value: e.target.value } : r))
+                    clearStatus()
+                  }}
+                  placeholder="Value (e.g. Bearer …)"
+                  className="flex-1 min-w-0 px-2.5 py-1.5 text-xs bg-theme-base border border-theme-border rounded-md text-theme-text-primary placeholder:text-theme-text-tertiary focus:outline-none focus:border-skyhook-500"
+                />
+                <Tooltip content="Remove header" wrapperClassName="shrink-0">
+                  <button
+                    onClick={() => setHeaderRows((rows) => rows!.filter((_, j) => j !== i))}
+                    disabled={apply.status === 'applying'}
+                    className="p-1 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-hover rounded"
+                  >
+                    <X className="w-3.5 h-3.5" />
+                  </button>
+                </Tooltip>
+              </div>
+            ))}
+            <div className="flex items-center justify-between gap-2">
+              <button
+                onClick={() => setHeaderRows((rows) => [...rows!, { key: '', value: '' }])}
+                disabled={apply.status === 'applying'}
+                className="flex items-center gap-1 text-xs font-medium text-accent-text hover:underline"
+              >
+                <Plus className="w-3 h-3" /> Add header
+              </button>
+              <button
+                onClick={() => { setHeaderRows(null); clearStatus() }}
+                disabled={apply.status === 'applying'}
+                className="text-xs text-theme-text-tertiary hover:text-theme-text-primary"
+              >
+                Cancel
+              </button>
+            </div>
+            <p className="text-xs text-theme-text-tertiary">
+              Saved when you click Apply now. Entered headers replace all stored
+              ones — values are hidden, so re-enter any you want to keep. Leave
+              all rows blank to keep existing headers unchanged. To remove all saved
+              headers, remove every row and click Apply now.
+            </p>
+          </div>
+        )}
+        {headersManaged ? (
+          <p className="mt-2 text-xs text-theme-text-secondary">
+            Headers are controlled by startup configuration. Change them at their source and restart Radar.
+          </p>
+        ) : storedKeys.length > 0 && (
+          <button
+            onClick={() => { setHeaderRows([]); clearStatus() }}
+            disabled={apply.status === 'applying'}
+            className="mt-2 text-xs text-theme-text-secondary hover:underline"
+          >
+            Remove saved headers
+          </button>
+        )}
+        {headerRows?.length === 0 && (
+          <p className="mt-1 text-xs text-warning-text">Headers will be removed when you click Apply now.</p>
+        )}
+      </section>}
+      <div className="mt-4 space-y-1">
+        {onDiscard ? <FormSaveActions dirty={dirty} busy={apply.status === 'applying'} onSave={() => void handleApply()} onDiscard={onDiscard} feedback={feedback} error={apply.status === 'failed' ? apply.error : undefined} /> : <Tooltip content="Save and apply this connection, then check reachability. Applying clears any workload scope override and resumes automatic identity matching.">
+          <button
+            type="button"
+            onClick={handleApply}
+            disabled={apply.status === 'applying'}
+            className="flex items-center gap-1.5 px-3 py-2 text-xs font-medium btn-brand rounded-md disabled:opacity-50"
+          >
+            {apply.status === 'applying'
+              ? <Loader2 className="w-3.5 h-3.5 animate-spin" />
+              : <Plug className="w-3.5 h-3.5" />}
+            Apply now
+          </button>
+        </Tooltip>}
+        {!onDiscard && <Collapse open={apply.status === 'failed' || (!onApplyOperations && apply.status !== 'applying')}>
+        {onApplyOperations && (apply.status === 'connected' || apply.status === 'unreachable') ? null : apply.status === 'connected' ? (
+          <p role="status" className="flex items-center gap-1 text-xs text-theme-text-secondary">
+            <Check className="w-3 h-3 shrink-0 text-[var(--color-success-dark)] dark:text-[var(--color-success-light)]" />
+            Connected to {apply.address} — applied, no restart needed
+          </p>
+        ) : apply.status === 'unreachable' ? (
+          <p role="status" className="text-xs text-warning-text">Saved, but not reachable: {apply.error}</p>
+        ) : apply.status === 'failed' ? (
+          <p role="alert" className="text-xs text-semantic-error">Couldn't apply: {apply.error}</p>
+        ) : !onApplyOperations ? (
+          <p className="text-xs text-theme-text-tertiary">Saves and applies before checking the connection.</p>
+        ) : null}
+        </Collapse>}
+      </div>
+    </div>
+  )
+}