@skyhook-io/k8s-ui 1.8.9 → 1.8.11

package/src/components/timeline/timeline-filters.test.ts

@@ -0,0 +1,196 @@
+import { describe, expect, it } from 'vitest'
+import type { TimelineEvent } from '../../types'
+import {
+  matchesActivityFilter,
+  matchesTimelineSearch,
+  computeActivityStats,
+  mergeKindOptions,
+  describeActiveFilters,
+  TIMELINE_RESOURCE_KINDS,
+} from './timeline-filters'
+
+function ev(partial: Partial<TimelineEvent>): TimelineEvent {
+  return {
+    id: 'id',
+    timestamp: '2026-01-01T00:00:00Z',
+    source: 'informer',
+    kind: 'Pod',
+    namespace: 'default',
+    name: 'thing',
+    eventType: 'update',
+    ...partial,
+  }
+}
+
+// Fixtures spanning the semantics the list originally encoded.
+const changeAdd = ev({ source: 'informer', eventType: 'add' })
+const changeUpdate = ev({ source: 'informer', eventType: 'update' })
+const changeDelete = ev({ source: 'informer', eventType: 'delete' })
+const changeUnhealthy = ev({ source: 'informer', eventType: 'update', healthState: 'unhealthy' })
+const changeDegraded = ev({ source: 'historical', eventType: 'update', healthState: 'degraded' })
+const changeHealthy = ev({ source: 'informer', eventType: 'update', healthState: 'healthy' })
+const historicalAdd = ev({ source: 'historical', eventType: 'add' })
+const k8sNormal = ev({ source: 'k8s_event', eventType: 'Normal', reason: 'Scheduled' })
+const k8sWarning = ev({ source: 'k8s_event', eventType: 'Warning', reason: 'BackOff' })
+
+describe('matchesActivityFilter (matrix mirrors the list view)', () => {
+  it('empty selection passes everything', () => {
+    for (const e of [changeAdd, k8sNormal, k8sWarning, changeUnhealthy]) {
+      expect(matchesActivityFilter(e, [])).toBe(true)
+    }
+  })
+
+  it("'changes' matches informer + historical, not K8s events", () => {
+    expect(matchesActivityFilter(changeAdd, ['changes'])).toBe(true)
+    expect(matchesActivityFilter(historicalAdd, ['changes'])).toBe(true)
+    expect(matchesActivityFilter(changeUnhealthy, ['changes'])).toBe(true)
+    expect(matchesActivityFilter(k8sNormal, ['changes'])).toBe(false)
+    expect(matchesActivityFilter(k8sWarning, ['changes'])).toBe(false)
+  })
+
+  it("'k8s_events' matches only K8s Event objects (Normal + Warning)", () => {
+    expect(matchesActivityFilter(k8sNormal, ['k8s_events'])).toBe(true)
+    expect(matchesActivityFilter(k8sWarning, ['k8s_events'])).toBe(true)
+    expect(matchesActivityFilter(changeAdd, ['k8s_events'])).toBe(false)
+    expect(matchesActivityFilter(historicalAdd, ['k8s_events'])).toBe(false)
+  })
+
+  it("'warnings' matches only Warning-typed events", () => {
+    expect(matchesActivityFilter(k8sWarning, ['warnings'])).toBe(true)
+    expect(matchesActivityFilter(k8sNormal, ['warnings'])).toBe(false)
+    expect(matchesActivityFilter(changeAdd, ['warnings'])).toBe(false)
+    // A change is never eventType 'Warning', so it never counts as a warning.
+    expect(matchesActivityFilter(changeUnhealthy, ['warnings'])).toBe(false)
+  })
+
+  it("'unhealthy' matches only changes with unhealthy/degraded health (no K8s events)", () => {
+    expect(matchesActivityFilter(changeUnhealthy, ['unhealthy'])).toBe(true)
+    expect(matchesActivityFilter(changeDegraded, ['unhealthy'])).toBe(true)
+    expect(matchesActivityFilter(changeHealthy, ['unhealthy'])).toBe(false)
+    expect(matchesActivityFilter(changeAdd, ['unhealthy'])).toBe(false)
+    // A K8s warning is unhealthy-looking but is NOT a change → excluded.
+    expect(matchesActivityFilter(k8sWarning, ['unhealthy'])).toBe(false)
+  })
+})
+
+describe('matchesActivityFilter union semantics', () => {
+  it('empty array = match everything (no chip selected)', () => {
+    for (const e of [changeAdd, historicalAdd, k8sNormal, k8sWarning, changeUnhealthy, changeDegraded]) {
+      expect(matchesActivityFilter(e, [])).toBe(true)
+    }
+  })
+
+  it('single key behaves like the old single-value filter', () => {
+    expect(matchesActivityFilter(changeAdd, ['changes'])).toBe(true)
+    expect(matchesActivityFilter(k8sWarning, ['changes'])).toBe(false)
+  })
+
+  it('multiple keys match the UNION (event matches if it satisfies ANY key)', () => {
+    // 'changes' + 'warnings': a change and a K8s warning both pass; a plain
+    // Normal K8s event (neither a change nor a warning) does not.
+    const sel = ['changes', 'warnings'] as const
+    expect(matchesActivityFilter(changeAdd, sel)).toBe(true)
+    expect(matchesActivityFilter(k8sWarning, sel)).toBe(true)
+    expect(matchesActivityFilter(k8sNormal, sel)).toBe(false)
+  })
+
+  it('an event counted under two selected keys still matches once', () => {
+    // k8s_events + warnings both cover a Warning event.
+    expect(matchesActivityFilter(k8sWarning, ['k8s_events', 'warnings'])).toBe(true)
+    // A Normal event matches k8s_events but not warnings — union still passes it.
+    expect(matchesActivityFilter(k8sNormal, ['k8s_events', 'warnings'])).toBe(true)
+  })
+})
+
+describe('matchesTimelineSearch', () => {
+  const e = ev({
+    name: 'checkout-api',
+    kind: 'Deployment',
+    namespace: 'payments',
+    reason: 'ScalingReplicaSet',
+    message: 'Scaled up replica set',
+    diff: { summary: 'image bumped to v2', fields: [] },
+  })
+
+  it('empty term matches everything', () => {
+    expect(matchesTimelineSearch(e, '')).toBe(true)
+  })
+  it('matches name / kind / namespace / reason / message / diff summary, case-insensitive', () => {
+    expect(matchesTimelineSearch(e, 'CHECKOUT')).toBe(true)
+    expect(matchesTimelineSearch(e, 'deployment')).toBe(true)
+    expect(matchesTimelineSearch(e, 'payments')).toBe(true)
+    expect(matchesTimelineSearch(e, 'scalingreplica')).toBe(true)
+    expect(matchesTimelineSearch(e, 'replica set')).toBe(true)
+    expect(matchesTimelineSearch(e, 'v2')).toBe(true)
+  })
+  it('non-match returns false', () => {
+    expect(matchesTimelineSearch(e, 'zzz-nope')).toBe(false)
+  })
+})
+
+describe('computeActivityStats', () => {
+  it('counts changes, warnings, unhealthy, deleted from the full array', () => {
+    const stats = computeActivityStats([
+      changeAdd, changeUpdate, changeDelete, changeUnhealthy, changeDegraded,
+      k8sNormal, k8sWarning,
+    ])
+    expect(stats.total).toBe(7)
+    // changes = informer/historical: add, update, delete, unhealthy, degraded
+    expect(stats.changes).toBe(5)
+    expect(stats.warnings).toBe(1)
+    expect(stats.unhealthy).toBe(2)
+    expect(stats.deleted).toBe(1)
+  })
+  it('handles empty/undefined', () => {
+    expect(computeActivityStats([])).toEqual({ total: 0, changes: 0, k8sEvents: 0, warnings: 0, unhealthy: 0, deleted: 0 })
+    expect(computeActivityStats(undefined)).toEqual({ total: 0, changes: 0, k8sEvents: 0, warnings: 0, unhealthy: 0, deleted: 0 })
+  })
+})
+
+describe('describeActiveFilters', () => {
+  const none = { search: '', activityFilter: [] as const, kindFilter: [] as const, showDeleted: true }
+
+  it('returns empty string when nothing is filtering', () => {
+    expect(describeActiveFilters(none)).toBe('')
+    // Blank/whitespace search does not count as active.
+    expect(describeActiveFilters({ ...none, search: '   ' })).toBe('')
+  })
+
+  it('describes a single active filter', () => {
+    expect(describeActiveFilters({ ...none, search: 'dfasdf' })).toBe('search "dfasdf"')
+    expect(describeActiveFilters({ ...none, activityFilter: ['changes'] })).toBe('1 activity filter')
+    expect(describeActiveFilters({ ...none, kindFilter: ['Pod'] })).toBe('1 kind')
+    expect(describeActiveFilters({ ...none, showDeleted: false })).toBe('deleted hidden')
+  })
+
+  it('combines active filters in toolbar order with pluralization', () => {
+    expect(
+      describeActiveFilters({
+        search: 'dfasdf',
+        // Canonical: source=changes + Problems toggle → two activity picks.
+        activityFilter: ['unhealthy'],
+        kindFilter: ['Pod', 'Service', 'ConfigMap'],
+        showDeleted: false,
+      }),
+    ).toBe('search "dfasdf" · 2 activity filters · 3 kinds · deleted hidden')
+  })
+
+  it('counts the two-axis Problems toggle as ONE activity filter, not two keys', () => {
+    // source=all + Problems expands to keys [warnings, unhealthy] but is one pick;
+    // counting raw keys read "2 activity filters" for a single toggle.
+    expect(describeActiveFilters({ ...none, activityFilter: ['warnings', 'unhealthy'] })).toBe('1 activity filter')
+  })
+})
+
+describe('mergeKindOptions', () => {
+  it('keeps the seed order and appends discovered CRDs alphabetically', () => {
+    const opts = mergeKindOptions(['Zebra', 'Alpha', 'Pod', 'Deployment'])
+    expect(opts.slice(0, TIMELINE_RESOURCE_KINDS.length)).toEqual(TIMELINE_RESOURCE_KINDS)
+    expect(opts.slice(TIMELINE_RESOURCE_KINDS.length)).toEqual(['Alpha', 'Zebra'])
+  })
+  it('dedups and drops falsy kinds', () => {
+    const opts = mergeKindOptions(['', 'Widget', 'Widget'])
+    expect(opts.filter((k) => k === 'Widget')).toHaveLength(1)
+    expect(opts).not.toContain('')
+  })
+})

