@skyhook-io/k8s-ui 1.17.0 → 1.18.0

package/src/components/logs/StructuredLogLine.tsx

@@ -1,8 +1,8 @@
 import { useState, useMemo } from 'react'
 import { ChevronRight, ChevronDown, Filter } from 'lucide-react'
 import type { LogLevel } from './useLogBuffer'
-import { selectLevelField } from '../../utils/log-level'
-import { unescapeJsonStrings, parseLogfmt } from '../../utils/log-format'
+import { selectLevelField, selectPostgresRecord } from '../../utils/log-level'
+import { unescapeJsonStrings, parseLogfmt, tokenizeJson } from '../../utils/log-format'
 import { getLogPalette, getLogLevelColor, type LogPalette } from './log-palette'
 
 interface StructuredLogLineProps {
@@ -44,7 +44,7 @@ export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultE
 
   if (!parsed) {
     return (
-      <span className={`${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'} ${getLogLevelColor(level, isDark)}`}>
+      <span className={`${wordWrap ? 'whitespace-pre-wrap [overflow-wrap:anywhere]' : 'whitespace-pre'} ${getLogLevelColor(level, isDark)}`}>
         {content}
       </span>
     )
@@ -63,11 +63,11 @@ export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultE
         // Collapsed: entire summary line is clickable
         <span
           onClick={toggle}
-          className={`cursor-pointer ${palette.hoverSurface} rounded px-0.5 -ml-0.5 ${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}`}
+          className={`cursor-pointer ${palette.hoverSurface} rounded px-0.5 -ml-0.5 ${wordWrap ? 'whitespace-pre-wrap [overflow-wrap:anywhere]' : 'whitespace-pre'}`}
         >
           <span className="inline-flex items-center align-middle mr-0.5">{chevron}</span>
           <SummaryLine obj={parsed} level={level} palette={palette} />
-          <span className={`${palette.textTertiary} ml-1`}>{`{${fieldCount} fields}`}</span>
+          <span className={`${palette.textTertiary} ml-1 inline-block whitespace-nowrap`}>{`{${fieldCount} fields}`}</span>
         </span>
       ) : (
         // Expanded: summary header is clickable to collapse, JSON content is selectable
@@ -78,9 +78,9 @@ export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultE
         >
           <span className="inline-flex items-center align-middle mr-0.5">{chevron}</span>
           <SummaryLine obj={parsed} level={level} palette={palette} />
-          <span className={`${palette.textTertiary} ml-1`}>{`{${fieldCount} fields}`}</span>
+          <span className={`${palette.textTertiary} ml-1 inline-block whitespace-nowrap`}>{`{${fieldCount} fields}`}</span>
         </span>
-        <span className={`block ml-4 ${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}`}>
+        <span className={`block ml-4 ${wordWrap ? 'whitespace-pre-wrap [overflow-wrap:anywhere]' : 'whitespace-pre'}`}>
           {isLogfmt ? (
             <ExpandedLogfmt obj={parsed} onFilterValue={onFilterValue} palette={palette} />
           ) : (
@@ -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}`}
       >
@@ -129,48 +129,40 @@ function FilterableValue({
  * and emits React nodes so the hover chip can be wired per value.
  */
 function JsonExpanded({ text, onFilterValue, palette }: { text: string; onFilterValue?: (v: string) => void; palette: LogPalette }) {
-  const tokenRe = /("(?:\\.|[^"\\])*")\s*:|("(?:\\.|[^"\\])*")|(-?\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|\b(true|false)\b|\b(null)\b/g
   const nodes: React.ReactNode[] = []
-  let lastIndex = 0
-  let match: RegExpExecArray | null
   let idx = 0
-  while ((match = tokenRe.exec(text)) !== null) {
-    if (match.index > lastIndex) {
-      nodes.push(<span key={`t${idx++}`}>{text.slice(lastIndex, match.index)}</span>)
-    }
-    const [, key, str, num, bool, nil] = match
-    if (key !== undefined) {
-      nodes.push(<span key={`k${idx++}`} style={{ color: palette.syntaxKey }}>{key}</span>)
+  for (const { type, value } of tokenizeJson(text)) {
+    if (type === 'key') {
+      nodes.push(<span key={`k${idx++}`} style={{ color: palette.syntaxKey }}>{value}</span>)
       nodes.push(<span key={`c${idx++}`}>:</span>)
-    } else if (str !== undefined) {
+    } else if (type === 'string') {
       // Unescape the quoted string for the filter value (users expect to filter on
       // the displayed string, not JSON-escaped bytes).
-      const inner = str.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\')
+      const inner = value.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\')
       nodes.push(
         <FilterableValue key={`s${idx++}`} value={inner} onFilter={onFilterValue} color={palette.syntaxString} palette={palette} />
       )
-    } else if (num !== undefined) {
+    } else if (type === 'number') {
       nodes.push(
-        <FilterableValue key={`n${idx++}`} value={num} onFilter={onFilterValue} color={palette.syntaxNumber} palette={palette} />
+        <FilterableValue key={`n${idx++}`} value={value} onFilter={onFilterValue} color={palette.syntaxNumber} palette={palette} />
       )
-    } else if (bool !== undefined) {
+    } else if (type === 'boolean') {
       nodes.push(
-        <FilterableValue key={`b${idx++}`} value={bool} onFilter={onFilterValue} color={palette.syntaxBoolean} palette={palette} />
+        <FilterableValue key={`b${idx++}`} value={value} onFilter={onFilterValue} color={palette.syntaxBoolean} palette={palette} />
       )
-    } else if (nil !== undefined) {
-      nodes.push(<span key={`z${idx++}`} style={{ color: palette.syntaxNull }}>{nil}</span>)
+    } else if (type === 'null') {
+      nodes.push(<span key={`z${idx++}`} style={{ color: palette.syntaxNull }}>{value}</span>)
+    } else {
+      nodes.push(<span key={`t${idx++}`}>{value}</span>)
     }
-    lastIndex = tokenRe.lastIndex
-  }
-  if (lastIndex < text.length) {
-    nodes.push(<span key={`t${idx++}`}>{text.slice(lastIndex)}</span>)
   }
   return <>{nodes}</>
 }
 
 function SummaryLine({ obj, level, palette }: { obj: Record<string, unknown>; level: LogLevel; palette: LogPalette }) {
   const lvl = selectLevelField(obj)?.raw
-  const msg = obj.msg ?? obj.message
+  const pgRecord = selectPostgresRecord(obj)
+  const msg = pgRecord?.record.message ?? obj.msg ?? obj.message
   const rawErr = obj.error ?? obj.err
   const err = typeof rawErr === 'string'
     ? rawErr

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

@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, it, vi } from 'vitest'
+import { WorkloadLogsViewer, type WorkloadLogsResult } from './WorkloadLogsViewer'
+vi.mock('../ui/Toast', () => ({ useToast: () => ({ showError: vi.fn(), showSuccess: vi.fn() }) }))
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+it('uses a host empty state and disables source controls until a source is read', async () => {
+  const host = document.createElement('div'); const root = createRoot(host)
+  let result: WorkloadLogsResult = { pods: [], logs: [], emptyMessage: 'No instance Pods yet' }
+  const stream = vi.fn()
+  const fetchAll = vi.fn(async () => result)
+  await act(async () => root.render(<WorkloadLogsViewer name="analytics" fetchAll={fetchAll} createStream={stream} disableSourceControlsWithoutSource emptySourceState={<><p>The first instance cannot start.</p><a href="?tab=overview">Overview’s problem</a></>} />))
+  expect(host.textContent).toContain('The first instance cannot start')
+  expect(host.querySelector('a')?.getAttribute('href')).toBe('?tab=overview')
+  expect(host.querySelector('fieldset')?.disabled).toBe(true)
+  expect([...host.querySelectorAll('select')].every((el) => el.matches(':disabled'))).toBe(true)
+  const streamButton = [...host.querySelectorAll<HTMLButtonElement>('button')].find((el) => el.textContent === 'Stream')!
+  expect(streamButton.disabled).toBe(true)
+  act(() => streamButton.click())
+  expect(stream).not.toHaveBeenCalled()
+  result = { pods: [{ name: 'analytics-1', containers: ['postgres'], ready: true }], logs: [] }
+  await act(async () => [...host.querySelectorAll<HTMLButtonElement>('button')].find((el) => el.querySelector('.lucide-rotate-ccw'))!.click())
+  expect(host.querySelector('fieldset')?.disabled).toBe(false)
+  expect(streamButton.disabled).toBe(false)
+  expect(host.textContent).not.toContain('The first instance cannot start')
+  await act(async () => root.unmount())
+})
+
+it('keeps streaming available for hosts that wait for Pods to appear', async () => {
+  const host = document.createElement('div'); const root = createRoot(host)
+  await act(async () => root.render(<WorkloadLogsViewer name="pending-job" fetchAll={async () => ({ pods: [], logs: [] })} createStream={vi.fn()} />))
+  expect([...host.querySelectorAll<HTMLButtonElement>('button')].find((el) => el.textContent === 'Stream')?.disabled).toBe(false)
+  expect(host.querySelector('fieldset')?.disabled).toBe(false)
+  await act(async () => root.unmount())
+})
+
+
+it('keeps the all-container choice available by default', async () => {
+  const host = document.createElement('div'); const root = createRoot(host)
+  const fetchAll = vi.fn(async () => ({ pods: [{ name: 'analytics-1', containers: ['postgres', 'plugin-barman-cloud'], ready: true }], logs: [] }))
+  await act(async () => root.render(<WorkloadLogsViewer name="analytics" fetchAll={fetchAll} />))
+  const select = host.querySelector<HTMLSelectElement>('select')!
+  expect([...select.options].map((option) => option.value)).toEqual(['', 'postgres', 'plugin-barman-cloud'])
+  expect(select.options[0].text).toBe('All containers')
+  expect(fetchAll).toHaveBeenCalledWith(expect.objectContaining({ container: undefined }))
+  await act(async () => root.unmount())
+})
+
+it('offers only named containers when the backend cannot read all containers', async () => {
+  const host = document.createElement('div'); const root = createRoot(host)
+  const fetchAll = vi.fn(async (_params: unknown) => ({ pods: [{ name: 'analytics-1', containers: ['postgres', 'plugin-barman-cloud'], ready: true }], logs: [] }))
+  await act(async () => root.render(<WorkloadLogsViewer name="analytics" fetchAll={fetchAll} initialContainer="postgres" allowAllContainers={false} />))
+  const select = host.querySelector<HTMLSelectElement>('select')!
+  expect([...select.options].map((option) => option.value)).toEqual(['postgres', 'plugin-barman-cloud'])
+  expect(host.textContent).not.toContain('All containers')
+  expect(select.value).toBe('postgres')
+  expect(fetchAll).toHaveBeenCalledWith(expect.objectContaining({ container: 'postgres' }))
+  await act(async () => {
+    select.value = 'plugin-barman-cloud'
+    select.dispatchEvent(new Event('change', { bubbles: true }))
+  })
+  expect(fetchAll).toHaveBeenLastCalledWith(expect.objectContaining({ container: 'plugin-barman-cloud' }))
+  await act(async () => root.unmount())
+})

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { Filter, ChevronDown } from 'lucide-react'
+import { useState, useEffect, useCallback, useMemo, useRef, type ReactNode } from 'react'
+import { Filter, ChevronDown, AlertTriangle } from 'lucide-react'
 import { parseLogRange } from '../../utils/log-format'
 import { triggerDownload } from '../../utils/download'
 import { useLogBuffer } from './useLogBuffer'
@@ -10,6 +10,7 @@ import type { LogExportPayload } from '../../utils/log-export'
 import type { LogPalette } from './log-palette'
 import type { WorkloadPodInfo } from '../../types'
 import { useToast } from '../ui/Toast'
+import { toneTextClass } from '../ui/status-tone'
 
 export interface WorkloadRawLog {
   pod: string
@@ -38,6 +39,8 @@ export interface WorkloadLogsResult {
 }
 
 export interface WorkloadLogsViewerProps {
+  /** Disable streaming and the source filters while no log source exists. Off by default: streams can wait for Pods to appear. */
+  disableSourceControlsWithoutSource?: boolean
   /** Workload name — used for the download filename */
   name: string
   /**
@@ -65,14 +68,20 @@ export interface WorkloadLogsViewerProps {
   autoStream?: boolean
   /** Pods selected when the pod list first loads; all pods when empty or none match. */
   initialPods?: string[]
+  /** Container selected on mount; all containers when unset. */
+  initialContainer?: string
+  /** Whether the backend supports reading all containers. Defaults to true; set initialContainer when false. */
+  allowAllContainers?: boolean
+  /** Rendered only when the loaded source list is empty. */
+  emptySourceState?: ReactNode
 }
 
-export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark, defaultDark, autoStream = false, initialPods }: WorkloadLogsViewerProps) {
+export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark, defaultDark, autoStream = false, initialPods, initialContainer, allowAllContainers = true, emptySourceState, disableSourceControlsWithoutSource = false }: WorkloadLogsViewerProps) {
   const initialSelection = (names: string[]) => {
     const wanted = names.filter((n) => initialPods?.includes(n))
     return new Set(wanted.length > 0 ? wanted : names)
   }
-  const [selectedContainer, setSelectedContainer] = useState<string>('')
+  const [selectedContainer, setSelectedContainer] = useState<string>(initialContainer ?? '')
   const [pods, setPods] = useState<WorkloadPodInfo[]>([])
   const [selectedPods, setSelectedPods] = useState<Set<string>>(new Set())
   const [isLoading, setIsLoading] = useState(false)
@@ -88,10 +97,11 @@ 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
+  const sourceUnavailable = disableSourceControlsWithoutSource && pods.length === 0
   // null sentinel so the initial selectedContainer ('' = all) still arms once.
   const autoStartedForRef = useRef<string | null>(null)
   const userStoppedRef = useRef(false)
@@ -317,10 +327,11 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
   const renderToolbarExtra = ({ isDark, palette }: { isDark: boolean; palette: LogPalette }) => (
     <>
       {/* Pod filter */}
+      <fieldset disabled={sourceUnavailable} className="flex items-center gap-2 disabled:opacity-50">
       <div className="relative">
         <button
           onClick={() => setShowPodFilter(v => !v)}
-          className={`flex items-center gap-1.5 px-2 py-1.5 text-xs rounded transition-colors ${
+          className={`flex items-center gap-1.5 px-2 py-1.5 text-xs rounded whitespace-nowrap transition-colors ${
             showPodFilter ? palette.toolbarActive : `${palette.elevatedBg} ${palette.textSecondary} ${palette.hoverBg}`
           }`}
         >
@@ -376,7 +387,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
         containers={allContainers}
         value={selectedContainer}
         onChange={setSelectedContainer}
-        includeAll
+        includeAll={allowAllContainers}
         isDark={isDark}
       />
 
@@ -386,8 +397,10 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
         lineOptions={[50, 100, 500, 1000]}
         tooltip="How many logs to load per pod — by line count or time range"
         isDark={isDark}
-        disabled={isStreaming}
+        disabled={isStreaming || sourceUnavailable}
+        disabledReason={sourceUnavailable ? 'No log source is available yet' : undefined}
       />
+      </fieldset>
     </>
   )
 
@@ -397,22 +410,44 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
 
   return (
     <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>}
+    {/* One status line. A notice says what the snapshot could not show, so it
+        stays marked; the capture time alone is quiet. */}
+    {(notice || capturedAt) && (
+      <div
+        role="status"
+        className={`flex shrink-0 flex-wrap items-baseline gap-x-2 border-b border-theme-border px-3 py-1 text-xs ${notice ? 'bg-theme-elevated text-theme-text-secondary' : 'text-theme-text-tertiary'}`}
+      >
+        {capturedAt && <span className="whitespace-nowrap">Snapshot {new Date(capturedAt).toLocaleTimeString()}</span>}
+        {capturedAt && notice && <span aria-hidden>·</span>}
+        {notice && (
+          <span className="inline-flex min-w-0 items-baseline gap-1.5">
+            <AlertTriangle className={`h-3 w-3 shrink-0 self-center ${toneTextClass('degraded')}`} aria-hidden />
+            <span>{notice}</span>
+          </span>
+        )}
+      </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}
+      isFollowing={isFollowing}
+      onFollowingChange={setFollowing}
+      pendingLineCount={pendingLineCount}
+      retainedLineCount={retainedLineCount}
+      missingLineCount={missingLineCount}
+      getRetainedEntries={getRetainedEntries}
       allEntries={entries}
       isLoading={isLoading || isConnecting}
       isStreaming={isStreaming}
       onStartStream={createStream ? handleStartStreaming : undefined}
+      sourceUnavailable={sourceUnavailable}
       onStopStream={handleStopStreaming}
       onRefresh={loadLogs}
       onDownload={downloadLogs}
       onClear={clear}
       toolbarExtra={renderToolbarExtra}
       showPodName
-      emptyMessage={emptyMessage || (pods.length === 0 ? 'No pods found' : 'No logs available')}
+      emptyMessage={pods.length === 0 && emptySourceState ? emptySourceState : emptyMessage || (pods.length === 0 ? 'No pods found' : 'No logs available')}
       emptyCommand={emptyCommand}
       errorMessage={entries.length === 0 ? fetchError || streamError : null}
       forceDark={forceDark}

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)
+  }
+})

