@skyhook-io/k8s-ui 1.16.3 → 1.17.1

package/src/components/issues/ResourceIssuesSection.test.tsx

@@ -106,3 +106,31 @@ it('keeps pod/template evidence in expanded neutral context with navigable witne
   expect(expanded).not.toContain('confidence')
   expect(expanded).not.toContain('Caused by')
 })
+
+it('wraps a compact Pod scheduling cause separately and retains the full message in details', () => {
+  const raw = '0/2 nodes are available: 2 Too many pods. preemption: 0/2 nodes are available: 2 No preemption victims found for incoming pod.'
+  const pod: Issue = { ...issue, kind: 'Pod', reason: 'Unschedulable', cause: raw, message: raw }
+  const html = renderToString(<IssueRow issue={pod} compact open onToggle={() => {}} />)
+  expect(html).toContain('break-words text-xs text-theme-text-secondary')
+  expect(html).toContain('both nodes have reached their Pod limit')
+  expect(html).toContain(raw)
+  const producerMessage = '2 node(s) insufficient pods (0/2 nodes available)'
+  const reported = renderToString(<IssueRow issue={{ ...pod, cause: undefined, message: producerMessage }} compact open onToggle={() => {}} />)
+  expect(reported).toContain('both nodes have reached their Pod limit')
+  expect(reported).toContain(producerMessage)
+  const regular = renderToString(<IssueRow issue={pod} open={false} onToggle={() => {}} />)
+  expect(regular).not.toContain('both nodes have reached their Pod limit')
+})
+
+it.each(['Cluster', 'Deployment'])('wraps compact scheduling causes aggregated under %s', (kind) => {
+  const raw = '2 node(s) insufficient pods (0/2 nodes available)'
+  const aggregated: Issue = { ...issue, kind, reason: 'Unschedulable', cause: raw, message: raw }
+  const collapsed = renderToString(<IssueRow issue={aggregated} compact open={false} onToggle={() => {}} />)
+  expect(collapsed).toContain('<div class="break-words text-xs text-theme-text-secondary">both nodes have reached their Pod limit</div>')
+  expect(collapsed).not.toContain(raw)
+  const expanded = renderToString(<IssueRow issue={aggregated} compact open onToggle={() => {}} />)
+  expect(expanded).toContain(raw)
+  const regular = renderToString(<IssueRow issue={aggregated} open={false} onToggle={() => {}} />)
+  expect(regular).toContain('Unschedulable')
+  expect(regular).not.toContain('both nodes have reached their Pod limit')
+})

package/src/components/issues/ResourceIssuesSection.tsx

