@skyhook-io/k8s-ui 1.18.0 → 1.18.2

package/src/components/gitops/detail-helpers.ts

@@ -1,6 +1,7 @@
 import { argoApplicationSetConditionsToGitOpsStatus, argoStatusToGitOpsStatus, fluxConditionsToGitOpsStatus, type FluxCondition, type GitOpsStatus } from '../../types/gitops'
 import type { GitOpsResourceTree } from '../../types/gitops-tree'
 import { formatCompactAge } from '../../utils/format'
+import { apiVersionToGroup } from '../../utils/navigation'
 
 // =============================================================================
 // Shared helpers used by both per-cluster Radar's GitOps detail view (OSS
@@ -92,12 +93,31 @@ export function describeGitOpsTerminating(summary?: {
   }
 }
 
+const FLUX_KIND_GROUPS: Readonly<Record<string, string | undefined>> = {
+  gitrepositories: 'source.toolkit.fluxcd.io',
+  ocirepositories: 'source.toolkit.fluxcd.io',
+  helmrepositories: 'source.toolkit.fluxcd.io',
+  helmcharts: 'source.toolkit.fluxcd.io',
+  buckets: 'source.toolkit.fluxcd.io',
+  kustomizations: 'kustomize.toolkit.fluxcd.io',
+  helmreleases: 'helm.toolkit.fluxcd.io',
+  alerts: 'notification.toolkit.fluxcd.io',
+}
+const ARGO_CD_KINDS = new Set(['applications', 'applicationsets', 'appprojects'])
+
+
 // getGitOpsResourceStatus dispatches sync/health extraction by kind. Argo
 // Applications read from .status (rich operationState + sync state); Argo
 // ApplicationSets read their own generator conditions; Flux kinds read
 // .status.conditions + .spec.suspend. Returns null if the resource has
 // no recognizable status (e.g. just-created, status not yet populated).
 export function getGitOpsResourceStatus(kind: string, resource: any): GitOpsStatus | null {
+  // Existing callers also pass status-only objects with a controller-specific
+  // kind. A loaded API identity, when present, must agree with that kind.
+  const group = resource?.apiVersion ? apiVersionToGroup(resource.apiVersion)
+    : ARGO_CD_KINDS.has(kind) ? 'argoproj.io' : FLUX_KIND_GROUPS[kind]
+  const tool = getGitOpsTool(kind, group)
+  if (!tool) return null
   if (kind === 'applications') {
     return argoStatusToGitOpsStatus(resource?.status ?? {})
   }
@@ -110,6 +130,7 @@ export function getGitOpsResourceStatus(kind: string, resource: any): GitOpsStat
       (resource?.status?.conditions ?? []) as FluxCondition[]
     )
   }
+  if (tool === 'argo') return null
   const conditions = (resource?.status?.conditions ?? []) as FluxCondition[]
   return fluxConditionsToGitOpsStatus(conditions, resource?.spec?.suspend === true, {
     generation: resource?.metadata?.generation,
@@ -117,12 +138,22 @@ export function getGitOpsResourceStatus(kind: string, resource: any): GitOpsStat
   })
 }
 
