@skyhook-io/k8s-ui 1.17.1 → 1.18.0

package/src/components/logs/LogsViewer.tsx

@@ -77,8 +77,11 @@ export function LogsViewer({
   const { showError, showSuccess } = useToast()
 
   const { tailLines, sinceSeconds } = parseLogRange(logRange)
-  const { entries, append, set, clear } = useLogBuffer()
+  const { entries, isFollowing, pendingLineCount, retainedLineCount, missingLineCount, getRetainedEntries, setFollowing, append, set, clear } = useLogBuffer()
   const { isStreaming, streamError, streamErrorCode, connecting, startStreaming, stopStreaming } = useLogStream()
+  const selectionKey = JSON.stringify([_namespace, podName, selectedContainer, logRange])
+  // Identify the selection that supplied the buffered snapshot or stream.
+  const bufferSelectionRef = useRef<{ key: string; previous: boolean } | null>(null)
 
   const willAutoStream = autoStream && !!createStream
   // Tracks the container we've already auto-started for, so re-renders don't
@@ -109,6 +112,7 @@ export function LogsViewer({
     try {
       const data = await fetchLogs({ container: selectedContainer, tailLines, sinceSeconds, previous: showPrevious })
       if (seq !== loadSeqRef.current) return
+      bufferSelectionRef.current = { key: selectionKey, previous: showPrevious }
       const logText = data[selectedContainer] ?? Object.values(data)[0] ?? ''
       set(logText.split('\n').filter(Boolean).map(line => {
         const { timestamp, content } = parseLogLine(line)
@@ -123,11 +127,12 @@ export function LogsViewer({
         return
       }
       console.error('Failed to fetch logs:', err)
+      if (bufferSelectionRef.current?.key !== selectionKey || bufferSelectionRef.current.previous !== showPrevious) set([])
       setFetchError(err instanceof Error ? err.message : 'Failed to fetch logs')
     } finally {
       if (seq === loadSeqRef.current) setIsLoading(false)
     }
-  }, [selectedContainer, tailLines, sinceSeconds, showPrevious, fetchLogs, set, stopStreaming])
+  }, [selectedContainer, tailLines, sinceSeconds, showPrevious, fetchLogs, set, stopStreaming, selectionKey])
 
   // When auto-streaming the stream supplies the initial tail, so the static
   // snapshot fetch is skipped to avoid a redundant request and a flash of
@@ -170,6 +175,7 @@ export function LogsViewer({
     // they don't duplicate lines already in the buffer (the snapshot on the
     // manual path, or an earlier stream on restart).
     clear()
+    bufferSelectionRef.current = { key: selectionKey, previous: false }
     startStreaming(
       () => createStream({ container: selectedContainer, tailLines: 100, sinceSeconds }),
       {
@@ -181,7 +187,7 @@ export function LogsViewer({
       },
       'Log stream connection failed',
     )
-  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append, clear])
+  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append, clear, selectionKey])
 
   const handleStopStreaming = useCallback(() => {
     userStoppedRef.current = true
@@ -241,10 +247,19 @@ export function LogsViewer({
   const streamAnswer = isClusterAnswerCode(streamErrorCode) ? streamError : null
 
   return (
+    <div className="flex h-full min-h-0 flex-col">
+    {(fetchError || streamError) && entries.length > 0 && <div role="alert" className="shrink-0 border-b border-theme-border bg-theme-surface px-3 py-2 text-xs text-theme-text-secondary">{fetchError || streamError} · Previously loaded logs remain below.</div>}
+    <div className="min-h-0 flex-1">
     <LogCore
       entries={entries}
+      isFollowing={isFollowing}
+      onFollowingChange={setFollowing}
+      pendingLineCount={pendingLineCount}
+      retainedLineCount={retainedLineCount}
+      missingLineCount={missingLineCount}
+      getRetainedEntries={getRetainedEntries}
       isLoading={isLoading || isConnecting}
-      errorMessage={fetchError || (entries.length === 0 && !emptyMessage && !streamAnswer ? streamError : null)}
+      errorMessage={entries.length === 0 ? fetchError || (!emptyMessage && !streamAnswer ? streamError : null) : null}
       isStreaming={isStreaming}
       onStartStream={createStream ? handleStartStreaming : undefined}
       onStopStream={handleStopStreaming}
@@ -256,5 +271,7 @@ export function LogsViewer({
       forceDark={forceDark}
       defaultDark={defaultDark}
     />
+    </div>
+    </div>
   )
 }

package/src/components/logs/StructuredLogLine.tsx

@@ -113,7 +113,7 @@ function FilterableValue({
       <button
         type="button"
         onClick={(e) => { e.stopPropagation(); onFilter(value) }}
-        className={`opacity-0 group-hover/flt:opacity-100 transition-opacity ${palette.textTertiary} ${palette.hoverText} px-0.5`}
+        className={`opacity-0 group-hover/flt:opacity-100 focus-visible:opacity-100 transition-opacity ${palette.textTertiary} ${palette.hoverText} px-0.5`}
         title={`Filter to lines containing "${value}"`}
         aria-label={`Filter to lines containing ${value}`}
       >

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -97,7 +97,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
   const { showError, showSuccess } = useToast()
 
   const { tailLines, sinceSeconds } = parseLogRange(logRange)
-  const { entries, append, set, clear } = useLogBuffer()
+  const { entries, isFollowing, pendingLineCount, retainedLineCount, missingLineCount, getRetainedEntries, setFollowing, append, set, clear } = useLogBuffer()
   const { isStreaming, streamError, connecting, startStreaming, stopStreaming } = useLogStream()
 
   const willAutoStream = autoStream && !!createStream
@@ -430,6 +430,12 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
     {(fetchError || streamError) && entries.length > 0 && <div role="alert" className="shrink-0 border-b border-theme-border bg-theme-surface px-3 py-2 text-xs text-theme-text-secondary">{fetchError || streamError} · Previously loaded logs remain below.</div>}
     <div className="min-h-0 flex-1"><LogCore
       entries={filteredEntries}
+      isFollowing={isFollowing}
+      onFollowingChange={setFollowing}
+      pendingLineCount={pendingLineCount}
+      retainedLineCount={retainedLineCount}
+      missingLineCount={missingLineCount}
+      getRetainedEntries={getRetainedEntries}
       allEntries={entries}
       isLoading={isLoading || isConnecting}
       isStreaming={isStreaming}

package/src/components/logs/useLogBuffer.reading.test.tsx

@@ -0,0 +1,149 @@
+// @vitest-environment jsdom
+import { act, StrictMode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { useLogBuffer } from './useLogBuffer'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+
+let root: Root
+let element: HTMLDivElement
+let current: ReturnType<typeof useLogBuffer> | undefined
+let flush: FrameRequestCallback | undefined
+const buffer = () => {
+  if (!current) throw new Error('Buffer not mounted')
+  return current
+}
+function Harness() {
+  current = useLogBuffer()
+  return null
+}
+const lines = (count: number) => Array.from({ length: count }, (_, i) => ({ content: `INFO line ${i}`, container: 'app', timestamp: '' }))
+async function append(count: number) {
+  await act(async () => {
+    buffer().appendBatch(lines(count))
+    flush?.(0)
+  })
+}
+
+beforeEach(async () => {
+  vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => { flush = callback; return 1 })
+  vi.stubGlobal('cancelAnimationFrame', () => { flush = undefined })
+  element = document.createElement('div')
+  root = createRoot(element)
+  await act(async () => root.render(<StrictMode><Harness /></StrictMode>))
+})
+afterEach(async () => {
+  await act(async () => root.unmount())
+  current = undefined
+  flush = undefined
+  vi.unstubAllGlobals()
+})
+
+describe('reading a live log buffer', () => {
+  it('appends below the reader without replacing existing records before rollover', async () => {
+    await append(100)
+    const anchor = buffer().entries[50]
+    await act(async () => buffer().setFollowing(false))
+    await append(100)
+    expect(buffer().entries).toHaveLength(200)
+    expect(buffer().entries[50]).toBe(anchor)
+    expect(buffer().isFollowing).toBe(false)
+    expect(buffer().pendingLineCount).toBe(0)
+  })
+
+  it('keeps the reading window through repeated eviction and resumes at the newest records', async () => {
+    await append(10_000)
+    await act(async () => buffer().setFollowing(false))
+    const reading = buffer().entries
+    await append(500)
+    await append(20_000)
+    expect(buffer().entries).toBe(reading)
+    expect(buffer().entries[50]).toBe(reading[50])
+    expect(buffer().pendingLineCount).toBe(20_500)
+    expect(buffer().isFollowing).toBe(false)
+    await act(async () => buffer().setFollowing(true))
+    expect(buffer().entries).toHaveLength(10_000)
+    expect(buffer().entries.at(-1)?.id).toBe(30_499)
+    expect(buffer().pendingLineCount).toBe(0)
+    expect(buffer().isFollowing).toBe(true)
+  })
+
+  it('still bounds the buffer while following', async () => {
+    await append(10_500)
+    expect(buffer().entries).toHaveLength(10_000)
+    expect(buffer().entries[0].id).toBe(500)
+    expect(buffer().isFollowing).toBe(true)
+  })
+
+  it('releases the saved history on refresh and clear', async () => {
+    await append(10_000)
+    await act(async () => buffer().setFollowing(false))
+    await append(100)
+    await act(async () => buffer().set(lines(5)))
+    expect(buffer().entries).toHaveLength(5)
+    expect(buffer().isFollowing).toBe(true)
+    await act(async () => buffer().setFollowing(false))
+    await act(async () => buffer().clear())
+    expect(buffer().entries).toHaveLength(0)
+    expect(buffer().pendingLineCount).toBe(0)
+    expect(buffer().isFollowing).toBe(true)
+  })
+})
+
+it('exports overlapping windows once and reports expired history after they separate', async () => {
+  await append(10_000)
+  await act(async () => buffer().setFollowing(false))
+  await append(500)
+  expect(buffer().retainedLineCount).toBe(10_500)
+  expect(buffer().missingLineCount).toBe(0)
+  expect(buffer().getRetainedEntries().map(entry => entry.id)).toEqual(Array.from({ length: 10_500 }, (_, i) => i))
+  await append(10_000)
+  const retained = buffer().getRetainedEntries()
+  expect(buffer().retainedLineCount).toBe(20_000)
+  expect(buffer().missingLineCount).toBe(500)
+  expect(retained).toHaveLength(20_000)
+  expect(retained[9_999].id).toBe(9_999)
+  expect(retained[10_000].id).toBe(10_500)
+  expect(retained.at(-1)?.id).toBe(20_499)
+  await act(async () => buffer().setFollowing(true))
+  expect(buffer().retainedLineCount).toBe(10_000)
+  expect(buffer().missingLineCount).toBe(0)
+  await act(async () => buffer().clear())
+  expect(buffer().retainedLineCount).toBe(0)
+  expect(buffer().getRetainedEntries()).toEqual([])
+})
+
+it('keeps collecting the latest logs when animation frames stop running', async () => {
+  await act(async () => {
+    buffer().appendBatch(lines(10_000))
+  })
+  // No animation frame was delivered, as happens in a hidden tab.
+  expect(buffer().entries).toHaveLength(10_000)
+  await act(async () => buffer().setFollowing(false))
+  const saved = buffer().entries
+  await act(async () => buffer().appendBatch(lines(30_000)))
+  expect(buffer().entries).toBe(saved)
+  expect(buffer().pendingLineCount).toBe(30_000)
+  expect(buffer().getRetainedEntries().at(-1)?.id).toBe(39_999)
+  expect(buffer().retainedLineCount).toBe(20_000)
+  expect(buffer().missingLineCount).toBe(20_000)
+  await act(async () => buffer().appendBatch(lines(5)))
+  expect(buffer().pendingLineCount).toBe(30_000)
+  await act(async () => flush?.(0))
+  expect(buffer().pendingLineCount).toBe(30_005)
+  expect(buffer().getRetainedEntries().at(-1)?.id).toBe(40_004)
+  expect(buffer().missingLineCount).toBe(20_005)
+})
+
+it('does not count records from before an empty reset when pausing and receiving a large batch', async () => {
+  await append(25_000)
+  for (const reset of [() => buffer().clear(), () => buffer().set([])]) {
+    await act(async () => { reset(); buffer().setFollowing(false) })
+    await append(20_001)
+    expect(buffer().entries).toHaveLength(10_000)
+    expect(buffer().pendingLineCount).toBe(10_001)
+    expect(buffer().missingLineCount).toBe(1)
+    expect(buffer().retainedLineCount).toBe(20_000)
+  }
+})

package/src/components/logs/useLogBuffer.ts

@@ -35,6 +35,12 @@ type RawLogEntry = Omit<LogEntry, 'id' | 'level' | 'levelSource' | 'isJson' | 'i
 
 interface UseLogBufferReturn {
   entries: LogEntry[]
+  isFollowing: boolean
+  retainedLineCount: number
+  missingLineCount: number
+  getRetainedEntries: () => LogEntry[]
+  pendingLineCount: number
+  setFollowing: (following: boolean) => void
   append: (entry: RawLogEntry) => void
   appendBatch: (entries: RawLogEntry[]) => void
   set: (entries: RawLogEntry[]) => void
@@ -42,7 +48,7 @@ interface UseLogBufferReturn {
 }
 
 export function useLogBuffer(): UseLogBufferReturn {
-  const [entries, setEntries] = useState<LogEntry[]>([])
+  const [buffer, setBuffer] = useState<{ latest: LogEntry[]; reading: LogEntry[] | null }>({ latest: [], reading: null })
   const idCounter = useRef(0)
   const pendingRef = useRef<RawLogEntry[]>([])
   const rafRef = useRef<number | null>(null)
@@ -65,30 +71,35 @@ export function useLogBuffer(): UseLogBufferReturn {
     const batch = pendingRef.current
     if (batch.length === 0) return
     pendingRef.current = []
-
-    setEntries(prev => {
-      const enriched = batch.map(enrichEntry)
-      const combined = [...prev, ...enriched]
-      if (combined.length > MAX_BUFFER_SIZE) {
-        return combined.slice(combined.length - MAX_BUFFER_SIZE)
-      }
-      return combined
+    const enriched = batch.map(enrichEntry)
+
+    setBuffer(prev => {
+      const combined = [...prev.latest, ...enriched]
+      const latest = combined.length > MAX_BUFFER_SIZE ? combined.slice(-MAX_BUFFER_SIZE) : combined
+      // Keep appending while the reader's window fits. Once eviction begins,
+      // retain that window rather than replacing the lines being read.
+      const reading = prev.reading === null ? null
+        : prev.reading === prev.latest && combined.length <= MAX_BUFFER_SIZE ? latest : prev.reading
+      return { latest, reading }
     })
   }, [enrichEntry])
 
   const append = useCallback((entry: RawLogEntry) => {
     pendingRef.current.push(entry)
+    // Hidden tabs can stop delivering animation frames while logs still arrive.
+    if (pendingRef.current.length >= MAX_BUFFER_SIZE) {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
+      flushPending()
+      return
+    }
     if (rafRef.current === null) {
       rafRef.current = requestAnimationFrame(flushPending)
     }
   }, [flushPending])
 
   const appendBatch = useCallback((batch: RawLogEntry[]) => {
-    pendingRef.current.push(...batch)
-    if (rafRef.current === null) {
-      rafRef.current = requestAnimationFrame(flushPending)
-    }
-  }, [flushPending])
+    for (const entry of batch) append(entry)
+  }, [append])
 
   const set = useCallback((rawEntries: RawLogEntry[]) => {
     // Cancel any pending RAF
@@ -100,9 +111,9 @@ export function useLogBuffer(): UseLogBufferReturn {
 
     const enriched = rawEntries.map(enrichEntry)
     if (enriched.length > MAX_BUFFER_SIZE) {
-      setEntries(enriched.slice(enriched.length - MAX_BUFFER_SIZE))
+      setBuffer({ latest: enriched.slice(enriched.length - MAX_BUFFER_SIZE), reading: null })
     } else {
-      setEntries(enriched)
+      setBuffer({ latest: enriched, reading: null })
     }
   }, [enrichEntry])
 
@@ -112,8 +123,27 @@ export function useLogBuffer(): UseLogBufferReturn {
       rafRef.current = null
     }
     pendingRef.current = []
-    setEntries([])
+    setBuffer({ latest: [], reading: null })
+  }, [])
+
+  const setFollowing = useCallback((following: boolean) => {
+    setBuffer(prev => {
+      if (following) return prev.reading === null ? prev : { ...prev, reading: null }
+      return prev.reading === null ? { ...prev, reading: prev.latest } : prev
+    })
   }, [])
 
-  return { entries, append, appendBatch, set, clear }
+  const entries = buffer.reading ?? buffer.latest
+  const pendingLineCount = (buffer.latest.at(-1)?.id ?? -1) - (entries.at(-1)?.id ?? -1)
+  const readingLastId = entries.at(-1)?.id ?? -1
+  const latestFirstId = buffer.latest[0]?.id ?? 0
+  const overlap = Math.max(0, readingLastId - latestFirstId + 1)
+  const retainedLineCount = buffer.reading === null ? buffer.latest.length : entries.length + buffer.latest.length - overlap
+  const missingLineCount = buffer.reading === null ? 0 : Math.max(0, latestFirstId - readingLastId - 1)
+  const getRetainedEntries = useCallback(() => {
+    if (buffer.reading === null || buffer.reading === buffer.latest) return buffer.latest
+    const lastId = buffer.reading.at(-1)?.id ?? -1
+    return [...buffer.reading, ...buffer.latest.filter(entry => entry.id > lastId)]
+  }, [buffer])
+  return { entries, retainedLineCount, missingLineCount, getRetainedEntries, isFollowing: buffer.reading === null, pendingLineCount, setFollowing, append, appendBatch, set, clear }
 }

package/src/components/logs/useLogSearch.ts

@@ -54,6 +54,7 @@ export function useLogSearch(
   virtuosoRef: React.RefObject<VirtuosoHandle | null>,
   /** Id of the record an entry belongs to (its first line's id); defaults to the entry itself */
   recordIdOf?: (entry: LogEntry) => number,
+  onNavigate?: () => void,
 ): UseLogSearchReturn {
   const [query, setQuery] = useState('')
   const [isRegex, setIsRegex] = useState(false)
@@ -122,6 +123,7 @@ export function useLogSearch(
   const scrollToMatch = useCallback((matchIdx: number) => {
     if (matchIdx < 0 || matchIdx >= matchIndices.length) return
     if (mode === 'hide') return
+    onNavigate?.()
     if (mode === 'only') {
       // The list holds whole matching records, so find the matched line within it
       const index = filteredIndexById?.get(entries[matchIndices[matchIdx]].id)
@@ -139,7 +141,7 @@ export function useLogSearch(
         behavior: 'smooth',
       })
     }
-  }, [entries, matchIndices, mode, filteredIndexById, virtuosoRef])
+  }, [entries, matchIndices, mode, filteredIndexById, virtuosoRef, onNavigate])
 
   const goToNext = useCallback(() => {
     if (matchIndices.length === 0 || mode === 'hide') return

package/src/components/resources/ColumnPickerList.test.tsx

@@ -0,0 +1,46 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { describe, expect, it, vi } from 'vitest'
+import { ColumnPickerList } from './ColumnPickerList'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+
+describe('ColumnPickerList keyboard focus', () => {
+  it.each([
+    ['namespace', 'ArrowUp'],
+    ['age', 'ArrowDown'],
+  ])('does not restore stale focus after repeated boundary moves on %s', (key, direction) => {
+    const host = document.createElement('div')
+    document.body.append(host)
+    const root = createRoot(host)
+    const onReorder = vi.fn()
+    const columns = ['name', 'namespace', 'age'].map(key => ({ key, label: key }))
+    const render = () => act(() => root.render(<ColumnPickerList
+      columns={columns}
+      visibleColumns={new Set(['name', 'namespace', 'age'])}
+      customColumnKeys={new Set()}
+      onToggle={() => {}}
+      onRemoveCustom={() => {}}
+      onReorder={onReorder}
+    />))
+    try {
+      render()
+      const inputs = [...host.querySelectorAll<HTMLInputElement>('input')]
+      const current = inputs[columns.findIndex(column => column.key === key)]
+      const other = inputs[key === 'namespace' ? 2 : 1]
+      if (!current || !other) throw new Error('Expected both movable checkboxes')
+      current.focus()
+      for (let i = 0; i < 3; i++) {
+        act(() => current.dispatchEvent(new KeyboardEvent('keydown', { key: direction, altKey: true, bubbles: true })))
+      }
+      other.focus()
+      render()
+      expect(document.activeElement).toBe(other)
+      expect(onReorder).not.toHaveBeenCalled()
+    } finally {
+      act(() => root.unmount())
+      host.remove()
+    }
+  })
+})

package/src/components/resources/ColumnPickerList.tsx

@@ -0,0 +1,174 @@
+import { useId, useLayoutEffect, useRef, useState } from 'react'
+import type React from 'react'
+import { GripVertical, X } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Tooltip } from '../ui/Tooltip'
+import { isMac } from '../../utils/platform'
+import { moveColumn, pinnedColumnCount } from './column-order'
+import type { Column } from './ResourcesView'
+
+interface ColumnPickerListProps {
+  /** Every offered column, in display order. */
+  columns: Column[]
+  visibleColumns: Set<string>
+  customColumnKeys: Set<string>
+  onToggle: (key: string) => void
+  onRemoveCustom: (key: string) => void
+  /** Receives the movable column keys in their new order. */
+  onReorder: (order: string[]) => void
+}
+
+/** The Columns picker's rows: show/hide, remove a custom column, and reorder by
+ *  dragging the grip or with Alt/Option+Up/Down on the row's checkbox. */
+export function ColumnPickerList({
+  columns,
+  visibleColumns,
+  customColumnKeys,
+  onToggle,
+  onRemoveCustom,
+  onReorder,
+}: ColumnPickerListProps) {
+  const pinned = pinnedColumnCount(columns)
+  const [dragKey, setDragKey] = useState<string | null>(null)
+  // Insertion point among the movable rows: 0 = before the first one.
+  const [dropGap, setDropGap] = useState<number | null>(null)
+  const [announcement, setAnnouncement] = useState('')
+  const hintId = useId()
+  const mac = isMac()
+
+  // React moves a keyed row by re-inserting DOM nodes, and re-inserting the
+  // focused checkbox drops focus. Put it back so repeated presses keep working.
+  const refocus = useRef<HTMLElement | null>(null)
+  useLayoutEffect(() => {
+    const el = refocus.current
+    if (!el) return
+    refocus.current = null
+    if (el.isConnected && document.activeElement !== el) el.focus()
+  })
+
+  const commitMove = (key: string, toIndex: number) => {
+    const next = moveColumn(columns, key, toIndex)
+    if (!next) return false
+    onReorder(next)
+    const col = columns.find(c => c.key === key)
+    setAnnouncement(`${col?.label ?? key} moved to position ${pinned + next.indexOf(key) + 1} of ${columns.length}.`)
+    return true
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent, key: string, movableIndex: number) => {
+    if (!e.altKey || (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')) return
+    e.preventDefault()
+    e.stopPropagation()
+    const up = e.key === 'ArrowUp'
+    refocus.current = e.target instanceof HTMLElement ? e.target : null
+    if (!commitMove(key, movableIndex + (up ? -1 : 1))) {
+      refocus.current = null
+      const label = columns.find(c => c.key === key)?.label ?? key
+      setAnnouncement(up ? `${label} is already at the top.` : `${label} is already at the bottom.`)
+    }
+  }
+
+  // The gap above the row when the pointer is in its top half, else below it.
+  const gapAt = (e: React.DragEvent, movableIndex: number) => {
+    const rect = e.currentTarget.getBoundingClientRect()
+    return e.clientY < rect.top + rect.height / 2 ? movableIndex : movableIndex + 1
+  }
+
+  const endDrag = () => {
+    setDragKey(null)
+    setDropGap(null)
+  }
+
+  return (
+    <>
+      <span id={hintId} className="sr-only">
+        {mac ? 'Press Option+Up Arrow or Option+Down Arrow to move this column.' : 'Press Alt+Up Arrow or Alt+Down Arrow to move this column.'}
+      </span>
+      <span className="sr-only" role="status" aria-live="polite">{announcement}</span>
+      {columns.map((col, i) => {
+        const isCustom = customColumnKeys.has(col.key)
+        const movableIndex = i - pinned
+        const movable = movableIndex >= 0
+        const fromIndex = dragKey ? columns.findIndex(c => c.key === dragKey) - pinned : -1
+        const showGap = (gap: number) => dropGap === gap && gap !== fromIndex && gap !== fromIndex + 1
+        return (
+          <div
+            key={col.key}
+            data-column-row
+            className={clsx(
+              'group relative flex items-center gap-1.5 pl-1.5 pr-3 py-1.5 hover:bg-theme-elevated',
+              dragKey === col.key && 'opacity-50',
+            )}
+            onKeyDown={movable ? e => handleKeyDown(e, col.key, movableIndex) : undefined}
+            onDragOver={movable && dragKey ? e => {
+              e.preventDefault()
+              e.dataTransfer.dropEffect = 'move'
+              setDropGap(gapAt(e, movableIndex))
+            } : undefined}
+            onDrop={movable && dragKey ? e => {
+              e.preventDefault()
+              const gap = gapAt(e, movableIndex)
+              commitMove(dragKey, gap > fromIndex ? gap - 1 : gap)
+              endDrag()
+            } : undefined}
+          >
+            {movable && showGap(movableIndex) && (
+              <span aria-hidden className="pointer-events-none absolute inset-x-2 -top-px h-0.5 rounded-full bg-accent" />
+            )}
+            {movable && showGap(movableIndex + 1) && i === columns.length - 1 && (
+              <span aria-hidden className="pointer-events-none absolute inset-x-2 -bottom-px h-0.5 rounded-full bg-accent" />
+            )}
+            {movable ? (
+              <Tooltip content={mac ? 'Drag to reorder, or press ⌥↑ / ⌥↓' : 'Drag to reorder, or press Alt+↑ / Alt+↓'} position="left">
+                <span
+                  aria-hidden
+                  draggable
+                  onDragStart={e => {
+                    e.dataTransfer.effectAllowed = 'move'
+                    // Firefox starts a drag only when data is set.
+                    e.dataTransfer.setData('text/plain', col.key)
+                    const row = e.currentTarget.closest('[data-column-row]')
+                    if (row instanceof HTMLElement) e.dataTransfer.setDragImage(row, 12, row.offsetHeight / 2)
+                    setDragKey(col.key)
+                  }}
+                  onDragEnd={endDrag}
+                  className="flex shrink-0 cursor-grab items-center text-theme-text-tertiary opacity-60 group-hover:opacity-100 active:cursor-grabbing"
+                >
+                  <GripVertical className="w-3.5 h-3.5" />
+                </span>
+              </Tooltip>
+            ) : (
+              <span aria-hidden className="w-3.5 shrink-0" />
+            )}
+            <label className="flex items-center gap-2 flex-1 min-w-0 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={visibleColumns.has(col.key)}
+                onChange={() => onToggle(col.key)}
+                disabled={col.key === 'name'}
+                aria-describedby={movable ? hintId : undefined}
+                className="rounded border-theme-border"
+              />
+              <span className={clsx(
+                'text-sm truncate',
+                col.key === 'name' ? 'text-theme-text-tertiary' : 'text-theme-text-primary'
+              )} title={col.tooltip || col.label}>
+                {col.label}
+              </span>
+            </label>
+            {isCustom && (
+              <button
+                type="button"
+                onClick={() => onRemoveCustom(col.key)}
+                className="shrink-0 p-0.5 text-theme-text-tertiary hover:text-red-500 opacity-0 group-hover:opacity-100 focus:opacity-100"
+                title="Remove column"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            )}
+          </div>
+        )
+      })}
+    </>
+  )
+}