@skyhook-io/radar-app 1.14.5 → 1.14.6

package/src/api/preferences.test.ts

@@ -0,0 +1,54 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+describe('preference persistence by installation', () => {
+  beforeEach(() => { vi.resetModules() })
+  afterEach(() => { vi.unstubAllGlobals() })
+
+  it('keeps shared OSS theme and pins in the browser without writing the server', async () => {
+    const fetchMock = vi.fn().mockResolvedValue(new Response(JSON.stringify({ preferenceStorage: 'browser' })))
+    vi.stubGlobal('fetch', fetchMock)
+    const { persistPreferences } = await import('./preferences')
+    await persistPreferences({ theme: 'light' })
+    await persistPreferences({ pinnedKinds: [{ name: 'pods', kind: 'Pod', group: '' }] })
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    expect(fetchMock.mock.calls[0][0]).toBe('/api/settings')
+    expect(fetchMock.mock.calls[0][1].method).toBeUndefined()
+  })
+
+  it('preserves local and Cloud persistence through configured API helpers', async () => {
+    const fetchMock = vi.fn().mockImplementation(async () => new Response('{}'))
+    vi.stubGlobal('fetch', fetchMock)
+    const config = await import('./config')
+    config.setApiBase('/c/example/api')
+    config.setAuthHeadersProvider(() => ({ Authorization: 'test-header' }))
+    config.setCredentialsMode('include')
+    const { persistPreferences } = await import('./preferences')
+    await persistPreferences({ theme: 'light' })
+    expect(fetchMock).toHaveBeenLastCalledWith('/c/example/api/settings', expect.objectContaining({
+      method: 'PUT', credentials: 'include',
+      headers: { 'Content-Type': 'application/json', Authorization: 'test-header' },
+      body: JSON.stringify({ theme: 'light' }),
+    }))
+  })
+
+  it('never assumes permission to write when the settings read fails', async () => {
+    const fetchMock = vi.fn().mockResolvedValue(new Response('denied', { status: 403 }))
+    vi.stubGlobal('fetch', fetchMock)
+    const { persistPreferences } = await import('./preferences')
+    await expect(persistPreferences({ theme: 'light' })).rejects.toThrow('403')
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not send a pending change to another instance after navigation', async () => {
+    let finish!: (response: Response) => void
+    const fetchMock = vi.fn().mockReturnValue(new Promise<Response>((resolve) => { finish = resolve }))
+    vi.stubGlobal('fetch', fetchMock)
+    const config = await import('./config')
+    const { persistPreferences } = await import('./preferences')
+    const saving = persistPreferences({ theme: 'light' })
+    config.setApiBase('/c/other/api')
+    finish(new Response('{}'))
+    await saving
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+  })
+})

package/src/api/preferences.ts

@@ -0,0 +1,38 @@
+import { apiUrl, getApiBase, getAuthHeaders, getCredentialsMode } from './config'
+import type { PinnedKind } from '../hooks/useFavorites'
+
+interface Preferences {
+  theme?: 'light' | 'dark'
+  pinnedKinds?: PinnedKind[]
+  preferenceStorage?: 'browser'
+}
+
+let request: { base: string; promise: Promise<Preferences> } | undefined
+
+export function loadPreferences(): Promise<Preferences> {
+  const base = getApiBase()
+  if (!request || request.base !== base) {
+    const promise = fetch(apiUrl('/settings'), { credentials: getCredentialsMode(), headers: getAuthHeaders() })
+      .then((res) => {
+        if (!res.ok) throw new Error(`Failed to load preferences: HTTP ${res.status}`)
+        return res.json() as Promise<Preferences>
+      })
+    request = { base, promise }
+    promise.catch(() => { if (request?.promise === promise) request = undefined })
+  }
+  return request.promise
+}
+
+export async function persistPreferences(patch: Pick<Preferences, 'theme' | 'pinnedKinds'>): Promise<void> {
+  const base = getApiBase()
+  const preferences = await loadPreferences()
+  if (base !== getApiBase() || preferences.preferenceStorage === 'browser') return
+  const res = await fetch(apiUrl('/settings'), {
+    method: 'PUT',
+    credentials: getCredentialsMode(),
+    headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+    body: JSON.stringify(patch),
+  })
+  if (!res.ok) throw new Error(`Failed to save preferences: HTTP ${res.status}`)
+  if (request?.base === base) request = undefined
+}

