@skyhook-io/k8s-ui 1.14.10 → 1.14.11

package/src/components/gitops/detail-helpers.test.ts

@@ -5,6 +5,7 @@ import {
   formatGitOpsSourceUrl,
   getGitOpsResourceStatus,
   getGitOpsTool,
+  isDestinationRef,
   parseArgoRollbackID,
 } from './detail-helpers'
 
@@ -149,3 +150,34 @@ describe('getGitOpsResourceStatus - ApplicationSet', () => {
     expect(status?.health).toBe('Healthy')
   })
 })
+
+describe('isDestinationRef', () => {
+  const node = (ref: { group?: string; kind: string; namespace: string; name: string }, remote?: boolean) =>
+    ({ id: `${ref.kind}/${ref.name}`, ref, role: 'declared' as const, tool: 'fluxcd' as const, remote })
+  const root = node({ group: 'kustomize.toolkit.fluxcd.io', kind: 'Kustomization', namespace: 'flux-system', name: 'fleet-prod' })
+  const tree = {
+    root,
+    nodes: [
+      root,
+      node({ group: 'apps', kind: 'Deployment', namespace: 'prod', name: 'billing' }, true),
+      node({ group: 'source.toolkit.fluxcd.io', kind: 'GitRepository', namespace: 'flux-system', name: 'fleet' }),
+    ],
+    edges: [],
+    remoteDestination: true,
+  }
+
+  test('a local tree has no destination refs', () => {
+    expect(isDestinationRef(tree, false, { group: 'apps', kind: 'Deployment', namespace: 'prod', name: 'billing' })).toBe(false)
+  })
+
+  test('declared resources are remote; the root and sources are local', () => {
+    expect(isDestinationRef(tree, true, { group: 'apps', kind: 'Deployment', namespace: 'prod', name: 'billing' })).toBe(true)
+    expect(isDestinationRef(tree, true, root.ref)).toBe(false)
+    expect(isDestinationRef(tree, true, { group: 'source.toolkit.fluxcd.io', kind: 'GitRepository', namespace: 'flux-system', name: 'fleet' })).toBe(false)
+  })
+
+  test('a ref the tree does not list is remote, even before the tree loads', () => {
+    expect(isDestinationRef(tree, true, { kind: 'Deployment', name: 'billing' })).toBe(true)
+    expect(isDestinationRef(null, true, { group: 'apps', kind: 'Deployment', namespace: 'prod', name: 'billing' })).toBe(true)
+  })
+})

package/src/components/gitops/detail-helpers.ts

@@ -1,4 +1,5 @@
 import { argoApplicationSetConditionsToGitOpsStatus, argoStatusToGitOpsStatus, fluxConditionsToGitOpsStatus, type FluxCondition, type GitOpsStatus } from '../../types/gitops'
+import type { GitOpsResourceTree } from '../../types/gitops-tree'
 import { formatCompactAge } from '../../utils/format'
 
 // =============================================================================
@@ -123,3 +124,23 @@ export function getGitOpsTool(kind: string, group?: string): 'argo' | 'flux' {
   if (group === 'argoproj.io' || kind === 'applications' || kind === 'applicationsets' || kind === 'appprojects') return 'argo'
   return 'flux'
 }
+
+// isDestinationRef reports whether a resource named on a remote GitOps
+// object's page lives on its destination cluster, where this cluster's API
+// would answer for a different, same-named object. Only nodes the tree marks
+// local (the root, Flux sources and dependencies) are local. A ref the tree
+// doesn't list, such as an operation error naming just kind and name, is
+// treated as remote, since it came from the destination's reconcile.
+export function isDestinationRef(
+  tree: GitOpsResourceTree | null | undefined,
+  remoteDestination: boolean | undefined,
+  ref: { group?: string; kind: string; namespace?: string; name: string },
+): boolean {
+  if (!remoteDestination) return false
+  const node = tree?.nodes.find((n) =>
+    n.ref.kind === ref.kind &&
+    n.ref.name === ref.name &&
+    (n.ref.namespace || '') === (ref.namespace || '') &&
+    (n.ref.group || '') === (ref.group || ''))
+  return node ? !!node.remote : true
+}

