@skyhook-io/radar-app 1.15.0 → 1.16.0

package/src/components/dock/TrafficFlowListTab.tsx

@@ -3,7 +3,7 @@ import { TrafficFlowList } from '../traffic/TrafficFlowList'
 import { List } from 'lucide-react'
 
 export function TrafficFlowListTab() {
-  const { flows } = useTrafficFlowList()
+  const { flows, responsesCallerOriented } = useTrafficFlowList()
 
   if (flows.length === 0) {
     return (
@@ -14,5 +14,5 @@ export function TrafficFlowListTab() {
     )
   }
 
-  return <TrafficFlowList flows={flows} />
+  return <TrafficFlowList flows={flows} responsesCallerOriented={responsesCallerOriented} />
 }

package/src/components/gitops/GitOpsView.tsx

@@ -2,6 +2,8 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import yaml from 'yaml'
+import { hasHealthSettingsHint } from '@skyhook-io/k8s-ui/components/gitops/GitOpsHealthSourceNotice'
+import { previousSettingsNote, usePreviousIntegrationSettings } from '../../hooks/usePreviousIntegrationSettings'
 import {
   GitOpsActivityInsightView,
   GitOpsChangesView,
@@ -412,6 +414,14 @@ function GitOpsDetailView({ namespaces, onOpenResource, onOpenSettings }: GitOps
   const terminatingChipTooltip = terminatingDescriptions.chipTooltip
   const terminatingActionTooltip = terminatingDescriptions.actionDisabledTooltip
   const [appView, setAppView] = useState<GitOpsDetailTab>('topology')
+  const insight = insightsQ.data
+  const showDiffSettingsHint = appView === 'changes' && insight?.summary.tool === 'argocd' && insight.summary.kind === 'Application'
+    && !!insight.changes?.length && !insight.capabilities?.argoDiffAvailable
+  const previousSettings = usePreviousIntegrationSettings(!!onOpenSettings && (
+    hasHealthSettingsHint(insight?.summary, insight?.changes)
+    || showDiffSettingsHint
+  ))
+  const settingsNote = previousSettings.argocd ? previousSettingsNote('argocd', previousSettings.argocd) : undefined
   // When the user clicks an actionable issue alert ("OutOfSync — NodePool
   // default is out of sync · View →"), we navigate to Changes and focus
   // that resource. The ref is stringified to a stable key so GitOpsChangesView
@@ -670,6 +680,7 @@ function GitOpsDetailView({ namespaces, onOpenResource, onOpenSettings }: GitOps
       healthDocsUrl={GITOPS_HEALTH_DOCS_URL}
       remoteDestinationHint={<RemoteDestinationCloudHint />}
       onOpenSettings={onOpenSettings}
+      settingsNote={showDiffSettingsHint ? undefined : settingsNote}
       renderRevisionMeta={
         isArgoApp && insightsQ.data?.capabilities?.revisionMetadataAvailable
           ? (revision) => (
@@ -809,6 +820,7 @@ function GitOpsDetailView({ namespaces, onOpenResource, onOpenSettings }: GitOps
                 <ArgoResourceDiffLoader appNamespace={namespace} appName={name} resourceRef={ref} />
               ) : undefined}
               onOpenSettings={onOpenSettings}
+              settingsNote={settingsNote}
             />
           )
         }

package/src/components/home/HomeView.tsx

@@ -351,7 +351,7 @@ function ProblemsPanel({
         <div className="flex items-center gap-2">
           <button
             type="button"
-            className="rounded-md px-2 py-1 text-xs font-medium text-accent-text transition-colors hover:bg-accent-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent)]/40"
+            className="rounded-md px-2 py-1 text-xs font-medium text-accent-text transition-colors hover:bg-accent-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent,var(--accent))]/40"
             onClick={onNavigateToIssues}
           >
             View all

package/src/components/home/MCPSetupDialog.tsx

@@ -116,71 +116,67 @@ export function MCPSetupDialog({ open, onClose, mcpUrl }: MCPSetupDialogProps) {
 
   const currentPort = Number(window.location.port) || 80
 
-  const claudeDesktopConfig = JSON.stringify({
+  const mcpServersUrlConfig = (key: 'url' | 'serverUrl') => JSON.stringify({
     mcpServers: {
       radar: {
-        type: "http",
-        url: mcpUrl,
+        [key]: mcpUrl,
       }
     }
   }, null, 2)
 
-  const cursorConfig = JSON.stringify({
-    mcpServers: {
+  const vsCodeConfig = JSON.stringify({
+    servers: {
       radar: {
+        type: "http",
         url: mcpUrl,
       }
     }
   }, null, 2)
 
-  const windsurfConfig = JSON.stringify({
-    mcpServers: {
-      radar: {
-        serverUrl: mcpUrl,
-      }
-    }
-  }, null, 2)
-
-  const vsCodeConfig = JSON.stringify({
-    servers: {
+  const opencodeConfig = JSON.stringify({
+    mcp: {
       radar: {
-        type: "http",
+        type: "remote",
         url: mcpUrl,
+        enabled: true,
       }
     }
   }, null, 2)
 
-  const geminiConfig = JSON.stringify({
+  const clineConfig = JSON.stringify({
     mcpServers: {
       radar: {
-        httpUrl: mcpUrl,
+        type: "streamableHttp",
+        url: mcpUrl,
       }
     }
   }, null, 2)
 
-  const codexConfig = `[mcp_servers.radar]\nurl = "${mcpUrl}"`
-
-  const clineConfig = JSON.stringify({
+  // mcp-remote rejects plain http:// unless the host is localhost/127.0.0.1 or --allow-http is passed.
+  const parsedMcpUrl = new URL(mcpUrl)
+  const mcpRemoteNeedsAllowHttp = parsedMcpUrl.protocol === 'http:' && parsedMcpUrl.hostname !== 'localhost' && parsedMcpUrl.hostname !== '127.0.0.1'
+  const mcpRemoteArgs = ['-y', 'mcp-remote', mcpUrl, ...(mcpRemoteNeedsAllowHttp ? ['--allow-http'] : [])]
+  const claudeDesktopConfig = JSON.stringify({
     mcpServers: {
       radar: {
-        url: mcpUrl,
+        command: "npx",
+        args: mcpRemoteArgs,
       }
     }
   }, null, 2)
 
-  const jetbrainsConfig = JSON.stringify({
-    mcpServers: {
+  const zedConfig = JSON.stringify({
+    context_servers: {
       radar: {
         url: mcpUrl,
       }
     }
   }, null, 2)
 
-  const opencodeConfig = JSON.stringify({
-    mcp: {
+  const geminiConfig = JSON.stringify({
+    mcpServers: {
       radar: {
-        type: "remote",
-        url: mcpUrl,
+        httpUrl: mcpUrl,
       }
     }
   }, null, 2)
@@ -285,16 +281,20 @@ export function MCPSetupDialog({ open, onClose, mcpUrl }: MCPSetupDialogProps) {
             <h4 className="text-sm font-semibold text-theme-text-primary">Connect your AI tool</h4>
 
             {[
-              { icon: Terminal, name: 'Claude Code', path: '', config: `claude mcp add radar --transport http ${mcpUrl}` },
-              { icon: MessageSquare, name: 'Claude Desktop', path: '~/Library/Application Support/Claude/claude_desktop_config.json', config: claudeDesktopConfig },
-              { icon: Code2, name: 'Cursor', path: '~/.cursor/mcp.json', config: cursorConfig },
-              { icon: Code2, name: 'Windsurf', path: '~/.codeium/windsurf/mcp_config.json', config: windsurfConfig },
-              { icon: Code2, name: 'VS Code Copilot', path: '.vscode/mcp.json', config: vsCodeConfig },
-              { icon: Code2, name: 'Cline', path: 'Cline MCP settings (via UI)', config: clineConfig },
-              { icon: Code2, name: 'JetBrains AI', path: 'Settings → Tools → AI Assistant → MCP', config: jetbrainsConfig },
+              { icon: Terminal, name: 'Claude Code', path: '', config: `claude mcp add --transport http radar ${mcpUrl}` },
+              { icon: Terminal, name: 'Codex', path: '', config: `codex mcp add radar --url ${mcpUrl}` },
+              { icon: Code2, name: 'Cursor', path: '~/.cursor/mcp.json', config: mcpServersUrlConfig('url') },
+              { icon: Code2, name: 'VS Code (GitHub Copilot)', path: '.vscode/mcp.json', config: vsCodeConfig },
+              { icon: Terminal, name: 'GitHub Copilot CLI', path: '', config: `copilot mcp add --transport http radar ${mcpUrl}` },
               { icon: Terminal, name: 'OpenCode', path: '~/.config/opencode/opencode.json', config: opencodeConfig },
-              { icon: Terminal, name: 'OpenAI Codex', path: '~/.codex/config.toml', config: codexConfig },
-              { icon: Terminal, name: 'Gemini CLI', path: '~/.gemini/settings.json', config: geminiConfig },
+              { icon: Code2, name: 'Google Antigravity', path: '~/.gemini/config/mcp_config.json', config: mcpServersUrlConfig('serverUrl') },
+              { icon: Code2, name: 'Kiro', path: '~/.kiro/settings/mcp.json', config: mcpServersUrlConfig('url') },
+              { icon: Code2, name: 'JetBrains AI Assistant / Junie', path: 'AI Assistant settings or ~/.junie/mcp/mcp.json', config: mcpServersUrlConfig('url') },
+              { icon: Code2, name: 'Cline', path: 'Cline MCP settings (via UI)', config: clineConfig },
+              { icon: Code2, name: 'Devin Desktop (formerly Windsurf)', path: '~/.config/devin/mcp_config.json', config: mcpServersUrlConfig('url') },
+              { icon: MessageSquare, name: 'Claude Desktop', path: '~/Library/Application Support/Claude/claude_desktop_config.json', config: claudeDesktopConfig },
+              { icon: Code2, name: 'Zed', path: 'Zed settings.json', config: zedConfig },
+              { icon: Terminal, name: 'Gemini CLI (Code Assist Standard/Enterprise)', path: '~/.gemini/settings.json', config: geminiConfig },
             ].map((agent) => (
               <Disclosure
                 key={agent.name}

package/src/components/resource/PVCUsageBar.render.test.tsx

@@ -5,6 +5,7 @@ import { ApiError, type PrometheusPVCUsage } from '../../api/client'
 
 let canConfigure = true
 let roleLoading = false
+let previousMetrics = false
 let statusResult: { data?: { connected: boolean; discovering?: boolean }; error?: Error }
 let usageResult: { data?: PrometheusPVCUsage; error?: Error }
 vi.mock('../../api/client', async (importActual) => ({
@@ -15,13 +16,28 @@ vi.mock('../../api/client', async (importActual) => ({
   useCloudRole: () => ({ canAtLeast: () => canConfigure, isLoading: roleLoading }),
 }))
 const { PVCUsageBar } = await import('./PVCUsageBar')
+vi.mock('../../hooks/usePreviousIntegrationSettings', () => ({
+  usePreviousIntegrationSettings: (relevant: boolean) => ({ metrics: relevant && previousMetrics }),
+  previousSettingsNote: () => 'You can copy your previous settings in Settings → Metrics.',
+}))
 const measured: PrometheusPVCUsage = { namespace: 'demo', name: 'disk', used: 0, capacity: 1024, ratio: 0, hasData: true, status: 'available' }
 const render = () => renderToString(<PVCUsageBar namespace="demo" name="disk" />)
 
 describe('PVC usage availability', () => {
+  it('offers previous settings only for a missing connection, not missing series or denied access', () => {
+    previousMetrics = true
+    statusResult = { data: { connected: false } }
+    expect(render()).toContain('copy your previous settings')
+    statusResult = { data: { connected: true } }
+    usageResult = { data: { ...measured, hasData: false, status: 'no_series' } }
+    expect(render()).not.toContain('copy your previous settings')
+    statusResult = { error: new ApiError('denied', 403) }
+    expect(render()).not.toContain('copy your previous settings')
+  })
   beforeEach(() => {
     canConfigure = true
     roleLoading = false
+    previousMetrics = false
     statusResult = { data: { connected: true } }
     usageResult = {}
   })

package/src/components/resource/PVCUsageBar.tsx

@@ -1,6 +1,7 @@
 import { formatMemoryBytes } from '@skyhook-io/k8s-ui/utils/format'
 import { isForbiddenError, useAutoPromConnect, useCloudRole, usePrometheusPVCUsage, usePrometheusStatus } from '../../api/client'
 import { useNavCustomization } from '../../context/NavCustomization'
+import { previousSettingsNote, usePreviousIntegrationSettings } from '../../hooks/usePreviousIntegrationSettings'
 
 export function PVCUsageBar({ namespace, name }: { namespace: string; name: string }) {
   // PVC detail can be the first Prometheus-backed surface a user opens; without
@@ -40,6 +41,8 @@ export function PVCUsageBar({ namespace, name }: { namespace: string; name: stri
 
   const denied = isForbiddenError(error) || isForbiddenError(statusError)
   const waiting = !denied && !statusError && (!status || status.discovering || (isConnected && !usage && !error))
+  const offers = usePreviousIntegrationSettings(canConfigure && !waiting && !denied && !statusError && !isConnected)
+  const previousNote = offers.metrics ? previousSettingsNote('metrics', offers.metrics) : undefined
   const guidance = denied
     ? 'Ask your operator to review your metrics access.'
     : !canConfigure && !roleLoading
@@ -53,6 +56,7 @@ export function PVCUsageBar({ namespace, name }: { namespace: string; name: stri
       <section aria-label="PVC usage" className="rounded-lg border border-theme-border bg-theme-surface/30 p-3">
         <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wide mb-1">Usage</div>
         <p className="text-sm text-theme-text-tertiary">{unavailable}</p>
+        {previousNote && <p className="mt-2 text-xs text-theme-text-secondary">{previousNote}</p>}
         {!waiting && (
           canConfigure && !denied ? (
             <button
@@ -102,4 +106,3 @@ export function PVCUsageBar({ namespace, name }: { namespace: string; name: stri
     </section>
   )
 }
-

package/src/components/resource/PrometheusChartsGrid.render.test.tsx

@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { renderToString } from 'react-dom/server'
 import { MemoryRouter } from 'react-router-dom'
 import { NavCustomizationProvider } from '../../context/NavCustomization'
+vi.mock('../../hooks/usePreviousIntegrationSettings', () => ({ usePreviousIntegrationSettings: () => ({ metrics: false }) }))
 import type { WorkloadMetrics } from '../../api/workloadMetrics'
 
 let connected = false

package/src/components/resource/PrometheusChartsGrid.tsx

@@ -35,6 +35,7 @@ import { Tooltip } from "../ui/Tooltip";
 import { WorkloadMetricsSection } from "./WorkloadMetricsSection";
 import { RightsizingStrip } from "./RightsizingStrip";
 import { useNavCustomization } from "../../context/NavCustomization";
+import { previousSettingsNote, usePreviousIntegrationSettings } from '../../hooks/usePreviousIntegrationSettings';
 
 // Used when MetricsTabContent is in expanded (full-screen) mode. Drawer mode
 // uses the single-chart tabbed `PrometheusCharts` instead — drawer width
@@ -73,6 +74,8 @@ export function PrometheusChartsGrid({
   const showRestartLane = isSupported && kind !== "Node";
 
   const settingsAvailable = !useNavCustomization().embedded;
+  const offers = usePreviousIntegrationSettings(isSupported && !statusLoading && !!status && !isConnected && !status.discovering);
+  const previousNote = offers.metrics ? previousSettingsNote('metrics', offers.metrics) : undefined;
   const [searchParams, setSearchParams] = useSearchParams();
   const timeRange = TIME_RANGES.find((range) => range.value === searchParams.get("metricsRange"))?.value ?? "1h";
 
@@ -142,6 +145,7 @@ export function PrometheusChartsGrid({
             onClick={() => window.dispatchEvent(new CustomEvent('radar:open-settings', { detail: { section: 'prometheus' } }))}
           >Configure metrics</button>}
           </div>
+          {previousNote && <p className="mt-3 text-xs text-theme-text-secondary">{previousNote}</p>}
           {!settingsAvailable && <p className="mt-3 text-xs text-theme-text-tertiary">Ask your operator to configure the metrics connection for this cluster.</p>}
           {isWorkload && <a className="mt-3 inline-block text-xs text-accent hover:underline" href="https://github.com/skyhook-io/radar/blob/main/docs/workload-metrics.md#what-each-chart-needs" target="_blank" rel="noopener noreferrer">What each chart needs</a>}
         </div>

package/src/components/resources/ImageFilesystemModal.tsx

@@ -10,6 +10,7 @@ import { formatBytes } from '../../utils/format'
 import { downloadBlob, filterTree } from './file-browser-utils'
 import { Tooltip } from '../ui/Tooltip'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
+import { readErrorBody } from '../../api/httpErrors'
 import { Input } from '@skyhook-io/k8s-ui'
 
 const radarLoadingIconUrl = assetUrl(radarLoadingIcon)
@@ -32,7 +33,7 @@ async function fetchImageFilesystem(
     headers: getAuthHeaders(),
   })
   if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: 'Request failed' }))
+    const error = await readErrorBody(response)
     throw new Error(error.error || `HTTP ${response.status}`)
   }
   return response.json()

package/src/components/resources/PodFilePreview.tsx

@@ -5,6 +5,7 @@ import { PaneLoader, ensureMonacoRuntime } from '@skyhook-io/k8s-ui'
 import { formatBytes } from '../../utils/format'
 import { Disclosure } from '@skyhook-io/k8s-ui/components/ui/Disclosure'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
+import { nonJsonErrorMessage } from '../../api/httpErrors'
 
 // A curated inline viewer for text files inside a pod container, rendered in
 // place of the file listing by PodFilesystemModal — never as its own dialog.
@@ -81,7 +82,9 @@ async function fetchPodFilePreview(
     return {
       ok: false,
       code: 'network_error',
-      message: `Unexpected non-JSON response (HTTP ${response.status}).`,
+      message: response.ok
+        ? `Unexpected non-JSON response (HTTP ${response.status}).`
+        : nonJsonErrorMessage(response, raw),
     }
   }
 

package/src/components/resources/PodFilesystemModal.tsx

@@ -7,6 +7,7 @@ import type { FileNode } from '../../types'
 import { formatBytes } from '../../utils/format'
 import { downloadBlob, filterTree } from './file-browser-utils'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
+import { readErrorBody } from '../../api/httpErrors'
 import { isDesktopApp } from '../../utils/desktop-download'
 import { openFile, openFolder } from '../../utils/desktop-open-folder'
 import { useToast } from '../ui/Toast'
@@ -33,7 +34,7 @@ async function fetchPodFiles(
     headers: getAuthHeaders(),
   })
   if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: 'Request failed' }))
+    const error = await readErrorBody(response)
     throw new Error(error.error || `HTTP ${response.status}`)
   }
   return response.json()
@@ -105,7 +106,7 @@ async function downloadPodFile(
       headers: getAuthHeaders(),
     })
     if (!response.ok) {
-      const err = await response.json().catch(() => ({ error: 'Download failed' }))
+      const err = await readErrorBody(response)
       throw new Error(err.error || `HTTP ${response.status}`)
     }
 

package/src/components/resources/ResourcesView.tsx

@@ -5,6 +5,7 @@ import { ApiError, debugNamespaceLog, fetchJSON, isForbiddenError, isKindSyncFai
 import { isBadgeWorthy } from '../../utils/auditBadges'
 import type { AuditBadgeMessage } from '@skyhook-io/k8s-ui'
 import { apiUrl, getAuthHeaders, getCredentialsMode, stripBasename } from '../../api/config'
+import { readErrorBody } from '../../api/httpErrors'
 import { useAPIResources } from '../../api/apiResources'
 import { useConnection } from '../../context/ConnectionContext'
 import { initNavigationMap, getSecretStoreProviderType } from '@skyhook-io/k8s-ui'
@@ -296,7 +297,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
         durationMs: Math.round(performance.now() - startedAt),
       })
       if (!res.ok) {
-        const errorData = await res.json().catch(() => ({ error: `HTTP ${res.status}` }))
+        const errorData = await readErrorBody(res)
         throw new ApiError(errorData.error || `Failed to fetch ${selectedKind.name}`, res.status, errorData)
       }
       const body = await res.json()

package/src/components/rightsizing/RightsizingScanView.tsx

@@ -36,6 +36,7 @@ import {
   type RightsizingActionTone,
 } from './presentation'
 import { useNavCustomization } from '../../context/NavCustomization'
+import { previousSettingsNote, usePreviousIntegrationSettings } from '../../hooks/usePreviousIntegrationSettings'
 
 export const RIGHTSIZING_SCAN_DESCRIPTION =
   'Find CPU and memory requests to increase, reduce, or review. Radar never changes them.'
@@ -117,6 +118,8 @@ export function RightsizingScanView({ namespaces }: RightsizingScanViewProps) {
     isLoading: statusLoading,
     refetch: retryPrometheus,
   } = usePrometheusStatus()
+  const offers = usePreviousIntegrationSettings(!!promStatus && !promStatus.connected && !promStatus.discovering && !statusLoading)
+  const previousNote = offers.metrics ? previousSettingsNote('metrics', offers.metrics) : undefined
   const scan = useRightsizingScan(namespaces, clusterInfo?.context)
   const result = scan.data
   const [openRow, setOpenRow] = useState<string | null>(null)
@@ -257,7 +260,7 @@ export function RightsizingScanView({ namespaces }: RightsizingScanViewProps) {
           <CenteredState
             title={RIGHTSIZING_METRICS_REQUIRED_TITLE}
             body={settingsAvailable
-              ? RIGHTSIZING_METRICS_REQUIRED_BODY
+              ? `${RIGHTSIZING_METRICS_REQUIRED_BODY}${previousNote ? `\n${previousNote}` : ''}`
               : RIGHTSIZING_EMBEDDED_METRICS_REQUIRED_BODY}
             action={
               <div className="flex flex-wrap items-center justify-center gap-3">

package/src/components/settings/ConnectionHeadersEditor.tsx

@@ -0,0 +1,109 @@
+import { Input } from '@skyhook-io/k8s-ui'
+
+export interface HeaderOperation {
+  key: string
+  action: 'keep' | 'set' | 'clear'
+  value?: string
+}
+
+export function ConnectionHeadersEditor({
+  keys,
+  environmentKeys,
+  value,
+  onChange
+}: {
+  keys: string[]
+  environmentKeys: string[]
+  value: HeaderOperation[]
+  onChange: (value: HeaderOperation[]) => void
+}) {
+  const rows = value.length
+    ? value
+    : keys.map((key): HeaderOperation => ({ key, action: 'keep' }))
+  const update = (index: number, patch: Partial<HeaderOperation>) =>
+    onChange(rows.map((row, i) => (i === index ? { ...row, ...patch } : row)))
+  return (
+    <section className="mt-4 space-y-2">
+      <h4 className="text-sm font-medium text-theme-text-primary">
+        Authentication headers
+      </h4>
+      <p className="text-xs text-theme-text-tertiary">
+        Optional. Saved values stay unchanged unless you replace or remove them.
+      </p>
+      {rows.map((row, index) => {
+        const saved = index < keys.length
+        const environment = saved && environmentKeys.some(
+          (key) => key.toLowerCase() === row.key.toLowerCase()
+        )
+        return (
+          <div key={index} className="space-y-1">
+            <div className="flex items-center gap-2">
+              <Input
+                aria-label={`Header ${index + 1} name`}
+                value={row.key}
+                disabled={saved}
+                onChange={(e) => update(index, { key: e.target.value })}
+                placeholder="Header name"
+                  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"
+              />
+              <Input
+                aria-label={`${row.key || 'New header'} value`}
+                type="password"
+                autoComplete="new-password"
+                disabled={environment || row.action === 'clear'}
+                value={row.value ?? ''}
+                placeholder={
+                  row.action === 'clear'
+                    ? 'Will be removed'
+                    : environment
+                      ? 'From environment'
+                      : saved
+                        ? 'Saved value'
+                        : 'Value'
+                }
+                onChange={(e) =>
+                  update(index, {
+                    action: saved && !e.target.value ? 'keep' : 'set',
+                    value: e.target.value || undefined
+                  })
+                }
+                  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"
+              />
+              {!environment && (
+                <button
+                  type="button"
+                  className="text-xs text-accent-text hover:underline shrink-0"
+                  aria-label={`${row.action === 'clear' ? 'Undo removal of' : 'Remove'} ${row.key || 'new header'}`}
+                  onClick={() =>
+                    saved
+                      ? update(index, {
+                          action: row.action === 'clear' ? 'keep' : 'clear',
+                          value: undefined
+                        })
+                      : onChange(rows.filter((_, i) => i !== index))
+                  }
+                >
+                  {row.action === 'clear' ? 'Undo' : 'Remove'}
+                </button>
+              )}
+            </div>
+            {environment && (
+              <p className="text-xs text-theme-text-tertiary">
+                Environment reference · edit this header in clusters.json.
+              </p>
+            )}
+          </div>
+        )
+      })}
+      <button
+        type="button"
+        className="text-xs text-accent-text hover:underline"
+        onClick={() =>
+          onChange([...rows, { key: '', action: 'set', value: '' }])
+        }
+      >
+        Add header
+      </button>
+    </section>
+  )
+}

package/src/components/settings/FormSaveActions.tsx

@@ -0,0 +1,76 @@
+import { Collapse } from "@skyhook-io/k8s-ui";
+import { Check } from "lucide-react";
+
+export interface FormFeedback {
+  message: string;
+  tone: "success" | "warning" | "info";
+}
+
+export function FormSaveActions({
+  dirty,
+  busy,
+  onSave,
+  onDiscard,
+  feedback,
+  error,
+}: {
+  dirty: boolean;
+  busy: boolean;
+  onSave: () => void;
+  onDiscard: () => void;
+  feedback?: FormFeedback;
+  error?: string;
+}) {
+  const success = !dirty && !busy && !error && feedback?.tone === "success";
+  const detail =
+    !busy && (error || (feedback?.tone !== "success" && feedback?.message));
+  return (
+    <div className="mt-4 border-t border-theme-border pt-4">
+      <div className="flex min-h-8 flex-wrap items-center gap-3">
+        <button
+          type="button"
+          disabled={!dirty || busy}
+          onClick={onSave}
+          className="btn-brand min-w-28 px-3 py-2 text-xs"
+        >
+          {busy ? "Saving…" : "Save changes"}
+        </button>
+        {success && (
+          <span
+            role="status"
+            className="flex items-center gap-1.5 text-xs text-theme-text-secondary"
+          >
+            <Check
+              aria-hidden="true"
+              className="h-3.5 w-3.5 text-[var(--color-success-dark)] dark:text-[var(--color-success-light)]"
+            />
+            {feedback.message}
+          </span>
+        )}
+        {dirty && (
+          <>
+            <button
+              type="button"
+              disabled={busy}
+              onClick={onDiscard}
+              className="text-xs text-theme-text-secondary hover:underline"
+            >
+              Discard
+            </button>
+            <span className="text-xs text-theme-text-tertiary">
+              Unsaved changes
+            </span>
+          </>
+        )}
+      </div>
+      <Collapse open={!!detail}>
+        <p
+          role={error ? "alert" : "status"}
+          className={`pt-2 text-xs ${error ? "text-semantic-error" : feedback?.tone === "warning" ? "text-warning-text" : "text-theme-text-secondary"}`}
+        >
+          {detail}
+        </p>
+      </Collapse>
+    </div>
+  );
+}