package/src/components/CloudFunnelButton.test.tsx

@@ -0,0 +1,155 @@
+// @vitest-environment jsdom
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { ConnectionStateType } from '../context/ConnectionContext'
+import { CloudFunnelButton } from './CloudFunnelButton'
+
+const connection = vi.hoisted(() => ({ state: 'connecting' as ConnectionStateType }))
+vi.mock('../context/ConnectionContext', () => ({ useConnection: () => ({ connection }) }))
+vi.mock('./ui/Tooltip', () => ({ Tooltip: ({ children }: { children: ReactNode }) => children }))
+vi.mock('./ui/Toast', () => ({ showApiError: vi.fn() }))
+vi.mock('./CloudConnectFlow', () => ({ CloudConnectFlow: () => <div>Install flow</div> }))
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+let root: Root
+let client: QueryClient
+let lane: 'driver' | 'wizard'
+let discovery: { connected: { namespace: string; deployment: string; clusterUrl: string }[] }
+let discoveryStatus: number
+let flowState: 'idle' | 'awaiting_approval'
+const requests: string[] = []
+
+beforeEach(() => {
+  connection.state = 'connecting'
+  lane = 'driver'
+  discovery = { connected: [] }
+  discoveryStatus = 200
+  flowState = 'idle'
+  requests.length = 0
+  client = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  const element = document.createElement('div')
+  document.body.appendChild(element)
+  root = createRoot(element)
+  vi.stubGlobal('fetch', vi.fn(async (input: string) => {
+    const url = new URL(input, 'http://localhost')
+    requests.push(url.pathname + url.search)
+    const bodies: Record<string, unknown> = {
+      '/api/capabilities': { cloudConnect: { lane, appUrl: 'https://cloud.example', apiUrl: 'https://cloud.example' }, deployment: { mode: 'local' } },
+      '/api/cluster-info': { context: 'test-cluster' },
+      '/api/cloud/install/status': { state: flowState },
+      '/api/cloud/install/discover': discoveryStatus === 200 ? discovery : { error: 'Discovery failed' },
+      '/api/cloud/install/prepare': { error: 'Not connected to cluster' },
+      '/api/connect/info': {},
+    }
+    if (!(url.pathname in bodies)) throw new Error(`Unexpected request: ${input}`)
+    const status = url.pathname.endsWith('/prepare') ? 503 : url.pathname.endsWith('/discover') ? discoveryStatus : 200
+    return new Response(JSON.stringify(bodies[url.pathname]), { status })
+  }))
+})
+
+afterEach(async () => {
+  await act(async () => root.unmount())
+  client.clear()
+  document.body.replaceChildren()
+  vi.unstubAllGlobals()
+})
+
+async function render() {
+  await act(async () => {
+    root.render(<QueryClientProvider client={client}><CloudFunnelButton /></QueryClientProvider>)
+  })
+}
+
+async function until(assertion: () => void) {
+  await vi.waitFor(async () => {
+    await act(async () => { await new Promise(resolve => setTimeout(resolve, 0)) })
+    assertion()
+  })
+}
+
+function button(text: string) {
+  return Array.from(document.querySelectorAll('button')).find(element => element.textContent === text)
+}
+
+async function openDialog() {
+  await render()
+  await until(() => expect(document.querySelector('[aria-label="Radar Cloud"]')).not.toBeNull())
+  await act(async () => { (document.querySelector('[aria-label="Radar Cloud"]') as HTMLButtonElement).click() })
+}
+
+describe('Cloud dialog connection availability', () => {
+  it.each(['connecting', 'disconnected'] as const)('offers Cloud directly while %s without inspecting a cluster', async state => {
+    connection.state = state
+    await openDialog()
+    await until(() => expect(requests).toContain('/api/connect/info?lane=wizard&mode=local'))
+    const link = Array.from(document.querySelectorAll('a')).find(element => element.textContent === 'Continue in Radar Cloud')!
+    expect(link.href).toBe('https://cloud.example/signup?utm_source=radar-oss&utm_medium=app&utm_campaign=cloud-modal&utm_content=driver-footer-browser-link')
+    expect(button('Connect this cluster…')).toBeUndefined()
+    expect(button('Try again')).toBeUndefined()
+    expect(requests).not.toContain('/api/cloud/install/discover')
+    expect(requests).not.toContain('/api/cloud/install/prepare')
+    await act(async () => { button('How it works and what it costs')!.click() })
+    expect(document.body.textContent).toContain('You approve the connection before anything is installed.')
+    expect(document.body.textContent).not.toContain('Setup runs here in the app')
+    expect(document.body.textContent).not.toContain('Nothing installs on click')
+  })
+
+  it('restores cluster discovery and Connect in the open dialog when the connection recovers', async () => {
+    await openDialog()
+    connection.state = 'connected'
+    await render()
+    await until(() => expect(button('Connect this cluster…')?.disabled).toBe(false))
+    expect(requests).toContain('/api/cloud/install/discover')
+    expect(requests).toContain('/api/connect/info?lane=driver&mode=local')
+    connection.state = 'disconnected'
+    await render()
+    expect(button('Connect this cluster…')).toBeUndefined()
+    expect(document.body.textContent).toContain('Continue in Radar Cloud')
+    connection.state = 'connected'
+    await render()
+    await until(() => expect(button('Connect this cluster…')?.disabled).toBe(false))
+    expect(requests.filter(path => path === '/api/cloud/install/discover')).toHaveLength(2)
+  })
+
+  it('keeps the existing already-connected destination after discovery', async () => {
+    connection.state = 'connected'
+    discovery.connected = [{ namespace: 'radar', deployment: 'radar', clusterUrl: 'https://cloud.example/clusters/one' }]
+    await openDialog()
+    await until(() => expect(document.body.textContent).toContain('This cluster is already connected to Radar Cloud.'))
+    expect(document.querySelector('a[href="https://cloud.example/clusters/one"]')?.textContent).toBe('Open in Radar Cloud')
+    expect(button('Connect this cluster…')).toBeUndefined()
+    connection.state = 'disconnected'
+    await render()
+    expect(document.body.textContent).not.toContain('This cluster is already connected to Radar Cloud.')
+    expect(document.body.textContent).toContain('Continue in Radar Cloud')
+  })
+
+  it('still allows inspection after discovery fails and preserves 503 handoff attribution', async () => {
+    connection.state = 'connected'
+    discoveryStatus = 500
+    await openDialog()
+    await until(() => expect(button('Connect this cluster…')?.disabled).toBe(false))
+    await act(async () => { button('Connect this cluster…')!.click() })
+    await until(() => expect(button('Try again')).toBeDefined())
+    expect(document.querySelector('a[href*="driver-footer-browser-link"]')?.getAttribute('href')).toContain('radar_outcome=radar_not_connected_to_cluster')
+    expect(document.body.textContent).toContain('Not connected to cluster')
+  })
+
+  it('keeps wizard-only deployments on their existing signup path', async () => {
+    lane = 'wizard'
+    await openDialog()
+    expect(document.querySelector('a[href*="wizard-signup-button"]')?.textContent).toBe('Try Cloud free')
+    expect(document.body.textContent).not.toContain('Continue in Radar Cloud')
+    expect(requests).not.toContain('/api/cloud/install/discover')
+  })
+
+  it('keeps an active server-owned install visible even while disconnected', async () => {
+    connection.state = 'disconnected'
+    flowState = 'awaiting_approval'
+    await openDialog()
+    await until(() => expect(document.body.textContent).toContain('Install flow'))
+    expect(document.body.textContent).not.toContain('Continue in Radar Cloud')
+  })
+})