@@ -8,7 +8,9 @@ export function ResourceIssuesSection({
   issues,
   onResourceClick,
   subjectResource,
+  compact,
 }: {
+  compact?: boolean
   issues: Issue[] | undefined
   /** When provided, related resources in a causal link become clickable. */
   onResourceClick?: (ref: IssueResourceRef) => void
@@ -36,6 +38,7 @@ export function ResourceIssuesSection({
             <IssueRow
               key={key}
               issue={issue}
+              compact={compact}
               open={openId === key}
               onToggle={() => setOpenId((cur) => (cur === key ? null : key))}
               onResourceClick={onResourceClick}

package/src/components/issues/index.ts

@@ -16,7 +16,7 @@ export {
   issueSortAnchor,
   compareIssueSortAnchors,
 } from './types';
-export type { Issue, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagnosticContext, IssueDiagnosticFact, IssueDiagnosticConfidence, IssueDiagnosticIssueRef, IssueDiagnosticRole, IssueIncidentParent, IssueChangeContext, IssueRecentChange, IssueRecentChangeField } from './types';
+export type { Issue, IssueConditionalCleanup, IssueFinalizerRemoval, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagnosticContext, IssueDiagnosticFact, IssueDiagnosticConfidence, IssueDiagnosticIssueRef, IssueDiagnosticRole, IssueIncidentParent, IssueChangeContext, IssueRecentChange, IssueRecentChangeField } from './types';
 export {
   ISSUE_SEVERITY_LABEL,
   ISSUE_SEVERITY_BADGE_CLASS,
@@ -24,5 +24,7 @@ export {
   ISSUE_SEVERITY_FILL_CLASS,
   ISSUE_SEVERITY_RAIL_CLASS,
   categoryLabel,
+  issueTitle,
+  issueReasonTitle,
   groupLabel,
 } from './severity';

package/src/components/issues/issue-timing.ts

@@ -1,7 +1,7 @@
 import { isDeploymentLikeWorkloadKind } from '../../types';
 import type { Issue } from './types';
 
-export type IssueTimingDisplayKind = 'creation' | 'regression';
+export type IssueTimingDisplayKind = 'creation' | 'regression' | 'deletion';
 
 export interface IssueTimingDisplay {
   kind: IssueTimingDisplayKind;
@@ -77,6 +77,17 @@ export function issueTiming(issue: Issue): IssueTimingDisplay | null {
   const grouped = (coverage?.known ?? 0) + (coverage?.unknown ?? 0) > 1;
   const uncertaintyMeta = onsetUncertaintyMeta(issue);
   const uncertaintyTooltip = onsetUncertaintyTooltip(issue);
+  // A stuck deletion is timed from its deletionTimestamp. The creation-vs-healthy
+  // classification only says whether the object was deleted soon after it was
+  // created, which is not what the age beside this chip measures.
+  if (issue.issue_timing_basis === 'deletion' && issue.issue_timing) {
+    return {
+      kind: 'deletion',
+      chip: 'since deletion',
+      meta: 'pending since deletion was requested',
+      tooltip: 'Timed from when deletion was requested; the object is still present.',
+    };
+  }
   switch (issue.issue_timing) {
     case 'started_after_resource_was_healthy': {
       if (issue.issue_timing_basis === 'owner_condition') {
@@ -113,9 +124,9 @@ export function issueTiming(issue: Issue): IssueTimingDisplay | null {
       }
       return {
         kind: 'regression',
-        chip: 'after healthy',
+        chip: issue.kind === 'Node' && issue.reason === 'NotReady' ? 'NotReady' : 'after healthy',
         meta: 'failing evidence followed a healthy period',
-        tooltip: 'A healthy period preceded this failing evidence.',
+        tooltip: issue.kind === 'Node' && issue.reason === 'NotReady' ? 'The Ready condition stopped reporting healthy at this time.' : 'A healthy period preceded this failing evidence.',
       };
     }
     case 'started_at_resource_creation': {

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

@@ -2,7 +2,7 @@ import { afterEach, describe, it, expect, vi } from 'vitest'
 import { createElement } from 'react'
 import { renderToString } from 'react-dom/server'
 import { compareIssues, issueSortAnchor, subjectRef, memberRef, normalizeImagePullMessage, issueMessageParts, type Issue } from './types'
-import { categoryLabel, groupBadgeClass, groupLabel } from './severity'
+import { categoryLabel, groupBadgeClass, groupLabel, issueTitle } from './severity'
 import { IssueRow } from './IssuesView'
 import { issueFirstSeenTitle, issueResourceCreatedTitle, issueTiming } from './issue-timing'
 
@@ -83,6 +83,8 @@ describe('category/group label fallbacks', () => {
   it('returns the mapped label, else humanizes (server-added category needs no frontend deploy)', () => {
     expect(categoryLabel('crashloop')).toBe('Crash loop')
     expect(categoryLabel('some_new_future_category')).toBe('Some new future category')
+    expect(issueTitle({ category: 'backup_failed', reason: 'CNPGWALArchivingFailing' })).toBe('WAL archiving failing')
+    expect(issueTitle({ category: 'backup_failed', reason: 'BackupFailed' })).toBe('Backup failed')
   })
   it('humanizes an unmapped group', () => {
     expect(groupLabel('runtime')).toBe('Runtime')
@@ -137,9 +139,36 @@ describe('IssueRow', () => {
     expect(html).toContain('after healthy')
   })
 
+  it('labels a stuck deletion by how long deletion has been pending', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-06-30T12:00:00Z'))
+
+    const html = renderToString(createElement(IssueRow, {
+      issue: mk({
+        id: 'terminating',
+        kind: 'VMAgent',
+        group: 'operator.victoriametrics.com',
+        category: 'termination_stuck',
+        category_group: 'control_plane',
+        reason: 'Terminating stuck',
+        first_seen: '2026-06-30T11:30:00Z',
+        issue_timing: 'started_at_resource_creation',
+        issue_timing_basis: 'deletion',
+      }),
+      open: true,
+      onToggle: () => undefined,
+    }))
+
+    expect(html).toContain('30m')
+    expect(html).toContain('since deletion')
+    expect(html).toContain('pending since deletion was requested')
+    expect(html).not.toContain('since creation')
+    expect(html).not.toContain('first reconciliation')
+  })
+
   it('uses the category-group chip class in the queue row', () => {
     const html = renderToString(createElement(IssueRow, {
-      issue: mk({ category_group: 'control_plane' }),
+      issue: mk({ category_group: 'control_plane', kind: 'Node' }),
       open: false,
       onToggle: () => undefined,
     }))
@@ -394,6 +423,25 @@ describe('issueTiming', () => {
     })
   })
 
+  it('times stuck deletions from the deletion request, however soon after creation it came', () => {
+    for (const timing of ['started_at_resource_creation', 'started_after_resource_was_healthy'] as const) {
+      for (const kind of ['Pod', 'VMAgent']) {
+        const display = issueTiming(mk({
+          kind,
+          category: 'termination_stuck',
+          issue_timing: timing,
+          issue_timing_basis: 'deletion',
+        }))
+        expect(display).toMatchObject({
+          kind: 'deletion',
+          chip: 'since deletion',
+          meta: 'pending since deletion was requested',
+        })
+        expect(`${display?.chip} ${display?.meta} ${display?.tooltip}`).not.toMatch(/creation|healthy|deploy/i)
+      }
+    }
+  })
+
   it('describes direct after-healthy timing without coupling it to first_seen', () => {
     const display = issueTiming(mk({
       first_seen: '2026-06-30T10:00:00Z',

package/src/components/issues/severity.ts

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

package/src/components/issues/types.ts

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

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

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

package/src/components/logs/LogCore.tsx

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

package/src/components/logs/LogToolbarSelects.tsx

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