-// getGitOpsTool routes a kind+group to 'argo' or 'flux'. Same shape used
-// by both detail pages + the fleet list normalizers so a kustomization
-// always reads as 'flux' and an Argo Application always as 'argo'.
-export function getGitOpsTool(kind: string, group?: string): 'argo' | 'flux' {
-  if (group === 'argoproj.io' || kind === 'applications' || kind === 'applicationsets' || kind === 'appprojects') return 'argo'
-  return 'flux'
+
+// getGitOpsTool decides the controller family from the API group, the same
+// rule the backend applies (pkg/gitops ToolFor). The kind alone is not
+// identity: SIG Apps (app.k8s.io) defines an Application too, and argoproj.io
+// is shared with Argo Rollouts and Workflows. null means the object is not a
+// supported GitOps resource and has no GitOps view or operations.
+export function getGitOpsTool(kind: string, group: string | undefined): 'argo' | 'flux' | null {
+  if (group === 'argoproj.io') return ARGO_CD_KINDS.has(kind) ? 'argo' : null
+  if (group && FLUX_KIND_GROUPS[kind] === group) return 'flux'
+  return null
+}
+
+// gitOpsDetailGroup is the API group a detail page acts on: the fetched
+// object's own apiVersion once it has loaded, the route's group before that.
+export function gitOpsDetailGroup(routeGroup: string, resource: { apiVersion?: string } | null | undefined): string {
+  return resource?.apiVersion ? apiVersionToGroup(resource.apiVersion) : routeGroup
 }
 
 // isDestinationRef reports whether a resource named on a remote GitOps

package/src/components/gitops/index.ts

@@ -41,6 +41,7 @@ export {
   describeGitOpsTerminating,
   getGitOpsResourceStatus,
   getGitOpsTool,
+  gitOpsDetailGroup,
   isDestinationRef,
 } from './detail-helpers'
 export { SyncOptionsDialog } from './SyncOptionsDialog'

package/src/components/issues/IssuesView.tsx

@@ -88,8 +88,8 @@ export function IssuesView({ issues, anyData, resourceHref, onResourceClick, clu
         tone="healthy"
         variant="card"
         icon={CircleCheck}
-        headline="Nothing broken right now"
-        body="No active issues across the selected scope."
+        headline="No issues detected"
+        body="Radar's checks found nothing broken in the selected scope. They don't cover every failure, and Audit lists configuration that can still break things."
       />
     ) : (
       <EmptyState headline="No issue data yet" body="Connect a cluster to populate the issue queue." action={emptyAction} />
@@ -288,13 +288,16 @@ export function IssueRow({
             onToggle();
           }
         }}
-        className={`group @container/issue flex cursor-pointer items-center gap-3 border-l-[3px] py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent,var(--accent))]/40 ${open ? ISSUE_SEVERITY_HEADER_BAND_CLASS[severity] : ISSUE_SEVERITY_RAIL_CLASS[severity]}`}
+        className={`group @container/issue flex cursor-pointer items-center gap-3 phone:flex-wrap phone:gap-y-2 border-l-[3px] py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent,var(--accent))]/40 ${open ? ISSUE_SEVERITY_HEADER_BAND_CLASS[severity] : ISSUE_SEVERITY_RAIL_CLASS[severity]}`}
       >
         <SeverityIcon className={`h-[18px] w-[18px] shrink-0 ${ISSUE_SEVERITY_TEXT_CLASS[severity]}`} aria-hidden />
 
-        <div className="flex min-w-0 flex-1 flex-col gap-1">
-          <div className="flex min-w-0 items-baseline gap-2">
-            <span className="min-w-0 truncate text-sm font-medium text-theme-text-primary">{issueTitle(issue)}</span>
+        {/* Phones: the title takes its own line with the badge and reason
+            under it, and the severity, actions and chevron get a last line
+            (the right cluster below wraps under the text). */}
+        <div className="flex min-w-0 flex-1 flex-col gap-1 phone:basis-[calc(100%-30px)]">
+          <div className="flex min-w-0 items-baseline gap-2 phone:flex-wrap phone:gap-y-1">
+            <span className="min-w-0 truncate text-sm font-medium text-theme-text-primary phone:basis-full">{issueTitle(issue)}</span>
             <span className={`shrink-0 self-center ${groupBadgeClass(issue.category_group)}`}>{groupLabel(issue.category_group)}</span>
             {renderBadges?.(slotCtx)}
             {/* The detector reason rides the title row while COLLAPSED so the
@@ -351,15 +354,17 @@ export function IssueRow({
           {/* Narrow container: the meta chips drop to their own line here rather
               than stealing width from the title on the row above. Hidden once the
               row is wide enough to hold them inline in the right cluster. */}
-          {metaChips('flex @2xl/issue:hidden')}
+          {metaChips('flex @2xl/issue:hidden phone:hidden')}
         </div>
 
         {/* Right cluster — the always-visible affordances (per-row action +
             chevron) plus, on a wide container, the inline meta chips. */}
-        <div className="flex shrink-0 items-center gap-3">
-          {metaChips('hidden @2xl/issue:flex')}
-          {renderActions?.(slotCtx)}
-          <CollapseChevron open={open} className="h-4 w-4" />
+        <div className="flex shrink-0 items-center gap-3 phone:basis-full phone:pl-[30px]">
+          {metaChips('hidden @2xl/issue:flex phone:flex')}
+          <div className="contents phone:ml-auto phone:flex phone:items-center phone:gap-3">
+            {renderActions?.(slotCtx)}
+            <CollapseChevron open={open} className="h-4 w-4" />
+          </div>
         </div>
       </div>
 

package/src/components/issues/diagnostic.ts

@@ -54,6 +54,8 @@ export function diagnosticFactLabel(type: string): string {
       return 'Admission dependency';
     case 'network_policy_isolates':
       return 'Affected resources';
+    case 'tls_certificate_consumers':
+      return 'Used for TLS by';
     default:
       return type.replace(/_/g, ' ');
   }

package/src/components/issues/severity.ts

@@ -140,6 +140,7 @@ export function categoryLabel(category: string): string {
 // 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> = {
+  FlaggerCanaryFailed: "Canary rollout failed",
   InvalidSchedule: 'Scheduling error reported',
   UnparseableSchedule: 'Scheduling error reported',
   UnParseableCronJobSchedule: 'Scheduling error reported',

package/src/components/logs/LogCore.tsx

@@ -707,7 +707,7 @@ export function LogCore({
           })}
         </div>
 
-        <div role="group" aria-label="Log display and utilities" className="ml-auto flex shrink-0 flex-nowrap items-center gap-2">
+        <div role="group" aria-label="Log display and utilities" className="ml-auto flex shrink-0 flex-nowrap items-center gap-2 phone:gap-1">
 
         {/* Structured-log display mode: icon cycles compact→expanded→raw, chevron picks explicitly. */}
         {hasStructuredEntries && (
@@ -715,7 +715,7 @@ export function LogCore({
             <Tooltip content={`Structured: ${STRUCTURED_MODE_LABELS[structuredMode]} — click to cycle`} delay={TIP_DELAY} position="bottom">
               <button
                 onClick={cycleStructuredMode}
-                className={`p-1.5 rounded-l transition-colors ${
+                className={`p-1.5 rounded-l phone:rounded transition-colors ${
                   structuredMode === 'compact' ? iconBtnInactive : palette.toolbarActive
                 }`}
                 aria-label={`Structured log display mode: ${STRUCTURED_MODE_LABELS[structuredMode]}`}
@@ -723,7 +723,8 @@ export function LogCore({
                 <Braces className="w-4 h-4" />
               </button>
             </Tooltip>
-            <div className="relative" ref={structuredMenuRef}>
+            {/* Phones keep the icon (it cycles the modes) and drop the picker to fit one row. */}
+            <div className="relative phone:hidden" ref={structuredMenuRef}>
               <Tooltip content="Pick structured display mode" delay={TIP_DELAY} position="bottom">
                 <button
                   onClick={() => setShowStructuredMenu(prev => !prev)}
@@ -874,7 +875,7 @@ export function LogCore({
         </Tooltip>
 
         {!themeLocked && (
-          <Tooltip content={isDark ? 'Switch to light mode' : 'Switch to dark mode'} delay={TIP_DELAY} position="bottom">
+          <Tooltip content={isDark ? 'Switch to light mode' : 'Switch to dark mode'} delay={TIP_DELAY} position="bottom" wrapperClassName="phone:hidden">
             <button
               onClick={toggleDark}
               className={iconBtnInactive}
@@ -987,8 +988,9 @@ export function LogCore({
       </div>
 
       {/* Search bar */}
+      {/* Phones: the query takes the first line and the search options wrap under it. */}
       {search.isOpen && (
-        <div className={`@container/logsearch flex items-center gap-2 px-3 py-2 border-b ${palette.border} ${palette.toolbarBgMuted}`}>
+        <div className={`@container/logsearch flex items-center gap-2 phone:flex-wrap phone:gap-y-1.5 px-3 py-2 border-b ${palette.border} ${palette.toolbarBgMuted}`}>
           <Search className={`w-4 h-4 ${palette.textSecondary} shrink-0`} />
           <Input
             value={search.query}
@@ -1005,7 +1007,7 @@ export function LogCore({
               }
             }}
             placeholder="Search logs..."
-            className={`flex-1 bg-transparent ${palette.textPrimary} text-sm ${palette.placeholder} focus:outline-none min-w-0`}
+            className={`flex-1 phone:basis-[calc(100%-1.5rem)] bg-transparent ${palette.textPrimary} text-sm ${palette.placeholder} focus:outline-none min-w-0`}
             autoFocus
           />
 
@@ -1187,8 +1189,8 @@ export function LogCore({
         </div>
       )}
 
-      {/* Keyboard shortcut hints */}
-      <div className={`flex items-center gap-4 px-3 py-1 border-t ${palette.border} ${palette.toolbarBg} text-[10px] ${palette.textDisabled}`}>
+      {/* Keyboard shortcut hints (a phone has no keyboard to use them) */}
+      <div className={`flex items-center gap-4 px-3 py-1 border-t phone:hidden ${palette.border} ${palette.toolbarBg} text-[10px] ${palette.textDisabled}`}>
         {onStartStream && (!sourceUnavailable || isStreaming) && <Shortcut keys="S" label={isStreaming ? 'Stop stream' : 'Stream'} palette={palette} />}
         <Shortcut keys="Ctrl+F" label="Search" palette={palette} />
         {search.mode !== 'hide' && (
@@ -1353,7 +1355,7 @@ function LogLine({
   }
 
   return (
-    <div className={`flex ${palette.hoverSurface} group leading-5 px-2 ${isCurrentMatch ? palette.currentMatchBg : ''}`}>
+    <div className={`flex phone:flex-wrap ${palette.hoverSurface} group leading-5 px-2 ${isCurrentMatch ? palette.currentMatchBg : ''}`}>
       {leadSlot}
       {showTimestamp && entry.timestamp && (
         <span
@@ -1371,10 +1373,10 @@ function LogLine({
           [{entry.sourceLabel || entry.pod.split('-').slice(-2).join('-')}]
         </span>
       )}
-      <span className="flex-1 min-w-0">{contentElement}</span>
+      <span className="flex-1 min-w-0 phone:order-last phone:basis-full">{contentElement}</span>
       <button
         onClick={handleCopy}
-        className={`opacity-0 group-hover:opacity-100 focus-visible:opacity-100 ml-1 p-0.5 rounded ${palette.textTertiary} ${palette.hoverText} shrink-0 transition-opacity`}
+        className={`opacity-0 group-hover:opacity-100 focus-visible:opacity-100 ml-1 p-0.5 rounded ${palette.textTertiary} ${palette.hoverText} shrink-0 transition-opacity phone:ml-auto phone:opacity-100`}
         title="Copy line"
       >
         <Copy className="w-3 h-3" />

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

@@ -60,16 +60,16 @@ afterEach(async () => {
   vi.unstubAllGlobals()
 })
 
-async function renderViewer(fetchLogs: (params: LogsFetchParams) => Promise<{ [container: string]: string }>, autoStream = false, containers = ['app']) {
+async function renderViewer(fetchLogs: (params: LogsFetchParams) => Promise<{ [container: string]: string }>, autoStream = false, containers = ['app'], podName = 'web-0') {
   await act(async () =>
     root.render(
       <ToastProvider>
         <LogsViewer
           namespace="default"
-          podName="web-0"
+          podName={podName}
           containers={containers}
           fetchLogs={fetchLogs}
-          createStream={() => new EventSource('/stream')}
+          createStream={() => new EventSource(`/pods/default/${podName}/logs/stream`)}
           autoStream={autoStream}
         />
       </ToastProvider>,
@@ -234,62 +234,6 @@ it('with auto-stream on, a time range picked after the stream ended loads it ins
   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)
@@ -367,3 +311,104 @@ it('still shows a Radar failure as an error', async () => {
   await renderViewer(async () => { throw new ApiError(failure, { error: failure }) })
   expect(messageClass(failure)).toMatch(/text-red/)
 })
+
+function rangeSelect(): HTMLSelectElement {
+  const range = element.querySelector<HTMLSelectElement>('select')
+  if (!range) throw new Error('range select not rendered')
+  return range
+}
+
+const nextFrame = () => act(async () => { await new Promise(resolve => requestAnimationFrame(() => resolve(null))) })
+
+it('opening another pod with the same container name streams it, even after the first pod\'s stream ended', async () => {
+  const fetchLogs = vi.fn(async () => ({ app: '' }))
+  await renderViewer(fetchLogs, true, ['app'], 'web-0')
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  await act(async () => FakeEventSource.last?.emit('end', {}))
+  const ended = FakeEventSource.last
+
+  await renderViewer(fetchLogs, true, ['app'], 'web-1')
+
+  expect(FakeEventSource.last).not.toBe(ended)
+  expect(FakeEventSource.last?.url).toBe('/pods/default/web-1/logs/stream')
+  expect(fetchLogs).not.toHaveBeenCalled()
+})
+
+it('a manual Stop on one pod does not stop the next pod from streaming', async () => {
+  const fetchLogs = vi.fn(async () => ({ app: '' }))
+  await renderViewer(fetchLogs, true, ['app'], 'web-0')
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  await act(async () => button('Stop').click())
+
+  await renderViewer(fetchLogs, true, ['app'], 'web-1')
+
+  expect(FakeEventSource.last?.url).toBe('/pods/default/web-1/logs/stream')
+})
+
+it('Previous and the range are locked while an auto-stream opens', async () => {
+  await renderViewer(async () => ({ app: '' }), true)
+  expect(previousCheckbox().disabled).toBe(true)
+  expect(rangeSelect().disabled).toBe(true)
+
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  await act(async () => FakeEventSource.last?.emit('end', {}))
+  expect(previousCheckbox().disabled).toBe(false)
+  expect(rangeSelect().disabled).toBe(false)
+})
+
+it('Previous and the range are locked while a manually started stream opens', async () => {
+  await renderViewer(async () => ({ app: '' }))
+  expect(previousCheckbox().disabled).toBe(false)
+
+  await act(async () => button('Stream').click())
+
+  expect(previousCheckbox().disabled).toBe(true)
+  expect(rangeSelect().disabled).toBe(true)
+})
+
+it('a stream that is still opening can be stopped, which unlocks Previous', async () => {
+  await renderViewer(async () => ({ app: '' }))
+  await act(async () => button('Stream').click())
+  const opening = FakeEventSource.last
+
+  await act(async () => button('Stop').click())
+
+  expect(opening?.closed).toBe(true)
+  expect(previousCheckbox().disabled).toBe(false)
+  expect(button('Stream')).toBeTruthy()
+})
+
+it('a stream failure after lines arrived is shown above them', async () => {
+  await renderViewer(async () => ({ app: '' }))
+  await act(async () => button('Stream').click())
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  await act(async () => FakeEventSource.last?.emit('log', { timestamp: '2026-10-14T10:00:00Z', content: 'live line', container: 'app' }))
+  await nextFrame()
+  await act(async () => FakeEventSource.last?.emit('error', { error: 'Read error: unexpected EOF' }))
+
+  expect(element.querySelector('[role="alert"]')?.textContent).toBe('Read error: unexpected EOF · Previously loaded logs remain below.')
+  expect(element.textContent).toContain('OTHER 1')
+})
+
+const NOT_STARTED = 'This container has not started yet, so it has no logs. Kubernetes reports ContainerCreating.'
+
+it('shows a container that has not started in the empty-pane style', async () => {
+  await renderViewer(async () => { throw new ApiError(NOT_STARTED, { error: NOT_STARTED, error_code: 'container_not_started' }) })
+  expect(messageClass(NOT_STARTED)).not.toMatch(/text-red/)
+})
+
+it('shows what the live stream is waiting for, and drops it once lines arrive', async () => {
+  const waiting = `${NOT_STARTED} Logs will show here once it starts.`
+  await renderViewer(async () => ({ app: '' }), true)
+  await act(async () => FakeEventSource.last?.emit('connected', {}))
+  await act(async () => FakeEventSource.last?.emit('notice', { notice: waiting, notice_code: 'container_not_started' }))
+  expect(messageClass(waiting)).not.toMatch(/text-red/)
+  expect(button('Stop')).toBeTruthy()
+
+  await act(async () => FakeEventSource.last?.emit('notice', { notice: '' }))
+  await act(async () => FakeEventSource.last?.emit('log', { timestamp: '2026-10-14T10:00:00Z', content: 'started', container: 'app' }))
+  await nextFrame()
+
+  expect(element.textContent).not.toContain(waiting)
+  expect(element.textContent).toContain('OTHER 1')
+})

package/src/components/logs/LogsViewer.tsx

@@ -43,7 +43,7 @@ export interface LogsViewerProps {
 // 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'])
+const CLUSTER_ANSWER_CODES = new Set(['no_previous_run', 'logs_unavailable', 'container_not_started'])
 
 function isClusterAnswerCode(code: unknown): boolean {
   return typeof code === 'string' && CLUSTER_ANSWER_CODES.has(code)
@@ -56,7 +56,14 @@ function clusterAnswerOf(err: unknown): string | null {
   return isClusterAnswerCode(data.error_code) ? err.message : null
 }
 
-export function LogsViewer({
+// Keyed by pod: everything the viewer remembers (the container, Previous, the
+// auto-start latch, a manual Stop) belongs to one pod, and a host that swaps
+// the pod without remounting would carry it over to the next one.
+export function LogsViewer(props: LogsViewerProps) {
+  return <PodLogsViewer key={`${props.namespace}/${props.podName}`} {...props} />
+}
+
+function PodLogsViewer({
   namespace: _namespace,
   podName,
   containers,
@@ -74,6 +81,8 @@ export function LogsViewer({
   const [emptyMessage, setEmptyMessage] = useState<string | null>(null)
   const [logRange, setLogRange] = useState('500')
   const [showPrevious, setShowPrevious] = useState(false)
+  // What an open stream says it is waiting for, e.g. a container to start.
+  const [streamNotice, setStreamNotice] = useState<string | null>(null)
   const { showError, showSuccess } = useToast()
 
   const { tailLines, sinceSeconds } = parseLogRange(logRange)
@@ -109,6 +118,7 @@ export function LogsViewer({
     setIsLoading(true)
     setFetchError(null)
     setEmptyMessage(null)
+    setStreamNotice(null)
     try {
       const data = await fetchLogs({ container: selectedContainer, tailLines, sinceSeconds, previous: showPrevious })
       if (seq !== loadSeqRef.current) return
@@ -171,6 +181,7 @@ export function LogsViewer({
     setIsLoading(false)
     setFetchError(null)
     setEmptyMessage(null)
+    setStreamNotice(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).
@@ -184,6 +195,10 @@ export function LogsViewer({
           content: data.content || '',
           container: data.container || selectedContainer,
         }),
+        onNotice: (data: unknown) => {
+          const notice = typeof data === 'object' && data !== null && 'notice' in data && typeof data.notice === 'string' ? data.notice : ''
+          setStreamNotice(notice || null)
+        },
       },
       'Log stream connection failed',
     )
@@ -191,6 +206,7 @@ export function LogsViewer({
 
   const handleStopStreaming = useCallback(() => {
     userStoppedRef.current = true
+    setStreamNotice(null)
     stopStreaming()
   }, [stopStreaming])
 
@@ -220,24 +236,28 @@ export function LogsViewer({
     }
   }, [podName, selectedContainer, overrideDownload, showError, showSuccess])
 
+  // Previous and the range describe what a snapshot loads, so they stay
+  // locked from the moment a stream starts opening, not only once it is open.
+  const streamBusy = isStreaming || connecting
+
   const renderToolbarExtra = ({ isDark, palette }: { isDark: boolean; palette: LogPalette }) => (
     <>
       <ContainerSelect containers={containers} value={selectedContainer} onChange={setSelectedContainer} isDark={isDark} />
 
-      <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' : ''}`}>
+      <Tooltip content={streamBusy ? '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} ${streamBusy ? 'opacity-50 cursor-not-allowed' : ''}`}>
           <input
             type="checkbox"
             checked={showPrevious}
             onChange={(e) => setShowPrevious(e.target.checked)}
-            disabled={isStreaming}
+            disabled={streamBusy}
             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} disabled={isStreaming} />
+      <LogRangeSelect value={logRange} onChange={setLogRange} isDark={isDark} disabled={streamBusy} />
     </>
   )
 
@@ -260,13 +280,13 @@ export function LogsViewer({
       getRetainedEntries={getRetainedEntries}
       isLoading={isLoading || isConnecting}
       errorMessage={entries.length === 0 ? fetchError || (!emptyMessage && !streamAnswer ? streamError : null) : null}
-      isStreaming={isStreaming}
+      isStreaming={streamBusy}
       onStartStream={createStream ? handleStartStreaming : undefined}
       onStopStream={handleStopStreaming}
       onRefresh={loadLogs}
       onDownload={downloadLogs}
       onClear={clear}
-      emptyMessage={emptyMessage ?? streamAnswer ?? undefined}
+      emptyMessage={emptyMessage ?? streamAnswer ?? streamNotice ?? undefined}
       toolbarExtra={renderToolbarExtra}
       forceDark={forceDark}
       defaultDark={defaultDark}

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -327,7 +327,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
   const renderToolbarExtra = ({ isDark, palette }: { isDark: boolean; palette: LogPalette }) => (
     <>
       {/* Pod filter */}
-      <fieldset disabled={sourceUnavailable} className="flex items-center gap-2 disabled:opacity-50">
+      <fieldset disabled={sourceUnavailable} className="flex items-center gap-2 disabled:opacity-50 phone:flex-wrap">
       <div className="relative">
         <button
           onClick={() => setShowPodFilter(v => !v)}