@skyhook-io/radar-app 1.16.3 → 1.17.0

package/src/components/helm/RevisionHistory.tsx

@@ -2,9 +2,10 @@ import { useState } from 'react'
 import { History, Eye, GitCompare, Check, RotateCcw } from 'lucide-react'
 import { clsx } from 'clsx'
 import type { HelmOperation, HelmRevision } from '../../types'
-import { getStatusColor, formatDate, formatAge } from './helm-utils'
+import { getStatusColor, formatDate } from './helm-utils'
 import { SEVERITY_BADGE } from '../../utils/badge-colors'
 import { Tooltip } from '../ui/Tooltip'
+import { formatRelativeAgeTime } from '@skyhook-io/k8s-ui/utils/format'
 
 interface RevisionHistoryProps {
   history: HelmRevision[]
@@ -117,7 +118,7 @@ export function RevisionHistory({ history, currentRevision, operations = [], onV
 
                   <div className="flex items-center gap-4 mt-1 text-xs text-theme-text-tertiary">
                     <Tooltip content={revision.updated}><span>{formatDate(revision.updated)}</span></Tooltip>
-                    <span>{formatAge(revision.updated)} ago</span>
+                    <span>{formatRelativeAgeTime(revision.updated)}</span>
                   </div>
 
                   {revision.description && (

package/src/components/home/ClusterHealthCard.tsx

@@ -177,8 +177,12 @@ export function ClusterHealthCard({
 
   // Nodes ring segments
   const cordonedCount = counts.nodes.cordoned ?? 0
+  const removingCount = counts.nodes.removing ?? 0
+  const removingUnhealthyCount = counts.nodes.removingUnhealthy ?? 0
   const nodesRingSegments = [
     { value: counts.nodes.ready, color: '#22c55e' },
+    { value: removingCount - removingUnhealthyCount, color: 'var(--text-secondary)' },
+    { value: removingUnhealthyCount, color: 'var(--color-error)' },
     { value: cordonedCount, color: '#eab308' }, // amber for cordoned
     { value: counts.nodes.notReady, color: '#ef4444' },
   ]
@@ -394,6 +398,9 @@ export function ClusterHealthCard({
                   {cordonedCount > 0 && (
                     <span className="text-yellow-500">{cordonedCount} cordoned</span>
                   )}
+                  {removingCount > 0 && (
+                    <span className="text-theme-text-secondary">{removingCount} removing{removingUnhealthyCount > 0 ? ` (${removingUnhealthyCount} unhealthy)` : ''}</span>
+                  )}
                   {counts.nodes.notReady > 0 && (
                     <span className="text-red-500">{counts.nodes.notReady} not ready</span>
                   )}

package/src/components/home/mcpToolCatalog.ts

@@ -58,7 +58,7 @@ export const MCP_TOOL_CATALOG: MCPToolInfo[] = [
       { arg: 'name', required: true, desc: 'resource name' },
       { arg: 'namespace', desc: 'omit for cluster-scoped kinds (Node, ClusterRole, IngressClass, etc.)' },
       { arg: 'group', desc: 'API group when the kind is ambiguous (e.g. serving.knative.dev for Knative Service vs core Service)' },
-      { arg: 'include', desc: 'events, metrics, changes, revisions (rollback targets for Deployment/StatefulSet/DaemonSet/Rollout)' },
+      { arg: 'include', desc: 'events, metrics, changes, issues, drain-plan (Node pod/PDB estimate), revisions (rollback targets for Deployment/StatefulSet/DaemonSet/Rollout)' },
       { arg: 'context', desc: 'resourceContext tier: basic (default) or none' },
     ],
   },

package/src/components/resources/renderers/KyvernoPolicyQueued.tsx

@@ -7,6 +7,7 @@ import { formatAge } from '@skyhook-io/k8s-ui/components/resources/resource-util
 import { isForbiddenError } from '../../../api/client'
 import { isKyvernoMutateExistingEnabled } from '@skyhook-io/k8s-ui/components/resources/resource-utils-kyverno-modern'
 import { usePolicyQueued } from '../../../api/policy'
+import { TimeValue } from '@skyhook-io/k8s-ui/components/ui/ScheduleValue'
 
 /** A request sitting this long is not mid-flight. Kyverno retries on every
  *  reconcile, so past this point a backlog grows rather than drains. */
@@ -160,7 +161,7 @@ export function KyvernoPolicyQueued({ data }: { data: any }) {
             />
           ))}
           {oldestPending && (
-            <Property label="Oldest Pending" value={`${formatAge(oldestPending)} ago`} />
+            <Property label="Oldest Pending" value={<TimeValue timestamp={oldestPending} />} />
           )}
         </PropertyList>
         {messages.length > 0 && (

package/src/components/resources/renderers/NodeRenderer.tsx

@@ -1,6 +1,7 @@
 import { NodeRenderer as BaseNodeRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/NodeRenderer'
 import { useNavigate } from 'react-router-dom'
-import { getVisibleLiveMetrics, isLiveMetricsUnavailable, shouldFetchLiveMetrics, useNodeMetrics, useNodeMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus } from '../../../api/client'
+import { getVisibleLiveMetrics, isLiveMetricsUnavailable, shouldFetchLiveMetrics, useNodeRemovalPlan, useNodeMetrics, useNodeMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus } from '../../../api/client'
+import { getNodeLifecycle } from '@skyhook-io/k8s-ui/utils/node-lifecycle'
 import { serializeColumnFilters } from '../resource-utils'
 
 interface NodeRendererProps {
@@ -11,6 +12,8 @@ interface NodeRendererProps {
 export function NodeRenderer({ data, relationships }: NodeRendererProps) {
   const navigate = useNavigate()
   const nodeName = data.metadata?.name
+  const lifecycle = getNodeLifecycle(data)
+  const removalPlan = useNodeRemovalPlan(nodeName, lifecycle.removing)
 
   // Fetch node metrics
   const metricsHistoryQuery = useNodeMetricsHistory(nodeName)
@@ -35,6 +38,9 @@ export function NodeRenderer({ data, relationships }: NodeRendererProps) {
   return (
     <BaseNodeRenderer
       data={data}
+      removalPlan={removalPlan.data}
+      removalPlanLoading={removalPlan.isLoading}
+      removalPlanError={removalPlan.error?.message}
       relationships={relationships}
       onViewPods={nodeName ? () => {
         const params = new URLSearchParams()

package/src/components/resources/renderers/ServiceRenderer.test.tsx

@@ -0,0 +1,81 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { beforeEach, expect, it, vi } from 'vitest'
+import { RadarFeatureUnsupportedError } from '../../../api/radarFeatures'
+import { ServiceRenderer } from './ServiceRenderer'
+
+const mock = vi.hoisted(() => ({
+  serviceQuery: {} as any,
+  namespaceQuery: {} as any,
+  serviceReads: [] as any[],
+  namespaceReads: [] as any[],
+}))
+vi.mock('../../../api/client', () => ({
+  useServiceEndpointSlices: (...args: any[]) => { mock.serviceReads.push(args); return mock.serviceQuery },
+  useResources: (...args: any[]) => { mock.namespaceReads.push(args); return mock.namespaceQuery },
+}))
+vi.mock('../../../contexts/CapabilitiesContext', () => ({ useNamespacedCapabilities: () => ({ canPortForward: false }), useIsLocalDeployment: () => true }))
+vi.mock('../../portforward/PortForwardButton', () => ({ PortForwardInlineButton: () => null }))
+vi.mock('../../curl/ServiceCurlButton', () => ({ CurlButton: () => null, CurlPanel: () => null, isHttpishPort: () => false, defaultScheme: () => '', defaultPathForPort: () => '' }))
+
+const service = { apiVersion: 'v1', kind: 'Service', metadata: { name: 'web', namespace: 'team' }, spec: { selector: { app: 'web' } } }
+const selectorless = { ...service, spec: {} }
+const slice = (name: string, labels?: Record<string, string>) => ({ apiVersion: 'discovery.k8s.io/v1', kind: 'EndpointSlice', metadata: { namespace: 'team', name, labels } })
+const render = (data: any = service) => renderToStaticMarkup(<ServiceRenderer data={data} onCopy={() => {}} copied={null} />)
+const unsupported = () => new RadarFeatureUnsupportedError('serviceEndpointSlices', { currentVersion: 'v1.7.0' })
+
+beforeEach(() => {
+  mock.serviceQuery = {}
+  mock.namespaceQuery = {}
+  mock.serviceReads = []
+  mock.namespaceReads = []
+})
+
+it('renders the server-selected slices for a selector Service without listing the namespace', () => {
+  mock.serviceQuery = { data: { items: [slice('web-abc', { 'kubernetes.io/service-name': 'web' })], truncated: false } }
+  const html = render()
+  expect(mock.serviceReads[0]).toEqual(['team', 'web', true])
+  expect(mock.namespaceReads[0][3].enabled).toBe(false)
+  expect(html).toContain('EndpointSlices')
+  expect(html).toContain('web-abc')
+  expect(html).not.toContain('Showing the first')
+})
+
+it('says when the server cut the inventory off', () => {
+  mock.serviceQuery = { data: { items: [slice('web-abc')], truncated: true } }
+  expect(render()).toContain('Showing the first 1 EndpointSlices.')
+})
+
+it('surfaces a failed lookup instead of an empty inventory', () => {
+  mock.serviceQuery = { error: new Error('insufficient permissions to list endpointslices') }
+  const html = render()
+  expect(html).toContain('EndpointSlice inventory unavailable')
+  expect(html).toContain('insufficient permissions to list endpointslices')
+  expect(html).not.toContain('No EndpointSlices found')
+})
+
+it('does not query slices for ExternalName Services', () => {
+  const html = render({ ...service, spec: { type: 'ExternalName', externalName: 'example.org' } })
+  expect(mock.serviceReads[0][2]).toBe(false)
+  expect(mock.namespaceReads[0][3].enabled).toBe(false)
+  expect(html).not.toContain('EndpointSlices')
+})
+
+it('falls back to the label-filtered namespace list for selector-less Services on an older Radar', () => {
+  mock.serviceQuery = { error: unsupported() }
+  mock.namespaceQuery = { data: [
+    slice('manual-abc', { 'kubernetes.io/service-name': 'web' }),
+    slice('other-abc', { 'kubernetes.io/service-name': 'other' }),
+  ] }
+  const html = render(selectorless)
+  expect(mock.namespaceReads[0]).toEqual(['endpointslices', 'team', 'discovery.k8s.io', { enabled: true, refetchInterval: 30000 }])
+  expect(html).toContain('manual-abc')
+  expect(html).not.toContain('other-abc')
+  expect(html).not.toContain('EndpointSlice inventory unavailable')
+})
+
+it('keeps selector Services free of slice lookups on an older Radar', () => {
+  mock.serviceQuery = { error: unsupported() }
+  const html = render()
+  expect(mock.namespaceReads[0][3].enabled).toBe(false)
+  expect(html).not.toContain('EndpointSlices')
+})

package/src/components/resources/renderers/ServiceRenderer.tsx

@@ -2,7 +2,8 @@ import { useMemo, useState, useCallback } from 'react'
 import { ServiceRenderer as BaseServiceRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/ServiceRenderer'
 import { PortForwardInlineButton } from '../../portforward/PortForwardButton'
 import { CurlButton, CurlPanel, isHttpishPort, defaultScheme, defaultPathForPort } from '../../curl/ServiceCurlButton'
-import { useResources } from '../../../api/client'
+import { useResources, useServiceEndpointSlices } from '../../../api/client'
+import { isRadarFeatureUnsupported } from '../../../api/radarFeatures'
 import { useNamespacedCapabilities, useIsLocalDeployment } from '../../../contexts/CapabilitiesContext'
 import type { ResourceRef } from '../../../types'
 import { DURATION_DISCLOSURE } from '@skyhook-io/k8s-ui/utils/animation'
@@ -36,21 +37,22 @@ export function ServiceRenderer({ data, onCopy, copied, onNavigate }: ServiceRen
     window.setTimeout(() => setCurl((p) => (p?.closing ? null : p)), DURATION_DISCLOSURE + 20)
   }, [])
   const spec = data.spec || {}
-  const shouldLoadEndpointSlices = Boolean(
-    namespace &&
-    serviceName &&
-    spec.type !== 'ExternalName' &&
-    (!spec.selector || Object.keys(spec.selector).length === 0)
-  )
-  const { data: endpointSlices, isLoading: endpointSlicesLoading } = useResources<any>(
+  const hasNoSelector = !spec.selector || Object.keys(spec.selector).length === 0
+  const canListEndpointSlices = Boolean(namespace && serviceName && spec.type !== 'ExternalName')
+  const serviceSlices = useServiceEndpointSlices(namespace, serviceName, canListEndpointSlices)
+  // A Radar without the per-Service endpoint keeps its earlier behavior: only
+  // selector-less Services list the namespace's slices and filter them here.
+  const legacy = isRadarFeatureUnsupported(serviceSlices.error, 'serviceEndpointSlices')
+  const shouldLoadNamespaceSlices = canListEndpointSlices && hasNoSelector && legacy
+  const { data: namespaceSlices, isLoading: namespaceSlicesLoading, error: namespaceSlicesError } = useResources<any>(
     'endpointslices',
     namespace,
     'discovery.k8s.io',
-    { enabled: shouldLoadEndpointSlices, refetchInterval: 30000 }
+    { enabled: shouldLoadNamespaceSlices, refetchInterval: 30000 }
   )
-  const matchingEndpointSlices = useMemo(
-    () => (endpointSlices || []).filter((slice: any) => slice.metadata?.labels?.['kubernetes.io/service-name'] === serviceName),
-    [endpointSlices, serviceName]
+  const matchingNamespaceSlices = useMemo(
+    () => (namespaceSlices || []).filter((slice: any) => slice.metadata?.labels?.['kubernetes.io/service-name'] === serviceName),
+    [namespaceSlices, serviceName]
   )
 
   return (
@@ -58,8 +60,11 @@ export function ServiceRenderer({ data, onCopy, copied, onNavigate }: ServiceRen
       data={data}
       onCopy={onCopy}
       copied={copied}
-      endpointSlices={matchingEndpointSlices}
-      endpointSlicesLoading={endpointSlicesLoading}
+      endpointSlices={legacy ? matchingNamespaceSlices : serviceSlices.data?.items}
+      endpointSlicesLoading={legacy ? namespaceSlicesLoading : serviceSlices.isLoading}
+      endpointSlicesEnabled={!legacy && canListEndpointSlices}
+      endpointSlicesError={(legacy ? namespaceSlicesError : serviceSlices.error)?.message}
+      endpointSlicesTruncated={!legacy && serviceSlices.data?.truncated}
       onNavigate={onNavigate}
       renderPortAction={({ port, name, appProtocol, protocol }) => (
         <>

package/src/components/settings/SettingsDialog.tsx

@@ -23,7 +23,7 @@ import { AISettingsSection, type AIDraft } from '../diagnose/AISettings'
 import { MyPermissionsContent } from './MyPermissionsDialog'
 import { PrivacySection } from './PrivacySection'
 import { ConfigToggle, SubHeading } from './controls'
-import { useDiagnose } from '../diagnose/DiagnoseContext'
+import { useDiagnose, type DiagnoseSetup } from '../diagnose/DiagnoseContext'
 import { currencyOptionsForValue } from './currency-options'
 import { UpdateNotification } from '../ui/UpdateNotification'
 import {
@@ -924,7 +924,13 @@ export function SettingsDialog({
                   )}
                 </div>
               ) : (
-                <AIUnavailableNotice />
+                <AIUnavailableNotice
+                  setupState={diag.setupState}
+                  cliOverride={diag.cliOverride}
+                  checkingAgents={diag.checkingAgents}
+                  agentsCheckFailed={diag.agentsCheckFailed}
+                  recheckAgents={diag.recheckAgents}
+                />
               )}
             </div>
 
@@ -1354,8 +1360,7 @@ function OverviewPanel({ active, onNavigate }: { active: boolean; onNavigate: (s
     },
     {
       id: 'ai', icon: Sparkles, label: 'AI investigations',
-      tone: aiAvailable ? 'ok' : 'off',
-      value: aiAvailable ? 'Ready' : 'No agent CLI',
+      ...aiOverviewStatus(aiAvailable, diag.setupState, diag.cliOverride, diag.agentsCheckFailed),
       detail: aiAvailable ? agentLabel : undefined,
     },
   ]
@@ -1408,6 +1413,33 @@ function OverviewPanel({ active, onNavigate }: { active: boolean; onNavigate: (s
   )
 }
 
+// aiOverviewStatus says which reason applies, for the same reason
+// AIUnavailableNotice does: "No agent CLI" is a claim about the user's machine,
+// and it is false when RADAR_AI_CLI_BIN is what's broken, when an agent is
+// reported but off, when this deployment can't run investigations at all, or
+// when the agents probe hasn't answered.
+function aiOverviewStatus(
+  aiAvailable: boolean,
+  setupState: DiagnoseSetup,
+  cliOverride: boolean,
+  checkFailed: boolean,
+): Pick<OverviewRow, 'tone' | 'value'> {
+  if (aiAvailable) return { tone: 'ok', value: 'Ready' }
+  if (cliOverride && (setupState === 'needs-install' || setupState === 'needs-restart')) {
+    return { tone: 'warn', value: "RADAR_AI_CLI_BIN can't be run" }
+  }
+  switch (setupState) {
+    case 'unknown':
+      return checkFailed ? { tone: 'warn', value: "Couldn't check" } : { tone: 'unknown', value: 'Checking…' }
+    case 'needs-restart':
+      return { tone: 'warn', value: 'Not available right now' }
+    case 'off':
+      return { tone: 'off', value: 'Not available in this deployment' }
+    default:
+      return { tone: 'off', value: 'No agent CLI' }
+  }
+}
+
 function OverviewStatus({ tone }: { tone: OverviewTone }) {
   const cls =
     tone === 'ok' ? 'bg-green-500'
@@ -1417,24 +1449,95 @@ function OverviewStatus({ tone }: { tone: OverviewTone }) {
   return <span className={clsx('w-2 h-2 rounded-full shrink-0', cls)} />
 }
 
-// AIUnavailableNotice is the body of the AI investigations tab when no supported agent
-// CLI is installed — the heading/description are provided by the tab itself, so
-// this is just the enable explainer (keeping the feature discoverable to whoever
-// would set it up).
-function AIUnavailableNotice() {
-  return (
+// AIUnavailableNotice is the body of the AI investigations tab when the agent,
+// model and effort controls have nothing to configure. The tab supplies the
+// heading, so this is just the explainer.
+//
+// It must say WHICH of the reasons applies. "No supported agent CLI found" is a
+// claim about the user's machine, and when a CLI was found but investigations
+// didn't start it is false.
+function AIUnavailableNotice({
+  setupState,
+  cliOverride,
+  checkingAgents,
+  agentsCheckFailed,
+  recheckAgents,
+}: {
+  setupState: DiagnoseSetup
+  cliOverride: boolean
+  checkingAgents: boolean
+  agentsCheckFailed: boolean
+  recheckAgents: () => Promise<void>
+}) {
+  // The state the tab was in when a check started. "Still…" is only true when
+  // the finished check left it there.
+  const [checkedState, setCheckedState] = useState<DiagnoseSetup | null>(null)
+  const unchanged = checkedState === setupState && !checkingAgents && !agentsCheckFailed
+  const checkAgain = (
+    <button
+      type="button"
+      disabled={checkingAgents}
+      onClick={() => void recheckAgents().then(() => setCheckedState(setupState))}
+      className="mt-3 flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand rounded-md disabled:opacity-50"
+    >
+      <RotateCw className={clsx('w-3.5 h-3.5', checkingAgents && 'animate-spin')} />
+      {checkingAgents ? 'Checking…' : 'Check again'}
+    </button>
+  )
+  const panel = (title: string, body?: ReactNode, action?: ReactNode) => (
     <div className="rounded-md border border-theme-border bg-theme-elevated/50 p-3">
-      <p className="text-sm font-medium text-theme-text-primary">No supported agent CLI found</p>
-      <p className="mt-1 text-xs text-theme-text-tertiary">
-        Install <span className="text-theme-text-secondary">Claude Code</span>,{' '}
-        <span className="text-theme-text-secondary">Codex</span>,{' '}
-        <span className="text-theme-text-secondary">Cursor</span> (
-        <span className="font-mono">cursor-agent</span>), or{' '}
-        <span className="text-theme-text-secondary">OpenCode</span>, then restart Radar — this tab
-        will show the agent, model, and effort controls.
-      </p>
+      <p className="text-sm font-medium text-theme-text-primary">{title}</p>
+      {body && <p className="mt-1 text-xs text-theme-text-tertiary">{body}</p>}
+      {action}
     </div>
   )
+  if (setupState === 'unknown') {
+    // The agent probe hasn't answered. Saying anything about the CLI or the
+    // deployment here would be a guess.
+    return agentsCheckFailed && !checkingAgents
+      ? panel("Couldn't check for agent CLIs", 'Try again.', checkAgain)
+      : panel('Checking…')
+  }
+  if (setupState === 'off') {
+    return panel(
+      'Not available in this deployment',
+      'They need Radar running on your own computer, with MCP on and sign-in off.',
+    )
+  }
+  if (cliOverride) {
+    return panel(
+      "Radar can't run your RADAR_AI_CLI_BIN",
+      <>
+        Fix the path, or remove it and restart Radar.
+        {unchanged && " Still can't run it."}
+      </>,
+      checkAgain,
+    )
+  }
+  if (setupState === 'needs-restart') {
+    return panel(
+      "AI investigations aren't available right now",
+      <>
+        {agentsCheckFailed && !checkingAgents ? "Couldn't check. Try again." : 'Try again in a moment.'}
+        {unchanged && ' Still not available.'}
+      </>,
+      checkAgain,
+    )
+  }
+  return panel(
+    'No supported agent CLI found',
+    <>
+      Install <span className="text-theme-text-secondary">Claude Code</span>,{' '}
+      <span className="text-theme-text-secondary">Codex</span>,{' '}
+      <span className="text-theme-text-secondary">Cursor</span> (
+      <span className="font-mono">cursor-agent</span>), or{' '}
+      <span className="text-theme-text-secondary">OpenCode</span>, and this tab will show the
+      agent, model, and effort controls.
+      {agentsCheckFailed && !checkingAgents && " Couldn't check. Try again."}
+      {unchanged && ' Still not found.'}
+    </>,
+    checkAgain,
+  )
 }
 
 // -- Startup section bodies ---------------------------------------------------

package/src/components/shared/LargeClusterNamespacePicker.tsx

@@ -1,10 +1,14 @@
-import { useState, useRef, useEffect, useMemo } from 'react'
+import { useState, useRef, useEffect, useMemo, type ReactNode } from 'react'
 import { Search } from 'lucide-react'
 import { Input } from '@skyhook-io/k8s-ui'
 
-export function LargeClusterNamespacePicker({ namespaces, onSelect }: {
+export function LargeClusterNamespacePicker({ namespaces, onSelect, ranked = false, renderMeta }: {
   namespaces: { name: string }[] | undefined
   onSelect: (ns: string) => void
+  /** Keep the given order (already ranked) instead of sorting by name. */
+  ranked?: boolean
+  /** Extra detail shown at the end of a namespace's row. */
+  renderMeta?: (name: string) => ReactNode
 }) {
   const [search, setSearch] = useState('')
   const inputRef = useRef<HTMLInputElement>(null)
@@ -15,8 +19,9 @@ export function LargeClusterNamespacePicker({ namespaces, onSelect }: {
 
   const sorted = useMemo(() => {
     if (!namespaces) return []
+    if (ranked) return namespaces
     return [...namespaces].sort((a, b) => a.name.localeCompare(b.name))
-  }, [namespaces])
+  }, [namespaces, ranked])
 
   const filtered = useMemo(() => {
     if (!search.trim()) return sorted
@@ -51,9 +56,10 @@ export function LargeClusterNamespacePicker({ namespaces, onSelect }: {
               key={ns.name}
               type="button"
               onClick={() => onSelect(ns.name)}
-              className="w-full text-left px-3 py-2 text-sm text-theme-text-primary hover:bg-theme-hover transition-colors border-b border-theme-border last:border-b-0"
+              className="w-full flex items-center justify-between gap-3 text-left px-3 py-2 text-sm text-theme-text-primary hover:bg-theme-hover transition-colors border-b border-theme-border last:border-b-0"
             >
-              {ns.name}
+              <span className="truncate">{ns.name}</span>
+              {renderMeta?.(ns.name)}
             </button>
           ))
         )}

package/src/components/timeline/TimelineList.tsx

@@ -13,6 +13,7 @@ import {
 import type { TimelineEvent } from '../../types'
 import { useTimelineSource } from '../../context/TimelineSource'
 import { isManagedTimelineEvent } from '../../api/timelineSource'
+import { TimelineRetentionBanner } from './TimelineRetentionNote'
 import { useHasLimitedAccess } from '../../contexts/CapabilitiesContext'
 import type { NavigateToResource } from '../../utils/navigation'
 import { AlertTriangle, RefreshCw } from 'lucide-react'
@@ -175,6 +176,8 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
 
   return (
     <div className="flex h-full min-h-0 flex-1 flex-col">
+      {/* Under a scrubber TimelineView already shows the note above it. */}
+      {!selectionWindow && <TimelineRetentionBanner />}
       {staleNote}
       <div className="min-h-0 flex-1">
         <TimelineListUI

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

@@ -0,0 +1,49 @@
+import { describe, expect, it, vi } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import type { TimelineEventsResult, TimelineSource } from '../../api/timelineSource'
+
+// The list reads its source from context; hand it a fixed empty result so the
+// test is about the note row alone.
+const eventsResult: TimelineEventsResult = { data: [], isLoading: false, isFetching: false, isError: false, refetch: () => {} }
+const fakeSource: TimelineSource = {
+  capabilities: { mode: 'local', ringLimit: 10_000 },
+  useEvents: () => eventsResult,
+}
+vi.mock('../../context/TimelineSource', () => ({ useTimelineSource: () => fakeSource }))
+
+import { TimelineRetentionNoteProvider } from '../../context/TimelineCustomization'
+import { TimelineList } from './TimelineList'
+
+describe('TimelineList history-limit row', () => {
+  const props = {
+    namespaces: [],
+    showDeleted: false,
+    onShowDeletedChange: () => {},
+    showRoutine: false,
+    onShowRoutineChange: () => {},
+    search: '',
+    onSearchChange: () => {},
+    activityFilter: [],
+    onActivityFilterChange: () => {},
+    kindFilter: [],
+    onKindFilterChange: () => {},
+  }
+  const withNote = (node: React.ReactNode) => (
+    <TimelineRetentionNoteProvider value={<a href="/plans">Host note</a>}>{node}</TimelineRetentionNoteProvider>
+  )
+
+  it('shows the host note in its own row', () => {
+    const html = renderToStaticMarkup(withNote(<TimelineList {...props} />))
+    expect(html).toContain('data-testid="timeline-retention-note"')
+    expect(html).toContain('<a href="/plans">Host note</a>')
+  })
+
+  it('renders no row without a host note (standalone Radar)', () => {
+    expect(renderToStaticMarkup(<TimelineList {...props} />)).not.toContain('timeline-retention-note')
+  })
+
+  it('leaves the note to the view when a scrubber owns the range', () => {
+    const html = renderToStaticMarkup(withNote(<TimelineList {...props} selectionWindow={{ fromMs: 0, toMs: 1 }} />))
+    expect(html).not.toContain('timeline-retention-note')
+  })
+})

package/src/components/timeline/TimelineRetentionNote.tsx

@@ -0,0 +1,20 @@
+import { Clock } from 'lucide-react'
+import { useTimelineRetentionNote } from '../../context/TimelineCustomization'
+
+// The host's history-limit note as a full-width row above the timeline,
+// beside the other history-completeness rows (truncation, stale live
+// updates). Informational, not a warning: nothing is broken, the server
+// serves this much. Renders nothing when the host has no note.
+export function TimelineRetentionBanner() {
+  const note = useTimelineRetentionNote()
+  if (!note) return null
+  return (
+    <div
+      className="flex flex-wrap items-center gap-x-1.5 gap-y-1 border-b border-theme-border px-4 py-1.5 text-xs text-theme-text-tertiary"
+      data-testid="timeline-retention-note"
+    >
+      <Clock className="h-3.5 w-3.5 shrink-0" />
+      {note}
+    </div>
+  )
+}

package/src/components/timeline/TimelineView.tsx

@@ -25,6 +25,7 @@ import type { ActivityFilterKey } from './TimelineList'
 import { TimelineSwimlanes } from './TimelineSwimlanes'
 import { RetainedTimelineScrubber, extendSelection, type ScrubberDomainInfo } from './RetainedTimelineScrubber'
 import { LocalTimelineScrubber } from './LocalTimelineScrubber'
+import { TimelineRetentionBanner } from './TimelineRetentionNote'
 import { useTopology, useApplications } from '../../api/client'
 import { useTimelineSource } from '../../context/TimelineSource'
 import type { Topology } from '../../types'
@@ -829,11 +830,16 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
   // The scrubber sits above whichever view is active, sharing one selection
   // across list + swimlane. Retained draws its server-overview strip; local
   // derives the strip client-side from the loaded ring and omits the gap band.
+  // The host's note about how far back history goes: without it the stretch
+  // before the limit reads as "nothing happened". Without a scrubber the list
+  // view shows it itself, above its own range selector.
+  const retentionBanner = showScrubber || viewMode === 'swimlane' ? <TimelineRetentionBanner /> : null
   const wrap = (node: ReactNode): ReactNode => {
     if (!showScrubber) {
       return (
         <div className="flex-1 flex flex-col min-h-0">
           {appScopeBar}
+          {retentionBanner}
           <div className="flex-1 flex flex-col min-h-0">{node}</div>
         </div>
       )
@@ -850,6 +856,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     return (
       <div className="flex-1 flex flex-col min-h-0">
         {appScopeBar}
+        {retentionBanner}
         {/* A row-capped ring load means the OLDEST part of the retention
             window is not loaded — say so, or an old selection reads as
             "nothing happened back then". */}