@skyhook-io/k8s-ui 1.8.9 → 1.8.11

package/src/components/timeline/TimelineToolbarState.test.tsx

@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import type { TimelineEvent } from '../../types'
+import { TimelineList } from './TimelineList'
+import { TimelineSwimlanes } from './TimelineSwimlanes'
+
+const NOW = 1_700_000_000_000
+const EVENTS: TimelineEvent[] = [
+  {
+    id: 'a', timestamp: new Date(NOW).toISOString(), source: 'informer',
+    kind: 'Deployment', namespace: 'default', name: 'web', eventType: 'add',
+  },
+]
+
+// Both pure views expose the same controlled-with-internal-fallback contract for
+// the lifted filters, so a host can share one set of state across the toggle
+// while standalone hosts (passing nothing) keep working on internal state.
+describe('TimelineList controlled vs fallback', () => {
+  it('reflects the controlled search value', () => {
+    const html = renderToString(
+      <TimelineList events={EVENTS} isLoading={false} search="ctrl-list" onSearchChange={() => {}} />,
+    )
+    expect(html).toContain('value="ctrl-list"')
+  })
+
+  it('falls back to internal search state when uncontrolled (always-open empty input)', () => {
+    const html = renderToString(<TimelineList events={EVENTS} isLoading={false} />)
+    // Always-open static search: empty input present, no collapsed magnifier.
+    expect(html).toContain('value=""')
+    expect(html).not.toContain('aria-label="Search"')
+  })
+
+  it('renders the shared toolbar chips (unified with the swimlane)', () => {
+    const html = renderToString(<TimelineList events={EVENTS} isLoading={false} />)
+    expect(html).toContain('K8s Events')
+    expect(html).toContain('Problems')
+  })
+})
+
+describe('TimelineSwimlanes controlled vs fallback', () => {
+  it('reflects the controlled search value', () => {
+    const html = renderToString(
+      <TimelineSwimlanes events={EVENTS} search="ctrl-swim" onSearchChange={() => {}} />,
+    )
+    expect(html).toContain('value="ctrl-swim"')
+  })
+
+  it('falls back to internal search state when uncontrolled (always-open empty input)', () => {
+    const html = renderToString(<TimelineSwimlanes events={EVENTS} />)
+    expect(html).toContain('value=""')
+    expect(html).not.toContain('aria-label="Search"')
+  })
+
+  it('renders the same shared toolbar chips as the list', () => {
+    const html = renderToString(<TimelineSwimlanes events={EVENTS} />)
+    expect(html).toContain('K8s Events')
+    expect(html).toContain('Problems')
+  })
+
+  it('renders the single View trigger (Sort + Group live in its popover)', () => {
+    const html = renderToString(<TimelineSwimlanes events={EVENTS} />)
+    expect(html).toContain('>View<')
+  })
+})

package/src/components/timeline/index.ts

@@ -1,4 +1,27 @@
 export * from './shared'
 export * from './DiffViewer'
+export type { ActivityTypeFilter, ActivityFilterKey } from './timeline-filters'
+export type { TimelineSort } from './timeline-lane-sort'
 export * from './TimelineList'
 export * from './TimelineSwimlanes'
+export {
+  clampSelection,
+  clampLensToSelection,
+  countEventsAfter,
+  mergeGapRanges,
+  pickDisplayBucketSizeMs,
+  presetToSelection,
+  type ScrubberBucket,
+  type ScrubberPreset,
+  type ScrubberRange,
+} from './scrubber-math'
+export { TimelineStrip, type TimelineStripProps } from './TimelineStrip'
+export {
+  advanceLatchedLens,
+  deriveLiveSelection,
+  isLensLatched,
+  quantizeBaseWindow,
+  LIVE_TICK_MS,
+  BASE_QUANTIZE_STEP_MS,
+  type TimelineLiveState,
+} from './timeline-live'

package/src/components/timeline/scrubber-math.test.ts

