@skyhook-io/radar-app 1.8.12 → 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/diagnose/AISettings.tsx

@@ -18,7 +18,15 @@ export interface AIDraft {
 // ClearHistoryRow is an immediate action (not part of the staged draft): a
 // two-step confirm button that wipes finished investigations from the local
 // history DB. Live investigations survive.
-function ClearHistoryRow({ onCleared }: { onCleared: () => void }) {
+function ClearHistoryRow({
+  hosted,
+  agentLabel,
+  onCleared,
+}: {
+  hosted: boolean;
+  agentLabel: string;
+  onCleared: () => void;
+}) {
   const [confirming, setConfirming] = useState(false);
   const [state, setState] = useState<"idle" | "busy" | "done" | "error">(
     "idle",
@@ -36,9 +44,15 @@ function ClearHistoryRow({ onCleared }: { onCleared: () => void }) {
   return (
     <div className="mt-3 flex items-center justify-between gap-2 border-t border-theme-border/60 pt-3">
       <p className="text-[11px] leading-snug text-theme-text-tertiary">
-        Investigation transcripts are kept on this machine (
-        <code className="font-mono">~/.radar</code>) so history survives
-        restarts.
+        {hosted ? (
+          `Investigation transcripts are stored by ${agentLabel} so history survives restarts.`
+        ) : (
+          <>
+            Investigation transcripts are kept on this machine (
+            <code className="font-mono">~/.radar</code>) so history survives
+            restarts.
+          </>
+        )}
         {state === "done" && (
           <span className="ml-1 font-medium text-theme-text-secondary">
             History cleared.
@@ -85,12 +99,16 @@ function ClearHistoryRow({ onCleared }: { onCleared: () => void }) {
 export function AISettingsSection({
   available,
   agents,
+  hosted,
+  agentLabel,
   draft,
   onChange,
   onHistoryCleared,
 }: {
   available: boolean;
   agents: AgentInfo[];
+  hosted: boolean;
+  agentLabel: string;
   draft: AIDraft;
   onChange: (patch: Partial<AIDraft>) => void;
   onHistoryCleared: () => void;
@@ -98,19 +116,32 @@ export function AISettingsSection({
   if (!available || agents.length === 0) return null;
   return (
     <>
-      <AgentControls
-        agents={agents}
-        selectedAgent={draft.agent}
-        // Model + effort are agent-specific; reset them when the agent changes.
-        onSelectAgent={(a) => onChange({ agent: a, model: "", effort: "" })}
-        isolated={draft.isolated}
-        onSetIsolated={(v) => onChange({ isolated: v })}
-        model={draft.model}
-        onSetModel={(v) => onChange({ model: v })}
-        effort={draft.effort}
-        onSetEffort={(v) => onChange({ effort: v })}
+      {hosted ? (
+        // The agent, its model, and how it runs are all fixed by the host — none
+        // of the local BYO-agent knobs apply, so there's nothing to configure.
+        <p className="text-xs leading-snug text-theme-text-tertiary">
+          {agentLabel} manages the model and how it runs — there&apos;s nothing to
+          configure here.
+        </p>
+      ) : (
+        <AgentControls
+          agents={agents}
+          selectedAgent={draft.agent}
+          // Model + effort are agent-specific; reset them when the agent changes.
+          onSelectAgent={(a) => onChange({ agent: a, model: "", effort: "" })}
+          isolated={draft.isolated}
+          onSetIsolated={(v) => onChange({ isolated: v })}
+          model={draft.model}
+          onSetModel={(v) => onChange({ model: v })}
+          effort={draft.effort}
+          onSetEffort={(v) => onChange({ effort: v })}
+        />
+      )}
+      <ClearHistoryRow
+        hosted={hosted}
+        agentLabel={agentLabel}
+        onCleared={onHistoryCleared}
       />
-      <ClearHistoryRow onCleared={onHistoryCleared} />
     </>
   );
 }

package/src/components/diagnose/DiagnoseContext.tsx

@@ -34,6 +34,7 @@ export type DiagnoseView = "home" | "investigation";
 interface DiagnoseCtx {
   available: boolean; // an agent CLI is present (button/entry gate)
   agentLabel: string; // label of the selected agent, e.g. "Claude Code"
+  hosted: boolean; // selected agent runs on the host's backend, not this machine
   agents: AgentInfo[]; // supported agents detected on PATH (for the picker)
   selectedAgent: string; // name of the chosen backend ("claude"/"codex")
   setSelectedAgent: (name: string) => void;
@@ -262,6 +263,7 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
     selectedAgent,
     agents.find((a) => a.name === selectedAgent)?.label,
   );
+  const hosted = !!agents.find((a) => a.name === selectedAgent)?.hosted;
 
   useEffect(() => {
     const onResize = () => setViewportW(window.innerWidth);
@@ -434,6 +436,7 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
   const value: DiagnoseCtx = {
     available,
     agentLabel,
+    hosted,
     agents,
     selectedAgent,
     setSelectedAgent,

package/src/components/diagnose/InvestigationView.tsx

@@ -44,7 +44,9 @@ export function InvestigationView({
   maximized: boolean;
 }) {
   const { kind, namespace, name } = run;
-  const { refreshRuns, openInvestigation, startError } = useDiagnose();
+  // Apply is off for hosted agents (read-only server-side). Keyed on the selected
+  // agent, which matches run.agent unless a deployment mixes hosted + local agents.
+  const { refreshRuns, openInvestigation, startError, hosted } = useDiagnose();
   const retryDiagnosis = useCallback(
     () => openInvestigation({ kind, namespace, name }),
     [openInvestigation, kind, namespace, name],
@@ -498,7 +500,8 @@ export function InvestigationView({
             <RunContextCard run={run} />
             {turns.map((t, i) => {
               const isLast = i === turns.length - 1;
-              const canApply = i === lastRemediationIdx && !stale;
+              // Hosted runners are read-only — the server refuses apply turns.
+              const canApply = i === lastRemediationIdx && !stale && !hosted;
               const canCheck = isLast && t.status === "done" && !!t.apply;
               return (
                 <TurnView
@@ -541,7 +544,9 @@ export function InvestigationView({
           <ResultCard
             diagnosis={turns[pinnedIdx].diagnosis!}
             onApply={
-              pinnedIdx === lastRemediationIdx && !stale ? requestApply : undefined
+              pinnedIdx === lastRemediationIdx && !stale && !hosted
+                ? requestApply
+                : undefined
             }
             onAsk={!busy && !stale ? askFollowup : undefined}
             reveal="full"

package/src/components/diagnose/LocalDiagnoseAction.tsx

@@ -5,14 +5,15 @@ import type { RenderDiagnoseAction } from "../../context/DiagnoseCustomization";
 
 // The per-resource AI entry point. It no longer owns a panel — it just dispatches
 // to the single app-level AI surface (DiagnoseContext), opening a new investigation
-// for this resource. Self-hides when no agent CLI is present. A host like Radar Hub
-// overrides this slot with its own action.
+// for this resource. Self-hides when no agent CLI is present. Hosts can override
+// this slot with their own action.
 //
 // Adaptive by health: on a resource with a live problem it reads as a prominent
 // "Diagnose" (find the root cause); when the resource is fine or health is unknown
 // it shrinks to a quiet colored-icon affordance ("ask my agent about this") — so it
 // never implies "something is wrong here" on a healthy resource. The tooltip leads
-// with the BYO framing: this runs the user's OWN agent, locally.
+// with the BYO framing (the user's OWN agent, locally) — unless the agent is
+// hosted, where those claims would be false.
 function DiagnoseResourceButton({
   kind,
   namespace,
@@ -31,9 +32,13 @@ function DiagnoseResourceButton({
   const running = runningKeys.has(runTargetKey(kind, namespace, name));
   const tooltip = running
     ? `${d.agentLabel} is investigating this resource — click to watch it live.`
-    : problem
-      ? `Diagnose with your own ${d.agentLabel} — runs locally, reads this resource's spec, events & logs to find the root cause.`
-      : `Ask your own ${d.agentLabel} about this resource — runs locally, reads its spec, events & logs.`;
+    : d.hosted
+      ? problem
+        ? `Diagnose with ${d.agentLabel} — reads this resource's spec, events & logs to find the root cause.`
+        : `Ask ${d.agentLabel} about this resource — reads its spec, events & logs.`
+      : problem
+        ? `Diagnose with your own ${d.agentLabel} — runs locally, reads this resource's spec, events & logs to find the root cause.`
+        : `Ask your own ${d.agentLabel} about this resource — runs locally, reads its spec, events & logs.`;
   // While an investigation is live, the button advertises it (and clicking focuses
   // the existing run rather than starting a new one — openInvestigation dedups).
   const showLabel = problem || running;
@@ -95,7 +100,11 @@ export function IssueDiagnoseButton({
   if (!d.available) return null;
   return (
     <Tooltip
-      content={`Runs ${d.agentLabel} on your machine and sends it this resource's context to find the root cause`}
+      content={
+        d.hosted
+          ? `Sends this resource's context to ${d.agentLabel} to find the root cause`
+          : `Runs ${d.agentLabel} on your machine and sends it this resource's context to find the root cause`
+      }
       position="left"
     >
       <button
@@ -119,12 +128,15 @@ export function GlobalDiagnoseButton() {
   const { runningKeys } = useDiagnoseLayout();
   if (!d.available) return null;
   const runningCount = runningKeys.size;
+  const agentSuffix = d.hosted
+    ? `powered by ${d.agentLabel}`
+    : `runs your own ${d.agentLabel} locally`;
   return (
     <Tooltip
       content={
         runningCount > 0
-          ? `${runningCount} investigation${runningCount > 1 ? "s" : ""} running — runs your own ${d.agentLabel} locally`
-          : `AI investigations — runs your own ${d.agentLabel} locally`
+          ? `${runningCount} investigation${runningCount > 1 ? "s" : ""} running — ${agentSuffix}`
+          : `AI investigations — ${agentSuffix}`
       }
       position="bottom"
     >

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/settings/SettingsDialog.tsx

@@ -517,8 +517,9 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
               <div className="mb-4">
                 <h3 className="text-base font-semibold text-theme-text-primary">AI diagnose</h3>
                 <p className="mt-0.5 text-xs text-theme-text-tertiary">
-                  Investigate incidents with an AI agent that runs on your own machine — reading
-                  logs, events, and topology to explain what's wrong. No Radar cloud, no API key.
+                  {diag.hosted
+                    ? `Investigate incidents with ${diag.agentLabel} — reading logs, events, and topology to explain what's wrong.`
+                    : "Investigate incidents with an AI agent that runs on your own machine — reading logs, events, and topology to explain what's wrong. No Radar cloud, no API key."}
                 </p>
               </div>
               {aiAvailable ? (
@@ -526,6 +527,8 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
                   <AISettingsSection
                     available={diag.available}
                     agents={diag.agents}
+                    hosted={diag.hosted}
+                    agentLabel={diag.agentLabel}
                     draft={aiDraft}
                     onChange={(patch) => {
                       setAiDraft((d) => ({ ...d, ...patch }))
@@ -533,21 +536,23 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
                     }}
                     onHistoryCleared={diag.refreshRuns}
                   />
-                  <div className="flex items-center justify-end gap-3">
-                    {aiSaved && !aiDirty && (
-                      <span className="flex items-center gap-1 text-xs text-green-600 dark:text-green-400/80">
-                        <Check className="w-3 h-3" />
-                        Saved
-                      </span>
-                    )}
-                    <button
-                      onClick={saveAi}
-                      disabled={!aiDirty}
-                      className="px-4 py-1.5 text-sm font-medium btn-brand rounded-md disabled:opacity-50 disabled:pointer-events-none"
-                    >
-                      Save
-                    </button>
-                  </div>
+                  {!diag.hosted && (
+                    <div className="flex items-center justify-end gap-3">
+                      {aiSaved && !aiDirty && (
+                        <span className="flex items-center gap-1 text-xs text-green-600 dark:text-green-400/80">
+                          <Check className="w-3 h-3" />
+                          Saved
+                        </span>
+                      )}
+                      <button
+                        onClick={saveAi}
+                        disabled={!aiDirty}
+                        className="px-4 py-1.5 text-sm font-medium btn-brand rounded-md disabled:opacity-50 disabled:pointer-events-none"
+                      >
+                        Save
+                      </button>
+                    </div>
+                  )}
                 </div>
               ) : (
                 <AIUnavailableNotice />

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>
   )
 }