@skyhook-io/k8s-ui 1.7.10 → 1.7.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.7.10",
+  "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/GitOpsTableView.tsx

@@ -201,6 +201,14 @@ export interface GitOpsTableViewProps {
   // detected" copy. Hub passes "No GitOps resources across the fleet".
   emptyStateTitle?: string
   emptyStateBody?: string
+  /**
+   * Which side the filter rail sits on. Default 'left' (OSS Radar, which
+   * has no app sidebar). A host with its own left navigation rail (the
+   * Cloud hub) passes 'right' so the GitOps filters don't stack a second
+   * column against that nav and instead match the host's other faceted
+   * pages. Mobile stacking (filters above the table) is unaffected.
+   */
+  filtersSide?: 'left' | 'right'
   /**
    * Global namespace pick from the host's NamespaceSwitcher. Used to
    * surface "viewing in namespace: X" context and to power the Clear
@@ -249,6 +257,7 @@ export function GitOpsTableView({
   onClearNamespaces,
   onRowAction,
   pendingRowActions,
+  filtersSide = 'left',
 }: GitOpsTableViewProps) {
   const searchInputRef = useRef<HTMLInputElement>(null)
   const [mode, setMode] = useState<GitOpsMode>('applications')
@@ -492,8 +501,13 @@ export function GitOpsTableView({
   ]
 
   return (
-    <div className="flex h-full min-w-0 flex-1 overflow-hidden bg-theme-base max-lg:flex-col">
+    <div
+      className={`flex h-full min-w-0 flex-1 overflow-hidden bg-theme-base max-lg:flex-col ${
+        filtersSide === 'right' ? 'lg:flex-row-reverse' : ''
+      }`}
+    >
       <GitOpsFilterSidebar
+        side={filtersSide}
         mode={mode}
         onModeChange={setMode}
         modeCounts={modeCounts}
@@ -707,6 +721,7 @@ export function GitOpsTableView({
 // =============================================================================
 
 function GitOpsFilterSidebar({
+  side,
   mode,
   onModeChange,
   modeCounts,
@@ -729,6 +744,7 @@ function GitOpsFilterSidebar({
   onToggleNamespace,
   onClear,
 }: {
+  side: 'left' | 'right'
   mode: GitOpsMode
   onModeChange: (mode: GitOpsMode) => void
   modeCounts: Record<GitOpsMode, number>
@@ -752,7 +768,11 @@ function GitOpsFilterSidebar({
   onClear: () => void
 }) {
   return (
-    <aside className="flex w-72 shrink-0 flex-col overflow-hidden border-r border-theme-border bg-theme-surface/90 max-lg:max-h-72 max-lg:w-full max-lg:border-b max-lg:border-r-0">
+    <aside
+      className={`flex w-72 shrink-0 flex-col overflow-hidden border-theme-border bg-theme-surface/90 max-lg:max-h-72 max-lg:w-full max-lg:border-b ${
+        side === 'right' ? 'border-l max-lg:border-l-0' : 'border-r max-lg:border-r-0'
+      }`}
+    >
       <div className="flex items-center justify-between border-b border-theme-border px-3 py-2">
         <span className="text-sm font-medium text-theme-text-secondary">GitOps Filters</span>
         <button type="button" onClick={onClear} className="text-[10px] font-medium text-blue-500 hover:text-blue-400">

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}
 
@@ -215,6 +218,7 @@ function IssueRow({
             <div className="border-t border-theme-border bg-theme-base/40 px-4 py-4 pl-11">
               <div className="flex flex-col gap-4">
                 <Diagnosis issue={issue} />
+                <DiagnosticContext issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} />
                 <div className="border-t border-theme-border/70 pt-3">
                   <AffectedResources issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} />
                 </div>
@@ -237,33 +241,181 @@ 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">
+          {changeContextText(issue.change_context)}
+        </p>
+      ) : 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>
   );
 }
 
-// Native-tooltip detail for the collapsed-row age chip: absolute onset + last-seen
+function changeContextText(change: NonNullable<Issue['change_context']>): string {
+  const parts = [change.when ? `Changed ${change.when} ago` : 'Changed', change.what ? change.what.replace(/_/g, ' ') : null, change.evidence].filter(Boolean);
+  return parts.join(' · ');
+}
+
+function DiagnosticContext({
+  issue,
+  resourceHref,
+  onResourceClick,
+}: {
+  issue: Issue;
+  resourceHref?: (ref: IssueResourceRef) => string;
+  onResourceClick?: (ref: IssueResourceRef) => void;
+}) {
+  const ctx = issue.diagnostic_context;
+  const facts = ctx?.facts?.filter((fact) => fact.message || fact.refs?.length || fact.related_issues?.length) ?? [];
+  if (!ctx || facts.length === 0) return null;
+
+  return (
+    <section className="flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Context</h4>
+        {ctx.role ? <span className="badge-sm text-[10px] text-theme-text-secondary">{diagnosticRoleLabel(ctx.role)}</span> : null}
+      </div>
+      <ul className="flex flex-col gap-2">
+        {facts.map((fact, idx) => (
+          <li key={`${fact.type}-${idx}`} className="flex flex-col gap-1.5 rounded-md border border-theme-border/70 px-2.5 py-2">
+            <div className="flex min-w-0 items-baseline gap-2">
+              <span className="shrink-0 text-xs font-medium text-theme-text-secondary">{diagnosticFactLabel(fact.type)}</span>
+              {fact.message ? <span className="min-w-0 break-words text-xs leading-relaxed text-theme-text-tertiary">{fact.message}</span> : null}
+            </div>
+            {fact.related_issues?.length ? (
+              <ul className="flex flex-col gap-px">
+                {fact.related_issues.map((related, relIdx) => (
+                  <ResourceLine
+                    key={`${related.ref.group ?? ''}/${related.ref.kind}/${related.ref.namespace ?? ''}/${related.ref.name}#${relIdx}`}
+                    label="Related"
+                    refForLink={memberRef(issue, related.ref)}
+                    resourceHref={resourceHref}
+                    onResourceClick={onResourceClick}
+                  />
+                ))}
+              </ul>
+            ) : null}
+            {fact.refs?.length ? (
+              <ul className="flex flex-col gap-px">
+                {fact.refs.map((ref, refIdx) => (
+                  <ResourceLine
+                    key={`${ref.group ?? ''}/${ref.kind}/${ref.namespace ?? ''}/${ref.name}#${refIdx}`}
+                    refForLink={memberRef(issue, ref)}
+                    resourceHref={resourceHref}
+                    onResourceClick={onResourceClick}
+                  />
+                ))}
+              </ul>
+            ) : null}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function diagnosticRoleLabel(role: string): string {
+  switch (role) {
+    case 'candidate':
+      return 'Candidate signal';
+    case 'affected':
+      return 'Affected signal';
+    case 'rollup':
+      return 'Rollup';
+    default:
+      return 'Context';
+  }
+}
+
+function diagnosticFactLabel(type: string): string {
+  switch (type) {
+    case 'explicit_reference':
+      return 'Explicit reference';
+    case 'owner_rollup':
+      return 'Owner rollup';
+    case 'selected_backend_issue':
+      return 'Selected backend';
+    case 'service_config_mismatch':
+      return 'Service config';
+    case 'service_env_reference':
+      return 'Service env';
+    case 'probe_target_mismatch':
+      return 'Probe target';
+    case 'blocked_init_container':
+      return 'Init container';
+    case 'restart_cause':
+      return 'Restart cause';
+    default:
+      return type.replace(/_/g, ' ');
+  }
+}
+
+// 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 } 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

@@ -57,6 +57,52 @@ export interface IssueAffected {
   nodes?: number;
 }
 
+export type IssueDiagnosticRole = 'candidate' | 'affected' | 'rollup' | 'context';
+
+export interface IssueDiagnosticIssueRef {
+  ref: IssueResourceRef;
+  reason?: string;
+  category?: string;
+  severity?: IssueSeverity;
+}
+
+export interface IssueDiagnosticFact {
+  type: string;
+  message?: string;
+  refs?: IssueResourceRef[];
+  related_issues?: IssueDiagnosticIssueRef[];
+}
+
+export interface IssueDiagnosticContext {
+  role?: IssueDiagnosticRole;
+  facts?: IssueDiagnosticFact[];
+}
+
+export interface IssueChangeContext {
+  changed: boolean;
+  what?: string;
+  when?: string;
+  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,
@@ -90,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).
@@ -98,12 +156,28 @@ export interface Issue {
   count?: number;
 
   affected?: IssueAffected;
+  owner?: IssueResourceRef;
   members?: IssueResourceRef[];
   members_truncated?: boolean;
+  diagnostic_context?: IssueDiagnosticContext;
+  change_context?: IssueChangeContext;
 
   // 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 => (