package/src/components/timeline/timeline-filters.ts

@@ -0,0 +1,180 @@
+import type { TimelineEvent } from '../../types'
+import { isChangeEvent, isK8sEvent } from '../../types'
+import { pluralize } from '../../utils/pluralize'
+
+// Legacy single-value activity filter. Retained for the home-page deep-link
+// (`initialFilter`) compat path that seeds the multi-select from one preset.
+export type ActivityTypeFilter = 'all' | 'changes' | 'k8s_events' | 'warnings' | 'unhealthy'
+
+// The individually-selectable activity-type chips (no 'all' — an empty selection
+// means "everything", so 'all' has no key of its own).
+export type ActivityFilterKey = 'changes' | 'k8s_events' | 'warnings' | 'unhealthy'
+
+// Per-key semantics, mirroring the list view's original inline filter:
+//   changes    → informer/historical resource mutations
+//   k8s_events → native K8s Event objects (Normal + Warning)
+//   warnings   → only K8s Warning events (matches the home-page count)
+//   unhealthy  → changes whose health state is unhealthy or degraded (no K8s events)
+function matchesActivityKey(event: TimelineEvent, key: ActivityFilterKey): boolean {
+  switch (key) {
+    case 'changes':
+      return isChangeEvent(event)
+    case 'k8s_events':
+      return isK8sEvent(event)
+    case 'warnings':
+      return event.eventType === 'Warning'
+    case 'unhealthy':
+      return isChangeEvent(event) && (event.healthState === 'unhealthy' || event.healthState === 'degraded')
+  }
+}
+
+// Predicate for the activity-type chips. Extracted so the list and swimlane can't
+// drift — both filter their event stream through the exact same rules. Multi-select
+// with union semantics: an empty selection matches everything; otherwise an event
+// matches if it satisfies ANY selected key.
+export function matchesActivityFilter(event: TimelineEvent, selected: readonly ActivityFilterKey[]): boolean {
+  if (selected.length === 0) return true
+  return selected.some((key) => matchesActivityKey(event, key))
+}
+
+// ---------------------------------------------------------------------------
+// Two-axis view over the activity keys. The toolbar presents the filter as a
+// SOURCE pick (Changes = watched resource mutations vs K8s Events = native
+// Event objects) crossed with a PROBLEMS toggle (the severity slice of the
+// picked source).
+//
+// The six reachable states are exactly expressible in the existing key
+// vocabulary, so the URL param, the shared predicate, and both views carry
+// ActivityFilterKey[] unchanged:
+//   All        → []                          All+problems    → warnings+unhealthy
+//   Changes    → [changes]                   Changes+problems → [unhealthy]
+//   K8s Events → [k8s_events]                Events+problems  → [warnings]
+// ---------------------------------------------------------------------------
+
+export type ActivitySource = 'all' | 'changes' | 'k8s_events'
+
+export interface ActivitySelection {
+  source: ActivitySource
+  problemsOnly: boolean
+}
+
+export function selectionToActivityKeys(sel: ActivitySelection): ActivityFilterKey[] {
+  if (sel.problemsOnly) {
+    if (sel.source === 'changes') return ['unhealthy']
+    if (sel.source === 'k8s_events') return ['warnings']
+    return ['warnings', 'unhealthy']
+  }
+  if (sel.source === 'changes') return ['changes']
+  if (sel.source === 'k8s_events') return ['k8s_events']
+  return []
+}
+
+// Inverse of selectionToActivityKeys for the six canonical states. Legacy
+// multi-select key sets (pre-two-axis URLs) fall back to the widest reading —
+// showing more than a stale link intended beats silently hiding activity.
+export function activityKeysToSelection(keys: readonly ActivityFilterKey[]): ActivitySelection {
+  const set = new Set(keys)
+  const eq = (...want: ActivityFilterKey[]) => set.size === want.length && want.every((k) => set.has(k))
+  if (keys.length === 0) return { source: 'all', problemsOnly: false }
+  if (eq('changes')) return { source: 'changes', problemsOnly: false }
+  if (eq('k8s_events')) return { source: 'k8s_events', problemsOnly: false }
+  if (eq('unhealthy')) return { source: 'changes', problemsOnly: true }
+  if (eq('warnings')) return { source: 'k8s_events', problemsOnly: true }
+  if (eq('warnings', 'unhealthy')) return { source: 'all', problemsOnly: true }
+  return { source: 'all', problemsOnly: false }
+}
+
+// Free-text search predicate. Matches name, kind, namespace, reason, message,
+// and diff summary. Shared so the list and swimlane views match identically.
+export function matchesTimelineSearch(event: TimelineEvent, term: string): boolean {
+  if (!term) return true
+  const t = term.toLowerCase()
+  return (
+    event.name.toLowerCase().includes(t) ||
+    event.kind.toLowerCase().includes(t) ||
+    (event.namespace?.toLowerCase().includes(t) ?? false) ||
+    (event.reason?.toLowerCase().includes(t) ?? false) ||
+    (event.message?.toLowerCase().includes(t) ?? false) ||
+    (event.diff?.summary?.toLowerCase().includes(t) ?? false)
+  )
+}
+
+// Human-readable summary of the active content filters, for the filtered-empty
+// state's reason line (e.g. `search "dfasdf" · 2 activity filters · 3 kinds ·
+// deleted hidden`). Returns '' when nothing is filtering. Order mirrors the
+// toolbar left-to-right. `showDeleted` defaults on, so only its hidden state
+// counts as active.
+export function describeActiveFilters(opts: {
+  search: string
+  activityFilter: readonly ActivityFilterKey[]
+  kindFilter: readonly string[]
+  showDeleted: boolean
+}): string {
+  const parts: string[] = []
+  const search = opts.search.trim()
+  if (search) parts.push(`search "${search}"`)
+  // Count what the user set (source segment + Problems toggle), not the raw key
+  // array: the single Problems toggle expands to two keys (warnings+unhealthy),
+  // which would otherwise read as "2 activity filters" for one pick.
+  const sel = activityKeysToSelection(opts.activityFilter)
+  const activityCount = (sel.source !== 'all' ? 1 : 0) + (sel.problemsOnly ? 1 : 0)
+  if (activityCount > 0) parts.push(pluralize(activityCount, 'activity filter'))
+  if (opts.kindFilter.length > 0) parts.push(pluralize(opts.kindFilter.length, 'kind'))
+  if (!opts.showDeleted) parts.push('deleted hidden')
+  return parts.join(' · ')
+}
+
+export interface ActivityStats {
+  total: number
+  changes: number
+  k8sEvents: number
+  warnings: number
+  unhealthy: number
+  deleted: number
+}
+
+// Chip counts. Derived from the full (unfiltered) events array so the badges
+// show totals regardless of the active filter — identical in both views.
+export function computeActivityStats(events: TimelineEvent[] | undefined): ActivityStats {
+  if (!events || events.length === 0) {
+    return { total: 0, changes: 0, k8sEvents: 0, warnings: 0, unhealthy: 0, deleted: 0 }
+  }
+  let changes = 0
+  let k8sEvents = 0
+  let warnings = 0
+  let unhealthy = 0
+  let deleted = 0
+  for (const e of events) {
+    if (isChangeEvent(e)) changes++
+    if (isK8sEvent(e)) k8sEvents++
+    if (e.eventType === 'Warning') warnings++
+    if (isChangeEvent(e) && (e.healthState === 'unhealthy' || e.healthState === 'degraded')) unhealthy++
+    if (e.eventType === 'delete') deleted++
+  }
+  return { total: events.length, changes, k8sEvents, warnings, unhealthy, deleted }
+}
+
+// Curated seed order for the Kind dropdown; discovered kinds (CRDs) append after.
+export const TIMELINE_RESOURCE_KINDS = [
+  'Deployment',
+  'Pod',
+  'Service',
+  'ConfigMap',
+  'Ingress',
+  'Gateway',
+  'HTTPRoute',
+  'GRPCRoute',
+  'TCPRoute',
+  'TLSRoute',
+  'ReplicaSet',
+  'DaemonSet',
+  'StatefulSet',
+]
+
+// Merge discovered kinds into the curated seed: seed keeps its order, extras are
+// appended alphabetically. Shared so both toolbars offer the same option set.
+export function mergeKindOptions(extraKinds: Iterable<string>): string[] {
+  const seeded = new Set(TIMELINE_RESOURCE_KINDS)
+  const extra = [...new Set(extraKinds)].filter((k) => !!k && !seeded.has(k)).sort()
+  return [...TIMELINE_RESOURCE_KINDS, ...extra]
+}

