@skyhook-io/radar-app 1.12.3 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.12.3",
+  "version": "1.13.0",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",
@@ -35,7 +35,7 @@
     "diff": "^9.0.0",
     "monaco-editor": "0.55.1",
     "react-markdown": "^10.1.0",
-    "react-virtuoso": "^4.18.11",
+    "react-virtuoso": "^4.18.12",
     "remark-gfm": "^4.0.1",
     "shiki": "^4.4.2",
     "yaml": "^2.9.0"
@@ -69,8 +69,8 @@
     "eslint": "^10.8.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
-    "globals": "^17.9.0",
-    "lucide-react": "^1.33.0",
+    "globals": "^17.11.0",
+    "lucide-react": "^1.37.0",
     "postcss": "^8.5.26",
     "prettier": "^3.9.5",
     "react": "^19.2.8",
@@ -80,7 +80,7 @@
     "tailwindcss": "^4.3.3",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.67.0",
-    "vite": "^8.2.1"
+    "vite": "^8.2.2"
   },
   "sideEffects": [
     "*.css"

package/src/App.tsx

@@ -2507,6 +2507,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
         open={showSettings}
         initialSection={settingsSection}
         onClose={() => setShowSettings(false)}
+        onNavigateToResource={navigateToResourceList}
       />
 
       {/* Debug overlay — dev mode, standalone only. Embedded hosts (Radar Hub)

package/src/api/client.ts

@@ -882,24 +882,36 @@ export interface OpenCostNamespaceCost {
 
 export type CostUnavailableReason =
   | "no_prometheus"
+  | "no_cost_source"
   | "no_metrics"
   | "query_error"
   | "access_denied"
-  | "not_found";
+  | "not_found"
+  | "source_unavailable"
+  | "authentication_error"
+  | "configuration_mismatch"
+  | "deployment_configuration_error"
+  | "history_unsupported"
+  | "insufficient_history";
+
+export type CostDataSource = "prometheus" | "kubecost";
 
 export interface OpenCostSummary {
   available: boolean;
   reason?: CostUnavailableReason;
+  source?: CostDataSource;
+  dataThrough?: string;
   currency?: string;
   window?: string;
   totalHourlyCost?: number;
   totalStorageCost?: number;
   totalIdleCost?: number;
   clusterEfficiency?: number;
+  namespaceScope?: string[];
   namespaces?: OpenCostNamespaceCost[];
 }
 
-const noPrometheusFirstSeenAt = new Map<string, number>();
+const costDiscoveryFirstSeenAt = new Map<string, number>();
 
 function costRefetchInterval(
   defaultInterval: number | false = COST_REFRESH_INTERVAL_MS,
@@ -915,15 +927,18 @@ function costRefetchInterval(
   }) => {
     const data = query.state.data;
     const queryID = `${contextName ?? "unknown"}:${query.queryHash ?? JSON.stringify(query.queryKey ?? "opencost")}`;
-    if (data?.available === false && data.reason === "no_prometheus") {
+    if (
+      data?.available === false &&
+      (data.reason === "no_prometheus" || data.reason === "no_cost_source")
+    ) {
       const now = Date.now();
-      const firstSeenAt = noPrometheusFirstSeenAt.get(queryID) ?? now;
-      noPrometheusFirstSeenAt.set(queryID, firstSeenAt);
+      const firstSeenAt = costDiscoveryFirstSeenAt.get(queryID) ?? now;
+      costDiscoveryFirstSeenAt.set(queryID, firstSeenAt);
       return now - firstSeenAt < COST_DISCOVERY_GRACE_MS
         ? COST_DISCOVERY_RETRY_INTERVAL_MS
         : defaultInterval;
     }
-    noPrometheusFirstSeenAt.delete(queryID);
+    costDiscoveryFirstSeenAt.delete(queryID);
     return defaultInterval;
   };
 }
@@ -963,6 +978,9 @@ export interface OpenCostWorkloadCost {
 export interface OpenCostWorkloadResponse {
   available: boolean;
   reason?: CostUnavailableReason;
+  source?: CostDataSource;
+  window?: string;
+  dataThrough?: string;
   currency?: string;
   namespace: string;
   workloads: OpenCostWorkloadCost[];
@@ -991,6 +1009,9 @@ export function useOpenCostWorkloads(
 export interface OpenCostWorkloadDetailResponse {
   available: boolean;
   reason?: CostUnavailableReason;
+  source?: CostDataSource;
+  window?: string;
+  dataThrough?: string;
   currency?: string;
   namespace: string;
   kind: string;
@@ -1036,8 +1057,12 @@ export interface OpenCostTrendSeries {
 export interface OpenCostTrendResponse {
   available: boolean;
   reason?: CostUnavailableReason;
+  source?: CostDataSource;
   currency?: string;
   range: string;
+  windowStart?: number;
+  windowEnd?: number;
+  dataThrough?: string;
   series?: OpenCostTrendSeries[];
 }
 
@@ -1058,6 +1083,7 @@ export function useOpenCostTrend(range_: CostTimeRange = "24h") {
 export interface OpenCostWorkloadTrendResponse {
   available: boolean;
   reason?: CostUnavailableReason;
+  source?: CostDataSource;
   currency?: string;
   namespace: string;
   kind: string;
@@ -1131,6 +1157,9 @@ export interface OpenCostApplicationWorkloadCost extends OpenCostApplicationWork
 export interface OpenCostApplicationCostResponse {
   available: boolean;
   reason?: CostUnavailableReason;
+  source?: CostDataSource;
+  window?: string;
+  dataThrough?: string;
   currency?: string;
   partial?: boolean;
   totals: OpenCostApplicationCostTotals;
@@ -1146,6 +1175,7 @@ export interface OpenCostApplicationCostTrendSeries extends OpenCostApplicationW
 export interface OpenCostApplicationCostTrendResponse {
   available: boolean;
   reason?: CostUnavailableReason;
+  source?: CostDataSource;
   currency?: string;
   range: string;
   partial?: boolean;
@@ -1238,6 +1268,8 @@ export interface OpenCostNodeCost {
 export interface OpenCostNodeResponse {
   available: boolean;
   reason?: CostUnavailableReason;
+  source?: CostDataSource;
+  dataThrough?: string;
   currency?: string;
   nodes?: OpenCostNodeCost[];
 }

package/src/components/cost/ApplicationCostTab.test.ts

@@ -53,6 +53,48 @@ describe('getApplicationCostState', () => {
     ).toBe('partial_missing_history')
   })
 
+  it('keeps Kubecost application totals visible when history is unsupported', () => {
+    const current: OpenCostApplicationCostResponse = {
+      available: true,
+      source: 'kubecost',
+      currency: 'USD',
+      totals: {
+        hourlyCost: 0.4, cpuCost: 0.25, memoryCost: 0.15, replicas: 3,
+        cpuUsageAvailable: true, memoryUsageAvailable: true,
+        cpuAllocationUse: 40, memoryAllocationUse: 60,
+      },
+      coverage: { total: 1, included: 1 },
+      workloads: [],
+    }
+    const trend: OpenCostApplicationCostTrendResponse = {
+      available: false,
+      source: 'kubecost',
+      reason: 'history_unsupported',
+      currency: 'USD',
+      range: '24h',
+      coverage: { total: 1, included: 0 },
+    }
+
+    expect(getApplicationCostState(current, trend, {})).toBe('partial_missing_history')
+  })
+
+  it('does not let unsupported history mask current loading or errors', () => {
+    const trend: OpenCostApplicationCostTrendResponse = {
+      available: false,
+      source: 'kubecost',
+      reason: 'history_unsupported',
+      currency: 'USD',
+      range: '24h',
+      coverage: { total: 1, included: 0 },
+    }
+
+    expect(getApplicationCostState(undefined, trend, { currentLoading: true })).toBe('loading')
+    expect(getApplicationCostState(undefined, trend, { currentError: true })).toBe('load_error')
+    expect(
+      getApplicationCostState(undefined, trend, { currentError: new ApiError('denied', 403) }),
+    ).toBe('access_denied')
+  })
+
   it('uses historical data when current app metrics are absent but history exists', () => {
     const current: OpenCostApplicationCostResponse = {
       available: false,
@@ -206,5 +248,8 @@ describe('getApplicationCostState', () => {
       }),
     ).toBe('access_denied')
     expect(getApplicationCostState(current, undefined, { trendError: true })).toBe('access_denied')
+
+    current.reason = 'configuration_mismatch'
+    expect(getApplicationCostState(current, undefined, {})).toBe('configuration_mismatch')
   })
 })

package/src/components/cost/ApplicationCostTab.tsx

@@ -25,6 +25,14 @@ import {
 import { isOpenCostWorkloadKind } from './kinds'
 import { CurrentAllocationUse } from './CurrentAllocationUse'
 import { costUnavailableReasonFromError } from './errors'
+import {
+  costFreshnessLabel,
+  costIntegrationUnavailableMessage,
+  costRateLabels,
+  costSourceLabel,
+  isCostDiscoveryPending,
+} from './source'
+import { useNavCustomization } from '../../context/NavCustomization'
 
 type ApplicationCostState =
   | 'loading'
@@ -53,8 +61,9 @@ export function ApplicationCostTab({
   workloads,
   onSelectWorkloadCost,
 }: ApplicationCostTabProps) {
+  const settingsAvailable = !useNavCustomization().embedded
   const [range, setRange] = useState<CostTimeRange>('24h')
-  const [noPrometheusSince, setNoPrometheusSince] = useState<number | null>(null)
+  const [discoverySince, setDiscoverySince] = useState<number | null>(null)
   const supportedWorkloads = useMemo(() => applicationCostWorkloads(workloads), [workloads])
   const unsupportedCount = workloads.length - supportedWorkloads.length
   const queriesEnabled = supportedWorkloads.length > 0
@@ -77,10 +86,10 @@ export function ApplicationCostTab({
   })
 
   useEffect(() => {
-    if (state === 'no_prometheus') {
-      setNoPrometheusSince((prev) => prev ?? Date.now())
+    if (isCostDiscoveryPending(state)) {
+      setDiscoverySince((prev) => prev ?? Date.now())
     } else {
-      setNoPrometheusSince(null)
+      setDiscoverySince(null)
     }
   }, [state])
 
@@ -96,6 +105,7 @@ export function ApplicationCostTab({
       <ApplicationCostUnavailable
         state="no_metrics"
         message="No steady-state workloads in this app are currently cost-attributed."
+        settingsAvailable={settingsAvailable}
       />
     )
   }
@@ -115,22 +125,28 @@ export function ApplicationCostTab({
     state === 'query_error' ||
     state === 'access_denied' ||
     state === 'not_found' ||
+    state === 'no_cost_source' ||
+    state === 'source_unavailable' ||
+    state === 'authentication_error' ||
+    state === 'configuration_mismatch' ||
+    state === 'deployment_configuration_error' ||
+    state === 'history_unsupported' ||
     state === 'load_error'
   ) {
-    const discoveryAgeMs = noPrometheusSince == null ? 0 : Date.now() - noPrometheusSince
-    if (state === 'no_prometheus' && discoveryAgeMs < COST_DISCOVERY_GRACE_MS) {
+    const discoveryAgeMs = discoverySince == null ? 0 : Date.now() - discoverySince
+    if (isCostDiscoveryPending(state) && discoveryAgeMs < COST_DISCOVERY_GRACE_MS) {
       return (
         <ApplicationCostDiscovering
           isFetching={currentQuery.isFetching || trendQuery.isFetching}
           onRetry={() => {
-            setNoPrometheusSince(Date.now())
+            setDiscoverySince(Date.now())
             currentQuery.refetch()
             trendQuery.refetch()
           }}
         />
       )
     }
-    return <ApplicationCostUnavailable state={state} />
+    return <ApplicationCostUnavailable state={state} settingsAvailable={settingsAvailable} />
   }
 
   const current = currentQuery.data
@@ -151,12 +167,16 @@ export function ApplicationCostTab({
   const maxCost = Math.max(...rows.map((row) => row.current?.hourlyCost ?? 0), 0)
   const currentCurrency = current?.currency ?? trend?.currency ?? DEFAULT_COST_CURRENCY
   const trendCurrency = trend?.currency ?? current?.currency ?? DEFAULT_COST_CURRENCY
+  const source = current?.source ?? trend?.source
+  const historyUnsupported = trend?.reason === 'history_unsupported'
+  const currentWindow = current?.window
+  const rateLabels = costRateLabels(currentWindow)
 
   return (
     <div className="mx-auto w-full max-w-[1600px] space-y-4">
       {(current?.partial ||
         trend?.partial ||
-        state === 'partial_missing_history' ||
+        (state === 'partial_missing_history' && !historyUnsupported) ||
         state === 'partial_missing_current' ||
         unsupportedCount > 0) && (
         <div className="flex items-start gap-2 rounded-lg border border-theme-border bg-theme-base px-3 py-2 text-sm text-theme-text-secondary">
@@ -185,61 +205,76 @@ export function ApplicationCostTab({
                 <div className="text-sm font-semibold text-theme-text-primary">
                   Application compute cost
                 </div>
-                <CostInfoTooltip content="Values are based on OpenCost CPU and memory allocation over time, grouped by the workloads in this application. OpenCost allocation uses the greater of requested or observed resources." />
+                <CostInfoTooltip content="Values are based on CPU and memory allocation grouped by the workloads in this application. The cost provider attributes the greater of requested or observed resources." />
               </div>
               <div className="text-xs text-theme-text-tertiary">
-                OpenCost CPU and memory allocation rate ({trendCurrency}/hr) for Deployment,
-                StatefulSet, and DaemonSet workloads
+                CPU and memory allocation rate ({trendCurrency}/hr) for Deployment, StatefulSet,
+                and DaemonSet workloads
               </div>
             </div>
           </div>
-          <CostTimeRangeSelector value={range} onChange={setRange} />
+          {!historyUnsupported && <CostTimeRangeSelector value={range} onChange={setRange} />}
         </div>
 
-        <div className="grid gap-4 p-4 lg:grid-cols-[240px_minmax(0,1fr)]">
-          <div className="space-y-4">
+        {historyUnsupported ? (
+          <div className="grid gap-4 p-4 sm:grid-cols-2">
             <CostMetricBlock
-              label={`Spend over ${range}`}
-              value={formatHistoricalSpend(
-                points.length,
-                trend?.windowTotalCost ?? 0,
-                trendLoading || state === 'partial_missing_history',
-                trendCurrency,
-              )}
-              subvalue={
-                state === 'partial_missing_history'
-                  ? 'Historical data incomplete'
-                  : `${included} of ${total} workloads included`
-              }
+              label={rateLabels.hourly}
+              value={totals ? formatCostPerHour(hourly, currentCurrency) : '—'}
+              subvalue={`${included} of ${total} workloads included`}
             />
             <CostMetricBlock
               label="Projected monthly"
               value={totals ? formatProjectedMonthlyCost(hourly, currentCurrency) : '—'}
-              subvalue={
-                totals
-                  ? `${formatCostPerHour(hourly, currentCurrency)} current rate`
-                  : 'Current allocation unavailable'
-              }
+              subvalue={`${rateLabels.rate} × 730 hours`}
             />
           </div>
-          <div className="min-w-0">
-            {trendLoading ? (
-              <div className="flex h-[240px] items-center justify-center rounded-md border border-dashed border-theme-border bg-theme-base/60 text-sm text-theme-text-tertiary">
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Loading historical cost…
-              </div>
-            ) : hasTrend && chartSeries.length > 0 ? (
-              <div className="min-w-0">
-                <StackedAreaChart series={chartSeries} currency={trendCurrency} />
-                <ChartLegend series={chartSeries} />
-              </div>
-            ) : (
-              <div className="flex h-[240px] items-center justify-center rounded-md border border-dashed border-theme-border bg-theme-base/60 text-sm text-theme-text-tertiary">
-                No historical workload owner cost points for this range.
-              </div>
-            )}
+        ) : (
+          <div className="grid gap-4 p-4 lg:grid-cols-[240px_minmax(0,1fr)]">
+            <div className="space-y-4">
+              <CostMetricBlock
+                label={`Spend over ${range}`}
+                value={formatHistoricalSpend(
+                  points.length,
+                  trend?.windowTotalCost ?? 0,
+                  trendLoading || state === 'partial_missing_history',
+                  trendCurrency,
+                )}
+                subvalue={
+                  state === 'partial_missing_history'
+                    ? 'Historical data incomplete'
+                    : `${included} of ${total} workloads included`
+                }
+              />
+              <CostMetricBlock
+                label="Projected monthly"
+                value={totals ? formatProjectedMonthlyCost(hourly, currentCurrency) : '—'}
+                subvalue={
+                  totals
+                    ? `${formatCostPerHour(hourly, currentCurrency)} · ${rateLabels.rate}`
+                    : 'Current allocation unavailable'
+                }
+              />
+            </div>
+            <div className="min-w-0">
+              {trendLoading ? (
+                <div className="flex h-[240px] items-center justify-center rounded-md border border-dashed border-theme-border bg-theme-base/60 text-sm text-theme-text-tertiary">
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Loading historical cost…
+                </div>
+              ) : hasTrend && chartSeries.length > 0 ? (
+                <div className="min-w-0">
+                  <StackedAreaChart series={chartSeries} currency={trendCurrency} />
+                  <ChartLegend series={chartSeries} />
+                </div>
+              ) : (
+                <div className="flex h-[240px] items-center justify-center rounded-md border border-dashed border-theme-border bg-theme-base/60 text-sm text-theme-text-tertiary">
+                  No historical workload owner cost points for this range.
+                </div>
+              )}
+            </div>
           </div>
-        </div>
+        )}
       </section>
 
       <div className="grid gap-4 md:grid-cols-2">
@@ -257,7 +292,7 @@ export function ApplicationCostTab({
           value={totals ? formatProjectedDailyRate(hourly, currentCurrency) : '—'}
           subvalue={
             totals
-              ? `${formatCostPerHour(hourly, currentCurrency)} current hourly rate`
+              ? `${formatCostPerHour(hourly, currentCurrency)} · ${rateLabels.rate}`
               : 'Current allocation unavailable'
           }
         />
@@ -274,6 +309,7 @@ export function ApplicationCostTab({
         cpuUsageAvailable={totals?.cpuUsageAvailable ?? false}
         memoryUsageAvailable={totals?.memoryUsageAvailable ?? false}
         scopeNote="Included workloads only"
+        window={source === 'kubecost' ? currentWindow : undefined}
       />
 
       <section className="rounded-lg border border-theme-border bg-theme-surface/50">
@@ -283,7 +319,7 @@ export function ApplicationCostTab({
               Workload contributors
             </div>
             <div className="text-xs text-theme-text-tertiary">
-              Projected monthly from current allocation, sorted by spend
+              Projected monthly from the {rateLabels.rate}, sorted by spend
             </div>
           </div>
           <div className="text-xs text-theme-text-tertiary">{rows.length} tracked</div>
@@ -315,13 +351,15 @@ export function ApplicationCostTab({
       </section>
 
       <div className="text-xs text-theme-text-tertiary">
-        Powered by OpenCost via Prometheus.{' '}
+        {costSourceLabel(source)} &middot; {costFreshnessLabel(source, source === 'kubecost' ? currentWindow : '1h', current?.dataThrough)}.{' '}
         {currentCurrency !== DEFAULT_COST_CURRENCY && (
           <>Labeled {currentCurrency}; no conversion. </>
         )}
-        Historical spend uses the selected range; projected monthly values multiply current hourly
-        allocation. Batch/job cost is separate; storage/PVC and network costs remain at namespace
-        and cluster level.
+        {historyUnsupported
+          ? 'Historical application charts are not available for Kubecost yet. '
+          : 'Historical spend uses the selected range. '}
+        Projected monthly values multiply the {rateLabels.rate}. Batch/job cost is separate;
+        storage/PVC and network costs remain at namespace and cluster level.
       </div>
     </div>
   )
@@ -348,14 +386,19 @@ export function getApplicationCostState(
   if (trendHasData) return 'partial_missing_current'
   const reason =
     current?.reason ??
-    trend?.reason ??
     costUnavailableReasonFromError(status.currentError) ??
+    trend?.reason ??
     costUnavailableReasonFromError(status.trendError)
   if (
     reason === 'no_prometheus' ||
+    reason === 'no_cost_source' ||
     reason === 'query_error' ||
     reason === 'access_denied' ||
-    reason === 'not_found'
+    reason === 'not_found' ||
+    reason === 'source_unavailable' ||
+    reason === 'authentication_error' ||
+    reason === 'configuration_mismatch' ||
+    reason === 'deployment_configuration_error'
   )
     return reason
   if (queryError) return 'load_error'
@@ -462,10 +505,13 @@ function applicationCostKey(ref: { kind: string; namespace: string; name: string
 }
 
 function reasonLabel(reason?: CostUnavailableReason) {
-  if (reason === 'no_prometheus') return 'Prometheus not found'
+  if (reason === 'no_prometheus') return 'Metrics backend not found'
+  if (reason === 'no_cost_source') return 'Cost source not found'
   if (reason === 'query_error') return 'Cost query failed'
   if (reason === 'access_denied') return 'No access to this workload'
   if (reason === 'not_found') return 'Workload not found'
+  if (reason === 'configuration_mismatch') return 'Kubecost settings are not valid for this cluster'
+  if (reason === 'deployment_configuration_error') return 'Radar cost deployment is misconfigured'
   return 'No workload cost metrics'
 }
 
@@ -482,11 +528,11 @@ function ApplicationCostDiscovering({
         <Loader2 className="h-8 w-8 animate-spin text-theme-text-tertiary/60" />
         <div>
           <p className="text-sm font-medium text-theme-text-primary">
-            Looking for Prometheus cost data…
+            Looking for cost data…
           </p>
           <p className="mt-1 text-xs text-theme-text-tertiary">
-            First discovery can take a few seconds while Radar checks cluster services and opens a
-            local port-forward.
+            Radar is checking OpenCost metrics in a PromQL-compatible backend and a local Kubecost
+            3 Aggregator. First discovery can take a few seconds.
           </p>
         </div>
         <button
@@ -504,23 +550,28 @@ function ApplicationCostDiscovering({
 function ApplicationCostUnavailable({
   state,
   message,
+  settingsAvailable,
 }: {
   state: CostUnavailableReason | 'load_error'
   message?: string
+  settingsAvailable: boolean
 }) {
   const text =
     message ??
+    costIntegrationUnavailableMessage(state, settingsAvailable) ??
     (state === 'no_prometheus'
-      ? 'Prometheus not found. OpenCost application cost requires Prometheus or VictoriaMetrics.'
+      ? 'No compatible metrics backend was found. OpenCost application cost requires OpenCost metrics in a PromQL-compatible backend.'
       : state === 'query_error'
-        ? 'Cost data is temporarily unavailable. Prometheus was found, but application cost queries failed.'
+        ? 'Cost data is temporarily unavailable. A metrics backend was found, but application cost queries failed.'
+        : state === 'history_unsupported'
+          ? 'Historical application cost is not available for Kubecost yet.'
         : state === 'access_denied'
           ? 'Cost data is unavailable because these workloads are not accessible with your current permissions.'
           : state === 'not_found'
             ? 'Cost data is unavailable because the referenced workloads no longer exist.'
             : state === 'load_error'
               ? 'Could not load application cost data. Check access to these workloads and try again.'
-              : 'OpenCost workload metrics were not found for this application.')
+              : 'No workload cost data was returned for this application by the active cost source.')
   return (
     <div className="flex h-full min-h-[320px] items-center justify-center">
       <div className="flex max-w-md flex-col items-center gap-3 text-center text-theme-text-secondary">

package/src/components/cost/CostTrendChart.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+import type { OpenCostTrendSeries } from '../../api/client'
+import { kubecostRetentionNote, kubecostTrendIsStale, kubecostTrendUnavailableMessage } from './CostTrendChart'
+
+const hour = 60 * 60
+
+function series(...timestamps: number[]): OpenCostTrendSeries[] {
+  return [{
+    namespace: 'default',
+    dataPoints: timestamps.map((timestamp) => ({ timestamp, value: 1 })),
+  }]
+}
+
+describe('kubecostRetentionNote', () => {
+  it('describes a material retention gap', () => {
+    const start = 1_000
+    expect(kubecostRetentionNote(series(start + 4 * hour, start + 5 * hour), start, start + 7 * 24 * hour))
+      .toContain('Kubecost history is available from')
+  })
+
+  it('stays quiet when the first hourly bucket follows the requested start', () => {
+    const start = 1_000
+    expect(kubecostRetentionNote(series(start + hour, start + 2 * hour), start, start + 24 * hour)).toBeNull()
+  })
+
+  it('stays quiet when there is only one retained sample', () => {
+    const start = 1_000
+    expect(kubecostRetentionNote(series(start + 4 * hour), start, start + 24 * hour)).toBeNull()
+  })
+
+  it('allows the normal first daily bucket without calling retention partial', () => {
+    const start = 1_000
+    expect(kubecostRetentionNote(series(start + 24 * hour, start + 48 * hour), start, start + 7 * 24 * hour)).toBeNull()
+  })
+})
+
+describe('kubecostTrendIsStale', () => {
+  it('allows normal hourly ingestion lag', () => {
+    const now = Date.parse('2026-08-30T12:00:00Z')
+    expect(kubecostTrendIsStale('2026-08-30T10:00:00Z', '6h', now)).toBe(false)
+  })
+
+  it('flags a source beyond the range lag budget', () => {
+    const now = Date.parse('2026-08-30T12:00:00Z')
+    expect(kubecostTrendIsStale('2026-08-30T02:00:00Z', '24h', now)).toBe(true)
+    expect(kubecostTrendIsStale('2026-08-28T02:00:00Z', '7d', now)).toBe(true)
+  })
+
+  it('stays quiet without a valid retained timestamp', () => {
+    expect(kubecostTrendIsStale(undefined, '6h')).toBe(false)
+    expect(kubecostTrendIsStale('invalid', '6h')).toBe(false)
+  })
+})
+
+describe('kubecostTrendUnavailableMessage', () => {
+  it('distinguishes an empty namespace scope from missing Kubecost history', () => {
+    expect(kubecostTrendUnavailableMessage('no_metrics', true)).toContain('current namespace scope')
+    expect(kubecostTrendUnavailableMessage('no_metrics', false)).toContain('Kubecost has no retained')
+  })
+
+  it('distinguishes insufficient scoped history', () => {
+    expect(kubecostTrendUnavailableMessage('insufficient_history', true)).toContain('namespace scope')
+    expect(kubecostTrendUnavailableMessage('insufficient_history', false)).toContain('two retained samples')
+  })
+})