@skyhook-io/k8s-ui 1.16.1 → 1.16.2

package/README.md

@@ -2,6 +2,28 @@
 
 Shared, source-distributed Kubernetes UI components used by Radar.
 
+## Local terminal metadata
+
+`LocalTerminalTab` accepts optional `onSessionInfo` and `toolbarExtra` props.
+`onSessionInfo` reports the server's `session` frame (`context` and
+`kubeconfigIsolated`), and receives `null` when a connection attempt starts.
+This describes the supplied kubeconfig, not a shell's live command target.
+`toolbarExtra` lets the host render that information in the terminal toolbar.
+Hosts can update a dock tab's label and optional full-name tooltip with
+`useDock().setTabTitle(id, title, titleTooltip)`.
+The optional `DockTab.localTerminalContext` field lets a host retain the full
+context selected when a local terminal was requested. An empty string records
+no active context; an omitted field records no intent. The shared terminal and
+open hook do not interpret it; Radar's host wrapper checks it on open/reconnect.
+`canConnect` is a predicate evaluated during rendering to disable Reconnect/Retry,
+and before an attempt to preserve the existing terminal when refused.
+`onConnectionError` lets a host refresh connection state after a failed WebSocket
+handshake.
+
+`initialCommand` is sent once per mounted terminal. Reconnect does not repeat a
+command that was already sent; if the connection closes before delivery, the
+command remains pending for the next connection.
+
 ## YAML editor bundling
 
 `YamlEditor` and `YamlDiffEditor` bundle Monaco, its editor worker, and the YAML language worker into the consuming application. They make no runtime CDN or internet requests, so they work in air-gapped environments.

package/package.json

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

package/src/components/dock/BottomDock.tsx