package/src/components/timeline/timeline-lane-sort.test.ts

@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest'
+import type { TimelineEvent } from '../../types'
+import type { ResourceLane } from '../../utils/resource-hierarchy'
+import { extractPinnedLanes } from '../../utils/resource-hierarchy'
+import { sortTimelineLanes, type LaneSortContext } from './timeline-lane-sort'
+
+function ev(ts: number, over: Partial<TimelineEvent> = {}): TimelineEvent {
+  return {
+    id: `${ts}-${Math.random()}`,
+    timestamp: new Date(ts).toISOString(),
+    source: 'informer',
+    kind: 'Pod',
+    namespace: 'default',
+    name: 'thing',
+    eventType: 'update',
+    ...over,
+  }
+}
+
+function lane(over: Partial<ResourceLane> & { id: string; name: string }): ResourceLane {
+  return {
+    kind: 'Pod',
+    namespace: 'default',
+    isWorkload: true,
+    events: [],
+    ...over,
+  }
+}
+
+// Visible window: [1000, 2000].
+const WINDOW = { windowStart: 1000, windowEnd: 2000 }
+
+// Importance scores keyed by lane id — injected so the sort stays pure.
+const SCORES: Record<string, number> = { web: 5, api: 1, db: 9, cart: 3 }
+const ctx: LaneSortContext = { ...WINDOW, scoreOf: (l) => SCORES[l.id] ?? 0 }
+
+const web = lane({ id: 'web', name: 'web', namespace: 'default', events: [ev(1500)] })
+const api = lane({ id: 'api', name: 'api', namespace: 'default', events: [ev(1900)] })
+// db's only event predates the window — 'recent' falls back to its overall newest.
+const dbLane = lane({ id: 'db', name: 'db', namespace: 'prod', events: [ev(500)] })
+// An app-group lane: sorts by its title, not its synthetic name.
+const cart = lane({ id: 'cart', name: 'cart-app', title: 'Cart', isAppGroup: true, events: [ev(1200)] })
+
+const LANES = [web, api, dbLane, cart]
+
+const ids = (lanes: ResourceLane[]) => lanes.map((l) => l.id)
+
+describe('sortTimelineLanes', () => {
+  it("'importance' (default) orders by score, highest first", () => {
+    expect(ids(sortTimelineLanes(LANES, 'importance', ctx))).toEqual(['db', 'web', 'cart', 'api'])
+  })
+
+  it("'recent' orders by newest in-window event, falling back to overall newest", () => {
+    // In-window newest: api(1900) > web(1500) > cart(1200); db has nothing
+    // in-window so its overall newest (500) sinks it to the bottom.
+    expect(ids(sortTimelineLanes(LANES, 'recent', ctx))).toEqual(['api', 'web', 'cart', 'db'])
+  })
+
+  it("'recent' breaks ties by importance", () => {
+    const a = lane({ id: 'a', name: 'a', events: [ev(1500)] })
+    const b = lane({ id: 'b', name: 'b', events: [ev(1500)] })
+    const tieCtx: LaneSortContext = { ...WINDOW, scoreOf: (l) => (l.id === 'b' ? 10 : 1) }
+    expect(ids(sortTimelineLanes([a, b], 'recent', tieCtx))).toEqual(['b', 'a'])
+  })
+
+  it("'name' orders alphabetically (case-insensitive), app groups by their title", () => {
+    // api, Cart (title), db, web.
+    expect(ids(sortTimelineLanes(LANES, 'name', ctx))).toEqual(['api', 'cart', 'db', 'web'])
+  })
+
+  it("'name' breaks ties by namespace", () => {
+    const first = lane({ id: 'first', name: 'web', namespace: 'aaa' })
+    const second = lane({ id: 'second', name: 'web', namespace: 'zzz' })
+    expect(ids(sortTimelineLanes([second, first], 'name', ctx))).toEqual(['first', 'second'])
+  })
+
+  it('does not mutate the input array (pinned extraction reads the original order)', () => {
+    const input = [...LANES]
+    sortTimelineLanes(input, 'name', ctx)
+    expect(ids(input)).toEqual(['web', 'api', 'db', 'cart'])
+  })
+})
+
+describe('pinned section is unaffected by sort', () => {
+  it('keeps strict pin order regardless of the active lane sort', () => {
+    const pinnedRefs = [
+      { id: 'db', kind: 'Pod', namespace: 'prod', name: 'db' },
+      { id: 'api', kind: 'Pod', namespace: 'default', name: 'api' },
+    ]
+    // Extract from lanes ordered by two different sorts — the pinned rows follow
+    // the ref order, never the lane order.
+    const byImportance = sortTimelineLanes(LANES, 'importance', ctx)
+    const byName = sortTimelineLanes(LANES, 'name', ctx)
+    expect(ids(extractPinnedLanes(byImportance, pinnedRefs))).toEqual(['db', 'api'])
+    expect(ids(extractPinnedLanes(byName, pinnedRefs))).toEqual(['db', 'api'])
+  })
+})

