@skyhook-io/radar-app 1.12.3 → 1.13.0

package/src/components/settings/SettingsDialog.tsx

@@ -13,15 +13,26 @@ import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
 import { apiUrl, getAuthHeaders, getCredentialsMode, routePath } from '../../api/config'
 import {
   useCloudRole, useVersionCheck, useClusterInfo, usePrometheusStatus, useArgoStatus, useCapabilities,
+  useOpenCostSummary,
 } from '../../api/client'
 import { useCapabilitiesContext } from '../../contexts/CapabilitiesContext'
-import { Input, SelectMenu } from '@skyhook-io/k8s-ui'
+import { Input, ResourceRefBadge, SelectMenu, type ResourceRef } from '@skyhook-io/k8s-ui'
+import { Collapse, CollapseChevron } from '@skyhook-io/k8s-ui/components/ui/Collapse'
 import { Tooltip } from '../ui/Tooltip'
 import { AISettingsSection, type AIDraft } from '../diagnose/AISettings'
 import { MyPermissionsContent } from './MyPermissionsDialog'
 import { useDiagnose } from '../diagnose/DiagnoseContext'
 import { currencyOptionsForValue } from './currency-options'
 import { versionUpdateURL } from '../../utils/version'
+import {
+  costConfigurationAction,
+  costFreshnessLabel,
+  costIntegrationUnavailableMessage,
+  costSourceLabel,
+} from '../cost/source'
+import { costSourceApplyLabel, shouldOfferCostReview, shouldShowSettingsFooter } from './settings-state'
+import type { SettingsSectionId } from './settings-state'
+export type { SettingsSectionId } from './settings-state'
 
 // The loopback URL an MCP client is told to connect to. Shared by the overview
 // row and the MCP section: both must carry the base path, or the URL they