package/src/components/logs/useLogBuffer.test.ts

@@ -14,4 +14,12 @@ describe('detectLogLevel with CloudNativePG records', () => {
     expect(detectLogLevel(JSON.stringify({ level: 'error', msg: 'request failed', record: { error_severity: 20 } }))).toBe('error')
     expect(detectLogLevel(JSON.stringify({ level: 'error', msg: 'x', record: { error_severity: 'minor' } }))).toBe('error')
   })
+
+  it.each([
+    { msg: 'record' },
+    { logger: 'worker', msg: 'record' },
+    { logger: 'postgres', msg: 'wrapper message' },
+  ])('does not override an unrelated workload severity: %j', (fields) => {
+    expect(detectLogLevel(JSON.stringify({ level: 'info', ...fields, record: { error_severity: 'FATAL', message: 'unrelated nested text' } }))).toBe('info')
+  })
 })

package/src/components/logs/useLogBuffer.ts

@@ -35,6 +35,12 @@ type RawLogEntry = Omit<LogEntry, 'id' | 'level' | 'levelSource' | 'isJson' | 'i
 
 interface UseLogBufferReturn {
   entries: LogEntry[]
+  isFollowing: boolean
+  retainedLineCount: number
+  missingLineCount: number
+  getRetainedEntries: () => LogEntry[]
+  pendingLineCount: number
+  setFollowing: (following: boolean) => void
   append: (entry: RawLogEntry) => void
   appendBatch: (entries: RawLogEntry[]) => void
   set: (entries: RawLogEntry[]) => void
@@ -42,7 +48,7 @@ interface UseLogBufferReturn {
 }
 
 export function useLogBuffer(): UseLogBufferReturn {
-  const [entries, setEntries] = useState<LogEntry[]>([])
+  const [buffer, setBuffer] = useState<{ latest: LogEntry[]; reading: LogEntry[] | null }>({ latest: [], reading: null })
   const idCounter = useRef(0)
   const pendingRef = useRef<RawLogEntry[]>([])
   const rafRef = useRef<number | null>(null)
@@ -65,30 +71,35 @@ export function useLogBuffer(): UseLogBufferReturn {
     const batch = pendingRef.current
     if (batch.length === 0) return
     pendingRef.current = []
-
-    setEntries(prev => {
-      const enriched = batch.map(enrichEntry)
-      const combined = [...prev, ...enriched]
-      if (combined.length > MAX_BUFFER_SIZE) {
-        return combined.slice(combined.length - MAX_BUFFER_SIZE)
-      }
-      return combined
+    const enriched = batch.map(enrichEntry)
+
+    setBuffer(prev => {
+      const combined = [...prev.latest, ...enriched]
+      const latest = combined.length > MAX_BUFFER_SIZE ? combined.slice(-MAX_BUFFER_SIZE) : combined
+      // Keep appending while the reader's window fits. Once eviction begins,
+      // retain that window rather than replacing the lines being read.
+      const reading = prev.reading === null ? null
+        : prev.reading === prev.latest && combined.length <= MAX_BUFFER_SIZE ? latest : prev.reading
+      return { latest, reading }
     })
   }, [enrichEntry])
 
   const append = useCallback((entry: RawLogEntry) => {
     pendingRef.current.push(entry)
+    // Hidden tabs can stop delivering animation frames while logs still arrive.
+    if (pendingRef.current.length >= MAX_BUFFER_SIZE) {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
+      flushPending()
+      return
+    }
     if (rafRef.current === null) {
       rafRef.current = requestAnimationFrame(flushPending)
     }
   }, [flushPending])
 
   const appendBatch = useCallback((batch: RawLogEntry[]) => {
-    pendingRef.current.push(...batch)
-    if (rafRef.current === null) {
-      rafRef.current = requestAnimationFrame(flushPending)
-    }
-  }, [flushPending])
+    for (const entry of batch) append(entry)
+  }, [append])
 
   const set = useCallback((rawEntries: RawLogEntry[]) => {
     // Cancel any pending RAF
@@ -100,9 +111,9 @@ export function useLogBuffer(): UseLogBufferReturn {
 
     const enriched = rawEntries.map(enrichEntry)
     if (enriched.length > MAX_BUFFER_SIZE) {
-      setEntries(enriched.slice(enriched.length - MAX_BUFFER_SIZE))
+      setBuffer({ latest: enriched.slice(enriched.length - MAX_BUFFER_SIZE), reading: null })
     } else {
-      setEntries(enriched)
+      setBuffer({ latest: enriched, reading: null })
     }
   }, [enrichEntry])
 
@@ -112,8 +123,27 @@ export function useLogBuffer(): UseLogBufferReturn {
       rafRef.current = null
     }
     pendingRef.current = []
-    setEntries([])
+    setBuffer({ latest: [], reading: null })
+  }, [])
+
+  const setFollowing = useCallback((following: boolean) => {
+    setBuffer(prev => {
+      if (following) return prev.reading === null ? prev : { ...prev, reading: null }
+      return prev.reading === null ? { ...prev, reading: prev.latest } : prev
+    })
   }, [])
 