@@ -0,0 +1,235 @@
+import { describe, expect, it } from 'vitest'
+import {
+  barHeight,
+  clampSelection,
+  clampLensToSelection,
+  countEventsAfter,
+  formatLensDuration,
+  mergeGapRanges,
+  pickDisplayBucketSizeMs,
+  presetToSelection,
+  type ScrubberRange,
+  type ScrubberBucket,
+} from './scrubber-math'
+
+const MIN = 60_000
+const HOUR = 60 * 60 * 1000
+const DAY = 24 * HOUR
+const NOW = 1_700_000_000_000
+const DOMAIN: ScrubberRange = { fromMs: NOW - 30 * DAY, toMs: NOW }
+
+describe('barHeight (bucket → bar mapping)', () => {
+  it('is zero for empty buckets or empty data', () => {
+    expect(barHeight(0, 100, 44)).toBe(0)
+    expect(barHeight(5, 0, 44)).toBe(0)
+  })
+
+  it('gives a sparse bar a visible floor instead of a sub-pixel sliver', () => {
+    const h = barHeight(1, 10_000, 44)
+    expect(h).toBeGreaterThanOrEqual(Math.max(2, 44 * 0.08))
+  })
+
+  it('caps at the track height and grows monotonically with total', () => {
+    expect(barHeight(10_000, 10_000, 44)).toBeLessThanOrEqual(44)
+    expect(barHeight(100, 10_000, 44)).toBeLessThan(barHeight(2_500, 10_000, 44))
+  })
+})
+
+describe('clampSelection (domain + maxSelectionMs)', () => {
+  it('caps width at maxSelectionMs and flags it, keeping the right edge', () => {
+    const sel: ScrubberRange = { fromMs: NOW - 10 * DAY, toMs: NOW }
+    const { selection, clampedToMax } = clampSelection(sel, DOMAIN, 7 * DAY, 'end')
+    expect(clampedToMax).toBe(true)
+    expect(selection.toMs).toBe(NOW)
+    expect(selection.toMs - selection.fromMs).toBe(7 * DAY)
+  })
+
+  it('shifts a selection that runs past the domain back inside it', () => {
+    const sel: ScrubberRange = { fromMs: NOW - HOUR, toMs: NOW + 5 * DAY }
+    const { selection } = clampSelection(sel, DOMAIN, 7 * DAY, 'end')
+    expect(selection.toMs).toBeLessThanOrEqual(DOMAIN.toMs)
+    expect(selection.fromMs).toBeGreaterThanOrEqual(DOMAIN.fromMs)
+  })
+
+  it('enforces a minimum width so handles never overlap', () => {
+    const sel: ScrubberRange = { fromMs: NOW - 1000, toMs: NOW }
+    const { selection } = clampSelection(sel, DOMAIN, 7 * DAY, 'end')
+    expect(selection.toMs - selection.fromMs).toBeGreaterThanOrEqual(MIN)
+  })
+
+  it('does not flag clampedToMax when the selection already fits', () => {
+    const sel: ScrubberRange = { fromMs: NOW - 2 * DAY, toMs: NOW }
+    const { clampedToMax } = clampSelection(sel, DOMAIN, 7 * DAY, 'end')
+    expect(clampedToMax).toBe(false)
+  })
+})
+
+describe('clampLensToSelection (lens ⊂ selection)', () => {
+  const SEL: ScrubberRange = { fromMs: NOW - 4 * HOUR, toMs: NOW }
+
+  it('leaves a lens already inside the selection untouched', () => {
+    const lens: ScrubberRange = { fromMs: NOW - 3 * HOUR, toMs: NOW - 2 * HOUR }
+    expect(clampLensToSelection(lens, SEL)).toEqual(lens)
+  })
+
+  it('shifts an overhanging lens back inside, preserving its width', () => {
+    const lens: ScrubberRange = { fromMs: NOW - HOUR, toMs: NOW + 2 * HOUR }
+    const width = lens.toMs - lens.fromMs
+    const clamped = clampLensToSelection(lens, SEL)
+    expect(clamped.toMs).toBe(SEL.toMs)
+    expect(clamped.toMs - clamped.fromMs).toBe(width)
+    expect(clamped.fromMs).toBeGreaterThanOrEqual(SEL.fromMs)
+  })
+
+  it('shifts a lens hanging off the left edge back inside', () => {
+    const lens: ScrubberRange = { fromMs: NOW - 6 * HOUR, toMs: NOW - 5 * HOUR }
+    const width = lens.toMs - lens.fromMs
+    const clamped = clampLensToSelection(lens, SEL)
+    expect(clamped.fromMs).toBe(SEL.fromMs)
+    expect(clamped.toMs - clamped.fromMs).toBe(width)
+  })
+
+  it('collapses a lens wider than the selection to the full selection', () => {
+    const lens: ScrubberRange = { fromMs: NOW - 10 * HOUR, toMs: NOW + 5 * HOUR }
+    expect(clampLensToSelection(lens, SEL)).toEqual({ fromMs: SEL.fromMs, toMs: SEL.toMs })
+  })
+})
+
+describe('formatLensDuration (chip label)', () => {
+  it('renders sub-hour widths as minutes', () => {
+    expect(formatLensDuration(15 * 60_000)).toBe('15m')
+    expect(formatLensDuration(30 * 60_000)).toBe('30m')
+  })
+  it('renders hour widths as hours, days as days', () => {
+    expect(formatLensDuration(HOUR)).toBe('1h')
+    expect(formatLensDuration(8 * HOUR)).toBe('8h')
+    expect(formatLensDuration(DAY)).toBe('1d')
+    expect(formatLensDuration(7 * DAY)).toBe('7d')
+  })
+})
+
+describe('presetToSelection', () => {
+  it('sets the brush to [now - ms, now]', () => {
+    const { selection } = presetToSelection(DAY, NOW, DOMAIN, 7 * DAY)
+    expect(selection.toMs).toBe(NOW)
+    expect(selection.toMs - selection.fromMs).toBe(DAY)
+  })
+
+  it('clamps a preset wider than maxSelectionMs (e.g. 30d → 7d cap)', () => {
+    const { selection, clampedToMax } = presetToSelection(30 * DAY, NOW, DOMAIN, 7 * DAY)
+    expect(clampedToMax).toBe(true)
+    expect(selection.toMs - selection.fromMs).toBe(7 * DAY)
+  })
+})
+
+describe('mergeGapRanges (recording-gap dedupe / merge / clamp)', () => {
+  it('drops zero-width spans', () => {
+    const gaps = mergeGapRanges([
+      { fromMs: 100, toMs: 100 },
+      { fromMs: 500, toMs: 500 },
+    ])
+    expect(gaps).toEqual([])
+  })
+
+  it('dedupes identical spans', () => {
+    const gaps = mergeGapRanges([
+      { fromMs: 100, toMs: 200 },
+      { fromMs: 100, toMs: 200 },
+    ])
+    expect(gaps).toEqual([{ fromMs: 100, toMs: 200 }])
+  })
+
+  it('merges overlapping and back-to-back spans into one band', () => {
+    const gaps = mergeGapRanges([
+      { fromMs: 100, toMs: 300 },
+      { fromMs: 250, toMs: 400 }, // overlaps
+      { fromMs: 400, toMs: 500 }, // adjacent
+      { fromMs: 700, toMs: 800 }, // disjoint
+    ])
+    expect(gaps).toEqual([
+      { fromMs: 100, toMs: 500 },
+      { fromMs: 700, toMs: 800 },
+    ])
+  })
+
+  it('normalizes reversed edges before merging', () => {
+    const gaps = mergeGapRanges([{ fromMs: 300, toMs: 100 }])
+    expect(gaps).toEqual([{ fromMs: 100, toMs: 300 }])
+  })
+
+  it('clips to the domain and drops spans entirely outside it', () => {
+    const domain: ScrubberRange = { fromMs: 200, toMs: 600 }
+    const gaps = mergeGapRanges(
+      [
+        { fromMs: 100, toMs: 400 }, // clipped to 200
+        { fromMs: 500, toMs: 900 }, // clipped to 600
+        { fromMs: 1000, toMs: 1100 }, // outside → dropped
+      ],
+      domain,
+    )
+    expect(gaps).toEqual([
+      { fromMs: 200, toMs: 400 },
+      { fromMs: 500, toMs: 600 },
+    ])
+  })
+})
+
+describe('pickDisplayBucketSizeMs (adaptive strip bucket width)', () => {
+  const H = HOUR
+
+  it('keeps 1h bars at a 7-day domain (168 bars)', () => {
+    expect(pickDisplayBucketSizeMs(7 * DAY)).toBe(H)
+  })
+
+  it('keeps 1h bars at the live ~7.66-day domain (no smearing across a gap)', () => {
+    expect(pickDisplayBucketSizeMs(7.66 * DAY)).toBe(H)
+  })
+
+  it('steps to 3h bars around a 22-day domain', () => {
+    expect(pickDisplayBucketSizeMs(22 * DAY)).toBe(3 * H)
+  })
+
+  it('steps to 12h bars around a 92-day domain', () => {
+    expect(pickDisplayBucketSizeMs(92 * DAY)).toBe(12 * H)
+  })
+
+  it('never exceeds the coarsest rung (24h) for very deep retention', () => {
+    expect(pickDisplayBucketSizeMs(3650 * DAY)).toBe(24 * H)
+  })
+})
+
+describe('countEventsAfter (frozen "new events" pull)', () => {
+  const bucket = (startMs: number, total: number): ScrubberBucket => ({
+    startMs,
+    endMs: startMs + HOUR,
+    total,
+    warnings: 0,
+  })
+
+  it('is zero for an empty bucket list', () => {
+    expect(countEventsAfter([], NOW)).toBe(0)
+  })
+
+  it('sums totals of buckets starting at/after the toMs hour, floored to the hour', () => {
+    // toMs mid-hour floors to its hour start, so the bucket AT that hour counts.
+    const hourStart = Math.floor(NOW / HOUR) * HOUR
+    const buckets = [
+      bucket(hourStart - 2 * HOUR, 5), // before → excluded
+      bucket(hourStart, 3), // the toMs hour → included
+      bucket(hourStart + HOUR, 7), // after → included
+    ]
+    expect(countEventsAfter(buckets, hourStart + 30 * MIN)).toBe(10)
+  })
+
+  it('excludes buckets that start strictly before the toMs hour', () => {
+    const hourStart = Math.floor(NOW / HOUR) * HOUR
+    const buckets = [bucket(hourStart - HOUR, 9)]
+    expect(countEventsAfter(buckets, hourStart)).toBe(0)
+  })
+
+  it('returns the raw sum (display cap is applied by the chip, not the helper)', () => {
+    const hourStart = Math.floor(NOW / HOUR) * HOUR
+    const buckets = [bucket(hourStart, 1500)]
+    expect(countEventsAfter(buckets, hourStart)).toBe(1500)
+  })
+})

