@skyhook-io/radar-app 0.1.1

package/src/components/workload/WorkloadView.tsx

@@ -0,0 +1,532 @@
+import { useMemo, useEffect, useCallback, useState } from 'react'
+import { useQueries } from '@tanstack/react-query'
+import { useNavigate, useLocation, useSearchParams } from 'react-router-dom'
+import { clsx } from 'clsx'
+import { Terminal } from 'lucide-react'
+import {
+  WorkloadView as BaseWorkloadView,
+  type RendererOverrides,
+} from '@skyhook-io/k8s-ui'
+import type { SelectedResource, ResourceRef, ResolvedEnvFrom } from '../../types'
+import type { NavigateToResource } from '../../utils/navigation'
+import {
+  useChanges, useResourceWithRelationships, usePodLogs, useTopology, useUpdateResource,
+  useDeleteResource, useTriggerCronJob, useSuspendCronJob, useResumeCronJob,
+  useRestartWorkload, useWorkloadRevisions, useRollbackWorkload,
+  useFluxReconcile, useFluxSyncWithSource, useFluxSuspend, useFluxResume,
+  useArgoSync, useArgoRefresh, useArgoSuspend, useArgoResume,
+  useCordonNode, useUncordonNode, useDrainNode,
+  useCascadeDeletePreview,
+  fetchJSON,
+} from '../../api/client'
+import { PrometheusCharts, isPrometheusSupported } from '../resource/PrometheusCharts'
+import { useResourceAudit } from '../../api/client'
+import { AuditAlerts } from '@skyhook-io/k8s-ui'
+import { WorkloadLogsViewer } from '../logs/WorkloadLogsViewer'
+import { LogsViewer } from '../logs/LogsViewer'
+import { useCanUpdateSecrets, useCanNodeWrite, useNamespacedCapabilities } from '../../contexts/CapabilitiesContext'
+import { useOpenTerminal, useOpenLogs, useOpenWorkloadLogs, useOpenNodeTerminal } from '../dock'
+import { PortForwardButton } from '../portforward/PortForwardButton'
+import { useToast } from '../ui/Toast'
+import { PodRenderer } from '../resources/renderers/PodRenderer'
+import { NodeRenderer } from '../resources/renderers/NodeRenderer'
+import { ServiceRenderer } from '../resources/renderers/ServiceRenderer'
+import { WorkloadRenderer } from '../resources/renderers/WorkloadRenderer'
+import { CreateResourceDialog } from '../shared/CreateResourceDialog'
+import { cleanYamlForDuplicate } from '../../utils/skeleton-yaml'
+
+type TabType = 'overview' | 'timeline' | 'logs' | 'metrics' | 'yaml'
+
+// Stable reference — web renderer wrappers inject platform hooks internally
+const rendererOverrides: RendererOverrides = {
+  PodRenderer, NodeRenderer, ServiceRenderer, WorkloadRenderer,
+}
+
+// ============================================================================
+// ROUTE WRAPPER — parses kind/ns/name from URL
+// ============================================================================
+
+interface WorkloadViewRouteProps {
+  onNavigateToResource?: NavigateToResource
+}
+
+export function WorkloadViewRoute({ onNavigateToResource }: WorkloadViewRouteProps) {
+  const location = useLocation()
+  const navigate = useNavigate()
+
+  // Parse /workload/:kind/:ns/:name from pathname
+  const parts = location.pathname.replace(/^\//, '').split('/')
+  // parts[0] = 'workload', parts[1] = kind, parts[2] = ns, parts[3+] = name (may contain slashes)
+  const kind = parts[1] || ''
+  const namespace = parts[2] || ''
+  const name = parts.slice(3).join('/') || ''
+
+  if (!kind || !namespace || !name) {
+    return (
+      <div className="flex items-center justify-center h-full text-theme-text-tertiary">
+        Invalid workload URL
+      </div>
+    )
+  }
+
+  const handleBack = useCallback(() => {
+    if (window.history.length > 1) {
+      navigate(-1)
+    } else {
+      navigate('/')
+    }
+  }, [navigate])
+
+  const handleNavigate = useCallback((resource: SelectedResource) => {
+    // Navigate to another workload view
+    navigate(`/workload/${resource.kind}/${resource.namespace}/${resource.name}`)
+  }, [navigate])
+
+  return (
+    <WorkloadView
+      kind={kind}
+      namespace={namespace}
+      name={name}
+      onBack={handleBack}
+      onNavigateToResource={onNavigateToResource || handleNavigate}
+    />
+  )
+}
+
+// ============================================================================
+// WORKLOAD VIEW WRAPPER — injects data fetching hooks
+// ============================================================================
+
+interface WorkloadViewProps {
+  kind: string
+  namespace: string
+  name: string
+  onBack: () => void
+  onNavigateToResource?: NavigateToResource
+  onCollapseToDrawer?: () => void
+  expanded?: boolean
+  onClose?: () => void
+  onExpand?: () => void
+  initialTab?: 'detail' | 'yaml'
+  group?: string
+}
+
+function useActionsBarProps(kind: string, namespace: string, name: string) {
+  const { showCopied } = useToast()
+  const openTerminal = useOpenTerminal()
+  const openLogs = useOpenLogs()
+  const openWorkloadLogs = useOpenWorkloadLogs()
+  const openNodeTerminal = useOpenNodeTerminal()
+  const { canExec, canViewLogs, canPortForward } = useNamespacedCapabilities(namespace)
+
+  const deleteMutation = useDeleteResource()
+  const restartWorkloadMutation = useRestartWorkload()
+  const rollbackMutation = useRollbackWorkload()
+  const triggerCronJobMutation = useTriggerCronJob()
+  const suspendCronJobMutation = useSuspendCronJob()
+  const resumeCronJobMutation = useResumeCronJob()
+
+  const isRollbackKind = ['deployments', 'statefulsets', 'daemonsets'].includes(kind.toLowerCase())
+  const { data: revisionsList, isLoading: revisionsLoading, error: revisionsError } = useWorkloadRevisions(kind.toLowerCase(), namespace, name, isRollbackKind)
+
+  const fluxReconcileMutation = useFluxReconcile()
+  const fluxSyncWithSourceMutation = useFluxSyncWithSource()
+  const fluxSuspendMutation = useFluxSuspend()
+  const fluxResumeMutation = useFluxResume()
+
+  const argoSyncMutation = useArgoSync()
+  const argoRefreshMutation = useArgoRefresh()
+  const argoSuspendMutation = useArgoSuspend()
+  const argoResumeMutation = useArgoResume()
+
+  const { data: cascadePreview, isLoading: cascadeLoading } = useCascadeDeletePreview(kind, namespace, name, true)
+
+  const canNodeWrite = useCanNodeWrite()
+  const cordonMutation = useCordonNode()
+  const uncordonMutation = useUncordonNode()
+  const drainMutation = useDrainNode()
+
+  return {
+    canExec,
+    canViewLogs,
+    canPortForward,
+    onOpenTerminal: openTerminal,
+    onOpenLogs: openLogs,
+    onOpenWorkloadLogs: openWorkloadLogs,
+    onOpenNodeTerminal: openNodeTerminal,
+    onCopyCommand: (text: string, message: string, event: React.MouseEvent) => showCopied(text, message, event),
+    renderPortForward: ({ type, namespace: ns, name: n, className }: { type: 'pod' | 'service'; namespace: string; name: string; className?: string }) => (
+      <PortForwardButton type={type} namespace={ns} name={n} className={className} />
+    ),
+    onDelete: (params: any, callbacks?: any) => deleteMutation.mutate(params, { onSuccess: callbacks?.onSuccess }),
+    isDeleting: deleteMutation.isPending,
+    cascadeDependents: cascadePreview?.dependents,
+    cascadeLoading,
+    onRestart: (params: any) => restartWorkloadMutation.mutate(params),
+    isRestarting: restartWorkloadMutation.isPending,
+    revisions: revisionsList,
+    revisionsLoading,
+    revisionsError: revisionsError ?? null,
+    onRollback: (params: any, callbacks?: any) => rollbackMutation.mutate(params, { onSuccess: callbacks?.onSuccess }),
+    isRollingBack: rollbackMutation.isPending,
+    onTriggerCronJob: (params: any) => triggerCronJobMutation.mutate(params),
+    isTriggeringCronJob: triggerCronJobMutation.isPending,
+    onSuspendCronJob: (params: any) => suspendCronJobMutation.mutate(params),
+    isSuspendingCronJob: suspendCronJobMutation.isPending,
+    onResumeCronJob: (params: any) => resumeCronJobMutation.mutate(params),
+    isResumingCronJob: resumeCronJobMutation.isPending,
+    onFluxReconcile: (params: any) => fluxReconcileMutation.mutate(params),
+    isFluxReconciling: fluxReconcileMutation.isPending,
+    onFluxSyncWithSource: (params: any) => fluxSyncWithSourceMutation.mutate(params),
+    isFluxSyncing: fluxSyncWithSourceMutation.isPending,
+    onFluxSuspend: (params: any) => fluxSuspendMutation.mutate(params),
+    isFluxSuspending: fluxSuspendMutation.isPending,
+    onFluxResume: (params: any) => fluxResumeMutation.mutate(params),
+    isFluxResuming: fluxResumeMutation.isPending,
+    onArgoSync: (params: any) => argoSyncMutation.mutate(params),
+    isArgoSyncing: argoSyncMutation.isPending,
+    onArgoRefresh: (params: any) => argoRefreshMutation.mutate(params),
+    isArgoRefreshing: argoRefreshMutation.isPending,
+    onArgoSuspend: (params: any) => argoSuspendMutation.mutate(params),
+    isArgoSuspending: argoSuspendMutation.isPending,
+    onArgoResume: (params: any) => argoResumeMutation.mutate(params),
+    isArgoResuming: argoResumeMutation.isPending,
+    canNodeWrite,
+    onCordonNode: (params: any) => cordonMutation.mutate(params),
+    isCordoningNode: cordonMutation.isPending,
+    onUncordonNode: (params: any) => uncordonMutation.mutate(params),
+    isUncordoningNode: uncordonMutation.isPending,
+    onDrainNode: (params: any) => drainMutation.mutate(params),
+    isDrainingNode: drainMutation.isPending,
+  }
+}
+
+export function WorkloadView({
+  kind: kindProp,
+  namespace,
+  name,
+  expanded = true,
+  ...rest
+}: WorkloadViewProps) {
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  // Tab state from URL query param — migrate legacy tab names
+  const rawTab = searchParams.get('tab')
+  const migratedTab: TabType = rawTab === 'info' ? 'overview'
+    : rawTab === 'events' ? 'timeline'
+    : (rawTab as TabType) || 'overview'
+
+  const handleTabChange = useCallback((tab: TabType) => {
+    const params = new URLSearchParams(searchParams)
+    if (tab === 'overview') {
+      params.delete('tab')
+    } else {
+      params.set('tab', tab)
+    }
+    setSearchParams(params, { replace: true })
+  }, [searchParams, setSearchParams])
+
+  // Fetch resource with relationships
+  const { data: resourceResponse, isLoading: resourceLoading, refetch: refetchResource } = useResourceWithRelationships<any>(kindProp, namespace, name, rest.group)
+  const resource = resourceResponse?.resource
+  const relationships = resourceResponse?.relationships
+  const certificateInfo = resourceResponse?.certificateInfo
+
+  // For pods: extract envFrom ConfigMap/Secret names and resolve their keys
+  const isPod = kindProp.toLowerCase() === 'pods'
+  const { envFromConfigMapNames, envFromSecretNames } = useMemo(() => {
+    if (!isPod || !resource) return { envFromConfigMapNames: [] as string[], envFromSecretNames: [] as string[] }
+    const cmNames = new Set<string>()
+    const secretNames = new Set<string>()
+    const containers = [...(resource.spec?.containers || []), ...(resource.spec?.initContainers || [])]
+    for (const c of containers) {
+      for (const ef of (c.envFrom || [])) {
+        if (ef.configMapRef?.name) cmNames.add(ef.configMapRef.name)
+        if (ef.secretRef?.name) secretNames.add(ef.secretRef.name)
+      }
+    }
+    return { envFromConfigMapNames: Array.from(cmNames), envFromSecretNames: Array.from(secretNames) }
+  }, [isPod, resource])
+
+  const configMapQueries = useQueries({
+    queries: envFromConfigMapNames.map((cmName) => ({
+      queryKey: ['resources', 'configmaps', namespace, cmName],
+      queryFn: () => fetchJSON<any>(`/resources/configmaps/${namespace}/${cmName}`),
+      enabled: isPod,
+      staleTime: 30000,
+    })),
+  })
+
+  const secretQueries = useQueries({
+    queries: envFromSecretNames.map((secretName) => ({
+      queryKey: ['resources', 'secrets', namespace, secretName],
+      queryFn: () => fetchJSON<any>(`/resources/secrets/${namespace}/${secretName}`),
+      enabled: isPod,
+      staleTime: 30000,
+    })),
+  })
+
+  const resolvedEnvFrom = useMemo(() => {
+    if (!isPod || (envFromConfigMapNames.length === 0 && envFromSecretNames.length === 0)) return undefined
+    const result: ResolvedEnvFrom = {}
+    envFromConfigMapNames.forEach((n, i) => {
+      // Single-resource endpoint returns { resource, relationships } wrapper
+      const cm = configMapQueries[i]?.data?.resource ?? configMapQueries[i]?.data
+      if (cm) result[n] = { keys: Object.keys(cm.data || {}), values: cm.data || {}, isSecret: false }
+    })
+    envFromSecretNames.forEach((n, i) => {
+      const secret = secretQueries[i]?.data?.resource ?? secretQueries[i]?.data
+      if (secret) {
+        const decodedValues: Record<string, string> = {}
+        for (const [k, v] of Object.entries(secret.data || {})) {
+          try { decodedValues[k] = atob(v as string) } catch { decodedValues[k] = v as string }
+        }
+        result[n] = { keys: Object.keys(decodedValues), values: decodedValues, isSecret: true }
+      }
+    })
+    return Object.keys(result).length > 0 ? result : undefined
+  }, [isPod, envFromConfigMapNames, envFromSecretNames, configMapQueries, secretQueries])
+
+  // Fetch topology for hierarchy building (only when expanded)
+  const { data: topology } = useTopology([namespace], 'resources', { enabled: expanded })
+
+  // Fetch all events for this resource's namespace (only when expanded)
+  const { data: allEvents, isLoading: eventsLoading } = useChanges({
+    namespaces: [namespace],
+    timeRange: 'all',
+    includeK8sEvents: true,
+    includeManaged: true,
+    limit: 10000,
+    enabled: expanded,
+  })
+
+  // RBAC
+  const canUpdateSecrets = useCanUpdateSecrets()
+  const updateResource = useUpdateResource()
+  const actionsBarProps = useActionsBarProps(kindProp, namespace, name)
+
+  const handleUpdateResource = useCallback(async (params: { kind: string; namespace: string; name: string; yaml: string }) => {
+    await updateResource.mutateAsync(params)
+  }, [updateResource])
+
+  // Duplicate dialog
+  const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false)
+  const [duplicateYaml, setDuplicateYaml] = useState('')
+
+  const handleDuplicate = useCallback((params: { kind: string; namespace: string; name: string; yaml: string }) => {
+    setDuplicateYaml(cleanYamlForDuplicate(params.yaml))
+    setDuplicateDialogOpen(true)
+  }, [])
+
+  return (
+    <>
+    <BaseWorkloadView
+      kind={kindProp}
+      namespace={namespace}
+      name={name}
+      expanded={expanded}
+      {...rest}
+      // Data
+      resource={resource}
+      relationships={relationships}
+      certificateInfo={certificateInfo}
+      isLoading={resourceLoading}
+      refetch={refetchResource}
+      // Timeline
+      allEvents={allEvents}
+      eventsLoading={eventsLoading}
+      topology={topology}
+      // Capabilities
+      canUpdateSecrets={canUpdateSecrets}
+      // Mutations
+      onUpdateResource={handleUpdateResource}
+      isUpdatingResource={updateResource.isPending}
+      updateResourceError={updateResource.error?.message ?? null}
+      // Tab state (URL-synced)
+      activeTab={migratedTab}
+      onTabChange={handleTabChange}
+      // Render props
+      renderLogsTab={(props) => <LogsTabContent {...props} />}
+      renderMetricsTab={({ kind, namespace: ns, name: n }) => (
+        <PrometheusCharts kind={kind} namespace={ns} name={n} showEmptyState />
+      )}
+      isMetricsAvailable={(kind, res) =>
+        isPrometheusSupported(kind) && !(kind === 'Pod' && res?.status?.phase === 'Pending')
+      }
+      onDuplicate={handleDuplicate}
+      actionsBarProps={actionsBarProps}
+      rendererOverrides={rendererOverrides}
+      resolvedEnvFrom={resolvedEnvFrom}
+      renderOverviewExtra={({ kind: k, namespace: ns, name: n }) => (
+        <AuditSection kind={k} namespace={ns} name={n} />
+      )}
+    />
+    <CreateResourceDialog
+      open={duplicateDialogOpen}
+      onClose={() => setDuplicateDialogOpen(false)}
+      initialYaml={duplicateYaml}
+      title="Duplicate Resource"
+      onCreated={(result) => {
+        rest.onNavigateToResource?.({ kind: result.kind, namespace: result.namespace, name: result.name, group: '' })
+      }}
+    />
+    </>
+  )
+}
+
+// ============================================================================
+// LOGS TAB — platform-specific (uses data-fetching hooks)
+// ============================================================================
+
+const WORKLOAD_LOG_KINDS = new Set(['Deployment', 'StatefulSet', 'DaemonSet'])
+
+function LogsTabContent({
+  kind,
+  apiKind,
+  namespace,
+  name,
+  resource,
+  pods,
+  selectedPod,
+  onSelectPod,
+  initialContainer,
+  onConsumeInitialContainer,
+}: {
+  kind: string
+  apiKind: string
+  namespace: string
+  name: string
+  resource: any
+  pods: ResourceRef[]
+  selectedPod: string | null
+  onSelectPod: (name: string | null) => void
+  initialContainer: string | null
+  onConsumeInitialContainer: () => void
+}) {
+  // Workload kinds (Deployment, StatefulSet, DaemonSet) use the aggregated workload logs viewer
+  if (WORKLOAD_LOG_KINDS.has(kind)) {
+    return (
+      <div className="h-full">
+        <WorkloadLogsViewer kind={apiKind} namespace={namespace} name={name} />
+      </div>
+    )
+  }
+
+  // Individual Pod — use LogsViewer with container list from resource data
+  if (kind === 'Pod') {
+    return <PodLogsTab namespace={namespace} name={name} resource={resource} initialContainer={initialContainer} onConsumeInitialContainer={onConsumeInitialContainer} />
+  }
+
+  // Other kinds with associated pods (Jobs, CronJobs, ReplicaSets, etc.) — pod selector + LogsViewer
+  return (
+    <MultiPodLogsTab
+      pods={pods}
+      namespace={namespace}
+      selectedPod={selectedPod}
+      onSelectPod={onSelectPod}
+      initialContainer={initialContainer}
+    />
+  )
+}
+
+function PodLogsTab({ namespace, name, resource, initialContainer, onConsumeInitialContainer }: {
+  namespace: string
+  name: string
+  resource: any
+  initialContainer?: string | null
+  onConsumeInitialContainer?: () => void
+}) {
+  const containers = useMemo(() => {
+    const names: string[] = []
+    for (const c of resource?.spec?.initContainers || []) if (c.name) names.push(c.name)
+    for (const c of resource?.spec?.containers || []) if (c.name) names.push(c.name)
+    return names
+  }, [resource])
+
+  useEffect(() => {
+    if (initialContainer && containers.includes(initialContainer)) {
+      onConsumeInitialContainer?.()
+    }
+  }, [initialContainer, containers, onConsumeInitialContainer])
+
+  return (
+    <div className="h-full">
+      <LogsViewer
+        namespace={namespace}
+        podName={name}
+        containers={containers}
+        initialContainer={initialContainer || undefined}
+      />
+    </div>
+  )
+}
+
+function MultiPodLogsTab({ pods, namespace, selectedPod, onSelectPod, initialContainer }: {
+  pods: ResourceRef[]
+  namespace: string
+  selectedPod: string | null
+  onSelectPod: (name: string | null) => void
+  initialContainer?: string | null
+}) {
+  useEffect(() => {
+    if (pods.length > 0 && !selectedPod) {
+      onSelectPod(pods[0].name)
+    }
+  }, [pods, selectedPod, onSelectPod])
+
+  const podNamespace = pods.find(p => p.name === selectedPod)?.namespace || namespace
+
+  // Fetch container list for the selected pod
+  const { data: logsData } = usePodLogs(podNamespace, selectedPod || '', { tailLines: 1 })
+  const containers = logsData?.containers || []
+
+  if (pods.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-theme-text-tertiary">
+        <Terminal className="w-12 h-12 mb-4 opacity-50" />
+        <p>No pods available</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {pods.length > 1 && (
+        <div className="shrink-0 border-b border-theme-border bg-theme-surface/50 px-4 py-2 flex gap-2 overflow-x-auto">
+          {pods.map(pod => (
+            <button
+              key={pod.name}
+              onClick={() => onSelectPod(pod.name)}
+              className={clsx(
+                'px-3 py-1.5 text-sm rounded-lg whitespace-nowrap transition-colors',
+                selectedPod === pod.name
+                  ? 'bg-blue-500 text-theme-text-primary'
+                  : 'bg-theme-elevated text-theme-text-secondary hover:bg-theme-hover'
+              )}
+            >
+              {pod.name.length > 40 ? '...' + pod.name.slice(-37) : pod.name}
+            </button>
+          ))}
+        </div>
+      )}
+      {selectedPod && containers.length > 0 && (
+        <div className="flex-1 min-h-0">
+          <LogsViewer
+            key={selectedPod}
+            namespace={podNamespace}
+            podName={selectedPod}
+            containers={containers}
+            initialContainer={initialContainer || undefined}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function AuditSection({ kind, namespace, name }: { kind: string; namespace: string; name: string }) {
+  const navigate = useNavigate()
+  const { data: findings } = useResourceAudit(kind, namespace, name)
+  if (!findings || findings.length === 0) return null
+  return <AuditAlerts findings={findings} onViewAll={() => navigate('/audit')} />
+}

package/src/context/ConnectionContext.tsx

@@ -0,0 +1,173 @@
+import { createContext, useContext, useState, useCallback, useEffect, useRef, ReactNode } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import type { ContextInfo } from '../types'
+import { getApiBase, getAuthHeaders, getCredentialsMode } from '../api/config'
+
+export type ConnectionStateType = 'connected' | 'disconnected' | 'connecting'
+
+export interface ConnectionState {
+  state: ConnectionStateType
+  context: string
+  clusterName?: string
+  error?: string
+  errorType?: string // auth, network, timeout, unknown
+  progressMessage?: string
+}
+
+interface ConnectionStatusResponse extends ConnectionState {
+  contexts: ContextInfo[]
+}
+
+interface ConnectionContextValue {
+  connection: ConnectionState
+  contexts: ContextInfo[]
+  retry: () => void
+  isRetrying: boolean
+  updateFromSSE: (status: ConnectionState) => void
+}
+
+const ConnectionContext = createContext<ConnectionContextValue | null>(null)
+
+async function fetchConnectionStatus(): Promise<ConnectionStatusResponse> {
+  const response = await fetch(`${getApiBase()}/connection`, {
+    credentials: getCredentialsMode(),
+    headers: getAuthHeaders(),
+  })
+  if (!response.ok) {
+    throw new Error('Failed to fetch connection status')
+  }
+  return response.json()
+}
+
+async function retryConnection(): Promise<ConnectionState> {
+  const response = await fetch(`${getApiBase()}/connection/retry`, {
+    method: 'POST',
+    credentials: getCredentialsMode(),
+    headers: getAuthHeaders(),
+  })
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: 'Unknown error' }))
+    throw new Error(error.error || `HTTP ${response.status}`)
+  }
+  return response.json()
+}
+
+export function ConnectionProvider({ children }: { children: ReactNode }) {
+  const queryClient = useQueryClient()
+  const [connection, setConnection] = useState<ConnectionState>({
+    state: 'connecting',
+    context: '',
+  })
+  const [contexts, setContexts] = useState<ContextInfo[]>([])
+  // Track if SSE has started delivering connection_state events
+  // Once SSE is active, it becomes the authoritative source for connection state
+  const sseActiveRef = useRef(false)
+
+  // Fetch initial connection status
+  // Poll while connecting to get progress updates (SSE not established yet)
+  const { data } = useQuery<ConnectionStatusResponse>({
+    queryKey: ['connection-status'],
+    queryFn: fetchConnectionStatus,
+    staleTime: 500, // Allow frequent refetches while connecting
+    refetchInterval: connection.state === 'connecting' ? 500 : false, // Poll every 500ms while connecting
+    refetchOnWindowFocus: false,
+  })
+
+  // Update state from query result
+  // Once SSE is active, only update contexts from poll (SSE handles connection state)
+  useEffect(() => {
+    if (data) {
+      // Always update contexts from poll data
+      setContexts(data.contexts || [])
+      // Only update connection state from poll if SSE hasn't taken over
+      if (!sseActiveRef.current) {
+        setConnection({
+          state: data.state,
+          context: data.context,
+          clusterName: data.clusterName,
+          error: data.error,
+          errorType: data.errorType,
+          progressMessage: data.progressMessage,
+        })
+      }
+    }
+  }, [data])
+
+  // Retry mutation
+  const retryMutation = useMutation({
+    mutationFn: retryConnection,
+    onMutate: () => {
+      // Reset SSE active flag - polling can provide state until SSE reconnects
+      sseActiveRef.current = false
+      // Set connecting state while retrying
+      setConnection(prev => ({
+        ...prev,
+        state: 'connecting',
+        error: undefined,
+        errorType: undefined,
+        progressMessage: 'Connecting to cluster...',
+      }))
+    },
+    onSuccess: (result) => {
+      setConnection(result)
+      // Clear all query cache to get fresh data from new connection
+      queryClient.removeQueries()
+      queryClient.invalidateQueries()
+    },
+    onError: (error: Error) => {
+      setConnection(prev => ({
+        ...prev,
+        state: 'disconnected',
+        error: error.message,
+        progressMessage: undefined,
+      }))
+    },
+  })
+
+  const retry = useCallback(() => {
+    retryMutation.mutate()
+  }, [retryMutation])
+
+  // Handler for SSE connection_state events
+  const updateFromSSE = useCallback((status: ConnectionState) => {
+    // Mark SSE as active - it's now the authoritative source for connection state
+    sseActiveRef.current = true
+    setConnection(prev => {
+      // Don't transition back to 'connecting' from 'connected'. This happens when the
+      // pod restarts and the SSE reconnects while the new pod's K8s cache is still
+      // syncing. Hiding the main content here causes a flash — keep the 'connected'
+      // state and wait for either 'connected' (sync done) or 'disconnected' (failure).
+      if (prev.state === 'connected' && status.state === 'connecting') {
+        return prev
+      }
+      return status
+    })
+
+    // If we just connected, invalidate queries to fetch fresh data
+    if (status.state === 'connected') {
+      queryClient.invalidateQueries()
+    }
+  }, [queryClient])
+
+  const value: ConnectionContextValue = {
+    connection,
+    contexts,
+    retry,
+    isRetrying: retryMutation.isPending,
+    updateFromSSE,
+  }
+
+  return (
+    <ConnectionContext.Provider value={value}>
+      {children}
+    </ConnectionContext.Provider>
+  )
+}
+
+export function useConnection() {
+  const context = useContext(ConnectionContext)
+  if (!context) {
+    throw new Error('useConnection must be used within ConnectionProvider')
+  }
+  return context
+}