@skyhook-io/k8s-ui 1.17.0 → 1.18.0

package/src/components/logs/LogsViewer.test.tsx

@@ -0,0 +1,369 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+import { ToastProvider } from '../ui/Toast'
+import { LogsViewer, type LogsFetchParams } from './LogsViewer'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+
+class FakeEventSource extends EventTarget {
+  static last: FakeEventSource | undefined
+  closed = false
+  constructor(readonly url: string) {
+    super()
+    FakeEventSource.last = this
+  }
+  close() { this.closed = true }
+  emit(type: string, data: unknown) {
+    this.dispatchEvent(new MessageEvent(type, { data: JSON.stringify(data) }))
+  }
+}
+
+// The shape the app's API client throws for a JSON error body.
+class ApiError extends Error {
+  constructor(message: string, readonly data: Record<string, unknown>) {
+    super(message)
+  }
+}
+
+const NO_EARLIER_RUN = 'This container has not restarted, so there is no earlier run to show.'
+
+it('keeps received logs visible and reports a node failure until streaming is restarted', async () => {
+  const fetchLogs = vi.fn(async () => ({ app: '' }))
+  await renderViewer(fetchLogs, true)
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  await act(async () => FakeEventSource.last?.emit('log', { timestamp: '2026-10-20T10:00:00Z', content: 'before failure', container: 'app' }))
+  // The buffer batches streamed records before rendering them.
+  await act(async () => { await new Promise(resolve => setTimeout(resolve, 100)) })
+  await act(async () => FakeEventSource.last?.emit('error', { error: 'Kubernetes did not return this container\'s logs', error_code: 'logs_unavailable' }))
+  expect(element.querySelector('[role="alert"]')?.textContent).toContain('Kubernetes did not return')
+  expect(element.textContent).toContain('Previously loaded logs remain below.')
+  expect(element.textContent).toContain('OTHER 1')
+  expect(FakeEventSource.last?.closed).toBe(true)
+  await act(async () => button('Stream').click())
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  expect(element.querySelector('[role="alert"]')).toBeNull()
+})
+
+let root: Root
+let element: HTMLDivElement
+beforeEach(() => {
+  vi.stubGlobal('EventSource', FakeEventSource)
+  element = document.createElement('div')
+  document.body.appendChild(element)
+  root = createRoot(element)
+})
+afterEach(async () => {
+  await act(async () => root.unmount())
+  element.remove()
+  vi.unstubAllGlobals()
+})
+
+async function renderViewer(fetchLogs: (params: LogsFetchParams) => Promise<{ [container: string]: string }>, autoStream = false, containers = ['app']) {
+  await act(async () =>
+    root.render(
+      <ToastProvider>
+        <LogsViewer
+          namespace="default"
+          podName="web-0"
+          containers={containers}
+          fetchLogs={fetchLogs}
+          createStream={() => new EventSource('/stream')}
+          autoStream={autoStream}
+        />
+      </ToastProvider>,
+    ),
+  )
+}
+
+function previousCheckbox(): HTMLInputElement {
+  const box = element.querySelector<HTMLInputElement>('input[type="checkbox"]')
+  if (!box) throw new Error('Previous checkbox not rendered')
+  return box
+}
+
+function refreshButton(): HTMLButtonElement {
+  const found = element.querySelector<HTMLButtonElement>('button[aria-label="Refresh logs"]')
+  if (!found) throw new Error('Refresh button not rendered')
+  return found
+}
+
+it('keeps records after a failed Refresh of the same selection and replaces them on success', async () => {
+  const fetchLogs = vi.fn(async () => ({ app: '2026-10-20T10:00:00Z retained record' }))
+  await renderViewer(fetchLogs)
+  for (let attempt = 0; attempt < 2; attempt++) {
+    fetchLogs.mockRejectedValueOnce(new Error('snapshot failed'))
+    await act(async () => refreshButton().click())
+    expect(element.querySelector('[role="alert"]')?.textContent).toContain('snapshot failed')
+    expect(element.textContent).toContain('OTHER 1')
+  }
+
+  fetchLogs.mockResolvedValueOnce({ app: '' })
+  await act(async () => refreshButton().click())
+  expect(element.querySelector('[role="alert"]')).toBeNull()
+  expect(element.textContent).not.toContain('OTHER 1')
+  expect(element.textContent).not.toContain('snapshot failed')
+})
+
+it('keeps streamed records when Refresh fails after the stream stops', async () => {
+  const fetchLogs = vi.fn(async () => ({ app: '' }))
+  await renderViewer(fetchLogs, true)
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  await act(async () => FakeEventSource.last?.emit('log', { timestamp: '2026-10-20T10:00:00Z', content: 'retained record', container: 'app' }))
+  await act(async () => { await new Promise(resolve => setTimeout(resolve, 100)) })
+  await act(async () => button('Stop').click())
+  fetchLogs.mockRejectedValueOnce(new Error('snapshot failed'))
+
+  await act(async () => refreshButton().click())
+
+  expect(element.querySelector('[role="alert"]')?.textContent).toContain('snapshot failed')
+  expect(element.textContent).toContain('OTHER 1')
+})
+
+it.each(['container', 'previous', 'range'])('clears prior records when a new %s snapshot fails', async selection => {
+  const fetchLogs = vi.fn(async () => ({ app: '2026-10-20T10:00:00Z old selection' }))
+  await renderViewer(fetchLogs, false, ['app', 'sidecar'])
+  expect(element.textContent).toContain('OTHER 1')
+  fetchLogs.mockRejectedValueOnce(new Error('snapshot failed'))
+
+  await act(async () => {
+    if (selection === 'previous') {
+      previousCheckbox().click()
+      return
+    }
+    const select = element.querySelectorAll('select')[selection === 'container' ? 0 : 1]
+    if (!select) throw new Error('selection control not rendered')
+    select.value = selection === 'container' ? 'sidecar' : '1000'
+    select.dispatchEvent(new Event('change', { bubbles: true }))
+  })
+
+  expect(element.textContent).toContain('snapshot failed')
+  expect(element.textContent).not.toContain('OTHER 1')
+  expect(element.textContent).not.toContain('Previously loaded logs remain below.')
+  expect(messageClass('snapshot failed')).toMatch(/text-red/)
+})
+
+function button(label: string): HTMLButtonElement {
+  const found = Array.from(element.querySelectorAll('button')).find(b => b.textContent?.trim() === label)
+  if (!found) throw new Error(`${label} button not rendered`)
+  return found
+}
+
+// The class of the box the message sits in: the innermost element holding the
+// text is the message itself, and its parent carries the colour.
+function messageClass(text: string): string {
+  const message = Array.from(element.querySelectorAll('span, div')).filter(el => el.textContent === text).pop()
+  if (!message?.parentElement) throw new Error(`"${text}" not rendered`)
+  return message.parentElement.className
+}
+
+it('starting a stream leaves the Previous view and its answer behind', async () => {
+  const fetchLogs = vi.fn(async (params: LogsFetchParams) => {
+    if (params.previous) throw new ApiError(NO_EARLIER_RUN, { error: NO_EARLIER_RUN, error_code: 'no_previous_run' })
+    return { app: '' }
+  })
+  await renderViewer(fetchLogs)
+  await act(async () => previousCheckbox().click())
+  expect(element.textContent).toContain(NO_EARLIER_RUN)
+  const callsBeforeStream = fetchLogs.mock.calls.length
+
+  await act(async () => button('Stream').click())
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+
+  expect(element.textContent).not.toContain(NO_EARLIER_RUN)
+  expect(previousCheckbox().checked).toBe(false)
+  // Unticking Previous must not also load a snapshot over the stream.
+  expect(fetchLogs.mock.calls.length).toBe(callsBeforeStream)
+})
+
+it('with auto-stream on, Stop, Previous, then Stream returns to the live stream', async () => {
+  const fetchLogs = vi.fn(async (params: LogsFetchParams) => {
+    if (params.previous) throw new ApiError(NO_EARLIER_RUN, { error: NO_EARLIER_RUN, error_code: 'no_previous_run' })
+    return { app: '' }
+  })
+  await renderViewer(fetchLogs, true)
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  await act(async () => button('Stop').click())
+  await act(async () => previousCheckbox().click())
+  expect(element.textContent).toContain(NO_EARLIER_RUN)
+  const callsBeforeStream = fetchLogs.mock.calls.length
+
+  await act(async () => button('Stream').click())
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+
+  expect(element.textContent).not.toContain(NO_EARLIER_RUN)
+  expect(previousCheckbox().checked).toBe(false)
+  expect(button('Stop')).toBeTruthy()
+  expect(fetchLogs.mock.calls.length).toBe(callsBeforeStream)
+})
+
+it('with auto-stream on, Previous loads the earlier run once the stream ended by itself', async () => {
+  const fetchLogs = vi.fn(async (params: LogsFetchParams) =>
+    ({ app: params.previous ? '2026-10-13T10:00:00Z earlier run crashed' : '' }))
+  await renderViewer(fetchLogs, true)
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  // The container exited: the stream ends without the user pressing Stop.
+  await act(async () => FakeEventSource.last?.emit('end', {}))
+  expect(button('Stream')).toBeTruthy()
+
+  await act(async () => previousCheckbox().click())
+
+  expect(fetchLogs).toHaveBeenCalledWith(expect.objectContaining({ previous: true }))
+  // The earlier run's line is in the buffer: the level chips count it.
+  expect(element.textContent).toContain('OTHER 1')
+})
+
+it('with auto-stream on, a time range picked after the stream ended loads it instead of reopening the stream', async () => {
+  const fetchLogs = vi.fn(async () => ({ app: '' }))
+  await renderViewer(fetchLogs, true)
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  await act(async () => FakeEventSource.last?.emit('end', {}))
+  const ended = FakeEventSource.last
+  await act(async () => previousCheckbox().click())
+
+  const range = element.querySelector<HTMLSelectElement>('select')
+  if (!range) throw new Error('range select not rendered')
+  await act(async () => {
+    range.value = range.options[range.options.length - 1].value
+    range.dispatchEvent(new Event('change', { bubbles: true }))
+  })
+
+  expect(FakeEventSource.last).toBe(ended)
+  expect(previousCheckbox().checked).toBe(true)
+  expect(fetchLogs).toHaveBeenLastCalledWith(expect.objectContaining({ previous: true, sinceSeconds: expect.any(Number) }))
+})
+
+it('with auto-stream on, a range picked while the stream opens reopens it with that range', async () => {
+  const fetchLogs = vi.fn(async () => ({ app: '' }))
+  await renderViewer(fetchLogs, true)
+  const opening = FakeEventSource.last
+
+  const range = element.querySelector<HTMLSelectElement>('select')
+  if (!range) throw new Error('range select not rendered')
+  await act(async () => {
+    range.value = range.options[range.options.length - 1].value
+    range.dispatchEvent(new Event('change', { bubbles: true }))
+  })
+
+  expect(opening?.closed).toBe(true)
+  expect(FakeEventSource.last).not.toBe(opening)
+  expect(fetchLogs).not.toHaveBeenCalled()
+})
+
+it('with auto-stream on, after the stream ended and was started again, a range picked while it opens reopens it', async () => {
+  const fetchLogs = vi.fn(async () => ({ app: '' }))
+  await renderViewer(fetchLogs, true)
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  await act(async () => FakeEventSource.last?.emit('end', {}))
+  const range = element.querySelector<HTMLSelectElement>('select')
+  if (!range) throw new Error('range select not rendered')
+  const pick = (index: number) => act(async () => {
+    range.value = range.options[index].value
+    range.dispatchEvent(new Event('change', { bubbles: true }))
+  })
+  await pick(range.options.length - 1)
+  await act(async () => button('Stream').click())
+  const opening = FakeEventSource.last
+
+  await pick(range.options.length - 2)
+
+  expect(opening?.closed).toBe(true)
+  expect(FakeEventSource.last).not.toBe(opening)
+})
+
+it('a range picked while a manually started stream opens does not cancel it', async () => {
+  const fetchLogs = vi.fn(async () => ({ app: '' }))
+  await renderViewer(fetchLogs, true)
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  await act(async () => button('Stop').click())
+  await act(async () => button('Stream').click())
+  const opening = FakeEventSource.last
+  const range = element.querySelector<HTMLSelectElement>('select')
+  if (!range) throw new Error('range select not rendered')
+
+  await act(async () => {
+    range.value = range.options[range.options.length - 1].value
+    range.dispatchEvent(new Event('change', { bubbles: true }))
+  })
+
+  expect(opening?.closed).toBe(false)
+})
+
+it('with auto-stream on, the open stream is not replaced by a snapshot', async () => {
+  const fetchLogs = vi.fn(async () => ({ app: '' }))
+  await renderViewer(fetchLogs, true)
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  expect(fetchLogs).not.toHaveBeenCalled()
+  expect(button('Stop')).toBeTruthy()
+})
+
+it('a Previous answer that arrives after the stream started does not cover it', async () => {
+  let reject: (err: Error) => void = () => {}
+  const fetchLogs = vi.fn((params: LogsFetchParams) =>
+    params.previous
+      ? new Promise<{ [container: string]: string }>((_, r) => { reject = r })
+      : Promise.resolve({ app: '' }))
+  await renderViewer(fetchLogs)
+  await act(async () => previousCheckbox().click())
+  await act(async () => button('Stream').click())
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  await act(async () => FakeEventSource.last?.emit('log', { timestamp: '2026-10-13T10:00:00Z', content: 'live line', container: 'app' }))
+  // Appends are batched to the next animation frame.
+  await act(async () => { await new Promise(resolve => requestAnimationFrame(() => resolve(null))) })
+  await act(async () => reject(new ApiError(NO_EARLIER_RUN, { error: NO_EARLIER_RUN, error_code: 'no_previous_run' })))
+
+  expect(element.textContent).not.toContain(NO_EARLIER_RUN)
+  // The live line is still in the buffer: the level chips count it.
+  expect(element.textContent).toContain('OTHER 1')
+})
+
+it('a Previous answer replaces an earlier stream failure', async () => {
+  const fetchLogs = vi.fn(async (params: LogsFetchParams) => {
+    if (params.previous) throw new ApiError(NO_EARLIER_RUN, { error: NO_EARLIER_RUN, error_code: 'no_previous_run' })
+    return { app: '' }
+  })
+  await renderViewer(fetchLogs)
+  await act(async () => button('Stream').click())
+  await act(async () => FakeEventSource.last?.emit('error', { error: 'stream dropped' }))
+  expect(element.textContent).toContain('stream dropped')
+
+  await act(async () => previousCheckbox().click())
+  expect(element.textContent).toContain(NO_EARLIER_RUN)
+  expect(element.textContent).not.toContain('stream dropped')
+})
+
+it('shows a Kubernetes answer in the empty-pane style, not as an error', async () => {
+  await renderViewer(async () => { throw new ApiError(NO_EARLIER_RUN, { error: NO_EARLIER_RUN, error_code: 'no_previous_run' }) })
+  expect(element.textContent).toContain(NO_EARLIER_RUN)
+  expect(messageClass(NO_EARLIER_RUN)).not.toMatch(/text-red/)
+})
+
+it('shows the live stream\'s Kubernetes answer in the empty-pane style, and a stream failure as an error', async () => {
+  const unavailable = 'Kubernetes did not return this container\'s logs'
+  await renderViewer(async () => ({ app: '' }))
+  await act(async () => button('Stream').click())
+  await act(async () => FakeEventSource.last?.emit('error', { error: unavailable, error_code: 'logs_unavailable' }))
+  expect(messageClass(unavailable)).not.toMatch(/text-red/)
+
+  await act(async () => button('Stream').click())
+  await act(async () => FakeEventSource.last?.emit('error', { error: 'stream dropped' }))
+  expect(messageClass('stream dropped')).toMatch(/text-red/)
+})
+
+it('a snapshot load replaces an ended stream\'s answer even when it succeeds empty', async () => {
+  const unavailable = 'Kubernetes did not return this container\'s logs'
+  await renderViewer(async () => ({ app: '' }))
+  await act(async () => button('Stream').click())
+  await act(async () => FakeEventSource.last?.emit('error', { error: unavailable, error_code: 'logs_unavailable' }))
+  expect(element.textContent).toContain(unavailable)
+
+  await act(async () => previousCheckbox().click())
+  expect(element.textContent).not.toContain(unavailable)
+})
+
+it('still shows a Radar failure as an error', async () => {
+  const failure = 'Failed to fetch logs: connection refused'
+  await renderViewer(async () => { throw new ApiError(failure, { error: failure }) })
+  expect(messageClass(failure)).toMatch(/text-red/)
+})

