@skyhook-io/k8s-ui 1.16.3 → 1.17.0

package/src/components/workload/WorkloadView.deleted.test.tsx

@@ -0,0 +1,58 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+
+import { WorkloadView } from './WorkloadView'
+
+const pod = {
+  apiVersion: 'v1',
+  kind: 'Pod',
+  metadata: { name: 'web-1', namespace: 'shop' },
+  spec: { containers: [{ name: 'app', image: 'nginx' }] },
+  status: { phase: 'Running', containerStatuses: [{ name: 'app', ready: true, state: { running: {} } }] },
+}
+
+function render(resourceError: unknown) {
+  return renderToStaticMarkup(
+    <WorkloadView
+      kind="pods"
+      namespace="shop"
+      name="web-1"
+      onBack={vi.fn()}
+      resource={pod}
+      resourceError={resourceError}
+      relationships={{ deployment: { kind: 'Deployment', namespace: 'shop', name: 'web' } }}
+      onNavigateToResource={vi.fn()}
+      actionsBarProps={{ canExec: true, canViewLogs: true, onOpenTerminal: vi.fn(), onOpenLogs: vi.fn(), onDelete: vi.fn(), renderDiagnose: () => 'Diagnose' }}
+      hasOperationalIssues
+      renderOverviewLead={() => 'Host issues panel'}
+      renderOverviewExtra={() => 'Host reachability panel'}
+      renderDiagnoseTab={() => 'Host reachability tab'}
+      reachableVia={[{ kind: 'Service', namespace: 'shop', name: 'web' }]}
+    />,
+  )
+}
+
+describe('WorkloadView for an object deleted while open', () => {
+  it('says it is gone, names its owner, and offers nothing that acts on it', () => {
+    const html = render(Object.assign(new Error('pods "web-1" not found'), { status: 404 }))
+    expect(html).toContain('This Pod no longer exists in the cluster')
+    expect(html).toContain('Go to its Deployment web')
+    expect(html).toContain('>Deleted<')
+    expect(html).not.toContain('Terminal')
+    expect(html).not.toContain('Diagnose')
+    expect(html).not.toContain('Host issues panel')
+    expect(html).not.toContain('Host reachability panel')
+    expect(html).not.toContain('Reachability')
+  })
+
+  it('shows the live view when the fetch failed for another reason', () => {
+    const html = render(Object.assign(new Error('boom'), { status: 500 }))
+    expect(html).not.toContain('no longer exists')
+    expect(html).not.toContain('>Deleted<')
+    expect(html).toContain('Terminal')
+    expect(html).toContain('Diagnose')
+    expect(html).toContain('Host issues panel')
+    expect(html).toContain('Host reachability panel')
+    expect(html).toContain('Reachability')
+  })
+})

package/src/components/workload/WorkloadView.deletedDialog.test.tsx

@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, it, vi } from 'vitest'
+
+import { WorkloadView } from './WorkloadView'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+const deployment = {
+  apiVersion: 'apps/v1',
+  kind: 'Deployment',
+  metadata: { name: 'web', namespace: 'shop' },
+  spec: { replicas: 1, template: { spec: { containers: [{ name: 'app', image: 'nginx' }] } } },
+  status: { replicas: 1, readyReplicas: 1, availableReplicas: 1 },
+}
+
+it('closes an open Delete dialog when the object is deleted elsewhere', async () => {
+  const element = document.createElement('div')
+  document.body.append(element)
+  const root = createRoot(element)
+  const render = (resourceError: unknown) =>
+    root.render(
+      <WorkloadView
+        kind="deployments"
+        namespace="shop"
+        name="web"
+        onBack={vi.fn()}
+        resource={deployment}
+        resourceError={resourceError}
+        actionsBarProps={{ onDelete: vi.fn() }}
+      />,
+    )
+  const dialogOpen = () => document.body.textContent?.includes('Are you sure you want to delete') ?? false
+
+  await act(async () => render(null))
+  await act(async () => { element.querySelector<HTMLButtonElement>('button:has(svg.lucide-trash-2)')!.click() })
+  expect(dialogOpen()).toBe(true)
+
+  await act(async () => render(Object.assign(new Error('deployments.apps "web" not found'), { status: 404 })))
+  expect(dialogOpen()).toBe(false)
+
+  await act(async () => root.unmount())
+  element.remove()
+})

