@skyhook-io/k8s-ui 1.16.3 → 1.17.1

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
@@ -87,6 +90,8 @@ export interface WorkloadExtraTab {
   icon?: ReactNode
   after?: WorkloadTabType
   replaces?: WorkloadTabType
+  /** Trailing adornment after the label, e.g. a status mark. */
+  badge?: ReactNode
   render: () => ReactNode
 }
 
@@ -142,6 +147,23 @@ interface WorkloadViewProps {
    * the Escape shortcut.
    */
   breadcrumb?: ReactNode
+  /** Where the object lives, shown on the title line before its name (e.g. "Workspace / View /"). */
+  titlePrefix?: ReactNode
+  /**
+   * Kind, status and namespace on the title line, wrapping below the name
+   * only when there is no room; other chips (image, owners) keep a second
+   * row. The header actions then wrap below the title as a group rather
+   * than squeezing it.
+   */
+  inlineBadges?: boolean
+  /** A note right after the namespace, e.g. that it is outside the namespace filter. */
+  namespaceNote?: ReactNode
+  /** Replaces the derived status badge on the title line, e.g. with the controller's own reported phase. */
+  renderStatusBadge?: (resource: any) => ReactNode
+  /** A short status right after the controller status on the title line, e.g. a derived health verdict. */
+  statusNote?: ReactNode
+  /** Leave out the kind badge, for a host whose title prefix already names the kind. */
+  hideKindBadge?: boolean
   /** Suppress the standalone back arrow — for embeddings where "back" has no
    *  meaningful target (a single-workload app has no app graph to return to). */
   hideBackButton?: boolean
@@ -281,6 +303,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 */
@@ -314,6 +338,14 @@ interface WorkloadViewProps {
   }) => ReactNode
   /** Extra tabs for the expanded view (e.g. a domain's own sections). */
   extraTabs?: WorkloadExtraTab[]