@@ -43,6 +54,9 @@ interface Config {
   historyLimit?: number
   prometheusUrl?: string
   opencostCurrency?: string
+  costSource?: 'auto' | 'prometheus' | 'kubecost'
+  kubecostUrl?: string
+  kubecostClusterId?: string
   argoCdUrl?: string
   argoCdInsecureTls?: boolean
   mcp?: boolean | null
@@ -55,6 +69,9 @@ interface ConfigResponse {
   isDesktop: boolean
   openCostCurrencyManaged?: boolean
   prometheusHeaderKeys?: string[]
+  kubecostApiKeySet?: boolean
+  kubecostEnvManaged?: boolean
+  kubecostEnvError?: string
   // True when an Argo CD auth token is stored. The token itself is never
   // returned — the card shows a "configured" placeholder and omits the token
   // from the PUT unless the user changes or clears it.
@@ -71,23 +88,26 @@ interface ConfigResponse {
   argoCdCliSession?: { server: string; user: string; insecure?: boolean }
 }
 
+interface CostSourceApplyResponse {
+  source: 'prometheus' | 'kubecost'
+  address?: string
+  service?: ResourceRef & { kind: 'Service'; port: number }
+  apiKeySet: boolean
+}
+
 interface SettingsDialogProps {
   open: boolean
   onClose: () => void
   initialSection?: SettingsSectionId
+  onNavigateToResource?: (resource: ResourceRef) => void
 }
 
 // The settings surface splits into three honest apply buckets:
-//   • Persisted config (kubeconfig, server, timeline, MCP, cost currency) —
-//     saved by the owner-gated footer. Currency applies live unless a startup
-//     flag owns it; the rest restart.
-//   • Live integrations (Prometheus, Argo CD) — their own Apply/Connect endpoints
+//   • Persisted startup config (kubeconfig, server, timeline, MCP) — saved by
+//     the owner-gated footer and applied after restart.
+//   • Live integrations (Prometheus, cost source, Argo CD) — their own Apply/Connect endpoints
 //     re-point the running server; effect immediately, NOT part of footer dirty.
-//   • AI diagnose — client-side prefs, self-saving, editable by everyone.
-export type SettingsSectionId =
-  | 'overview' | 'perms' | 'connection' | 'prometheus' | 'cost' | 'argocd' | 'ai' | 'advanced'
-
-// Persisted footer fields include startup settings plus the live currency override.
+//   • Self-saving preferences (cost currency, AI diagnose) — applied immediately.
 // Integration fields (prometheusUrl, argoCdUrl, argoCdInsecureTls) apply through
 // their own controls and are excluded here. Every field is normalized so
 // unset≡default doesn't read as a change.
@@ -103,7 +123,6 @@ function normalizeStartup(c: Config) {
     timelineDbPath: c.timelineDbPath ?? '',
     historyLimit: c.historyLimit ?? null,
     mcp: c.mcp ?? true,
-    opencostCurrency: c.opencostCurrency?.trim().toUpperCase() ?? '',
     restoreLastDesktopContext: c.restoreLastDesktopContext ?? true,
   }
 }
@@ -112,6 +131,7 @@ export function SettingsDialog({
   open,
   onClose,
   initialSection = 'overview',
+  onNavigateToResource,
 }: SettingsDialogProps) {
   const queryClient = useQueryClient()
   const dialogRef = useRef<HTMLDivElement>(null)
@@ -133,6 +153,12 @@ export function SettingsDialog({
   const [loadError, setLoadError] = useState<string | null>(null)
   const [section, setSection] = useState<SettingsSectionId>('overview')
   const [confirmingClose, setConfirmingClose] = useState(false)
+  const [costCredentialDirty, setCostCredentialDirty] = useState(false)
+  const [costDraftReset, setCostDraftReset] = useState(0)
+  const [costCurrencySaving, setCostCurrencySaving] = useState(false)
+  const configSavingRef = useRef(false)
+  const costCurrencySavingRef = useRef(false)
+  const pendingCloseActionRef = useRef<(() => void) | null>(null)
   const { data: argoSectionStatus, refetch: refetchArgoSectionStatus } = useArgoStatus(
     open && section === 'argocd'
   )
@@ -171,11 +197,15 @@ export function SettingsDialog({
     edN.timelineStorage !== svN.timelineStorage ||
     edN.timelineDbPath !== svN.timelineDbPath ||
     edN.historyLimit !== svN.historyLimit
-  const costDirty = edN.opencostCurrency !== svN.opencostCurrency
+  const costSourceDirty =
+    (editedConfig.costSource ?? 'auto') !== (configData?.file.costSource ?? 'auto') ||
+    (editedConfig.kubecostUrl ?? '').trim() !== (configData?.file.kubecostUrl ?? '').trim() ||
+    (editedConfig.kubecostClusterId ?? '').trim() !== (configData?.file.kubecostClusterId ?? '').trim()
+  const costIntegrationDirty = costSourceDirty || costCredentialDirty
   // Merged-pane dirty for the flat nav (Connection = cluster+server, Advanced = mcp+timeline).
   const connectionDirty = clusterDirty || serverDirty
   const advancedDirty = mcpDirty || timelineDirty
-  const configDirty = configData != null && (connectionDirty || costDirty || advancedDirty)
+  const configDirty = configData != null && (connectionDirty || advancedDirty)
 
   // Load config on open + snapshot AI prefs + pick a default section that's
   // actually accessible to the current identity.
@@ -184,6 +214,9 @@ export function SettingsDialog({
     setSaveMessage(null)
     setLoadError(null)
     setConfirmingClose(false)
+    pendingCloseActionRef.current = null
+    setCostCredentialDirty(false)
+    setCostDraftReset((current) => current + 1)
     setAiSaved(false)
     setAiDraft({
       agent: diag.selectedAgent,
@@ -227,7 +260,8 @@ export function SettingsDialog({
   }, [])
 
   const saveConfig = useCallback(async (): Promise<boolean> => {
-    if (!configData) return false
+    if (!configData || configSavingRef.current || costCurrencySavingRef.current) return false
+    configSavingRef.current = true
     setSaving(true)
     setSaveMessage(null)
     try {
@@ -235,10 +269,14 @@ export function SettingsDialog({
       // LAST-COMMITTED values (from configData.file), never an un-applied draft:
       // sending a typed-but-not-applied argoCdUrl trips the server-side origin
       // guard that clears the stored Argo token, and a stale value would revert a
-      // live-applied integration. configData.file is kept in sync on Apply/Connect.
+      // live-applied integration. configData.file is kept in sync after every live save.
       const body: Config = {
         ...editedConfig,
+        opencostCurrency: configData.file.opencostCurrency,
         prometheusUrl: configData.file.prometheusUrl,
+        costSource: configData.file.costSource,
+        kubecostUrl: configData.file.kubecostUrl,
+        kubecostClusterId: configData.file.kubecostClusterId,
         argoCdUrl: configData.file.argoCdUrl,
         argoCdInsecureTls: configData.file.argoCdInsecureTls,
       }
@@ -257,31 +295,56 @@ export function SettingsDialog({
       const committed = { ...body, opencostCurrency: saved.opencostCurrency }
       setEditedConfig((prev) => ({ ...prev, opencostCurrency: saved.opencostCurrency }))
       setConfigData((prev) => (prev ? { ...prev, file: committed } : prev))
-      if (costDirty && !configData.openCostCurrencyManaged) {
-        void queryClient.invalidateQueries({
-          predicate: (query) =>
-            typeof query.queryKey[0] === 'string' && query.queryKey[0].startsWith('opencost-'),
-        })
-      }
-      if (costDirty && configData.openCostCurrencyManaged) {
-        setSaveMessage(connectionDirty || advancedDirty
-          ? 'Saved. CLI/Helm currency remains active; restart without that override to apply it. Restart Radar for other changes.'
-          : 'Saved. CLI/Helm currency remains active; restart without that override to apply this setting.')
-      } else {
-        setSaveMessage(connectionDirty || advancedDirty
-          ? costDirty
-            ? 'Saved. Currency applied immediately; restart Radar for other changes.'
-            : 'Saved. Restart Radar to apply.'
-          : 'Saved. Applied immediately.')
-      }
+      setSaveMessage('Saved. Restart Radar to apply.')
       return true
     } catch (err) {
       setSaveMessage(`Error: ${err}`)
       return false
     } finally {
+      configSavingRef.current = false
       setSaving(false)
     }
-  }, [editedConfig, configData, costDirty, connectionDirty, advancedDirty, queryClient])
+  }, [editedConfig, configData])
+
+  const saveCostCurrency = useCallback(async (value: string): Promise<void> => {
+    if (!configData) throw new Error('Radar configuration is not available')
+    if (configSavingRef.current) throw new Error('Other settings are being saved')
+    if (costCurrencySavingRef.current) throw new Error('A currency change is already being saved')
+    costCurrencySavingRef.current = true
+    setCostCurrencySaving(true)
+    try {
+      const body: Config = {
+        ...configData.file,
+        opencostCurrency: value || undefined,
+      }
+      const res = await fetch(apiUrl('/config'), {
+        method: 'PUT',
+        credentials: getCredentialsMode(),
+        headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+        body: JSON.stringify(body),
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => null)
+        const message = data !== null && typeof data === 'object' && 'error' in data && typeof data.error === 'string'
+          ? data.error
+          : res.statusText
+        throw new Error(message)
+      }
+      const saved = await res.json() as Config
+      setEditedConfig((prev) => ({ ...prev, opencostCurrency: saved.opencostCurrency }))
+      setConfigData((prev) => prev ? {
+        ...prev,
+        file: { ...prev.file, opencostCurrency: saved.opencostCurrency },
+      } : prev)
+      void queryClient.invalidateQueries({
+        predicate: (query) =>
+          typeof query.queryKey[0] === 'string' && query.queryKey[0].startsWith('opencost-'),
+      })
+    } finally {
+      costCurrencySavingRef.current = false
+      setCostCurrencySaving(false)
+    }
+  }, [configData, queryClient])
 
   // AI prefs are client-side (localStorage) — commit the staged draft now.
   // setSelectedAgent clears model/effort (they're agent-specific), so set the
@@ -301,23 +364,48 @@ export function SettingsDialog({
     // what's saved.
     if (!configData) return
     setEditedConfig(configData.file)
+    setCostCredentialDirty(false)
+    setCostDraftReset((current) => current + 1)
     setSaveMessage(null)
   }, [configData])
 
+  const finishClose = useCallback(() => {
+    const action = pendingCloseActionRef.current
+    pendingCloseActionRef.current = null
+    onClose()
+    action?.()
+  }, [onClose])
+
   const handleSaveAndClose = useCallback(async () => {
     const ok = await saveConfig()
-    if (ok) onClose()
-  }, [saveConfig, onClose])
+    if (ok) finishClose()
+  }, [saveConfig, finishClose])
+
+  const reviewCostDraft = useCallback(() => {
+    setConfirmingClose(false)
+    setSection('cost')
+    requestAnimationFrame(() => {
+      const applyButton = document.getElementById('cost-apply-source')
+      applyButton?.scrollIntoView({ block: 'center' })
+      applyButton?.focus()
+    })
+  }, [])
 
   // Close guard: a pending startup edit prompts an inline confirm rather than
   // silently discarding. An unsaved AI draft is re-derivable, so it's fine to
   // drop it on close.
-  const requestCloseRef = useRef<() => void>(() => {})
-  requestCloseRef.current = () => {
-    if (canEditConfig && configDirty) setConfirmingClose(true)
-    else onClose()
+  const requestCloseRef = useRef<(afterClose?: () => void) => void>(() => {})
+  requestCloseRef.current = (afterClose) => {
+    pendingCloseActionRef.current = afterClose ?? null
+    if (canEditConfig && (configDirty || costIntegrationDirty)) setConfirmingClose(true)
+    else finishClose()
   }
 
+  const navigateFromSettings = useCallback((resource: ResourceRef) => {
+    if (!onNavigateToResource) return
+    requestCloseRef.current(() => onNavigateToResource(resource))
+  }, [onNavigateToResource])
+
   useEffect(() => {
     if (!open) return
     const handleDocumentKeyDown = (event: KeyboardEvent) => {
@@ -361,14 +449,22 @@ export function SettingsDialog({
     { id: 'overview', label: 'Overview', icon: LayoutDashboard, ownerOnly: false, dirty: false },
     { id: 'perms', label: 'My permissions', icon: Shield, ownerOnly: false, dirty: false },
     { id: 'connection', label: 'Connection', icon: Boxes, ownerOnly: true, dirty: connectionDirty },
-    { id: 'prometheus', label: 'Prometheus', icon: Activity, ownerOnly: true, dirty: false },
-    { id: 'cost', label: 'Cost', icon: Coins, ownerOnly: true, dirty: costDirty },
+    { id: 'prometheus', label: 'Metrics', icon: Activity, ownerOnly: true, dirty: false },
+    { id: 'cost', label: 'Cost', icon: Coins, ownerOnly: true, dirty: costIntegrationDirty },
     { id: 'argocd', label: 'Argo CD', icon: GitBranch, ownerOnly: true, dirty: false },
     { id: 'ai', label: 'AI diagnose', icon: Sparkles, ownerOnly: false, dirty: aiDirty },
     { id: 'advanced', label: 'Advanced', icon: SlidersHorizontal, ownerOnly: true, dirty: advancedDirty },
   ]
 
-  const showFooter = canEditConfig && (confirmingClose || configDirty || !!saveMessage)
+  const offerCostReview = shouldOfferCostReview(costIntegrationDirty, section)
+  const showFooter = shouldShowSettingsFooter({
+    canEditConfig,
+    confirmingClose,
+    configDirty,
+    costIntegrationDirty,
+    section,
+    hasSaveMessage: Boolean(saveMessage),
+  })
 
   return createPortal(
     <div className="fixed inset-0 z-50 flex items-center justify-center">
@@ -469,7 +565,7 @@ export function SettingsDialog({
             )}
 
             {/* Overview — status at a glance; the landing section */}
-            <div className={clsx(section !== 'overview' && 'hidden')} role="tabpanel">
+            <div className={clsx(section !== 'overview' && 'hidden')} role="tabpanel" inert={section !== 'overview' || undefined}>
               <div className="mb-1">
                 <h3 className="text-base font-semibold text-theme-text-primary">Overview</h3>
                 <p className="mt-0.5 text-xs text-theme-text-tertiary">
@@ -482,7 +578,7 @@ export function SettingsDialog({
             </div>
 
             {/* My permissions — usable by everyone, rendered inline (no launcher) */}
-            <div className={clsx(section !== 'perms' && 'hidden')} role="tabpanel">
+            <div className={clsx(section !== 'perms' && 'hidden')} role="tabpanel" inert={section !== 'perms' || undefined}>
               <div className="mb-1">
                 <h3 className="text-base font-semibold text-theme-text-primary">My permissions</h3>
                 <p className="mt-0.5 text-xs text-theme-text-tertiary">
@@ -524,11 +620,11 @@ export function SettingsDialog({
               </div>
             </SectionPane>
 
-            {/* Prometheus — live */}
+            {/* Metrics backend — live */}
             <SectionPane
               id="prometheus"
               active={section}
-              title="Prometheus"
+              title="Metrics"
               caption="Applies immediately — no restart."
               live
               locked={!canEditConfig}
@@ -549,17 +645,42 @@ export function SettingsDialog({
               id="cost"
               active={section}
               title="Cost"
-              caption={configData?.openCostCurrencyManaged
-                ? 'Saved to config. A CLI or Helm override is currently active.'
-                : 'Saved to config and applied immediately.'}
-              live={!configData?.openCostCurrencyManaged}
+              caption="Choose where Radar gets cost data and how amounts are labeled."
+              live
               locked={!canEditConfig}
             >
               <CostSection
                 currency={editedConfig.opencostCurrency ?? ''}
+                source={editedConfig.costSource ?? 'auto'}
+                url={editedConfig.kubecostUrl ?? ''}
+                clusterId={editedConfig.kubecostClusterId ?? ''}
+                apiKeySet={configData?.kubecostApiKeySet ?? false}
+                sourceEnvManaged={configData?.kubecostEnvManaged ?? false}
+                sourceEnvError={configData?.kubecostEnvError}
+                draftDirty={costIntegrationDirty}
+                resetVersion={costDraftReset}
                 managed={configData?.openCostCurrencyManaged ?? false}
                 effectiveCurrency={configData?.effective.opencostCurrency ?? ''}
-                onChange={(value) => updateConfigField('opencostCurrency', value || undefined)}
+                deploymentMode={deploymentMode}
+                settingsSaving={saving}
+                onNavigateToResource={navigateFromSettings}
+                onApplyCurrency={saveCostCurrency}
+                onChangeSource={(value) => updateConfigField('costSource', value)}
+                onChangeUrl={(value) => updateConfigField('kubecostUrl', value || undefined)}
+                onChangeClusterId={(value) => updateConfigField('kubecostClusterId', value || undefined)}
+                onCredentialDirtyChange={setCostCredentialDirty}
+                onApplied={({ source, url, clusterId, apiKeySet }) => {
+                  setCostCredentialDirty(false)
+                  setEditedConfig((prev) => ({ ...prev, costSource: source, kubecostUrl: url || undefined, kubecostClusterId: clusterId || undefined }))
+                  setConfigData((prev) => prev ? {
+                    ...prev,
+                    file: { ...prev.file, costSource: source, kubecostUrl: url || undefined, kubecostClusterId: clusterId || undefined },
+                    kubecostApiKeySet: apiKeySet,
+                  } : prev)
+                  void queryClient.invalidateQueries({
+                    predicate: (query) => typeof query.queryKey[0] === 'string' && query.queryKey[0].startsWith('opencost-'),
+                  })
+                }}
               />
             </SectionPane>
 
@@ -604,7 +725,7 @@ export function SettingsDialog({
             {/* AI diagnose — self-saving, usable by everyone. Same heading block
                 as every other tab; the body is the agent controls (when a CLI is
                 installed) or an enable explainer (when not). */}
-            <div className={clsx(section !== 'ai' && 'hidden')} role="tabpanel">
+            <div className={clsx(section !== 'ai' && 'hidden')} role="tabpanel" inert={section !== 'ai' || undefined}>
               <div className="mb-4">
                 <h3 className="text-base font-semibold text-theme-text-primary">AI diagnose</h3>
                 <p className="mt-0.5 text-xs text-theme-text-tertiary">
@@ -692,30 +813,54 @@ export function SettingsDialog({
           <div className="flex items-center justify-between gap-3 px-4 py-2.5">
             {confirmingClose ? (
               <>
-                <span className="text-xs text-theme-text-secondary">Unsaved changes.</span>
+                <span className="text-xs text-theme-text-secondary">
+                  {costIntegrationDirty && configDirty
+                    ? 'Cost source changes are not applied, and other changes are unsaved.'
+                    : costIntegrationDirty
+                      ? 'Cost source changes have not been applied.'
+                      : 'Unsaved changes.'}
+                </span>
                 <div className="flex items-center gap-2">
                   <button
-                    onClick={() => setConfirmingClose(false)}
+                    onClick={() => {
+                      pendingCloseActionRef.current = null
+                      setConfirmingClose(false)
+                    }}
                     disabled={saving}
                     className="px-3 py-1.5 text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-md transition-colors disabled:opacity-50"
                   >
                     Keep editing
                   </button>
                   <button
-                    onClick={onClose}
+                    onClick={finishClose}
                     disabled={saving}
                     className="px-3 py-1.5 text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-md transition-colors disabled:opacity-50"
                   >
                     Discard
                   </button>
-                  <button
-                    onClick={handleSaveAndClose}
-                    disabled={saving}
-                    className="flex items-center gap-1.5 px-4 py-1.5 text-sm font-medium btn-brand rounded-md"
-                  >
-                    {saving && <Loader2 className="w-3.5 h-3.5 animate-spin" />}
-                    Save
-                  </button>
+                  {offerCostReview && (
+                    <button
+                      onClick={reviewCostDraft}
+                      className={clsx(
+                        'flex items-center gap-1.5 rounded-md px-4 py-1.5 text-sm font-medium',
+                        configDirty
+                          ? 'text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary'
+                          : 'btn-brand',
+                      )}
+                    >
+                      Review Cost
+                    </button>
+                  )}
+                  {configDirty && (
+                    <button
+                      onClick={costIntegrationDirty ? saveConfig : handleSaveAndClose}
+                      disabled={saving || costCurrencySaving}
+                      className="flex items-center gap-1.5 px-4 py-1.5 text-sm font-medium btn-brand rounded-md"
+                    >
+                      {saving && <Loader2 className="w-3.5 h-3.5 animate-spin" />}
+                      {costIntegrationDirty ? 'Save other changes' : 'Save'}
+                    </button>
+                  )}
                 </div>
               </>
             ) : (
@@ -724,7 +869,7 @@ export function SettingsDialog({
                   <Tooltip content="Discard unsaved changes and revert to the last saved values">
                     <button
                       onClick={discardChanges}
-                      disabled={saving || !configDirty}
+                      disabled={saving || (!configDirty && !costIntegrationDirty)}
                       className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-md transition-colors disabled:opacity-50 disabled:pointer-events-none"
                     >
                       <RotateCcw className="w-3.5 h-3.5" />
@@ -737,14 +882,31 @@ export function SettingsDialog({
                     </span>
                   )}
                 </div>
-                <button
-                  onClick={saveConfig}
-                  disabled={saving || !configDirty}
-                  className="flex items-center gap-1.5 px-4 py-1.5 text-sm font-medium btn-brand rounded-md"
-                >
-                  {saving && <Loader2 className="w-3.5 h-3.5 animate-spin" />}
-                  Save
-                </button>
+                <div className="flex items-center gap-2">
+                  {offerCostReview && (
+                    <button
+                      onClick={reviewCostDraft}
+                      className={clsx(
+                        'flex items-center gap-1.5 rounded-md px-4 py-1.5 text-sm font-medium',
+                        configDirty
+                          ? 'text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary'
+                          : 'btn-brand',
+                      )}
+                    >
+                      Review Cost
+                    </button>
+                  )}
+                  {configDirty && (
+                    <button
+                      onClick={saveConfig}
+                      disabled={saving || costCurrencySaving}
+                      className="flex items-center gap-1.5 px-4 py-1.5 text-sm font-medium btn-brand rounded-md"
+                    >
+                      {saving && <Loader2 className="w-3.5 h-3.5 animate-spin" />}
+                      Save
+                    </button>
+                  )}
+                </div>
               </>
             )}
           </div>
@@ -848,7 +1010,7 @@ function SectionPane({
   children: ReactNode
 }) {
   return (
-    <div className={clsx(active !== id && 'hidden')} role="tabpanel">
+    <div className={clsx(active !== id && 'hidden')} role="tabpanel" inert={active !== id || undefined}>
       <div className="mb-4">
         <h3 className="text-base font-semibold text-theme-text-primary">{title}</h3>
         {!locked && caption && <SectionCaption live={live}>{caption}</SectionCaption>}
@@ -911,6 +1073,7 @@ interface OverviewRow {
 function OverviewPanel({ active, onNavigate }: { active: boolean; onNavigate: (s: SettingsSectionId) => void }) {
   const { data: cluster } = useClusterInfo()
   const { data: prom } = usePrometheusStatus()
+  const { data: cost } = useOpenCostSummary()
   const { data: argo } = useArgoStatus(active)
   const { data: capabilitiesData } = useCapabilities()
   const deploymentMode = capabilitiesData ? (capabilitiesData.deployment?.mode ?? 'local') : undefined
@@ -924,6 +1087,16 @@ function OverviewPanel({ active, onNavigate }: { active: boolean; onNavigate: (s
     diag.agents.find((a) => a.name === diag.selectedAgent)?.label ?? diag.agents[0]?.label
   const mcpOn = capabilities.mcpEnabled
   const mcpUrl = mcpLoopbackUrl()
+  const costMissing = cost?.reason === 'no_prometheus' || cost?.reason === 'no_cost_source' || cost?.reason === 'no_metrics'
+  const costUnavailableDetail = cost?.reason === 'no_prometheus'
+    ? 'Connect OpenCost metrics in Metrics.'
+    : cost?.reason === 'no_metrics'
+      ? 'The active cost source returned no allocation data.'
+      : cost?.reason === 'access_denied'
+        ? 'Your current permissions do not allow cost data.'
+        : cost?.reason
+          ? costIntegrationUnavailableMessage(cost.reason) ?? 'The active cost source query failed.'
+          : undefined
 
   const rows: OverviewRow[] = [
     {
@@ -933,11 +1106,23 @@ function OverviewPanel({ active, onNavigate }: { active: boolean; onNavigate: (s
       detail: cluster ? `Kubernetes ${cluster.kubernetesVersion} · ${cluster.nodeCount} nodes` : undefined,
     },
     {
-      id: 'prometheus', icon: Activity, label: 'Prometheus',
+      id: 'prometheus', icon: Activity, label: 'Metrics',
       tone: prom?.connected ? 'ok' : prom?.available ? 'warn' : 'off',
       value: prom?.connected ? 'Connected' : prom?.available ? 'Not reachable' : 'Not configured',
       detail: prom?.connected ? prom.address : undefined,
     },
+    {
+      id: costConfigurationAction(cost?.reason).section, icon: Coins, label: 'Cost',
+      tone: cost?.available ? 'ok' : cost ? (costMissing ? 'off' : 'warn') : 'unknown',
+      value: cost?.available
+        ? costSourceLabel(cost.source)
+        : cost
+          ? costMissing ? 'No cost data' : 'Unavailable'
+          : 'Checking…',
+      detail: cost?.available
+        ? costFreshnessLabel(cost.source, cost.window, cost.dataThrough)
+        : costUnavailableDetail,
+    },
     {
       id: 'argocd', icon: GitBranch, label: 'Argo CD',
       tone: argo?.connected ? 'ok' : argo?.configured ? 'warn' : 'off',
@@ -1001,10 +1186,10 @@ function OverviewPanel({ active, onNavigate }: { active: boolean; onNavigate: (s
               <Icon className="w-4 h-4 shrink-0 text-theme-text-tertiary" />
               <span className="text-sm text-theme-text-primary w-24 shrink-0 truncate">{row.label}</span>
               <OverviewStatus tone={row.tone} />
-              <div className="flex-1 min-w-0 flex items-baseline gap-1.5">
-                <span className="text-sm text-theme-text-secondary shrink-0">{row.value}</span>
+              <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                <span className="truncate text-sm text-theme-text-secondary">{row.value}</span>
                 {row.detail && (
-                  <span className="text-xs text-theme-text-tertiary truncate">{row.detail}</span>
+                  <span className="break-words text-xs leading-4 text-theme-text-tertiary">{row.detail}</span>
                 )}
               </div>
               {row.copyable && (
@@ -1196,40 +1381,405 @@ function TimelineSection({
 
 function CostSection({
   currency,
+  source,
+  url,
+  clusterId,
+  apiKeySet,
+  sourceEnvManaged,
+  sourceEnvError,
+  draftDirty,
+  resetVersion,
   managed,
   effectiveCurrency,
-  onChange,
+  deploymentMode,
+  settingsSaving,
+  onNavigateToResource,
+  onApplyCurrency,
+  onChangeSource,
+  onChangeUrl,
+  onChangeClusterId,
+  onCredentialDirtyChange,
+  onApplied,
 }: {
   currency: string
+  source: 'auto' | 'prometheus' | 'kubecost'
+  url: string
+  clusterId: string
+  apiKeySet: boolean
+  sourceEnvManaged: boolean
+  sourceEnvError?: string
+  draftDirty: boolean
+  resetVersion: number
   managed: boolean
   effectiveCurrency: string
-  onChange: (value: string) => void
+  deploymentMode: 'local' | 'in-cluster' | 'cloud'
+  settingsSaving: boolean
+  onNavigateToResource?: (resource: ResourceRef) => void
+  onApplyCurrency: (value: string) => Promise<void>
+  onChangeSource: (value: 'auto' | 'prometheus' | 'kubecost') => void
+  onChangeUrl: (value: string) => void
+  onChangeClusterId: (value: string) => void
+  onCredentialDirtyChange: (dirty: boolean) => void
+  onApplied: (value: { source: 'auto' | 'prometheus' | 'kubecost'; url: string; clusterId: string; apiKeySet: boolean }) => void
 }) {
+  const [apply, setApply] = useState<CostApplyState>({ status: 'idle' })
+  const [apiKey, setApiKey] = useState('')
+  const [apiKeyTouched, setApiKeyTouched] = useState(false)
+  const [apiKeyCleared, setApiKeyCleared] = useState(false)
+  const [advancedOpen, setAdvancedOpen] = useState(false)
+  const [currencyDraft, setCurrencyDraft] = useState(currency)
+  const [currencySave, setCurrencySave] = useState<CurrencySaveState>({ status: 'idle' })
+  const apiKeyWillBeUsed = !apiKeyCleared && ((apiKeyTouched && apiKey !== '') || apiKeySet)
+  const apiKeyUsesPlainHTTP = apiKeyWillBeUsed && /^http:\/\//i.test(url.trim())
+
+  useEffect(() => {
+    setApiKey('')
+    setApiKeyTouched(false)
+    setApiKeyCleared(false)
+    setApply({ status: 'idle' })
+    setCurrencySave({ status: 'idle' })
+  }, [resetVersion])
+
+  useEffect(() => {
+    setCurrencyDraft(currency)
+  }, [currency])
+
+  useEffect(() => {
+    onCredentialDirtyChange(apiKeyTouched || apiKeyCleared)
+  }, [apiKeyCleared, apiKeyTouched, onCredentialDirtyChange])
+
+  useEffect(() => {
+    if (url.trim() || clusterId.trim()) setAdvancedOpen(true)
+  }, [clusterId, url])
+
+  const applySource = async () => {
+    setApply({ status: 'applying' })
+    let sentKey: string | undefined
+    if (apiKeyCleared) {
+      sentKey = ''
+    } else if (apiKeyTouched && apiKey !== '') {
+      sentKey = apiKey
+    }
+    try {
+      const res = await fetch(apiUrl('/integrations/cost'), {
+        method: 'PUT',
+        credentials: getCredentialsMode(),
+        headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+        body: JSON.stringify({
+          source,
+          url: url.trim(),
+          clusterId: clusterId.trim(),
+          ...(sentKey !== undefined ? { apiKey: sentKey } : {}),
+        }),
+      })
+      const data: unknown = await res.json().catch(() => null)
+      if (!res.ok) {
+        const error =
+          data !== null &&
+          typeof data === 'object' &&
+          'error' in data &&
+          typeof data.error === 'string'
+            ? data.error
+            : res.statusText
+        setApply({ status: 'failed', error })
+        return
+      }
+      if (
+        data === null ||
+        typeof data !== 'object' ||
+        !('source' in data) ||
+        (data.source !== 'prometheus' && data.source !== 'kubecost') ||
+        !('apiKeySet' in data) ||
+        typeof data.apiKeySet !== 'boolean' ||
+        ('address' in data && data.address !== undefined && typeof data.address !== 'string') ||
+        ('service' in data &&
+          data.service !== undefined &&
+          (data.service === null ||
+            typeof data.service !== 'object' ||
+            !('kind' in data.service) ||
+            data.service.kind !== 'Service' ||
+            !('namespace' in data.service) ||
+            typeof data.service.namespace !== 'string' ||
+            !('name' in data.service) ||
+            typeof data.service.name !== 'string' ||
+            !('port' in data.service) ||
+            typeof data.service.port !== 'number' ||
+            !Number.isInteger(data.service.port) ||
+            data.service.port <= 0))
+      ) {
+        throw new Error('Radar returned an invalid cost source response')
+      }
+      const applied = data as CostSourceApplyResponse
+      setApiKey('')
+      setApiKeyTouched(false)
+      setApiKeyCleared(false)
+      onApplied({ source, url: url.trim(), clusterId: clusterId.trim(), apiKeySet: applied.apiKeySet })
+      setApply({ status: 'connected', source: applied.source, address: applied.address, service: applied.service })
+    } catch (err) {
+      setApply({ status: 'failed', error: String(err) })
+    }
+  }
+
+  const saveCurrency = async (value: string) => {
+    if (currencySave.status === 'saving') return
+    setCurrencyDraft(value)
+    setCurrencySave({ status: 'saving' })
+    try {
+      await onApplyCurrency(value)
+      setCurrencySave({ status: 'saved' })
+    } catch (err) {
+      setCurrencyDraft(currency)
+      setCurrencySave({
+        status: 'failed',
+        error: err instanceof Error ? err.message : String(err),
+      })
+    }
+  }
+
   return (
-    <div>
-      <label className="mb-1 block text-sm font-medium text-theme-text-primary">
-        Currency override
-      </label>
-      <p className="mb-1 text-xs text-theme-text-tertiary">
-        Choose a currency, or use Auto to read <code>currencyCode</code> or{' '}
-        <code>DISPLAY_CURRENCY</code> from an active OpenCost/Kubecost installation, then fall back
-        to USD. A custom Prometheus URL disables detection. Radar labels values but does not convert
-        them.
-      </p>
-      <SelectMenu
-        value={currency}
-        options={currencyOptionsForValue(currency)}
-        onChange={onChange}
-        ariaLabel="Currency override"
-        searchPlaceholder="Search currencies by name or code"
-        className="w-full"
-      />
-      {managed && (
-        <p className="mt-1 text-xs text-amber-600 dark:text-amber-400/80">
-          Currently managed by CLI or Helm: {effectiveCurrency || 'Auto'}. Saved changes apply
-          after Radar starts without that override.
-        </p>
+    <div className="space-y-5">
+      {sourceEnvManaged && (
+        <div id="cost-source-managed" className={clsx(
+          'rounded-md border p-3',
+          sourceEnvError
+            ? 'border-red-500/30 bg-red-500/[0.07]'
+            : 'border-skyhook-500/30 bg-skyhook-500/[0.07]',
+        )}>
+          <p className={clsx(
+            'flex items-center gap-1.5 text-sm font-medium',
+            sourceEnvError ? 'text-red-600 dark:text-red-400/90' : 'text-theme-text-primary',
+          )}>
+            {sourceEnvError
+              ? <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
+              : <Terminal className="h-3.5 w-3.5 shrink-0 text-skyhook-500" />}
+            {sourceEnvError ? 'Deployment cost configuration is invalid' : 'Configured by the deployment'}
+          </p>
+          <p className="mt-1 text-xs text-theme-text-tertiary">
+            {sourceEnvError ?? 'Edit the RADAR_COST_SOURCE and RADAR_KUBECOST_* environment variables or Helm values, then restart Radar to change the source.'}
+          </p>
+        </div>
       )}
+
+      <div className="space-y-4 rounded-lg border border-theme-border bg-theme-base/40 p-4">
+        <p className="text-sm font-semibold text-theme-text-primary">Cost source</p>
+        <div>
+          <label htmlFor="cost-source" className="mb-1 block text-sm font-medium text-theme-text-primary">Data source</label>
+          <p id="cost-source-help" className="mb-1 text-xs text-theme-text-tertiary">
+            Automatic uses existing OpenCost metrics first, then Kubecost. Leave it selected unless
+            you need to force one source.
+          </p>
+          <SelectMenu
+            id="cost-source"
+            value={source}
+            options={[
+              { value: 'auto', label: 'Automatic (recommended)' },
+              { value: 'prometheus', label: 'OpenCost metrics only' },
+              { value: 'kubecost', label: 'Kubecost only' },
+            ]}
+            onChange={(value) => { onChangeSource(value as typeof source); setApply({ status: 'idle' }) }}
+            disabled={sourceEnvManaged}
+            className="w-full"
+            ariaLabel="Cost data source"
+            ariaDescribedBy={sourceEnvManaged ? 'cost-source-help cost-source-managed' : 'cost-source-help'}
+          />
+        </div>
+
+      {source !== 'prometheus' && (
+        <div className="space-y-3 border-t border-theme-border-subtle pt-4">
+          <p className="text-xs font-medium text-theme-text-secondary">
+            {source === 'auto' ? 'Kubecost fallback' : 'Kubecost connection'}
+          </p>
+          <div>
+            <button
+              type="button"
+              onClick={() => setAdvancedOpen((open) => !open)}
+              className="flex w-full items-center gap-1.5 rounded-md py-1 text-left text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary"
+              aria-expanded={advancedOpen}
+              aria-controls="cost-advanced-connection"
+            >
+              <CollapseChevron open={advancedOpen} className="h-3.5 w-3.5" />
+              Advanced connection settings
+            </button>
+            <Collapse open={advancedOpen}>
+              <div id="cost-advanced-connection" className="pt-3">
+                <div className="space-y-3 rounded-md border border-theme-border-subtle bg-theme-base/60 p-3">
+                  <div>
+                    <label htmlFor="cost-kubecost-url" className="mb-1 block text-sm font-medium text-theme-text-primary">Kubecost URL</label>
+                    <p id="cost-kubecost-url-help" className="mb-1 text-xs text-theme-text-tertiary">
+                      Leave blank when Kubecost runs in this cluster. Enter the central Aggregator URL
+                      for an agent-only or federated setup.
+                    </p>
+                    <Input
+                      id="cost-kubecost-url"
+                      aria-describedby={sourceEnvManaged ? 'cost-kubecost-url-help cost-source-managed' : 'cost-kubecost-url-help'}
+                      value={url}
+                      onChange={(event) => { onChangeUrl(event.target.value); setApply({ status: 'idle' }) }}
+                      disabled={sourceEnvManaged}
+                      placeholder="Auto-discover, or https://kubecost.example.com"
+                      className="w-full 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>
+                  <div>
+                    <label htmlFor="cost-kubecost-cluster-id" className="mb-1 block text-sm font-medium text-theme-text-primary">Cluster ID</label>
+                    <p id="cost-kubecost-cluster-id-help" className="mb-1 text-xs text-theme-text-tertiary">
+                      Usually detected automatically. Set it only if detection fails or the Kubecost
+                      server contains data for more than one cluster. Use the <code>CLUSTER_ID</code>{' '}
+                      value configured on the FinOps Agent or Aggregator.
+                    </p>
+                    <Input
+                      id="cost-kubecost-cluster-id"
+                      aria-describedby={sourceEnvManaged ? 'cost-kubecost-cluster-id-help cost-source-managed' : 'cost-kubecost-cluster-id-help'}
+                      value={clusterId}
+                      onChange={(event) => { onChangeClusterId(event.target.value); setApply({ status: 'idle' }) }}
+                      disabled={sourceEnvManaged}
+                      placeholder="Auto-detect CLUSTER_ID"
+                      className="w-full 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>
+                </div>
+              </div>
+            </Collapse>
+          </div>
+          <div>
+            <label htmlFor="cost-kubecost-api-key" className="mb-1 block text-sm font-medium text-theme-text-primary">API key (optional)</label>
+            <p id="cost-kubecost-api-key-help" className="mb-1 text-xs text-theme-text-tertiary">
+              Only needed when Kubecost requires authentication.{' '}
+              {url.trim() === '' && (
+                <>Auto-discovery can use the Aggregator&apos;s <code>tcp-api-rbac:9008</code> endpoint when SAML/OIDC protects port 9004; setting a key disables that fallback. </>
+              )}
+              {deploymentMode === 'local' ? (
+                <>Radar stores it unencrypted in this machine&apos;s owner-only config file (<code>~/.radar/config.json</code>) and never returns it through the API.</>
+              ) : (
+                <>For this in-cluster deployment, create a Kubernetes Secret and set the Helm value <code>cost.kubecost.existingSecret</code>. A key entered here is stored unencrypted in this pod&apos;s temporary owner-only config file and can disappear when the pod restarts. Radar never returns it through the API.</>
+              )}
+              {apiKeySet && !apiKeyCleared ? ' A key is configured.' : ''}
+            </p>
+            <div className="flex items-center gap-2">
+              <Input
+                id="cost-kubecost-api-key"
+                aria-describedby={sourceEnvManaged ? 'cost-kubecost-api-key-help cost-source-managed' : 'cost-kubecost-api-key-help'}
+                type="password"
+                value={apiKey}
+                onChange={(event) => { setApiKey(event.target.value); setApiKeyTouched(true); setApiKeyCleared(false); setApply({ status: 'idle' }) }}
+                autoComplete="off"
+                spellCheck={false}
+                disabled={sourceEnvManaged}
+                placeholder={apiKeySet && !apiKeyCleared ? 'Configured — enter to replace' : 'Optional API key'}
+                className="min-w-0 flex-1 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"
+              />
+              {apiKeySet && !apiKeyCleared && !sourceEnvManaged && (
+                <button
+                  type="button"
+                  aria-label="Clear saved Kubecost API key"
+                  onClick={() => { setApiKey(''); setApiKeyTouched(false); setApiKeyCleared(true); setApply({ status: 'idle' }) }}
+                  className="px-2 py-1.5 text-xs text-theme-text-tertiary hover:text-theme-text-primary"
+                >
+                  Clear
+                </button>
+              )}
+            </div>
+            {apiKeyUsesPlainHTTP && (
+              <p className="mt-1 flex items-center gap-1 text-xs text-warning-text">
+                <AlertTriangle className="h-3 w-3 shrink-0" /> The API key will be sent over unencrypted HTTP. Use HTTPS unless this is a trusted private network.
+              </p>
+            )}
+          </div>
+        </div>
+      )}
+
+      {!sourceEnvManaged && <div>
+        <button
+          id="cost-apply-source"
+          type="button"
+          onClick={applySource}
+          disabled={apply.status === 'applying'}
+          aria-busy={apply.status === 'applying'}
+          className="flex min-w-40 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium btn-brand disabled:opacity-50"
+        >
+          {apply.status === 'applying' ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Plug className="h-3.5 w-3.5" />}
+          {apply.status === 'applying' ? 'Applying…' : costSourceApplyLabel(source)}
+        </button>
+        <div className="mt-1 min-h-7 text-xs">
+          {apply.status === 'applying' && (
+            <p key="applying" role="status" aria-live="polite" className="animate-status-enter text-theme-text-tertiary">
+              {source === 'prometheus' ? 'Applying source…' : 'Testing connection and applying source…'}
+            </p>
+          )}
+          {apply.status === 'connected' && (
+            <div key="connected" className="animate-status-enter flex flex-wrap items-center gap-x-1.5 gap-y-1">
+              <p role="status" aria-live="polite" className="flex items-center gap-1 text-green-600 dark:text-green-400/80">
+                <Check className="h-3 w-3 shrink-0" /> Applied · active source: {costSourceLabel(apply.source)}
+                <span className="sr-only">
+                  {apply.service
+                    ? ` · Service ${apply.service.namespace}/${apply.service.name}, port ${apply.service.port}`
+                    : apply.address
+                      ? ` · ${apply.address}`
+                      : ''}
+                </span>
+              </p>
+              {apply.service ? (
+                <>
+                  <ResourceRefBadge resourceRef={apply.service} onClick={onNavigateToResource} />
+                  <span className="text-theme-text-tertiary">in {apply.service.namespace}</span>
+                  <span className="text-theme-text-tertiary">· port <span className="font-mono">{apply.service.port}</span></span>
+                </>
+              ) : apply.address ? (
+                <span className="break-all font-mono text-theme-text-tertiary">{apply.address}</span>
+              ) : null}
+            </div>
+          )}
+          {apply.status === 'failed' && (
+            <p key="failed" role="alert" className="animate-status-enter text-red-600 dark:text-red-400/80">{apply.error}</p>
+          )}
+          {draftDirty && apply.status === 'idle' && (
+            <p key="dirty" role="status" aria-live="polite" className="animate-status-enter flex items-center gap-1 text-warning-text">
+              <AlertTriangle className="h-3 w-3 shrink-0" /> Unapplied source changes
+            </p>
+          )}
+        </div>
+      </div>}
+      </div>
+
+      <div className="rounded-lg border border-theme-border bg-theme-base/40 p-4">
+        <label htmlFor="cost-currency" className="block text-sm font-semibold text-theme-text-primary">
+          Display currency
+        </label>
+        <p id="cost-currency-help" className="mb-1 mt-0.5 text-xs text-theme-text-tertiary">
+          Auto uses the currency reported by the active cost source, or USD when unavailable.
+          Overrides relabel amounts; Radar does not convert them.
+        </p>
+        <SelectMenu
+          id="cost-currency"
+          value={currencyDraft}
+          options={currencyOptionsForValue(currencyDraft)}
+          onChange={(value) => { void saveCurrency(value) }}
+          ariaLabel="Display currency"
+          ariaDescribedBy="cost-currency-help"
+          searchPlaceholder="Search currencies by name or code"
+          disabled={settingsSaving || currencySave.status === 'saving'}
+          className="w-full"
+        />
+        {currencySave.status === 'saving' && (
+          <p role="status" aria-live="polite" className="mt-1 flex items-center gap-1 text-xs text-theme-text-tertiary">
+            <Loader2 className="h-3 w-3 animate-spin" /> Saving…
+          </p>
+        )}
+        {currencySave.status === 'saved' && (
+          <p role="status" aria-live="polite" className="mt-1 flex items-center gap-1 text-xs text-green-600 dark:text-green-400/80">
+            <Check className="h-3 w-3" /> {managed ? 'Saved for when the CLI or Helm override is removed' : 'Saved'}
+          </p>
+        )}
+        {currencySave.status === 'failed' && (
+          <p role="alert" className="mt-1 text-xs text-red-600 dark:text-red-400/80">
+            Could not save: {currencySave.error}
+          </p>
+        )}
+        {managed && (
+          <p className="mt-2 text-xs text-amber-600 dark:text-amber-400/80">
+            CLI or Helm currently sets {effectiveCurrency || 'Auto'}; that override stays active until it is removed.
+          </p>
+        )}
+      </div>
     </div>
   )
 }
@@ -1336,6 +1886,18 @@ type ApplyState =
   | { status: 'unreachable'; error: string } // persisted, but the probe failed
   | { status: 'failed'; error: string }       // request itself failed — nothing saved
 
+type CostApplyState =
+  | { status: 'idle' }
+  | { status: 'applying' }
+  | { status: 'connected'; source: 'prometheus' | 'kubecost'; address?: string; service?: CostSourceApplyResponse['service'] }
+  | { status: 'failed'; error: string }
+
+type CurrencySaveState =
+  | { status: 'idle' }
+  | { status: 'saving' }
+  | { status: 'saved' }
+  | { status: 'failed'; error: string }
+
 type HeaderRow = { key: string; value: string }
 
 function PrometheusConfigField({
@@ -1427,7 +1989,8 @@ function PrometheusConfigField({
         Server URL
       </label>
       <p className="text-xs text-theme-text-tertiary mb-1">
-        Manual Prometheus / VictoriaMetrics URL — set this to skip auto-discovery.
+        Manual PromQL-compatible query URL — works with Prometheus, VictoriaMetrics, Thanos, and
+        Mimir. Set this to skip auto-discovery.
       </p>
       <div className="flex items-center gap-2">
         <Input