@skyhook-io/k8s-ui 1.17.0 → 1.18.0

package/src/components/logs/useLogStream.ts

@@ -16,6 +16,17 @@ export interface LogStreamHandlers {
   onEnd?: (data: unknown) => void
 }
 
+function errorCodeOf(event: Event): string | null {
+  if (!(event instanceof MessageEvent) || typeof event.data !== 'string') return null
+  try {
+    const data: unknown = JSON.parse(event.data)
+    if (typeof data === 'object' && data !== null && 'error_code' in data && typeof data.error_code === 'string') return data.error_code
+  } catch {
+    // Not JSON: no code.
+  }
+  return null
+}
+
 /**
  * Manages an SSE log stream: EventSource lifecycle, isStreaming state, cleanup.
  * Callers provide a factory function that creates the EventSource with current params.
@@ -24,6 +35,8 @@ export function useLogStream() {
   const [isStreaming, setIsStreaming] = useState(false)
   // Set when the connection fails (and not on a clean end — see endedRef).
   const [streamError, setStreamError] = useState<string | null>(null)
+  // The server's error_code for that failure, when it sent one.
+  const [streamErrorCode, setStreamErrorCode] = useState<string | null>(null)
   // True from a start attempt until the stream first settles (connected / end /
   // error / stop). Lets callers show a connecting spinner that won't reappear
   // after a clean end. Starts true so an auto-stream viewer paints the spinner
@@ -40,6 +53,7 @@ export function useLogStream() {
     setIsStreaming(false)
     setConnecting(false)
     setStreamError(null)
+    setStreamErrorCode(null)
   }, [])
 
   const startStreaming = useCallback((
@@ -50,6 +64,7 @@ export function useLogStream() {
     eventSourceRef.current?.close()
     endedRef.current = false
     setStreamError(null)
+    setStreamErrorCode(null)
     setConnecting(true)
     const es = create()
     // Ignore events from a superseded source: closing/replacing an EventSource
@@ -124,6 +139,7 @@ export function useLogStream() {
       // 'end'; that's not a failure, so don't log it or surface it.
       if (endedRef.current) return
       setStreamError(handleSSEError(event, errorContext, () => {}))
+      setStreamErrorCode(errorCodeOf(event))
     })
 
     eventSourceRef.current = es
@@ -132,5 +148,5 @@ export function useLogStream() {
   // Cleanup on unmount
   useEffect(() => () => { eventSourceRef.current?.close() }, [])
 
-  return { isStreaming, streamError, connecting, startStreaming, stopStreaming }
+  return { isStreaming, streamError, streamErrorCode, connecting, startStreaming, stopStreaming }
 }

package/src/components/problems/index.ts

@@ -0,0 +1 @@
+export * from './problems'

package/src/components/problems/problems.test.tsx

@@ -0,0 +1,63 @@
+import { describe, expect, expectTypeOf, it } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { ProblemMeta, WorkspaceProblemCallout, ProblemList, problemOriginLabel, type WorkspaceProblem } from './problems'
+
+const details = (kind: string) => ({
+  id: 'p',
+  tone: 'degraded' as const,
+  category: 'availability',
+  title: 'Something needs a look',
+  subject: { kind, group: 'example.io', namespace: 'ns', name: 'child-1' },
+})
+const problem = (kind: string): Extract<WorkspaceProblem, { source: 'issue' }> => ({ ...details(kind), source: 'issue' })
+
+describe('ProblemMeta', () => {
+  it('names the subject only when it is not the workspace root kind', () => {
+    expect(renderToStaticMarkup(<ProblemMeta problem={problem('Backup')} rootKind="Cluster" />)).toContain('Backup')
+    expect(renderToStaticMarkup(<ProblemMeta problem={problem('Cluster')} rootKind="Cluster" />)).not.toContain('child-1')
+  })
+})
+
+describe('problemOriginLabel', () => {
+  it('says who measured a measurement, and never calls an issue generic', () => {
+    expect(problemOriginLabel({ ...details('Cluster'), source: 'measurement', measuredBy: 'Prometheus' }).label).toBe('Measured by Prometheus')
+    expect(problemOriginLabel(problem('Cluster')).label).toBe('Detected by Radar')
+  })
+})
+
+it('keeps original scheduler evidence behind a closed disclosure in callouts and lists', () => {
+  const p = { ...problem('Pod'), detail: 'both nodes have reached their Pod limit', rawDetailLabel: 'Scheduler message', rawDetail: '0/2 nodes are available: 2 Too many pods.' }
+  for (const node of [<WorkspaceProblemCallout problem={p} rootKind="Cluster" />, <ProblemList problems={[p]} rootKind="Cluster" />]) {
+    const html = renderToStaticMarkup(node)
+    expect(html).toContain(p.detail)
+    expect(html).toContain(p.rawDetail)
+    expect(html).toContain('Scheduler message')
+    expect(html).toContain('aria-expanded="false"')
+  }
+  expect(renderToStaticMarkup(<WorkspaceProblemCallout problem={problem('Pod')} rootKind="Cluster" />)).not.toContain('Scheduler message')
+})
+
+it('uses a generic label for raw evidence from another controller', () => {
+  const p = { ...problem('Deployment'), rawDetail: 'Progress deadline exceeded.' }
+  expect(renderToStaticMarkup(<WorkspaceProblemCallout problem={p} rootKind="Application" />)).toContain('Original evidence')
+})
+
+it('keeps source-specific provenance fields exclusive in the public type', () => {
+  type Details = ReturnType<typeof details>
+  expectTypeOf<Details & { source: 'issue'; measuredBy: string }>().not.toMatchTypeOf<WorkspaceProblem>()
+  expectTypeOf<Details & { source: 'measurement'; origin: { label: string } }>().not.toMatchTypeOf<WorkspaceProblem>()
+  expectTypeOf<Details & { source: 'audit'; origin: { label: string } }>().not.toMatchTypeOf<WorkspaceProblem>()
+})
+
+it('preserves alert and unknown tones in callouts and compact lists', () => {
+  for (const tone of ['alert', 'unknown'] as const) {
+    const p = { ...problem('Pod'), tone }
+    const callout = renderToStaticMarkup(<WorkspaceProblemCallout problem={p} rootKind="Cluster" />)
+    expect(callout).toContain(`status-${tone}`)
+    const list = renderToStaticMarkup(<ProblemList problems={[p]} rootKind="Cluster" />)
+    expect(list).toContain(tone === 'alert' ? 'bg-orange-500' : 'bg-slate-400')
+    expect(list).toContain(tone === 'alert' ? 'text-orange-600' : 'text-theme-text-tertiary')
+  }
+  type HealthyProblem = Omit<ReturnType<typeof details>, 'tone'> & { source: 'issue'; tone: 'healthy' }
+  expectTypeOf<HealthyProblem>().not.toMatchTypeOf<WorkspaceProblem>()
+})

package/src/components/problems/problems.tsx

@@ -0,0 +1,165 @@
+import { createContext, useContext, type ReactNode } from 'react'
+import { clsx } from 'clsx'
+import type { HealthLevel } from '../resources/resource-utils'
+import type { ResourceRef } from '../../types/core'
+import { healthToSeverity } from '../../utils/badge-colors'
+import { StatusDot, toneTextClass } from '../ui/status-tone'
+import { Tooltip } from '../ui/Tooltip'
+import { AlertBanner } from '../ui/drawer-components'
+import { FoldSection } from '../ui/FoldSection'
+import { RefLink, type NavigateToRef } from '../ui/RefLink'
+
+/** Where a problem's evidence comes from, in user terms. */
+export interface ProblemOrigin {
+  label: string
+  /** The exact field or condition, shown on hover. */
+  detail?: string
+}
+
+/**
+ * Something about a workspace object that needs a look. `C` is the
+ * integration's own category set.
+ */
+export interface ProblemDetails<C extends string = string> {
+  /** Stable identity for keys. */
+  id: string
+  category: C
+  title: string
+  detail?: string
+  rawDetail?: string
+  rawDetailLabel?: string
+  /** The object the evidence is about: the workspace's root object or one of its children. */
+  subject: ResourceRef & { group: string }
+  /** A shorter headline for tight places (a fleet cell); `title` stays the precise one. */
+  shortTitle?: string
+  /** Other objects the same problem is about, e.g. earlier runs that failed the same way. */
+  alsoAbout?: Pick<ResourceRef, 'kind' | 'name'>[]
+}
+
+export type ProblemProvenance =
+  | { source: 'issue'; origin?: ProblemOrigin; measuredBy?: never; sourceDetail?: never }
+  | { source: 'audit'; sourceDetail?: string; origin?: never; measuredBy?: never }
+  | { source: 'measurement'; measuredBy?: string; sourceDetail?: string; origin?: never }
+
+export type WorkspaceProblem<C extends string = string> = ProblemDetails<C> & ProblemProvenance & { tone: Exclude<HealthLevel, 'healthy'> }
+
+/** A problem's provenance label: where its evidence comes from, never a generic "Radar issue". */
+export function problemOriginLabel(problem: WorkspaceProblem): ProblemOrigin {
+  switch (problem.source) {
+    case 'audit':
+      return { label: 'Best-practice check', detail: problem.sourceDetail }
+    case 'measurement':
+      return { label: problem.measuredBy ? `Measured by ${problem.measuredBy}` : 'Measured', detail: problem.sourceDetail }
+  }
+  return problem.origin ?? { label: 'Detected by Radar' }
+}
+
+/**
+ * How a host opens a problem on its Issues page. Supplied by context so every
+ * summary and drawer gets the link without threading a prop through each.
+ */
+export const OpenIssueContext = createContext<((problem: WorkspaceProblem) => void) | undefined>(undefined)
+
+export function ProblemMeta({
+  problem,
+  rootKind,
+  onNavigate,
+  subjectIsSelf,
+  children,
+}: {
+  problem: WorkspaceProblem
+  /** The workspace's root kind: a problem about another kind names its subject. */
+  rootKind: string
+  onNavigate?: NavigateToRef
+  subjectIsSelf?: boolean
+  children?: ReactNode
+}) {
+  const openIssue = useContext(OpenIssueContext)
+  const origin = problemOriginLabel(problem)
+  const aboutChild = !subjectIsSelf && problem.subject.kind !== rootKind
+  return (
+    <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-theme-text-tertiary">
+      {aboutChild && (
+        <span>
+          {problem.subject.kind}{' '}
+          <RefLink refTo={problem.subject} onNavigate={onNavigate} mono />
+          {problem.alsoAbout && problem.alsoAbout.length > 0 && ' '}
+          {problem.alsoAbout && problem.alsoAbout.length > 0 && (
+            <Tooltip
+              content={
+                <ul>
+                  {problem.alsoAbout.map((o) => (
+                    <li key={`${o.kind}/${o.name}`} className="font-mono">
+                      {o.kind} {o.name}
+                    </li>
+                  ))}
+                </ul>
+              }
+            >
+              <span>and {problem.alsoAbout.length} more</span>
+            </Tooltip>
+          )}
+        </span>
+      )}
+      <Tooltip content={origin.detail} disabled={!origin.detail}>
+        <span>{origin.label}</span>
+      </Tooltip>
+      {openIssue && problem.source === 'issue' && (
+        <button type="button" onClick={() => openIssue(problem)} className="whitespace-nowrap text-accent-text hover:underline">
+          See in Issues →
+        </button>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export function WorkspaceProblemCallout({
+  problem,
+  rootKind,
+  more,
+  onNavigate,
+  action,
+  subjectIsSelf,
+}: {
+  problem: WorkspaceProblem
+  rootKind: string
+  more?: ReactNode
+  onNavigate?: NavigateToRef
+  action?: ReactNode
+  /** The callout sits on the subject's own page, so linking to it would loop. */
+  subjectIsSelf?: boolean
+}) {
+  const severity = healthToSeverity(problem.tone)
+  const variant = severity === 'neutral' ? 'unknown' : severity
+  return (
+    <AlertBanner variant={variant} title={problem.title} message={problem.detail}>
+      {problem.rawDetail && <FoldSection title={problem.rawDetailLabel ?? "Original evidence"} summary="" attention={false}><div className="break-words text-xs text-theme-text-secondary">{problem.rawDetail}</div></FoldSection>}
+      <ProblemMeta problem={problem} rootKind={rootKind} onNavigate={onNavigate} subjectIsSelf={subjectIsSelf}>
+        {action}
+        {more}
+      </ProblemMeta>
+    </AlertBanner>
+  )
+}
+
+/** The problems a callout does not show, as a compact list with the callout's tone, title and source. */
+export function ProblemList({ problems, rootKind, onNavigate }: { problems: WorkspaceProblem[]; rootKind: string; onNavigate?: NavigateToRef }) {
+  return (
+    <ul className="space-y-2">
+      {problems.map((p) => (
+        <li key={p.id} className="flex items-start gap-2 text-sm">
+          <span className="mt-1.5 shrink-0">
+            <StatusDot tone={p.tone} size="sm" />
+          </span>
+          <div className="min-w-0">
+            <div className={clsx('font-medium break-words', toneTextClass(p.tone))}>{p.title}</div>
+            {p.detail && <div className="text-xs text-theme-text-secondary break-words">{p.detail}</div>}
+            {p.rawDetail && <FoldSection title={p.rawDetailLabel ?? "Original evidence"} summary="" attention={false}><div className="break-words text-xs text-theme-text-secondary">{p.rawDetail}</div></FoldSection>}
+            <ProblemMeta problem={p} rootKind={rootKind} onNavigate={onNavigate} />
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}

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

@@ -0,0 +1,78 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { ActiveFilterBar, type ActiveFilterBarProps } from './ActiveFilterBar'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+let root: Root | null = null
+let element: HTMLDivElement
+
+async function render(overrides: Partial<ActiveFilterBarProps> = {}) {
+  const props: ActiveFilterBarProps = {
+    columnFilters: {},
+    columnFilterExcludes: {},
+    problemFilters: [],
+    labelSelector: '',
+    onClearColumn: vi.fn(),
+    onClearProblems: vi.fn(),
+    onClearLabels: vi.fn(),
+    ...overrides,
+  }
+  element = document.createElement('div')
+  root = createRoot(element)
+  await act(async () => root!.render(<ActiveFilterBar {...props} />))
+  return props
+}
+
+function buttonWithText(text: string): HTMLButtonElement {
+  const button = [...element.querySelectorAll('button')].find((b) => b.textContent?.includes(text))
+  if (!button) throw new Error(`no button containing "${text}"`)
+  return button
+}
+
+afterEach(async () => {
+  await act(async () => root?.unmount())
+  root = null
+})
+
+describe('ActiveFilterBar', () => {
+  it('renders nothing without active filters or a restore', async () => {
+    await render({ columnFilters: { status: [] } })
+    expect(element.innerHTML).toBe('')
+  })
+
+  it('renders one chip per active filter, marking excluded columns', async () => {
+    await render({
+      columnFilters: { status: ['Running', 'Pending'], node: ['n1'], empty: [] },
+      columnFilterExcludes: { node: true },
+      problemFilters: ['crashloop'],
+      labelSelector: 'app=nginx',
+    })
+    expect(element.querySelectorAll('button')).toHaveLength(4)
+    expect(element.textContent).toContain('status: Running, Pending')
+    expect(element.textContent).toContain('node: not n1')
+    expect(element.textContent).toContain('Problems: crashloop')
+    expect(element.textContent).toContain('app=nginx')
+    expect(element.textContent).not.toContain('restored')
+  })
+
+  it('calls the matching clear handler when a chip is clicked', async () => {
+    const props = await render({ columnFilters: { status: ['Running'] }, problemFilters: ['oom'], labelSelector: 'tier=web' })
+    await act(async () => buttonWithText('status:').click())
+    await act(async () => buttonWithText('Problems:').click())
+    await act(async () => buttonWithText('tier=web').click())
+    expect(props.onClearColumn).toHaveBeenCalledWith('status')
+    expect(props.onClearProblems).toHaveBeenCalledOnce()
+    expect(props.onClearLabels).toHaveBeenCalledOnce()
+  })
+
+  it('shows the restored line only when restored, with Clear calling onClearAll', async () => {
+    const onClearAll = vi.fn()
+    await render({ restored: true, onClearAll, columnFilters: { status: ['Running'] } })
+    expect(element.textContent).toContain('Filters restored from your last visit')
+    await act(async () => buttonWithText('Clear').click())
+    expect(onClearAll).toHaveBeenCalledOnce()
+  })
+})

package/src/components/resources/ActiveFilterBar.tsx

@@ -0,0 +1,86 @@
+import { clsx } from 'clsx'
+import { AlertTriangle, History, ListFilter, Tag, X } from 'lucide-react'
+
+export interface ActiveFilterBarProps {
+  columnFilters: Record<string, string[]>
+  columnFilterExcludes: Record<string, boolean>
+  problemFilters: string[]
+  labelSelector: string
+  onClearColumn: (key: string) => void
+  onClearProblems: () => void
+  onClearLabels: () => void
+  restored?: boolean
+  onClearAll?: () => void
+  className?: string
+}
+
+export function ActiveFilterBar({
+  columnFilters,
+  columnFilterExcludes,
+  problemFilters,
+  labelSelector,
+  onClearColumn,
+  onClearProblems,
+  onClearLabels,
+  restored = false,
+  onClearAll,
+  className,
+}: ActiveFilterBarProps) {
+  const activeColEntries = Object.entries(columnFilters).filter(([, vals]) => vals.length > 0)
+  const hasChips = activeColEntries.length > 0 || problemFilters.length > 0 || !!labelSelector
+  if (!hasChips && !restored) return null
+
+  return (
+    <div className={clsx('flex flex-wrap items-center gap-1.5', className)}>
+      {restored && (
+        <span className="flex items-center gap-1 text-xs text-theme-text-tertiary">
+          <History className="w-3 h-3" />
+          <span>Filters restored from your last visit.</span>
+          {onClearAll && (
+            <button
+              type="button"
+              onClick={onClearAll}
+              className="text-theme-text-secondary hover:text-theme-text-primary underline underline-offset-2"
+            >
+              Clear
+            </button>
+          )}
+        </span>
+      )}
+      {activeColEntries.map(([key, vals]) => (
+        <button
+          type="button"
+          key={key}
+          onClick={() => onClearColumn(key)}
+          className="flex items-center gap-1 px-2 py-1 text-xs selection selection-text rounded-md hover:selection-strong transition-colors"
+        >
+          <ListFilter className="w-3 h-3" />
+          <span>{key}: {columnFilterExcludes[key] ? 'not ' : ''}{vals.join(', ')}</span>
+          <X className="w-3 h-3" />
+        </button>
+      ))}
+      {problemFilters.length > 0 && (
+        <button
+          type="button"
+          onClick={onClearProblems}
+          className="flex items-center gap-1 px-2 py-1 text-xs bg-red-500/15 text-red-700 dark:text-red-300 rounded-md hover:bg-red-500/25 transition-colors"
+        >
+          <AlertTriangle className="w-3 h-3" />
+          <span>Problems: {problemFilters.join(', ')}</span>
+          <X className="w-3 h-3" />
+        </button>
+      )}
+      {labelSelector && (
+        <button
+          type="button"
+          onClick={onClearLabels}
+          className="flex items-center gap-1 px-2 py-1 text-xs bg-green-500/15 text-green-700 dark:text-green-300 rounded-md hover:bg-green-500/25 transition-colors"
+        >
+          <Tag className="w-3 h-3" />
+          <span>{labelSelector}</span>
+          <X className="w-3 h-3" />
+        </button>
+      )}
+    </div>
+  )
+}

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>
+        )
+      })}
+    </>
+  )
+}