package/src/components/gitops/health-provenance.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, test } from 'vitest'
 
 import { RADAR_HEALTH_NOTE, radarHealthNote } from './health-provenance'
-import { APP_TREE_API_ERROR_NOTICE, APP_TREE_HEALTH_NOTICE, APP_TREE_NO_FINDINGS_NOTICE, APP_TREE_PERSIST_REMEDY, REMOTE_DESTINATION_NOTICE, hasRadarFinding, healthSourceNoticeKind } from './GitOpsHealthSourceNotice'
+import { APP_TREE_API_ERROR_NOTICE, APP_TREE_HEALTH_NOTICE, APP_TREE_NO_FINDINGS_NOTICE, APP_TREE_PERSIST_REMEDY, REMOTE_DESTINATION_NOTICE, REMOTE_FLUX_TARGET_NOTICE, hasRadarFinding, healthSourceNoticeKind } from './GitOpsHealthSourceNotice'
 
 describe('radarHealthNote', () => {
   test('marks only Radar-sourced problems', () => {
@@ -16,7 +16,7 @@ describe('radarHealthNote', () => {
     expect(radarHealthNote({ health: 'Degraded', healthSource: 'something-newer' })).toBe('')
   })
   test('copy stays in plain words', () => {
-    for (const copy of [RADAR_HEALTH_NOTE, APP_TREE_HEALTH_NOTICE, REMOTE_DESTINATION_NOTICE]) {
+    for (const copy of [RADAR_HEALTH_NOTE, APP_TREE_HEALTH_NOTICE, REMOTE_DESTINATION_NOTICE, REMOTE_FLUX_TARGET_NOTICE]) {
       expect(copy).not.toMatch(/appTree|resourceHealthSource|persist|Tier|overlay/i)
     }
     // The remedy deliberately names the one Argo knob the user can turn;
@@ -40,7 +40,7 @@ describe('radarHealthNote', () => {
 })
 
 describe('healthSourceNoticeKind', () => {
-  test('remote destination wins over appTree, Flux never notices', () => {
+  test('remote destination wins over appTree; Flux notices only a remote target', () => {
     expect(healthSourceNoticeKind({ tool: 'argocd', resourceHealthMode: 'appTree', remoteDestination: true })).toBe('remote')
     expect(healthSourceNoticeKind({ tool: 'argocd', resourceHealthMode: 'appTree', health: 'Degraded' })).toBe('appTree')
     expect(healthSourceNoticeKind({ tool: 'argocd', resourceHealthMode: 'appTree' })).toBe('appTree')
@@ -49,6 +49,7 @@ describe('healthSourceNoticeKind', () => {
     expect(healthSourceNoticeKind({ tool: 'argocd', resourceHealthMode: 'inline' })).toBeNull()
     expect(healthSourceNoticeKind({ tool: 'argocd' })).toBeNull()
     expect(healthSourceNoticeKind({ tool: 'fluxcd', resourceHealthMode: 'appTree' })).toBeNull()
+    expect(healthSourceNoticeKind({ tool: 'fluxcd', remoteDestination: true })).toBe('remote')
     expect(healthSourceNoticeKind(undefined)).toBeNull()
   })
 })

package/src/components/gitops/index.ts

@@ -41,6 +41,7 @@ export {
   describeGitOpsTerminating,
   getGitOpsResourceStatus,
   getGitOpsTool,
+  isDestinationRef,
 } from './detail-helpers'
 export { SyncOptionsDialog } from './SyncOptionsDialog'
 export type { SyncOptionsDialogProps, ArgoSyncOpts } from './SyncOptionsDialog'
@@ -59,5 +60,5 @@ export type {
   FluxActionHandlers,
   GitOpsHelmValuesData,
 } from './GitOpsDetailLayout'
-export { GitOpsHealthSourceNotice, healthSourceNoticeKind, hasRadarFinding, APP_TREE_HEALTH_NOTICE, APP_TREE_NO_FINDINGS_NOTICE, REMOTE_DESTINATION_NOTICE } from './GitOpsHealthSourceNotice'
+export { GitOpsHealthSourceNotice, healthSourceNoticeKind, hasRadarFinding, APP_TREE_HEALTH_NOTICE, APP_TREE_NO_FINDINGS_NOTICE, REMOTE_DESTINATION_NOTICE, REMOTE_FLUX_TARGET_NOTICE } from './GitOpsHealthSourceNotice'
 export { radarHealthNote, RADAR_HEALTH_NOTE } from './health-provenance'

package/src/components/gitops/insights/ArgoResourceDiff.tsx

@@ -1,9 +1,13 @@
-import { useEffect, useState } from 'react'
-import { createPortal } from 'react-dom'
+import { useState } from 'react'
 import { createTwoFilesPatch } from 'diff'
-import { GitCompare, Maximize2, ShieldOff, X } from 'lucide-react'
+import { clsx } from 'clsx'
+import { FileText, GitCompare, Maximize2, Rows, ShieldOff, X } from 'lucide-react'
 import type { GitOpsResourceDiff } from '../../../types'
 import { DiffLine, hasDiffBodyChange } from '../../shared/UnifiedDiff'
+import { CodeViewer } from '../../ui/CodeViewer'
+import { DialogPortal } from '../../ui/DialogPortal'
+import { YamlDiffEditor } from '../../ui/YamlEditor'
+import { Tooltip } from '../../ui/Tooltip'
 
 interface ArgoResourceDiffProps {
   diff?: GitOpsResourceDiff | null
@@ -14,9 +18,9 @@ interface ArgoResourceDiffProps {
 
 // ArgoResourceDiff renders the full Git-rendered desired-vs-live diff for a
 // single Argo CD managed resource. Pure presentation: the host (web/) wires the
-// fetch and passes data / loading / error. The inline view is a unified line
-// diff; the maximize control opens the same content full-screen with side-by-
-// side panes on wide viewports.
+// fetch and passes data / loading / error. The inline view is a compact unified
+// preview; the maximize control opens the full view (Diff / Live manifest /
+// Desired manifest, with the Monaco-based YamlDiffEditor powering the Diff tab).
 export function ArgoResourceDiff({ diff, loading, error }: ArgoResourceDiffProps) {
   const [maximized, setMaximized] = useState(false)
 
@@ -76,7 +80,13 @@ export function ArgoResourceDiff({ diff, loading, error }: ArgoResourceDiffProps
         </div>
       )}
 
-      {maximized && <ArgoResourceDiffOverlay diff={diff} onClose={() => setMaximized(false)} />}
+      <DialogPortal
+        open={maximized}
+        onClose={() => setMaximized(false)}
+        className="dialog flex h-[90vh] w-full max-w-6xl flex-col"
+      >
+        <ArgoResourceDiffContent diff={diff} onClose={() => setMaximized(false)} />
+      </DialogPortal>
     </div>
   )
 }
@@ -90,68 +100,135 @@ function RedactedChip() {
   )
 }
 
-// Full-screen compare overlay. Side-by-side desired / live panes on wide
-// viewports; unified diff when narrow. Portaled to body so it escapes the
-// expanded row's overflow clipping.
-function ArgoResourceDiffOverlay({ diff, onClose }: { diff: GitOpsResourceDiff; onClose: () => void }) {
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.stopPropagation()
-        onClose()
-      }
-    }
-    document.addEventListener('keydown', onKey, true)
-    return () => document.removeEventListener('keydown', onKey, true)
-  }, [onClose])
+type ViewMode = 'diff' | 'live' | 'desired'
+
+function ArgoResourceDiffContent({ diff, onClose }: { diff: GitOpsResourceDiff; onClose: () => void }) {
+  const [viewMode, setViewMode] = useState<ViewMode>('diff')
+  const [unified, setUnified] = useState(false)
+  const [hideUnchanged, setHideUnchanged] = useState(true)
 
   const unchanged = !docsDiffer(diff.desired, diff.live)
 
-  return createPortal(
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
-      <div className="dialog relative flex max-h-[90vh] w-full max-w-6xl flex-col">
-        <div className="flex items-center justify-between gap-2 border-b border-theme-border px-4 py-3">
-          <div className="flex min-w-0 items-center gap-2">
-            <GitCompare className="h-4 w-4 shrink-0 text-theme-text-secondary" />
-            <span className="truncate text-sm font-medium text-theme-text-primary">
-              desired (Git-rendered) <span className="mx-0.5 text-theme-text-tertiary">→</span> live (normalized)
-            </span>
-            {diff.redacted && <RedactedChip />}
-          </div>
-          <button
-            onClick={onClose}
-            className="flex shrink-0 items-center gap-1 rounded px-2 py-1 text-xs text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary"
-          >
-            <X className="h-3.5 w-3.5" />
-            Close
-          </button>
+  return (
+    <>
+      <div className="flex items-center justify-between gap-2 border-b border-theme-border px-4 py-3">
+        <div className="flex min-w-0 items-center gap-2">
+          <GitCompare className="h-4 w-4 shrink-0 text-theme-text-secondary" />
+          <span className="truncate text-sm font-medium text-theme-text-primary">
+            desired (Git-rendered) <span className="mx-0.5 text-theme-text-tertiary">→</span> live (normalized)
+          </span>
+          {diff.redacted && <RedactedChip />}
         </div>
-        {unchanged ? (
+        <button
+          onClick={onClose}
+          className="flex shrink-0 items-center gap-1 rounded px-2 py-1 text-xs text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary"
+        >
+          <X className="h-3.5 w-3.5" />
+          Close
+        </button>
+      </div>
+
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-theme-border px-4 py-2">
+        <div className="flex gap-1.5" role="tablist" aria-label="View">
+          {([
+            ['diff', 'Diff'],
+            ['live', 'Live manifest'],
+            ['desired', 'Desired manifest'],
+          ] as const).map(([mode, label]) => (
+            <button
+              key={mode}
+              type="button"
+              role="tab"
+              aria-selected={viewMode === mode}
+              onClick={() => setViewMode(mode)}
+              className={clsx(
+                'rounded-md border px-2.5 py-1 text-xs transition-colors',
+                viewMode === mode
+                  ? 'selection selection-text selection-ring border-transparent'
+                  : 'border-theme-border text-theme-text-secondary hover:bg-theme-hover',
+              )}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+        {viewMode === 'diff' && !unchanged && (
+          <div className="flex items-center gap-1">
+            <ToggleButton active={hideUnchanged} onClick={() => setHideUnchanged((v) => !v)} icon={<FileText className="h-3.5 w-3.5" />} label="Diff only" tooltip="Collapse unchanged regions" />
+            <ToggleButton active={unified} onClick={() => setUnified((v) => !v)} icon={<Rows className="h-3.5 w-3.5" />} label="Unified" tooltip="Switch between side-by-side and single-column" />
+          </div>
+        )}
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-auto bg-theme-base/50">
+        {viewMode !== 'diff' ? (
+          diff[viewMode] ? (
+            <CodeViewer key={viewMode} code={diff[viewMode]} language="yaml" showLineNumbers showCopyButton maxHeight="calc(90vh - 180px)" />
+          ) : (
+            <div className="p-6 text-sm text-theme-text-secondary">
+              {viewMode === 'live'
+                ? 'This resource is not present in the live cluster state.'
+                : 'This resource is not present in the Git-rendered desired state.'}
+            </div>
+          )
+        ) : unchanged ? (
           <div className="p-6 text-sm text-theme-text-secondary">
             No differences between the Git-rendered desired state and live cluster state.
           </div>
         ) : (
-          // Unified (not side-by-side) even full-screen: two unhighlighted
-          // panes make the reader hunt for the drifted line by eye across a
-          // whole manifest. The unified view marks every changed line — the
-          // same default Argo's own UI makes. An aligned split-diff with
-          // per-line highlighting can supersede this later.
-          <div className="min-h-0 flex-1 overflow-auto bg-theme-base/50">
-            <UnifiedDiffBody desired={diff.desired} live={diff.live} />
-          </div>
+          <YamlDiffEditor
+            original={diff.desired}
+            modified={diff.live}
+            unified={unified}
+            hideUnchanged={hideUnchanged}
+            height="100%"
+            bleed
+          />
         )}
       </div>
-    </div>,
-    document.body,
+    </>
   )
 }
 
+function ToggleButton({
+  active,
+  onClick,
+  icon,
+  label,
+  tooltip,
+}: {
+  active: boolean
+  onClick: () => void
+  icon: React.ReactNode
+  label: string
+  tooltip: string
+}) {
+  return (
+    <Tooltip content={tooltip}>
+      <button
+        type="button"
+        onClick={onClick}
+        aria-pressed={active}
+        className={clsx(
+          'flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-colors whitespace-nowrap',
+          active
+            ? 'border-skyhook-400/50 bg-skyhook-500/15 text-skyhook-300'
+            : 'border-transparent text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary',
+        )}
+      >
+        {icon}
+        {label}
+      </button>
+    </Tooltip>
+  )
+}
 
 // Renders a unified diff of two YAML documents using the `diff` package, via the
-// shared DiffLine so this reads identically to the Helm manifest diff.
-function UnifiedDiffBody({ desired, live }: { desired: string; live: string }) {
-  const patch = createTwoFilesPatch('desired', 'live', desired, live, '', '', { context: 3 })
+// shared DiffLine so this reads identically to the Helm manifest diff — used
+// only for the compact inline row preview above; the full-view overlay's Diff
+// tab renders through YamlDiffEditor instead.
+function UnifiedDiffBody({ desired, live, context = 3 }: { desired: string; live: string; context?: number }) {
+  const patch = createTwoFilesPatch('desired', 'live', desired, live, '', '', { context })
   const lines = patch.split('\n').filter((line) => !line.startsWith('===') && !line.startsWith('Index:'))
   return (
     <div className="p-3 font-mono text-[11px]">

package/src/components/issues/IssuesView.tsx

@@ -221,6 +221,7 @@ export function IssueRow({
   // query toggles: inline at the row's right edge on a wide container, and on a
   // line of its own below the resource line once the row is too narrow to hold
   // it beside the title — so the title never has to truncate to make room.
+  const nodeCorroboration = issue.diagnostic_context?.facts?.find(fact => fact.type === 'node_startup_corroboration');
   const metaChips = (wrapperClass: string) => (
     <div className={`items-center gap-3 ${wrapperClass}`}>
       <span className={`badge-sm shrink-0 px-2.5 py-0.5 text-xs font-semibold ${open ? ISSUE_SEVERITY_SOLID_CLASS[severity] : ISSUE_SEVERITY_BADGE_CLASS[severity]}`}>
@@ -237,6 +238,11 @@ export function IssueRow({
           </time>
         </Tooltip>
       ) : null}
+      {nodeCorroboration ? (
+        <Tooltip content={nodeCorroboration.message} delay={200}>
+          <span className="badge-sm inline-flex items-center gap-1 border border-theme-border text-[10px] text-theme-text-secondary"><Workflow className="h-3 w-3 shrink-0" aria-hidden />Same-node evidence</span>
+        </Tooltip>
+      ) : null}
       {timing ? (
         <Tooltip content={timing.tooltip} delay={200}>
           <span className="badge-sm text-[10px] text-theme-text-secondary">{timing.chip}</span>

package/src/components/issues/ResourceIssuesSection.test.tsx

@@ -70,3 +70,39 @@ describe('sameResource', () => {
     expect(sameResource(subject, { kind: 'configmaps', namespace: 'demo', name: 'data' })).toBe(false)
   })
 })
+
+it('makes typed node corroboration discoverable without replacing the failure or adding causal labels', () => {
+  const correlated: Issue = {
+    ...issue, kind: 'Pod', name: 'worker', reason: 'IPExhaustion', cause: undefined,
+    message: 'specific kubelet failure',
+    diagnostic_context: { role: 'context', facts: [{ type: 'node_startup_corroboration', message: 'Three visible Pods across two workloads on node-a; including Pod demo/worker.', refs: [{ kind: 'Pod', namespace: 'demo', name: 'peer' }] }] },
+  }
+  const collapsed = renderToString(<ResourceIssuesSection issues={[correlated]} />)
+  expect(collapsed).toContain('Same-node evidence')
+  expect(collapsed).toContain('specific kubelet failure')
+  const expanded = renderToString(<IssueRow issue={correlated} open onToggle={() => {}} resourceHref={ref => `/resources/${ref.kind}/${ref.namespace}/${ref.name}`} />)
+  expect(expanded).toContain('Three visible Pods across two workloads')
+  expect(expanded).toContain('/resources/Pod/demo/peer')
+  expect(expanded).not.toContain('confidence')
+  expect(expanded).not.toContain('Caused by')
+  expect(renderToString(<IssueRow issue={{ ...correlated, diagnostic_context: undefined }} open onToggle={() => {}} />)).not.toContain('Same-node evidence')
+})
+
+it('keeps pod/template evidence in expanded neutral context with navigable witnesses', () => {
+  const contextual: Issue = {
+    ...issue, kind: 'Pod', name: 'worker', reason: 'OOMKilled', cause: 'Container was OOMKilled.',
+    diagnostic_context: { role: 'context', facts: [{
+      type: 'pod_template_divergence', message: 'Memory limit is 64Mi; template specifies 128Mi. Writer and timing are unknown.',
+      refs: [{ kind: 'Pod', namespace: 'demo', name: 'worker' }, { kind: 'ReplicaSet', group: 'apps', namespace: 'demo', name: 'owner' }],
+    }] },
+  }
+  const collapsed = renderToString(<ResourceIssuesSection issues={[contextual]} />)
+  expect(collapsed).toContain('OOMKilled')
+  expect(collapsed).not.toContain('Pod/template differences')
+  const expanded = renderToString(<IssueRow issue={contextual} open onToggle={() => {}} resourceHref={ref => `/resources/${ref.kind}/${ref.namespace}/${ref.name}`} />)
+  expect(expanded).toContain('Pod/template differences')
+  expect(expanded).toContain('Writer and timing are unknown')
+  expect(expanded).toContain('/resources/ReplicaSet/demo/owner')
+  expect(expanded).not.toContain('confidence')
+  expect(expanded).not.toContain('Caused by')
+})

package/src/components/issues/diagnostic.ts

@@ -24,6 +24,8 @@ export function diagnosticFactLabel(type: string): string {
   switch (type) {
     case 'explicit_reference':
       return 'Missing reference';
+    case 'node_startup_corroboration':
+      return 'Same-node failures';
     case 'owner_rollup':
       return 'Grouped from pods';
     case 'selected_backend_issue':
@@ -38,6 +40,8 @@ export function diagnosticFactLabel(type: string): string {
       return 'Init container';
     case 'restart_cause':
       return 'Restart evidence';
+    case 'pod_template_divergence':
+      return 'Pod/template differences';
     case 'node_blast_radius':
       return 'Affected workloads';
     case 'pvc_blast_radius':

package/src/components/logs/LogCore.tsx

@@ -1183,10 +1183,10 @@ function LogLine({
       )}
       {showPodName && entry.pod && (
         <span
-          className={`${podTextColor} select-none pr-2 whitespace-nowrap min-w-[80px] max-w-[120px] truncate`}
-          title={entry.pod}
+          className={`${podTextColor} select-none pr-2 whitespace-nowrap min-w-[80px] max-w-[220px] truncate`}
+          title={entry.sourceLabel || entry.pod}
         >
-          [{entry.pod.split('-').slice(-2).join('-')}]
+          [{entry.sourceLabel || entry.pod.split('-').slice(-2).join('-')}]
         </span>
       )}
       <span className="flex-1 min-w-0">{contentElement}</span>

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -13,18 +13,23 @@ import { useToast } from '../ui/Toast'
 
 export interface WorkloadRawLog {
   pod: string
+  sourceLabel?: string
   container: string
   timestamp: string
   content: string
 }
 
 export interface WorkloadLogsFetchParams {
+  signal?: AbortSignal
   container?: string
   tailLines?: number
   sinceSeconds?: number
 }
 
 export interface WorkloadLogsResult {
+  capturedAt?: string
+  notice?: string
+  sourceLabels?: Record<string, string>
   pods: WorkloadPodInfo[]
   logs: WorkloadRawLog[]
   emptyReason?: string
@@ -63,6 +68,10 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
   const [pods, setPods] = useState<WorkloadPodInfo[]>([])
   const [selectedPods, setSelectedPods] = useState<Set<string>>(new Set())
   const [isLoading, setIsLoading] = useState(false)
+  const [notice, setNotice] = useState('')
+  const [capturedAt, setCapturedAt] = useState('')
+  const [sourceLabels, setSourceLabels] = useState<Record<string, string>>({})
+  const fetchController = useRef<AbortController | null>(null)
   const [fetchError, setFetchError] = useState<string | null>(null)
   const [emptyMessage, setEmptyMessage] = useState<string | null>(null)
   const [emptyCommand, setEmptyCommand] = useState<string | null>(null)
@@ -93,13 +102,20 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
     podColorIndexRef.current = podColorIndex
   }, [podColorIndex])
 
-  const podsInitialized = useRef(false)
+  const previousSnapshotPods = useRef<string[] | null>(null)
 
   const loadLogs = useCallback(async () => {
+    fetchController.current?.abort()
+    const controller = new AbortController()
+    fetchController.current = controller
     setIsLoading(true)
     setFetchError(null)
     try {
-      const result = await fetchAll({ container: selectedContainer || undefined, tailLines, sinceSeconds })
+      const result = await fetchAll({ container: selectedContainer || undefined, tailLines, sinceSeconds, signal: controller.signal })
+      if (controller.signal.aborted) return
+      setNotice(result.notice || '')
+      setCapturedAt(result.capturedAt || '')
+      setSourceLabels(result.sourceLabels ?? {})
       const resultPods = result.pods ?? []
       const resultLogs = result.logs ?? []
       setEmptyMessage(result.emptyMessage || null)
@@ -108,10 +124,12 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
       podColorIndexRef.current = new Map(resultPods.map((pod, i) => [pod.name, i]))
       setPods(resultPods)
 
-      if (!podsInitialized.current && resultPods.length > 0) {
-        podsInitialized.current = true
-        setSelectedPods(new Set(resultPods.map(p => p.name)))
-      }
+      const previousPods = previousSnapshotPods.current
+      const nextPods = resultPods.map(p => p.name)
+      previousSnapshotPods.current = nextPods
+      setSelectedPods(selected => previousPods === null || previousPods.every(pod => selected.has(pod))
+        ? new Set(nextPods)
+        : new Set(nextPods.filter(pod => selected.has(pod))))
 
       const indexByPod = new Map<string, number>()
       resultPods.forEach((pod, i) => indexByPod.set(pod.name, i))
@@ -121,13 +139,15 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
         content: log.content,
         container: log.container,
         pod: log.pod,
+        sourceLabel: log.sourceLabel,
         podColorIndex: indexByPod.get(log.pod),
       })))
     } catch (err) {
+      if (controller.signal.aborted) return
       console.error('Failed to fetch workload logs:', err)
       setFetchError(err instanceof Error ? err.message : 'Failed to fetch logs')
     } finally {
-      setIsLoading(false)
+      if (!controller.signal.aborted) setIsLoading(false)
     }
   }, [fetchAll, selectedContainer, tailLines, sinceSeconds, set])
 
@@ -140,6 +160,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
     if (!willAutoStream || userStoppedRef.current) loadLogs()
   }, [loadLogs, willAutoStream])
   useEffect(() => { stopStreaming() }, [selectedContainer, stopStreaming])
+  useEffect(() => () => { fetchController.current?.abort() }, [])
 
   // If auto-stream turns off while a stream is open, stop following so live
   // appends don't race the snapshot.
@@ -154,6 +175,11 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
     // The stream replays the last N lines per pod (TailLines + Follow); clear
     // first so they don't duplicate lines already in the buffer (the snapshot on
     // the manual path, or an earlier stream on restart).
+    fetchController.current?.abort()
+    setIsLoading(false)
+    setNotice('')
+    setCapturedAt('')
+    setFetchError(null)
     clear()
     startStreaming(
       () => createStream({ container: selectedContainer || undefined, tailLines: 50, sinceSeconds }),
@@ -296,7 +322,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
             </div>
             {pods.map(pod => {
               const dotBg = palette.podColors[(podColorIndex.get(pod.name) ?? 0) % palette.podColors.length].bg
-              const primaryLabel = pod.stepName || pod.name
+              const primaryLabel = sourceLabels[pod.name] || pod.stepName || pod.name
               const secondaryLabel = pod.stepName ? pod.name : ''
               const stateLabel = pod.stepPhase || pod.phase || (pod.ready ? 'Ready' : 'Not Ready')
               let readyColor: string
@@ -354,7 +380,11 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
   const isConnecting = willAutoStream && connecting && entries.length === 0
 
   return (
-    <LogCore
+    <div className="flex h-full min-h-0 flex-col">
+    {notice && <div role="status" className="shrink-0 border-b border-theme-border bg-theme-elevated px-3 py-2 text-xs text-theme-text-secondary">{notice}</div>}
+    {capturedAt && <div className="shrink-0 border-b border-theme-border px-3 py-1 text-xs text-theme-text-secondary">Snapshot captured {new Date(capturedAt).toLocaleTimeString()}</div>}
+    {(fetchError || streamError) && entries.length > 0 && <div role="alert" className="shrink-0 border-b border-theme-border bg-theme-surface px-3 py-2 text-xs text-theme-text-secondary">{fetchError || streamError} · Previously loaded logs remain below.</div>}
+    <div className="min-h-0 flex-1"><LogCore
       entries={filteredEntries}
       allEntries={entries}
       isLoading={isLoading || isConnecting}
@@ -368,8 +398,8 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
       showPodName
       emptyMessage={emptyMessage || (pods.length === 0 ? 'No pods found' : 'No logs available')}
       emptyCommand={emptyCommand}
-      errorMessage={fetchError || (entries.length === 0 ? streamError : null)}
+      errorMessage={entries.length === 0 ? fetchError || streamError : null}
       forceDark={forceDark}
-    />
+    /></div></div>
   )
 }

package/src/components/logs/useLogBuffer.ts

@@ -4,6 +4,7 @@ import { isLogfmt } from '../../utils/log-format'
 export type LogLevel = 'error' | 'warn' | 'info' | 'debug' | 'unknown'
 
 export interface LogEntry {
+  sourceLabel?: string
   id: number
   timestamp: string
   content: string

package/src/components/logs/useLogStream.ts

@@ -112,8 +112,7 @@ export function useLogStream() {
       // The browser fires 'error' on the normal close that follows a clean
       // 'end'; that's not a failure, so don't log it or surface it.
       if (endedRef.current) return
-      handleSSEError(event, errorContext, () => {})
-      setStreamError(errorContext)
+      setStreamError(handleSSEError(event, errorContext, () => {}))
     })
 
     eventSourceRef.current = es