@skyhook-io/radar-app 1.8.3 → 1.8.6

package/src/components/helm/HelmView.tsx

@@ -1,13 +1,13 @@
 import { useState, useMemo, useRef, useEffect, useCallback, forwardRef } from 'react'
-import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
-import { Package, Search, RefreshCw, ArrowUpCircle, LayoutGrid, List, Shield, GitBranch, ChevronRight, RotateCcw, Clock } from 'lucide-react'
-import { PaneLoader, PageHeader } from '@skyhook-io/k8s-ui'
+import { Package, Search, ArrowUpCircle, LayoutGrid, List, Shield, GitBranch, ChevronRight, RotateCcw, Clock } from 'lucide-react'
+import { PaneLoader, PageHeader, SortableTh, FreshnessControl, type SortDir } from '@skyhook-io/k8s-ui'
+import { useConnection } from '../../context/ConnectionContext'
 import { clsx } from 'clsx'
 import { useHelmReleases, useHelmBatchUpgradeInfo, isForbiddenError } from '../../api/client'
 import type { HelmOperation, HelmRelease, SelectedHelmRelease, UpgradeInfo, ChartSource } from '../../types'
 import { getStatusColor, formatAge, isHelmReleaseActionable } from './helm-utils'
-import { SEVERITY_BADGE } from '../../utils/badge-colors'
+import { SEVERITY_BADGE, SEVERITY_DOT, SEVERITY_TEXT } from '../../utils/badge-colors'
 import { Tooltip } from '../ui/Tooltip'
 import { ChartBrowser } from './ChartBrowser'
 import { InstallWizard } from './InstallWizard'
@@ -25,7 +25,7 @@ export function HelmView({ namespaces, selectedRelease, onReleaseClick }: HelmVi
   const [searchTerm, setSearchTerm] = useState('')
   const [selectedChart, setSelectedChart] = useState<{ repo: string; chart: string; version: string; source: ChartSource } | null>(null)
 
-  const { data: releases, isLoading, error: releasesError, refetch: refetchReleases } = useHelmReleases(namespaces)
+  const { data: releases, isLoading, error: releasesError, dataUpdatedAt: releasesUpdatedAt, isFetching: releasesFetching, refetch: refetchReleases } = useHelmReleases(namespaces)
   const isForbidden = isForbiddenError(releasesError)
   const releasesErrorMessage = releasesError instanceof Error ? releasesError.message : 'Failed to load Helm releases'
 
@@ -36,24 +36,38 @@ export function HelmView({ namespaces, selectedRelease, onReleaseClick }: HelmVi
   )
   const upgradeErrorMessage = upgradeError instanceof Error ? upgradeError.message : 'Upgrade checks failed'
 
-  const [handleRefresh, isRefreshAnimating] = useRefreshAnimation(async () => {
-    await Promise.all([refetchReleases(), refetchUpgradeInfo()])
-  })
-
-  const isFullyLoaded = !isLoading && !upgradeLoading
+  const { connection } = useConnection()
+  const refetchAll = () => Promise.all([refetchReleases(), refetchUpgradeInfo()])
 
   // Filter releases by search term
+  // Resources-table cycle: asc → desc → off (null restores the server's order).
+  const [sort, setSort] = useState<{ key: HelmSortKey; dir: SortDir } | null>(null)
+  const onSort = useCallback(
+    (key: HelmSortKey) =>
+      setSort((prev) => {
+        if (!prev || prev.key !== key) return { key, dir: 'asc' }
+        if (prev.dir === 'asc') return { key, dir: 'desc' }
+        return null
+      }),
+    [],
+  )
+
   const filteredReleases = useMemo(() => {
     if (!releases) return []
-    if (!searchTerm) return releases
-    const term = searchTerm.toLowerCase()
-    return releases.filter(
-      (r) =>
-        r.name.toLowerCase().includes(term) ||
-        r.namespace.toLowerCase().includes(term) ||
-        r.chart.toLowerCase().includes(term)
-    )
-  }, [releases, searchTerm])
+    const term = searchTerm.trim().toLowerCase()
+    const filtered = term
+      ? releases.filter(
+          (r) =>
+            r.name.toLowerCase().includes(term) ||
+            r.namespace.toLowerCase().includes(term) ||
+            r.chart.toLowerCase().includes(term)
+        )
+      : releases
+
+    if (!sort) return filtered
+    const factor = sort.dir === 'asc' ? 1 : -1
+    return [...filtered].sort((a, b) => compareReleases(a, b, sort.key) * factor)
+  }, [releases, searchTerm, sort])
 
   // Keyboard navigation state
   const searchInputRef = useRef<HTMLInputElement>(null)
