@skyhook-io/k8s-ui 1.16.3 → 1.17.1

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

@@ -0,0 +1,291 @@
+// @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.'
+
+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) {
+  await act(async () =>
+    root.render(
+      <ToastProvider>
+        <LogsViewer
+          namespace="default"
+          podName="web-0"
+          containers={['app']}
+          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 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,14 @@ 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 { isStreaming, streamError, streamErrorCode, connecting, startStreaming, stopStreaming } = useLogStream()
 
   const willAutoStream = autoStream && !!createStream
   // Tracks the container we've already auto-started for, so re-renders don't
@@ -69,33 +86,61 @@ 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
       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)
       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])
 
   // 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,6 +154,18 @@ 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).
@@ -134,13 +191,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,18 +238,20 @@ 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 (
     <LogCore
       entries={entries}
       isLoading={isLoading || isConnecting}
-      errorMessage={fetchError || (entries.length === 0 ? streamError : null)}
+      errorMessage={fetchError || (entries.length === 0 && !emptyMessage && !streamAnswer ? streamError : 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}

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

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} />
           ) : (
@@ -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