@skyhook-io/radar-app 1.8.13 → 1.9.0

package/src/components/applications/ApplicationsView.tsx

@@ -639,13 +639,14 @@ function AppDetailRoute({
         history={historyQuery.data}
         historyLoading={historyQuery.isLoading}
         historyItems={historyItems}
-        historyRuntimeLoading={historyTimelineQuery.isFetching}
+        historyRuntimeLoading={historyTimelineQuery.isLoading}
         historyRuntimeError={historyTimelineQuery.isError}
         historyMode={timelineSource.capabilities.mode}
         historyRange={historyRange}
         historyRangeOptions={historyRangeOptions}
         historyCoverageRecordCount={historyTimelineQuery.coverage?.length ?? 0}
         historyRuntimeLimited={historyRuntimeLimited}
+        historyRingTruncated={historyTimelineQuery.truncated ?? false}
         onHistoryRangeChange={setRetainedHistoryRange}
         onOpenTimeline={openApplicationTimeline}
         onOpenSource={openSource}

package/src/components/home/mcpToolCatalog.ts

@@ -141,7 +141,7 @@ export const MCP_TOOL_CATALOG: MCPToolInfo[] = [
     params: [
       { arg: 'namespace', desc: 'filter to a specific namespace' },
       { arg: 'category', desc: 'Security, Reliability, or Efficiency' },
-      { arg: 'severity', desc: 'danger or warning' },
+      { arg: 'severity', desc: 'posture priority: critical, high, medium, or low (built-ins use high or medium)' },
       { arg: 'limit', desc: 'max findings (default 30, max 100)' },
     ],
   },

package/src/components/timeline/RetainedTimelineScrubber.tsx

@@ -13,10 +13,11 @@ import {
   type ScrubberRange,
   type TimelineLiveState,
 } from '@skyhook-io/k8s-ui'
-import type {
-  TimelineSource,
-  TimelineOverviewBucket,
-  TimelineOverviewResult,
+import {
+  RETAINED_CLOCK_SKEW_SLACK_MS,
+  type TimelineSource,
+  type TimelineOverviewBucket,
+  type TimelineOverviewResult,
 } from '../../api/timelineSource'
 import { getApiBase } from '../../api/config'
 
@@ -25,8 +26,11 @@ const DAY_MS = 24 * HOUR_MS
 const EMPTY_BUCKETS: TimelineOverviewBucket[] = []
 const MAX_STRIP_BARS = 512
 
-// Per-request guard on the retained events endpoint: never brush wider than 7d.
-const MAX_SELECTION_MS = 7 * DAY_MS
+// Absolute per-request ceiling on the retained events endpoint, matching the
+// hub's own timelineEventsMaxRange. The effective cap is the smaller of this
+// and the embedder's declared retention depth (maxRangeDays), so a host that
+// advertises 30d of retention can load all 30d in one view.
+const MAX_SELECTION_MS = 31 * DAY_MS
 
 // Group the server's hour buckets into fixed display buckets aligned to the
 // display size, summing counts. The host owns this so the pure scrubber only
@@ -83,8 +87,8 @@ export function buildPresets(maxRangeDays: number): ScrubberPreset[] {
     { label: '24h', ms: DAY_MS },
     { label: '7d', ms: 7 * DAY_MS },
   ]
-  // 30d is a domain-context preset — it clamps to the 7d per-request cap, but
-  // signals the deeper retained window is available.
+  // 30d loads the full retained window in one request (bounded by the hub's
+  // per-request cap); shown only when the retention depth reaches it.
   if (maxRangeDays >= 30) presets.push({ label: '30d', ms: 30 * DAY_MS })
   return presets
 }
@@ -176,17 +180,21 @@ export function RetainedTimelineScrubber({ source, selection, onSelectionChange,
   const availableFromMs = overview.data?.availableFromMs
 
   const domain = useMemo<ScrubberRange>(() => {
-    // Clamp the domain floor to the queryable window. availableFromMs can point
+    // Clamp the domain floor to the LOADED window. availableFromMs can point
     // at ancient synthesized-historical event times (resource creation dates on
-    // long-lived clusters), which would stretch the strip over years of
-    // unreachable nothing — the UI can never brush past maxRangeDays anyway.
-    const floor = now - maxRangeDays * DAY_MS
+    // long-lived clusters), and a host may declare maxRangeDays deeper than the
+    // ring the client actually loads (MAX_SELECTION_MS) — either would stretch
+    // the strip over regions that render empty despite overview density. The
+    // ring's window slides forward by the clock-skew slack, so the floor does
+    // too — without it the oldest slack-width sliver is brushable but never
+    // loadable.
+    const floor = now - Math.min(maxRangeDays * DAY_MS, MAX_SELECTION_MS) + RETAINED_CLOCK_SKEW_SLACK_MS
     const fromMs = availableFromMs != null ? Math.max(availableFromMs, floor) : floor
     return { fromMs: Math.min(fromMs, now - HOUR_MS), toMs: now }
   }, [availableFromMs, now, maxRangeDays])
 
   const domainWidth = domain.toMs - domain.fromMs
-  const maxSelectionMs = Math.min(MAX_SELECTION_MS, domainWidth)
+  const maxSelectionMs = Math.min(maxRangeDays * DAY_MS, MAX_SELECTION_MS, domainWidth)
 
   // The histogram spans the QUERY RANGE (selection) directly —
   // no ×8 framing, no minimap. The query is the view, so a narrow window is never

package/src/components/timeline/TimelineList.tsx

@@ -1,5 +1,6 @@
 import { useState, useCallback, useMemo } from 'react'
 import {
+  SEVERITY_TEXT,
   TimelineList as TimelineListUI,
   eventsForApplication,
   type ActivityTypeFilter,
@@ -15,10 +16,11 @@ import { AlertTriangle, RefreshCw } from 'lucide-react'
 
 export type { ActivityTypeFilter, ActivityFilterKey }
 
-// Server-side cap on the list fetch. Generous so a busy query window isn't
-// silently truncated — the list is already bounded to the selection range, so
-// this only caps pathological bursts. Surfaced to the list as `truncatedAt` so a
-// window that does hit it shows an end-of-list note instead of dropping silently.
+// Cap on the list result — applied client-side in both modes over the loaded
+// window (applyClientFilters slices). Generous so a busy query window isn't
+// silently truncated; the list is already bounded to the selection range, so
+// this only caps pathological bursts. Surfaced as `truncatedAt` so a window
+// that hits it shows an end-of-list note instead of dropping silently.
 const LIST_FETCH_LIMIT = 2000
 const APP_SCOPED_FETCH_LIMIT = 10000
 
@@ -39,14 +41,12 @@ interface TimelineListProps {
   kindFilter: string[]
   onKindFilterChange: (kinds: string[]) => void
   // The shared scrubber selection [from,to]. When set (retained mode always;
-  // local mode once the scrubber owns the range), it drives the fetch window and
+  // local mode once the scrubber owns the range), it drives the query window and
   // hides the built-in range dropdown so the list can't drift from the
-  // swimlane/URL. Retained scopes server-side; local loads the ring and bounds it
-  // client-side (see useLocalEvents).
+  // swimlane/URL. In both modes a window the loaded ring covers slices it
+  // client-side with no fetch; a frozen selection older than a truncated ring's
+  // oldest row fetches its own server window (see createRingEventsHook).
   selectionWindow?: { fromMs: number; toMs: number }
-  // LIVE mode: quantize the base fetch so the sliding window doesn't churn the
-  // query key every tick.
-  sliding?: boolean
   // Time span of the rows visible in the list's scrollport — the host renders
   // it as the scrubber lens so scrolling the list moves the lens.
   onVisibleWindowChange?: (window: { fromMs: number; toMs: number } | null) => void
@@ -58,7 +58,7 @@ interface TimelineListProps {
   appScopeLoading?: boolean
 }
 
-export function TimelineList({ namespaces, onViewChange, currentView, onResourceClick, initialFilter, initialTimeRange, showDeleted, onShowDeletedChange, search, onSearchChange, activityFilter, onActivityFilterChange, kindFilter, onKindFilterChange, selectionWindow, sliding, onVisibleWindowChange, scrollToMs, focusedAppIndex, appScoped = false, topology, appScopeLoading = false }: TimelineListProps) {
+export function TimelineList({ namespaces, onViewChange, currentView, onResourceClick, initialFilter, initialTimeRange, showDeleted, onShowDeletedChange, search, onSearchChange, activityFilter, onActivityFilterChange, kindFilter, onKindFilterChange, selectionWindow, onVisibleWindowChange, scrollToMs, focusedAppIndex, appScoped = false, topology, appScopeLoading = false }: TimelineListProps) {
   const hasLimitedAccess = useHasLimitedAccess()
   const timelineSource = useTimelineSource()
   const [queryParams, setQueryParams] = useState<{ timeRange: TimeRange; kinds: string[] }>({
@@ -71,7 +71,7 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
   }, [])
 
   const fetchLimit = appScoped ? APP_SCOPED_FETCH_LIMIT : LIST_FETCH_LIMIT
-  const { data: unscopedEvents = [], isLoading, isError, refetch } = timelineSource.useEvents({
+  const { data: fetchedEvents, isLoading, isError, error, refetch } = timelineSource.useEvents({
     namespaces,
     kinds: queryParams.kinds,
     timeRange: queryParams.timeRange,
@@ -81,23 +81,27 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
     limit: fetchLimit,
     fromMs: selectionWindow?.fromMs,
     toMs: selectionWindow?.toMs,
-    sliding,
   })
-  const events = useMemo(
-    () => appScoped
+  const events = useMemo(() => {
+    const unscoped = fetchedEvents ?? []
+    return appScoped
       ? focusedAppIndex
-        ? eventsForApplication(unscopedEvents, topology, focusedAppIndex)
+        ? eventsForApplication(unscoped, topology, focusedAppIndex)
         : []
-      : unscopedEvents,
-    [appScoped, focusedAppIndex, topology, unscopedEvents],
-  )
-  const sourceTruncated = unscopedEvents.length >= fetchLimit
+      : unscoped
+  }, [appScoped, focusedAppIndex, topology, fetchedEvents])
+  const sourceTruncated = (fetchedEvents?.length ?? 0) >= fetchLimit
 
-  if (isError) {
+  // Full-screen error only when nothing is loaded; a failing background poll
+  // with data on screen keeps rendering (data before error).
+  if (isError && !fetchedEvents) {
     return (
       <div className="flex flex-col items-center justify-center h-full text-theme-text-tertiary gap-3">
         <AlertTriangle className="w-10 h-10 text-amber-400/70" />
         <p className="text-base">Failed to load timeline data</p>
+        {error?.message?.trim() && (
+          <p className="max-w-md px-6 text-center text-sm text-theme-text-tertiary">{error.message.trim()}</p>
+        )}
         <button
           onClick={() => refetch()}
           className="flex items-center gap-2 px-3 py-1.5 text-sm bg-theme-elevated border border-theme-border-light rounded-lg hover:bg-theme-hover transition-colors"
@@ -109,34 +113,53 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
     )
   }
 
+  // Failing background polls with rows on screen: keep the data, say it may
+  // be stale. Only when the list owns its own range — under a scrubber the
+  // view-level banner already reports the shared failure, and a second note
+  // would double up.
+  const staleNote = isError && fetchedEvents && !selectionWindow ? (
+    <div className="flex items-center gap-1.5 border-b border-theme-border px-4 py-1.5 text-xs text-theme-text-tertiary">
+      <AlertTriangle className={`h-3.5 w-3.5 shrink-0 ${SEVERITY_TEXT.warning}`} />
+      Live updates are failing — the list may be stale.
+      <button type="button" onClick={() => refetch()} className="underline hover:text-theme-text-primary">
+        Retry now
+      </button>
+    </div>
+  ) : null
+
   return (
-    <TimelineListUI
-      events={events}
-      isLoading={isLoading || appScopeLoading}
-      onQueryChange={handleQueryChange}
-      hasLimitedAccess={hasLimitedAccess}
-      namespaces={namespaces}
-      onViewChange={onViewChange}
-      currentView={currentView}
-      onResourceClick={onResourceClick}
-      initialFilter={initialFilter}
-      initialTimeRange={initialTimeRange}
-      hideRangeSelector={!!selectionWindow}
-      showDeleted={showDeleted}
-      onShowDeletedChange={onShowDeletedChange}
-      search={search}
-      onSearchChange={onSearchChange}
-      activityFilter={activityFilter}
-      onActivityFilterChange={onActivityFilterChange}
-      kindFilter={kindFilter}
-      onKindFilterChange={onKindFilterChange}
-      onVisibleWindowChange={onVisibleWindowChange}
-      scrollToMs={scrollToMs}
-      truncatedAt={fetchLimit}
-      isTruncated={sourceTruncated}
-      truncationMessage={appScoped && sourceTruncated
-        ? `Showing application activity found in the newest ${fetchLimit.toLocaleString()} events in this range — narrow the query to see older activity`
-        : undefined}
-    />
+    <div className="flex h-full min-h-0 flex-1 flex-col">
+      {staleNote}
+      <div className="min-h-0 flex-1">
+        <TimelineListUI
+          events={events}
+          isLoading={isLoading || appScopeLoading}
+          onQueryChange={handleQueryChange}
+          hasLimitedAccess={hasLimitedAccess}
+          namespaces={namespaces}
+          onViewChange={onViewChange}
+          currentView={currentView}
+          onResourceClick={onResourceClick}
+          initialFilter={initialFilter}
+          initialTimeRange={initialTimeRange}
+          hideRangeSelector={!!selectionWindow}
+          showDeleted={showDeleted}
+          onShowDeletedChange={onShowDeletedChange}
+          search={search}
+          onSearchChange={onSearchChange}
+          activityFilter={activityFilter}
+          onActivityFilterChange={onActivityFilterChange}
+          kindFilter={kindFilter}
+          onKindFilterChange={onKindFilterChange}
+          onVisibleWindowChange={onVisibleWindowChange}
+          scrollToMs={scrollToMs}
+          truncatedAt={fetchLimit}
+          isTruncated={sourceTruncated}
+          truncationMessage={appScoped && sourceTruncated
+            ? `Showing application activity found in the newest ${fetchLimit.toLocaleString()} events in this range — narrow the query to see older activity`
+            : undefined}
+        />
+      </div>
+    </div>
   )
 }

package/src/components/timeline/TimelineView.tsx

@@ -92,6 +92,10 @@ export type TimelineMode =
 // burying the lanes in a day of history; presets/URL widen it deliberately.
 const DEFAULT_LIVE_WIDTH_MS = 60 * 60 * 1000
 const DAY_MS = 24 * 60 * 60 * 1000
+// Presets wider than this land the swimlane on a bounded recent lens instead of
+// the full range, so it never renders every resource lane at once (a 30d domain
+// has thousands). 7d and narrower keep the full-range lens.
+const WIDE_LENS_THRESHOLD_MS = 7 * DAY_MS
 // Fallback cap for a retained hand-entered ?from&to when the source doesn't
 // declare maxRangeDays — mirrors the retained source's own default.
 const DEFAULT_MAX_RANGE_DAYS = 7
@@ -293,8 +297,8 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
   const effectiveInitialMode = scopeRequiresNamespaceFilter ? 'list' : (parseView(searchParams) ?? initialViewMode ?? DEFAULT_VIEW)
   const [viewMode, setViewMode] = useState<TimelineViewMode>(effectiveInitialMode)
   // Shared across list + swimlane so the toggle carries across the view switch,
-  // and so the swimlane fetch can exclude deletes server-side (before LIMIT)
-  // rather than only hiding them client-side after the 10k cap.
+  // and so the fetch can exclude deletes at the source rather than only hiding
+  // them client-side.
   const [showDeleted, setShowDeleted] = useState(() => searchParams.get('deleted') !== '0')
   // ?pinnedOnly=1 is inert without pins: honoring it with no stored pins would
   // arm a filter that hides everything. Gate the read on stored pins so the param
@@ -519,11 +523,21 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     // plain fixed widths.
     const all = isLocal && scrubberDomain != null && widthMs >= scrubberDomain.maxSelectionMs
     const now = Date.now()
+    const sel = deriveLiveSelection(capped, now)
     setMode({ kind: 'live', widthMs: capped, all: all || undefined })
     setFrozenAsOfMs(null)
     setNowTick(now)
-    resetLensToFull(deriveLiveSelection(capped, now))
-  }, [isLocal, scrubberDomain, resetLensToFull])
+    // A full-range lens on a very wide domain (e.g. 30d) renders EVERY resource
+    // lane at once — thousands of rows — which freezes the browser for seconds
+    // before the view settles. Land directly on a bounded recent lens instead;
+    // the density strip still spans the full selected range for context, and the
+    // user scrubs it. Narrow presets (<= 7d) keep the full-range lens unchanged.
+    if (capped > WIDE_LENS_THRESHOLD_MS) {
+      resetLensToRecent(sel)
+    } else {
+      resetLensToFull(sel)
+    }
+  }, [isLocal, scrubberDomain, resetLensToFull, resetLensToRecent])
 
   // "→ Now" → LIVE, width = current selection width. Pins to now and resets the
   // lens to the live edge.
@@ -640,22 +654,26 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     setSearchParamsRef.current(target, { replace })
   }, [viewMode, mode, showDeleted, pinnedOnly, search, activityFilter, kindFilter, grouping, sort, selectedEventId, isRetained, isLocal, scopeRequiresNamespaceFilter])
 
-  // Fetch all activity - zoom controls what's visible in the UI. The heavy 10k
-  // ring feeds the swimlanes and the local strip's histogram, so it also runs in
-  // list mode when that strip is shown; the list itself fetches its own 2000.
-  const { data: activity, isLoading, isError, refetch } = timelineSource.useEvents({
+  // Fetch all activity - zoom controls what's visible in the UI. This ring feeds
+  // the swimlanes and the local strip's histogram, so it also runs in list mode
+  // when that strip is shown; the list itself fetches its own 2000.
+  const { data: activity, isLoading, isError, error, refetch, truncated: ringTruncated } = timelineSource.useEvents({
     namespaces: timelineNamespaces,
     timeRange: 'all',
     includeK8sEvents: true,
     includeManaged: true,
     includeDeleted: showDeleted,
-    limit: 10000,
+    // Only the local in-memory ring imposes a client-side size cap (it can't
+    // hold more than its ring anyway). Retained mode renders every event its
+    // ring holds — the hub bounds the ring itself (retention depth + a newest-
+    // 50k cap flagged as truncated, never a silent cut), so a busy window
+    // never silently drops its oldest events on the client.
+    limit: isRetained ? undefined : 10000,
     // The local strip derives its histogram from this ring fetch, so it must
     // run in list mode too whenever the strip is shown.
     enabled: appScopeReady && (showSwimlanes || showLocalScrubber),
     fromMs: isRetained ? selection.fromMs : undefined,
     toMs: isRetained ? selection.toMs : undefined,
-    sliding: isRetained && mode.kind === 'live',
   })
 
   // Topology powers both swimlane hierarchy and application-scoped attribution.
@@ -721,7 +739,12 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
   )
   const focusedAppLoading = Boolean(focusedAppKey) && appsLoading
   const focusedAppUnavailable = Boolean(focusedAppKey) && (!appScopeReady || (!appsLoading && (appsError || !focusedApp)))
-  const focusedAppTimelineLimited = Boolean(focusedAppKey) && unscopedEvents.length >= 10_000
+  // Only local truncates the swimlane fetch at 10k (the in-memory ring cap), so
+  // hitting 10k there genuinely means older app activity is hidden. Retained
+  // sends no client limit — the full hub ring is on screen (the hub caps it at
+  // the newest 50k, surfaced by the truncated flag and its banner, never a
+  // silent cut) — so this "showing newest 10k" banner would be false there.
+  const focusedAppTimelineLimited = isLocal && Boolean(focusedAppKey) && unscopedEvents.length >= 10_000
   const clearFocusedApp = useCallback(() => {
     const next = new URLSearchParams(searchParamsRef.current)
     next.delete('app')
@@ -802,6 +825,26 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     return (
       <div className="flex-1 flex flex-col min-h-0">
         {appScopeBar}
+        {/* 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". */}
+        {ringTruncated && (
+          <div className="flex items-center gap-1.5 border-b border-theme-border px-4 py-1.5 text-xs text-theme-text-tertiary">
+            <AlertTriangle className={`h-3.5 w-3.5 shrink-0 ${SEVERITY_TEXT.warning}`} />
+            History is truncated: showing the newest {timelineSource.capabilities.ringLimit.toLocaleString()} events of the retention window — the oldest activity is not loaded.
+          </div>
+        )}
+        {/* Failing background polls with a loaded ring: keep the data, say
+            it's going stale. The full-screen error is reserved for no-data. */}
+        {isError && activity && (
+          <div className="flex items-center gap-1.5 border-b border-theme-border px-4 py-1.5 text-xs text-theme-text-tertiary">
+            <AlertTriangle className={`h-3.5 w-3.5 shrink-0 ${SEVERITY_TEXT.warning}`} />
+            Live updates are failing — the timeline may be stale.
+            <button type="button" onClick={() => refetch()} className="underline hover:text-theme-text-primary">
+              Retry now
+            </button>
+          </div>
+        )}
         {isRetained ? (
           <RetainedTimelineScrubber
             source={timelineSource}
@@ -887,18 +930,26 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
       )
     }
 
-    // A failed fetch must not render as the swimlane "No events yet" empty state —
-    // that reads as a quiet cluster rather than a load failure.
-    if (isError) {
+    // A failed fetch with NOTHING loaded must not render as the swimlane
+    // "No events yet" empty state — that reads as a quiet cluster rather than
+    // a load failure. With a loaded ring on screen, a failing background poll
+    // must NOT blank it (gate on data before error); the stale-data banner
+    // below carries the warning instead.
+    if (isError && !activity) {
+      // Surface the server's own message — a generic "failed to load" would
+      // swallow whatever the hub said. "Try again" is a full resync: the
+      // retained source drops its delta cursor and reloads the whole ring.
+      const detail = error?.message?.trim()
       return wrap(
         <div className="flex-1 flex flex-col">
           <div className="flex items-center justify-between px-4 py-2 border-b border-theme-border">
             <div />
             <ViewModeToggle viewMode={viewMode} onViewModeChange={setViewMode} />
           </div>
-          <div className="flex-1 flex flex-col items-center justify-center text-theme-text-tertiary gap-3">
+          <div className="flex-1 flex flex-col items-center justify-center text-theme-text-tertiary gap-3 px-6">
             <AlertTriangle className="w-10 h-10 text-amber-400/70" />
             <p className="text-base">Failed to load timeline data</p>
+            {detail && <p className="max-w-md text-center text-sm text-theme-text-tertiary">{detail}</p>}
             <button
               onClick={() => refetch()}
               className="flex items-center gap-2 px-3 py-1.5 text-sm bg-theme-elevated border border-theme-border-light rounded-lg hover:bg-theme-hover transition-colors"
@@ -971,7 +1022,6 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
       // to own the range — passing it scrubber-less would hide the list's own
       // range dropdown and leave the user with no time control at all.
       selectionWindow={showScrubber ? selection : undefined}
-      sliding={showScrubber && mode.kind === 'live'}
       onVisibleWindowChange={setListVisibleWindow}
       // Seeded with the swimlane's window at the switch (see the viewMode
       // effect); afterwards, dragging the strip band retargets the scroll.

package/src/utils/auditBadges.ts

@@ -8,7 +8,7 @@ export interface AuditBadgeMessage {
 export interface AuditSeverityCounts {
   danger: number
   warning: number
-  /** The finding messages behind the counts, danger-first, for inline tooltips.
+  /** The finding messages behind the counts, High-first, for inline tooltips.
    *  Lets a badge say WHAT is wrong on hover instead of just a count. */
   messages: AuditBadgeMessage[]
 }