Stream logs by default (#857) (#870)

* Stream logs by default (#857)

Log viewers now start streaming on mount instead of requiring a click on
the Stream button — matching k9s, Lens, ArgoCD, and Rancher, which all
follow logs by default. Terminated pods (Succeeded/Failed) still load a
static snapshot rather than auto-streaming, since there's nothing to follow.

- New optional `autoStream` prop on LogsViewer / WorkloadLogsViewer
  (default false, so library consumers are unaffected). Radar's wrappers
  opt in: workload aggregate and dock pod logs default on; single-pod logs
  gate on phase.
- Auto-start is keyed per-container and respects a manual Stop (won't
  re-arm), and the redundant snapshot fetch is skipped while auto-streaming.
- Clear the buffer when a stream starts so the replayed tail (TailLines +
  Follow) no longer duplicates the snapshot — a pre-existing bug on the
  manual Stream button too.
- Add `s` to toggle streaming (k9s parity), ignored while typing in a
  field, with a hint in the shortcut bar.

* Address review: multi-pod phase gating, stream-error settle, select key guard

- MultiPodLogsTab (Job/CronJob children) now gates autoStream on the
  selected pod's phase, so completed pods show a static snapshot instead
  of opening a follow stream. Waits for the pod to load before deciding.
- useLogStream exposes streamError; the viewers settle the "connecting"
  state on a failed SSE connection (and surface the error when no logs
  arrived) instead of spinning forever.
- The 's' stream shortcut now also ignores SELECT elements, so type-to-
  select on the container/range dropdowns isn't hijacked.

* Don't report a clean stream end as a connection error

EventSource fires a generic 'error' on the normal close that follows the
server's 'end', so a live stream ending while watched could surface a false
"connection failed" and the connecting spinner could re-appear after a clean
end with no logs. Track end-vs-error with endedRef, and replace the ad-hoc
connecting predicate with a `connecting` signal from useLogStream that is
bounded to the actual connection attempt (set on start, cleared on the first
connected/log/end/error/stop) so it can't re-spin.

* Fix auto-stream lifecycle: container switch after stop, terminal transition

- When the user has Stopped, a container switch now reloads the snapshot
  instead of leaving the previous container's lines under the new selection
  (the snapshot fetch was skipped whenever willAutoStream was true).
- When autoStream turns off while a stream is open (pod went terminal), stop
  following so live appends don't race the snapshot fetch.
- Don't log/surface the EventSource 'error' that fires on the normal close
  after a clean 'end'.

* Ignore stale EventSource events; disable snapshot controls while streaming

- useLogStream guards every listener with an isCurrent() check, so a late
  async event from a superseded source (after Stop, container switch, or
  restart) can't corrupt the new stream's state or surface a false
  "connection failed".
- Previous and the log-range select are disabled while streaming — they're
  snapshot-only controls that otherwise appeared to do nothing under the
  auto-stream default. Stop to adjust them.

* Gate single-pod auto-stream on known phase; survive Strict Mode

- PodLogsTab now waits for the pod phase to be known (!!phase) before
  auto-streaming, matching MultiPodLogsTab — a completed pod is no longer
  briefly followed while its resource is still loading.
- The auto-start effect resets its per-container arm latch on teardown, so
  React Strict Mode's mount→unmount→mount (dev) re-opens the stream instead
  of leaving the viewer static after the cleanup closes the EventSource.

Author: nadaverell

packages/k8s-ui/src/components/logs/LogCore.tsx

@@ -274,17 +274,27 @@ export function LogCore({
     })
   }, [])
 
-  // Keyboard shortcut: Ctrl+F to open search
+  // Keyboard shortcuts: Ctrl+F opens search; bare 's' toggles streaming
+  // (matches k9s). 's' is ignored while typing in a field so it doesn't
+  // hijack search input or other text entry.
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
         e.preventDefault()
         search.open()
