@skyhook-io/k8s-ui 1.17.0 → 1.17.1

package/src/components/issues/severity.ts

@@ -136,6 +136,27 @@ export function categoryLabel(category: string): string {
   return CATEGORY_LABEL[category] ?? humanize(category);
 }
 
+// Reasons filed under a category whose label names a different operation:
+// CNPG archiving and an unanswered scheduled run sit under backup_failed.
+const REASON_TITLE: Record<string, string> = {
+  CNPGWALArchivingFailing: "WAL archiving failing",
+  CNPGLastBackupFailed: "Latest backup failed",
+  CNPGScheduleDestinationMissing: "Backup schedule has no destination",
+  CNPGInstanceReadinessMismatch: "Instance Pods contradict Cluster readiness",
+  CNPGPrimaryLabelMismatch: "Primary Pod label contradicts Cluster status",
+  CNPGScheduledRunNoBackup: "No successful backup since a scheduled run",
+};
+
+/** The title a reason has wherever it is shown, when its category's label would name the wrong operation. */
+export function issueReasonTitle(reason: string | undefined): string | undefined {
+  return reason ? REASON_TITLE[reason] : undefined;
+}
+
+/** An issue row's title: its category, unless the reason names it better. */
+export function issueTitle(issue: { category: string; reason?: string }): string {
+  return issueReasonTitle(issue.reason) || categoryLabel(issue.category);
+}
+
 export function groupLabel(group: string): string {
   return GROUP_LABEL[group] ?? humanize(group);
 }

package/src/components/issues/types.ts

@@ -141,6 +141,26 @@ export interface IssueRecentChange {
   consumed_by?: string[];
 }
 