package/src/components/CloudFunnelButton.tsx

@@ -15,6 +15,7 @@ import {
   signupUrlFor as buildSignupUrl,
 } from './cloudConnectHandoff'
 import { showApiError } from './ui/Toast'
+import { useConnection } from '../context/ConnectionContext'
 import {
   ApiError,
   cloudInstallActive,
@@ -113,6 +114,8 @@ export function CloudFunnelButton() {
   const capabilities = useCapabilities()
   const clusterInfo = useClusterInfo()
   const lane = capabilities.data?.cloudConnect?.lane ?? 'wizard'
+  const clusterConnected = useConnection().connection.state === 'connected'
+  const pitchLane = lane === 'driver' && !clusterConnected ? 'wizard' : lane
   const appUrl = capabilities.data?.cloudConnect?.appUrl || FALLBACK_APP_URL
   // utm_content names the link that was clicked. It travels only in the link
   // the user opens; Radar sends nothing on its own. Only the blocked card may
@@ -124,7 +127,7 @@ export function CloudFunnelButton() {
   // learns that someone opened it, which is congruent with what the dialog is
   // for; it must not learn that Radar is merely running.
   const connectInfo = useCloudConnectInfo(capabilities.data?.cloudConnect?.apiUrl, open, {
-    lane,
+    lane: pitchLane,
     mode: capabilities.data?.deployment?.mode,
   })
 
@@ -138,14 +141,14 @@ export function CloudFunnelButton() {
   // carries Cloud settings — installed by a colleague after a handoff, or from
   // another machine. The plan would refuse to install over it; better to say
   // "already connected" and point at it than to offer a click that ends blocked.
-  const discovered = useCloudInstallDiscover(open && lane === 'driver', clusterInfo.data?.context)
+  const discovered = useCloudInstallDiscover(open && lane === 'driver' && clusterConnected, clusterInfo.data?.context)
   // The server ranks these: one it can link to first. A failed lookup is
   // not a verdict — the CTA returns and the plan does its own inspection —
   // and neither is the previous opening's answer: this component outlives
   // the dialog, so a reopen refetches over cached data, and the gate must
   // hold for that refetch too (isFetching, not isPending) while a refetch
   // that fails must not keep showing what it found last time.
-  const alreadyConnected = discovered.isError ? undefined : discovered.data?.connected[0]
+  const alreadyConnected = !clusterConnected || discovered.isError ? undefined : discovered.data?.connected[0]
   const discoverPending = lane === 'driver' && discovered.isFetching
 
   // The flow is server-owned: polling here both drives the live progress view
@@ -332,10 +335,11 @@ export function CloudFunnelButton() {
         ) : (
           <>
             <div className="min-h-0 overflow-y-auto">
-              <PitchBody lane={lane} freeTier={connectInfo.data?.freeTier} />
+              <PitchBody lane={pitchLane} freeTier={connectInfo.data?.freeTier} />
             </div>
             <ModalFooter
               lane={lane}
+              clusterConnected={clusterConnected}
               signupUrl={signupUrl}
               // One link name whether or not an attempt preceded the click; the
               // outcome, when present, is what says an attempt happened.
@@ -398,6 +402,7 @@ function Eyebrow() {
 
 function ModalFooter({
   lane,
+  clusterConnected,
   signupUrl,
   driverBrowserUrl,
   prepareFailed,
@@ -415,6 +420,7 @@ function ModalFooter({
   onLater,
 }: {
   lane: 'driver' | 'wizard'
+  clusterConnected: boolean
   signupUrl: string
   // Same destination as signupUrl, distinct utm_content, and the outcome of
   // an in-app attempt when one preceded this render.
@@ -534,7 +540,7 @@ function ModalFooter({
               {alreadyConnected.clusterUrl ? 'Open in Radar Cloud' : 'Open Radar Cloud'}
             </a>
           )
-        ) : lane === 'driver' ? (
+        ) : lane === 'driver' && clusterConnected ? (
           <>
             <button
               onClick={onConnect}
@@ -559,14 +565,14 @@ function ModalFooter({
           </>
         ) : cliOnly ? null : (
           <a
-            href={self?.wizardUrl || signupUrl}
+            href={lane === 'driver' ? driverBrowserUrl : self?.wizardUrl || signupUrl}
             aria-disabled={selfPending}
             target="_blank"
             rel="noopener noreferrer"
             onClick={(e) => { if (selfPending) e.preventDefault() }}
             className={`px-5 py-2 rounded-[10px] bg-emerald-500 hover:bg-emerald-400 text-emerald-950 text-[13.5px] font-bold shadow-[0_0_22px_rgba(16,185,129,0.35)] hover:shadow-[0_0_30px_rgba(16,185,129,0.5)] hover:-translate-y-px transition-all ${selfPending ? 'opacity-60 pointer-events-none' : ''}`}
           >
-            {self?.ownership === 'helm' || gitops ? 'Connect this cluster' : 'Try Cloud free'}
+            {lane === 'driver' ? 'Continue in Radar Cloud' : self?.ownership === 'helm' || gitops ? 'Connect this cluster' : 'Try Cloud free'}
           </a>
         )}
         <button onClick={onLater} className="ml-auto whitespace-nowrap text-[12px] text-theme-text-tertiary hover:text-theme-text-primary transition-colors">
@@ -584,7 +590,7 @@ function ModalFooter({
       )}
       {/* Mechanics, not marketing: a falsifiable claim the plan card then
           fulfills. Sits next to the button whose click it de-risks. */}
-      {lane === 'driver' && !alreadyConnected && (
+      {lane === 'driver' && clusterConnected && !alreadyConnected && (
         <p className="mt-2.5 text-[11px] leading-relaxed text-theme-text-tertiary">
           Nothing installs on click. Radar inspects{' '}
           {clusterName ? <span className="text-theme-text-secondary">{clusterName}</span> : 'the cluster'} and shows

package/src/components/ContextSwitcher.tsx

@@ -1,15 +1,11 @@
-import { useMemo, useState, forwardRef } from 'react'
-import { AlertTriangle } from 'lucide-react'
+import { useMemo, forwardRef } from 'react'
 import {
   ClusterSwitcher,
   type ClusterSwitcherItem,
-  pluralize,
 } from '@skyhook-io/k8s-ui'
-import { useContexts, useSwitchContext, useClusterInfo, fetchSessionCounts, type SessionCounts } from '../api/client'
-import { useContextSwitch } from '../context/ContextSwitchContext'
-import { useToast } from '../components/ui/Toast'
-import { useDock } from '../components/dock'
+import { useContexts, useClusterInfo, useCapabilities } from '../api/client'
 import type { ContextInfo } from '../types'
+import { useContextSwitchFlow } from './useContextSwitchFlow'
 import { parseContextForSwitcher, visibleContextQualifier, type ParsedContextName } from '../utils/context-name'
 
 interface ContextSwitcherProps {
@@ -28,22 +24,11 @@ interface ParsedContext extends ParsedContextName {
   nameQualifier?: string
 }
 
-function shouldSuppressSwitchErrorToast(error: unknown): boolean {
-  const message = error instanceof Error ? error.message : ''
-  return message.includes('cluster connection failed:')
-}
-
 export const ContextSwitcher = forwardRef<ContextSwitcherHandle, ContextSwitcherProps>(({ className = '', variant, label, triggerName }, ref) => {
-  const [showConfirm, setShowConfirm] = useState(false)
-  const [pendingSwitch, setPendingSwitch] = useState<ParsedContext | null>(null)
-  const [sessionCounts, setSessionCounts] = useState<SessionCounts | null>(null)
-
   const { data: contexts, isLoading: contextsLoading } = useContexts()
   const { data: clusterInfo } = useClusterInfo()
-  const switchContext = useSwitchContext()
-  const { startSwitch, endSwitch } = useContextSwitch()
-  const { showError } = useToast()
-  const { tabs } = useDock()
+  const { data: capabilities } = useCapabilities()
+  const switchFlow = useContextSwitchFlow()
 
   // Parse contexts and decide whether to render group headers (multi-account only).
   // hasMultipleSources gates the kubeconfig-source chip — only useful when 2+
@@ -101,69 +86,10 @@ export const ContextSwitcher = forwardRef<ContextSwitcherHandle, ContextSwitcher
     })
   }, [parsedById, hasMultipleAccounts, hasMultipleSources])
 
-  const performSwitch = async (parsed: ParsedContext) => {
-    startSwitch({
-      raw: parsed.raw,
-      provider: parsed.provider,
-      account: parsed.account,
-      region: parsed.region,
-      clusterName: parsed.clusterName,
-    })
-    try {
-      await switchContext.mutateAsync({ name: parsed.context.name })
-    } catch (error) {
-      console.error('Failed to switch context:', error)
-      endSwitch()
-      // Backend may not transition to StateDisconnected on client-side errors
-      // (network, timeout) — without this toast the user gets no feedback.
-      if (!shouldSuppressSwitchErrorToast(error)) {
-        const message = error instanceof Error ? error.message : 'Unknown error'
-        showError('Failed to switch context', message)
-      }
-    }
-  }
-
-  const handleSelect = async (item: ClusterSwitcherItem) => {
+  const handleSelect = (item: ClusterSwitcherItem) => {
     const parsed = parsedById.get(item.id)
-    if (!parsed || parsed.context.isCurrent || switchContext.isPending) return
-
-    // Active sessions (port forwards from API + terminal tabs from dock) get
-    // a confirmation prompt — switching contexts kills both.
-    try {
-      const counts = await fetchSessionCounts()
-      const terminalTabs = tabs.filter(t => t.type === 'terminal').length
-      const total = counts.portForwards + terminalTabs
-      if (total > 0) {
-        setSessionCounts({ ...counts, execSessions: terminalTabs, total })
-        setPendingSwitch(parsed)
-        setShowConfirm(true)
-        return
-      }
-    } catch (error) {
-      // Session-counts is best-effort; failing it shouldn't block the user.
-      // But warn — if there ARE active sessions we couldn't see, the switch
-      // will silently kill them.
-      console.error('Failed to check sessions:', error)
-      showError(
-        'Could not check active sessions',
-        'Switching anyway. Any open port-forwards or terminals will be terminated.',
-      )
-    }
-    performSwitch(parsed)
-  }
-
-  const handleConfirmSwitch = () => {
-    setShowConfirm(false)
-    if (pendingSwitch) {
-      performSwitch(pendingSwitch)
-      setPendingSwitch(null)
-    }
-  }
-
-  const handleCancelSwitch = () => {
-    setShowConfirm(false)
-    setPendingSwitch(null)
-    setSessionCounts(null)
+    if (!parsed) return
+    switchFlow.requestSwitch(parsed.context)
   }
 
   // In-cluster mode renders a static badge instead of a switcher (only one
@@ -205,63 +131,18 @@ export const ContextSwitcher = forwardRef<ContextSwitcherHandle, ContextSwitcher
         currentSourceLabel={currentSourceLabel}
         items={items}
         onSelect={handleSelect}
-        loading={switchContext.isPending}
-        disabled={contextsLoading}
+        loading={switchFlow.isPending}
+        disabled={contextsLoading || !capabilities || capabilities.configManagement === 'operator'}
         searchable={items.length > 1}
         showGroupHeaders={hasMultipleAccounts}
         errorSlot={
-          switchContext.isError ? (
-            <span className="text-xs text-red-400">{switchContext.error?.message}</span>
+          switchFlow.error ? (
+            <span className="text-xs text-red-400">{switchFlow.error.message}</span>
           ) : undefined
         }
       />
 
-      {showConfirm && sessionCounts && pendingSwitch && (
-        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50">
-          <div className="bg-theme-surface border border-theme-border rounded-lg shadow-xl max-w-md mx-4 overflow-hidden">
-            <div className="px-4 py-3 border-b border-theme-border flex items-center gap-2">
-              <AlertTriangle className="w-5 h-5 text-amber-400" />
-              <span className="font-medium text-theme-text-primary">Active Sessions</span>
-            </div>
-            <div className="px-4 py-4">
-              <p className="text-sm text-theme-text-secondary mb-3">
-                Switching contexts will terminate active sessions:
-              </p>
-              <ul className="text-sm text-theme-text-primary space-y-1 mb-4">
-                {sessionCounts.portForwards > 0 && (
-                  <li className="flex items-center gap-2">
-                    <span className="w-1.5 h-1.5 rounded-full bg-blue-400" />
-                    {pluralize(sessionCounts.portForwards, 'port forward')}
-                  </li>
-                )}
-                {sessionCounts.execSessions > 0 && (
-                  <li className="flex items-center gap-2">
-                    <span className="w-1.5 h-1.5 rounded-full bg-green-400" />
-                    {pluralize(sessionCounts.execSessions, 'terminal session')}
-                  </li>
-                )}
-              </ul>
-              <p className="text-xs text-theme-text-tertiary">
-                Switch to: <span className="text-theme-text-secondary">{pendingSwitch.clusterName}</span>
-              </p>
-            </div>
-            <div className="px-4 py-3 border-t border-theme-border flex justify-end gap-2">
-              <button
-                onClick={handleCancelSwitch}
-                className="px-3 py-1.5 text-sm rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleConfirmSwitch}
-                className="px-3 py-1.5 text-sm rounded-md bg-amber-500 hover:bg-amber-600 text-white transition-colors"
-              >
-                Switch Anyway
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
+      {switchFlow.confirmDialog}
     </>
   )
 })

package/src/components/applications/ApplicationsView.identity.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+
+import type { AppWorkload, Issue } from '@skyhook-io/k8s-ui'
+import { appIssuesForWorkloads } from './ApplicationsView'
+
+function workload(group: string): AppWorkload {
+  return { kind: 'Job', group, namespace: 'ml', name: 'train', health: 'healthy', ready: 1, desired: 1, restarts: 0 }
+}
+
+function issue(id: string, group?: string): Issue {
+  return {
+    id,
+    severity: 'warning',
+    source: 'condition',
+    category: 'job_failed',
+    category_group: 'runtime',
+    grouping_scope: 'workload',
+    kind: 'Job',
+    group,
+    namespace: 'ml',
+    name: 'train',
+    reason: id,
+    message: id,
+  }
+}
+
+describe('appIssuesForWorkloads identity', () => {
+  it('does not share an issue between same-named core and Volcano Jobs', () => {
+    const issues = [issue('core', 'batch'), issue('volcano', 'batch.volcano.sh')]
+
+    expect(appIssuesForWorkloads(issues, [workload('batch')]).map(item => item.id)).toEqual(['core'])
+    expect(appIssuesForWorkloads(issues, [workload('batch.volcano.sh')]).map(item => item.id)).toEqual(['volcano'])
+  })
+
+  it('treats an omitted built-in group as the canonical built-in identity', () => {
+    expect(appIssuesForWorkloads([issue('legacy')], [workload('batch')]).map(item => item.id)).toEqual(['legacy'])
+    expect(appIssuesForWorkloads([issue('legacy')], [workload('batch.volcano.sh')])).toEqual([])
+  })
+})

package/src/components/applications/ApplicationsView.tsx

@@ -23,6 +23,7 @@ import {
   memberRef,
   subjectRef,
   compareIssueSortAnchors,
+  canonicalResourceGroup,
   type AppRow,
   type AppWorkload,
   type AppIdentityInstance,
@@ -490,6 +491,7 @@ function AppDetailRoute({
           source.kind,
           source.namespace,
           source.name,
+          source.group,
         );
         if (path) navigate(path);
         return;
@@ -899,7 +901,7 @@ function compareAppOverviewIssues(a: Issue, b: Issue): number {
   return a.id.localeCompare(b.id);
 }
 
-function appIssuesForWorkloads(
+export function appIssuesForWorkloads(
   issues: Issue[],
   workloads: AppWorkload[],
 ): Issue[] {
@@ -918,11 +920,11 @@ function appIssuesForWorkloads(
 }
 
 function workloadIssueKey(workload: AppWorkload): string {
-  return `${workload.kind.toLowerCase()}|${workload.namespace}|${workload.name}`;
+  return `${canonicalResourceGroup(workload.kind, workload.group) ?? "?"}|${workload.kind.toLowerCase()}|${workload.namespace}|${workload.name}`;
 }
 
 function issueRefKey(ref: IssueResourceRef): string {
-  return `${ref.kind.toLowerCase()}|${ref.namespace ?? ""}|${ref.name}`;
+  return `${canonicalResourceGroup(ref.kind, ref.group) ?? "?"}|${ref.kind.toLowerCase()}|${ref.namespace ?? ""}|${ref.name}`;
 }
 
 function issueRefs(issue: Issue): IssueResourceRef[] {