+        return
+      }
+      if (e.key === 's' && !e.ctrlKey && !e.metaKey && !e.altKey && onStartStream) {
+        const target = e.target as HTMLElement | null
+        if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT' || target.isContentEditable)) return
+        e.preventDefault()
+        if (isStreaming) onStopStream()
+        else onStartStream()
       }
     }
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [search.open])
+  }, [search.open, onStartStream, onStopStream, isStreaming])
 
   const handleFollowOutput = useCallback((isAtBottom: boolean) => {
     if (isAtBottom) return 'smooth' as const
@@ -846,6 +856,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} />}
         <Shortcut keys="Ctrl+F" label="Search" palette={palette} />
         <Shortcut keys="Enter" label="Next match" palette={palette} />
         <Shortcut keys="Shift+Enter" label="Prev match" palette={palette} />

packages/k8s-ui/src/components/logs/LogToolbarSelects.tsx

@@ -48,6 +48,8 @@ interface LogRangeSelectProps {
   tooltip?: string
   /** Dark/light palette selector. Defaults to `true` (dark viewer). */
   isDark?: boolean
+  /** When true, the control is greyed out and non-interactive. */
+  disabled?: boolean
 }
 
 export function LogRangeSelect({
@@ -56,14 +58,16 @@ export function LogRangeSelect({
   lineOptions = [100, 500, 1000, 5000],
   tooltip = 'How many logs to load — by line count or time range',
   isDark = true,
+  disabled = false,
 }: LogRangeSelectProps) {
   const palette = getLogPalette(isDark)
   return (
-    <Tooltip content={tooltip} position="bottom">
+    <Tooltip content={disabled ? 'Stop streaming to change the log range' : tooltip} position="bottom">
       <select
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className={`${selectClass(palette)} pr-5`}
+        disabled={disabled}
+        className={`${selectClass(palette)} pr-5 ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
       >
         <optgroup label="Lines">
           {lineOptions.map(n => (

packages/k8s-ui/src/components/logs/LogsViewer.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useRef } from 'react'
 import { parseLogLine, parseLogRange } from '../../utils/log-format'
 import { triggerDownload } from '../../utils/download'
 import { useLogBuffer } from './useLogBuffer'
@@ -30,6 +30,12 @@ export interface LogsViewerProps {
   overrideDownload?: (content: string, mime: string, filename: string) => void
   /** Force dark mode on the logs container (default: true) */
   forceDark?: boolean
+  /**
+   * Open the stream automatically on mount (and on container switch) instead of
+   * loading a static snapshot. The user can still Stop, and a manual Stop is not
+   * re-armed. Requires `createStream`. Default: false.
+   */
+  autoStream?: boolean
 }
 
 export function LogsViewer({
@@ -41,6 +47,7 @@ export function LogsViewer({
   createStream,
   overrideDownload,
   forceDark,
+  autoStream = false,
 }: LogsViewerProps) {
   const [selectedContainer, setSelectedContainer] = useState(initialContainer || containers[0] || '')
   const [isLoading, setIsLoading] = useState(false)
@@ -51,7 +58,14 @@ export function LogsViewer({
 
   const { tailLines, sinceSeconds } = parseLogRange(logRange)
   const { entries, append, set, clear } = useLogBuffer()
-  const { isStreaming, startStreaming, stopStreaming } = useLogStream()
+  const { isStreaming, streamError, connecting, startStreaming, stopStreaming } = useLogStream()
+
+  const willAutoStream = autoStream && !!createStream
+  // Tracks the container we've already auto-started for, so re-renders don't
+  // re-open the stream, and a container switch arms a fresh auto-start.
+  const autoStartedForRef = useRef<string | null>(null)
+  // Once the user explicitly Stops, don't auto-resume for this viewer's lifetime.
+  const userStoppedRef = useRef(false)
 
   const loadLogs = useCallback(async () => {
     if (!selectedContainer) return
@@ -72,11 +86,30 @@ export function LogsViewer({
     }
   }, [selectedContainer, tailLines, sinceSeconds, showPrevious, fetchLogs, set])
 
-  useEffect(() => { loadLogs() }, [loadLogs])
+  // 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.
+  useEffect(() => {
+    if (!willAutoStream || userStoppedRef.current) loadLogs()
+  }, [loadLogs, willAutoStream])
   useEffect(() => { stopStreaming() }, [selectedContainer, stopStreaming])
 
+  // If auto-stream turns off while a stream is open (e.g. the pod went
+  // terminal), stop following so live appends don't race the snapshot.
+  const prevWillAutoStreamRef = useRef(willAutoStream)
+  useEffect(() => {
+    if (prevWillAutoStreamRef.current && !willAutoStream && isStreaming) stopStreaming()
+    prevWillAutoStreamRef.current = willAutoStream
+  }, [willAutoStream, isStreaming, stopStreaming])
+
   const handleStartStreaming = useCallback(() => {
     if (!createStream) return
+    // The stream replays the last N lines (TailLines + Follow); clear first so
+    // they don't duplicate lines already in the buffer (the snapshot on the
+    // manual path, or an earlier stream on restart).
+    clear()
     startStreaming(
       () => createStream({ container: selectedContainer, tailLines: 100, sinceSeconds }),
       {
@@ -86,8 +119,26 @@ export function LogsViewer({
           container: data.container || selectedContainer,
         }),
       },
+      'Log stream connection failed',
     )
-  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append])
+  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append, clear])
+
+  const handleStopStreaming = useCallback(() => {
+    userStoppedRef.current = true
+    stopStreaming()
+  }, [stopStreaming])
+
+  useEffect(() => {
+    if (!willAutoStream || !selectedContainer) return
+    if (userStoppedRef.current) return
+    if (autoStartedForRef.current === selectedContainer) return
+    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 }
+  }, [willAutoStream, selectedContainer, handleStartStreaming])
 
   const downloadLogs = useCallback((format: DownloadFormat) => {
     let content: string
@@ -122,30 +173,35 @@ export function LogsViewer({
     <>
       <ContainerSelect containers={containers} value={selectedContainer} onChange={setSelectedContainer} isDark={isDark} />
 
-      <Tooltip content="Show logs from the pod's previous instance (if it was restarted). Useful for troubleshooting crashed containers." position="bottom">
-        <label className={`flex items-center gap-1.5 text-xs ${palette.textSecondary}`}>
+      <Tooltip content={isStreaming ? 'Stop streaming to view the previous instance' : "Show logs from the pod's previous instance (if it was restarted). Useful for troubleshooting crashed containers."} position="bottom">
+        <label className={`flex items-center gap-1.5 text-xs ${palette.textSecondary} ${isStreaming ? 'opacity-50 cursor-not-allowed' : ''}`}>
           <input
             type="checkbox"
             checked={showPrevious}
             onChange={(e) => setShowPrevious(e.target.checked)}
+            disabled={isStreaming}
             className={`w-3 h-3 rounded ${palette.borderLight} ${palette.elevatedBg} text-blue-500 focus:ring-blue-500 focus:ring-offset-0`}
           />
           <span className={`border-b border-dotted ${isDark ? 'border-slate-500' : 'border-slate-400'}`}>Previous</span>
         </label>
       </Tooltip>
 
-      <LogRangeSelect value={logRange} onChange={setLogRange} isDark={isDark} />
+      <LogRangeSelect value={logRange} onChange={setLogRange} isDark={isDark} disabled={isStreaming} />
     </>
   )
 
+  // 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
+
   return (
     <LogCore
       entries={entries}
-      isLoading={isLoading}
-      errorMessage={fetchError}
+      isLoading={isLoading || isConnecting}
+      errorMessage={fetchError || (entries.length === 0 ? streamError : null)}
       isStreaming={isStreaming}
       onStartStream={createStream ? handleStartStreaming : undefined}
-      onStopStream={stopStreaming}
+      onStopStream={handleStopStreaming}
       onRefresh={loadLogs}
       onDownload={downloadLogs}
       onClear={clear}

packages/k8s-ui/src/components/logs/WorkloadLogsViewer.tsx

@@ -47,9 +47,15 @@ export interface WorkloadLogsViewerProps {
   overrideDownload?: (content: string, mime: string, filename: string) => void
   /** Force dark mode on the logs container (default: true) */
   forceDark?: boolean
+  /**
+   * Open the stream automatically on mount (and on container switch) instead of
+   * loading a static snapshot. The user can still Stop, and a manual Stop is not
+   * re-armed. Requires `createStream`. Default: false.
+   */
+  autoStream?: boolean
 }
 
-export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark }: WorkloadLogsViewerProps) {
+export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark, autoStream = false }: WorkloadLogsViewerProps) {
   const [selectedContainer, setSelectedContainer] = useState<string>('')
   const [pods, setPods] = useState<WorkloadPodInfo[]>([])
   const [selectedPods, setSelectedPods] = useState<Set<string>>(new Set())
@@ -61,7 +67,12 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
 
   const { tailLines, sinceSeconds } = parseLogRange(logRange)
   const { entries, append, set, clear } = useLogBuffer()
-  const { isStreaming, startStreaming, stopStreaming } = useLogStream()
+  const { isStreaming, streamError, connecting, startStreaming, stopStreaming } = useLogStream()
+
+  const willAutoStream = autoStream && !!createStream
+  // null sentinel so the initial selectedContainer ('' = all) still arms once.
+  const autoStartedForRef = useRef<string | null>(null)
+  const userStoppedRef = useRef(false)
 
   // Map pod.name → index. Color classes are resolved at render time from the
   // current palette (see LogCore / pod-filter dropdown below) so toggling
@@ -105,11 +116,30 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
     }
   }, [fetchAll, selectedContainer, tailLines, sinceSeconds, set])
 
-  useEffect(() => { loadLogs() }, [loadLogs])
+  // 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 selection's lines.
+  useEffect(() => {
+    if (!willAutoStream || userStoppedRef.current) loadLogs()
+  }, [loadLogs, willAutoStream])
   useEffect(() => { stopStreaming() }, [selectedContainer, stopStreaming])
 
+  // If auto-stream turns off while a stream is open, stop following so live
+  // appends don't race the snapshot.
+  const prevWillAutoStreamRef = useRef(willAutoStream)
+  useEffect(() => {
+    if (prevWillAutoStreamRef.current && !willAutoStream && isStreaming) stopStreaming()
+    prevWillAutoStreamRef.current = willAutoStream
+  }, [willAutoStream, isStreaming, stopStreaming])
+
   const handleStartStreaming = useCallback(() => {
     if (!createStream) return
+    // The stream replays the last N lines per pod (TailLines + Follow); clear
+    // first so they don't duplicate lines already in the buffer (the snapshot on
+    // the manual path, or an earlier stream on restart).
+    clear()
     startStreaming(
       () => createStream({ container: selectedContainer || undefined, tailLines: 50, sinceSeconds }),
       {
@@ -156,9 +186,26 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
           }
         },
       },
-      'Workload log stream error',
+      'Workload log stream connection failed',
     )
-  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append, podColorIndex, selectedPods.size])
+  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append, podColorIndex, selectedPods.size, clear])
+
+  const handleStopStreaming = useCallback(() => {
+    userStoppedRef.current = true
+    stopStreaming()
+  }, [stopStreaming])
+
+  useEffect(() => {
+    if (!willAutoStream) return
+    if (userStoppedRef.current) return
+    if (autoStartedForRef.current === selectedContainer) return
+    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 }
+  }, [willAutoStream, selectedContainer, handleStartStreaming])
 
   const allContainers = useMemo(() => {
     const s = new Set<string>()
@@ -280,24 +327,29 @@ 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}
       />
     </>
   )
 
+  // 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
+
   return (
     <LogCore
       entries={filteredEntries}
-      isLoading={isLoading}
+      isLoading={isLoading || isConnecting}
       isStreaming={isStreaming}
       onStartStream={createStream ? handleStartStreaming : undefined}
-      onStopStream={stopStreaming}
+      onStopStream={handleStopStreaming}
       onRefresh={loadLogs}
       onDownload={downloadLogs}
       onClear={clear}
       toolbarExtra={renderToolbarExtra}
       showPodName
       emptyMessage={pods.length === 0 ? 'No pods found' : 'No logs available'}
-      errorMessage={fetchError}
+      errorMessage={fetchError || (entries.length === 0 ? streamError : null)}
       forceDark={forceDark}
     />
   )