+/** One finalizer removal: a JSON Patch that tests the object UID and the
+ *  finalizer at its index before removing it, previewed as dry runs. */
+export interface IssueFinalizerRemoval {
+  finalizer: string;
+  /** patch_resource tool input, with dry_run=true. */
+  patch_resource: Record<string, unknown>;
+  /** The same patch as a kubectl server-side dry run. */
+  kubectl: string;
+}
+
+export interface IssueConditionalCleanup {
+  /** Lead-in the reader must confirm, e.g. "If victoria-metrics-operator was
+   *  uninstalled on purpose (…), remove the finalizer". */
+  condition: string;
+  /** For agents: when the cleanup may be proposed. */
+  agent_guidance: string;
+  caution: string;
+  removals: IssueFinalizerRemoval[];
+}
+
 /** "No tracked non-status changes in the window" — the claim is scoped by
  *  window_seconds so a change just outside it can't be misread as absent. */
 export interface IssueNoRecentChanges {
@@ -188,6 +208,9 @@ export interface Issue {
   action?: string;
   remediation_kind?: string;
   remediation_target?: string;
+  /** A cleanup that is right only when its condition holds — never part of
+   *  `action`. Shown collapsed, labeled with the condition. */
+  conditional_cleanup?: IssueConditionalCleanup;
   /** Controller-operation retry count (e.g. Argo's "(retried N times)") —
    *  distinct from restart_count (pod restarts). stuck = not expected to
    *  self-recover. */

package/src/components/logs/LogCore.theme.test.tsx

@@ -1,9 +1,11 @@
 // @vitest-environment jsdom
-import { act } from 'react'
+import { act, type ComponentProps, type ReactNode } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
-import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { LogCore } from './LogCore'
 
+vi.mock('react-virtuoso', () => ({ Virtuoso: ({ data, itemContent }: { data: unknown[]; itemContent: (index: number, value: unknown) => ReactNode }) => <div>{data.map((value, index) => <div key={index}>{itemContent(index, value)}</div>)}</div> }))
+
 Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
 
 let root: Root
@@ -20,7 +22,7 @@ afterEach(async () => {
 })
 
 const noop = () => {}
-async function render(props: { forceDark?: boolean; defaultDark?: boolean }) {
+async function render(props: Partial<ComponentProps<typeof LogCore>>) {
   await act(async () =>
     root.render(
       <LogCore
@@ -75,3 +77,79 @@ describe('LogCore theme', () => {
     expect(toggle()).toBeNull()
   })
 })
+
+it('dims unavailable streaming, explains why, suppresses its hint and keyboard action', async () => {
+  vi.useFakeTimers()
+  const start = vi.fn()
+  await render({ onStartStream: start, sourceUnavailable: true })
+  const stream = [...element.querySelectorAll('button')].find((b) => b.textContent === 'Stream')!
+  expect(stream.disabled).toBe(true)
+  expect(stream.classList.contains('disabled:opacity-50')).toBe(true)
+  expect([...element.querySelectorAll('kbd')].some((k) => k.textContent === 'S')).toBe(false)
+  act(() => { stream.parentElement!.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })); vi.advanceTimersByTime(500) })
+  expect(document.body.textContent).toContain('Available once an instance is running')
+  act(() => window.dispatchEvent(new KeyboardEvent('keydown', { key: 's' })))
+  expect(start).not.toHaveBeenCalled()
+  vi.useRealTimers()
+})
+it('keeps a non-CNPG caller streamable without Pods and wraps its utilities together', async () => {
+  const start = vi.fn()
+  await render({ onStartStream: start, onClear: noop, toolbarExtra: <span>Deployment nginx sources</span>, entries: [{ id: 1, content: '{"msg":"nginx started","level":"info"}', timestamp: '', container: 'nginx', pod: 'nginx-1', isJson: true, isLogfmt: false, level: 'info', levelSource: 'structured' }] })
+  const stream = [...element.querySelectorAll('button')].find((b) => b.textContent === 'Stream')!
+  expect(stream.disabled).toBe(false)
+  expect([...element.querySelectorAll('kbd')].some((k) => k.textContent === 'S')).toBe(true)
+  act(() => stream.click())
+  expect(start).toHaveBeenCalledOnce()
+  const utilities = element.querySelector('[aria-label="Log display and utilities"]')!
+  expect(utilities.classList.contains('flex-nowrap')).toBe(true)
+  expect(utilities.classList.contains('shrink-0')).toBe(true)
+  for (const icon of ['lucide-trash-2', 'lucide-download', 'lucide-search', 'lucide-clock', 'lucide-braces']) expect(utilities.querySelector(`.${icon}`)).not.toBeNull()
+})
+
+it('still stops an existing stream when its source becomes unavailable', async () => {
+  const stop = vi.fn()
+  await render({ onStartStream: noop, onStopStream: stop, isStreaming: true, sourceUnavailable: true })
+  const button = [...element.querySelectorAll('button')].find((b) => b.textContent === 'Stop')!
+  expect(button.disabled).toBe(false)
+  act(() => window.dispatchEvent(new KeyboardEvent('keydown', { key: 's' })))
+  expect(stop).toHaveBeenCalledOnce()
+})
+
+it.each([true, false])('wraps non-CNPG plain logs at words with ANSI enabled=%s', async (ansi) => {
+  localStorage.setItem('radar-logs-ansi', String(ansi))
+  await render({ entries: [{ id: 1, timestamp: '', content: 'nginx serving requests', container: 'nginx', isJson: false, isLogfmt: false, level: 'info', levelSource: 'keyword' }] })
+  const line = [...element.querySelectorAll('span')].find((el) => el.textContent === 'nginx serving requests' && el.classList.contains('whitespace-pre-wrap'))!
+  expect(line.classList.contains('[overflow-wrap:anywhere]')).toBe(true)
+  expect(line.classList.contains('break-all')).toBe(false)
+})
+it('keeps normal word wrapping when searching a structured log', async () => {
+  await render({ entries: [{ id: 1, timestamp: '', content: '{"msg":"nginx serving requests"}', container: 'nginx', isJson: true, isLogfmt: false, level: 'info', levelSource: 'structured' }] })
+  await act(async () => window.dispatchEvent(new KeyboardEvent('keydown', { key: 'f', ctrlKey: true })))
+  const input = element.querySelector<HTMLInputElement>('input[placeholder="Search logs..."]')!
+  await act(async () => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, 'nginx')
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+  const highlight = element.querySelector('mark')!
+  expect(highlight).not.toBeNull()
+  expect(highlight.parentElement!.classList.contains('[overflow-wrap:anywhere]')).toBe(true)
+  expect(highlight.parentElement!.classList.contains('break-all')).toBe(false)
+})
+
+it('disables empty Export and Clear while preserving Refresh and enables them after logs load', async () => {
+  await render({ onClear: noop })
+  const exportButton = () => element.querySelector<HTMLButtonElement>('[aria-label="Export logs"]')!
+  const clear = () => element.querySelector<HTMLButtonElement>('[aria-label="Clear logs"]')!
+  expect(exportButton().disabled).toBe(true)
+  expect(clear().disabled).toBe(true)
+  expect(element.querySelector<HTMLButtonElement>('[aria-label="Refresh logs"]')?.disabled).toBe(false)
+  await render({ onClear: noop, entries: [{ id: 1, container: 'postgres', level: 'info', levelSource: 'keyword', isJson: false, isLogfmt: false, content: 'hello', timestamp: '2026-10-01T00:00:00Z' }] })
+  expect(exportButton().disabled).toBe(false)
+  expect(clear().disabled).toBe(false)
+})
+
+it('keeps Export and Clear usable when a Pod filter hides a nonempty buffer', async () => {
+  await render({ entries: [], allEntries: [{ id: 1, container: 'postgres', level: 'info', levelSource: 'keyword', isJson: false, isLogfmt: false, content: 'hello', timestamp: '' }], onClear: noop })
+  expect(element.querySelector<HTMLButtonElement>('[aria-label="Export logs"]')!.disabled).toBe(false)
+  expect(element.querySelector<HTMLButtonElement>('[aria-label="Clear logs"]')!.disabled).toBe(false)
+})

package/src/components/logs/LogCore.tsx

@@ -58,7 +58,8 @@ interface LogCoreProps {
   onClear?: () => void
   toolbarExtra?: ToolbarExtraRenderer
   showPodName?: boolean
-  emptyMessage?: string
+  emptyMessage?: ReactNode
+  sourceUnavailable?: boolean
   emptyCommand?: string | null
   errorMessage?: string | null
   /**
@@ -146,6 +147,7 @@ export function LogCore({
   toolbarExtra,
   showPodName = false,
   emptyMessage = 'No logs available',
+  sourceUnavailable = false,
   emptyCommand,
   errorMessage,
   forceDark,
@@ -422,7 +424,7 @@ export function LogCore({
         search.open()
         return
       }
-      if (e.key === 's' && !e.ctrlKey && !e.metaKey && !e.altKey && onStartStream) {
+      if (e.key === 's' && !e.ctrlKey && !e.metaKey && !e.altKey && onStartStream && (isStreaming || !sourceUnavailable)) {
         const target = e.target as HTMLElement | null
         if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT' || target.isContentEditable)) return
         e.preventDefault()
@@ -432,7 +434,7 @@ export function LogCore({
     }
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [search.open, onStartStream, onStopStream, isStreaming])
+  }, [search.open, onStartStream, onStopStream, isStreaming, sourceUnavailable])
 
   const handleFollowOutput = useCallback((isAtBottom: boolean) => {
     if (isAtBottom) return 'smooth' as const
@@ -568,15 +570,16 @@ export function LogCore({
       style={{ colorScheme: isDark ? 'dark' : 'light', fontFamily: "'SF Mono', 'Cascadia Code', 'Fira Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace" }}
     >
       {/* Toolbar */}
-      <div className={`flex items-center gap-2 px-3 py-2 border-b ${palette.border} ${palette.toolbarBg}`}>
+      <div className={`flex flex-wrap items-center gap-2 px-3 py-2 border-b ${palette.border} ${palette.toolbarBg}`}>
         {toolbarExtraNode}
 
         {/* Stream / Stop toggle — only shown when streaming is supported */}
         {onStartStream && (
-          <Tooltip content={isStreaming ? 'Stop streaming' : 'Start streaming'} delay={TIP_DELAY} position="bottom">
+          <Tooltip content={isStreaming ? 'Stop streaming' : sourceUnavailable ? 'Available once an instance is running' : 'Start streaming'} delay={TIP_DELAY} position="bottom">
             <button
               onClick={isStreaming ? onStopStream : onStartStream}
-              className={`flex items-center gap-1.5 px-2 py-1.5 text-xs rounded transition-colors ${
+              disabled={sourceUnavailable && !isStreaming}
+              className={`flex items-center gap-1.5 px-2 py-1.5 text-xs rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
                 isStreaming
                   ? 'bg-green-600 text-white hover:bg-green-700'
                   : `${palette.elevatedBg} ${palette.textSecondary} ${palette.hoverBg}`
@@ -592,6 +595,7 @@ export function LogCore({
         <Tooltip content="Refresh logs" delay={TIP_DELAY} position="bottom">
           <button
             onClick={onRefresh}
+            aria-label="Refresh logs"
             disabled={isLoading || isStreaming}
             className={`flex items-center gap-1.5 px-2 py-1.5 text-xs rounded ${palette.elevatedBg} ${palette.textSecondary} ${palette.hoverBg} disabled:opacity-50 disabled:cursor-not-allowed`}
           >
@@ -608,7 +612,7 @@ export function LogCore({
               <Tooltip key={opt.level} content={`${active ? 'Hide' : 'Show'} ${opt.noun}`} delay={TIP_DELAY} position="bottom">
                 <button
                   onClick={() => toggleLevel(opt.level)}
-                  className={`px-1.5 py-0.5 text-[10px] font-medium rounded border transition-colors ${
+                  className={`px-1.5 py-0.5 text-[10px] font-medium rounded border whitespace-nowrap transition-colors ${
                     active
                       ? getLevelActiveColor(opt.level, palette)
                       : levelChipInactive
@@ -621,7 +625,7 @@ export function LogCore({
           })}
         </div>
 
-        <div className="flex-1" />
+        <div role="group" aria-label="Log display and utilities" className="ml-auto flex shrink-0 flex-nowrap items-center gap-2">
 
         {/* Structured-log display mode: icon cycles compact→expanded→raw, chevron picks explicitly. */}
         {hasStructuredEntries && (
@@ -801,14 +805,15 @@ export function LogCore({
 
         {/* Export */}
         <div className="relative flex items-center" ref={downloadMenuRef}>
-          <Tooltip content="Export logs" delay={TIP_DELAY} position="bottom" disabled={showDownloadMenu} preserveWrapperWhenDisabled>
+          <Tooltip content={bufferEntries.length === 0 ? 'No logs loaded' : 'Export logs'} delay={TIP_DELAY} position="bottom" disabled={showDownloadMenu} preserveWrapperWhenDisabled>
             <button
               ref={exportTriggerRef}
+              disabled={bufferEntries.length === 0}
               onClick={toggleExportMenu}
               aria-label="Export logs"
               aria-haspopup="dialog"
               aria-expanded={showDownloadMenu}
-              className={iconBtnInactive}
+              className={`${iconBtnInactive} disabled:opacity-50 disabled:cursor-not-allowed`}
             >
               <Download className="w-4 h-4" />
             </button>
@@ -884,15 +889,18 @@ export function LogCore({
 
         {/* Clear */}
         {onClear && (
-          <Tooltip content="Clear logs" delay={TIP_DELAY} position="bottom">
+          <Tooltip content={bufferEntries.length === 0 ? 'No logs loaded' : 'Clear logs'} delay={TIP_DELAY} position="bottom">
             <button
               onClick={onClear}
-              className={iconBtnInactive}
+              aria-label="Clear logs"
+              disabled={bufferEntries.length === 0}
+              className={`${iconBtnInactive} disabled:opacity-50 disabled:cursor-not-allowed`}
             >
               <Trash2 className="w-4 h-4" />
             </button>
           </Tooltip>
         )}
+        </div>
       </div>
 
       {/* Search bar */}
@@ -1007,7 +1015,7 @@ export function LogCore({
       ) : groupedEntries.length === 0 ? (
         <div className={`${EMPTY_STATE_CLASS} ${palette.textTertiary}`}>
           <Terminal className="w-8 h-8" />
-          <span>{entries.length > 0 ? `Filters hide all ${entries.length.toLocaleString()} loaded lines` : emptyMessage}</span>
+          <div>{entries.length > 0 ? `Filters hide all ${entries.length.toLocaleString()} loaded lines` : emptyMessage}</div>
           {entries.length === 0 && emptyCommand && (
             <button type="button" onClick={() => { void copyText(emptyCommand) }} className={`mt-2 inline-flex max-w-[80%] items-center gap-2 rounded border px-3 py-2 font-mono text-xs ${palette.border} ${palette.toolbarBg}`} title="Copy recovery command">
               <code className="truncate">{emptyCommand}</code>
@@ -1062,7 +1070,7 @@ export function LogCore({
 
       {/* Keyboard shortcut hints */}
       <div className={`flex items-center gap-4 px-3 py-1 border-t ${palette.border} ${palette.toolbarBg} text-[10px] ${palette.textDisabled}`}>
-        {onStartStream && <Shortcut keys="S" label={isStreaming ? 'Stop stream' : 'Stream'} palette={palette} />}
+        {onStartStream && (!sourceUnavailable || isStreaming) && <Shortcut keys="S" label={isStreaming ? 'Stop stream' : 'Stream'} palette={palette} />}
         <Shortcut keys="Ctrl+F" label="Search" palette={palette} />
         {search.mode !== 'hide' && (
           <>
@@ -1189,7 +1197,7 @@ function LogLine({
     const highlighted = highlightSearchMatches(plain, searchQuery, searchIsRegex, searchIsCaseSensitive)
     contentElement = (
       <span
-        className={`${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'} ${levelColor}`}
+        className={`${wordWrap ? 'whitespace-pre-wrap [overflow-wrap:anywhere]' : 'whitespace-pre'} ${levelColor}`}
         dangerouslySetInnerHTML={{ __html: highlighted }}
       />
     )
@@ -1209,13 +1217,13 @@ function LogLine({
     const html = ansiToHtml(entry.content)
     contentElement = (
       <span
-        className={`${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'} ${levelColor}`}
+        className={`${wordWrap ? 'whitespace-pre-wrap [overflow-wrap:anywhere]' : 'whitespace-pre'} ${levelColor}`}
         dangerouslySetInnerHTML={{ __html: html }}
       />
     )
   } else {
     contentElement = (
-      <span className={`${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'} ${levelColor}`}>
+      <span className={`${wordWrap ? 'whitespace-pre-wrap [overflow-wrap:anywhere]' : 'whitespace-pre'} ${levelColor}`}>
         {stripAnsi(entry.content)}
       </span>
     )

package/src/components/logs/LogToolbarSelects.tsx

@@ -50,6 +50,7 @@ interface LogRangeSelectProps {
   isDark?: boolean
   /** When true, the control is greyed out and non-interactive. */
   disabled?: boolean
+  disabledReason?: string
 }
 
 export function LogRangeSelect({
@@ -59,10 +60,11 @@ export function LogRangeSelect({
   tooltip = 'How many logs to load — by line count or time range',
   isDark = true,
   disabled = false,
+  disabledReason = 'Stop streaming to change the log range',
 }: LogRangeSelectProps) {
   const palette = getLogPalette(isDark)
   return (
-    <Tooltip content={disabled ? 'Stop streaming to change the log range' : tooltip} position="bottom">
+    <Tooltip content={disabled ? disabledReason : tooltip} position="bottom">
       <select
         value={value}
         onChange={(e) => onChange(e.target.value)}

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