+  /** Expanded view: a line under the title, above the tabs, shown on every tab. */
+  subheader?: ReactNode
+  /** Expanded view: tab ids in display order; tabs not listed follow in their usual order. */
+  tabOrder?: string[]
+  /** Expanded view: relabel, lead, or replace the whole "Spec & status" body. */
+  specTab?: { label?: string; icon?: ReactNode; lead?: ReactNode; render?: () => ReactNode }
+  /** Domain actions rendered in the header (drawer and expanded). */
+  renderHeaderActions?: (props: { resource: any; context: 'drawer' | 'expanded'; onNavigate?: NavigateToResource }) => ReactNode
   /** Render a full replacement for the expanded Overview tab. */
   renderExpandedOverview?: (props: {
     kind: string
@@ -404,6 +436,12 @@ export function WorkloadView({
   initialTab,
   group,
   breadcrumb,
+  titlePrefix,
+  inlineBadges = false,
+  namespaceNote,
+  renderStatusBadge,
+  statusNote,
+  hideKindBadge = false,
   hideBackButton,
   scopeControls,
   compactHeader,
@@ -464,6 +502,10 @@ export function WorkloadView({
   renderExpandedOverview,
   renderSummary,
   extraTabs,
+  tabOrder,
+  specTab,
+  subheader,
+  renderHeaderActions,
   renderRelatedYaml,
   renderMetricsTab,
   renderCostTab,
@@ -494,6 +536,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 +731,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 +745,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 +815,35 @@ 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 host's summary, tabs and subheader can hold actions on the live object.
+  const renderSummaryForState = resourceGone ? undefined : renderSummary
+  const extraTabsForState = resourceGone ? undefined : extraTabs
+  // 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 +856,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 +870,8 @@ 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 headerActions = resource && !resourceGone && renderHeaderActions?.({ resource, context: expanded ? 'expanded' : 'drawer', onNavigate: onNavigateToResource })
+  const diagnoseAction = resourceGone ? null : renderDiagnose?.({
     kind: resource?.kind ?? knownKindForPluralWithGroup(apiKind, group ?? '') ?? apiKind,
     group,
     namespace,
@@ -809,11 +890,11 @@ export function WorkloadView({
   const logsFallbackReady = !renderLogsTab || (!logsTabVisible && !podEvidenceLoading)
   const requestedTab: TabType = activeTab
   const summaryContext = { kind, apiKind, namespace, name, group, resource, onNavigate: onNavigateToResource }
-  const expandedSummary = expanded && resource ? renderSummary?.({ ...summaryContext, context: 'expanded' }) ?? null : null
-  const drawerSummary = !expanded && resource ? renderSummary?.({ ...summaryContext, context: 'drawer' }) ?? null : null
+  const expandedSummary = expanded && resource ? renderSummaryForState?.({ ...summaryContext, context: 'expanded' }) ?? null : null
+  const drawerSummary = !expanded && resource ? renderSummaryForState?.({ ...summaryContext, context: 'drawer' }) ?? null : null
   const tabs: DetailShellTab<TabType>[] = [
     { id: 'overview', label: 'Overview', icon: <Layers className="w-4 h-4" /> },
-    { id: 'spec', label: 'Spec & status', icon: <FileText className="w-4 h-4" />, hidden: !expandedSummary },
+    { id: 'spec', label: specTab?.label ?? 'Spec & status', icon: specTab?.icon ?? <FileText className="w-4 h-4" />, hidden: !expandedSummary },
     { id: 'topology', label: 'Topology', icon: <Network className="w-4 h-4" />, hidden: topologyTabHidden },
     {
       id: 'timeline',
@@ -827,15 +908,15 @@ 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" /> },
   ]
-  const allTabs = mergeExtraTabs(tabs, expanded ? extraTabs : undefined)
+  const allTabs = orderTabs(mergeExtraTabs(tabs, expanded ? extraTabsForState : undefined), expanded ? tabOrder : undefined)
   const requestedTabAvailable = allTabs.some((tab) => tab.id === requestedTab && !tab.hidden)
   const effectiveTab: TabType = requestedTabAvailable ? requestedTab : 'overview'
-  const activeExtraTab = expanded ? extraTabs?.find((x) => x.id === effectiveTab) : undefined
+  const activeExtraTab = expanded ? extraTabsForState?.find((x) => x.id === effectiveTab) : undefined
   const shouldCommitFallback =
     requestedTab !== 'overview' &&
     !requestedTabAvailable &&
@@ -864,13 +945,13 @@ export function WorkloadView({
               <span className={clsx('badge', getKindColorOutline(apiKind))}>
                 {displayKindName(apiKind, resource?.kind)}
               </span>
-              {status && (
+              {renderStatusBadge && resource && !resourceGone ? renderStatusBadge(resource) : status && (
                 <span className={clsx('badge', status.color)}>
                   {status.text}
                 </span>
               )}
             </div>
-            <div className="flex items-center gap-1.5">
+            <div className="flex shrink-0 flex-nowrap items-center justify-end gap-1.5">
               {diagnoseAction}
               {onExpand && (
                 <Tooltip content="Open full view" delay={150} position="bottom">
@@ -929,19 +1010,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} leadingActions={headerActions} />
         </div>
 
         {/* Success animation overlay */}
@@ -956,6 +1038,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 +1090,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 +1106,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 +1116,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' })}
               />
               </>
               )}
@@ -1049,6 +1132,8 @@ export function WorkloadView({
     <OperationalIssuesShownContext.Provider value={!!hasOperationalIssues || !!operationalIssuesPending}>
     <DetailShell
       breadcrumb={breadcrumb}
+      wrapHeader={inlineBadges}
+      subheader={resourceGone ? undefined : subheader}
       nav={
         breadcrumb || hideBackButton ? undefined : (
           <Tooltip content="Go back (Esc)" delay={150} position="bottom">
@@ -1062,67 +1147,111 @@ export function WorkloadView({
           </Tooltip>
         )
       }
-      identity={
-        <>
-          {showOwnershipHeading && ownershipContext ? (
-            <OwnershipHeading
-              podName={name}
-              context={ownershipContext}
-              copied={copied === 'name'}
-              onCopy={() => copyToClipboard(name, 'name')}
-              onNavigateToResource={onNavigateToResource}
-              onOpenApplication={onOpenApplication}
-            />
-          ) : (
-            <div className="flex items-center gap-3 mb-1">
-              <h1 className="text-lg font-semibold text-theme-text-primary truncate">{name}</h1>
-              <Tooltip content="Copy name" delay={150}>
-                <button
-                  onClick={() => copyToClipboard(name, 'name')}
-                  className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded shrink-0"
-                  aria-label="Copy name"
-                >
-                  {copied === 'name' ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
-                </button>
-              </Tooltip>
-            </div>
-          )}
-          <div className="flex items-center gap-3 text-sm text-theme-text-secondary">
-            <span className={clsx('badge', getKindColorOutline(apiKind))}>
-              {displayKindName(apiKind, resource?.kind)}
-            </span>
-            {status && (
-              <span className={clsx('badge', status.color)}>
+      identity={(() => {
+        const nameAndCopy = (
+          <>
+            <h1 className="text-lg font-semibold text-theme-text-primary truncate">{name}</h1>
+            <Tooltip content="Copy name" delay={150}>
+              <button
+                onClick={() => copyToClipboard(name, 'name')}
+                className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded shrink-0"
+                aria-label="Copy name"
+              >
+                {copied === 'name' ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
+              </button>
+            </Tooltip>
+          </>
+        )
+        const kindAndStatus = (
+          <>
+            {!hideKindBadge && (
+              <span className={clsx('badge whitespace-nowrap', getKindColorOutline(apiKind))}>
+                {displayKindName(apiKind, resource?.kind)}
+              </span>
+            )}
+            {renderStatusBadge && resource && !resourceGone ? renderStatusBadge(resource) : status && (
+              <span className={clsx('badge whitespace-nowrap', status.color)}>
                 {status.text}
               </span>
             )}
+            {!resourceGone && statusNote}
+          </>
+        )
+        const coreBadges = (
+          <>
+            {/* On the title line the kind and status wrap together, never apart. */}
+            {inlineBadges ? <span className="inline-flex items-center gap-x-3">{kindAndStatus}</span> : kindAndStatus}
             {namespace && namespace !== '_' && (
-              <span>Namespace: <span className="text-theme-text-primary">{namespace}</span></span>
+              <span className="whitespace-nowrap">Namespace: <span className="text-theme-text-primary">{namespace}</span></span>
             )}
-            {headerImage && (
-              <Tooltip content={headerImage} delay={300} wrapperClassName="min-w-0 max-w-md">
-                <span className="truncate font-mono text-xs">
-                  {midTruncate(headerImage, 72)}
-                </span>
-              </Tooltip>
-            )}
-            {gitopsOwner && (
-              <ManagedByChip owner={gitopsOwner} status={gitOpsOwnerStatus} verified={gitOpsOwnerVerified} pending={gitOpsOwnerPending} source={gitOpsOwnerSource} onOpen={onOpenGitOpsResource} variant="block" />
-            )}
-            {helmOwner && (
-              <HelmManagedByChip owner={helmOwner} source={helmOwnerSource} onOpen={onOpenHelmRelease} variant="block" />
-            )}
-            {gitOpsResourcePath && onNavigateGitOpsPath && (
-              <OpenInGitOpsChip onClick={() => onNavigateGitOpsPath(gitOpsResourcePath)} />
-            )}
-            {relationships?.owner && !showOwnershipHeading && (
-              <span>Owner: <button onClick={() => onNavigateToResource?.(refToSelectedResource(relationships.owner!))} className="text-blue-500 hover:underline">{relationships.owner.name}</button></span>
+            {namespace && namespace !== '_' && namespaceNote}
+          </>
+        )
+        const extraChips = [
+          headerImage && (
+            <Tooltip key="image" content={headerImage} delay={300} wrapperClassName="min-w-0 max-w-md">
+              <span className="truncate font-mono text-xs">
+                {midTruncate(headerImage, 72)}
+              </span>
+            </Tooltip>
+          ),
+          gitopsOwner && (
+            <ManagedByChip key="gitops" owner={gitopsOwner} status={gitOpsOwnerStatus} verified={gitOpsOwnerVerified} pending={gitOpsOwnerPending} source={gitOpsOwnerSource} onOpen={onOpenGitOpsResource} variant="block" />
+          ),
+          helmOwner && (
+            <HelmManagedByChip key="helm" owner={helmOwner} source={helmOwnerSource} onOpen={onOpenHelmRelease} variant="block" />
+          ),
+          gitOpsResourcePath && onNavigateGitOpsPath && (
+            <OpenInGitOpsChip key="open-gitops" onClick={() => onNavigateGitOpsPath(gitOpsResourcePath)} />
+          ),
+          onOpenLiveTraffic && <LiveTrafficChip key="live-traffic" onClick={onOpenLiveTraffic} />,
+          relationships?.owner && !showOwnershipHeading && (
+            <span key="owner">Owner: <button onClick={() => onNavigateToResource?.(refToSelectedResource(relationships.owner!))} className="text-blue-500 hover:underline">{relationships.owner.name}</button></span>
+          ),
+        ].filter(Boolean)
+        if (inlineBadges && !(showOwnershipHeading && ownershipContext)) {
+          // The name and its copy button stay together and truncate only when
+          // the line holds nothing else; the badges wrap below before that.
+          return (
+            <>
+              <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-theme-text-secondary">
+                {titlePrefix}
+                <div className="flex min-w-0 max-w-full items-center gap-2">{nameAndCopy}</div>
+                {coreBadges}
+              </div>
+              {extraChips.length > 0 && (
+                <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-theme-text-secondary">{extraChips}</div>
+              )}
+            </>
+          )
+        }
+        return (
+          <>
+            {showOwnershipHeading && ownershipContext ? (
+              <OwnershipHeading
+                podName={name}
+                context={ownershipContext}
+                copied={copied === 'name'}
+                onCopy={() => copyToClipboard(name, 'name')}
+                onNavigateToResource={onNavigateToResource}
+                onOpenApplication={onOpenApplication}
+              />
+            ) : (
+              <div className="flex items-center gap-3 mb-1">
+                {titlePrefix}
+                {nameAndCopy}
+              </div>
             )}
-          </div>
-        </>
-      }
+            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-theme-text-secondary">
+              {coreBadges}
+              {extraChips}
+            </div>
+          </>
+        )
+      })()}
       headerActions={
         <>
+          {headerActions}
           {diagnoseAction}
           <Tooltip content="Refresh" delay={150} position="bottom">
             <button
@@ -1157,12 +1286,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,13 +1303,15 @@ 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}
           </div>
+        ) : effectiveTab === 'spec' && specTab?.render && !resourceGone ? (
+          <div className="h-full min-h-0 overflow-y-auto">{specTab.render()}</div>
         ) : (effectiveTab === 'overview' || effectiveTab === 'spec') && (
             <InfoTab
               resource={resource}
@@ -1199,22 +1331,29 @@ 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={
+                // A host's spec lead replaces the operational issues there: its Overview already leads with them.
+                effectiveTab === 'spec' && specTab?.lead
+                  ? specTab.lead
+                  : hasOperationalIssues && renderOverviewLeadForState
+                    ? renderOverviewLeadForState({ kind, namespace, name })
+                    : undefined
+              }
               onEvaluateCapacity={onEvaluateCapacity}
               recentImageSave={recentImageSave}
             />
@@ -1273,9 +1412,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 +1545,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 +1588,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,
@@ -2023,6 +2205,7 @@ function WorkloadOverviewTab({
   const relationshipGroups = buildRelationshipGroups(relationships)
   const servingRelationshipGroups = buildServingRelationshipGroups(relationships)
   const dependencyRelationshipGroups = buildDependencyRelationshipGroups(relationships)
+  const observationGroups = dependencyRelationshipGroups.filter((group) => group.label === 'Monitored By' || group.label === 'Staged Policies')
   const showServingPath = servingRelationshipGroups.length > 0 && overviewShape !== 'job' && overviewShape !== 'cronjob'
   const secondaryRelationshipGroups = showServingPath ? dependencyRelationshipGroups : relationshipGroups
   const relationshipCardTitle =
@@ -2101,6 +2284,14 @@ function WorkloadOverviewTab({
                     onNavigate={onNavigate}
                     onSwitchToTopology={onSwitchToTopology}
                   />
+                  {observationGroups.length > 0 && (
+                    <ServingDependenciesCard
+                      title="Related resources"
+                      groups={observationGroups}
+                      onNavigate={onNavigate}
+                      onSwitchToTopology={onSwitchToTopology}
+                    />
+                  )}
                   {extraContent}
                 </div>
               </div>
@@ -2439,8 +2630,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 +2747,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 +2847,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 +3488,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 +3946,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}`}
@@ -3790,6 +3981,7 @@ function buildServingRelationshipGroups(relationships: Relationships | undefined
     ...(relationships.ingresses ?? []),
     ...(relationships.gateways ?? []),
     ...(relationships.routes ?? []),
+    ...(relationships.routedFrom ?? []),
   ])
   return [
     { label: 'Services', refs: dedupeResourceRefs(relationships.services ?? []) },
@@ -3804,6 +3996,8 @@ function buildDependencyRelationshipGroups(relationships: Relationships | undefi
     { label: 'Autoscalers', refs: dedupeResourceRefs(relationships.scalers ?? []) },
     { label: 'Disruption budgets', refs: dedupeResourceRefs(relationships.pdbs ?? []) },
     { label: 'Network policies', refs: dedupeResourceRefs(relationships.networkPolicies ?? []) },
+    { label: 'Staged Policies', refs: dedupeResourceRefs(relationships.stagedPolicies ?? []) },
+    { label: 'Monitored By', refs: dedupeResourceRefs(relationships.monitors ?? []) },
     { label: 'Storage claims', refs: dedupeResourceRefs(relationships.resourceClaims ?? []) },
   ].filter((group) => group.refs.length > 0)
 }
@@ -3878,16 +4072,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 ?? ''}`
 }
@@ -3913,12 +4097,21 @@ function mergeAndRankEvents(events: TimelineEvent[], updates: TimelineEvent[]):
     })
 }
 
+function orderTabs(tabs: DetailShellTab<TabType>[], order: string[] | undefined): DetailShellTab<TabType>[] {
+  if (!order || order.length === 0) return tabs
+  const rank = (id: string) => {
+    const i = order.indexOf(id)
+    return i < 0 ? order.length : i
+  }
+  return tabs.map((t, i) => ({ t, i })).sort((a, b) => rank(a.t.id) - rank(b.t.id) || a.i - b.i).map((x) => x.t)
+}
+
 function mergeExtraTabs(tabs: DetailShellTab<TabType>[], extra: WorkloadExtraTab[] | undefined): DetailShellTab<TabType>[] {
   if (!extra || extra.length === 0) return tabs
   const replaced = new Set(extra.map((x) => x.replaces).filter(Boolean))
   const out = tabs.map((t) => (replaced.has(t.id) ? { ...t, hidden: true } : t))
   for (const x of extra) {
-    const tab: DetailShellTab<TabType> = { id: x.id as TabType, label: x.label, icon: x.icon }
+    const tab: DetailShellTab<TabType> = { id: x.id as TabType, label: x.label, icon: x.icon, badge: x.badge }
     const anchor = x.after ?? x.replaces
     const idx = anchor ? out.findIndex((t) => t.id === anchor) : -1
     if (idx >= 0) out.splice(idx + 1, 0, tab)