-  return { entries, append, appendBatch, set, clear }
+  const entries = buffer.reading ?? buffer.latest
+  const pendingLineCount = (buffer.latest.at(-1)?.id ?? -1) - (entries.at(-1)?.id ?? -1)
+  const readingLastId = entries.at(-1)?.id ?? -1
+  const latestFirstId = buffer.latest[0]?.id ?? 0
+  const overlap = Math.max(0, readingLastId - latestFirstId + 1)
+  const retainedLineCount = buffer.reading === null ? buffer.latest.length : entries.length + buffer.latest.length - overlap
+  const missingLineCount = buffer.reading === null ? 0 : Math.max(0, latestFirstId - readingLastId - 1)
+  const getRetainedEntries = useCallback(() => {
+    if (buffer.reading === null || buffer.reading === buffer.latest) return buffer.latest
+    const lastId = buffer.reading.at(-1)?.id ?? -1
+    return [...buffer.reading, ...buffer.latest.filter(entry => entry.id > lastId)]
+  }, [buffer])
+  return { entries, retainedLineCount, missingLineCount, getRetainedEntries, isFollowing: buffer.reading === null, pendingLineCount, setFollowing, append, appendBatch, set, clear }
 }

package/src/components/logs/useLogSearch.ts

@@ -54,6 +54,7 @@ export function useLogSearch(
   virtuosoRef: React.RefObject<VirtuosoHandle | null>,
   /** Id of the record an entry belongs to (its first line's id); defaults to the entry itself */
   recordIdOf?: (entry: LogEntry) => number,
+  onNavigate?: () => void,
 ): UseLogSearchReturn {
   const [query, setQuery] = useState('')
   const [isRegex, setIsRegex] = useState(false)
@@ -122,6 +123,7 @@ export function useLogSearch(
   const scrollToMatch = useCallback((matchIdx: number) => {
     if (matchIdx < 0 || matchIdx >= matchIndices.length) return
     if (mode === 'hide') return
+    onNavigate?.()
     if (mode === 'only') {
       // The list holds whole matching records, so find the matched line within it
       const index = filteredIndexById?.get(entries[matchIndices[matchIdx]].id)
@@ -139,7 +141,7 @@ export function useLogSearch(
         behavior: 'smooth',
       })
     }
-  }, [entries, matchIndices, mode, filteredIndexById, virtuosoRef])
+  }, [entries, matchIndices, mode, filteredIndexById, virtuosoRef, onNavigate])
 
   const goToNext = useCallback(() => {
     if (matchIndices.length === 0 || mode === 'hide') return