package/src/components/logs/LogsViewer.tsx

@@ -40,6 +40,22 @@ export interface LogsViewerProps {
   autoStream?: boolean
 }
 
+// Kubernetes' answers that there are no logs to show, such as "no earlier run".
+// They describe the pod, not a failure in Radar, so they are shown like an
+// empty pane rather than as an error.
+const CLUSTER_ANSWER_CODES = new Set(['no_previous_run', 'logs_unavailable'])
+
+function isClusterAnswerCode(code: unknown): boolean {
+  return typeof code === 'string' && CLUSTER_ANSWER_CODES.has(code)
+}
+
+function clusterAnswerOf(err: unknown): string | null {
+  if (!(err instanceof Error) || !('data' in err)) return null
+  const { data } = err
+  if (typeof data !== 'object' || data === null || !('error_code' in data)) return null
+  return isClusterAnswerCode(data.error_code) ? err.message : null
+}
+
 export function LogsViewer({
   namespace: _namespace,
   podName,
@@ -55,13 +71,17 @@ export function LogsViewer({
   const [selectedContainer, setSelectedContainer] = useState(initialContainer || containers[0] || '')
   const [isLoading, setIsLoading] = useState(false)
   const [fetchError, setFetchError] = useState<string | null>(null)
+  const [emptyMessage, setEmptyMessage] = useState<string | null>(null)
   const [logRange, setLogRange] = useState('500')
   const [showPrevious, setShowPrevious] = useState(false)
   const { showError, showSuccess } = useToast()
 
   const { tailLines, sinceSeconds } = parseLogRange(logRange)
-  const { entries, append, set, clear } = useLogBuffer()
-  const { isStreaming, streamError, connecting, startStreaming, stopStreaming } = useLogStream()
+  const { entries, isFollowing, pendingLineCount, retainedLineCount, missingLineCount, getRetainedEntries, setFollowing, append, set, clear } = useLogBuffer()
+  const { isStreaming, streamError, streamErrorCode, connecting, startStreaming, stopStreaming } = useLogStream()
+  const selectionKey = JSON.stringify([_namespace, podName, selectedContainer, logRange])
+  // Identify the selection that supplied the buffered snapshot or stream.
+  const bufferSelectionRef = useRef<{ key: string; previous: boolean } | null>(null)
 
   const willAutoStream = autoStream && !!createStream
   // Tracks the container we've already auto-started for, so re-renders don't
@@ -69,33 +89,63 @@ export function LogsViewer({
   const autoStartedForRef = useRef<string | null>(null)
   // Once the user explicitly Stops, don't auto-resume for this viewer's lifetime.
   const userStoppedRef = useRef(false)
+  // Set when starting a stream unticks Previous, so that change does not also
+  // load a snapshot over the stream.
+  const skipSnapshotRef = useRef(false)
+  // Numbers each snapshot load; a load superseded by a newer one or by a
+  // stream start must not write over what replaced it.
+  const loadSeqRef = useRef(0)
+  // Whether a stream is open or opening, read where its end must not itself
+  // trigger anything.
+  const streamOpenRef = useRef(false)
+  useEffect(() => { streamOpenRef.current = isStreaming || connecting }, [isStreaming, connecting])
 
   const loadLogs = useCallback(async () => {
     if (!selectedContainer) return
+    const seq = ++loadSeqRef.current
+    // The snapshot now owns the pane, so an ended stream's answer or failure
+    // must not outlive it. A stream still open or opening is left alone.
+    if (!streamOpenRef.current) stopStreaming()
     setIsLoading(true)
     setFetchError(null)
+    setEmptyMessage(null)
     try {
       const data = await fetchLogs({ container: selectedContainer, tailLines, sinceSeconds, previous: showPrevious })
+      if (seq !== loadSeqRef.current) return
+      bufferSelectionRef.current = { key: selectionKey, previous: showPrevious }
       const logText = data[selectedContainer] ?? Object.values(data)[0] ?? ''
       set(logText.split('\n').filter(Boolean).map(line => {
         const { timestamp, content } = parseLogLine(line)
         return { timestamp, content, container: selectedContainer }
       }))
     } catch (err) {
+      if (seq !== loadSeqRef.current) return
+      const answer = clusterAnswerOf(err)
+      if (answer) {
+        set([])
+        setEmptyMessage(answer)
+        return
+      }
       console.error('Failed to fetch logs:', err)
+      if (bufferSelectionRef.current?.key !== selectionKey || bufferSelectionRef.current.previous !== showPrevious) set([])
       setFetchError(err instanceof Error ? err.message : 'Failed to fetch logs')
     } finally {
-      setIsLoading(false)
+      if (seq === loadSeqRef.current) setIsLoading(false)
     }
-  }, [selectedContainer, tailLines, sinceSeconds, showPrevious, fetchLogs, set])
+  }, [selectedContainer, tailLines, sinceSeconds, showPrevious, fetchLogs, set, stopStreaming, selectionKey])
 
   // When auto-streaming the stream supplies the initial tail, so the static
   // snapshot fetch is skipped to avoid a redundant request and a flash of
   // snapshot content before the stream takes over. If the user has Stopped we
   // won't auto-start, so fall back to the snapshot — otherwise a container
-  // switch would keep showing the previous container's lines.
+  // switch would keep showing the previous container's lines. Once the stream
+  // has ended by itself, Previous and the range load a snapshot too.
   useEffect(() => {
-    if (!willAutoStream || userStoppedRef.current) loadLogs()
+    if (skipSnapshotRef.current) {
+      skipSnapshotRef.current = false
+      return
+    }
+    if (!willAutoStream || userStoppedRef.current || !streamOpenRef.current) loadLogs()
   }, [loadLogs, willAutoStream])
   useEffect(() => { stopStreaming() }, [selectedContainer, stopStreaming])
 
@@ -109,10 +159,23 @@ export function LogsViewer({
 
   const handleStartStreaming = useCallback(() => {
     if (!createStream) return
+    // The stream always shows the current run, so starting one leaves the
+    // Previous view without loading a snapshot over the stream. The updater
+    // reads Previous so this callback does not depend on it: a new identity
+    // would re-run the auto-start effect and reopen the stream.
+    setShowPrevious(previous => {
+      if (previous) skipSnapshotRef.current = true
+      return false
+    })
+    loadSeqRef.current++
+    setIsLoading(false)
+    setFetchError(null)
+    setEmptyMessage(null)
     // The stream replays the last N lines (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).
     clear()
+    bufferSelectionRef.current = { key: selectionKey, previous: false }
     startStreaming(
       () => createStream({ container: selectedContainer, tailLines: 100, sinceSeconds }),
       {
@@ -124,7 +187,7 @@ export function LogsViewer({
       },
       'Log stream connection failed',
     )
-  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append, clear])
+  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append, clear, selectionKey])
 
   const handleStopStreaming = useCallback(() => {
     userStoppedRef.current = true
@@ -134,13 +197,15 @@ export function LogsViewer({
   useEffect(() => {
     if (!willAutoStream || !selectedContainer) return
     if (userStoppedRef.current) return
-    if (autoStartedForRef.current === selectedContainer) return
-    autoStartedForRef.current = selectedContainer
-    handleStartStreaming()
+    if (autoStartedForRef.current !== selectedContainer) {
+      autoStartedForRef.current = selectedContainer
+      handleStartStreaming()
+    }
     // Reset the arm latch on teardown so a re-run re-streams — without this,
     // React Strict Mode's mount→unmount→mount closes the stream but the latch
-    // stays set, leaving the viewer static.
-    return () => { autoStartedForRef.current = null }
+    // stays set, leaving the viewer static. Only while a stream is open: one
+    // that ended by itself stays ended, and a range change loads a snapshot.
+    return () => { if (streamOpenRef.current) autoStartedForRef.current = null }
   }, [willAutoStream, selectedContainer, handleStartStreaming])
 
   const downloadLogs = useCallback(({ content, mime, extension }: LogExportPayload) => {
@@ -179,21 +244,34 @@ export function LogsViewer({
   // While the auto-stream is opening (before it first settles), show the
   // loading state rather than the empty-logs placeholder.
   const isConnecting = willAutoStream && connecting && entries.length === 0
+  const streamAnswer = isClusterAnswerCode(streamErrorCode) ? streamError : null
 
   return (
+    <div className="flex h-full min-h-0 flex-col">
+    {(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={entries}
+      isFollowing={isFollowing}
+      onFollowingChange={setFollowing}
+      pendingLineCount={pendingLineCount}
+      retainedLineCount={retainedLineCount}
+      missingLineCount={missingLineCount}
+      getRetainedEntries={getRetainedEntries}
       isLoading={isLoading || isConnecting}
-      errorMessage={fetchError || (entries.length === 0 ? streamError : null)}
+      errorMessage={entries.length === 0 ? fetchError || (!emptyMessage && !streamAnswer ? streamError : null) : null}
       isStreaming={isStreaming}
       onStartStream={createStream ? handleStartStreaming : undefined}
       onStopStream={handleStopStreaming}
       onRefresh={loadLogs}
       onDownload={downloadLogs}
       onClear={clear}
+      emptyMessage={emptyMessage ?? streamAnswer ?? undefined}
       toolbarExtra={renderToolbarExtra}
       forceDark={forceDark}
       defaultDark={defaultDark}
     />
+    </div>
+    </div>
   )
 }

package/src/components/logs/StructuredLogLine.test.tsx

@@ -0,0 +1,76 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { createRoot } from 'react-dom/client'
+import { describe, expect, it, vi } from 'vitest'
+import { StructuredLogLine } from './StructuredLogLine'
+
+const render = (content: string) => renderToStaticMarkup(<StructuredLogLine content={content} level="info" wordWrap={false} />)
+
+describe('StructuredLogLine summary', () => {
+  it('shows a CloudNativePG PostgreSQL record by its own message and severity', () => {
+    const html = render(
+      JSON.stringify({
+        level: 'info',
+        logger: 'postgres',
+        msg: 'record',
+        record: { error_severity: 'FATAL', message: 'terminating connection due to administrator command' },
+      }),
+    )
+    expect(html).toContain('terminating connection due to administrator command')
+    expect(html).toContain('FATAL')
+    expect(html).not.toContain('>record<')
+  })
+
+  it('keeps msg for ordinary structured lines', () => {
+    const html = render(JSON.stringify({ level: 'info', msg: 'Fencing status changed', record: 'not an object' }))
+    expect(html).toContain('Fencing status changed')
+  })
+
+  it.each([
+    { msg: 'record' },
+    { logger: 'worker', msg: 'record' },
+    { logger: 'postgres', msg: 'wrapper message' },
+  ])('keeps unrelated record fields out of the summary: %j', (fields) => {
+    const html = render(JSON.stringify({ level: 'info', ...fields, record: { error_severity: 'FATAL', message: 'unrelated nested text' } }))
+    expect(html).toContain(`>${fields.msg}<`)
+    expect(html).toContain('INFO')
+    expect(html).not.toContain('unrelated nested text')
+    expect(html).not.toContain('FATAL')
+  })
+
+  it('requires PostgreSQL record evidence before selecting a nested message', () => {
+    const html = render(JSON.stringify({ level: 'info', logger: 'postgres', msg: 'record', record: { message: 'unverified nested text' } }))
+    expect(html).toContain('>record<')
+    expect(html).not.toContain('unverified nested text')
+  })
+})
+
+it.each([false, true])('keeps annotations intact with word wrapping, expanded=%s', (expanded) => {
+  const html = renderToStaticMarkup(<StructuredLogLine content={JSON.stringify({ level: 'info', msg: 'normal words', token: 'x'.repeat(400) })} level="info" wordWrap defaultExpanded={expanded} />)
+  expect(html).toMatch(/inline-block whitespace-nowrap[^>]*>\{3 fields\}/)
+  expect(html).toContain('[overflow-wrap:anywhere]')
+  expect(html).not.toContain('break-all')
+})
+
+it('filters expanded strings, numbers and booleans by their displayed value', () => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  const filter = vi.fn()
+  const message = 'true null 123 "quoted"\nnext'
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  try {
+    act(() => root.render(<StructuredLogLine content={JSON.stringify({ msg: message, number: -12.5, ready: true, empty: null, html: '<script>unsafe</script>' })} level="info" wordWrap defaultExpanded onFilterValue={filter} />))
+    const buttons = [...host.querySelectorAll('button')]
+    for (const value of [message, '-12.5', 'true', '<script>unsafe</script>']) {
+      const button = buttons.find((button) => button.getAttribute('aria-label') === `Filter to lines containing ${value}`)
+      expect(button).toBeDefined()
+      act(() => button!.click())
+      expect(filter).toHaveBeenLastCalledWith(value)
+    }
+    expect(host.querySelector('script')).toBeNull()
+    expect(buttons.some((button) => button.getAttribute('aria-label') === 'Filter to lines containing null')).toBe(false)
+  } finally {
+    act(() => root.unmount())
+  }
+})