@skyhook-io/k8s-ui 1.18.1 → 1.19.0

package/README.md

@@ -83,3 +83,11 @@ tooltip. `certaintyGlyph` and `certaintyValueLabel` expose the same vocabulary.
 `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.
+
+`PrinterColumnDef.jsonPath` optionally carries source provenance from newer Radar servers. The UI does not evaluate it: values still come from the server's table converter. Without it, printer-cell tones stay generic. Crossplane pause qualification only recognizes exact Ready/Synced condition paths and corroborated annotation/condition evidence; same-named unrelated columns retain their normal tones. `ConditionTone` also supports opt-in `neutral`; `defaultConditionTone` retains its original return vocabulary. `ComposedRefStatus.pauseState` optionally supplies recorded Crossplane pause context for a composed-resource row.
+
+`ForceDeleteConfirmDialog.resourceData` optionally supplies the current object for Crossplane pause context. Paused MR/XR/Claim shapes holding a known Crossplane finalizer receive a cleanup warning; the prop does not change confirmation or force-delete behavior. YAML operation context uses the existing baseline and predicted manifests; removing a pause annotation requests resumption rather than proving it.
+
+`YamlReview.mode` distinguishes Apply, strict Create and Update (default: `apply`). Hosts using strict creation should pass `create` so an unpreviewable new document does not imply unknown live pause state. Crossplane operation context reports what the server preview actually keeps or clears; unsupported dry-run documents retain conditional uncertainty rather than treating submitted YAML as a live baseline.
+
+For a single editor target, `YamlReview.resourceData` may retain its raw condition evidence when the review YAML intentionally omits status. `EditableYamlView` binds that snapshot to its preview. It is not used to classify unrelated documents in a batch. Generic Apply with neither a known Crossplane shape nor raw acknowledged pause does not infer a resource’s controller from the annotation alone.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.18.1",
+  "version": "1.19.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/applications/ApplicationsView.tsx

@@ -46,6 +46,7 @@ import {
 import { ReadyBar } from './ReadyBar'
 import { ProvenanceBadge, ClassBadge, CategoryChip, VersionInfo, BatchSignalChip } from './AppChips'
 import { AppIdentityTooltip, EnvHint, RolloutSummaryTooltip } from './AppTooltips'
+import { FilterRailPanel } from '../shared/FilterRailPanel'
 
 function ApplicationRuntimeCell({ apps, workloadClass, ready, desired }: { apps: AppRow[]; workloadClass: AppWorkloadClass; ready: number; desired: number }) {
   if (workloadClass !== 'job') {
@@ -337,6 +338,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
   // showSystem lives in the Filters rail, so Clear resets it too (and its
   // non-default ON state counts as an active filter that surfaces the button).
   const anyFilterActive = filters.isActive
+  const activeFilterCount = fHealth.size + fClass.size + fType.size + fEnv.size + fSource.size + (systemCount > 0 && showSystem ? 1 : 0)
   const clearAllFilters = () => {
     filters.clearAll()
   }
@@ -355,7 +357,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
           actions={
             <>
               {headerActions}
-              <SummaryTile label={total === 1 ? 'application' : 'applications'} value={total} loading={initialLoading} />
+              <SummaryTile label={total === 1 ? 'application' : 'applications'} phoneLabel={total === 1 ? 'app' : 'apps'} value={total} loading={initialLoading} />
               {healthTile('unhealthy', 'error')}
               {healthTile('degraded', 'warning')}
               {healthTile('healthy', 'success')}
@@ -381,13 +383,12 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
             Arbitrary 900px breakpoint (not `sm`) so the collapse is independent of
             the consuming app's Tailwind breakpoint config (Hub uses defaults). */}
         <aside className="flex w-52 shrink-0 flex-col overflow-hidden border-r border-theme-border bg-theme-surface/90 max-[899px]:max-h-72 max-[899px]:w-full max-[899px]:border-b max-[899px]:border-r-0">
-          <div className="flex items-center justify-between border-b border-theme-border px-3 py-2">
-            <span className="text-sm font-medium text-theme-text-secondary">Filters</span>
-            {anyFilterActive && (
+          <FilterRailPanel
+            activeCount={activeFilterCount}
+            clear={anyFilterActive && (
               <button type="button" onClick={clearAllFilters} className="text-[10px] font-medium text-blue-500 hover:text-blue-400">Clear</button>
             )}
-          </div>
-          <div className="flex-1 overflow-y-auto">
+          >
             {initialLoading ? (
               <BoardRailSkeleton
                 sections={[
@@ -414,7 +415,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
             )}
               </>
             )}
-          </div>
+          </FilterRailPanel>
         </aside>
 
         {/* Content: toolbar (search + sort) over the scrollable table. */}

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.tsx

@@ -12,6 +12,7 @@ import { ClusterName } from '../ui/ClusterName'
 import { Input } from '../ui/Input'
 import { MiddleEllipsis } from '../ui/MiddleEllipsis'
 import { StatusDot, type StatusTone } from '../ui/status-tone'
+import { useKeepInViewport } from '../../hooks/useKeepInViewport'
 
 export interface ClusterSwitcherItem {
   id: string
@@ -107,6 +108,8 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
   const [highlightedIndex, setHighlightedIndex] = useState(-1)
   const rootRef = useRef<HTMLDivElement>(null)
   const searchInputRef = useRef<HTMLInputElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  useKeepInViewport(menuRef, isOpen)
 
   useImperativeHandle(ref, () => ({
     open: () => {
@@ -284,6 +287,7 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
 
       {isOpen && (
         <div
+          ref={menuRef}
           className={`absolute top-full ${positionClass} mt-1 z-50 min-w-[280px] max-w-[420px] bg-theme-surface border border-theme-border-light rounded-lg shadow-xl overflow-hidden`}
         >
           {searchable && (

package/src/components/compare/ResourceCompareView.tsx

@@ -5,6 +5,7 @@ import { YamlDiffEditor } from '../ui/YamlEditor'
 import { PaneLoader } from '../ui/PaneLoader'
 import { Tooltip } from '../ui/Tooltip'
 import { pluralToKind } from '../../utils/navigation'
+import { usePhoneLayout } from '../../hooks/usePhoneLayout'
 import { toComparableYaml } from './normalize'
 import { SIDE_TONES, type CompareSide } from './types'
 
@@ -120,7 +121,10 @@ export function ResourceCompareView({
   bleed = false,
 }: ResourceCompareViewProps) {
   const [specOnly, setSpecOnly] = useState(false)
-  const [unified, setUnified] = useState(false)
+  const [unifiedPicked, setUnified] = useState(false)
+  // Two side-by-side panes don't fit a phone, so phones always get one column.
+  const isPhone = usePhoneLayout()
+  const unified = unifiedPicked || isPhone
   const [hideUnchanged, setHideUnchanged] = useState(true)
   const [rawMetadata, setRawMetadata] = useState(false)
 
@@ -180,7 +184,7 @@ export function ResourceCompareView({
           <ToggleButton active={rawMetadata} onClick={() => setRawMetadata(v => !v)} icon={<Sparkles className="w-3.5 h-3.5" />} label="Raw metadata" tooltip="Keep server-assigned noise (uid, resourceVersion, managedFields, last-applied)" />
           <ToggleButton active={specOnly} onClick={() => setSpecOnly(v => !v)} icon={<FileCode2 className="w-3.5 h-3.5" />} label="Spec only" tooltip="Drop status fields from both sides" />
           <ToggleButton active={hideUnchanged} onClick={() => setHideUnchanged(v => !v)} icon={<FileText className="w-3.5 h-3.5" />} label="Diff only" tooltip="Collapse unchanged regions" />
-          <ToggleButton active={unified} onClick={() => setUnified(v => !v)} icon={<Rows className="w-3.5 h-3.5" />} label="Unified" tooltip="Switch between side-by-side and single-column" />
+          {!isPhone && <ToggleButton active={unified} onClick={() => setUnified(v => !v)} icon={<Rows className="w-3.5 h-3.5" />} label="Unified" tooltip="Switch between side-by-side and single-column" />}
         </div>
 
         <div className="w-px h-5 bg-theme-border shrink-0" aria-hidden />