package/src/components/timeline/scrubber-math.ts

@@ -0,0 +1,249 @@
+/**
+ * scrubber-math — pure geometry, selection math, and shared types for the
+ * timeline strip. No React or JSX: everything here is unit-testable without a
+ * DOM. The strip components (TimelineStrip, TimelineSwimlanes) and the host
+ * wrappers import these; all rendering and theme colors live in the components.
+ */
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface ScrubberBucket {
+  startMs: number
+  endMs: number
+  total: number
+  warnings: number
+}
+
+export interface ScrubberRange {
+  fromMs: number
+  toMs: number
+}
+
+export interface ScrubberPreset {
+  label: string
+  ms: number
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+// Smallest brush width the user can shrink to — below this the events fetch is
+// too narrow to be useful and handles overlap.
+const MIN_SELECTION_MS = 60_000
+
+// Smallest view window any zoom control may produce. Shared by the strip's
+// band resize, the swimlane zoom ladder (whose lowest rung is 0.25h), and the
+// wheel/pinch zoom, so every way of narrowing the window bottoms out at the
+// same width.
+export const MIN_WINDOW_MS = 15 * 60_000
+
+const MINUTE_MS = 60_000
+const HOUR_MS = 60 * 60 * 1000
+const DAY_MS = 24 * HOUR_MS
+
+// ============================================================================
+// Pure geometry + selection math (exported for testing)
+// ============================================================================
+
+export type SelectionAnchor = 'start' | 'end' | 'center'
+
+function normalize(sel: ScrubberRange): ScrubberRange {
+  return sel.fromMs <= sel.toMs ? sel : { fromMs: sel.toMs, toMs: sel.fromMs }
+}
+
+/**
+ * Clamp a selection to the domain and to [MIN_SELECTION_MS, maxSelectionMs].
+ * `anchor` decides which edge stays put when the width is adjusted:
+ *   - 'end'    keep the right edge (presets pinned to "now", left-handle drag)
+ *   - 'start'  keep the left edge (right-handle drag)
+ *   - 'center' keep the midpoint (zoom)
+ * Returns `clampedToMax` for callers that want to surface the cap; none do yet.
+ */
+export function clampSelection(
+  sel: ScrubberRange,
+  domain: ScrubberRange,
+  maxSelectionMs?: number,
+  anchor: SelectionAnchor = 'end',
+): { selection: ScrubberRange; clampedToMax: boolean } {
+  const domainWidth = Math.max(0, domain.toMs - domain.fromMs)
+  const n = normalize(sel)
+  let { fromMs, toMs } = n
+  const width = toMs - fromMs
+
+  const minWidth = Math.min(MIN_SELECTION_MS, domainWidth)
+  let maxWidth = domainWidth
+  if (maxSelectionMs != null) maxWidth = Math.min(maxWidth, maxSelectionMs)
+
+  const targetWidth = Math.max(minWidth, Math.min(width, maxWidth))
+  const clampedToMax = maxSelectionMs != null && width > maxSelectionMs && targetWidth < width
+
+  if (anchor === 'end') {
+    fromMs = toMs - targetWidth
+  } else if (anchor === 'start') {
+    toMs = fromMs + targetWidth
+  } else {
+    const center = (fromMs + toMs) / 2
+    fromMs = center - targetWidth / 2
+    toMs = center + targetWidth / 2
+  }
+
+  // Shift the whole window back inside the domain without changing its width.
+  if (fromMs < domain.fromMs) {
+    const shift = domain.fromMs - fromMs
+    fromMs += shift
+    toMs += shift
+  }
+  if (toMs > domain.toMs) {
+    const shift = toMs - domain.toMs
+    fromMs -= shift
+    toMs -= shift
+  }
+  fromMs = Math.max(domain.fromMs, fromMs)
+  toMs = Math.min(domain.toMs, toMs)
+
+  // Pixel-to-time math produces fractional ms; emit integers so consumers can
+  // put the values straight into query params (servers parse epoch-ms ints).
+  return { selection: { fromMs: Math.round(fromMs), toMs: Math.round(toMs) }, clampedToMax }
+}
+
+/**
+ * Normalize recording-gap ranges for rendering: drop zero/negative-width spans,
+ * dedupe identical ones, merge overlapping/adjacent spans, and (when a domain is
+ * given) clip to it — spans entirely outside the domain are dropped. Pure so the
+ * host's bucket→gap extraction can be unit-tested without a DOM.
+ */
+export function mergeGapRanges(ranges: ScrubberRange[], domain?: ScrubberRange): ScrubberRange[] {
+  const valid = ranges
+    .map((r) => ({ fromMs: Math.min(r.fromMs, r.toMs), toMs: Math.max(r.fromMs, r.toMs) }))
+    .filter((r) => r.toMs > r.fromMs)
+    .sort((a, b) => a.fromMs - b.fromMs)
+
+  const merged: ScrubberRange[] = []
+  for (const r of valid) {
+    const last = merged[merged.length - 1]
+    // <= folds both overlapping and back-to-back spans into one band.
+    if (last && r.fromMs <= last.toMs) {
+      last.toMs = Math.max(last.toMs, r.toMs)
+    } else {
+      merged.push({ ...r })
+    }
+  }
+
+  if (!domain) return merged
+  const clipped: ScrubberRange[] = []
+  for (const r of merged) {
+    const fromMs = Math.max(r.fromMs, domain.fromMs)
+    const toMs = Math.min(r.toMs, domain.toMs)
+    if (toMs > fromMs) clipped.push({ fromMs, toMs })
+  }
+  return clipped
+}
+
+// Candidate display-bucket widths (hours) for the strip's histogram, coarsest
+// last. Adaptive selection keeps the bar count bounded without over-widening
+// bars — a wide bucket smears a short burst of events across empty time, so the
+// strip would paint data where there is none (e.g. across a recording gap).
+// Sub-hour rungs serve hosts that bucket raw events client-side (the local
+// ring) when the displayed span is framed tightly around a narrow selection;
+// hosts limited to hourly rollups (the retained server overview) pass a
+// minBucketMs of one hour and never see them.
+const DISPLAY_BUCKET_RUNGS_MS = [
+  MINUTE_MS,
+  5 * MINUTE_MS,
+  10 * MINUTE_MS,
+  30 * MINUTE_MS,
+  ...[1, 2, 3, 6, 12, 24].map((h) => h * HOUR_MS),
+]
+
+// Upper bound on rendered bars — the smallest rung whose count fits under this
+// wins, so bars stay as fine as the strip width reasonably supports.
+const MAX_DISPLAY_BARS = 256
+
+/**
+ * Pick the finest display-bucket width for a domain: the smallest rung such that
+ * `domainWidthMs / rung <= MAX_DISPLAY_BARS`, falling back to the coarsest rung.
+ * Pure + exported so the rung boundaries can be unit-tested.
+ */
+export function pickDisplayBucketSizeMs(domainWidthMs: number, minBucketMs = HOUR_MS): number {
+  for (const rung of DISPLAY_BUCKET_RUNGS_MS) {
+    if (rung < minBucketMs) continue
+    if (domainWidthMs / rung <= MAX_DISPLAY_BARS) return rung
+  }
+  return DISPLAY_BUCKET_RUNGS_MS[DISPLAY_BUCKET_RUNGS_MS.length - 1]
+}
+
+/** A preset sets the brush to [now - ms, now], clamped. */
+export function presetToSelection(
+  ms: number,
+  now: number,
+  domain: ScrubberRange,
+  maxSelectionMs?: number,
+): { selection: ScrubberRange; clampedToMax: boolean } {
+  return clampSelection({ fromMs: now - ms, toMs: now }, domain, maxSelectionMs, 'end')
+}
+
+/**
+ * Clamp the lens window into the applied selection, preserving its width. If the
+ * lens is wider than the selection it collapses to the full selection (the lens
+ * can never show more than what the query loaded).
+ */
+export function clampLensToSelection(lens: ScrubberRange, selection: ScrubberRange): ScrubberRange {
+  const selWidth = Math.max(0, selection.toMs - selection.fromMs)
+  const lensWidth = lens.toMs - lens.fromMs
+  if (lensWidth >= selWidth) return { fromMs: selection.fromMs, toMs: selection.toMs }
+  let fromMs = lens.fromMs
+  let toMs = lens.toMs
+  if (fromMs < selection.fromMs) {
+    toMs += selection.fromMs - fromMs
+    fromMs = selection.fromMs
+  }
+  if (toMs > selection.toMs) {
+    fromMs -= toMs - selection.toMs
+    toMs = selection.toMs
+  }
+  return { fromMs: Math.round(fromMs), toMs: Math.round(toMs) }
+}
+
+/** Human-readable duration for the lens-width chip label, e.g. "15m" / "8h" / "3d". */
+export function formatLensDuration(ms: number): string {
+  const minutes = Math.round(ms / 60_000)
+  if (minutes < 60) return `${minutes}m`
+  const hours = ms / HOUR_MS
+  if (hours < 24) return Number.isInteger(hours) ? `${hours}h` : `${hours.toFixed(1)}h`
+  const days = ms / DAY_MS
+  return Number.isInteger(days) ? `${days}d` : `${days.toFixed(1)}d`
+}
+
+/**
+ * Approximate count of events recorded after `toMs`, for the frozen chip's "Go
+ * live · N new" pull. Floors `toMs` to the hour and sums the `total` of every
+ * bucket starting at/after that hour — hour-granular is fine, it's a CTA hint,
+ * not a metric. Pure + exported for testing.
+ */
+export function countEventsAfter(buckets: ScrubberBucket[], toMs: number): number {
+  const hourStart = Math.floor(toMs / HOUR_MS) * HOUR_MS
+  let sum = 0
+  for (const b of buckets) {
+    if (b.startMs >= hourStart) sum += b.total
+  }
+  return sum
+}
+
+/** Bar height ∝ total, sqrt-scaled with a visible floor so sparse bars show. */
+export function barHeight(total: number, maxTotal: number, trackHeight: number): number {
+  if (total <= 0 || maxTotal <= 0) return 0
+  const floor = Math.max(2, trackHeight * 0.08)
+  const scaled = (Math.sqrt(total) / Math.sqrt(maxTotal)) * trackHeight
+  return Math.max(floor, Math.min(trackHeight, scaled))
+}
+
+/** Compact pill label, e.g. "Jul 1 14:30". */
+export function formatScrubberPill(ms: number): string {
+  const d = new Date(ms)
+  const date = d.toLocaleDateString([], { month: 'short', day: 'numeric' })
+  const time = d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+  return `${date} ${time}`
+}