package/src/components/timeline/timeline-lane-sort.ts

@@ -0,0 +1,77 @@
+import type { ResourceLane } from '../../utils/resource-hierarchy'
+
+// The lane orderings offered by the swimlane's View → Sort control. 'importance'
+// is the default (the interestingness ranking); a second/third ordering earns the
+// control its keep — a lone always-on radio would be inert chrome.
+export type TimelineSort = 'importance' | 'recent' | 'name'
+
+export const TIMELINE_SORT_DEFAULT: TimelineSort = 'importance'
+
+export interface LaneSortContext<L extends ResourceLane = ResourceLane> {
+  // Visible window bounds — 'recent' prefers events inside this lens.
+  windowStart: number
+  windowEnd: number
+  // Interestingness score, injected so the sort stays pure and reuses the score
+  // the swimlane already computed per lane.
+  scoreOf: (lane: L) => number
+}
+
+// App-group lanes sort by their header title; plain lanes by their resource name.
+function laneName(lane: ResourceLane): string {
+  return (lane.isAppGroup ? lane.title ?? lane.name : lane.name) ?? ''
+}
+
+// Most recent event time for a lane, preferring events inside the visible window
+// (the live "what just moved" job) and falling back to the lane's newest event
+// overall when nothing lands in-window (e.g. a lane adjacent to a pin). Lanes with
+// no events return -Infinity so they sink to the bottom.
+function laneRecency(lane: ResourceLane, windowStart: number, windowEnd: number): number {
+  const events = lane.allEventsSorted ?? lane.events
+  let inWindow = -Infinity
+  let overall = -Infinity
+  for (const e of events) {
+    const t = new Date(e.timestamp).getTime()
+    if (t > overall) overall = t
+    if (t >= windowStart && t <= windowEnd && t > inWindow) inWindow = t
+  }
+  return inWindow !== -Infinity ? inWindow : overall
+}
+
+// Order the top-level lanes for the chosen sort. Pure + total so the swimlane can
+// memo it and the tests can pin each ordering. The PINNED section is ordered
+// elsewhere (strict pin order) and never flows through here.
+export function sortTimelineLanes<L extends ResourceLane>(
+  lanes: L[],
+  sort: TimelineSort,
+  ctx: LaneSortContext<L>,
+): L[] {
+  const copy = [...lanes]
+  switch (sort) {
+    case 'recent': {
+      // Precompute recency once per lane (Schwartzian transform): laneRecency
+      // scans every event, so calling it inside the comparator would repeat that
+      // scan O(n log n) times.
+      const recency = new Map<L, number>()
+      for (const lane of copy) recency.set(lane, laneRecency(lane, ctx.windowStart, ctx.windowEnd))
+      return copy.sort((a, b) => {
+        const ra = recency.get(a)!
+        const rb = recency.get(b)!
+        if (ra !== rb) return rb - ra
+        return ctx.scoreOf(b) - ctx.scoreOf(a)
+      })
+    }
+    case 'name':
+      return copy.sort((a, b) => {
+        const na = laneName(a).toLowerCase()
+        const nb = laneName(b).toLowerCase()
+        if (na !== nb) return na < nb ? -1 : 1
+        const nsa = a.namespace ?? ''
+        const nsb = b.namespace ?? ''
+        if (nsa !== nsb) return nsa < nsb ? -1 : 1
+        return 0
+      })
+    case 'importance':
+    default:
+      return copy.sort((a, b) => ctx.scoreOf(b) - ctx.scoreOf(a))
+  }
+}

