@skyhook-io/k8s-ui 1.18.2 → 1.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.18.2",
+  "version": "1.20.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -20,6 +20,13 @@
       "./src/components/resources/*.tsx"
     ],
     "./components/resources/KueueAdmissionSection": "./src/components/resources/KueueAdmissionSection.tsx",
+    "./components/kueue/AdmissionPath": "./src/components/kueue/AdmissionPath.tsx",
+    "./components/kueue/QueueEvidence": "./src/components/kueue/QueueEvidence.tsx",
+    "./components/kueue/*": [
+      "./src/components/kueue/*.ts",
+      "./src/components/kueue/*.tsx"
+    ],
+    "./components/resources/KueuePendingPosition": "./src/components/resources/KueuePendingPosition.tsx",
     "./components/resources/renderers/*": [
       "./src/components/resources/renderers/*.tsx",
       "./src/components/resources/renderers/*.ts"
@@ -89,7 +96,7 @@
     "yaml": ">=2.0.0"
   },
   "devDependencies": {
-    "@types/node": "^26.6.2",
+    "@types/node": "^26.6.6",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@xterm/addon-fit": "^0.11.0",

package/src/components/applications/ApplicationDetail.tsx

@@ -1833,6 +1833,8 @@ function batchOverviewStats(activity: AppBatchActivity[]) {
   );
   const failed = activity.reduce((n, item) => n + item.failedRuns, 0);
   const active = activity.reduce((n, item) => n + item.activeRuns, 0);
+  const rootActivity = activity.filter(item => item.workload.kind === 'JobSet' && item.workload.group === 'jobset.x-k8s.io')
+  const rootStates = [...new Set(rootActivity.map(item => item.latestRunPhase || 'Unknown'))].join(', ')
 
   return {
     latestValue: latest?.latestRunPhase || latest?.label || "None",
@@ -1841,9 +1843,9 @@ function batchOverviewStats(activity: AppBatchActivity[]) {
       : "No retained runs",
     retainedValue:
       retained > 0 ? `${succeeded} succeeded / ${failed} failed` : "0 retained",
-    activeValue: active > 0 ? `${active} running` : "None",
+    activeValue: active > 0 ? `${active} running` : rootStates || "None",
     activeDetail:
-      active > 0 ? activeWorkloadNames(activity) : "No active batch work",
+      active > 0 ? activeWorkloadNames(activity) : rootStates ? "JobSet root lifecycle; running Pods are not inferred." : "No active batch work",
     scheduleValue:
       schedules.length === 0
         ? "None"
@@ -2068,6 +2070,9 @@ function workloadRuntimeStatus(workload: AppWorkload): {
       health: rolloutDisplayHealth(workload.rollout, workload.health),
     }
   }
+  if (workload.kind === 'JobSet' && workload.group === 'jobset.x-k8s.io') {
+    return { label: workload.batch?.latestRunPhase || 'Unknown', health: healthOf(workload.health) }
+  }
   const batch = workload.batch;
   if (!batch) {
     const health = healthOf(workload.health);
@@ -2085,6 +2090,7 @@ function workloadRuntimeStatus(workload: AppWorkload): {
 
 function workloadRuntimeDetail(workload: AppWorkload): string {
   if (workload.rollout && (workload.rollout.active || workload.rollout.phase === 'stalled')) return workload.rollout.detail || `${workload.ready}/${workload.desired} ready`
+  if (workload.kind === 'JobSet' && workload.group === 'jobset.x-k8s.io') return workload.batch?.message || `Root lifecycle: ${workload.batch?.latestRunPhase || 'Unknown'}`
   const batch = workload.batch;
   if (!batch) return `${workload.ready}/${workload.desired} ready`;
   if ((batch.activeRuns ?? 0) > 0)

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

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { AreaChart } from './AreaChart'
 import { layoutAnnotations, ANNOTATION_LABEL_ROWS } from './annotations'
-import { formatTimestamp } from './format'
+import { alignedTimeAxisTicks, formatTimestamp } from './format'
 import type { ChartAnnotation, TimeSeries } from './types'
 
 const t0 = 1_788_679_000
@@ -82,6 +82,29 @@ describe('AreaChart domain and axes', () => {
     expect(Math.max(...xs)).toBeCloseTo(960, 0)
   })
 
+  it('labels a multi-day X axis on local midnights', () => {
+    const week = 7 * 86_400
+    const html = render({ series: [series([[0, 1], [week, 2]])], domain: { start: t0, end: t0 + week } })
+    const ticks = alignedTimeAxisTicks(t0, t0 + week, 7)!
+    expect(ticks.length).toBeGreaterThanOrEqual(2)
+    for (const { label } of ticks) expect(html).toContain(`>${label}<`)
+    expect(html).not.toContain(`>${formatTimestamp(t0)}<`)
+  })
+
+  it('keeps every X label inside the viewBox on a multi-day axis', () => {
+    for (const days of [1.5, 2, 3, 7, 11, 270]) {
+      const span = days * 86_400
+      const html = render({ series: [series([[0, 1], [span, 2]])], domain: { start: t0, end: t0 + span } })
+      const xLabels = [...html.matchAll(/<text x="([^"]+)" y="296" text-anchor="middle"[^>]*>([^<]*)<\/text>/g)]
+      expect(xLabels.length).toBeGreaterThanOrEqual(2)
+      for (const [, x, label] of xLabels) {
+        const half = (label.length * 11 * 0.6) / 2
+        expect(Number(x) - half).toBeGreaterThanOrEqual(0)
+        expect(Number(x) + half).toBeLessThanOrEqual(1000)
+      }
+    }
+  })
+
   it('extends the Y axis below zero and draws a zero line for negative values', () => {
     const html = render({ series: [series([[0, -4], [600, 2], [1200, -1]])] })
     expect(html).toContain('data-chart-zero-line')
@@ -196,3 +219,18 @@ describe('AreaChart gaps and selection', () => {
     expect(html).toContain('cursor:crosshair')
   })
 })
+
+describe('AreaChart dashboard height', () => {
+  const data = [series([[0, 1], [600, 2]])]
+
+  it('renders the dashboard layout at the height asked for, and 240 by default', () => {
+    const short = render({ series: data, layout: 'dashboard', height: 140 })
+    expect(short).toContain('height:140px')
+    expect(attrs(short, 'svg', 'viewBox')[0]).toMatch(/ 140$/)
+    expect(render({ series: data, layout: 'dashboard' })).toContain('height:240px')
+  })
+
+  it('ignores the height outside the dashboard layout', () => {
+    expect(render({ series: data, layout: 'auto', height: 140 })).not.toContain('height:140px')
+  })
+})

package/src/components/charts/AreaChart.tsx

@@ -1,9 +1,9 @@
 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'
+import { alignedTimeAxisTicks, datesNeedYear, formatFullTimestamp, formatMetricValue, formatTimeAxisLabels, labelWidthEm, type TimeAxisTick } from './format'
 import { layoutAnnotations } from './annotations'
-import { chartLayout, integerAxisTop, isCountUnit, yAxisValues } from './axis'
+import { chartLayout, integerAxisTop, isCountUnit, xLabelMaxWidthEm, yAxisValues } from './axis'
 import type { TimeSeries, ReferenceLine, ChartAnnotation } from './types'
 import { nearestSample } from './nearestSample'
 
@@ -19,7 +19,7 @@ export interface ChartTimeRange {
   end: number
 }
 
-export function AreaChart({ series, color, fillColor, unit, referenceLines, annotations, domain, seriesLabels, stepSeconds, layout = 'full', shadedRanges, selection, onSelectRange }: {
+export function AreaChart({ series, color, fillColor, unit, referenceLines, annotations, domain, seriesLabels, stepSeconds, layout = 'full', height: dashboardHeight = 240, shadedRanges, selection, onSelectRange }: {
   series: TimeSeries[]
   color: string
   fillColor: string
@@ -45,6 +45,8 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
    * keeps text and plot height stable as its container resizes.
    */
   layout?: 'full' | 'auto' | 'compact' | 'dashboard'
+  /** Rendered height in px of the 'dashboard' layout; ignored by the others. */
+  height?: number
   /** 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. */
@@ -116,7 +118,8 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
   // Layout constants. marginLeft sized for the widest expected Y-tick label
   // ("422.4 MiB" etc.) — narrow grid panels squeeze the X axis so labels
   // need extra viewBox-space to survive the down-scale.
-  const base = chartLayout(compact, layout === 'dashboard', renderedWidth)
+  const measured = chartLayout(compact, layout === 'dashboard', renderedWidth)
+  const base = layout === 'dashboard' ? { ...measured, height: dashboardHeight } : measured
   const { width, height, marginRight, marginTop, marginBottom, fontSize, yIntervals, xIntervals } = base
   const yValues = chartData ? yAxisValues(chartData.yMin, chartData.yMax, yIntervals, countAxis) : []
   const yLabels = yValues.map(val => formatMetricValue(val, unit))
@@ -149,14 +152,30 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
   const xTicks = useMemo(() => {
     if (!chartData) return []
     const { minTs, maxTs } = chartData
-    return Array.from({ length: xIntervals + 1 }, (_, i) => {
-      const ts = minTs + ((maxTs - minTs) / xIntervals) * i
-      // In the compact layout the two labels sit at the plot edges and would
-      // otherwise spill past the viewBox.
-      const anchor: 'start' | 'middle' | 'end' = !(compact || layout === 'dashboard') ? 'middle' : i === 0 ? 'start' : i === xIntervals ? 'end' : 'middle'
-      return { ts, x: toX(ts), label: formatTimestamp(ts), anchor }
+    // A window longer than a day gets ticks on local midnights (and clock
+    // hours between) when at least two fit, positioned where they fall; the
+    // centred labels are nudged inside the viewBox so an end one isn't clipped.
+    const place = (ticks: TimeAxisTick[]) => ticks.map(({ ts, label }) => {
+      const halfWidth = (labelWidthEm(label) * fontSize) / 2
+      return { ts, x: Math.min(Math.max(toX(ts), halfWidth), width - halfWidth), halfWidth, label, anchor: 'middle' as const }
     })
-  }, [chartData, xIntervals, compact, layout, marginLeft, plotWidth])
+    const separated = (ticks: TimeAxisTick[]) => place(ticks).every((tick, i, all) =>
+      i === 0 || tick.x - tick.halfWidth - (all[i - 1].x + all[i - 1].halfWidth) >= fontSize)
+    const aligned = xIntervals >= 2 ? alignedTimeAxisTicks(minTs, maxTs, xIntervals + 1, separated) : null
+    if (aligned) return place(aligned)
+    // In the compact layout the two labels sit at the plot edges and would
+    // otherwise spill past the viewBox.
+    const edgeAnchored = compact || layout === 'dashboard'
+    const timestamps = Array.from({ length: xIntervals + 1 }, (_, i) => minTs + ((maxTs - minTs) / xIntervals) * i)
+    const labels = formatTimeAxisLabels(timestamps, xLabelMaxWidthEm(plotWidth, xIntervals, fontSize, edgeAnchored))
+    const multiDay = maxTs - minTs > 24 * 60 * 60
+    return timestamps.map((ts, i) => {
+      const anchor: 'start' | 'middle' | 'end' = !edgeAnchored ? 'middle' : i === 0 ? 'start' : i === xIntervals ? 'end' : 'middle'
+      const halfWidth = (labelWidthEm(labels[i]) * fontSize) / 2
+      const x = multiDay && !edgeAnchored ? Math.min(Math.max(toX(ts), halfWidth), width - halfWidth) : toX(ts)
+      return { ts, x, label: labels[i], anchor }
+    })
+  }, [chartData, xIntervals, compact, layout, marginLeft, plotWidth, fontSize, width])
 
   const paths = useMemo(() => {
     if (!chartData) return []
@@ -368,7 +387,7 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
         ref={svgRef}
         viewBox={`0 0 ${width} ${height}`}
         className="w-full h-full"
-        style={layout === 'dashboard' ? { height: 240 } : undefined}
+        style={layout === 'dashboard' ? { height: dashboardHeight } : undefined}
         preserveAspectRatio="xMidYMid meet"
         data-chart-layout={compact ? 'compact' : 'full'}
       >
@@ -653,7 +672,7 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
         >
           <div className="bg-theme-surface border border-theme-border rounded-lg shadow-lg px-3 py-2 text-xs whitespace-nowrap">
             <div className="text-theme-text-tertiary mb-1.5 font-mono">
-              {new Date(hoverData.ts * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+              {formatFullTimestamp(hoverData.ts, datesNeedYear(chartData.maxTs - chartData.minTs))}
             </div>
             {hoverData.nearbyAnnotations.map((placed, i) => (
               <div key={`annotation-${i}`} className="flex items-center gap-2 py-0.5">

package/src/components/charts/axis.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { chartLayout, integerAxisTop, yAxisValues } from './axis'
+import { chartLayout, integerAxisTop, xLabelMaxWidthEm, yAxisValues } from './axis'
 
 describe('integer axes', () => {
   it('ends a count axis on a whole step that reaches the maximum', () => {
@@ -46,3 +46,19 @@ describe('integer axes', () => {
     expect(chartLayout(false, false, 500)).toEqual(chartLayout(false))
   })
 })
+
+describe('xLabelMaxWidthEm', () => {
+  // "Oct 21 02:48 PM" is 15 characters, 9em.
+  const dateAndTime = 9
+  const room = (layout: ReturnType<typeof chartLayout>, edgeAnchored: boolean) =>
+    xLabelMaxWidthEm(layout.width - layout.marginLeft - layout.marginRight, layout.xIntervals, layout.fontSize, edgeAnchored)
+
+  it('fits a date-and-time label on the full layout and the compact edges', () => {
+    expect(room(chartLayout(false), false)).toBeGreaterThanOrEqual(dateAndTime)
+    expect(room(chartLayout(true), true)).toBeGreaterThanOrEqual(dateAndTime)
+  })
+
+  it('leaves too little room for a date and time with three ticks at 400px', () => {
+    expect(room(chartLayout(false, true, 400), true)).toBeLessThan(dateAndTime)
+  })
+})

package/src/components/charts/axis.ts

@@ -26,6 +26,19 @@ export function chartLayout(compact: boolean, dashboard = false, renderedWidth =
     : { width: 1000, height: 300, marginLeft: 84, marginRight: 40, marginTop: 10, marginBottom: 30, fontSize: 11, yIntervals: 4, xIntervals: 6 }
 }
 
+/**
+ * Widest X label, in ems, that leaves a gap of about two characters between
+ * neighbours. A centred label shares the spacing with half of each neighbour;
+ * an edge-anchored end label sits wholly on its side, so with two ticks both
+ * labels share the plot and with more the end label and half its neighbour
+ * share one spacing.
+ */
+export function xLabelMaxWidthEm(plotWidth: number, intervals: number, fontSize: number, edgeAnchored: boolean): number {
+  const spacing = plotWidth / Math.max(1, intervals) / fontSize
+  const share = !edgeAnchored ? 1 : intervals <= 1 ? 2 : 1.5
+  return (spacing - 1.2) / share
+}
+
 export function isCountUnit(unit: string): boolean {
   return unit === 'count' || unit === 'restarts'
 }

package/src/components/charts/format.test.ts

@@ -1,5 +1,5 @@
-import { describe, expect, it } from 'vitest'
-import { formatMetricValue } from './format'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
+import { alignedTimeAxisTicks, datesNeedYear, formatFullTimestamp, formatMetricValue, formatTimeAxisLabels, formatTimestamp, labelWidthEm } from './format'
 
 describe('formatMetricValue', () => {
   it('scales unitless values with SI prefixes instead of a runaway k', () => {
@@ -17,3 +17,160 @@ describe('formatMetricValue', () => {
     expect(formatMetricValue(-2048, 'bytes')).toBe('-2.0 KiB')
   })
 })
+
+describe('time axis labels', () => {
+  // Day boundaries depend on the local zone; pin one with a DST change. The
+  // expected strings come from the same Intl calls, so any locale passes.
+  let previousTZ: string | undefined
+  beforeAll(() => {
+    previousTZ = process.env.TZ
+    process.env.TZ = 'America/New_York'
+  })
+  afterAll(() => {
+    if (previousTZ === undefined) delete process.env.TZ
+    else process.env.TZ = previousTZ
+  })
+
+  const at = (month: number, day: number, hour: number, minute = 0) => new Date(2026, month - 1, day, hour, minute).getTime() / 1000
+  const day = (unix: number) => new Date(unix * 1000).toLocaleDateString([], { month: 'short', day: 'numeric' })
+  const ticks = (start: number, end: number, intervals: number) =>
+    Array.from({ length: intervals + 1 }, (_, i) => start + ((end - start) / intervals) * i)
+
+  describe('formatTimeAxisLabels (evenly spaced ticks)', () => {
+    it('keeps time-only labels for a window of a day or less, even across midnight', () => {
+      const sameDay = ticks(at(10, 21, 8), at(10, 21, 14), 6)
+      expect(formatTimeAxisLabels(sameDay)).toEqual(sameDay.map(formatTimestamp))
+      const overMidnight = ticks(at(10, 21, 20), at(10, 22, 2), 6)
+      expect(formatTimeAxisLabels(overMidnight)).toEqual(overMidnight.map(formatTimestamp))
+      const fullDay = ticks(at(10, 21, 14, 48), at(10, 22, 14, 48), 6)
+      expect(formatTimeAxisLabels(fullDay, 1)).toEqual(fullDay.map(formatTimestamp))
+    })
+
+    it('names the day where a new one starts and the time elsewhere', () => {
+      const twoDays = ticks(at(10, 21, 14, 48), at(10, 23, 14, 48), 6)
+      const labels = formatTimeAxisLabels(twoDays)
+      expect(labels[0]).toBe(`${day(twoDays[0])} ${formatTimestamp(twoDays[0])}`)
+      expect(labels[1]).toBe(formatTimestamp(twoDays[1]))
+      expect(labels[2]).toBe(`${day(twoDays[2])} ${formatTimestamp(twoDays[2])}`)
+      expect(labels.filter((label) => label.includes(day(twoDays[0])))).toHaveLength(1)
+    })
+
+    it('keeps the time on two end ticks just over a day apart', () => {
+      const edges = [at(10, 21, 14, 48), at(10, 22, 14, 49)]
+      expect(formatTimeAxisLabels(edges)).toEqual(edges.map((ts) => `${day(ts)} ${formatTimestamp(ts)}`))
+    })
+
+    it('falls back to the day at day starts when date and time would not fit', () => {
+      const twoDays = ticks(at(10, 21, 14, 48), at(10, 23, 14, 48), 4)
+      expect(formatTimeAxisLabels(twoDays, 5)).toEqual([day(twoDays[0]), day(twoDays[1]), '', day(twoDays[3]), ''])
+    })
+
+    it('never repeats a bare day across a DST fall-back', () => {
+      // 24h steps from 00:30 land on 23:30 after clocks go back on Nov 1.
+      const window = ticks(at(10, 31, 0, 30), at(10, 31, 0, 30) + 3 * 86_400, 3)
+      expect(formatTimeAxisLabels(window)).toEqual([
+        `${day(window[0])} ${formatTimestamp(window[0])}`,
+        `${day(window[1])} ${formatTimestamp(window[1])}`,
+        formatTimestamp(window[2]),
+        `${day(window[3])} ${formatTimestamp(window[3])}`,
+      ])
+      expect(day(window[1])).toBe(day(window[2]))
+    })
+  })
+
+  describe('alignedTimeAxisTicks', () => {
+    const local = (ts: number) => {
+      const d = new Date(ts * 1000)
+      return [d.getMonth() + 1, d.getDate(), d.getHours(), d.getMinutes()]
+    }
+
+    it('leaves a window of a day or less to evenly spaced ticks', () => {
+      expect(alignedTimeAxisTicks(at(10, 21, 14, 48), at(10, 22, 14, 48), 7)).toBeNull()
+    })
+
+    it('puts a 7-day window on consecutive local midnights, labelled with the day', () => {
+      const result = alignedTimeAxisTicks(at(10, 21, 2, 48), at(10, 28, 2, 48), 7)!
+      expect(result.map(({ ts }) => local(ts))).toEqual([22, 23, 24, 25, 26, 27, 28].map((d) => [10, d, 0, 0]))
+      expect(result.map(({ label }) => label)).toEqual(result.map(({ ts }) => day(ts)))
+    })
+
+    it('steps by whole days when daily ticks would not fit, and keeps them as the window slides', () => {
+      const eleven = alignedTimeAxisTicks(at(10, 17, 1, 48), at(10, 28, 1, 48), 7)!
+      expect(eleven.length).toBeLessThanOrEqual(7)
+      expect(eleven.every(({ ts }) => local(ts)[2] === 0 && local(ts)[3] === 0)).toBe(true)
+      const slid = alignedTimeAxisTicks(at(10, 17, 7, 48), at(10, 28, 7, 48), 7)!
+      const shared = (list: { ts: number }[]) => list.map(({ ts }) => ts).filter((ts) => ts >= at(10, 17, 7, 48) && ts <= at(10, 28, 1, 48))
+      expect(shared(slid)).toEqual(shared(eleven))
+    })
+
+    it('adds clock-hour ticks with time labels on a short multi-day window', () => {
+      const result = alignedTimeAxisTicks(at(10, 21, 14, 48), at(10, 23, 2, 48), 7)!
+      expect(result.map(({ ts }) => local(ts))).toEqual([
+        [10, 21, 18, 0],
+        [10, 22, 0, 0],
+        [10, 22, 6, 0],
+        [10, 22, 12, 0],
+        [10, 22, 18, 0],
+        [10, 23, 0, 0],
+      ])
+      expect(result.map(({ label }) => label)).toEqual([
+        formatTimestamp(result[0].ts),
+        day(result[1].ts),
+        formatTimestamp(result[2].ts),
+        formatTimestamp(result[3].ts),
+        formatTimestamp(result[4].ts),
+        day(result[5].ts),
+      ])
+    })
+
+    it('keeps local midnights across a DST change', () => {
+      const result = alignedTimeAxisTicks(at(10, 30, 12), at(11, 3, 12), 7)!
+      expect(result.map(({ ts }) => local(ts))).toEqual([31, 1, 2, 3].map((d, i) => [i === 0 ? 10 : 11, d, 0, 0]))
+      expect(result[2].ts - result[1].ts).toBe(25 * 3600)
+    })
+
+    it('keeps later midnights where DST skips one', () => {
+      // Chile springs forward at midnight on Sep 6 2026; that day starts at 01:00.
+      process.env.TZ = 'America/Santiago'
+      try {
+        const result = alignedTimeAxisTicks(at(9, 4, 12), at(9, 11, 0, 30), 7)!
+        expect(result.map(({ ts }) => local(ts))).toEqual([
+          [9, 5, 0, 0], [9, 6, 1, 0], [9, 7, 0, 0], [9, 8, 0, 0], [9, 9, 0, 0], [9, 10, 0, 0], [9, 11, 0, 0],
+        ])
+        expect(result[1].label).toBe(day(result[1].ts))
+      } finally {
+        process.env.TZ = 'America/New_York'
+      }
+    })
+
+    it('takes a coarser step when the caller says labels collide, and gives up below two ticks', () => {
+      const daily = alignedTimeAxisTicks(at(10, 21, 2, 48), at(10, 28, 2, 48), 7, (ticks) => ticks.length <= 4)!
+      expect(daily.length).toBeLessThanOrEqual(4)
+      expect(alignedTimeAxisTicks(at(10, 21, 2, 48), at(10, 28, 2, 48), 7, () => false)).toBeNull()
+      expect(alignedTimeAxisTicks(at(10, 21, 2, 48), at(10, 22, 12), 1)).toBeNull()
+    })
+  })
+
+  it('names the year on axes and tooltips spanning most of a year or more', () => {
+    const twoYears = ticks(at(10, 21, 12), at(10, 21, 12) + 730 * 86_400, 6)
+    const withYear = (ts: number) => new Date(ts * 1000).toLocaleDateString([], { year: 'numeric', month: 'short', day: 'numeric' })
+    expect(formatTimeAxisLabels(twoYears, 6)).toEqual(twoYears.map(withYear))
+    expect(new Set(formatTimeAxisLabels(twoYears, 6)).size).toBe(twoYears.length)
+    expect(datesNeedYear(730 * 86_400)).toBe(true)
+    expect(datesNeedYear(30 * 86_400)).toBe(false)
+    expect(formatFullTimestamp(twoYears[0], true)).toContain(String(new Date(twoYears[0] * 1000).toLocaleDateString([], { year: 'numeric' })))
+    expect(formatTimeAxisLabels(ticks(at(10, 21, 2, 48), at(10, 28, 2, 48), 6), 6).some((label) => label.includes('2026'))).toBe(false)
+  })
+
+  it('estimates wide characters at a full em', () => {
+    expect(labelWidthEm('Oct 21')).toBeCloseTo(3.6)
+    expect(labelWidthEm('10月21日')).toBeCloseTo(4 * 0.6 + 2 * 1)
+  })
+
+  it('formats tooltips with the full date and time', () => {
+    const ts = at(10, 21, 14, 5)
+    const label = formatFullTimestamp(ts)
+    expect(label).toContain(day(ts))
+    expect(label).toContain(new Date(ts * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }))
+  })
+})

package/src/components/charts/format.ts

@@ -59,3 +59,121 @@ export function formatTimestamp(unix: number): string {
   const d = new Date(unix * 1000)
   return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
 }
+
+const DAY_SECONDS = 24 * 60 * 60
+
+// Past this span two instants can share a month and day, so dates name the year.
+const YEAR_SPAN_SECONDS = 300 * DAY_SECONDS
+
+/** Whether dates on a chart spanning this many seconds should name the year. */
+export function datesNeedYear(spanSeconds: number): boolean {
+  return spanSeconds > YEAR_SPAN_SECONDS
+}
+
+function formatDay(unix: number, withYear = false): string {
+  return new Date(unix * 1000).toLocaleDateString([], { ...(withYear && { year: 'numeric' }), month: 'short', day: 'numeric' })
+}
+
+/** Full local date and time of one instant, for tooltips; `withYear` for charts spanning most of a year or more. */
+export function formatFullTimestamp(unix: number, withYear = false): string {
+  return new Date(unix * 1000).toLocaleString([], {
+    ...(withYear && { year: 'numeric' }),
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  })
+}
+
+/**
+ * Labels for evenly spaced time-axis ticks given in ascending unix seconds.
+ * A span of a day or less shows the time only (`formatTimestamp`). A longer
+ * span names the day (and the year past about ten months): a tick that starts a new local day
+ * reads "Oct 21 02:00 PM" and the rest show the time; when that is wider than
+ * `maxWidth` (in ems, see `labelWidthEm`), ticks that start a day show the day
+ * alone and the rest stay blank, so neighbouring labels never collide.
+ */
+export function formatTimeAxisLabels(ticks: number[], maxWidth = Infinity): string[] {
+  if (ticks.length === 0) return []
+  const span = ticks[ticks.length - 1] - ticks[0]
+  if (span <= DAY_SECONDS) return ticks.map(formatTimestamp)
+
+  const withYear = datesNeedYear(span)
+  const days = ticks.map((ts) => formatDay(ts, withYear))
+  const startsDay = days.map((day, i) => i === 0 || day !== days[i - 1])
+  const mixed = ticks.map((ts, i) => (startsDay[i] ? `${days[i]} ${formatTimestamp(ts)}` : formatTimestamp(ts)))
+  if (Math.max(...mixed.map(labelWidthEm)) <= maxWidth) return mixed
+  return days.map((day, i) => (startsDay[i] ? day : ''))
+}
+
+/**
+ * Estimated rendered width of a monospace label in ems: about 0.6em per
+ * character, a full em for wide (CJK, fullwidth) characters.
+ */
+export function labelWidthEm(label: string): number {
+  let width = 0
+  for (const ch of label) width += /[\u1100-\u115F\u2E80-\uA4CF\uAC00-\uD7A3\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFF60\uFFE0-\uFFE6]/.test(ch) ? 1 : 0.6
+  return width
+}
+
+export interface TimeAxisTick {
+  ts: number
+  label: string
+}
+
+const HOUR_SECONDS = 60 * 60
+// Sub-day steps align to local clock hours; day steps to local midnights.
+const ALIGNED_STEPS_HOURS = [6, 12, 24, 48, 72, 168, 336, 672]
+
+/**
+ * Calendar-aligned ticks for a window longer than a day: local midnights
+ * labelled with the day ("Oct 21"), and, when the window is short enough for
+ * 6- or 12-hour steps, the hours between labelled with the time. Uses the
+ * smallest step that keeps the tick count within `maxTicks` and passes `fits`
+ * (the caller's check that neighbouring labels don't collide). Returns null
+ * for a window of a day or less, or when fewer than two ticks would fit, so
+ * the caller keeps evenly spaced ticks.
+ */
+export function alignedTimeAxisTicks(
+  minTs: number,
+  maxTs: number,
+  maxTicks: number,
+  fits: (ticks: TimeAxisTick[]) => boolean = () => true,
+): TimeAxisTick[] | null {
+  if (maxTs - minTs <= DAY_SECONDS || maxTicks < 2) return null
+  for (const stepHours of ALIGNED_STEPS_HOURS) {
+    if ((maxTs - minTs) / HOUR_SECONDS / stepHours > maxTicks + 1) continue
+    const ticks = alignedTicks(minTs, maxTs, stepHours)
+    if (ticks.length > maxTicks) continue
+    if (ticks.length < 2) return null
+    const labelled = ticks.map(({ ts, startsDay }) => ({ ts, label: startsDay ? formatDay(ts) : formatTimestamp(ts) }))
+    if (fits(labelled)) return labelled
+  }
+  return null
+}
+
+function alignedTicks(minTs: number, maxTs: number, stepHours: number): { ts: number; startsDay: boolean }[] {
+  const out: { ts: number; startsDay: boolean }[] = []
+  const start = new Date(minTs * 1000)
+  const stepDays = stepHours / 24
+  // Each day's start is built from its date: where a DST change skips
+  // midnight the Date lands on 01:00, and stepping with setDate would carry
+  // that hour into every later day.
+  for (let offset = 0; ; offset++) {
+    const cursor = new Date(start.getFullYear(), start.getMonth(), start.getDate() + offset)
+    if (cursor.getTime() / 1000 > maxTs) break
+    if (stepHours < 24) {
+      for (let hour = 0; hour < 24; hour += stepHours) {
+        const ts = new Date(cursor.getFullYear(), cursor.getMonth(), cursor.getDate(), hour).getTime() / 1000
+        if (ts >= minTs && ts <= maxTs) out.push({ ts, startsDay: hour === 0 })
+      }
+    } else {
+      // Index days by calendar date so the chosen midnights stay put as the window slides.
+      const dayIndex = Math.round(Date.UTC(cursor.getFullYear(), cursor.getMonth(), cursor.getDate()) / (DAY_SECONDS * 1000))
+      const ts = cursor.getTime() / 1000
+      if (dayIndex % stepDays === 0 && ts >= minTs) out.push({ ts, startsDay: true })
+    }
+  }
+  return out
+}

package/src/components/cluster-switcher/ClusterSwitcher.test.tsx

@@ -0,0 +1,54 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ClusterSwitcher, type ClusterSwitcherHandle, type ClusterSwitcherItem } from './ClusterSwitcher'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+let root: Root
+let host: HTMLDivElement
+
+const items: ClusterSwitcherItem[] = [
+  { id: 'prod', name: 'prod' },
+  { id: 'staging', name: 'staging' },
+]
+
+beforeEach(() => {
+  host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+})
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+})
+
+function open(props: { currentSelectable?: boolean }, onSelect: (item: ClusterSwitcherItem) => void) {
+  const ref = { current: null as ClusterSwitcherHandle | null }
+  act(() => root.render(
+    <ClusterSwitcher ref={ref} currentId="prod" currentName="prod" items={items} onSelect={onSelect} searchable={false} {...props} />,
+  ))
+  act(() => ref.current?.open())
+}
+
+function row(name: string) {
+  return [...host.querySelectorAll<HTMLButtonElement>('button[data-highlighted]')].find(b => b.textContent?.includes(name))!
+}
+
+describe('ClusterSwitcher current row', () => {
+  it('is inert by default', () => {
+    const onSelect = vi.fn()
+    open({}, onSelect)
+    expect(row('prod').disabled).toBe(true)
+    act(() => row('prod').click())
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+
+  it('can be picked when the host asks for it', () => {
+    const onSelect = vi.fn()
+    open({ currentSelectable: true }, onSelect)
+    expect(row('prod').disabled).toBe(false)
+    act(() => row('prod').click())
+    expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ id: 'prod' }))
+  })
+})

package/src/components/cluster-switcher/ClusterSwitcher.tsx

@@ -74,6 +74,9 @@ export interface ClusterSwitcherProps {
   variant?: 'chip' | 'segment'
   /** Muted label shown before the value in the 'segment' variant (e.g. "Cluster"). */
   label?: string
+  /** Lets the current row be picked, for hosts that show a screen about
+   *  another cluster on top of the current one (picking it dismisses that). */
+  currentSelectable?: boolean
 }
 
 // Trigger width cap. With middle-truncation kicking in, this is a
@@ -102,6 +105,7 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
   align = 'left',
   variant = 'chip',
   label,
+  currentSelectable = false,
 }, ref) => {
   const [isOpen, setIsOpen] = useState(false)
   const [search, setSearch] = useState('')
@@ -183,7 +187,7 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
   }, [isOpen])
 
   const select = (item: ClusterSwitcherItem) => {
-    if (item.disabled || item.id === currentId) return
+    if (item.disabled || (item.id === currentId && !currentSelectable)) return
     setIsOpen(false)
     if (item.href) {
       window.location.href = item.href
@@ -341,12 +345,12 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
                         data-highlighted={idx === highlightedIndex}
                         onClick={() => select(item)}
                         onMouseEnter={() => setHighlightedIndex(idx)}
-                        disabled={isCurrent || item.disabled}
+                        disabled={(isCurrent && !currentSelectable) || item.disabled}
                         title={item.title}
                         className={`
                           w-full flex items-center gap-2 px-3 py-2 text-left transition-colors
                           ${isCurrent
-                            ? 'selection'
+                            ? `selection${currentSelectable ? ' cursor-pointer' : ''}`
                             : idx === highlightedIndex
                               ? 'bg-theme-hover cursor-pointer'
                               : 'hover:bg-theme-hover cursor-pointer'}