@@ -4,6 +4,7 @@ import { X, ChevronDown, ChevronUp, Terminal, FileText, Trash2, Layers, Maximize
 import { clsx } from 'clsx'
 import { useDock, DockTab } from './DockContext'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
+import { Tooltip } from '../ui/Tooltip'
 
 const MIN_HEIGHT = 200
 const MAX_HEIGHT_RATIO = 0.7
@@ -224,7 +225,13 @@ function TabButton({
       onClick={onSelect}
     >
       <Icon className="w-3.5 h-3.5" />
-      <span className="truncate max-w-[120px]">{tab.title}</span>
+      {tab.titleTooltip ? (
+        <Tooltip content={tab.titleTooltip} wrapperClassName="min-w-0">
+          <span className="block truncate max-w-[120px]">{tab.title}</span>
+        </Tooltip>
+      ) : (
+        <span className="truncate max-w-[120px]">{tab.title}</span>
+      )}
       <button
         onClick={(e) => {
           e.stopPropagation()

package/src/components/dock/DockContext.tsx

@@ -6,6 +6,7 @@ export interface DockTab {
   id: string
   type: DockTabType
   title: string
+  titleTooltip?: string
   // Common app context (optional — app-specific, used by tab content components)
   orgId?: string
   clusterId?: string
@@ -22,6 +23,7 @@ export interface DockTab {
   nodeName?: string
   // Local terminal props
   initialCommand?: string
+  localTerminalContext?: string
 }
 
 export interface DockContextValue {
@@ -33,6 +35,7 @@ export interface DockContextValue {
   isMaximized: boolean
   isResizing: boolean
   addTab: (tab: Omit<DockTab, 'id'>) => string
+  setTabTitle: (id: string, title: string, titleTooltip?: string) => void
   removeTab: (id: string) => void
   setActiveTab: (id: string) => void
   toggleExpanded: () => void
@@ -118,6 +121,10 @@ export function DockProvider({ children }: { children: ReactNode }) {
     })
   }, [activeTabId])
 
+  const setTabTitle = useCallback((id: string, title: string, titleTooltip?: string) => {
+    setTabs(prev => prev.map(tab => tab.id === id ? { ...tab, title, titleTooltip } : tab))
+  }, [])
+
   const setActiveTab = useCallback((id: string) => {
     setActiveTabId(id)
   }, [])
@@ -142,6 +149,7 @@ export function DockProvider({ children }: { children: ReactNode }) {
       isMaximized,
       isResizing,
       addTab,
+      setTabTitle,
       removeTab,
       setActiveTab,
       toggleExpanded,

package/src/components/dock/LocalTerminalTab.test.tsx

@@ -0,0 +1,189 @@
+// @vitest-environment jsdom
+import { act, StrictMode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+import { LocalTerminalTab, type LocalTerminalTabProps } from './LocalTerminalTab'
+import { TerminalTab } from './TerminalTab'
+
+vi.mock('@xterm/xterm', () => ({
+  Terminal: class {
+    rows = 24
+    cols = 80
+    loadAddon() {}
+    open() {}
+    resize() {}
+    focus() {}
+    dispose() {}
+    write() {}
+    onData() {}
+  },
+}))
+vi.mock('@xterm/addon-fit', () => ({ FitAddon: class { proposeDimensions() { return { rows: 24, cols: 80 } } } }))
+vi.mock('@xterm/addon-web-links', () => ({ WebLinksAddon: class {} }))
+vi.mock('./terminalClipboard', () => ({ setupTerminalClipboard: () => () => {}, copyTerminalSelection: vi.fn() }))
+vi.mock('./TerminalClipboardToolbar', () => ({ TerminalClipboardToolbar: () => null }))
+vi.mock('./useMultilinePasteConfirm', () => ({ useMultilinePasteConfirm: () => ({ confirmPaste: vi.fn(), pasteDialog: null }) }))
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+
+class Socket {
+  static OPEN = 1
+  static instances: Socket[] = []
+  readyState = 1
+  onopen?: () => void
+  onclose?: () => void
+  onmessage?: (event: { data: string }) => void
+  send = vi.fn()
+  close() { this.readyState = 3; this.onclose?.() }
+  constructor() { Socket.instances.push(this) }
+  session(context: string) {
+    this.onmessage?.({ data: JSON.stringify({ type: 'session', context, kubeconfigIsolated: true }) })
+  }
+}
+let root: Root
+let element: HTMLDivElement
+beforeEach(() => {
+  Socket.instances = []
+  vi.stubGlobal('WebSocket', Socket)
+  vi.stubGlobal('ResizeObserver', class { observe() {} disconnect() {} })
+  vi.stubGlobal('requestAnimationFrame', () => 0)
+  element = document.createElement('div')
+  document.body.appendChild(element)
+  root = createRoot(element)
+})
+afterEach(async () => {
+  await act(async () => root.unmount())
+  element.remove()
+  vi.unstubAllGlobals()
+  vi.useRealTimers()
+})
+async function render(props: Partial<LocalTerminalTabProps> = {}, strict = false) {
+  await act(async () => {
+    const terminal = <LocalTerminalTab createSession={async () => ({ wsUrl: 'ws://localhost' })} {...props} />
+    root.render(strict ? <StrictMode>{terminal}</StrictMode> : terminal)
+  })
+}
+
+it('reports the current session, clears metadata on reconnect, and ignores old socket messages', async () => {
+  const firstCallback = vi.fn()
+  await render({ onSessionInfo: firstCallback })
+  expect(firstCallback).toHaveBeenCalledWith(null)
+  const old = Socket.instances[0]
+  await act(async () => { old.onopen?.(); old.session('production') })
+  expect(firstCallback).toHaveBeenLastCalledWith({ context: 'production', kubeconfigIsolated: true })
+  const currentCallback = vi.fn()
+  await render({ onSessionInfo: currentCallback })
+  await act(async () => old.close())
+  await act(async () => element.querySelector<HTMLButtonElement>('button')!.click())
+  expect(currentCallback).toHaveBeenLastCalledWith(null)
+  const current = Socket.instances[1]
+  await act(async () => { current.onopen?.(); current.session('staging'); old.session('production') })
+  expect(currentCallback).toHaveBeenLastCalledWith({ context: 'staging', kubeconfigIsolated: true })
+  expect(currentCallback).toHaveBeenCalledTimes(2)
+})
+
+it('does not open an obsolete session when Strict Mode creations resolve out of order', async () => {
+  let resolveOld!: (value: { wsUrl: string }) => void
+  const pending = new Promise<{ wsUrl: string }>(resolve => { resolveOld = resolve })
+  const createSession = vi.fn().mockReturnValueOnce(pending).mockResolvedValueOnce({ wsUrl: 'ws://localhost/current' })
+  const onSessionInfo = vi.fn()
+  await render({ createSession, onSessionInfo }, true)
+  expect(createSession).toHaveBeenCalledTimes(2)
+  expect(Socket.instances).toHaveLength(1)
+  await act(async () => resolveOld({ wsUrl: 'ws://localhost/obsolete' }))
+  expect(Socket.instances).toHaveLength(1)
+  await act(async () => Socket.instances[0].session('current'))
+  expect(onSessionInfo).toHaveBeenLastCalledWith({ context: 'current', kubeconfigIsolated: true })
+})
+
+it('sends the initial command once and does not replay it on reconnect', async () => {
+  vi.useFakeTimers()
+  await render({ initialCommand: 'aws sso login' })
+  const first = Socket.instances[0]
+  await act(async () => first.onopen?.())
+  expect(first.send).not.toHaveBeenCalledWith(JSON.stringify({ type: 'input', data: 'aws sso login\n' }))
+  await act(async () => vi.advanceTimersByTime(300))
+  const inputs = () => Socket.instances.flatMap(socket => socket.send.mock.calls.map(([data]) => JSON.parse(data))).filter(message => message.type === 'input')
+  expect(inputs()).toEqual([{ type: 'input', data: 'aws sso login\n' }])
+
+  await act(async () => first.close())
+  await act(async () => element.querySelector<HTMLButtonElement>('button')!.click())
+  await act(async () => Socket.instances[1].onopen?.())
+  await act(async () => vi.advanceTimersByTime(300))
+  expect(inputs()).toEqual([{ type: 'input', data: 'aws sso login\n' }])
+})
+
+it('keeps an unsent initial command available when the first connection closes before delivery', async () => {
+  vi.useFakeTimers()
+  await render({ initialCommand: 'gcloud auth login' })
+  const first = Socket.instances[0]
+  await act(async () => first.onopen?.())
+  await act(async () => vi.advanceTimersByTime(100))
+  await act(async () => first.close())
+  await act(async () => element.querySelector<HTMLButtonElement>('button')!.click())
+  const second = Socket.instances[1]
+  await act(async () => second.onopen?.())
+  await act(async () => vi.advanceTimersByTime(200))
+  const input = JSON.stringify({ type: 'input', data: 'gcloud auth login\n' })
+  expect(first.send).not.toHaveBeenCalledWith(input)
+  expect(second.send).not.toHaveBeenCalledWith(input)
+  await act(async () => vi.advanceTimersByTime(100))
+  expect(second.send.mock.calls.filter(([data]) => JSON.parse(data).type === 'input')).toEqual([[input]])
+})
+
+it('sends the initial command independently in each terminal tab', async () => {
+  vi.useFakeTimers()
+  await act(async () => {
+    root.render(<>
+      <LocalTerminalTab createSession={async () => ({ wsUrl: 'ws://localhost/first' })} initialCommand="aws sso login" />
+      <LocalTerminalTab createSession={async () => ({ wsUrl: 'ws://localhost/second' })} initialCommand="aws sso login" />
+    </>)
+  })
+  expect(Socket.instances).toHaveLength(2)
+  await act(async () => Socket.instances.forEach(socket => socket.onopen?.()))
+  await act(async () => vi.advanceTimersByTime(300))
+  const input = JSON.stringify({ type: 'input', data: 'aws sso login\n' })
+  for (const socket of Socket.instances) {
+    expect(socket.send.mock.calls.filter(([data]) => JSON.parse(data).type === 'input')).toEqual([[input]])
+  }
+})
+
+it('keeps a blocked reconnect intact until the host permits it', async () => {
+  vi.useFakeTimers()
+  let allowed = true
+  const createSession = vi.fn(async () => ({ wsUrl: 'ws://localhost' }))
+  const onSessionInfo = vi.fn()
+  await render({ createSession, canConnect: () => allowed, initialCommand: 'auth-command', onSessionInfo })
+  await act(async () => Socket.instances[0].onopen?.())
+  await act(async () => vi.advanceTimersByTime(300))
+  await act(async () => Socket.instances[0].close())
+  const terminal = element.querySelector('div.absolute')
+  expect(terminal).not.toBeNull()
+  const metadataCalls = onSessionInfo.mock.calls.length
+  allowed = false
+  await act(async () => element.querySelector<HTMLButtonElement>('button')!.click())
+  expect(createSession).toHaveBeenCalledTimes(1)
+  expect(onSessionInfo).toHaveBeenCalledTimes(metadataCalls)
+  expect(element.contains(terminal)).toBe(true)
+  allowed = true
+  await act(async () => element.querySelector<HTMLButtonElement>('button')!.click())
+  await act(async () => Socket.instances[1].onopen?.())
+  await act(async () => vi.advanceTimersByTime(300))
+  expect(createSession).toHaveBeenCalledTimes(2)
+  expect(Socket.instances.flatMap(s => s.send.mock.calls).filter(([data]) => JSON.parse(data).type === 'input')).toHaveLength(1)
+})
+
+it.each(['local', 'pod'])('allows Retry after a %s terminal creation error', async kind => {
+  const createSession = vi.fn()
+    .mockRejectedValueOnce(new Error('creation failed'))
+    .mockResolvedValueOnce({ wsUrl: 'ws://localhost' })
+  await act(async () => root.render(kind === 'local'
+    ? <LocalTerminalTab createSession={createSession} />
+    : <TerminalTab namespace="default" podName="pod" containerName="app" containers={['app']} createSession={createSession} />))
+  expect(element.textContent).toContain('creation failed')
+  const retry = [...element.querySelectorAll('button')].find(button => button.textContent?.trim() === 'Retry')!
+  await act(async () => retry.click())
+  expect(createSession).toHaveBeenCalledTimes(2)
+  expect(Socket.instances).toHaveLength(1)
+  await act(async () => Socket.instances[0].onopen?.())
+  expect(element.textContent).not.toContain('creation failed')
+})

package/src/components/dock/LocalTerminalTab.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useRef, useCallback, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useCallback, useState, type ReactNode } from 'react'
 import { Terminal as XTerm } from '@xterm/xterm'
 import { FitAddon } from '@xterm/addon-fit'
 import { WebLinksAddon } from '@xterm/addon-web-links'
@@ -9,31 +9,52 @@ import { setupTerminalClipboard, copyTerminalSelection } from './terminalClipboa
 import { TerminalClipboardToolbar } from './TerminalClipboardToolbar'
 import { useMultilinePasteConfirm } from './useMultilinePasteConfirm'
 
+export interface LocalTerminalSessionInfo {
+  context: string
+  kubeconfigIsolated: boolean
+}
+
 export interface LocalTerminalTabProps {
   isActive?: boolean
   /** Returns the WebSocket URL for the local terminal session */
   createSession: () => Promise<{ wsUrl: string }>
-  /** Command to auto-execute after the terminal connects */
+  /** Command to send once per mounted terminal after a connection opens */
   initialCommand?: string
+  canConnect?: () => boolean
+  onConnectionError?: () => void
+  onSessionInfo?: (info: LocalTerminalSessionInfo | null) => void
+  toolbarExtra?: ReactNode
 }
 
 export function LocalTerminalTab({
   isActive = true,
   createSession,
   initialCommand,
+  canConnect,
+  onConnectionError,
+  onSessionInfo,
+  toolbarExtra,
 }: LocalTerminalTabProps) {
   const terminalRef = useRef<HTMLDivElement>(null)
   const xtermRef = useRef<XTerm | null>(null)
   const fitAddonRef = useRef<FitAddon | null>(null)
   const wsRef = useRef<WebSocket | null>(null)
   const cleanupRef = useRef<(() => void) | undefined>(undefined)
-  const cancelledRef = useRef(false)
+  const connectionAttemptRef = useRef(0)
+  const initialCommandSentRef = useRef(false)
   const createSessionRef = useRef(createSession)
+  const onSessionInfoRef = useRef(onSessionInfo)
+  const canConnectRef = useRef(canConnect)
+  const onConnectionErrorRef = useRef(onConnectionError)
   useLayoutEffect(() => { createSessionRef.current = createSession }, [createSession])
+  useLayoutEffect(() => { onSessionInfoRef.current = onSessionInfo }, [onSessionInfo])
+  useLayoutEffect(() => { canConnectRef.current = canConnect }, [canConnect])
+  useLayoutEffect(() => { onConnectionErrorRef.current = onConnectionError }, [onConnectionError])
   const [isConnected, setIsConnected] = useState(false)
   const [isConnecting, setIsConnecting] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [hasSelection, setHasSelection] = useState(false)
+  const connectAllowed = canConnect?.() !== false
   const { confirmPaste, pasteDialog } = useMultilinePasteConfirm()
 
   const handleCopy = useCallback(() => {
@@ -43,7 +64,13 @@ export function LocalTerminalTab({
   const connect = useCallback(() => {
     if (!terminalRef.current) return
 
-    cancelledRef.current = false
+    if (canConnectRef.current && !canConnectRef.current()) {
+      setIsConnecting(false)
+      return
+    }
+
+    const attempt = ++connectionAttemptRef.current
+    onSessionInfoRef.current?.(null)
     setIsConnecting(true)
     setError(null)
 
@@ -145,34 +172,39 @@ export function LocalTerminalTab({
 
     createSessionRef.current()
       .then(({ wsUrl }) => {
-        if (cancelledRef.current) return
+        if (attempt !== connectionAttemptRef.current) return
         const ws = new WebSocket(wsUrl)
         wsRef.current = ws
 
         ws.onopen = () => {
+          if (attempt !== connectionAttemptRef.current) return
           setIsConnected(true)
           setIsConnecting(false)
           doFit(ws)
           xterm.focus()
-          if (initialCommand) {
+          if (initialCommand && !initialCommandSentRef.current) {
             // Small delay to let the shell prompt initialize
             setTimeout(() => {
-              if (ws.readyState === WebSocket.OPEN) {
+              if (attempt === connectionAttemptRef.current && !initialCommandSentRef.current && ws.readyState === WebSocket.OPEN) {
                 ws.send(JSON.stringify({ type: 'input', data: initialCommand + '\n' }))
+                initialCommandSentRef.current = true
               }
             }, 300)
           }
         }
 
         ws.onmessage = (event) => {
-          let msg: Record<string, string> | null = null
+          if (attempt !== connectionAttemptRef.current) return
+          let msg: { type: 'output' | 'error' | 'exit'; data?: string } | ({ type: 'session' } & LocalTerminalSessionInfo)
           try {
-            msg = JSON.parse(event.data as string) as Record<string, string>
+            msg = JSON.parse(event.data as string)
           } catch {
             xterm.write(event.data as string)
             return
           }
-          if (msg.type === 'output' && msg.data) {
+          if (msg.type === 'session') {
+            onSessionInfoRef.current?.({ context: msg.context, kubeconfigIsolated: msg.kubeconfigIsolated })
+          } else if (msg.type === 'output' && msg.data) {
             xterm.write(msg.data)
           } else if (msg.type === 'exit') {
             xterm.write('\r\n\x1b[2m[Process exited]\x1b[0m\r\n')
@@ -183,12 +215,15 @@ export function LocalTerminalTab({
         }
 
         ws.onerror = () => {
+          if (attempt !== connectionAttemptRef.current) return
+          onConnectionErrorRef.current?.()
           setError((prev) => prev || 'Connection error')
           setIsConnected(false)
           setIsConnecting(false)
         }
 
         ws.onclose = () => {
+          if (attempt !== connectionAttemptRef.current) return
           setIsConnected(false)
           setIsConnecting(false)
           xterm.write('\r\n\x1b[31mConnection closed\x1b[0m\r\n')
@@ -201,6 +236,7 @@ export function LocalTerminalTab({
         })
       })
       .catch((err) => {
+        if (attempt !== connectionAttemptRef.current) return
         setError(err instanceof Error ? err.message : 'Failed to connect')
         setIsConnecting(false)
       })
@@ -209,7 +245,7 @@ export function LocalTerminalTab({
   useEffect(() => {
     connect()
     return () => {
-      cancelledRef.current = true
+      connectionAttemptRef.current++
       cleanupRef.current?.()
       wsRef.current?.close()
       xtermRef.current?.dispose()
@@ -232,16 +268,18 @@ export function LocalTerminalTab({
         <span
           title={isConnected ? 'Connected' : isConnecting ? 'Connecting...' : 'Disconnected'}
           className={clsx(
-            'w-2 h-2 rounded-full',
+            'w-2 h-2 shrink-0 rounded-full',
             isConnected ? 'bg-green-500' : isConnecting ? 'bg-yellow-500 animate-pulse' : 'bg-red-500'
           )}
         />
-        <span className="text-xs text-theme-text-tertiary">Local Terminal</span>
+        <span className="shrink-0 text-xs text-theme-text-tertiary">Local Terminal</span>
+        {toolbarExtra}
 
         {!isConnected && !isConnecting && (
           <button
             onClick={connect}
-            className="flex items-center gap-1 px-2 py-0.5 text-xs text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+            disabled={!connectAllowed}
+            className="shrink-0 whitespace-nowrap flex items-center gap-1 px-2 py-0.5 text-xs text-theme-text-tertiary enabled:hover:text-theme-text-primary enabled:hover:bg-theme-elevated disabled:opacity-50 disabled:cursor-not-allowed rounded"
           >
             <RefreshCw className="w-3 h-3" />
             Reconnect
@@ -252,20 +290,20 @@ export function LocalTerminalTab({
       </div>
 
       {/* Terminal or error */}
-      {error ? (
+      <div ref={terminalRef} className="absolute top-8 left-0 right-0 bottom-0 bg-[#0f172a] [&_.xterm-viewport]:!bg-[#0f172a]" />
+      {error && (
         <div key="error" className="absolute top-8 left-0 right-0 bottom-0 flex flex-col items-center justify-center p-4 text-center bg-slate-900">
           <div className="text-red-400 mb-2 text-sm">Failed to connect</div>
           <div className="text-xs text-theme-text-disabled mb-3">{error}</div>
           <button
             onClick={connect}
-            className="flex items-center gap-2 px-3 py-1.5 btn-brand text-xs rounded"
+            disabled={!connectAllowed}
+            className="flex items-center gap-2 px-3 py-1.5 btn-brand text-xs rounded disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <RefreshCw className="w-3 h-3" />
             Retry
           </button>
         </div>
-      ) : (
-        <div key="terminal" ref={terminalRef} className="absolute top-8 left-0 right-0 bottom-0 bg-[#0f172a] [&_.xterm-viewport]:!bg-[#0f172a]" />
       )}
       {pasteDialog}
     </div>

package/src/components/dock/TerminalTab.tsx

@@ -298,8 +298,8 @@ export function TerminalTab({
         {!error && <TerminalClipboardToolbar hasSelection={hasSelection} onCopy={handleCopy} />}
       </div>
 
-      {/* Terminal or error — key forces xterm canvas unmount/remount on toggle */}
-      {error ? (
+      <div ref={terminalRef} className="absolute top-8 left-0 right-0 bottom-0 bg-[#0f172a] [&_.xterm-viewport]:!bg-[#0f172a]" />
+      {error && (
         <div key="error" className="absolute top-8 left-0 right-0 bottom-0 flex flex-col items-center justify-center p-4 text-center bg-slate-900">
           {errorType === 'shell_not_found' ? (
             <>
@@ -347,8 +347,6 @@ export function TerminalTab({
             </>
           )}
         </div>
-      ) : (
-        <div key="terminal" ref={terminalRef} className="absolute top-8 left-0 right-0 bottom-0 bg-[#0f172a] [&_.xterm-viewport]:!bg-[#0f172a]" />
       )}
       {pasteDialog}
     </div>

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

@@ -0,0 +1,77 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { LogCore } from './LogCore'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+
+let root: Root
+let element: HTMLDivElement
+beforeEach(() => {
+  localStorage.clear()
+  element = document.createElement('div')
+  document.body.appendChild(element)
+  root = createRoot(element)
+})
+afterEach(async () => {
+  await act(async () => root.unmount())
+  element.remove()
+})
+
+const noop = () => {}
+async function render(props: { forceDark?: boolean; defaultDark?: boolean }) {
+  await act(async () =>
+    root.render(
+      <LogCore
+        entries={[]}
+        isLoading={false}
+        isStreaming={false}
+        onStopStream={noop}
+        onRefresh={noop}
+        onDownload={noop}
+        {...props}
+      />,
+    ),
+  )
+}
+const toggle = () => element.querySelector<HTMLButtonElement>('button[aria-label^="Switch log viewer"]')
+
+describe('LogCore theme', () => {
+  it('defaults to dark when no theme hint is given', async () => {
+    await render({})
+    expect(toggle()?.getAttribute('aria-label')).toBe('Switch log viewer to light mode')
+  })
+
+  it('follows defaultDark and keeps the toggle available', async () => {
+    await render({ defaultDark: false })
+    expect(toggle()?.getAttribute('aria-label')).toBe('Switch log viewer to dark mode')
+    await render({ defaultDark: true })
+    expect(toggle()?.getAttribute('aria-label')).toBe('Switch log viewer to light mode')
+  })
+
+  it('prefers the saved toggle choice over defaultDark', async () => {
+    localStorage.setItem('radar-logs-dark', 'true')
+    await render({ defaultDark: false })
+    expect(toggle()?.getAttribute('aria-label')).toBe('Switch log viewer to light mode')
+  })
+
+  it('returns to the saved choice when a forceDark pin is lifted', async () => {
+    localStorage.setItem('radar-logs-dark', 'false')
+    await render({ forceDark: true, defaultDark: false })
+    expect(toggle()).toBeNull()
+    await render({ defaultDark: false })
+    expect(toggle()?.getAttribute('aria-label')).toBe('Switch log viewer to dark mode')
+  })
+
+  it('ignores a saved value that is not a palette choice', async () => {
+    localStorage.setItem('radar-logs-dark', 'garbage')
+    await render({ defaultDark: false })
+    expect(toggle()?.getAttribute('aria-label')).toBe('Switch log viewer to dark mode')
+  })
+
+  it('hides the toggle when forceDark is set', async () => {
+    await render({ forceDark: true, defaultDark: false })
+    expect(toggle()).toBeNull()
+  })
+})

package/src/components/logs/LogCore.tsx

@@ -67,6 +67,12 @@ interface LogCoreProps {
    * the viewer manages its own palette via localStorage and the Sun/Moon button.
    */
   forceDark?: boolean
+  /**
+   * Palette to use when the user hasn't picked one with the Sun/Moon toggle
+   * (e.g. the host app's theme). Unlike `forceDark`, the toggle stays visible.
+   * Defaults to dark.
+   */
+  defaultDark?: boolean
 }
 
 interface LevelOption {
@@ -143,12 +149,14 @@ export function LogCore({
   emptyCommand,
   errorMessage,
   forceDark,
+  defaultDark = true,
 }: LogCoreProps) {
   const virtuosoRef = useRef<VirtuosoHandle>(null)
   const [atBottom, setAtBottom] = useState(true)
   const themeLocked = typeof forceDark === 'boolean'
   // Seed isDark: forceDark prop wins; else localStorage['radar-logs-dark'];
-  // else default dark. See log-palette.ts for why the viewer is palette-driven
+  // else defaultDark (the host app's theme, dark if not given). See
+  // log-palette.ts for why the viewer is palette-driven
   // instead of theme-token-driven.
   const [isDark, setIsDark] = useState<boolean>(() => {
     if (typeof forceDark === 'boolean') return forceDark
@@ -157,13 +165,26 @@ export function LogCore({
       if (v === 'false') return false
       if (v === 'true') return true
     } catch {}
-    return true
+    return defaultDark
   })
   useEffect(() => {
     if (typeof forceDark === 'boolean') {
       setIsDark(forceDark)
     }
   }, [forceDark])
+  // Re-resolve whenever the host's hint changes, including when a forceDark pin
+  // is lifted: the user's saved pick wins, otherwise the host default.
+  useEffect(() => {
+    if (typeof forceDark === 'boolean') return
+    try {
+      const v = localStorage.getItem('radar-logs-dark')
+      if (v === 'true' || v === 'false') {
+        setIsDark(v === 'true')
+        return
+      }
+    } catch {}
+    setIsDark(defaultDark)
+  }, [defaultDark, forceDark])
   const palette = useMemo(() => getLogPalette(isDark), [isDark])
   const toggleDark = useCallback(() => {
     if (themeLocked) return

package/src/components/logs/LogsViewer.tsx

@@ -28,8 +28,10 @@ export interface LogsViewerProps {
   createStream?: (params: Omit<LogsFetchParams, 'previous'>) => EventSource
   /** Override the download mechanism (e.g. for desktop apps where blob URLs fail). */
   overrideDownload?: (content: string, mime: string, filename: string) => void
-  /** Force dark mode on the logs container (default: true) */
+  /** Pin the logs container to dark (true) or light (false) and hide the toggle */
   forceDark?: boolean
+  /** Palette used until the user toggles it, e.g. the app theme (default: true) */
+  defaultDark?: 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
@@ -47,6 +49,7 @@ export function LogsViewer({
   createStream,
   overrideDownload,
   forceDark,
+  defaultDark,
   autoStream = false,
 }: LogsViewerProps) {
   const [selectedContainer, setSelectedContainer] = useState(initialContainer || containers[0] || '')
@@ -190,6 +193,7 @@ export function LogsViewer({
       onClear={clear}
       toolbarExtra={renderToolbarExtra}
       forceDark={forceDark}
+      defaultDark={defaultDark}
     />
   )
 }

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -53,8 +53,10 @@ export interface WorkloadLogsViewerProps {
   createStream?: (params: WorkloadLogsFetchParams) => EventSource
   /** Override the download mechanism (e.g. for desktop apps where blob URLs fail). */
   overrideDownload?: (content: string, mime: string, filename: string) => void
-  /** Force dark mode on the logs container (default: true) */
+  /** Pin the logs container to dark (true) or light (false) and hide the toggle */
   forceDark?: boolean
+  /** Palette used until the user toggles it, e.g. the app theme (default: true) */
+  defaultDark?: 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
@@ -63,7 +65,7 @@ export interface WorkloadLogsViewerProps {
   autoStream?: boolean
 }
 
-export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark, autoStream = false }: WorkloadLogsViewerProps) {
+export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark, defaultDark, autoStream = false }: WorkloadLogsViewerProps) {
   const [selectedContainer, setSelectedContainer] = useState<string>('')
   const [pods, setPods] = useState<WorkloadPodInfo[]>([])
   const [selectedPods, setSelectedPods] = useState<Set<string>>(new Set())
@@ -400,6 +402,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
       emptyCommand={emptyCommand}
       errorMessage={entries.length === 0 ? fetchError || streamError : null}
       forceDark={forceDark}
+      defaultDark={defaultDark}
     /></div></div>
   )
 }

package/src/components/shared/EditableYamlView.test.tsx

@@ -0,0 +1,268 @@
+// @vitest-environment jsdom
+//
+// Applying a reviewed edit can be refused because the resource changed after
+// the review. The review then refreshes against the latest version and says
+// so, once. That notice belongs to one attempt: a retry that fails for another
+// reason shows its own error.
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+
+vi.mock("../ui/YamlEditor", async () => {
+  const { useEffect } = await import("react");
+  return {
+    YamlEditor: () => <div />,
+    YamlDiffEditor: ({
+      onReadyChange,
+    }: {
+      onReadyChange?: (ready: boolean) => void;
+    }) => {
+      useEffect(() => onReadyChange?.(true), [onReadyChange]);
+      return <div />;
+    },
+  };
+});
+
+const { EditableYamlView } = await import("./EditableYamlView");
+
+vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+vi.stubGlobal(
+  "ResizeObserver",
+  class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  },
+);
+let root: Root;
+let host: HTMLDivElement;
+beforeEach(() => {
+  localStorage.clear();
+  sessionStorage.clear();
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  root = createRoot(host);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  host.remove();
+});
+
+const resource = { kind: "ConfigMap", namespace: "shop", name: "app" };
+const data = {
+  apiVersion: "v1",
+  kind: "ConfigMap",
+  metadata: { name: "app", namespace: "shop" },
+  data: { a: "1" },
+};
+const reviewed = (rv: string) => ({
+  documents: [
+    {
+      index: 0,
+      kind: "ConfigMap",
+      name: "app",
+      namespace: "shop",
+      status: "accepted" as const,
+      action: "update" as const,
+      reviewedResourceVersion: rv,
+    },
+  ],
+  nonAtomic: false,
+});
+
+function render(props: {
+  onSave: () => Promise<void>;
+  onPreview: () => Promise<ReturnType<typeof reviewed>>;
+  saveError?: string | null;
+}) {
+  act(() =>
+    root.render(
+      <EditableYamlView
+        resource={resource as never}
+        data={data}
+        onCopy={() => {}}
+        copied={false}
+        onSave={props.onSave}
+        onPreview={props.onPreview}
+        saveError={props.saveError ?? null}
+      />,
+    ),
+  );
+}
+
+const click = async (label: RegExp) => {
+  const b = [...document.querySelectorAll("button")].find((x) =>
+    label.test(x.textContent ?? ""),
+  );
+  if (!b) throw new Error(`no button ${label} in ${document.body.textContent}`);
+  await act(async () => {
+    b.click();
+    await new Promise((r) => setTimeout(r, 0));
+  });
+};
+const text = () => document.body.textContent ?? "";
+
+it("says the resource changed after review, and only for the attempt that found it", async () => {
+  const onPreview = vi
+    .fn()
+    .mockResolvedValueOnce(reviewed("1")) // the review
+    .mockResolvedValueOnce(reviewed("2")) // refresh after the conflict: a newer version
+    .mockRejectedValueOnce(new Error("preview unavailable")); // refresh after the second failure
+  const onSave = vi
+    .fn()
+    .mockRejectedValueOnce(new Error("conflict"))
+    .mockRejectedValueOnce(new Error("forbidden"));
+  render({ onSave, onPreview });
+
+  await click(/^Edit$/);
+  await click(/Review changes/);
+  await click(/Apply reviewed changes/);
+  render({
+    onSave,
+    onPreview,
+    saveError:
+      "resource changed after review; review the latest version before applying",
+  });
+  expect(text()).toContain("This resource changed after your review");
+  expect(text()).not.toContain("review the latest version before applying");
+
+  await click(/Apply reviewed changes/);
+  render({
+    onSave,
+    onPreview,
+    saveError: "forbidden: cannot patch configmaps",
+  });
+  expect(text()).not.toContain("This resource changed after your review");
+  expect(text()).toContain("forbidden: cannot patch configmaps");
+  expect(onSave).toHaveBeenCalledTimes(2);
+  expect(onPreview).toHaveBeenCalledTimes(3);
+});
+
+it("says nothing extra when the refreshed review found the same version", async () => {
+  const onPreview = vi.fn().mockResolvedValue(reviewed("1"));
+  const onSave = vi.fn().mockRejectedValueOnce(new Error("webhook denied"));
+  render({ onSave, onPreview });
+  await click(/^Edit$/);
+  await click(/Review changes/);
+  await click(/Apply reviewed changes/);
+  render({
+    onSave,
+    onPreview,
+    saveError: "admission webhook denied the request",
+  });
+  expect(text()).not.toContain("This resource changed after your review");
+  expect(text()).toContain("admission webhook denied the request");
+  expect(onPreview).toHaveBeenCalledTimes(2);
+});
+
+it("doesn't call a deleted resource changed", async () => {
+  const gone = {
+    documents: [
+      {
+        index: 0,
+        kind: "ConfigMap",
+        name: "app",
+        namespace: "shop",
+        status: "rejected" as const,
+        message: 'configmaps "app" not found',
+      },
+    ],
+    nonAtomic: false,
+  };
+  const onPreview = vi
+    .fn()
+    .mockResolvedValueOnce(reviewed("1"))
+    .mockResolvedValueOnce(gone);
+  const onSave = vi.fn().mockRejectedValueOnce(new Error("not found"));
+  render({ onSave, onPreview });
+  await click(/^Edit$/);
+  await click(/Review changes/);
+  await click(/Apply reviewed changes/);
+  render({ onSave, onPreview, saveError: 'configmaps "app" not found' });
+  expect(text()).not.toContain("This resource changed after your review");
+  expect(text()).toContain('configmaps "app" not found');
+});
+
+it("doesn't call a switched cluster a changed resource", async () => {
+  const onPreview = vi
+    .fn()
+    .mockResolvedValueOnce({ ...reviewed("1"), context: "kind-a" })
+    .mockResolvedValueOnce({ ...reviewed("2"), context: "kind-b" });
+  const onSave = vi.fn().mockRejectedValueOnce(new Error("cluster changed"));
+  render({ onSave, onPreview });
+  await click(/^Edit$/);
+  await click(/Review changes/);
+  await click(/Apply reviewed changes/);
+  render({
+    onSave,
+    onPreview,
+    saveError: "the active cluster changed after review",
+  });
+  expect(text()).not.toContain("This resource changed after your review");
+  expect(text()).toContain("the active cluster changed after review");
+});
+
+it("ignores an earlier attempt's refresh that lands after a newer attempt", async () => {
+  let finishFirstRefresh: (v: ReturnType<typeof reviewed>) => void = () => {};
+  const onPreview = vi
+    .fn()
+    .mockResolvedValueOnce(reviewed("1"))
+    .mockReturnValueOnce(
+      new Promise<ReturnType<typeof reviewed>>((r) => {
+        finishFirstRefresh = r;
+      }),
+    )
+    .mockRejectedValueOnce(new Error("preview unavailable"));
+  const onSave = vi
+    .fn()
+    .mockRejectedValueOnce(new Error("conflict"))
+    .mockRejectedValueOnce(new Error("forbidden"));
+  render({ onSave, onPreview });
+  await click(/^Edit$/);
+  await click(/Review changes/);
+  await click(/Apply reviewed changes/);
+  await click(/Apply reviewed changes/);
+  await act(async () => {
+    finishFirstRefresh(reviewed("2"));
+    await new Promise((r) => setTimeout(r, 0));
+  });
+  render({
+    onSave,
+    onPreview,
+    saveError: "forbidden: cannot patch configmaps",
+  });
+  expect(text()).not.toContain("This resource changed after your review");
+  expect(text()).toContain("forbidden: cannot patch configmaps");
+});
+
+it("drops a refresh from an apply made before going back to a newer review", async () => {
+  let finishFirstRefresh: (v: ReturnType<typeof reviewed>) => void = () => {};
+  const onPreview = vi
+    .fn()
+    .mockResolvedValueOnce(reviewed("1"))
+    .mockReturnValueOnce(
+      new Promise<ReturnType<typeof reviewed>>((r) => {
+        finishFirstRefresh = r;
+      }),
+    )
+    .mockResolvedValueOnce(reviewed("3"));
+  const onSave = vi
+    .fn()
+    .mockRejectedValueOnce(new Error("conflict"))
+    .mockResolvedValueOnce(undefined);
+  render({ onSave, onPreview });
+  await click(/^Edit$/);
+  await click(/Review changes/);
+  await click(/Apply reviewed changes/);
+  await click(/Back to edit/);
+  await click(/Review changes/);
+  await act(async () => {
+    finishFirstRefresh(reviewed("2"));
+    await new Promise((r) => setTimeout(r, 0));
+  });
+  expect(text()).not.toContain("This resource changed after your review");
+  await click(/Apply reviewed changes/);
+  expect(onSave).toHaveBeenLastCalledWith(
+    expect.objectContaining({ reviewedResourceVersion: "3" }),
+  );
+});

package/src/components/shared/EditableYamlView.tsx

@@ -202,6 +202,9 @@ export function EditableYamlView({
   // All sessionStorage calls are wrapped in try-catch — storage can throw
   // QuotaExceededError or be blocked by browser security policies.
   const savedDraft = useRef(readOnly ? null : safeSessionGet(draftKey))
+  // Bumped by every apply and every change of review, so a refresh that lands
+  // late never replaces the review that is on screen now.
+  const reviewGeneration = useRef(0)
   const [isEditing, setIsEditing] = useState(savedDraft.current !== null)
   const [editedYaml, setEditedYaml] = useState(savedDraft.current ?? '')
   const [yamlErrors, setYamlErrors] = useState<string[]>([])
@@ -216,6 +219,8 @@ export function EditableYamlView({
     documents: YamlPreviewResult[]
     nonAtomic: boolean
     context?: string
+    // An apply failed and the refreshed review found a newer resource version.
+    changedSinceReview?: boolean
   } | null>(null)
 
   // Clean up restored draft flag
@@ -253,6 +258,7 @@ export function EditableYamlView({
 
   const handleStartEdit = useCallback(() => {
     if (readOnly) return
+    reviewGeneration.current++
     setEditedYaml(resourceToYaml(data))
     setYamlErrors([])
     setPreview(null)
@@ -260,6 +266,7 @@ export function EditableYamlView({
   }, [data, readOnly])
 
   const handleCancelEdit = useCallback(() => {
+    reviewGeneration.current++
     setIsEditing(false)
     setEditedYaml('')
     setYamlErrors([])
@@ -268,6 +275,7 @@ export function EditableYamlView({
 
   const handleSaveEdit = useCallback(async () => {
     if (yamlErrors.length > 0 || !onSave) return
+    reviewGeneration.current++
 
     try {
       if (onPreview) {
@@ -308,6 +316,10 @@ export function EditableYamlView({
 
   const handleApplyReviewed = useCallback(async () => {
     if (!preview || !onSave) return
+    // The notice belongs to one attempt: a retry that fails for another reason
+    // (and can't refresh) must show its own error, not the last notice.
+    const attempt = ++reviewGeneration.current
+    if (preview.changedSinceReview) setPreview({ ...preview, changedSinceReview: false })
     try {
       await onSave({
         kind: resource.kind,
@@ -335,11 +347,19 @@ export function EditableYamlView({
               name: resource.name,
             },
           })
+          if (attempt !== reviewGeneration.current) return
+          // Changed means the same resource, on the same cluster, at a newer
+          // version. A deleted resource has no version, and a cluster switch
+          // is its own error.
+          const before = preview.documents[0]?.reviewedResourceVersion
+          const after = refreshed.documents[0]?.reviewedResourceVersion
           setPreview({
             ...preview,
             documents: refreshed.documents,
             nonAtomic: refreshed.nonAtomic,
             context: refreshed.context,
+            changedSinceReview:
+              !!after && after !== before && refreshed.context === preview.context,
           })
         } catch {
           // Keep the last review visible when refresh is unavailable.
@@ -368,7 +388,11 @@ export function EditableYamlView({
           force={preview.force}
           isApplying={isSaving}
           applyError={saveError}
-          onBack={() => setPreview(null)}
+          changedSinceReview={preview.changedSinceReview}
+          onBack={() => {
+            reviewGeneration.current++
+            setPreview(null)
+          }}
           onApply={handleApplyReviewed}
         />
       )

package/src/components/ui/SelectMenu.test.tsx

@@ -0,0 +1,25 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, it, vi } from 'vitest'
+import { SelectMenu } from './SelectMenu'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+it('keeps one option tabbable when the options shrink while the menu is open', async () => {
+  const element = document.createElement('div')
+  document.body.append(element)
+  const root = createRoot(element)
+  const render = (options: { value: string; label: string }[]) =>
+    root.render(<SelectMenu value="c" onChange={() => {}} options={options} ariaLabel="Source" />)
+  await act(async () => render([{ value: 'a', label: 'A' }, { value: 'b', label: 'B' }, { value: 'c', label: 'C' }]))
+  await act(async () => { element.querySelector<HTMLButtonElement>('button[aria-haspopup="listbox"]')!.click() })
+  expect(element.querySelectorAll('[role="option"]')).toHaveLength(3)
+
+  await act(async () => render([{ value: 'a', label: 'A' }]))
+  const tabbable = element.querySelectorAll('[role="option"][tabindex="0"]')
+  expect(tabbable).toHaveLength(1)
+  expect(tabbable[0].textContent).toBe('A')
+  await act(async () => root.unmount())
+  element.remove()
+})

package/src/components/ui/SelectMenu.tsx

@@ -55,7 +55,9 @@ export function SelectMenu({
     if (!normalized) return options
     return options.filter((option) => `${option.label} ${option.description ?? ''}`.toLowerCase().includes(normalized))
   }, [options, query])
-  const selectedIsVisible = filteredOptions.some((option) => option.value === value)
+  // Options can be replaced while the menu is open, leaving the highlight past
+  // the end; without the clamp no option is tabbable and Tab skips the list.
+  const activeIndex = Math.min(highlightedIndex, filteredOptions.length - 1)
 
   const focusTabbableOption = () => {
     listRef.current?.querySelector<HTMLElement>('[role="option"][tabindex="0"]')?.focus()
@@ -153,7 +155,9 @@ export function SelectMenu({
         ref={triggerRef}
         id={id}
         type="button"
-        aria-label={ariaLabel}
+        // The fixed label would otherwise hide the visible value from screen
+        // readers, which a native select announces.
+        aria-label={selected ? `${ariaLabel}: ${selected.label}` : ariaLabel}
         aria-describedby={ariaDescribedBy}
         aria-haspopup="listbox"
         aria-expanded={open}
@@ -216,11 +220,11 @@ export function SelectMenu({
                 onKeyDown={(event) => {
                   if (event.key === 'Enter' && filteredOptions.length > 0) {
                     event.preventDefault()
-                    selectOption(filteredOptions[Math.min(highlightedIndex, filteredOptions.length - 1)].value)
+                    selectOption(filteredOptions[activeIndex].value)
                   } else if (event.key === 'ArrowDown') {
                     event.preventDefault()
                     const optionElements = listRef.current?.querySelectorAll<HTMLButtonElement>('[role="option"]')
-                    optionElements?.[Math.min(highlightedIndex, optionElements.length - 1)]?.focus()
+                    optionElements?.[activeIndex]?.focus()
                   }
                 }}
                 aria-label={searchPlaceholder}
@@ -230,7 +234,7 @@ export function SelectMenu({
                 aria-expanded="true"
                 aria-activedescendant={
                   filteredOptions.length > 0
-                    ? `${listboxId}-option-${Math.min(highlightedIndex, filteredOptions.length - 1)}`
+                    ? `${listboxId}-option-${activeIndex}`
                     : undefined
                 }
                 placeholder={searchPlaceholder}
@@ -283,15 +287,13 @@ export function SelectMenu({
                   role="option"
                   aria-selected={active}
                   aria-disabled={option.disabled || undefined}
-                  tabIndex={
-                    searchPlaceholder ? (index === highlightedIndex ? 0 : -1) : active || (!selectedIsVisible && index === 0) ? 0 : -1
-                  }
+                  tabIndex={index === activeIndex ? 0 : -1}
                   onClick={() => selectOption(option.value)}
                   onFocus={() => setHighlightedIndex(index)}
                   className={clsx(
                     'flex w-full items-center gap-2 px-2.5 py-1.5 text-left text-xs text-theme-text-secondary transition-colors',
                     option.disabled ? 'cursor-not-allowed opacity-60' : 'hover:bg-theme-hover hover:text-theme-text-primary',
-                    searchPlaceholder && index === highlightedIndex && 'bg-theme-hover text-theme-text-primary',
+                    searchPlaceholder && index === activeIndex && 'bg-theme-hover text-theme-text-primary',
                     !searchPlaceholder && 'whitespace-nowrap'
                   )}
                 >

package/src/components/ui/YamlReview.test.tsx

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { YamlReview } from './YamlReview'
+
+const doc = { index: 0, kind: 'ConfigMap', name: 'app', namespace: 'shop', status: 'ok' as const, action: 'update' as const, reviewedResourceVersion: '42' }
+
+function review(changedSinceReview?: boolean, applyError?: string) {
+  return renderToString(
+    <YamlReview
+      submittedYaml="kind: ConfigMap"
+      documents={[doc]}
+      changedSinceReview={changedSinceReview}
+      applyError={applyError}
+      onBack={() => {}}
+      onApply={() => {}}
+    />,
+  )
+}
+
+describe('YamlReview after a failed apply', () => {
+  it('says the review now shows the latest version when the resource changed under it', () => {
+    const html = review(true, 'resource changed after review; review the latest version before applying')
+    expect(html).toContain('This resource changed after your review')
+    expect(html).toContain('apply again')
+    // Said once: the raw API message would repeat the notice.
+    expect(html).not.toContain('review the latest version before applying')
+  })
+
+  it('keeps an unrelated apply error beside the notice', () => {
+    const html = review(true, 'admission webhook "policy.example" denied the request')
+    expect(html).toContain('This resource changed after your review')
+    expect(html).toContain('denied the request')
+  })
+
+  it('says nothing extra when the resource did not change', () => {
+    expect(review(false, 'forbidden')).not.toContain('changed after your review')
+    expect(review(false, 'forbidden')).toContain('forbidden')
+    expect(review()).not.toContain('changed after your review')
+  })
+})

package/src/components/ui/YamlReview.tsx

@@ -4,6 +4,7 @@ import { normalizeYamlForReview, splitYamlDocuments } from '../../utils/yaml'
 import { Badge } from './Badge'
 import { StatusDot } from './status-tone'
 import { YamlDiffEditor } from './YamlEditor'
+import { AlertBanner } from './drawer-components'
 
 export interface YamlPreviewResult {
   index: number
@@ -30,6 +31,9 @@ export interface YamlReviewProps {
   force?: boolean
   isApplying?: boolean
   applyError?: string | null
+  /** Set when an apply failed and the refreshed review found the resource had
+   *  changed since the user reviewed it: the diff now shows its latest version. */
+  changedSinceReview?: boolean
   applyLabel?: string
   onClose?: () => void
   onBack: () => void
@@ -48,6 +52,13 @@ function previewSeverity(status: YamlPreviewResult['status']) {
   return 'warning' as const
 }
 
+// The server's refusal when the resource moved past the reviewed version. The
+// changed-after-review notice already says this, so only this error gives way
+// to it; a timeout or an admission denial still shows beside the notice.
+function isChangedAfterReviewError(error: string) {
+  return /resource changed after review/i.test(error)
+}
+
 export function canApplyYamlPreview(
   documents: YamlPreviewResult[],
   unavailableAcknowledged: boolean,
@@ -80,6 +91,7 @@ export function YamlReview({
   force = false,
   isApplying = false,
   applyError,
+  changedSinceReview = false,
   applyLabel = 'Apply reviewed changes',
   onClose,
   onBack,
@@ -351,7 +363,16 @@ export function YamlReview({
       </div>
 
       <div className="shrink-0 border-t border-theme-border bg-theme-elevated/80 px-4 py-3">
-        {applyError && (
+        {changedSinceReview && (
+          <AlertBanner
+            variant="warning"
+            title="This resource changed after your review"
+            message="The diff above now shows its latest version. Check it, then apply again."
+          />
+        )}
+        {/* The notice above already says why the apply was refused; the
+            raw API message would repeat it (the error toast carries it). */}
+        {applyError && !(changedSinceReview && isChangedAfterReviewError(applyError)) && (
           <div className="mb-2 rounded-md border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-600 dark:text-red-400">
             {applyError}
           </div>