package/src/components/timeline/timeline-live.test.ts

@@ -0,0 +1,131 @@
+import { describe, expect, it } from 'vitest'
+import {
+  BASE_QUANTIZE_STEP_MS,
+  LENS_LATCH_EPSILON_MS,
+  STALE_AMBER_AFTER_MS,
+  advanceLatchedLens,
+  deriveLiveSelection,
+  isLensLatched,
+  quantizeBaseWindow,
+} from './timeline-live'
+import { clampSelection, type ScrubberRange } from './scrubber-math'
+
+const MIN = 60_000
+const HOUR = 60 * MIN
+
+describe('deriveLiveSelection', () => {
+  it('pins the window to now with the given width', () => {
+    const now = 1_000_000_000
+    expect(deriveLiveSelection(HOUR, now)).toEqual({ fromMs: now - HOUR, toMs: now })
+  })
+})
+
+describe('quantizeBaseWindow', () => {
+  it('floors both edges to the step', () => {
+    const step = BASE_QUANTIZE_STEP_MS
+    const q = quantizeBaseWindow(step * 3 + 12_345, step * 10 + 4_000, step)
+    expect(q).toEqual({ fromMs: step * 3, toMs: step * 10 })
+  })
+
+  it('is stable across two ticks inside the same step', () => {
+    const step = BASE_QUANTIZE_STEP_MS
+    const base = step * 100
+    // Two "now" values 30s apart but inside the same 5-minute step.
+    const a = quantizeBaseWindow(base - HOUR + 10_000, base + 10_000, step)
+    const b = quantizeBaseWindow(base - HOUR + 40_000, base + 40_000, step)
+    expect(a).toEqual(b)
+  })
+
+  it('advances once the edge crosses a step boundary', () => {
+    const step = BASE_QUANTIZE_STEP_MS
+    const before = quantizeBaseWindow(0, step - 1, step)
+    const after = quantizeBaseWindow(0, step + 1, step)
+    expect(before.toMs).toBe(0)
+    expect(after.toMs).toBe(step)
+  })
+
+  it('trailing seam never exceeds one step (covered by the 10-min live poll)', () => {
+    const step = BASE_QUANTIZE_STEP_MS
+    const now = step * 42 + 137_000
+    const q = quantizeBaseWindow(now - HOUR, now, step)
+    // Gap between the quantized right edge and now is < one step, and one step
+    // (5min) is well inside the 10-min live poll window ⇒ no data hole.
+    expect(now - q.toMs).toBeLessThan(step)
+    expect(step).toBeLessThan(10 * MIN)
+  })
+})
+
+describe('isLensLatched', () => {
+  const sel: ScrubberRange = { fromMs: 0, toMs: 100 * HOUR }
+
+  it('latched when the lens rides the live edge', () => {
+    expect(isLensLatched({ fromMs: 90 * HOUR, toMs: sel.toMs }, sel)).toBe(true)
+  })
+
+  it('latched when the lens is within one tick of the edge', () => {
+    const lens = { fromMs: 90 * HOUR, toMs: sel.toMs - 30_000 }
+    expect(isLensLatched(lens, sel)).toBe(true)
+  })
+
+  it('exactly at the epsilon boundary counts as latched', () => {
+    const lens = { fromMs: 0, toMs: sel.toMs - LENS_LATCH_EPSILON_MS }
+    expect(isLensLatched(lens, sel)).toBe(true)
+  })
+
+  it('not latched when dragged into the past', () => {
+    const lens = { fromMs: 0, toMs: sel.toMs - 2 * HOUR }
+    expect(isLensLatched(lens, sel)).toBe(false)
+  })
+})
+
+describe('advanceLatchedLens', () => {
+  it('slides to the new right edge keeping width', () => {
+    const lens = { fromMs: 100, toMs: 400 } // width 300
+    const next = advanceLatchedLens(lens, { fromMs: 0, toMs: 1_000 })
+    expect(next).toEqual({ fromMs: 700, toMs: 1_000 })
+    expect(next.toMs - next.fromMs).toBe(300)
+  })
+
+  it('re-latches: an advanced lens stays within epsilon of the next tick edge', () => {
+    let lens = { fromMs: 0, toMs: 100 * HOUR }
+    let now = 100 * HOUR
+    for (let i = 0; i < 5; i++) {
+      now += 30_000
+      const sel = { fromMs: now - 100 * HOUR, toMs: now }
+      expect(isLensLatched(lens, sel)).toBe(true)
+      lens = advanceLatchedLens(lens, sel)
+    }
+  })
+})
+
+describe('live selection vs domain clamp (RetainedTimelineScrubber fix)', () => {
+  // Regression: a live selection whose to=now(tick) exceeds a stale overview
+  // domain.to must NOT be rewritten backward. The fix derives domain.to as
+  // max(staleNow, selection.to); this asserts the clamp is then a no-op.
+  it('is not clamped when domain.to = max(staleNow, selection.to)', () => {
+    const now = 100 * HOUR
+    const selection = deriveLiveSelection(24 * HOUR, now)
+    const staleNow = now - 45_000 // overview updatedAt lags the tick
+    const availableFromMs = now - 7 * 24 * HOUR
+    const domainTo = Math.max(staleNow, selection.toMs)
+    const domain = { fromMs: availableFromMs, toMs: domainTo }
+    const maxSelectionMs = Math.min(7 * 24 * HOUR, domain.toMs - domain.fromMs)
+    const { selection: clamped } = clampSelection(selection, domain, maxSelectionMs, 'end')
+    expect(clamped).toEqual(selection)
+  })
+
+  it('WITHOUT the fix a stale domain.to drags the live edge backward', () => {
+    const now = 100 * HOUR
+    const selection = deriveLiveSelection(24 * HOUR, now)
+    const staleNow = now - 45_000
+    const domain = { fromMs: now - 7 * 24 * HOUR, toMs: staleNow } // no max()
+    const { selection: clamped } = clampSelection(selection, domain, 7 * 24 * HOUR, 'end')
+    expect(clamped.toMs).toBeLessThan(selection.toMs)
+  })
+})
+
+describe('STALE_AMBER_AFTER_MS', () => {
+  it('is 15 minutes', () => {
+    expect(STALE_AMBER_AFTER_MS).toBe(15 * 60_000)
+  })
+})