@skyhook-io/k8s-ui 1.7.11 → 1.7.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.7.11",
+  "version": "1.7.12",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/dock/TerminalTab.tsx

@@ -285,8 +285,10 @@ export function TerminalTab({
             <>
               <div className="text-amber-400 mb-2 text-sm">Shell not available</div>
               <div className="text-xs text-theme-text-tertiary mb-4 max-w-md">
-                This container doesn&apos;t have a shell (/bin/sh). This is common with distroless
-                or minimal container images. You can create a debug container to troubleshoot.
+                Container <span className="font-mono text-theme-text-secondary">{selectedContainer}</span> doesn&apos;t
+                have a shell (/bin/sh). This is common with distroless or minimal container images
+                {containers.length > 1 ? ' — try another container above, or' : '. You can'} create a
+                debug container to troubleshoot.
               </div>
               <div className="flex gap-2">
                 {createDebugContainerRef.current && (

package/src/components/gitops/insights/GitOpsInsightViews.tsx

@@ -626,6 +626,7 @@ function GitOpsCompactIssueStack({ issues, onSelectIssue }: { issues: GitOpsIssu
                     <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary">{issue.scope}</span>
                   </div>
                   <p className="mt-0.5 text-theme-text-secondary">{issue.message}</p>
+                  {issue.cause && <p className="mt-0.5 text-[11px] text-theme-text-tertiary">{issue.cause}</p>}
                   {issue.action && <p className="mt-0.5 text-[11px] text-theme-text-tertiary">{issue.action}</p>}
                 </div>
                 {actionable && ref && (

package/src/components/issues/IssuesView.tsx

@@ -49,7 +49,7 @@ export function IssuesView({ issues, anyData, resourceHref, onResourceClick, clu
   // queue stays scannable and you never lose your place to a wall of expansions.
   const [openId, setOpenId] = useState<string | null>(null);
 
-  // Stable order keyed on severity → onset → identity (see compareIssues), so
+  // Stable order keyed on severity → observed age → identity (see compareIssues), so
   // the queue doesn't reshuffle under the host's auto-refresh.
   const sorted = useMemo(() => [...issues].sort(compareIssues), [issues]);
 
@@ -183,9 +183,10 @@ function IssueRow({
           </div>
         </div>
 
-        {/* Onset age (first_seen, fixed for the issue's life) is the chronic-vs-
-            acute signal — "broken 2m" reads very differently from "broken 5d".
-            Keyed on first_seen, not last_seen, so it doesn't churn on refresh. */}
+        {/* Age chip: chronic-vs-acute signal. When issue_timing is
+            started_at_resource_creation, swap the raw age for "since deploy" —
+            the raw age is misleading (it reads as urgency, but this issue has
+            been present since the resource was first created). */}
         {issue.first_seen ? (
           <time
             dateTime={issue.first_seen}
@@ -193,7 +194,9 @@ function IssueRow({
             className="flex shrink-0 items-center gap-1 text-xs tabular-nums text-theme-text-tertiary"
           >
             <Clock className="h-3 w-3" aria-hidden />
-            {formatCompactAge(issue.first_seen)}
+            {issue.issue_timing === 'started_at_resource_creation'
+              ? 'since deploy'
+              : formatCompactAge(issue.first_seen)}
           </time>
         ) : null}
 
@@ -238,17 +241,50 @@ function Diagnosis({ issue }: { issue: Issue }) {
           .join(' · ')
       : null;
   const { headline, detail } = issueMessageParts(issue);
+  // When the issue carries a parsed plain-English cause (GitOps controller
+  // errors), lead with it — the raw controller message is long and buries the
+  // useful part, and the detector reason ("OperationFailed") just repeats the
+  // category chip. The raw message is kept below as de-emphasized detail.
+  const rawMessage = [headline, detail].filter(Boolean).join(' ');
   return (
     <section className="flex flex-col gap-1">
       <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">What's wrong</h4>
-      <p className="text-sm leading-relaxed text-theme-text-primary">
-        <span className="font-medium">{issue.reason}</span>
-        {headline ? <span className="text-theme-text-secondary"> — {headline}</span> : null}
-      </p>
-      {/* Raw source string kept as secondary detail only when we showed a
-          normalized headline above (e.g. the verbose containerd image-pull
-          error) — so the precise message is never lost, just de-emphasized. */}
-      {detail ? <p className="break-words font-mono text-xs leading-relaxed text-theme-text-tertiary">{detail}</p> : null}
+      {issue.cause ? (
+        <p className="text-sm leading-relaxed text-theme-text-primary">{issue.cause}</p>
+      ) : (
+        <p className="text-sm leading-relaxed text-theme-text-primary">
+          <span className="font-medium">{issue.reason}</span>
+          {headline ? <span className="text-theme-text-secondary"> — {headline}</span> : null}
+        </p>
+      )}
+      {/* For non-cause issues whose message was normalized to a short headline
+          (e.g. image-pull), keep the precise raw kubelet/containerd detail. The
+          cause branch shows its own raw block below. */}
+      {!issue.cause && detail ? (
+        <p className="break-words font-mono text-xs leading-relaxed text-theme-text-tertiary">{detail}</p>
+      ) : null}
+      {issue.action ? (
+        <p className="text-sm leading-relaxed text-theme-text-secondary">
+          <span className="font-medium text-theme-text-primary">Next step: </span>
+          {issue.action}
+        </p>
+      ) : null}
+      {issue.remediation_kind === 'create-namespace' && issue.remediation_target ? (
+        <p className="text-xs text-theme-text-tertiary">
+          Suggested fix: create namespace <code className="rounded bg-theme-elevated px-1 font-mono">{issue.remediation_target}</code> — apply it from the GitOps detail page.
+        </p>
+      ) : null}
+      {issue.stuck || issue.operation_retry_count ? (
+        <p className="text-xs text-theme-text-tertiary tabular-nums">
+          {issue.stuck ? 'Stuck' : 'Retrying'}
+          {issue.operation_retry_count ? ` · retried ${issue.operation_retry_count}×` : ''}
+        </p>
+      ) : null}
+      {/* Raw controller message, de-emphasized — shown below the parsed cause so
+          the precise error (URLs, resource names) is available without leading. */}
+      {issue.cause && rawMessage ? (
+        <p className="break-words font-mono text-[11px] leading-relaxed text-theme-text-tertiary">{rawMessage}</p>
+      ) : null}
       {crash ? <p className="text-xs text-theme-text-tertiary tabular-nums">{crash}</p> : null}
       {issue.change_context ? (
         <p className="text-xs text-theme-text-tertiary">
@@ -257,8 +293,14 @@ function Diagnosis({ issue }: { issue: Issue }) {
       ) : null}
       {issue.first_seen ? (
         <p className="text-xs text-theme-text-tertiary tabular-nums">
-          Started {formatRelativeAgeTime(issue.first_seen)}
-          {issue.last_seen ? ` · last seen ${formatRelativeAgeTime(issue.last_seen)}` : ''}
+          {issue.issue_timing === 'started_at_resource_creation'
+            ? 'Present since deployment'
+            : issue.issue_timing === 'started_after_resource_was_healthy'
+              ? `Started ${formatRelativeAgeTime(issue.first_seen)} · was previously healthy`
+              : `Started ${formatRelativeAgeTime(issue.first_seen)}`}
+          {issue.last_seen && issue.issue_timing !== 'started_at_resource_creation'
+            ? ` · last seen ${formatRelativeAgeTime(issue.last_seen)}`
+            : ''}
         </p>
       ) : null}
     </section>
@@ -364,11 +406,16 @@ function diagnosticFactLabel(type: string): string {
   }
 }
 
-// Native-tooltip detail for the collapsed-row age chip: absolute onset + last-seen
+// Native-tooltip detail for the collapsed-row age chip: absolute first-seen + last-seen
 // freshness, the two facts the compact "2h" hides.
 function ageTitle(issue: Issue): string {
   const parts: string[] = [];
-  if (issue.first_seen) parts.push(`Started ${new Date(issue.first_seen).toLocaleString()}`);
+  if (issue.issue_timing === 'started_at_resource_creation') {
+    parts.push('Present since deployment — treat as baseline');
+  } else if (issue.issue_timing === 'started_after_resource_was_healthy') {
+    parts.push('Resource was previously healthy');
+  }
+  if (issue.first_seen) parts.push(`First seen ${new Date(issue.first_seen).toLocaleString()}`);
   if (issue.last_seen) parts.push(`Last seen ${formatRelativeAgeTime(issue.last_seen)}`);
   return parts.join('\n');
 }

package/src/components/issues/index.ts

@@ -11,7 +11,7 @@ export {
   subjectRef,
   memberRef,
 } from './types';
-export type { Issue, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagnosticContext, IssueDiagnosticFact, IssueDiagnosticIssueRef, IssueDiagnosticRole, IssueChangeContext } from './types';
+export type { Issue, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagnosticContext, IssueDiagnosticFact, IssueDiagnosticIssueRef, IssueDiagnosticRole, IssueChangeContext, IssueRecentChange, IssueRecentChangeField } from './types';
 export {
   ISSUE_SEVERITY_LABEL,
   ISSUE_SEVERITY_BADGE_CLASS,

package/src/components/issues/issues.test.ts

@@ -16,27 +16,27 @@ const base: Issue = {
 const mk = (o: Partial<Issue>): Issue => ({ ...base, ...o })
 
 describe('compareIssues', () => {
-  it('orders critical before warning regardless of onset', () => {
+  it('orders critical before warning regardless of observed age', () => {
     const warn = mk({ id: 'w', severity: 'warning', first_seen: '2026-05-01T00:00:00Z' }) // newer
     const crit = mk({ id: 'c', severity: 'critical', first_seen: '2026-01-01T00:00:00Z' }) // older
     expect([warn, crit].sort(compareIssues).map((i) => i.id)).toEqual(['c', 'w'])
   })
 
-  it('breaks same-severity ties by first_seen DESC (newest onset first)', () => {
+  it('breaks same-severity ties by first_seen DESC (newest observed issue first)', () => {
     const older = mk({ id: 'o', first_seen: '2026-01-01T00:00:00Z' })
     const newer = mk({ id: 'n', first_seen: '2026-05-01T00:00:00Z' })
     expect([older, newer].sort(compareIssues).map((i) => i.id)).toEqual(['n', 'o'])
   })
 
   it('does NOT reshuffle same-severity rows when only last_seen changes (anti-churn)', () => {
-    // Two same-severity rows, same onset — order is the deterministic name tiebreak.
+    // Two same-severity rows, same first_seen — order is the deterministic name tiebreak.
     const a = mk({ id: 'id-a', name: 'a', first_seen: '2026-01-01T00:00:00Z', last_seen: '2026-05-01T00:00:00Z' })
     const b = mk({ id: 'id-b', name: 'b', first_seen: '2026-01-01T00:00:00Z', last_seen: '2026-05-30T00:00:00Z' })
     const before = [a, b].sort(compareIssues).map((i) => i.id)
     expect(before).toEqual(['id-a', 'id-b'])
     // A refetch bumps a's last_seen to "now". Sorting on last_seen would flip the
     // order; keying on first_seen + identity must NOT — this is the whole point
-    // of the onset-based sort.
+    // of the first_seen-based sort.
     const aRefetched = mk({ ...a, last_seen: '2026-06-01T00:00:00Z' })
     const after = [aRefetched, b].sort(compareIssues).map((i) => i.id)
     expect(after).toEqual(before)

package/src/components/issues/severity.ts

@@ -91,6 +91,11 @@ const CATEGORY_LABEL: Record<string, string> = {
   node_not_ready: 'Node not ready',
   operator_condition_failed: 'Controller condition',
   gitops_sync_failed: 'GitOps sync failed',
+  gitops_render_failed: 'GitOps render failed',
+  gitops_spec_invalid: 'GitOps spec invalid',
+  gitops_operation_failed: 'GitOps operation failed',
+  gitops_out_of_sync: 'GitOps out of sync',
+  gitops_health_degraded: 'GitOps health degraded',
   webhook_backend_down: 'Webhook backend down',
   control_plane_not_ready: 'Control plane not ready',
   machine_not_ready: 'Machine not ready',

package/src/components/issues/types.ts

@@ -85,6 +85,24 @@ export interface IssueChangeContext {
   evidence?: string;
 }
 
+export interface IssueRecentChangeField {
+  path: string;
+  oldValue?: unknown;
+  newValue?: unknown;
+}
+
+export interface IssueRecentChange {
+  kind: string;
+  namespace?: string;
+  name: string;
+  changeType: string;
+  summary?: string;
+  timestamp: string;
+  change_category?: 'spec_config' | 'lifecycle' | 'runtime_status' | string;
+  rank_reason?: string;
+  fields?: IssueRecentChangeField[];
+}
+
 /**
  * A grouped live issue — one row of the triage queue. Subject (kind/group/
  * namespace/name) is the topmost owner when the rows folded under a workload,
@@ -118,6 +136,18 @@ export interface Issue {
 
   reason: string;
   message?: string;
+  /** Parsed domain diagnosis (today GitOps controller errors): plain-English
+   *  cause, suggested next step, and an optional structured one-click fix.
+   *  Server-emitted (omitempty); empty for issues without a parser. */
+  cause?: string;
+  action?: string;
+  remediation_kind?: string;
+  remediation_target?: string;
+  /** Controller-operation retry count (e.g. Argo's "(retried N times)") —
+   *  distinct from restart_count (pod restarts). stuck = not expected to
+   *  self-recover. */
+  operation_retry_count?: number;
+  stuck?: boolean;
   first_seen?: string;
   last_seen?: string;
   /** Affected-resource fan-out, EXCLUDING the subject (the row header).
@@ -135,6 +165,19 @@ export interface Issue {
   // Pod crash context carried from the representative member.
   restart_count?: number;
   last_terminated_reason?: string;
+
+  /**
+   * Best-effort timing evidence from K8s-native signals. Absent when Radar has
+   * no confident signal. This is not a root-cause verdict.
+   *
+   * "started_at_resource_creation"        — failing state began during resource
+   *                                        creation or first reconciliation.
+   * "started_after_resource_was_healthy"  — a meaningful healthy window preceded
+   *                                        the failing state.
+   */
+  issue_timing?: 'started_at_resource_creation' | 'started_after_resource_was_healthy';
+  /** The evidence that determined issue_timing (for auditability). */
+  issue_timing_basis?: 'condition' | 'owner_condition' | 'pod_creation' | 'deletion' | 'phase' | 'spec';
 }
 
 /** subjectRef builds a deep-linkable ref for an issue's subject — the row's

package/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} />

package/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 => (

package/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}

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