@@ -62,8 +76,9 @@ export function HelmView({ namespaces, selectedRelease, onReleaseClick }: HelmVi
   const filteredReleasesCountRef = useRef(0)
   filteredReleasesCountRef.current = filteredReleases.length
 
-  // Reset highlight when search changes
-  useEffect(() => { setHighlightedIndex(-1) }, [searchTerm])
+  // Reset highlight when the visible order changes (search or sort) — otherwise
+  // the index would point at whatever release shifted into that row.
+  useEffect(() => { setHighlightedIndex(-1) }, [searchTerm, sort])
 
   // Scroll highlighted row into view
   useEffect(() => {
@@ -173,6 +188,17 @@ export function HelmView({ namespaces, selectedRelease, onReleaseClick }: HelmVi
             icon={Package}
             title="Helm"
             description="Installed Helm releases and the chart catalog for this cluster."
+            actions={
+              activeTab === 'releases' ? (
+                <FreshnessControl
+                  mode="snapshot"
+                  dataUpdatedAt={releasesUpdatedAt}
+                  isFetching={releasesFetching || upgradeLoading}
+                  onRefresh={refetchAll}
+                  connectionState={connection.state}
+                />
+              ) : undefined
+            }
           />
         </div>
         {/* Tab bar */}
@@ -212,9 +238,6 @@ export function HelmView({ namespaces, selectedRelease, onReleaseClick }: HelmVi
           <>
             {/* Releases Toolbar */}
             <div className="flex items-center gap-4 px-4 py-3 border-b border-theme-border bg-theme-surface/50 shrink-0">
-              {!isFullyLoaded && (
-                <RefreshCw className="w-3.5 h-3.5 animate-spin text-theme-text-tertiary shrink-0" />
-              )}
               <div className="flex-1 relative">
                 <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
                 <input
@@ -226,15 +249,6 @@ export function HelmView({ namespaces, selectedRelease, onReleaseClick }: HelmVi
                   className="w-full max-w-md pl-10 pr-4 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-blue-500"
                 />
               </div>
-              <Tooltip content="Refresh">
-              <button
-                onClick={handleRefresh}
-                disabled={isRefreshAnimating}
-                className="p-2 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-lg disabled:opacity-50 disabled:pointer-events-none"
-              >
-                <RefreshCw className={clsx('w-4 h-4', isRefreshAnimating && 'animate-spin')} />
-              </button>
-              </Tooltip>
             </div>
 
             {/* Releases Table */}
@@ -289,29 +303,15 @@ export function HelmView({ namespaces, selectedRelease, onReleaseClick }: HelmVi
                 </div>
               ) : (
                 <table className="w-full table-fixed">
-                  <thead className="bg-theme-surface sticky top-0 z-10">
+                  <thead className="bg-theme-base sticky top-0 z-10">
                     <tr>
-                      <th className="text-left px-4 py-3 text-xs font-medium text-theme-text-secondary uppercase tracking-wide w-[28%]">
-                        Name
-                      </th>
-                      <th className="text-left px-4 py-3 text-xs font-medium text-theme-text-secondary uppercase tracking-wide w-[18%]">
-                        Namespace
-                      </th>
-                      <th className="text-left px-4 py-3 text-xs font-medium text-theme-text-secondary uppercase tracking-wide w-[22%]">
-                        Chart
-                      </th>
-                      <th className="text-left px-4 py-3 text-xs font-medium text-theme-text-secondary uppercase tracking-wide w-24 hidden xl:table-cell">
-                        App Version
-                      </th>
-                      <th className="text-left px-4 py-3 text-xs font-medium text-theme-text-secondary uppercase tracking-wide w-40">
-                        Status
-                      </th>
-                      <th className="text-left px-4 py-3 text-xs font-medium text-theme-text-secondary uppercase tracking-wide w-16">
-                        Rev
-                      </th>
-                      <th className="text-left px-4 py-3 text-xs font-medium text-theme-text-secondary uppercase tracking-wide w-24">
-                        Updated
-                      </th>
+                      <SortableTh label="Name" sortKey="name" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-[28%]" />
+                      <SortableTh label="Namespace" sortKey="namespace" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-[18%]" />
+                      <SortableTh label="Chart" sortKey="chart" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-[22%]" />
+                      <SortableTh label="App Version" sortKey="appVersion" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-24 hidden xl:table-cell" />
+                      <SortableTh label="Status" sortKey="status" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-40" />
+                      <SortableTh label="Rev" sortKey="revision" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-16" />
+                      <SortableTh label="Updated" sortKey="updated" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-24" />
                     </tr>
                   </thead>
                   <tbody className="table-divide-subtle">
@@ -360,6 +360,23 @@ function releaseIdentityKey(release: Pick<HelmRelease, 'namespace' | 'name' | 's
   return `${release.storageNamespace || release.namespace}/${release.name}`
 }
 
+type HelmSortKey = 'name' | 'namespace' | 'chart' | 'appVersion' | 'status' | 'revision' | 'updated'
+
+function compareReleases(a: HelmRelease, b: HelmRelease, key: HelmSortKey): number {
+  let cmp: number
+  switch (key) {
+    case 'revision':
+      cmp = a.revision - b.revision
+      break
+    case 'updated':
+      cmp = (Date.parse(a.updated) || 0) - (Date.parse(b.updated) || 0)
+      break
+    default:
+      cmp = String(a[key] ?? '').localeCompare(String(b[key] ?? ''))
+  }
+  return cmp || a.name.localeCompare(b.name)
+}
+
 interface ReleaseRowProps {
   release: HelmRelease
   upgradeInfo?: UpgradeInfo
@@ -392,7 +409,7 @@ function getActionableTooltip(issue: string | undefined, summary: string | undef
     <div className="max-w-xs">
       <div className={clsx(
         'font-medium',
-        health === 'unhealthy' ? 'text-red-400' : 'text-yellow-400'
+        health === 'unhealthy' ? SEVERITY_TEXT.error : SEVERITY_TEXT.warning
       )}>
         {summary || issue || health}
       </div>
@@ -483,10 +500,10 @@ const ReleaseRow = forwardRef<HTMLTableRowElement, ReleaseRowProps>(
   const getHealthBadge = () => {
     if (!release.resourceHealth || release.resourceHealth === 'unknown') return null
 
-    const healthStyles: Record<string, { bg: string; text: string; dot: string }> = {
-      healthy: { bg: 'bg-green-500/10', text: 'text-green-400', dot: 'bg-green-500' },
-      degraded: { bg: 'bg-yellow-500/10', text: 'text-yellow-400', dot: 'bg-yellow-500' },
-      unhealthy: { bg: 'bg-red-500/10', text: 'text-red-400', dot: 'bg-red-500' },
+    const healthStyles: Record<string, { badge: string; dot: string }> = {
+      healthy: { badge: SEVERITY_BADGE.success, dot: SEVERITY_DOT.success },
+      degraded: { badge: SEVERITY_BADGE.warning, dot: SEVERITY_DOT.warning },
+      unhealthy: { badge: SEVERITY_BADGE.error, dot: SEVERITY_DOT.error },
     }
 
     const style = healthStyles[release.resourceHealth] || healthStyles.healthy
@@ -495,8 +512,8 @@ const ReleaseRow = forwardRef<HTMLTableRowElement, ReleaseRowProps>(
     return (
       <Tooltip content={tooltipContent}>
         <span className={clsx(
-          'flex items-center gap-1 px-1.5 py-0.5 text-xs font-medium rounded shrink-0',
-          style.bg, style.text
+          'badge-sm shrink-0',
+          style.badge
         )}>
           <span className={clsx('w-1.5 h-1.5 rounded-full', style.dot)} />
           {release.healthIssue || (release.resourceHealth !== 'healthy' ? release.healthSummary : null)}

package/src/components/helm/ManifestDiffViewer.tsx

@@ -69,7 +69,7 @@ export function ManifestDiffViewer({ diff, isLoading, revision1, revision2, onCl
   )
 }
 
-function hasDiffBodyChange(diff: string): boolean {
+export function hasDiffBodyChange(diff: string): boolean {
   return diff.split('\n').some((line) => {
     if (!line || line.startsWith('---') || line.startsWith('+++') || line.startsWith('@@')) {
       return false
@@ -78,7 +78,7 @@ function hasDiffBodyChange(diff: string): boolean {
   })
 }
 
-function DiffLine({ line }: { line: string }) {
+export function DiffLine({ line }: { line: string }) {
   const isAddition = line.startsWith('+') && !line.startsWith('+++')
   const isRemoval = line.startsWith('-') && !line.startsWith('---')
   const isHeader = line.startsWith('---') || line.startsWith('+++') || line.startsWith('@@')
@@ -87,8 +87,8 @@ function DiffLine({ line }: { line: string }) {
     <div
       className={clsx(
         'whitespace-pre',
-        isAddition && 'bg-green-500/10 text-green-400',
-        isRemoval && 'bg-red-500/10 text-red-400',
+        isAddition && 'bg-green-500/10 text-green-700 dark:text-green-400',
+        isRemoval && 'bg-red-500/10 text-red-700 dark:text-red-400',
         isHeader && 'text-theme-text-tertiary font-bold',
         !isAddition && !isRemoval && !isHeader && 'text-theme-text-secondary'
       )}

package/src/components/home/ClusterHealthCard.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, type ReactNode } from 'react'
 import type { DashboardResponse, DashboardMetrics, DashboardCRDCount } from '../../api/client'
 import { HealthRing } from './HealthRing'
 import {
@@ -30,6 +30,9 @@ interface ClusterHealthCardProps {
   onNavigateToView: () => void
   onWarningEventsClick?: () => void
   onIssuesClick?: () => void
+  // Freshness/refresh control for the dashboard poll — rendered under the
+  // cluster metadata so the overview carries a freshness signal without a band.
+  freshness?: ReactNode
 }
 
 function getMetricsInstallHint(platform: string): string {
@@ -121,6 +124,7 @@ export function ClusterHealthCard({
   onNavigateToView,
   onWarningEventsClick,
   onIssuesClick,
+  freshness,
 }: ClusterHealthCardProps) {
   void _topCRDs // Reserved for future CRD display
 
@@ -254,6 +258,7 @@ export function ClusterHealthCard({
                 </Tooltip>
               )}
             </div>
+            {freshness && <div className="mt-2">{freshness}</div>}
             {nodeVersionSkew && (
               <Tooltip
                 content={

package/src/components/home/HomeView.tsx

@@ -1,5 +1,6 @@
 import { useMemo, type ReactNode } from 'react'
 import { useDashboard, useDashboardCRDs, useDashboardHelm, useIssues, type IssuesResponse } from '../../api/client'
+import { useConnection } from '../../context/ConnectionContext'
 import type { ExtendedMainView, Topology, SelectedResource } from '../../types'
 import { TopologyPreview } from './TopologyPreview'
 import { HelmSummary } from './HelmSummary'
@@ -11,6 +12,7 @@ import { CostCard } from './CostCard'
 import { GitOpsControllersCard } from './GitOpsControllersCard'
 import {
   AuditCard,
+  FreshnessControl,
   PaneLoader,
   StatusDot,
   categoryLabel,
@@ -39,7 +41,8 @@ interface HomeViewProps {
 }
 
 export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToResourceKind, onNavigateToResource, onNavigateToCerts }: HomeViewProps) {
-  const { data, isLoading, error } = useDashboard(namespaces)
+  const { data, isLoading, error, dataUpdatedAt, refetch } = useDashboard(namespaces)
+  const { connection } = useConnection()
   const { data: issuesData, isLoading: issuesLoading, isFetching: issuesFetching, error: issuesError } = useIssues(namespaces)
   const issues = issuesData?.issues ?? []
   const issueCount = issuesData?.total_matched ?? issuesData?.total ?? issues.length
@@ -108,6 +111,14 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
         )}
         {/* Row 1: Cluster Health Card (combined health + resource counts) */}
         <ClusterHealthCard
+          freshness={
+            <FreshnessControl
+              mode="auto"
+              dataUpdatedAt={dataUpdatedAt}
+              onRefresh={() => refetch()}
+              connectionState={connection.state}
+            />
+          }
           health={data.health}
           counts={data.resourceCounts}
           cluster={data.cluster}
@@ -348,11 +359,8 @@ function ProblemsPanel({
               <div className="divide-y divide-theme-border">
                 {issues.map((issue) => {
                   const ref = subjectRef(issue)
-                  const age = issue.first_seen
-                    ? issue.issue_timing === 'started_at_resource_creation'
-                      ? 'since deploy'
-                      : formatCompactAge(issue.first_seen)
-                    : ''
+                  const age = issue.first_seen ? formatCompactAge(issue.first_seen) : ''
+                  const startedAtDeploy = issue.issue_timing === 'started_at_resource_creation'
 
                   return (
                     <button
@@ -370,7 +378,12 @@ function ProblemsPanel({
                         <div className="flex items-center gap-1.5">
                           <span className="text-[10px] text-theme-text-tertiary bg-theme-elevated px-1 py-0.5 rounded">{issue.kind}</span>
                           <span className="text-xs text-theme-text-primary truncate font-medium">{issue.name}</span>
-                          {age && <span className="text-[10px] text-theme-text-tertiary ml-auto shrink-0">{age}</span>}
+                          {(age || startedAtDeploy) && (
+                            <span className="ml-auto flex shrink-0 items-center gap-1">
+                              {age && <span className="text-[10px] text-theme-text-tertiary tabular-nums">{age}</span>}
+                              {startedAtDeploy && <span className="badge-sm text-[10px] text-theme-text-secondary">since deploy</span>}
+                            </span>
+                          )}
                         </div>
                         <div className="flex items-center gap-1.5 mt-0.5">
                           <span className="text-[11px] text-theme-text-secondary truncate">{categoryLabel(issue.category)}</span>

package/src/components/home/mcpToolCatalog.ts

@@ -152,7 +152,7 @@ export const MCP_TOOL_CATALOG: MCPToolInfo[] = [
   },
   {
     name: 'get_helm_release',
-    desc: 'Detailed Helm release info with owned resources, health, Flux ownership, current lastOperation, hooks, and failed/running hook diagnostics with live Job/Pod/Event/redacted-log evidence when available.',
+    desc: 'Detailed Helm release info with owned resources, health, Flux ownership, current lastOperation, operationInsight, hooks, and failed/running hook diagnostics with live Job/Pod/Event/redacted-log evidence when available.',
     params: [
       { arg: 'namespace', required: true, desc: 'Helm storage namespace; use storageNamespace from list_helm_releases when present' },
       { arg: 'name', required: true, desc: 'release name' },

package/src/components/issues/IssuesPane.tsx

@@ -1,11 +1,13 @@
 import { useMemo, useState } from 'react'
 import { useIssues } from '../../api/client'
+import { useConnection } from '../../context/ConnectionContext'
 import type { SelectedResource } from '../../types'
 import {
   IssuesView,
   PaneLoader,
   PageHeader,
   SummaryTile,
+  FreshnessControl,
   ISSUE_SEVERITIES,
   ISSUE_SEVERITY_LABEL,
   type IssueResourceRef,
@@ -30,7 +32,8 @@ interface IssuesPaneProps {
 // the header status tiles (clickable → filter), matching the Applications /
 // GitOps header-tile pattern rather than Hub's fleet facet sidebar.
 export function IssuesPane({ namespaces, onNavigateToResource }: IssuesPaneProps) {
-  const { data, isLoading, error } = useIssues(namespaces)
+  const { data, isLoading, error, dataUpdatedAt, refetch } = useIssues(namespaces)
+  const { connection } = useConnection()
   const [severityFilter, setSeverityFilter] = useState<Set<IssueSeverity>>(new Set())
 
   const allIssues = useMemo(() => data?.issues ?? [], [data])
@@ -70,23 +73,31 @@ export function IssuesPane({ namespaces, onNavigateToResource }: IssuesPaneProps
         title="Issues"
         description="Live cluster problems — crashes, scheduling failures, bad references — grouped by the resource they affect."
         actions={
-          allIssues.length > 0 ? (
-            <>
-              <SummaryTile label={allIssues.length === 1 ? 'issue' : 'issues'} value={allIssues.length} />
-              {ISSUE_SEVERITIES.map((s) =>
-                totals[s] > 0 || severityFilter.has(s) ? (
-                  <SummaryTile
-                    key={s}
-                    label={ISSUE_SEVERITY_LABEL[s]}
-                    value={totals[s]}
-                    tone={SEVERITY_TONE[s]}
-                    active={severityFilter.has(s)}
-                    onClick={() => toggleSeverity(s)}
-                  />
-                ) : null,
-              )}
-            </>
-          ) : undefined
+          <>
+            <FreshnessControl
+              mode="auto"
+              dataUpdatedAt={dataUpdatedAt}
+              onRefresh={() => refetch()}
+              connectionState={connection.state}
+            />
+            {allIssues.length > 0 && (
+              <>
+                <SummaryTile label={allIssues.length === 1 ? 'issue' : 'issues'} value={allIssues.length} />
+                {ISSUE_SEVERITIES.map((s) =>
+                  totals[s] > 0 || severityFilter.has(s) ? (
+                    <SummaryTile
+                      key={s}
+                      label={ISSUE_SEVERITY_LABEL[s]}
+                      value={totals[s]}
+                      tone={SEVERITY_TONE[s]}
+                      active={severityFilter.has(s)}
+                      onClick={() => toggleSeverity(s)}
+                    />
+                  ) : null,
+                )}
+              </>
+            )}
+          </>
         }
       />
 

package/src/components/resources/ResourceDetailDrawer.tsx

@@ -14,8 +14,10 @@ interface ResourceDetailDrawerProps {
   expanded?: boolean
   /** Called when user clicks collapse in expanded mode */
   onCollapse?: () => void
-  /** Called when user clicks expand button */
-  onExpand?: (resource: SelectedResource) => void
+  /** Called when user clicks expand button (opts.yaml = expanding from YAML view) */
+  onExpand?: (resource: SelectedResource, opts?: { yaml?: boolean }) => void
+  /** Hide the collapse-to-drawer control (mobile: no drawer to collapse to). Default true. */
+  canCollapseToDrawer?: boolean
   /** Navigate to another resource within expanded WorkloadView */
   onNavigateToResource?: (resource: SelectedResource) => void
   /** Top offset for the drawer (px). Defaults to Radar's 49px header height;
@@ -26,16 +28,19 @@ interface ResourceDetailDrawerProps {
 export function ResourceDetailDrawer(props: ResourceDetailDrawerProps) {
   return (
     <BaseResourceDetailDrawer {...props}>
-      {({ resource, expanded, initialTab, onClose, onExpand, onBack, onNavigateToResource, onCollapseToDrawer }) => (
+      {({ resource, expanded, active, initialTab, onClose, onExpand, onExpandIntent, onCancelExpandIntent, onBack, onNavigateToResource, onCollapseToDrawer }) => (
         <WorkloadView
           kind={resource.kind}
           namespace={resource.namespace}
           name={resource.name}
           group={resource.group}
           expanded={expanded}
+          active={active}
           initialTab={initialTab}
           onClose={onClose}
           onExpand={onExpand}
+          onExpandIntent={onExpandIntent}
+          onCancelExpandIntent={onCancelExpandIntent}
           onBack={onBack ?? (() => {})}
           onNavigateToResource={onNavigateToResource}
           onCollapseToDrawer={onCollapseToDrawer}

package/src/components/resources/ResourcesView.tsx

@@ -6,6 +6,7 @@ import { isBadgeWorthy } from '../../utils/auditBadges'
 import type { AuditBadgeMessage } from '@skyhook-io/k8s-ui'
 import { apiUrl, getAuthHeaders, getCredentialsMode, getBasename } from '../../api/config'
 import { useAPIResources } from '../../api/apiResources'
+import { useConnection } from '../../context/ConnectionContext'
 import { initNavigationMap } from '@skyhook-io/k8s-ui'
 import { usePinnedKinds } from '../../hooks/useFavorites'
 import { useOpenLogs, useOpenWorkloadLogs } from '../dock'
@@ -62,6 +63,7 @@ function resourceCountKey(kind: NonNullable<SelectedKindInfo>): string {
 export function ResourcesView({ namespaces, selectedResource, onResourceClick, onResourceClickYaml, onKindChange, onClearNamespaces }: ResourcesViewProps) {
   const location = useLocation()
   const navigate = useNavigate()
+  const { connection } = useConnection()
 
   const { data: capabilities } = useCapabilities()
   const namespaceForCapabilities = namespaces.length === 1 ? namespaces[0] : undefined
@@ -328,6 +330,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       resourceReasons={countsData?.reasons}
       resourceUnavailable={countsData?.unavailable}
       selectedKindQuery={selectedKindQueryResult}
+      connectionState={connection.state}
       largeListGuard={largeListGuard}
       onSelectedKindChange={setSelectedKind}
       topPodMetrics={topPodMetrics}

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

@@ -1,6 +1,6 @@
 import { NodeRenderer as BaseNodeRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/NodeRenderer'
 import { useNavigate } from 'react-router-dom'
-import { useNodeMetrics, useNodeMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus } from '../../../api/client'
+import { getVisibleLiveMetrics, isLiveMetricsUnavailable, shouldFetchLiveMetrics, useNodeMetrics, useNodeMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus } from '../../../api/client'
 import { serializeColumnFilters } from '../resource-utils'
 
 interface NodeRendererProps {
@@ -13,8 +13,13 @@ export function NodeRenderer({ data, relationships }: NodeRendererProps) {
   const nodeName = data.metadata?.name
 
   // Fetch node metrics
-  const { data: metrics } = useNodeMetrics(nodeName)
-  const { data: metricsHistory } = useNodeMetricsHistory(nodeName)
+  const metricsHistoryQuery = useNodeMetricsHistory(nodeName)
+  const { data: metricsHistory } = metricsHistoryQuery
+  const historyMetricsUnavailable = metricsHistory?.metricsUnavailable === true
+  const liveMetricsEnabled = shouldFetchLiveMetrics(metricsHistoryQuery.isFetched || metricsHistoryQuery.isError, historyMetricsUnavailable)
+  const { data: metrics } = useNodeMetrics(nodeName, { enabled: liveMetricsEnabled })
+  const metricsUnavailable = historyMetricsUnavailable || isLiveMetricsUnavailable(liveMetricsEnabled, metrics)
+  const visibleMetrics = getVisibleLiveMetrics(liveMetricsEnabled, metricsUnavailable, metrics)
 
   // Determine whether to hide metrics-server section (Prometheus has data)
   const { data: prometheusStatus } = usePrometheusStatus()
@@ -36,8 +41,9 @@ export function NodeRenderer({ data, relationships }: NodeRendererProps) {
         params.set('filters', serializeColumnFilters({ node: [nodeName] }))
         navigate(`/resources/pods?${params.toString()}`)
       } : undefined}
-      metrics={metrics}
+      metrics={visibleMetrics}
       metricsHistory={metricsHistory}
+      metricsUnavailable={metricsUnavailable}
       hideMetricsServer={hideMetricsServer}
     />
   )

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

@@ -3,7 +3,7 @@ import type { CopyHandler } from '@skyhook-io/k8s-ui/components/ui/drawer-compon
 import type { ResolvedEnvFrom } from '@skyhook-io/k8s-ui'
 import { useOpenTerminal, useOpenLogs } from '../../dock'
 import { useNamespacedCapabilities, useIsLocalDeployment } from '../../../contexts/CapabilitiesContext'
-import { usePodMetrics, usePodMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus } from '../../../api/client'
+import { getVisibleLiveMetrics, isLiveMetricsUnavailable, shouldFetchLiveMetrics, usePodMetrics, usePodMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus } from '../../../api/client'
 import { useRBACSubject } from '../../../api/rbac'
 import { PortForwardInlineButton } from '../../portforward/PortForwardButton'
 import { ImageFilesystemModal } from '../ImageFilesystemModal'
@@ -34,8 +34,13 @@ export function PodRenderer({ data, onCopy, copied, onNavigate, onOpenLogs, reso
   const showPortForward = canPortForward || !isLocal
 
   // Metrics
-  const { data: metrics } = usePodMetrics(namespace, podName)
-  const { data: metricsHistory } = usePodMetricsHistory(namespace, podName)
+  const metricsHistoryQuery = usePodMetricsHistory(namespace, podName)
+  const { data: metricsHistory } = metricsHistoryQuery
+  const historyMetricsUnavailable = metricsHistory?.metricsUnavailable === true
+  const liveMetricsEnabled = shouldFetchLiveMetrics(metricsHistoryQuery.isFetched || metricsHistoryQuery.isError, historyMetricsUnavailable)
+  const { data: metrics } = usePodMetrics(namespace, podName, { enabled: liveMetricsEnabled })
+  const metricsUnavailable = historyMetricsUnavailable || isLiveMetricsUnavailable(liveMetricsEnabled, metrics)
+  const visibleMetrics = getVisibleLiveMetrics(liveMetricsEnabled, metricsUnavailable, metrics)
 
   // Hide metrics-server section when Prometheus has CPU data
   const { data: prometheusStatus } = usePrometheusStatus()
@@ -82,8 +87,9 @@ export function PodRenderer({ data, onCopy, copied, onNavigate, onOpenLogs, reso
           disabled={disabled}
         />
       )}
-      metrics={metrics}
+      metrics={visibleMetrics}
       metricsHistory={metricsHistory}
+      metricsUnavailable={metricsUnavailable}
       hideMetricsServer={hideMetricsServer}
       renderImageBrowser={({ image, namespace: ns, podName: pod, pullSecrets, onClose, onSwitchToPodFiles }) => (
         <ImageFilesystemModal

package/src/components/timeline/TimelineView.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useRef } from 'react'
-import { Network } from 'lucide-react'
+import { Network, AlertTriangle, RefreshCw } from 'lucide-react'
 import { TimelineList } from './TimelineList'
 import { TimelineSwimlanes } from './TimelineSwimlanes'
 import { useChanges, useTopology } from '../../api/client'
@@ -52,7 +52,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
 
   // Fetch all activity - zoom controls what's visible in the UI
   // Only fetch heavy 10k dataset for swimlanes; list view fetches its own 500
-  const { data: activity, isLoading } = useChanges({
+  const { data: activity, isLoading, isError, refetch } = useChanges({
     namespaces,
     timeRange: 'all',
     includeK8sEvents: true,
@@ -115,6 +115,30 @@ 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) {
+      return (
+        <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">
+            <AlertTriangle className="w-10 h-10 text-amber-400/70" />
+            <p className="text-base">Failed to load timeline data</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"
+            >
+              <RefreshCw className="w-3.5 h-3.5" />
+              Try again
+            </button>
+          </div>
+        </div>
+      )
+    }
+
     return (
       <TimelineSwimlanes
         events={events}