@skyhook-io/radar-app 1.14.5 → 1.14.6

package/src/components/settings/SettingsDialog.tsx

@@ -30,16 +30,13 @@ import {
   costIntegrationUnavailableMessage,
   costSourceLabel,
 } from '../cost/source'
-import { costSourceApplyLabel, shouldOfferCostReview, shouldShowSettingsFooter } from './settings-state'
+import { costSourceApplyLabel, prometheusHeadersFromRows, shouldOfferCostReview, shouldShowSettingsFooter } from './settings-state'
 import type { SettingsSectionId } from './settings-state'
+import { OperatorManagedNotice } from './OperatorManagedNotice'
 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
-// advertise 404s under a subpath deployment.
-function mcpLoopbackUrl(): string {
-  const port = Number(window.location.port) || 80
-  return `http://localhost:${port}${routePath('/mcp')}`
+function mcpEndpointUrl(): string {
+  return `${window.location.origin}${routePath('/mcp')}`
 }
 
 interface Config {
@@ -64,11 +61,15 @@ interface Config {
 }
 
 interface ConfigResponse {
+  management: 'local' | 'operator' | 'cloud'
   file: Config
   effective: Config
   isDesktop: boolean
   openCostCurrencyManaged?: boolean
   prometheusHeaderKeys?: string[]
+  prometheusServerManaged: boolean
+  prometheusHeadersManaged: boolean
+  prometheusUrlFromFlag: boolean
   kubecostApiKeySet?: boolean
   kubecostEnvManaged?: boolean
   kubecostEnvError?: string
@@ -137,16 +138,12 @@ export function SettingsDialog({
   const dialogRef = useRef<HTMLDivElement>(null)
   const { shouldRender, isOpen } = useAnimatedUnmount(open, overlayExitMs('dialog'))
   const { data: versionInfo } = useVersionCheck()
-  // Radar configuration (kubeconfig, port, integrations…) is host-level and
-  // affects every user of this instance, so it's gated to owners. Personal
-  // sections (My permissions, AI investigations) stay usable by everyone. Non-Cloud
-  // callers (OSS, OIDC, kubectl plugin) have no role and pass — single-user
-  // laptops are never locked out of their own config. Backend enforces this too.
   const { canAtLeast } = useCloudRole()
   const capabilities = useCapabilitiesContext()
-  const canEditConfig = canAtLeast('owner')
 
   const [configData, setConfigData] = useState<ConfigResponse | null>(null)
+  const operatorManaged = configData?.management === 'operator'
+  const canEditConfig = configData != null && !operatorManaged && canAtLeast('owner')
   const [editedConfig, setEditedConfig] = useState<Config>({})
   const [saving, setSaving] = useState(false)
   const [saveMessage, setSaveMessage] = useState<string | null>(null)
@@ -209,6 +206,7 @@ export function SettingsDialog({
   // actually accessible to the current identity.
   useEffect(() => {
     if (!open) return
+    setConfigData(null)
     setSaveMessage(null)
     setLoadError(null)
     setConfirmingClose(false)
@@ -229,7 +227,7 @@ export function SettingsDialog({
       })
       .then((data: ConfigResponse) => {
         setConfigData(data)
-        setEditedConfig(data.file)
+        setEditedConfig({ ...data.file, prometheusUrl: data.effective.prometheusUrl })
       })
       .catch((err) => {
         console.warn('[settings] Failed to load config:', err)
@@ -361,7 +359,7 @@ export function SettingsDialog({
     // live integration fields, so restoring it drops drafts without touching
     // what's saved.
     if (!configData) return
-    setEditedConfig(configData.file)
+    setEditedConfig({ ...configData.file, prometheusUrl: configData.effective.prometheusUrl })
     setCostCredentialDirty(false)
     setCostDraftReset((current) => current + 1)
     setSaveMessage(null)
@@ -535,7 +533,7 @@ export function SettingsDialog({
                 key={i.id}
                 item={i}
                 active={section === i.id}
-                disabled={i.ownerOnly && !canEditConfig}
+                disabled={i.ownerOnly && !operatorManaged && !canAtLeast('owner')}
                 onSelect={() => setSection(i.id)}
               />
             ))}
@@ -549,7 +547,7 @@ export function SettingsDialog({
                 item={i}
                 horizontal
                 active={section === i.id}
-                disabled={i.ownerOnly && !canEditConfig}
+                disabled={i.ownerOnly && !operatorManaged && !canAtLeast('owner')}
                 onSelect={() => setSection(i.id)}
               />
             ))}
@@ -564,12 +562,16 @@ export function SettingsDialog({
               </div>
             )}
 
+            {!configData && !['overview', 'perms', 'ai'].includes(section) ? (
+              <p className="text-sm text-theme-text-secondary">{loadError ? 'Configuration is unavailable. Close Settings and try again.' : 'Loading configuration…'}</p>
+            ) : <>
+            {operatorManaged && section !== 'perms' && section !== 'ai' && <div className="mb-4"><OperatorManagedNotice /></div>}
             {/* Overview — status at a glance; the landing section */}
             <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">
-                  What this Radar is connected to right now — select a row to manage it.
+                  What this Radar is connected to right now — select a row for details.
                 </p>
               </div>
               <div className="mt-3">
@@ -596,6 +598,7 @@ export function SettingsDialog({
               id="connection"
               active={section}
               title="Connection"
+              managed={operatorManaged ? <OperatorSettingsSummary section="connection" config={configData} /> : undefined}
               caption="Takes effect on next launch."
               locked={!canEditConfig}
             >
@@ -625,7 +628,8 @@ export function SettingsDialog({
               id="prometheus"
               active={section}
               title="Metrics"
-              caption="Applies immediately — no restart."
+              managed={operatorManaged ? <OperatorSettingsSummary section="prometheus" config={configData} /> : undefined}
+              caption="Connect and manage your metrics backend."
               live
               locked={!canEditConfig}
             >
@@ -633,10 +637,17 @@ export function SettingsDialog({
                 local={deploymentMode === 'local'}
                 value={editedConfig.prometheusUrl ?? ''}
                 configuredHeaderKeys={configData?.prometheusHeaderKeys ?? []}
+                serverManaged={configData?.prometheusServerManaged === true}
+                headersManaged={configData?.prometheusHeadersManaged === true}
+                urlFromFlag={configData?.prometheusUrlFromFlag === true}
                 onChange={(v) => updateConfigField('prometheusUrl', v || undefined)}
                 onApplied={(url) =>
                   setConfigData((prev) =>
-                    prev ? { ...prev, file: { ...prev.file, prometheusUrl: url || undefined } } : prev
+                    prev ? {
+                      ...prev,
+                      file: { ...prev.file, prometheusUrl: url || undefined },
+                      effective: { ...prev.effective, prometheusUrl: url || undefined },
+                    } : prev
                   )
                 }
               />
@@ -646,6 +657,7 @@ export function SettingsDialog({
               id="cost"
               active={section}
               title="Cost"
+              managed={operatorManaged ? <OperatorSettingsSummary section="cost" config={configData} /> : undefined}
               caption="Choose where Radar gets cost data and how amounts are labeled."
               live
               locked={!canEditConfig}
@@ -690,6 +702,7 @@ export function SettingsDialog({
               id="argocd"
               active={section}
               title="Argo CD"
+              managed={operatorManaged ? <OperatorSettingsSummary section="argocd" config={configData} /> : undefined}
               caption="Applies immediately — no restart."
               live
               locked={!canEditConfig}
@@ -739,12 +752,14 @@ export function SettingsDialog({
               <div className="mb-4">
                 <h3 className="text-base font-semibold text-theme-text-primary">AI investigations</h3>
                 <p className="mt-0.5 text-xs text-theme-text-tertiary">
-                  {diag.hosted
+                  {operatorManaged
+                    ? 'AI investigations are available in local Radar and Radar Cloud.'
+                    : diag.hosted
                     ? `Investigate incidents with ${diag.agentLabel} — reading logs, events, and topology to understand what's happening.`
                     : "Investigate incidents with an AI agent that runs on your own machine — reading logs, events, and topology to understand what's happening. No Radar cloud, no API key."}
                 </p>
               </div>
-              {aiAvailable ? (
+              {operatorManaged ? <p className="text-sm text-theme-text-secondary">Local AI investigations are unavailable in a shared installation. Use local Radar with an agent CLI, or Radar Cloud.</p> : aiAvailable ? (
                 <div className="space-y-4">
                   <AISettingsSection
                     available={diag.available}
@@ -786,6 +801,7 @@ export function SettingsDialog({
               id="advanced"
               active={section}
               title="Advanced"
+              managed={operatorManaged ? <OperatorSettingsSummary section="advanced" config={configData} /> : undefined}
               caption="Takes effect on next launch."
               locked={!canEditConfig}
             >
@@ -808,6 +824,7 @@ export function SettingsDialog({
                 />
               </div>
             </SectionPane>
+            </>}
           </div>
         </div>
 
@@ -1009,6 +1026,7 @@ function SectionPane({
   caption,
   live,
   locked,
+  managed,
   children,
 }: {
   id: SettingsSectionId
@@ -1017,6 +1035,7 @@ function SectionPane({
   caption?: string
   live?: boolean
   locked?: boolean
+  managed?: ReactNode
   children: ReactNode
 }) {
   return (
@@ -1025,7 +1044,7 @@ function SectionPane({
         <h3 className="text-base font-semibold text-theme-text-primary">{title}</h3>
         {!locked && caption && <SectionCaption live={live}>{caption}</SectionCaption>}
       </div>
-      {locked ? <LockWall /> : <div className="space-y-4">{children}</div>}
+      {managed ?? (locked ? <LockWall /> : <div className="space-y-4">{children}</div>)}
     </div>
   )
 }
@@ -1044,6 +1063,70 @@ function SectionCaption({ children, live }: { children: ReactNode; live?: boolea
   )
 }
 
+function OperatorSettingsSummary({ section, config }: { section: SettingsSectionId; config: ConfigResponse }) {
+  const { data: prom, error: promError } = usePrometheusStatus()
+  const { data: argo, error: argoError } = useArgoStatus(section === 'argocd')
+  const { data: cost, error: costError } = useOpenCostSummary()
+  const { data: cluster } = useClusterInfo()
+  const c = config.effective
+  let rows: [string, ReactNode][] = []
+  let detail: string | undefined
+  switch (section) {
+    case 'connection':
+      rows = [['Cluster connection', cluster?.inCluster ? 'Pod service account' : cluster?.context ?? 'Connecting…'], ['Server port', c.port ?? '—']]
+      detail = 'The operator selects the cluster and connection settings at startup.'
+      break
+    case 'prometheus':
+      rows = [
+        ['Status', promError ? 'Status unavailable' : !prom ? 'Checking…' : prom.connected ? 'Connected' : prom.discovering ? 'Discovering…' : 'Not connected'],
+        ['Endpoint', prom?.address || c.prometheusUrl || 'Auto-discovery'],
+        ['Headers', config.prometheusHeaderKeys?.join(', ') || 'None configured'],
+      ]
+      detail = prom?.error
+      break
+    case 'argocd':
+      rows = [
+        ['Status', argoError ? 'Status unavailable' : !argo ? 'Checking…' : argo.connected ? 'Connected' : 'Not connected'],
+        ['Endpoint', argo?.address || c.argoCdUrl || 'Auto-discovery'],
+        ['Token', config.argoCdTokenSet ? 'Configured' : 'None configured'],
+        ['TLS verification', c.argoCdInsecureTls ? 'Disabled' : 'Enabled'],
+      ]
+      detail = config.argoCdEnvError || argo?.reason
+      break
+    case 'cost':
+      rows = [
+        ['Status', costError ? 'Status unavailable' : !cost ? 'Checking…' : cost.available ? 'Available' : 'Unavailable'],
+        ['Source preference', c.costSource || 'Auto'],
+        ['Kubecost endpoint', c.kubecostUrl || 'Auto-discovery'],
+        ['Cluster ID', c.kubecostClusterId || 'Auto-detected when available'],
+        ['API key', config.kubecostApiKeySet ? 'Configured' : 'None configured'],
+        ['Currency override', c.opencostCurrency || 'Automatic'],
+      ]
+      detail = config.kubecostEnvError || (cost?.reason ? costIntegrationUnavailableMessage(cost.reason) ?? undefined : undefined)
+      break
+    case 'advanced':
+      rows = [
+        ['MCP', c.mcp ? 'Enabled' : 'Disabled'],
+        ['Timeline storage', c.timelineStorage || 'Memory'],
+        ['Event history limit', c.historyLimit ?? '—'],
+      ]
+      break
+  }
+  return (
+    <div className="space-y-3">
+      <dl className="divide-y divide-theme-border-subtle rounded-lg border border-theme-border px-3">
+        {rows.map(([label, value]) => (
+          <div key={label} className="grid grid-cols-[140px_minmax(0,1fr)] gap-3 py-3 text-sm">
+            <dt className="text-theme-text-tertiary">{label}</dt>
+            <dd className="min-w-0 break-words text-theme-text-primary">{value}</dd>
+          </div>
+        ))}
+      </dl>
+      {detail && <p className="text-sm text-theme-text-secondary break-words">{detail}</p>}
+    </div>
+  )
+}
+
 function LockWall() {
   return (
     <div className="rounded-md border border-theme-border bg-theme-elevated/50 p-4 flex items-start gap-3">
@@ -1096,7 +1179,7 @@ function OverviewPanel({ active, onNavigate }: { active: boolean; onNavigate: (s
   const agentLabel =
     diag.agents.find((a) => a.name === diag.selectedAgent)?.label ?? diag.agents[0]?.label
   const mcpOn = capabilities.mcpEnabled
-  const mcpUrl = mcpLoopbackUrl()
+  const mcpUrl = mcpEndpointUrl()
   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.'
@@ -1240,9 +1323,10 @@ function AIUnavailableNotice() {
       <p className="text-sm font-medium text-theme-text-primary">No supported agent CLI found</p>
       <p className="mt-1 text-xs text-theme-text-tertiary">
         Install <span className="text-theme-text-secondary">Claude Code</span>,{' '}
-        <span className="text-theme-text-secondary">Codex</span>, or{' '}
+        <span className="text-theme-text-secondary">Codex</span>,{' '}
         <span className="text-theme-text-secondary">Cursor</span> (
-        <span className="font-mono">cursor-agent</span>), then restart Radar — this tab
+        <span className="font-mono">cursor-agent</span>), or{' '}
+        <span className="text-theme-text-secondary">OpenCode</span>, then restart Radar — this tab
         will show the agent, model, and effort controls.
       </p>
     </div>
@@ -1812,7 +1896,7 @@ function MCPSection({
   const [copied, setCopied] = useState(false)
 
   const currentPort = Number(window.location.port) || 80
-  const mcpUrl = mcpLoopbackUrl()
+  const mcpUrl = mcpEndpointUrl()
 
   const handleCopy = () => {
     navigator.clipboard.writeText(mcpUrl)
@@ -1915,12 +1999,18 @@ function PrometheusConfigField({
   value,
   onChange,
   configuredHeaderKeys,
+  serverManaged,
+  headersManaged,
+  urlFromFlag,
   onApplied,
 }: {
   local: boolean
   value: string
   onChange: (value: string) => void
   configuredHeaderKeys: string[]
+  serverManaged: boolean
+  headersManaged: boolean
+  urlFromFlag: boolean
   onApplied?: (url: string) => void
 }) {
   const [apply, setApply] = useState<ApplyState>({ status: 'idle' })
@@ -1950,17 +2040,8 @@ function PrometheusConfigField({
     // 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.
-    let editedHeaders: Record<string, string> | undefined
-    if (headerRows !== null) {
-      const entered = Object.fromEntries(
-        headerRows
-          .map((r) => [r.key.trim(), r.value] as const)
-          .filter(([k, v]) => k !== '' && v !== '')
-      )
-      if (Object.keys(entered).length > 0) editedHeaders = entered
-      else if (headerRows.length === 0) editedHeaders = {}
-    }
     try {
+      const editedHeaders = prometheusHeadersFromRows(headerRows)
       const res = await fetch(apiUrl('/integrations/prometheus'), {
         method: 'PUT',
         credentials: getCredentialsMode(),
@@ -2007,11 +2088,12 @@ function PrometheusConfigField({
       <div className="flex items-center gap-2">
         <Input
           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"
         />
-        <Tooltip content="Apply the connection now — no restart. Changing the URL or headers clears any workload scope override and resumes automatic identity matching." wrapperClassName="shrink-0">
+        <Tooltip content="Save and apply this connection, then check reachability. Applying clears any workload scope override and resumes automatic identity matching." wrapperClassName="shrink-0">
           <button
             onClick={handleApply}
             disabled={apply.status === 'applying'}
@@ -2039,15 +2121,26 @@ function PrometheusConfigField({
         </p>
       ) : (
         <p className="mt-1 text-xs text-theme-text-tertiary">
-          Applies immediately — no restart needed.
+          Saves and applies before checking the connection.
         </p>
       )}
       <p className="mt-2 text-xs text-theme-text-tertiary">
         {local
           ? 'Saved URL and headers apply across all local cluster contexts.'
           : 'Changes affect this Radar installation. Use deployment settings for configuration that survives Pod replacement.'}
-        {' URL changes do not clear headers. Replace or clear credentials before switching backends.'}
+        {' Changing servers requires replacing or clearing the saved headers.'}
       </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>
+      )}
 
       {/* Auth headers — for token / multi-tenant backends (Bearer, X-Scope-OrgID). */}
       <div className="mt-3">
@@ -2058,12 +2151,13 @@ function PrometheusConfigField({
                 ? <>Auth headers: <span className="text-theme-text-secondary">{storedKeys.join(', ')}</span> <span className="text-theme-text-disabled">(values hidden)</span></>
                 : 'No auth headers'}
             </span>
-            <button
+            {!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>
+            </button>}
           </div>
         ) : (
           <div className="rounded-md border border-theme-border bg-theme-elevated/40 p-2.5 space-y-2">
@@ -2071,6 +2165,7 @@ function PrometheusConfigField({
               <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()
@@ -2081,6 +2176,7 @@ function PrometheusConfigField({
                 <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()
@@ -2091,6 +2187,7 @@ function PrometheusConfigField({
                 <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" />
@@ -2101,12 +2198,14 @@ function PrometheusConfigField({
             <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
@@ -2121,6 +2220,22 @@ function PrometheusConfigField({
           </div>
         )}
       </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"
+        >
+          Clear saved headers
+        </button>
+      )}
+      {headerRows?.length === 0 && (
+        <p className="mt-1 text-xs text-warning-text">Headers will be cleared when you click Apply now.</p>
+      )}
     </div>
   )
 }

package/src/components/settings/settings-state.test.ts

@@ -1,10 +1,28 @@
 import { describe, expect, it } from "vitest";
 import {
   costSourceApplyLabel,
+  prometheusHeadersFromRows,
   shouldOfferCostReview,
   shouldShowSettingsFooter,
 } from "./settings-state";
 
+describe("Prometheus header edits", () => {
+  it("distinguishes unchanged, replacement and explicit clear", () => {
+    expect(prometheusHeadersFromRows(null)).toBeUndefined();
+    expect(prometheusHeadersFromRows([{ key: "", value: "" }])).toBeUndefined();
+    expect(prometheusHeadersFromRows([])).toEqual({});
+    expect(prometheusHeadersFromRows([{ key: " Authorization ", value: "Bearer new" }])).toEqual({ Authorization: "Bearer new" });
+  });
+  it("does not silently discard incomplete or duplicate rows", () => {
+    expect(() => prometheusHeadersFromRows([{ key: "Authorization", value: "" }])).toThrow("both a name and value");
+    expect(() => prometheusHeadersFromRows([{ key: "", value: "secret" }])).toThrow("both a name and value");
+    expect(() => prometheusHeadersFromRows([{ key: "Authorization", value: "a" }, { key: "authorization", value: "b" }])).toThrow("more than once");
+  });
+  it("preserves valid names that coincide with object properties", () => {
+    expect(JSON.stringify(prometheusHeadersFromRows([{ key: "__proto__", value: "value" }]))).toBe('{"__proto__":"value"}');
+  });
+});
+
 describe("Cost settings state", () => {
   it("keeps source drafts inline while the Cost section is open", () => {
     expect(shouldOfferCostReview(true, "cost")).toBe(false);

package/src/components/settings/settings-state.ts

@@ -37,3 +37,21 @@ export function costSourceApplyLabel(
 ): string {
   return source === 'prometheus' ? 'Apply source' : 'Test & apply source'
 }
+
+export function prometheusHeadersFromRows(
+  rows: { key: string; value: string }[] | null,
+): Record<string, string> | undefined {
+  if (rows === null) return undefined
+  if (rows.length === 0) return {}
+  const entries: [string, string][] = []
+  const seen = new Set<string>()
+  for (const row of rows) {
+    const key = row.key.trim()
+    if (!key && !row.value) continue
+    if (!key || !row.value) throw new Error('Enter both a name and value for each header, or remove the incomplete row.')
+    if (seen.has(key.toLowerCase())) throw new Error(`Header "${key}" is entered more than once.`)
+    seen.add(key.toLowerCase())
+    entries.push([key, row.value])
+  }
+  return entries.length ? Object.fromEntries(entries) : undefined
+}

package/src/components/timeline/TimelineView.tsx

@@ -10,6 +10,7 @@ import {
   buildAppMembershipIndex,
   eventsForApplication,
   isPinnedLaneRef,
+  pinnedLaneRefMatches,
   LIVE_TICK_MS,
   SEVERITY_TEXT,
   type ScrubberRange,
@@ -50,6 +51,13 @@ function loadPinnedLanes(): PinnedLaneRef[] {
   }
 }
 
+export function togglePinnedLaneRefs(previous: PinnedLaneRef[], ref: PinnedLaneRef): PinnedLaneRef[] {
+  const pinned = previous.some((stored) => pinnedLaneRefMatches(stored, ref))
+  return pinned
+    ? previous.filter((stored) => !pinnedLaneRefMatches(stored, ref))
+    : [...previous, ref]
+}
+
 // Helper to check if topology has meaningfully changed
 function topologyContentEqual(a: Topology | undefined, b: Topology | undefined): boolean {
   if (a === b) return true
@@ -348,9 +356,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     }
   }, [pinnedLanes])
   const togglePin = useCallback((ref: PinnedLaneRef) => {
-    setPinnedLanes((prev) => (
-      prev.some((p) => p.id === ref.id) ? prev.filter((p) => p.id !== ref.id) : [...prev, ref]
-    ))
+    setPinnedLanes((prev) => togglePinnedLaneRefs(prev, ref))
   }, [])
   // pinnedOnly is meaningless with no pins: unpinning the last lane (or landing
   // on ?pinnedOnly=1 with no stored pins) would otherwise leave the filter stuck

package/src/components/timeline/TimelineView.urlparams.test.ts

@@ -1,16 +1,33 @@
 import { describe, expect, it } from 'vitest'
-import type { ActivityFilterKey, TimelineGrouping, TimelineSort } from '@skyhook-io/k8s-ui'
+import type { ActivityFilterKey, PinnedLaneRef, TimelineGrouping, TimelineSort } from '@skyhook-io/k8s-ui'
 import {
   parseTimeMode,
   resolveApplicationTimelineScope,
   writeTimelineParams,
   onlyHighFreqDiffer,
   timeModeEqual,
+  togglePinnedLaneRefs,
   type TimelineMode,
   type PersistedTimelineState,
   type TimelineViewMode,
 } from './TimelineView'
 
+describe('togglePinnedLaneRefs', () => {
+  it('unpins a migrated legacy CRD pin by its canonical live identity', () => {
+    const legacy: PinnedLaneRef = { id: 'Cluster/prod/main', kind: 'Cluster', namespace: 'prod', name: 'main' }
+    const live: PinnedLaneRef = { id: 'Cluster.postgresql.cnpg.io/prod/main', kind: 'Cluster', group: 'postgresql.cnpg.io', namespace: 'prod', name: 'main' }
+
+    expect(togglePinnedLaneRefs([legacy], live)).toEqual([])
+  })
+
+  it('does not unpin a different explicit API group', () => {
+    const cnpg: PinnedLaneRef = { id: 'Cluster.postgresql.cnpg.io/prod/main', kind: 'Cluster', group: 'postgresql.cnpg.io', namespace: 'prod', name: 'main' }
+    const capi: PinnedLaneRef = { id: 'Cluster.cluster.x-k8s.io/prod/main', kind: 'Cluster', group: 'cluster.x-k8s.io', namespace: 'prod', name: 'main' }
+
+    expect(togglePinnedLaneRefs([cnpg], capi)).toEqual([cnpg, capi])
+  })
+})
+
 // These mirror the module-private defaults writeTimelineParams omits at (and
 // parseTimeMode falls back to). Kept in sync deliberately: the round-trip tests
 // below fail loudly if a module default drifts from what is asserted here.

package/src/components/ui/command-items.ts

@@ -146,9 +146,6 @@ const VIEW_ENTRIES: {
   { view: "cost", label: "Cost", icon: Coins, shortcut: "g c" },
 ];
 
-// The static command-palette items (Views, Resource Kinds, Contexts,
-// Namespaces, Actions) — shared by the centered modal (embedded) and the
-// standalone omnibar so the two never drift.
 export function useCommandItems(cb: CommandItemCallbacks): CommandItem[] {
   const { data: namespacesData } = useNamespaces();
   const { data: contexts } = useContexts();