@skyhook-io/k8s-ui 1.16.3 → 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.16.3",
+  "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/applications/ApplicationDetail.test.tsx

@@ -377,6 +377,21 @@ describe("ApplicationDetail shell", () => {
     expect(local).toContain('ring is full, so the oldest activity is not loaded')
   })
 
+  it('shows the host history-limit note beside the history, and nothing without one', () => {
+    const base = {
+      selectedView: 'history' as const,
+      onSelectView: () => {},
+      selectedWorkloadKey: null,
+      onSelectWorkload: () => {},
+      historyMode: 'local' as const,
+      historyRange: 'all' as const,
+      historyRangeOptions: [{ value: 'all' as const, label: 'All observed' }],
+      historyItems: [],
+    }
+    expect(renderDetail({ ...base, historyRetentionNote: <span>Host limit note</span> })).toContain('<span>Host limit note</span>')
+    expect(renderDetail(base)).not.toContain('Host limit note')
+  })
+
   it('shows a single honest error state when runtime history fails without source history', () => {
     const html = renderDetail({
       selectedView: 'history',

package/src/components/applications/ApplicationDetail.tsx

@@ -89,7 +89,7 @@ import {
   overlayProvenance,
 } from "../../utils/applications";
 import { PaneLoader } from "../ui/PaneLoader";
-import { midTruncate } from "../../utils/format";
+import { formatRelativeAgeTime, midTruncate } from "../../utils/format";
 import { VersionTooltip, AppIdentityTooltip, RolloutSummaryTooltip } from "./AppTooltips";
 import {
   ProvenanceBadge,
@@ -253,6 +253,9 @@ export type ApplicationDetailProps = {
   // The retained ring itself was row-capped: the OLDEST part of the retention
   // window is not loaded, independent of the per-query event limit.
   historyRingTruncated?: boolean;
+  // The host's note about how far back history goes, or the stretch before
+  // the limit reads as "no history".
+  historyRetentionNote?: ReactNode;
   onHistoryRangeChange?: (range: ApplicationHistoryRange) => void;
   onOpenTimeline?: (timestamp?: string) => void;
   onOpenSource?: (source: AppSourceRef) => void;
@@ -346,6 +349,7 @@ export function ApplicationDetail({
   historyCoverageRecordCount,
   historyRuntimeLimited,
   historyRingTruncated,
+  historyRetentionNote,
   onHistoryRangeChange,
   onOpenTimeline,
   onOpenSource,
@@ -784,6 +788,7 @@ export function ApplicationDetail({
             historyCoverageRecordCount={historyCoverageRecordCount}
             historyRuntimeLimited={historyRuntimeLimited}
             historyRingTruncated={historyRingTruncated}
+            historyRetentionNote={historyRetentionNote}
             onHistoryRangeChange={onHistoryRangeChange}
             onOpenTimeline={onOpenTimeline}
             onOpenSource={onOpenSource}
@@ -832,6 +837,7 @@ function ApplicationWorkspace({
   historyCoverageRecordCount,
   historyRuntimeLimited,
   historyRingTruncated,
+  historyRetentionNote,
   onHistoryRangeChange,
   onOpenTimeline,
   onOpenSource,
@@ -884,6 +890,9 @@ function ApplicationWorkspace({
   historyCoverageRecordCount?: number;
   historyRuntimeLimited?: boolean;
   historyRingTruncated?: boolean;
+  // The host's note about how far back history goes, or the stretch before
+  // the limit reads as "no history".
+  historyRetentionNote?: ReactNode;
   onHistoryRangeChange?: (range: ApplicationHistoryRange) => void;
   onOpenTimeline?: (timestamp?: string) => void;
   onOpenSource?: (source: AppSourceRef) => void;
@@ -953,6 +962,7 @@ function ApplicationWorkspace({
           coverageRecordCount={historyCoverageRecordCount}
           runtimeLimited={historyRuntimeLimited}
           ringTruncated={historyRingTruncated}
+          retentionNote={historyRetentionNote}
           workloads={workloads}
           onSelectWorkload={onSelectWorkload}
           onNavigateToResource={onNavigateToResource}
@@ -1827,7 +1837,7 @@ function batchOverviewStats(activity: AppBatchActivity[]) {
   return {
     latestValue: latest?.latestRunPhase || latest?.label || "None",
     latestDetail: latest
-      ? `${latest.latestRunName || latest.workload.name}${latestRunTimestamp(latest) ? ` · ${relativeTime(latestRunTimestamp(latest)!)} ` : ""}`.trim()
+      ? `${latest.latestRunName || latest.workload.name}${latestRunTimestamp(latest) ? ` · ${formatRelativeAgeTime(latestRunTimestamp(latest)!)} ` : ""}`.trim()
       : "No retained runs",
     retainedValue:
       retained > 0 ? `${succeeded} succeeded / ${failed} failed` : "0 retained",
@@ -1842,7 +1852,7 @@ function batchOverviewStats(activity: AppBatchActivity[]) {
           : `${schedules.length} schedules`,
     scheduleDetail:
       schedules.length === 1 && latest?.lastSuccessfulAt
-        ? `last success ${relativeTime(latest.lastSuccessfulAt)}`
+        ? `last success ${formatRelativeAgeTime(latest.lastSuccessfulAt)}`
         : undefined,
     scheduleMono: schedules.length === 1,
   };
@@ -1856,17 +1866,6 @@ function activeWorkloadNames(activity: AppBatchActivity[]): string {
   return `${active.slice(0, 2).join(", ")} +${active.length - 2} more`;
 }
 
-function relativeTime(value: string): string {
-  const t = Date.parse(value);
-  if (Number.isNaN(t)) return value;
-  const diff = Date.now() - t;
-  if (diff < 60_000) return "just now";
-  const minutes = Math.floor(diff / 60_000);
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 48) return `${hours}h ago`;
-  return `${Math.floor(hours / 24)}d ago`;
-}
 
 function ApplicationLatestHistory({
   history,
@@ -2093,7 +2092,7 @@ function workloadRuntimeDetail(workload: AppWorkload): string {
   const at =
     batch.latestStartedAt || batch.latestFinishedAt || batch.lastScheduledAt;
   if (batch.latestRunName)
-    return `${midTruncate(batch.latestRunName, 28)}${at ? ` · ${relativeTime(at)}` : ""}`;
+    return `${midTruncate(batch.latestRunName, 28)}${at ? ` · ${formatRelativeAgeTime(at)}` : ""}`;
   if (batch.schedule) return `Schedule ${batch.schedule}`;
   return "No retained runs";
 }
@@ -2201,6 +2200,7 @@ function ApplicationHistoryView({
   coverageRecordCount,
   runtimeLimited,
   ringTruncated,
+  retentionNote,
   workloads,
   onSelectWorkload,
   onNavigateToResource,
@@ -2219,6 +2219,7 @@ function ApplicationHistoryView({
   coverageRecordCount?: number;
   runtimeLimited?: boolean;
   ringTruncated?: boolean;
+  retentionNote?: ReactNode;
   workloads: AppWorkload[];
   onSelectWorkload: (workload: AppWorkload) => void;
   onNavigateToResource?: (resource: ResourceRef) => void;
@@ -2428,6 +2429,7 @@ function ApplicationHistoryView({
                 application activity in this range may not be included.
               </div>
             )}
+            {retentionNote && <div>{retentionNote}</div>}
             {ringTruncated && (
               <div>
                 {mode === "retained"

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 {