@skyhook-io/k8s-ui 1.17.0 → 1.17.1

package/README.md

@@ -29,3 +29,44 @@ command remains pending for the next connection.
 `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.
 
 Consumers must use a bundler that supports module workers created with `new Worker(new URL(..., import.meta.url), { type: 'module' })`. The source package is compatible with Vite and webpack 5. Monaco and `monaco-yaml` are intentionally pinned as a compatible pair because their worker-factory APIs must move together. The package declares that exact Monaco version as a peer so the host and YAML runtime share one Monaco instance.
+
+The YAML language worker comes from `monaco-yaml`, which imports Monaco's worker entry as `monaco-editor/esm/vs/editor/editor.worker.js`. Monaco's `exports` map does not serve that path, so the host bundler must alias it to the path Monaco does export. In Vite:
+
+```ts
+resolve: {
+  alias: {
+    'monaco-editor/esm/vs/editor/editor.worker.js': 'monaco-editor/editor/editor.worker.js',
+  },
+},
+```
+
+webpack 5 hosts need the same mapping in `resolve.alias`. Without it the build fails to resolve the worker import.
+
+## Resource kind views and certainty
+
+`ResourcesView.renderKindView(kind)` optionally replaces a kind's table while
+keeping the sidebar and resource drawer. Return `null` or `false` to use the table. Hosts
+own data fetching; row/search/bulk shortcuts and column preferences are inactive
+while a replacement is shown. Sidebar kind navigation remains available.
+
+`CertaintyGlyph` displays `=`, `≥`, `≤` or `?` for an exact, lower-bound,
+upper-bound or unknown value, with an accessible label and optional evidence
+tooltip. `certaintyGlyph` and `certaintyValueLabel` expose the same vocabulary.
+
+## Optional flow controls
+
+`CreateResourceDialog` defaults to Apply. Guided flows can set `initialMode="create"` and `lockMode` to require creation, and use `onBack(draftYaml)` to retain edits when returning to setup. Cancel closes the dialog. After a successful write, `onCreated(result, submittedYaml)` receives the first result and the exact submitted manifest; dry runs do not invoke it. `result.uid`, when supplied by Radar, identifies the persisted object. Partial creates name the objects already created. Unlocked flows switch to Apply for review when preview is available; direct creation keeps Create selected so a retry cannot silently update existing objects.
+
+`useOpenTerminal` accepts `shell` (one executable name, without arguments), `title`, and `sessionNote`. Dock hosts must forward these fields to their terminal renderer; Radar does so. The shared `TerminalTab` accepts `command` to describe that executable, pin the container, and suppress shell debug advice, plus `note` for session context. `createSession` remains responsible for launching the command. Omitted options retain the normal shell session.
+
+`AreaChart` supports optional `shadedRanges`, controlled `selection`, and `onSelectRange`. Range timestamps use Unix seconds. Dragging selects a range; with positive `stepSeconds`, clicking selects a step-wide window centered on the pointer, clipped at the chart edges. Arrow keys plus Enter select a window from the keyboard. Shaded range labels appear on hover. `AlertBanner.action` places a host-supplied control alongside the title. Omitting these props preserves existing charts and banners.
+
+## Facts, problems and reviewed actions
+
+`FactValue`, `FactSource`, `FactGrid` and `FactRow` show an observed value and its source. Hosts supply explicit unknown or partial text; these components never infer completeness. `at` is a past event by default; `atMeaning="since"` describes a continuing state. `FoldSection` opens when its `attention` becomes true. `RefLink` is navigable only when the host supplies `onNavigate`; `ManagedByText` reuses the GitOps owner mapper for a plain relationship label.
+
+`WorkspaceProblemCallout`, `ProblemList` and `ProblemMeta` show host-classified findings using non-healthy `HealthLevel` tones. `source` selects issue, audit or measurement provenance; source-specific fields cannot be combined. `rootKind` identifies the workspace's root; `subjectIsSelf` suppresses a link back to the current object. The host supplies `OpenIssueContext` only when it can open the matching Issues entry. CNPG maps its critical, warning and posture classifications to shared tones. `formatGrant` formats a permission for display; it performs no authorization.
+
+`ActionConfirmDialog` adds context, reviewed writes and optional typed acknowledgement to the simpler `ConfirmDialog`. Hosts own loading, permission checks, stale-fact validation and result classification. Its `result` binds the state (`error`, `unknown` or `partial`), message and optional heading; unknown and partial results lock another submit. Retain that result outside the dialog across dismissal and remount, and clear it only after explicitly reviewing current state. The component does not infer outcomes from HTTP status. Remount it when changing the reviewed target or action, so acknowledgement and disclosure state start fresh. The default error heading makes no claim about whether a write occurred; use a stronger result title only when the producer proves it.
+
+Existing CNPG primitive exports remain available and delegate to these shared implementations.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.17.0",
+  "version": "1.17.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -83,7 +83,7 @@
     "diff": ">=5.0.0",
     "elkjs": ">=0.9.0",
     "lucide-react": ">=0.400.0",
-    "monaco-editor": "0.55.1",
+    "monaco-editor": "0.57.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "yaml": ">=2.0.0"
@@ -101,7 +101,7 @@
     "elkjs": "^0.11.1",
     "jsdom": "^29.1.1",
     "lucide-react": "^1.48.0",
-    "monaco-editor": "0.55.1",
+    "monaco-editor": "0.57.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "typescript": "^6.0.2",

package/src/components/charts/AreaChart.interaction.test.tsx

@@ -0,0 +1,118 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { beforeEach, afterEach, expect, it, vi } from 'vitest'
+import { AreaChart } from './AreaChart'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+let root: Root, host: HTMLDivElement
+const series = [{ labels: {}, dataPoints: [{ timestamp: 1000, value: 1 }, { timestamp: 1600, value: 2 }] }]
+beforeEach(() => {
+  vi.stubGlobal('ResizeObserver', class { observe() {} disconnect() {} })
+  vi.stubGlobal('requestAnimationFrame', () => 0)
+  Object.defineProperty(SVGElement.prototype, 'getScreenCTM', { configurable: true, value: () => ({ a: 2, e: 10 }) })
+  Object.defineProperty(SVGElement.prototype, 'setPointerCapture', { configurable: true, value: vi.fn() })
+  Object.defineProperty(SVGElement.prototype, 'hasPointerCapture', { configurable: true, value: () => true })
+  Object.defineProperty(SVGElement.prototype, 'releasePointerCapture', { configurable: true, value: vi.fn() })
+  host = document.createElement('div'); document.body.appendChild(host); root = createRoot(host)
+})
+afterEach(async () => { await act(async () => root.unmount()); host.remove(); vi.unstubAllGlobals() })
+async function render(props: Partial<Parameters<typeof AreaChart>[0]> = {}) {
+  await act(async () => root.render(<AreaChart series={series} color="currentColor" fillColor="currentColor" unit="count" {...props} />))
+  return host.querySelector<SVGRectElement>('rect[fill="transparent"]')!
+}
+async function pointer(plot: SVGRectElement, type: string, x: number, button = 0, pointerType = 'mouse') {
+  await act(async () => {
+    const event = new MouseEvent(type, { bubbles: true, clientX: x * 2 + 10, button })
+    Object.defineProperty(event, 'pointerId', { value: 1 })
+    Object.defineProperty(event, 'pointerType', { value: pointerType })
+    plot.dispatchEvent(event)
+  })
+}
+it.each([[84, 960], [960, 84]])('uses the release position and orders forward/reverse ranges (%s,%s)', async (from, to) => {
+  const selected = vi.fn(); const plot = await render({ onSelectRange: selected })
+  await pointer(plot, 'pointerdown', from); await pointer(plot, 'pointerup', to)
+  expect(selected).toHaveBeenCalledWith({ start: 1000, end: 1600 })
+})
+it('clamps drag release beyond the plot without canceling and clears canceled gestures', async () => {
+  const selected = vi.fn(); const plot = await render({ onSelectRange: selected })
+  await pointer(plot, 'pointerdown', 84); await pointer(plot, 'pointermove', 1500); await pointer(plot, 'pointerup', 1500)
+  expect(selected).toHaveBeenLastCalledWith({ start: 1000, end: 1600 })
+  selected.mockClear()
+  await pointer(plot, 'pointerdown', 200); await pointer(plot, 'pointercancel', 800); await pointer(plot, 'pointerup', 800)
+  expect(selected).not.toHaveBeenCalled(); expect(host.querySelector('[data-chart-selection]')).toBeNull()
+})
+it('selects a bounded evaluation interval by click and keyboard', async () => {
+  const selected = vi.fn(); const plot = await render({ onSelectRange: selected, stepSeconds: 60 })
+  await pointer(plot, 'pointerdown', 84); await pointer(plot, 'pointerup', 84)
+  expect(selected).toHaveBeenLastCalledWith({ start: 1000, end: 1030 })
+  await act(async () => { plot.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'ArrowRight' })) })
+  await act(async () => { plot.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Enter' })) })
+  expect(selected).toHaveBeenLastCalledWith({ start: 1030, end: 1090 })
+})
+it('keeps default hover and exposes a gap reason even beside a nearby sample', async () => {
+  const plot = await render({ shadedRanges: [{ start: 1000, end: 1100, label: 'Metrics unavailable' }], stepSeconds: 600 })
+  expect(plot.style.cursor).toBe('crosshair'); expect(plot.getAttribute('tabindex')).toBeNull()
+  await pointer(plot, 'pointermove', 84)
+  expect(host.textContent).toContain('Metrics unavailable'); expect(host.textContent).toContain('1')
+})
+it('does not treat secondary pointer buttons as a selection', async () => {
+  const selected = vi.fn(); const plot = await render({ onSelectRange: selected })
+  await pointer(plot, 'pointerdown', 84, 2); await pointer(plot, 'pointerup', 960, 2)
+  expect(selected).not.toHaveBeenCalled()
+})
+
+it('shows keyboard focus and clears its tooltip after blur or Escape', async () => {
+  const plot = await render({ onSelectRange: vi.fn(), stepSeconds: 60 })
+  await act(async () => plot.dispatchEvent(new FocusEvent('focusin', { bubbles: true })))
+  expect(plot.getAttribute('stroke')).toBe('currentColor')
+  await act(async () => plot.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'ArrowRight' })))
+  expect(host.querySelector('.pointer-events-none.absolute')).not.toBeNull()
+  await act(async () => plot.dispatchEvent(new FocusEvent('focusout', { bubbles: true })))
+  expect(plot.getAttribute('stroke')).toBeNull()
+  expect(host.querySelector('.pointer-events-none.absolute')).toBeNull()
+  await act(async () => plot.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'ArrowRight' })))
+  await act(async () => plot.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Escape' })))
+  expect(host.querySelector('.pointer-events-none.absolute')).toBeNull()
+})
+
+it('retains a default-chart touch tooltip after a tap without pointermove, then clears on mouse leave', async () => {
+  const plot = await render()
+  await pointer(plot, 'pointerdown', 84, 0, 'touch')
+  await pointer(plot, 'pointerup', 84, 0, 'touch')
+  await pointer(plot, 'pointerout', 84, 0, 'touch')
+  expect(host.querySelector('.pointer-events-none.absolute')).not.toBeNull()
+  expect(host.textContent).toContain('1')
+  await act(async () => plot.dispatchEvent(new MouseEvent('mouseout', { bubbles: true })))
+  expect(host.querySelector('.pointer-events-none.absolute')).toBeNull()
+})
+
+it('paints selected, shaded and dragged ranges above opaque fills and below chart lines', async () => {
+  const plot = await render({ fillColor: '#123456', selection: { start: 1000, end: 1100 }, shadedRanges: [{ start: 1100, end: 1200 }], onSelectRange: vi.fn() })
+  await pointer(plot, 'pointerdown', 84)
+  await pointer(plot, 'pointermove', 500)
+  const fill = host.querySelector('path[fill="#123456"]')!
+  const line = host.querySelector('path[fill="none"]')!
+  const bands = [...host.querySelectorAll('[data-chart-gap], [data-chart-selection], rect[opacity="0.2"]')]
+  expect(bands).toHaveLength(3)
+  for (const band of bands) {
+    expect(fill.compareDocumentPosition(band) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(band.compareDocumentPosition(line) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+  }
+})
+
+it('does not render a selectable empty chart without a finite timestamp domain', async () => {
+  const selected = vi.fn()
+  await render({ series: [{ labels: {}, dataPoints: [] }], onSelectRange: selected, stepSeconds: 60 })
+  expect(host.querySelector('svg')).toBeNull()
+  expect(host.querySelector('[role="button"]')).toBeNull()
+  expect(selected).not.toHaveBeenCalled()
+})
+
+it('keeps an empty chart selectable when an explicit valid domain supplies its bounds', async () => {
+  const selected = vi.fn()
+  const plot = await render({ series: [{ labels: {}, dataPoints: [] }], domain: { start: 1000, end: 1600 }, onSelectRange: selected, stepSeconds: 60 })
+  await pointer(plot, 'pointerdown', 84)
+  await pointer(plot, 'pointerup', 960)
+  expect(selected).toHaveBeenCalledWith({ start: 1000, end: 1600 })
+})

package/src/components/charts/AreaChart.test.tsx

@@ -171,3 +171,28 @@ describe('AreaChart compact layout and count axes', () => {
     expect(compactCount).not.toContain('>10<')
   })
 })
+
+describe('AreaChart gaps and selection', () => {
+  const base = [series([[0, 1], [60, null], [120, 3], [180, 2]])]
+
+  it('hatches shaded ranges and draws the selection band inside the plot', () => {
+    const html = render({
+      series: base,
+      stepSeconds: 60,
+      shadedRanges: [{ start: t0 + 30, end: t0 + 90, label: 'No sample' }],
+      selection: { start: t0 + 120, end: t0 + 180 },
+      onSelectRange: () => {},
+    })
+    expect(html.match(/data-chart-gap/g)).toHaveLength(1)
+    expect(html).toMatch(/fill="url\(#hatch-[^"]+\)"/)
+    expect(html).toContain('data-chart-selection')
+    expect(html).toContain('cursor:col-resize')
+  })
+
+  it('draws nothing extra without the new props', () => {
+    const html = render({ series: base })
+    expect(html).not.toContain('data-chart-gap')
+    expect(html).not.toContain('data-chart-selection')
+    expect(html).toContain('cursor:crosshair')
+  })
+})

package/src/components/charts/AreaChart.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
 import type * as React from 'react'
 import { seriesColor, seriesFill, computeShortLabels, seriesDisplayLabels } from './colors'
 import { formatMetricValue, formatTimestamp } from './format'
@@ -13,7 +13,13 @@ import { nearestSample } from './nearestSample'
 export const ANNOTATION_LABEL_MIN_WIDTH_PX = 420
 const ANNOTATION_HOVER_TOLERANCE = 8
 
-export function AreaChart({ series, color, fillColor, unit, referenceLines, annotations, domain, seriesLabels, stepSeconds, layout = 'full' }: {
+/** A time range on the chart's X axis, in unix seconds. */
+export interface ChartTimeRange {
+  start: number
+  end: number
+}
+
+export function AreaChart({ series, color, fillColor, unit, referenceLines, annotations, domain, seriesLabels, stepSeconds, layout = 'full', shadedRanges, selection, onSelectRange }: {
   series: TimeSeries[]
   color: string
   fillColor: string
@@ -39,10 +45,23 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
    * keeps text and plot height stable as its container resizes.
    */
   layout?: 'full' | 'auto' | 'compact' | 'dashboard'
+  /** Ranges drawn hatched, e.g. where no sample exists; `label` says why and shows on hover. */
+  shadedRanges?: (ChartTimeRange & { label?: string })[]
+  /** A selected range, drawn as a band. */
+  selection?: ChartTimeRange | null
+  /**
+   * Enables range selection: drag across the plot, or click to pick the one
+   * step-wide window around the pointer (needs `stepSeconds`; clipped at the domain edges).
+   */
+  onSelectRange?: (range: ChartTimeRange) => void
 }) {
+  const hatchId = `hatch-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}`
+  const [drag, setDrag] = useState<{ from: number; to: number } | null>(null)
+  const dragRef = useRef<{ from: number; to: number } | null>(null)
   const svgRef = useRef<SVGSVGElement>(null)
   const wrapperRef = useRef<HTMLDivElement>(null)
   const [hoverX, setHoverX] = useState<number | null>(null)
+  const [keyboardFocus, setKeyboardFocus] = useState(false)
   const [labelsFit, setLabelsFit] = useState(true)
   const [renderedWidth, setRenderedWidth] = useState(0)
   const multiSeries = series.length > 1
@@ -70,6 +89,7 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
       minTs = domain.start
       maxTs = domain.end
     }
+    if (!Number.isFinite(minTs) || !Number.isFinite(maxTs)) return null
     if (minTs === maxTs) maxTs = minTs + 60
     if (maxVal === 0 && minVal === 0) {
       // Unit-appropriate floor so the Y-axis isn't misleadingly large.
@@ -264,17 +284,77 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
       p => Math.abs(p.x - clampedX) <= ANNOTATION_HOVER_TOLERANCE,
     )
 
-    return { ts, x: clampedX, points, nearbyAnnotations }
-  }, [hoverX, chartData, placedAnnotations, seriesLabels, marginLeft, plotWidth, marginTop, plotHeight, multiSeries, color, stepSeconds])
+    const shaded = shadedRanges?.find(r => ts >= r.start && ts <= r.end && r.label)
+
+    return { ts, x: clampedX, points, nearbyAnnotations, shaded }
+  }, [hoverX, chartData, placedAnnotations, seriesLabels, marginLeft, plotWidth, marginTop, plotHeight, multiSeries, color, stepSeconds, shadedRanges])
 
-  const handleMouseMove = useCallback((e: React.MouseEvent<SVGRectElement>) => {
-    const svg = svgRef.current
-    if (!svg) return
-    const ctm = svg.getScreenCTM()
-    if (!ctm) return
-    setHoverX((e.clientX - ctm.e) / ctm.a)
+  const pointerX = useCallback((e: { clientX: number }) => {
+    const ctm = svgRef.current?.getScreenCTM()
+    return ctm ? (e.clientX - ctm.e) / ctm.a : null
   }, [])
 
+  const clampX = (x: number) => Math.max(marginLeft, Math.min(marginLeft + plotWidth, x))
+  const tsAt = (x: number) => {
+    if (!chartData) return 0
+    return chartData.minTs + ((clampX(x) - marginLeft) / plotWidth) * (chartData.maxTs - chartData.minTs)
+  }
+  const selectAt = (from: number, to: number) => {
+    if (!onSelectRange || !chartData) return
+    const a = tsAt(Math.min(from, to))
+    const b = tsAt(Math.max(from, to))
+    if (Math.abs(to - from) >= 6) {
+      onSelectRange({ start: Math.round(a), end: Math.round(b) })
+    } else if (stepSeconds && stepSeconds > 0) {
+      const half = stepSeconds / 2
+      onSelectRange({ start: Math.round(Math.max(chartData.minTs, a - half)), end: Math.round(Math.min(chartData.maxTs, a + half)) })
+    }
+  }
+  const cancelDrag = () => {
+    dragRef.current = null
+    setDrag(null)
+  }
+  const handlePointerMove = (e: React.PointerEvent<SVGRectElement>) => {
+    const x = pointerX(e)
+    if (x === null) return
+    setHoverX(x)
+    if (dragRef.current) {
+      dragRef.current = { ...dragRef.current, to: clampX(x) }
+      setDrag(dragRef.current)
+    }
+  }
+  const handlePointerDown = (e: React.PointerEvent<SVGRectElement>) => {
+    if (e.button !== 0) return
+    const x = pointerX(e)
+    if (x === null) return
+    setHoverX(x)
+    if (!onSelectRange) return
+    e.currentTarget.setPointerCapture(e.pointerId)
+    dragRef.current = { from: clampX(x), to: clampX(x) }
+    setDrag(dragRef.current)
+  }
+  const handlePointerUp = (e: React.PointerEvent<SVGRectElement>) => {
+    const current = dragRef.current
+    const x = pointerX(e)
+    cancelDrag()
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId)
+    if (current && x !== null) selectAt(current.from, clampX(x))
+  }
+  const handleKeyDown = (e: React.KeyboardEvent<SVGRectElement>) => {
+    if (!chartData || !onSelectRange) return
+    if (e.key === 'Escape') { cancelDrag(); setHoverX(null); return }
+    if (!stepSeconds || stepSeconds <= 0) return
+    const x = hoverX ?? marginLeft
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+      e.preventDefault()
+      const step = (stepSeconds / (chartData.maxTs - chartData.minTs)) * plotWidth
+      setHoverX(clampX(x + (e.key === 'ArrowRight' ? step : -step)))
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      selectAt(x, x)
+    }
+  }
+
   // Hook calls above run unconditionally; bail out of rendering only after
   // every hook has been invoked (Rules of Hooks).
   if (!chartData) return null
@@ -292,6 +372,12 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
         preserveAspectRatio="xMidYMid meet"
         data-chart-layout={compact ? 'compact' : 'full'}
       >
+        <defs>
+          <pattern id={hatchId} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
+            <line x1="0" y1="0" x2="0" y2="6" stroke="currentColor" strokeWidth="2" className="text-theme-border" />
+          </pattern>
+        </defs>
+
         {/* Grid lines */}
         {yTicks.map((tick, i) => (
           <line
@@ -359,6 +445,32 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
           />
         ))}
 
+        {shadedRanges?.map((r, i) => {
+          const x1 = Math.max(marginLeft, toX(r.start))
+          const x2 = Math.min(marginLeft + plotWidth, toX(r.end))
+          if (x2 <= x1) return null
+          return <rect key={`shade-${i}`} data-chart-gap x={x1} y={marginTop} width={x2 - x1} height={plotHeight} fill={`url(#${hatchId})`} opacity="0.7" />
+        })}
+
+        {selection && (() => {
+          const x1 = Math.max(marginLeft, toX(selection.start))
+          const x2 = Math.min(marginLeft + plotWidth, toX(selection.end))
+          if (x2 < x1) return null
+          return <rect data-chart-selection x={x1} y={marginTop} width={Math.max(2, x2 - x1)} height={plotHeight} fill="currentColor" className="text-accent" opacity="0.15" />
+        })()}
+
+        {drag && Math.abs(drag.to - drag.from) >= 2 && (
+          <rect
+            x={Math.max(marginLeft, Math.min(drag.from, drag.to))}
+            y={marginTop}
+            width={Math.abs(drag.to - drag.from)}
+            height={plotHeight}
+            fill="currentColor"
+            className="text-accent"
+            opacity="0.2"
+          />
+        )}
+
         {/* Lines */}
         {paths.map(p => p && (
           <path
@@ -510,9 +622,23 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
           x={marginLeft} y={marginTop}
           width={plotWidth} height={plotHeight}
           fill="transparent"
-          style={{ cursor: 'crosshair' }}
-          onMouseMove={handleMouseMove}
+          onPointerMove={handlePointerMove}
+          onPointerDown={handlePointerDown}
+          onPointerUp={handlePointerUp}
+          onPointerCancel={cancelDrag}
+          onLostPointerCapture={cancelDrag}
+          onPointerLeave={(e) => { if (e.pointerType !== 'touch') setHoverX(null) }}
           onMouseLeave={() => setHoverX(null)}
+          tabIndex={onSelectRange && stepSeconds && stepSeconds > 0 ? 0 : undefined}
+          role={onSelectRange && stepSeconds && stepSeconds > 0 ? 'button' : undefined}
+          aria-label={onSelectRange && stepSeconds && stepSeconds > 0 ? 'Select chart interval: use arrow keys to move, then Enter to select' : undefined}
+          onKeyDown={handleKeyDown}
+          onFocus={() => setKeyboardFocus(true)}
+          onBlur={() => { setKeyboardFocus(false); setHoverX(null); cancelDrag() }}
+          stroke={keyboardFocus ? 'currentColor' : undefined}
+          strokeWidth={keyboardFocus ? 2 : undefined}
+          className={keyboardFocus ? 'text-accent' : undefined}
+          style={{ cursor: onSelectRange ? 'col-resize' : 'crosshair', touchAction: onSelectRange ? 'none' : undefined }}
         />
       </svg>
 
@@ -538,6 +664,9 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
                 </span>
               </div>
             ))}