package/src/components/workload/WorkloadView.secretSave.test.tsx

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, it, vi } from 'vitest'
+
+import { WorkloadView } from './WorkloadView'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+const secret = {
+  apiVersion: 'v1',
+  kind: 'Secret',
+  metadata: { name: 'db', namespace: 'shop', resourceVersion: '7' },
+  type: 'Opaque',
+  data: { password: btoa('old') },
+}
+
+function button(label: string): HTMLButtonElement | undefined {
+  return [...document.querySelectorAll('button')].find(b => b.textContent?.trim() === label || b.title === label)
+}
+
+it('saves a Secret value against the version on screen, and offers no edit once the Secret is gone', async () => {
+  const element = document.createElement('div')
+  document.body.append(element)
+  const root = createRoot(element)
+  const onUpdateResource = vi.fn().mockResolvedValue(undefined)
+  const render = (resourceError: unknown) =>
+    root.render(
+      <WorkloadView
+        kind="secrets"
+        namespace="shop"
+        name="db"
+        onBack={vi.fn()}
+        resource={secret}
+        resourceError={resourceError}
+        canUpdateSecrets
+        onUpdateResource={onUpdateResource}
+      />,
+    )
+
+  await act(async () => render(null))
+  await act(async () => button('Reveal')!.click())
+  await act(async () => button('Edit value')!.click())
+  await act(async () => button('Save')!.click())
+  await act(async () => button('Update')!.click())
+  expect(onUpdateResource).toHaveBeenCalledWith(expect.objectContaining({
+    kind: 'secrets',
+    namespace: 'shop',
+    name: 'db',
+    reviewedResourceVersion: '7',
+  }))
+
+  await act(async () => button('Edit value')!.click())
+  expect(element.querySelector('textarea')).not.toBeNull()
+  await act(async () => render(Object.assign(new Error('secrets "db" not found'), { status: 404 })))
+  expect(element.textContent).toContain('This Secret no longer exists in the cluster')
+  expect(element.querySelector('textarea')).toBeNull()
+  expect(button('Edit value')).toBeUndefined()
+
+  await act(async () => root.unmount())
+  element.remove()
+})

package/src/components/workload/WorkloadView.tsx

@@ -1,3 +1,4 @@
+import { dedupeResourceRefs } from '../../utils/resource-refs'
 import { PodRow, PodListFrame, PodListToggle, workloadPodDetail } from './PodList'
 export { workloadPodDetail, podStatusLabel, podStatusClass, podDotClass } from './PodList'
 import { useState, useMemo, useEffect, useRef, useCallback, type ComponentType, type ReactNode } from 'react'
@@ -37,6 +38,7 @@ import {
 } from 'lucide-react'
 import type { TimelineEvent, ResourceRef, Relationships, SelectedResource, ResolvedEnvFrom, Topology, TopologyNode, HPADiagnosis, WorkloadPodInfo } from '../../types'
 import type { GitOpsStatus } from '../../types/gitops'
+import { isFetchError } from '../../types/fetch-error'
 import type { NavigateToResource } from '../../utils/navigation'
 import { refToSelectedResource, pluralToKind, knownKindForPluralWithGroup, kindToPlural, kindToPluralWithGroup, apiVersionToGroup } from '../../utils/navigation'
 import { neighborhoodFor, seedNodeIds, topologyNodeResourceKind } from '../../utils/topology-neighborhood'
@@ -76,6 +78,7 @@ import { ServicePortCards, type ServicePortRenderProps } from '../resources/rend
 import { rolloutMayAdvanceAutomatically, type WorkloadRolloutActivity } from '../../utils/workload-rollout'
 import { WorkloadRolloutNotice } from './WorkloadRolloutNotice'
 import { isCoreBatchJob } from '../../utils/api-resources'
+import { formatRelativeAgeTime } from '../../utils/format'
 
 export type WorkloadTabType = 'overview' | 'spec' | 'topology' | 'timeline' | 'logs' | 'metrics' | 'reachability' | 'cost' | 'yaml'
 type TabType = WorkloadTabType
