@skyhook-io/k8s-ui 1.17.1 → 1.18.1

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

@@ -29,6 +29,23 @@ class ApiError extends Error {
 
 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(() => {
@@ -43,16 +60,16 @@ afterEach(async () => {
   vi.unstubAllGlobals()
 })
 
-async function renderViewer(fetchLogs: (params: LogsFetchParams) => Promise<{ [container: string]: string }>, autoStream = false) {
+async function renderViewer(fetchLogs: (params: LogsFetchParams) => Promise<{ [container: string]: string }>, autoStream = false, containers = ['app'], podName = 'web-0') {
   await act(async () =>
     root.render(
       <ToastProvider>
         <LogsViewer
           namespace="default"
-          podName="web-0"
-          containers={['app']}
+          podName={podName}
+          containers={containers}
           fetchLogs={fetchLogs}
-          createStream={() => new EventSource('/stream')}
+          createStream={() => new EventSource(`/pods/default/${podName}/logs/stream`)}
           autoStream={autoStream}
         />
       </ToastProvider>,
@@ -66,6 +83,67 @@ function previousCheckbox(): HTMLInputElement {
   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`)
@@ -156,62 +234,6 @@ it('with auto-stream on, a time range picked after the stream ended loads it ins
   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)
@@ -289,3 +311,104 @@ it('still shows a Radar failure as an error', async () => {
   await renderViewer(async () => { throw new ApiError(failure, { error: failure }) })
   expect(messageClass(failure)).toMatch(/text-red/)
 })
+
+function rangeSelect(): HTMLSelectElement {
+  const range = element.querySelector<HTMLSelectElement>('select')
+  if (!range) throw new Error('range select not rendered')
+  return range
+}
+
+const nextFrame = () => act(async () => { await new Promise(resolve => requestAnimationFrame(() => resolve(null))) })
+
+it('opening another pod with the same container name streams it, even after the first pod\'s stream ended', async () => {
+  const fetchLogs = vi.fn(async () => ({ app: '' }))
+  await renderViewer(fetchLogs, true, ['app'], 'web-0')
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  await act(async () => FakeEventSource.last?.emit('end', {}))
+  const ended = FakeEventSource.last
+
+  await renderViewer(fetchLogs, true, ['app'], 'web-1')
+
+  expect(FakeEventSource.last).not.toBe(ended)
+  expect(FakeEventSource.last?.url).toBe('/pods/default/web-1/logs/stream')
+  expect(fetchLogs).not.toHaveBeenCalled()
+})
+
+it('a manual Stop on one pod does not stop the next pod from streaming', async () => {
+  const fetchLogs = vi.fn(async () => ({ app: '' }))
+  await renderViewer(fetchLogs, true, ['app'], 'web-0')
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  await act(async () => button('Stop').click())
+
+  await renderViewer(fetchLogs, true, ['app'], 'web-1')
+
+  expect(FakeEventSource.last?.url).toBe('/pods/default/web-1/logs/stream')
+})
+
+it('Previous and the range are locked while an auto-stream opens', async () => {
+  await renderViewer(async () => ({ app: '' }), true)
+  expect(previousCheckbox().disabled).toBe(true)
+  expect(rangeSelect().disabled).toBe(true)
+
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  await act(async () => FakeEventSource.last?.emit('end', {}))
+  expect(previousCheckbox().disabled).toBe(false)
+  expect(rangeSelect().disabled).toBe(false)
+})
+
+it('Previous and the range are locked while a manually started stream opens', async () => {
+  await renderViewer(async () => ({ app: '' }))
+  expect(previousCheckbox().disabled).toBe(false)
+
+  await act(async () => button('Stream').click())
+
+  expect(previousCheckbox().disabled).toBe(true)
+  expect(rangeSelect().disabled).toBe(true)
+})
+
+it('a stream that is still opening can be stopped, which unlocks Previous', async () => {
+  await renderViewer(async () => ({ app: '' }))
+  await act(async () => button('Stream').click())
+  const opening = FakeEventSource.last
+
+  await act(async () => button('Stop').click())
+
+  expect(opening?.closed).toBe(true)
+  expect(previousCheckbox().disabled).toBe(false)
+  expect(button('Stream')).toBeTruthy()
+})
+
+it('a stream failure after lines arrived is shown above them', async () => {
+  await renderViewer(async () => ({ app: '' }))
+  await act(async () => button('Stream').click())
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  await act(async () => FakeEventSource.last?.emit('log', { timestamp: '2026-10-14T10:00:00Z', content: 'live line', container: 'app' }))
+  await nextFrame()
+  await act(async () => FakeEventSource.last?.emit('error', { error: 'Read error: unexpected EOF' }))
+
+  expect(element.querySelector('[role="alert"]')?.textContent).toBe('Read error: unexpected EOF · Previously loaded logs remain below.')
+  expect(element.textContent).toContain('OTHER 1')
+})
+
+const NOT_STARTED = 'This container has not started yet, so it has no logs. Kubernetes reports ContainerCreating.'
+
+it('shows a container that has not started in the empty-pane style', async () => {
+  await renderViewer(async () => { throw new ApiError(NOT_STARTED, { error: NOT_STARTED, error_code: 'container_not_started' }) })
+  expect(messageClass(NOT_STARTED)).not.toMatch(/text-red/)
+})
+
+it('shows what the live stream is waiting for, and drops it once lines arrive', async () => {
+  const waiting = `${NOT_STARTED} Logs will show here once it starts.`
+  await renderViewer(async () => ({ app: '' }), true)
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  await act(async () => FakeEventSource.last?.emit('notice', { notice: waiting, notice_code: 'container_not_started' }))
+  expect(messageClass(waiting)).not.toMatch(/text-red/)
+  expect(button('Stop')).toBeTruthy()
+
+  await act(async () => FakeEventSource.last?.emit('notice', { notice: '' }))
+  await act(async () => FakeEventSource.last?.emit('log', { timestamp: '2026-10-14T10:00:00Z', content: 'started', container: 'app' }))
+  await nextFrame()
+
+  expect(element.textContent).not.toContain(waiting)
+  expect(element.textContent).toContain('OTHER 1')
+})

package/src/components/logs/LogsViewer.tsx

@@ -43,7 +43,7 @@ export interface LogsViewerProps {
 // 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'])
+const CLUSTER_ANSWER_CODES = new Set(['no_previous_run', 'logs_unavailable', 'container_not_started'])
 
 function isClusterAnswerCode(code: unknown): boolean {
   return typeof code === 'string' && CLUSTER_ANSWER_CODES.has(code)
@@ -56,7 +56,14 @@ function clusterAnswerOf(err: unknown): string | null {
   return isClusterAnswerCode(data.error_code) ? err.message : null
 }
 
-export function LogsViewer({
+// Keyed by pod: everything the viewer remembers (the container, Previous, the
+// auto-start latch, a manual Stop) belongs to one pod, and a host that swaps
+// the pod without remounting would carry it over to the next one.
+export function LogsViewer(props: LogsViewerProps) {
+  return <PodLogsViewer key={`${props.namespace}/${props.podName}`} {...props} />
+}
+
+function PodLogsViewer({
   namespace: _namespace,
   podName,
   containers,
@@ -74,11 +81,16 @@ export function LogsViewer({
   const [emptyMessage, setEmptyMessage] = useState<string | null>(null)
   const [logRange, setLogRange] = useState('500')
   const [showPrevious, setShowPrevious] = useState(false)
+  // What an open stream says it is waiting for, e.g. a container to start.
+  const [streamNotice, setStreamNotice] = useState<string | null>(null)
   const { showError, showSuccess } = useToast()
 
   const { tailLines, sinceSeconds } = parseLogRange(logRange)
-  const { entries, append, set, clear } = useLogBuffer()
+  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
@@ -106,9 +118,11 @@ export function LogsViewer({
     setIsLoading(true)
     setFetchError(null)
     setEmptyMessage(null)
+    setStreamNotice(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)
@@ -123,11 +137,12 @@ export function LogsViewer({
         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 {
       if (seq === loadSeqRef.current) setIsLoading(false)
     }
-  }, [selectedContainer, tailLines, sinceSeconds, showPrevious, fetchLogs, set, stopStreaming])
+  }, [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
@@ -166,10 +181,12 @@ export function LogsViewer({
     setIsLoading(false)
     setFetchError(null)
     setEmptyMessage(null)
+    setStreamNotice(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 }),
       {
@@ -178,13 +195,18 @@ export function LogsViewer({
           content: data.content || '',
           container: data.container || selectedContainer,
         }),
+        onNotice: (data: unknown) => {
+          const notice = typeof data === 'object' && data !== null && 'notice' in data && typeof data.notice === 'string' ? data.notice : ''
+          setStreamNotice(notice || null)
+        },
       },
       'Log stream connection failed',
     )
-  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append, clear])
+  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append, clear, selectionKey])
 
   const handleStopStreaming = useCallback(() => {
     userStoppedRef.current = true
+    setStreamNotice(null)
     stopStreaming()
   }, [stopStreaming])
 
@@ -214,24 +236,28 @@ export function LogsViewer({
     }
   }, [podName, selectedContainer, overrideDownload, showError, showSuccess])
 
+  // Previous and the range describe what a snapshot loads, so they stay
+  // locked from the moment a stream starts opening, not only once it is open.
+  const streamBusy = isStreaming || connecting
+
   const renderToolbarExtra = ({ isDark, palette }: { isDark: boolean; palette: LogPalette }) => (
     <>
       <ContainerSelect containers={containers} value={selectedContainer} onChange={setSelectedContainer} isDark={isDark} />
 
-      <Tooltip content={isStreaming ? 'Stop streaming to view the previous instance' : "Show logs from the pod's previous instance (if it was restarted). Useful for troubleshooting crashed containers."} position="bottom">
-        <label className={`flex items-center gap-1.5 text-xs ${palette.textSecondary} ${isStreaming ? 'opacity-50 cursor-not-allowed' : ''}`}>
+      <Tooltip content={streamBusy ? 'Stop streaming to view the previous instance' : "Show logs from the pod's previous instance (if it was restarted). Useful for troubleshooting crashed containers."} position="bottom">
+        <label className={`flex items-center gap-1.5 text-xs ${palette.textSecondary} ${streamBusy ? 'opacity-50 cursor-not-allowed' : ''}`}>
           <input
             type="checkbox"
             checked={showPrevious}
             onChange={(e) => setShowPrevious(e.target.checked)}
-            disabled={isStreaming}
+            disabled={streamBusy}
             className={`w-3 h-3 rounded ${palette.borderLight} ${palette.elevatedBg} text-blue-500 focus:ring-blue-500 focus:ring-offset-0`}
           />
           <span className={`border-b border-dotted ${isDark ? 'border-slate-500' : 'border-slate-400'}`}>Previous</span>
         </label>
       </Tooltip>
 
-      <LogRangeSelect value={logRange} onChange={setLogRange} isDark={isDark} disabled={isStreaming} />
+      <LogRangeSelect value={logRange} onChange={setLogRange} isDark={isDark} disabled={streamBusy} />
     </>
   )
 
@@ -241,20 +267,31 @@ export function LogsViewer({
   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 && !emptyMessage && !streamAnswer ? streamError : null)}
-      isStreaming={isStreaming}
+      errorMessage={entries.length === 0 ? fetchError || (!emptyMessage && !streamAnswer ? streamError : null) : null}
+      isStreaming={streamBusy}
       onStartStream={createStream ? handleStartStreaming : undefined}
       onStopStream={handleStopStreaming}
       onRefresh={loadLogs}
       onDownload={downloadLogs}
       onClear={clear}
-      emptyMessage={emptyMessage ?? streamAnswer ?? undefined}
+      emptyMessage={emptyMessage ?? streamAnswer ?? streamNotice ?? undefined}
       toolbarExtra={renderToolbarExtra}
       forceDark={forceDark}
       defaultDark={defaultDark}
     />
+    </div>
+    </div>
   )
 }

package/src/components/logs/StructuredLogLine.tsx

@@ -113,7 +113,7 @@ function FilterableValue({
       <button
         type="button"
         onClick={(e) => { e.stopPropagation(); onFilter(value) }}
-        className={`opacity-0 group-hover/flt:opacity-100 transition-opacity ${palette.textTertiary} ${palette.hoverText} px-0.5`}
+        className={`opacity-0 group-hover/flt:opacity-100 focus-visible:opacity-100 transition-opacity ${palette.textTertiary} ${palette.hoverText} px-0.5`}
         title={`Filter to lines containing "${value}"`}
         aria-label={`Filter to lines containing ${value}`}
       >

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -97,7 +97,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
   const { showError, showSuccess } = useToast()
 
   const { tailLines, sinceSeconds } = parseLogRange(logRange)
-  const { entries, append, set, clear } = useLogBuffer()
+  const { entries, isFollowing, pendingLineCount, retainedLineCount, missingLineCount, getRetainedEntries, setFollowing, append, set, clear } = useLogBuffer()
   const { isStreaming, streamError, connecting, startStreaming, stopStreaming } = useLogStream()
 
   const willAutoStream = autoStream && !!createStream
@@ -430,6 +430,12 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
     {(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}
+      isFollowing={isFollowing}
+      onFollowingChange={setFollowing}
+      pendingLineCount={pendingLineCount}
+      retainedLineCount={retainedLineCount}
+      missingLineCount={missingLineCount}
+      getRetainedEntries={getRetainedEntries}
       allEntries={entries}
       isLoading={isLoading || isConnecting}
       isStreaming={isStreaming}

package/src/components/logs/useLogBuffer.reading.test.tsx

@@ -0,0 +1,149 @@
+// @vitest-environment jsdom
+import { act, StrictMode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { useLogBuffer } from './useLogBuffer'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+
+let root: Root
+let element: HTMLDivElement
+let current: ReturnType<typeof useLogBuffer> | undefined
+let flush: FrameRequestCallback | undefined
+const buffer = () => {
+  if (!current) throw new Error('Buffer not mounted')
+  return current
+}
+function Harness() {
+  current = useLogBuffer()
+  return null
+}
+const lines = (count: number) => Array.from({ length: count }, (_, i) => ({ content: `INFO line ${i}`, container: 'app', timestamp: '' }))
+async function append(count: number) {
+  await act(async () => {
+    buffer().appendBatch(lines(count))
+    flush?.(0)
+  })
+}
+
+beforeEach(async () => {
+  vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => { flush = callback; return 1 })
+  vi.stubGlobal('cancelAnimationFrame', () => { flush = undefined })
+  element = document.createElement('div')
+  root = createRoot(element)
+  await act(async () => root.render(<StrictMode><Harness /></StrictMode>))
+})
+afterEach(async () => {
+  await act(async () => root.unmount())
+  current = undefined
+  flush = undefined
+  vi.unstubAllGlobals()
+})
+
+describe('reading a live log buffer', () => {
+  it('appends below the reader without replacing existing records before rollover', async () => {
+    await append(100)
+    const anchor = buffer().entries[50]
+    await act(async () => buffer().setFollowing(false))
+    await append(100)
+    expect(buffer().entries).toHaveLength(200)
+    expect(buffer().entries[50]).toBe(anchor)
+    expect(buffer().isFollowing).toBe(false)
+    expect(buffer().pendingLineCount).toBe(0)
+  })
+
+  it('keeps the reading window through repeated eviction and resumes at the newest records', async () => {
+    await append(10_000)
+    await act(async () => buffer().setFollowing(false))
+    const reading = buffer().entries
+    await append(500)
+    await append(20_000)
+    expect(buffer().entries).toBe(reading)
+    expect(buffer().entries[50]).toBe(reading[50])
+    expect(buffer().pendingLineCount).toBe(20_500)
+    expect(buffer().isFollowing).toBe(false)
+    await act(async () => buffer().setFollowing(true))
+    expect(buffer().entries).toHaveLength(10_000)
+    expect(buffer().entries.at(-1)?.id).toBe(30_499)
+    expect(buffer().pendingLineCount).toBe(0)
+    expect(buffer().isFollowing).toBe(true)
+  })
+
+  it('still bounds the buffer while following', async () => {
+    await append(10_500)
+    expect(buffer().entries).toHaveLength(10_000)
+    expect(buffer().entries[0].id).toBe(500)
+    expect(buffer().isFollowing).toBe(true)
+  })
+
+  it('releases the saved history on refresh and clear', async () => {
+    await append(10_000)
+    await act(async () => buffer().setFollowing(false))
+    await append(100)
+    await act(async () => buffer().set(lines(5)))
+    expect(buffer().entries).toHaveLength(5)
+    expect(buffer().isFollowing).toBe(true)
+    await act(async () => buffer().setFollowing(false))
+    await act(async () => buffer().clear())
+    expect(buffer().entries).toHaveLength(0)
+    expect(buffer().pendingLineCount).toBe(0)
+    expect(buffer().isFollowing).toBe(true)
+  })
+})
+
+it('exports overlapping windows once and reports expired history after they separate', async () => {
+  await append(10_000)
+  await act(async () => buffer().setFollowing(false))
+  await append(500)
+  expect(buffer().retainedLineCount).toBe(10_500)
+  expect(buffer().missingLineCount).toBe(0)
+  expect(buffer().getRetainedEntries().map(entry => entry.id)).toEqual(Array.from({ length: 10_500 }, (_, i) => i))
+  await append(10_000)
+  const retained = buffer().getRetainedEntries()
+  expect(buffer().retainedLineCount).toBe(20_000)
+  expect(buffer().missingLineCount).toBe(500)
+  expect(retained).toHaveLength(20_000)
+  expect(retained[9_999].id).toBe(9_999)
+  expect(retained[10_000].id).toBe(10_500)
+  expect(retained.at(-1)?.id).toBe(20_499)
+  await act(async () => buffer().setFollowing(true))
+  expect(buffer().retainedLineCount).toBe(10_000)
+  expect(buffer().missingLineCount).toBe(0)
+  await act(async () => buffer().clear())
+  expect(buffer().retainedLineCount).toBe(0)
+  expect(buffer().getRetainedEntries()).toEqual([])
+})
+
+it('keeps collecting the latest logs when animation frames stop running', async () => {
+  await act(async () => {
+    buffer().appendBatch(lines(10_000))
+  })
+  // No animation frame was delivered, as happens in a hidden tab.
+  expect(buffer().entries).toHaveLength(10_000)
+  await act(async () => buffer().setFollowing(false))
+  const saved = buffer().entries
+  await act(async () => buffer().appendBatch(lines(30_000)))
+  expect(buffer().entries).toBe(saved)
+  expect(buffer().pendingLineCount).toBe(30_000)
+  expect(buffer().getRetainedEntries().at(-1)?.id).toBe(39_999)
+  expect(buffer().retainedLineCount).toBe(20_000)
+  expect(buffer().missingLineCount).toBe(20_000)
+  await act(async () => buffer().appendBatch(lines(5)))
+  expect(buffer().pendingLineCount).toBe(30_000)
+  await act(async () => flush?.(0))
+  expect(buffer().pendingLineCount).toBe(30_005)
+  expect(buffer().getRetainedEntries().at(-1)?.id).toBe(40_004)
+  expect(buffer().missingLineCount).toBe(20_005)
+})
+
+it('does not count records from before an empty reset when pausing and receiving a large batch', async () => {
+  await append(25_000)
+  for (const reset of [() => buffer().clear(), () => buffer().set([])]) {
+    await act(async () => { reset(); buffer().setFollowing(false) })
+    await append(20_001)
+    expect(buffer().entries).toHaveLength(10_000)
+    expect(buffer().pendingLineCount).toBe(10_001)
+    expect(buffer().missingLineCount).toBe(1)
+    expect(buffer().retainedLineCount).toBe(20_000)
+  }
+})