+            {hoverData.shaded && (
+              <div className="py-0.5 text-theme-text-secondary">{hoverData.shaded.label}</div>
+            )}
             {hoverData.points.map((p, i) => (
               <div key={i} className="flex items-center gap-2 py-0.5">
                 <div

package/src/components/charts/index.ts

@@ -1,4 +1,5 @@
 export { AreaChart } from './AreaChart'
+export type { ChartTimeRange } from './AreaChart'
 export { MetricsSummary } from './MetricsSummary'
 export { SeriesLegend } from './SeriesLegend'
 export {

package/src/components/checks/ChecksView.tsx

@@ -16,6 +16,7 @@ import {
   SEVERITY_TEXT_CLASS,
 } from './severity'
 import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { CopyableCommand } from '../trace/TracePanel'
 import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 import { CORE_RESOURCES } from '../../utils/api-resources'
 
@@ -28,6 +29,9 @@ const AUDIT_INPUT_LABELS = new Map<string, string>([
   ['replicaset-ownership', 'ReplicaSet ownership'],
   ['configmap-references', 'ConfigMap references'],
   ['secret-references', 'Secret references'],
+  ['pvc-consumers', 'PVC consumers'],
+  ['pv-deletion-events', 'PV deletion events'],
+  ['pv-release-time', 'PV release time'],
 ])
 
 // Leading severity glyph, one per tier of the 4-tier ladder: critical = octagon,
@@ -101,6 +105,9 @@ export interface ChecksViewProps {
    *  tab governs hiding there). Operate on the whole check, fleet-wide. */
   onHideCheck?: (checkID: string, title: string) => void
   onHideCategory?: (category: string) => void
+  /** Per-resource opt-out annotation the source Radar honors. Omit when it
+   *  doesn't, so the card never suggests an annotation that does nothing. */
+  ignoreChecksAnnotation?: string
 }
 
 // A check rolled up across every cluster it fires on — one row of the fleet
@@ -122,7 +129,7 @@ const CHECKS_FILTER_SCHEMA = defineFilterSchema({
   q: { param: 'q', type: 'text' },
 })
 
-export function ChecksView({ checks, catalog, anyData, evaluated, missingInputs = [], resourceHref, onResourceClick, clusterLabel, clusterLabelById, clusterFilter: clusterFilterProp, onClusterFilterChange, emptyAction, onHideCheck, onHideCategory }: ChecksViewProps) {
+export function ChecksView({ checks, catalog, anyData, evaluated, missingInputs = [], resourceHref, onResourceClick, clusterLabel, clusterLabelById, clusterFilter: clusterFilterProp, onClusterFilterChange, emptyAction, onHideCheck, onHideCategory, ignoreChecksAnnotation }: ChecksViewProps) {
   // Severity / category / framework / search live in the URL (shareable,
   // bookmarkable audit links) via the shared filter-state contract. The cluster
   // facet is deliberately NOT here — it's a host-controlled seam (see
@@ -430,6 +437,7 @@ export function ChecksView({ checks, catalog, anyData, evaluated, missingInputs
               onResourceClick={onResourceClick}
               onHideCheck={onHideCheck}
               onHideCategory={onHideCategory}
+              ignoreChecksAnnotation={ignoreChecksAnnotation}
             />
           ))}
         </ol>
@@ -720,6 +728,7 @@ function FleetCheckRow({
   onResourceClick,
   onHideCheck,
   onHideCategory,
+  ignoreChecksAnnotation,
 }: {
   fc: FleetCheck
   meta?: CheckMeta
@@ -730,6 +739,7 @@ function FleetCheckRow({
   onResourceClick?: (ref: CheckResourceRef) => void
   onHideCheck?: (checkID: string, title: string) => void
   onHideCategory?: (category: string) => void
+  ignoreChecksAnnotation?: string
 }) {
   const clusterCount = fc.clusters.length
   const single = clusterCount <= 1
@@ -762,6 +772,13 @@ function FleetCheckRow({
     >
       <CheckRemediationBlock description={meta?.description} remediation={meta?.remediation} references={meta?.references} />
 
+      {ignoreChecksAnnotation && (
+        <CardSection icon={EyeOff} label="Skip for one resource">
+          <CardBody>Add this annotation to a resource listed below. Its findings for this check are then hidden.</CardBody>
+          <CopyableCommand command={`${ignoreChecksAnnotation}: ${fc.checkID}`} />
+        </CardSection>
+      )}
+
       <CardSection
         icon={Layers}
         label="Affected resources"

package/src/components/cnpg/CNPGBackupSummary.tsx

@@ -7,10 +7,13 @@ import {
   getCNPGScheduledBackupStatus,
 } from '../resources/resource-utils-cnpg'
 import type { CNPGWorkspaceResponse } from './workspace'
-import { FactGrid, FactRow, RefLink, SummaryHeading, toneTextClass, type CNPGNavigate } from './primitives'
+import { cnpgScheduleBasisNote, formatCNPGRunTime, type CNPGSchedulePreview } from './schedule'
+import { Badge } from '../ui/Badge'
+import { Tooltip } from '../ui/Tooltip'
 import { ClusterLink, NotReported, Note, ObjectProblems, PhaseBadge, SummaryShell, TimeAgo } from './CNPGSharedSummary'
 import {
   backupDestination,
+  cnpgScheduleDestinationBlocker,
   backupsForScheduledBackup,
   clustersIn,
   isBackupFromSchedule,
@@ -19,11 +22,15 @@ import {
   scheduledBackupOf,
   workspaceList,
 } from './relations'
+import { type NavigateToRef, RefLink } from '../ui/RefLink'
+import { toneTextClass } from '../ui/status-tone'
+import { FactGrid, FactRow } from '../facts'
+import { SectionHeading } from '../ui/FoldSection'
 
 interface SummaryProps {
   resource: any
   workspace: CNPGWorkspaceResponse | null
-  onNavigate?: CNPGNavigate
+  onNavigate?: NavigateToRef
 }
 
 const RECENT_RUNS = 5
@@ -87,7 +94,7 @@ export function CNPGBackupSummary({ resource, workspace, onNavigate }: SummaryPr
     <SummaryShell>
       <ObjectProblems issues={workspace?.issues} subject={refOf(resource, 'Backup')} onNavigate={onNavigate} />
 
-      <SummaryHeading>Outcome</SummaryHeading>
+      <SectionHeading>Outcome</SectionHeading>
       <FactGrid>
         <FactRow label="Phase">
           <PhaseBadge status={status} />
@@ -109,7 +116,7 @@ export function CNPGBackupSummary({ resource, workspace, onNavigate }: SummaryPr
         )}
       </FactGrid>
 
-      <SummaryHeading>Relationships</SummaryHeading>
+      <SectionHeading>Relationships</SectionHeading>
       <FactGrid>
         <FactRow label="Cluster">
           <ClusterLink resource={resource} workspace={workspace} onNavigate={onNavigate} />
@@ -152,22 +159,62 @@ export function CNPGBackupSummary({ resource, workspace, onNavigate }: SummaryPr
   )
 }
 
-export function CNPGScheduledBackupSummary({ resource, workspace, onNavigate }: SummaryProps) {
+export function CNPGSchedulePreviewFacts({ preview }: { preview: CNPGSchedulePreview }) {
+  if (!preview.valid) {
+    return (
+      <FactRow label="Reading">
+        <span className={toneTextClass('degraded')}>Not a schedule the operator can run: {preview.error}</span>
+      </FactRow>
+    )
+  }
+  return (
+    <>
+      {preview.description && <FactRow label="Reading">{preview.description}{!preview.clock?.declared && <span className="ml-1 text-theme-text-tertiary">· UTC estimate</span>}</FactRow>}
+      <FactRow label={preview.clock?.declared ? 'Calculated upcoming times' : 'Estimated upcoming times'}>
+        <ul className="space-y-0.5">
+          {(preview.nextRuns ?? []).map((r, i) => {
+            const t = formatCNPGRunTime(r)
+            return (
+              <li key={r} className="font-mono text-xs">
+                <Tooltip content={`Your time: ${t.local}`} position="top">
+                  <span>{i === 0 && preview.runsImmediately ? `due (${t.utc})` : t.utc}</span>
+                </Tooltip>
+              </li>
+            )
+          })}
+        </ul>
+        <div className="mt-0.5 text-[11.5px] text-theme-text-tertiary">{cnpgScheduleBasisNote(preview)}</div>
+      </FactRow>
+    </>
+  )
+}
+
+export function CNPGScheduledBackupSummary({
+  resource,
+  workspace,
+  onNavigate,
+  schedulePreview,
+}: SummaryProps & {
+  /** The server's reading of spec.schedule; without it the schedule is shown verbatim only. */
+  schedulePreview?: CNPGSchedulePreview
+}) {
   const ns = resource?.metadata?.namespace ?? ''
   const cron = resource?.spec?.schedule
   const next = getCNPGScheduledBackupNextSchedule(resource)
   const runsUnavailable = relationUnavailable(workspace, 'backups', ns, 'Backups')
   const runs = runsUnavailable ? [] : backupsForScheduledBackup(resource, workspaceList(workspace, 'backups'))
   const shown = runs.slice(0, RECENT_RUNS)
+  const blocker = resource?.spec?.suspend === true ? null : cnpgScheduleDestinationBlocker(resource, clustersIn(workspace))
 
   return (
     <SummaryShell>
       <ObjectProblems issues={workspace?.issues} subject={refOf(resource, 'ScheduledBackup')} onNavigate={onNavigate} />
 
-      <SummaryHeading>Schedule</SummaryHeading>
+      <SectionHeading>Schedule</SectionHeading>
       <FactGrid>
         <FactRow label="Status">
-          <PhaseBadge status={getCNPGScheduledBackupStatus(resource)} />
+          <span className="inline-flex flex-wrap items-center gap-2"><PhaseBadge status={getCNPGScheduledBackupStatus(resource)} />{blocker && <Badge severity="warning" size="sm">{blocker}</Badge>}</span>
+          {blocker && <Note>The resource list status comes from the ScheduledBackup alone.</Note>}
         </FactRow>
         <FactRow label="Cluster">
           <ClusterLink resource={resource} workspace={workspace} onNavigate={onNavigate} />
@@ -182,14 +229,15 @@ export function CNPGScheduledBackupSummary({ resource, workspace, onNavigate }:
             <NotReported text="Not set" />
           )}
         </FactRow>
+        {cron && schedulePreview && schedulePreview.schedule === cron && <CNPGSchedulePreviewFacts preview={schedulePreview} />}
         <FactRow label="Last scheduled">
           <TimeAgo at={resource?.status?.lastScheduleTime} missing="Never" />
         </FactRow>
-        <FactRow label="Next scheduled">{next === '-' ? <NotReported /> : next}</FactRow>
+        <FactRow label="Next run reported by the operator">{next === '-' ? <NotReported /> : next}</FactRow>
         <FactRow label="Method">{methodText(resource) ?? 'Barman object store (in-tree) · default'}</FactRow>
       </FactGrid>
 
-      <SummaryHeading hint={runs.length > shown.length ? `${shown.length} of ${runs.length}` : undefined}>Recent runs</SummaryHeading>
+      <SectionHeading hint={runs.length > shown.length ? `${shown.length} of ${runs.length}` : undefined}>Recent runs</SectionHeading>
       {runsUnavailable ? (
         <div className="text-sm">
           <NotReported text={runsUnavailable} />