@@ -281,6 +284,8 @@ interface WorkloadViewProps {
    * resource rather than from owner labels on a managed object.
    */
   onNavigateGitOpsPath?: (path: string) => void
+  /** Opens the live traffic view focused on this workload. */
+  onOpenLiveTraffic?: () => void
 
   // ── Render props for platform-specific content ───────────────────────────
   /** Render the logs tab content */
@@ -494,6 +499,7 @@ export function WorkloadView({
   helmOwnerSource,
   onOpenHelmRelease,
   onNavigateGitOpsPath,
+  onOpenLiveTraffic,
 }: WorkloadViewProps) {
   // The live object preserves exact CRD capitalization (RayJob, TFJob); the URL
   // plural remains the API resource name used by fetches and mutations.
@@ -688,6 +694,11 @@ export function WorkloadView({
     setTimeout(() => setCopied(null), 2000)
   }, [])
 
+  // The edit is applied on top of the copy on screen, so the server is asked to
+  // reject it if the Secret was deleted or changed since that copy loaded.
+  // Otherwise the save would recreate a deleted Secret, or put back the old
+  // value of a key someone else changed.
+  const resourceVersion: string | undefined = resource?.metadata?.resourceVersion
   const handleSaveSecretValue = useCallback(async (yaml: string) => {
     if (!onUpdateResource) return
     try {
@@ -697,12 +708,14 @@ export function WorkloadView({
         name,
         yaml,
         force: true,
+        reviewedResourceVersion: resourceVersion,
       })
       setTimeout(() => refetch(), 1000)
-    } catch {
-      // Error handled by mutation (toast)
+    } catch (error) {
+      refetch()
+      throw error
     }
-  }, [onUpdateResource, apiKind, namespace, name, refetch])
+  }, [onUpdateResource, apiKind, namespace, name, resourceVersion, refetch])
 
   const handleSaved = useCallback(() => {
     setSaveSuccess(true)
@@ -765,7 +778,32 @@ export function WorkloadView({
     ? getWorkloadDisplayStatus(resource, apiKind, workloadPods)
     : null
   const rolloutActivity = rolloutDisplay?.activity ?? null
-  const status = rolloutDisplay?.status ?? getResourceStatus(apiKind, resource)
+  // A 404 with a cached copy: the object was deleted while this view was
+  // open. Everything below that copy describes the past.
+  const resourceGone = Boolean(resource) && isFetchError(resourceError) && resourceError.status === 404
+  const status = resourceGone
+    ? { text: 'Deleted', color: 'status-unknown' }
+    : rolloutDisplay?.status ?? getResourceStatus(apiKind, resource)
+  // The host's actions, and the host's renderers with their per-container
+  // terminal, logs, scale and env controls, would act on an object that no
+  // longer exists. The plain renderers show the last copy without them.
+  const actionsBarPropsForState = resourceGone ? undefined : effectiveActionsBarProps
+  const rendererOverridesForState = resourceGone ? undefined : rendererOverrides
+  // The host's overview panels and Reachability tab diagnose the live object,
+  // and the reachability panel polls for it every few seconds.
+  const renderOverviewLeadForState = resourceGone ? undefined : renderOverviewLead
+  const renderOverviewExtraForState = resourceGone ? undefined : renderOverviewExtra
+  const renderDiagnoseTabForState = resourceGone ? undefined : renderDiagnoseTab
+  // A remount closes any dialog the bar had open: once its actions are gone,
+  // a confirm button left on screen would do nothing.
+  const actionsBarKey = resourceGone ? 'gone' : 'live'
+  const deletedNotice = resourceGone ? (
+    <DeletedResourceNotice
+      kindLabel={displayKindName(apiKind, resource?.kind)}
+      owner={relationships?.deployment ?? relationships?.owner}
+      onNavigateToResource={onNavigateToResource}
+    />
+  ) : null
   const rolloutMayAutoAdvance = rolloutActivity ? rolloutMayAdvanceAutomatically(rolloutActivity) : false
   useEffect(() => {
     if (!recentImageSave) return
@@ -778,7 +816,9 @@ export function WorkloadView({
     const timeout = window.setTimeout(() => setRecentImageSave(false), 15000)
     return () => window.clearTimeout(timeout)
   }, [recentImageSave, rolloutActivity?.phase])
-  useProgressiveRefresh(rolloutMayAutoAdvance || recentImageSave, refetchProp)
+  // The rollout state above is the last copy fetched before a 404; a workload
+  // the server says is gone has nothing left to roll out.
+  useProgressiveRefresh((rolloutMayAutoAdvance || recentImageSave) && !resourceGone, refetchProp)
   const showOwnershipHeading = kind === 'Pod' && Boolean(ownershipContext)
   const headerImage = metadata.find(m => m.label === 'Image')?.value
 
@@ -790,7 +830,7 @@ export function WorkloadView({
   const renderDiagnose = actionsBarProps?.renderDiagnose as
     | ((ctx: { kind: string; group?: string; namespace: string; name: string; health?: DiagnoseHealthHint }) => ReactNode)
     | undefined
-  const diagnoseAction = renderDiagnose?.({
+  const diagnoseAction = resourceGone ? null : renderDiagnose?.({
     kind: resource?.kind ?? knownKindForPluralWithGroup(apiKind, group ?? '') ?? apiKind,
     group,
     namespace,
@@ -827,7 +867,7 @@ export function WorkloadView({
       id: 'reachability',
       label: 'Reachability',
       icon: <Stethoscope className="w-4 h-4" />,
-      hidden: !(renderDiagnoseTab && (isDiagnoseKind(apiKind, group) || (reachableVia?.length ?? 0) > 0)),
+      hidden: !(renderDiagnoseTabForState && (isDiagnoseKind(apiKind, group) || (reachableVia?.length ?? 0) > 0)),
     },
     { id: 'cost', label: 'Cost', icon: <Coins className="w-4 h-4" />, hidden: !costTabVisible },
     { id: 'yaml', label: 'YAML', icon: <FileText className="w-4 h-4" /> },
@@ -929,19 +969,20 @@ export function WorkloadView({
               </Tooltip>
             </div>
             <p className="text-sm text-theme-text-tertiary">{namespace}</p>
-            {(gitopsOwner || helmOwner || (gitOpsResourcePath && onNavigateGitOpsPath)) && (
+            {(gitopsOwner || helmOwner || (gitOpsResourcePath && onNavigateGitOpsPath) || onOpenLiveTraffic) && (
               <div className="mt-1 flex flex-wrap items-center gap-1.5">
                 {gitopsOwner && <ManagedByChip owner={gitopsOwner} status={gitOpsOwnerStatus} verified={gitOpsOwnerVerified} pending={gitOpsOwnerPending} source={gitOpsOwnerSource} onOpen={onOpenGitOpsResource} />}
                 {helmOwner && <HelmManagedByChip owner={helmOwner} source={helmOwnerSource} onOpen={onOpenHelmRelease} />}
                 {gitOpsResourcePath && onNavigateGitOpsPath && (
                   <OpenInGitOpsChip onClick={() => onNavigateGitOpsPath(gitOpsResourcePath)} />
                 )}
+                {onOpenLiveTraffic && <LiveTrafficChip onClick={onOpenLiveTraffic} />}
               </div>
             )}
           </div>
 
           {/* Actions bar */}
-          <ResourceActionsBar resource={selectedResource} data={resource} onClose={onClose} showYaml={showYaml} onToggleYaml={() => switchView(!showYaml)} {...effectiveActionsBarProps} />
+          <ResourceActionsBar key={actionsBarKey} resource={selectedResource} data={resource} onClose={onClose} showYaml={showYaml} onToggleYaml={() => switchView(!showYaml)} {...actionsBarPropsForState} />
         </div>
 
         {/* Success animation overlay */}
@@ -956,6 +997,7 @@ export function WorkloadView({
             damage to this scroll body; ui/Collapse.tsx keeps them from escaping in the first
             place. */}
         <div className="relative flex-1 overflow-y-auto" style={{ viewTransitionName: 'drawer-content' }}>
+          {deletedNotice && <div className="px-4 pt-4">{deletedNotice}</div>}
           {!resource ? (
             // Fill the drawer body so the loading logo centers in it, not in a
             // 128px box pinned to the top (matches the splash/PaneLoader centering).
@@ -1007,9 +1049,9 @@ export function WorkloadView({
                 drawerSummary
               ) : (
               <>
-              {renderOverviewLead && hasOperationalIssues && (
+              {renderOverviewLeadForState && hasOperationalIssues && (
                 <div className="px-4 pt-4">
-                  {renderOverviewLead({ kind, namespace, name })}
+                  {renderOverviewLeadForState({ kind, namespace, name })}
                 </div>
               )}
               <ResourceRendererDispatch
@@ -1023,9 +1065,9 @@ export function WorkloadView({
                 onCopy={copyToClipboard}
                 copied={copied}
                 onNavigate={onNavigateToResource ? (ref) => onNavigateToResource(refToSelectedResource(ref)) : undefined}
-                onSaveSecretValue={canUpdateSecrets ? handleSaveSecretValue : undefined}
+                onSaveSecretValue={canUpdateSecrets && !resourceGone ? handleSaveSecretValue : undefined}
                 isSavingSecret={isUpdatingResource}
-                rendererOverrides={rendererOverrides}
+                rendererOverrides={rendererOverridesForState}
                 resolvedEnvFrom={resolvedEnvFrom}
                 renderMetrics={renderMetricsTab}
                 events={resourceFocusedK8sEvents}
@@ -1033,7 +1075,7 @@ export function WorkloadView({
                 updates={resourceFocusedUpdates}
                 eventsError={resourceFocusedK8sError}
                 updatesError={resourceFocusedUpdatesError}
-                mainFooter={renderOverviewExtra && renderOverviewExtra({ kind, namespace, name, group, context: 'drawer' })}
+                mainFooter={renderOverviewExtraForState && renderOverviewExtraForState({ kind, namespace, name, group, context: 'drawer' })}
               />
               </>
               )}
@@ -1115,6 +1157,7 @@ export function WorkloadView({
             {gitOpsResourcePath && onNavigateGitOpsPath && (
               <OpenInGitOpsChip onClick={() => onNavigateGitOpsPath(gitOpsResourcePath)} />
             )}
+            {onOpenLiveTraffic && <LiveTrafficChip onClick={onOpenLiveTraffic} />}
             {relationships?.owner && !showOwnershipHeading && (
               <span>Owner: <button onClick={() => onNavigateToResource?.(refToSelectedResource(relationships.owner!))} className="text-blue-500 hover:underline">{relationships.owner.name}</button></span>
             )}
@@ -1157,12 +1200,13 @@ export function WorkloadView({
       activeTab={effectiveTab}
       onTabChange={handleSetTab}
       scopeControls={scopeControls}
-      tabStripEnd={<ResourceActionsBar resource={selectedResource} data={resource} hideLogs {...effectiveActionsBarProps} />}
+      tabStripEnd={<ResourceActionsBar key={actionsBarKey} resource={selectedResource} data={resource} hideLogs {...actionsBarPropsForState} />}
       overlay={saveSuccess ? <SaveSuccessAnimation /> : null}
       compactHeader={compactHeader}
     >
       <div className="flex h-full min-h-0 flex-col">
-        {effectiveTab !== 'overview' && rolloutActivity && (rolloutActivity.phase !== 'idle' || recentImageSave) && (
+        {deletedNotice && <div className="shrink-0 px-4 pt-4">{deletedNotice}</div>}
+        {!resourceGone && effectiveTab !== 'overview' && rolloutActivity && (rolloutActivity.phase !== 'idle' || recentImageSave) && (
           <div className="shrink-0 px-4 pt-4">
             <WorkloadRolloutNotice activity={rolloutActivity} recentImageSave={recentImageSave} />
           </div>
@@ -1173,9 +1217,9 @@ export function WorkloadView({
           <div className="h-full min-h-0 overflow-y-auto">{expandedSummary}</div>
         ) : effectiveTab === 'overview' && expandedOverview ? (
           <div className="h-full min-h-0">
-            {hasOperationalIssues && renderOverviewLead && (
+            {hasOperationalIssues && renderOverviewLeadForState && (
               <div className="px-4 pt-4">
-                {renderOverviewLead({ kind, namespace, name })}
+                {renderOverviewLeadForState({ kind, namespace, name })}
               </div>
             )}
             {expandedOverview}
@@ -1199,22 +1243,22 @@ export function WorkloadView({
               onNavigate={onNavigateToResource}
               onCopy={copyToClipboard}
               copied={copied}
-              onSaveSecretValue={canUpdateSecrets ? handleSaveSecretValue : undefined}
+              onSaveSecretValue={canUpdateSecrets && !resourceGone ? handleSaveSecretValue : undefined}
               isSavingSecret={isUpdatingResource}
               onOpenLogs={handleOpenLogs}
               onSwitchToTimeline={() => handleSetTab('timeline')}
               onSwitchToLogs={logsTabVisible ? () => handleSetTab('logs') : undefined}
               onSwitchToTopology={!topologyTabHidden ? () => handleSetTab('topology') : undefined}
-              rendererOverrides={rendererOverrides}
+              rendererOverrides={rendererOverridesForState}
               resolvedEnvFrom={resolvedEnvFrom}
               events={overviewEvents}
               eventsLoading={overviewEventsLoading}
               updates={resourceFocusedUpdates}
               eventsError={overviewEventsError}
               updatesError={resourceFocusedUpdatesError}
-              extraContent={renderOverviewExtra && renderOverviewExtra({ kind, namespace, name, group, context: 'expanded' })}
+              extraContent={renderOverviewExtraForState && renderOverviewExtraForState({ kind, namespace, name, group, context: 'expanded' })}
               introContent={overviewIntro}
-              leadContent={hasOperationalIssues && renderOverviewLead ? renderOverviewLead({ kind, namespace, name }) : undefined}
+              leadContent={hasOperationalIssues && renderOverviewLeadForState ? renderOverviewLeadForState({ kind, namespace, name }) : undefined}
               onEvaluateCapacity={onEvaluateCapacity}
               recentImageSave={recentImageSave}
             />
@@ -1273,9 +1317,9 @@ export function WorkloadView({
             {renderMetricsTab({ kind: resource?.kind || kind, namespace, name })}
           </div>
         )}
-        {effectiveTab === 'reachability' && renderDiagnoseTab && (
+        {effectiveTab === 'reachability' && renderDiagnoseTabForState && (
           <div className="flex h-full min-h-0 flex-col p-3">
-            {renderDiagnoseTab({ kind: resource?.kind || kind, namespace, name })}
+            {renderDiagnoseTabForState({ kind: resource?.kind || kind, namespace, name })}
           </div>
         )}
         {effectiveTab === 'cost' && renderCostTab && (
@@ -1406,6 +1450,34 @@ function extractMetadata(kind: string, resource: any): { label: string; value: s
 // SUB-COMPONENTS
 // ============================================================================
 
+function DeletedResourceNotice({
+  kindLabel,
+  owner,
+  onNavigateToResource,
+}: {
+  kindLabel: string
+  owner?: ResourceRef
+  onNavigateToResource?: NavigateToResource
+}) {
+  return (
+    <AlertBanner
+      variant="warning"
+      title={`This ${kindLabel} no longer exists in the cluster`}
+      message="You're looking at the last version Radar loaded before it was deleted."
+    >
+      {owner && onNavigateToResource && (
+        <button
+          type="button"
+          onClick={() => onNavigateToResource(refToSelectedResource(owner))}
+          className="mt-2 text-xs text-accent-text hover:underline"
+        >
+          Go to its {displayKindName(owner.kind, owner.kind)} {owner.name}
+        </button>
+      )}
+    </AlertBanner>
+  )
+}
+
 function OpenInGitOpsChip({ onClick }: { onClick: () => void }) {
   return (
     <Tooltip content="Open this resource in the GitOps tab (tree + insights + ops)" delay={150}>
@@ -1421,6 +1493,21 @@ function OpenInGitOpsChip({ onClick }: { onClick: () => void }) {
   )
 }
 
+function LiveTrafficChip({ onClick }: { onClick: () => void }) {
+  return (
+    <Tooltip content="What this workload talks to, from the cluster's traffic source" delay={150}>
+      <button
+        type="button"
+        onClick={onClick}
+        className="inline-flex items-center gap-1 rounded border border-theme-border bg-theme-elevated px-1.5 py-0.5 text-[11px] font-medium text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-hover transition-colors"
+      >
+        Live traffic
+        <ArrowRight className="h-3 w-3 shrink-0" />
+      </button>
+    </Tooltip>
+  )
+}
+
 function OwnershipHeading({
   podName,
   context,
@@ -2439,8 +2526,8 @@ function buildSummaryMetrics(
       },
       {
         label: 'Latest run',
-        value: status.lastScheduleTime ? formatAge(status.lastScheduleTime) : 'Never',
-        detail: status.lastSuccessfulTime ? `last success ${formatAge(status.lastSuccessfulTime)}` : 'no successful run recorded',
+        value: status.lastScheduleTime ? formatRelativeAgeTime(status.lastScheduleTime) : 'Never',
+        detail: status.lastSuccessfulTime ? `last success ${formatRelativeAgeTime(status.lastSuccessfulTime)}` : 'no successful run recorded',
         icon: Activity,
       },
       {
@@ -2556,8 +2643,8 @@ function getReadinessSummary(resource: any, apiKind: string): ReadinessSummary {
         { label: 'Schedule', value: spec.schedule || '-' },
         { label: 'Active jobs', value: active, tone: active > 0 ? 'warn' : 'default' },
         { label: 'Suspend', value: suspended ? 'Yes' : 'No', tone: suspended ? 'warn' : 'default' },
-        { label: 'Last schedule', value: status.lastScheduleTime ? formatAge(status.lastScheduleTime) : '-' },
-        { label: 'Last success', value: status.lastSuccessfulTime ? formatAge(status.lastSuccessfulTime) : '-' },
+        { label: 'Last schedule', value: status.lastScheduleTime ? formatRelativeAgeTime(status.lastScheduleTime) : '-' },
+        { label: 'Last success', value: status.lastSuccessfulTime ? formatRelativeAgeTime(status.lastSuccessfulTime) : '-' },
       ],
     }
   }
@@ -2656,8 +2743,8 @@ function getScalingSummary(
       label: phase,
       detail: '',
       stats: [
-        { label: 'Started', value: status.startTime ? formatAge(status.startTime) : '-' },
-        { label: 'Finished', value: status.completionTime ? formatAge(status.completionTime) : phase === 'Running' ? 'Running' : '-' },
+        { label: 'Started', value: status.startTime ? formatRelativeAgeTime(status.startTime) : '-' },
+        { label: 'Finished', value: status.completionTime ? formatRelativeAgeTime(status.completionTime) : phase === 'Running' ? 'Running' : '-' },
         { label: 'Parallelism', value: spec.parallelism ?? 1 },
         { label: 'Completions', value: spec.completions ?? 1 },
         { label: 'Completion mode', value: spec.completionMode ?? 'NonIndexed' },
@@ -3297,8 +3384,8 @@ function CronJobRunsCard({
     >
       <div className="mb-3 grid gap-x-8 gap-y-3 sm:grid-cols-2">
         <OverviewStat label="Active jobs" value={activeJobs.length} tone={activeJobs.length > 0 ? 'warn' : 'default'} />
-        <OverviewStat label="Last schedule" value={status.lastScheduleTime ? formatAge(status.lastScheduleTime) : 'Never'} />
-        <OverviewStat label="Last success" value={status.lastSuccessfulTime ? formatAge(status.lastSuccessfulTime) : 'Never'} />
+        <OverviewStat label="Last schedule" value={status.lastScheduleTime ? formatRelativeAgeTime(status.lastScheduleTime) : 'Never'} />
+        <OverviewStat label="Last success" value={status.lastSuccessfulTime ? formatRelativeAgeTime(status.lastSuccessfulTime) : 'Never'} />
         <OverviewStat label="Retained history" value={`${spec.successfulJobsHistoryLimit ?? 3} ok / ${spec.failedJobsHistoryLimit ?? 1} failed`} />
       </div>
 
@@ -3755,7 +3842,7 @@ function ActivityCard({
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center justify-between gap-2">
                     <span className="truncate text-sm font-medium text-theme-text-primary">{event.reason || event.eventType || 'update'}</span>
-                    <span className="shrink-0 text-xs text-theme-text-tertiary">{formatAge(event.timestamp)}</span>
+                    <span className="shrink-0 text-xs text-theme-text-tertiary">{formatRelativeAgeTime(event.timestamp)}</span>
                   </div>
                   <div className="mt-0.5 line-clamp-2 text-xs text-theme-text-secondary">
                     {event.message || event.diff?.summary || `${event.kind} ${event.name}`}
@@ -3878,16 +3965,6 @@ function summarizeServingExposure(
   return { label: 'No serving path detected', badge: 'None', severity: 'neutral' }
 }
 
-function dedupeResourceRefs(refs: ResourceRef[]): ResourceRef[] {
-  const seen = new Set<string>()
-  return refs.filter((ref) => {
-    const key = resourceRefId(ref)
-    if (seen.has(key)) return false
-    seen.add(key)
-    return true
-  })
-}
-
 function resourceRefId(ref: ResourceRef): string {
   return `${ref.kind}/${ref.namespace}/${ref.name}/${ref.group ?? ''}`
 }

package/src/types/capacity.ts

@@ -1,4 +1,5 @@
 import type { Issue } from "../components/issues/types";
+import type { NodeLifecycleObservation } from "../utils/node-lifecycle";
 
 export const CAPACITY_SCHEMA_VERSION = "v1alpha1" as const;
 
@@ -232,6 +233,14 @@ export interface CapacityClaimLifecycleSummary {
 }
 
 export interface CapacityNodeLifecycleSummary {
+  operational?: {
+    total: number;
+    ready: number;
+    notReady: number;
+    cordoned: number;
+    removing: number;
+    removingUnhealthy: number;
+  };
   total: number;
   ready: number;
   notReady: number;
@@ -325,6 +334,7 @@ export type CapacityClaimStage =
   | "unknown";
 
 export interface CapacityNodeMember {
+  lifecycle?: NodeLifecycleObservation;
   ready?: boolean;
   cordoned: boolean;
   conditions: CapacityCondition[];

package/src/types/core.ts

@@ -167,6 +167,9 @@ export interface FeatureCapabilities {
   podEnvironment?: boolean
   policyResource?: boolean
   workloadHistory?: boolean
+  serviceEndpointSlices?: boolean
+  trafficRecords?: boolean
+  gitopsWriteEvidence?: boolean
 }
 
 // DeploymentMode is the closed set of topologies Radar can run in.
@@ -653,6 +656,8 @@ export interface Relationships {
   consumers?: ResourceRef[]
   scalers?: ResourceRef[]
   storageRefs?: ResourceRef[]
+  dependencies?: ResourceRef[]
+  dependents?: ResourceRef[]
   scaleTarget?: ResourceRef
   pdbs?: ResourceRef[]              // PodDisruptionBudgets protecting this workload
   networkPolicies?: ResourceRef[]   // NetworkPolicy / CiliumNetworkPolicy / ClusterNetworkPolicy variants selecting this workload
@@ -817,6 +822,7 @@ export interface HelmRevision {
   appVersion: string
   description: string
   updated: string // ISO date string
+  deleted?: string
 }
 
 export type HelmOperationKind = 'release_failed' | 'upgrade_failed' | 'upgrade_rolled_back' | 'rollback' | 'pending'
@@ -1284,10 +1290,12 @@ export interface MetricsDataPoint {
 export interface TrafficEndpoint {
   name: string
   namespace: string
-  kind: string // Pod, Service, External, Host, Unknown
+  kind: string // Pod, Workload, Service, External, Host, Unknown
   ip?: string
   labels?: Record<string, string>
   workload?: string
+  /** Deployment, StatefulSet, CronJob, … when resolved from the pod's owners. */
+  workloadKind?: string
   port?: number
 }
 
@@ -1453,6 +1461,12 @@ export interface TrafficFlowsResponse {
    *  nodeFlowLimit, so older traffic in the window did not fit. */
   coveredSince?: string
   nodeFlowLimit?: number
+  /** Set when the source kept only its newest flowLimit flows in total; the
+   *  window is then complete only from coveredSince. */
+  flowLimit?: number
+  /** How many records the aggregation covers. `flows` holds only the newest of
+   *  them; a Radar that predates the cap omits this and sends every record. */
+  flowsTotal?: number
   warning?: string  // Non-fatal warning (e.g., query errors)
   /** 'transient' (or absent) means the condition may clear on its own and a
    *  retry is worthwhile. 'partial' means the flows are correct but some of
@@ -1463,6 +1477,23 @@ export interface TrafficFlowsResponse {
   warningKind?: 'transient' | 'partial' | 'incomplete'
 }
 
+// Response from GET /api/traffic/flows/records — the newest records behind
+// one graph selection.
+export interface TrafficRecordsResponse {
+  source: string
+  timestamp: string
+  /** Newest first, at most the server's records limit. */
+  flows: TrafficFlow[]
+  /** How many records matched; more than flows.length when capped. */
+  matched: number
+  l7ResponsesCallerOriented?: boolean
+  coveredSince?: string
+  nodeFlowLimit?: number
+  flowLimit?: number
+  warning?: string
+  warningKind?: 'transient' | 'partial' | 'incomplete'
+}
+
 // Wizard state for traffic setup
 export type TrafficWizardState = 'detecting' | 'not_found' | 'wizard' | 'checking' | 'ready'