@skyhook-io/radar-app 1.10.0 → 1.12.2

package/src/components/cost/format.ts

@@ -1,46 +1,97 @@
 export const COST_HOURS_PER_DAY = 24
 export const COST_HOURS_PER_MONTH = 730
+export const DEFAULT_COST_CURRENCY = 'USD'
 
-export function formatCostAxis(value: number): string {
-  if (!Number.isFinite(value) || value <= 0) return '$0'
-  if (value >= 1000) return `$${(value / 1000).toFixed(0)}k`
-  if (value >= 1) return `$${value.toFixed(1)}`
-  if (value >= 0.01) return `$${value.toFixed(2)}`
-  if (value >= 0.0001) return `$${value.toFixed(4)}`
-  if (value >= 0.00001) return `$${value.toFixed(5)}`
-  return '<$0.00001'
+type CurrencyFormat = { formatter: Intl.NumberFormat; prefix: string }
+
+const currencyFormatters = new Map<string, CurrencyFormat>()
+
+function currencyFormatter(currency: string | undefined, digits?: number): CurrencyFormat {
+  const normalized = (currency ?? '').trim().toUpperCase() || DEFAULT_COST_CURRENCY
+  const key = `${normalized}:${digits ?? 'default'}`
+  const cached = currencyFormatters.get(key)
+  if (cached) return cached
+
+  try {
+    const options: Intl.NumberFormatOptions = {
+      style: 'currency',
+      currency: normalized,
+    }
+    if (digits !== undefined) {
+      options.minimumFractionDigits = digits
+      options.maximumFractionDigits = digits
+    }
+    const formatter = new Intl.NumberFormat('en-US', options)
+    const result = { formatter, prefix: '' }
+    currencyFormatters.set(key, result)
+    return result
+  } catch {
+    const fallbackDigits = digits ?? 2
+    const options: Intl.NumberFormatOptions = {
+      minimumFractionDigits: fallbackDigits,
+      maximumFractionDigits: fallbackDigits,
+    }
+    const result = {
+      formatter: new Intl.NumberFormat('en-US', options),
+      prefix: `${normalized} `,
+    }
+    currencyFormatters.set(key, result)
+    return result
+  }
+}
+
+function formatCurrency(value: number, currency: string | undefined, digits?: number): string {
+  const { formatter, prefix } = currencyFormatter(currency, digits)
+  return `${prefix}${formatter.format(value)}`
+}
+
+export function formatCostAxis(value: number, currency: string | undefined): string {
+  if (!Number.isFinite(value) || value <= 0) return formatCurrency(0, currency, 0)
+  if (value >= 1000) return `${formatCurrency(value / 1000, currency, 0)}k`
+  if (value >= 1) return formatCurrency(value, currency, 1)
+  if (value >= 0.01) return formatCurrency(value, currency, 2)
+  if (value >= 0.0001) return formatCurrency(value, currency, 4)
+  if (value >= 0.00001) return formatCurrency(value, currency, 5)
+  return `<${formatCurrency(0.00001, currency, 5)}`
 }
 
-export function formatCost(value: number): string {
-  if (!Number.isFinite(value) || value <= 0) return '$0.00'
-  if (value >= 1000) return `$${(value / 1000).toFixed(1)}k`
-  if (value >= 1) return `$${value.toFixed(2)}`
-  if (value >= 0.01) return `$${value.toFixed(3)}`
-  if (value >= 0.0001) return `$${value.toFixed(4)}`
-  return formatCostAxis(value)
+export function formatCost(value: number, currency: string | undefined): string {
+  if (!Number.isFinite(value) || value <= 0) return formatCurrency(0, currency)
+  if (value >= 1000) return `${formatCurrency(value / 1000, currency, 1)}k`
+  if (value >= 1) return formatCurrency(value, currency)
+  if (value >= 0.01) return formatCurrency(value, currency, 3)
+  if (value >= 0.0001) return formatCurrency(value, currency, 4)
+  return formatCostAxis(value, currency)
 }
 
-export function formatCostPerHour(value: number): string {
-  return `${formatCost(value)}/hr`
+export function formatCostPerHour(value: number, currency: string | undefined): string {
+  return `${formatCost(value, currency)}/hr`
 }
 
-export function formatHistoricalSpend(pointCount: number, windowTotalCost: number, unavailable: boolean): string {
+export function formatHistoricalSpend(
+  pointCount: number,
+  windowTotalCost: number,
+  unavailable: boolean,
+  currency: string | undefined,
+): string {
   if (unavailable || pointCount < 2) return '—'
-  return windowTotalCost > 0 ? `~${formatCost(windowTotalCost)}` : formatCost(0)
+  return windowTotalCost > 0
+    ? `~${formatCost(windowTotalCost, currency)}`
+    : formatCost(0, currency)
 }
 
-export function formatProjectedDailyCost(hourlyCost: number): string {
-  return `~${formatCost(hourlyCost * COST_HOURS_PER_DAY)}`
+export function formatProjectedDailyCost(hourlyCost: number, currency: string | undefined): string {
+  return `~${formatCost(hourlyCost * COST_HOURS_PER_DAY, currency)}`
 }
 
-export function formatProjectedDailyRate(hourlyCost: number): string {
-  return `${formatProjectedDailyCost(hourlyCost)}/day`
+export function formatProjectedDailyRate(hourlyCost: number, currency: string | undefined): string {
+  return `${formatProjectedDailyCost(hourlyCost, currency)}/day`
 }
 
-export function formatProjectedMonthlyCost(hourlyCost: number): string {
-  return `~${formatCost(hourlyCost * COST_HOURS_PER_MONTH)}`
+export function formatProjectedMonthlyCost(hourlyCost: number, currency: string | undefined): string {
+  return `~${formatCost(hourlyCost * COST_HOURS_PER_MONTH, currency)}`
 }
 
-export function formatProjectedMonthlyRate(hourlyCost: number): string {
-  return `${formatProjectedMonthlyCost(hourlyCost)}/mo`
+export function formatProjectedMonthlyRate(hourlyCost: number, currency: string | undefined): string {
+  return `${formatProjectedMonthlyCost(hourlyCost, currency)}/mo`
 }

package/src/components/home/ClusterHealthCard.tsx

@@ -90,6 +90,9 @@ function getPlatformInfo(platform: string): { name: string; icon: string | null
   if (platformLower.includes('openshift')) {
     return { name: 'OpenShift', icon: null }
   }
+  if (platformLower.includes('rke2')) {
+    return { name: 'RKE2', icon: null }
+  }
   if (platformLower.includes('rancher')) {
     return { name: 'Rancher', icon: null }
   }

package/src/components/home/CostCard.tsx

@@ -1,7 +1,8 @@
 import type { OpenCostSummary } from '../../api/client'
 import { useOpenCostSummary } from '../../api/client'
-import { DollarSign } from 'lucide-react'
+import { Coins } from 'lucide-react'
 import {
+  DEFAULT_COST_CURRENCY,
   formatCostPerHour,
   formatProjectedDailyRate,
   formatProjectedMonthlyCost,
@@ -21,6 +22,7 @@ export function CostCard({ onNavigate }: { onNavigate?: () => void }) {
 
 function CostCardContent({ data, onNavigate }: { data: OpenCostSummary; onNavigate?: () => void }) {
   const hourlyCost = data.totalHourlyCost ?? 0
+  const currency = data.currency ?? DEFAULT_COST_CURRENCY
   const namespaces = data.namespaces ?? []
   const topNamespaces = namespaces.slice(0, 5)
 
@@ -35,7 +37,7 @@ function CostCardContent({ data, onNavigate }: { data: OpenCostSummary; onNaviga
       <div className="flex flex-col h-full w-full">
         <div className="flex items-center justify-between px-5 py-3 border-b border-theme-border/50">
           <div className="flex items-center gap-2">
-            <DollarSign className="w-4 h-4 text-accent-text" />
+            <Coins className="w-4 h-4 text-accent-text" />
             <span className="text-xs font-semibold uppercase tracking-wider text-accent-text">Cost Insights</span>
             {namespaces.length > 0 && (
               <span className="badge-sm border border-theme-border bg-accent-muted text-accent-text">
@@ -50,14 +52,14 @@ function CostCardContent({ data, onNavigate }: { data: OpenCostSummary; onNaviga
           <div className="flex items-baseline gap-3 mb-3">
             <div className="flex items-baseline gap-1">
               <span className="text-2xl font-bold text-theme-text-primary tabular-nums">
-                {formatProjectedMonthlyCost(hourlyCost)}
+                {formatProjectedMonthlyCost(hourlyCost, currency)}
               </span>
               <span className="text-xs text-theme-text-tertiary">/mo</span>
             </div>
             <div className="flex items-baseline gap-1.5 text-theme-text-secondary">
-              <span className="text-xs font-medium tabular-nums">{formatProjectedDailyRate(hourlyCost)}</span>
+              <span className="text-xs font-medium tabular-nums">{formatProjectedDailyRate(hourlyCost, currency)}</span>
               <span className="text-[10px] text-theme-text-quaternary">·</span>
-              <span className="text-xs font-medium tabular-nums">{formatCostPerHour(hourlyCost)}</span>
+              <span className="text-xs font-medium tabular-nums">{formatCostPerHour(hourlyCost, currency)}</span>
             </div>
           </div>
 
@@ -72,7 +74,7 @@ function CostCardContent({ data, onNavigate }: { data: OpenCostSummary; onNaviga
                     <div className="h-full rounded-full bg-indigo-500/60" style={{ width: `${Math.max(pct, 2)}%` }} />
                   </div>
                   <span className="text-[10px] text-theme-text-tertiary tabular-nums w-20 text-right shrink-0">
-                    {formatProjectedMonthlyRate(ns.hourlyCost)}
+                    {formatProjectedMonthlyRate(ns.hourlyCost, currency)}
                   </span>
                 </div>
               )
@@ -85,7 +87,10 @@ function CostCardContent({ data, onNavigate }: { data: OpenCostSummary; onNaviga
 
         <div className="px-4 py-1.5 border-t border-theme-border/50 flex items-center justify-between">
           <span className="text-[10px] text-theme-text-tertiary">
-            {data.currency ?? 'USD'} &middot; projected monthly from {data.window ?? '1h'} window
+            {currency} &middot; projected monthly from {data.window ?? '1h'} window
+            {currency !== DEFAULT_COST_CURRENCY && (
+              <> &middot; no conversion</>
+            )}
           </span>
           <span className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-accent-text">
             OpenCost

package/src/components/home/HomeView.tsx

@@ -14,6 +14,7 @@ import { GitOpsControllersCard } from './GitOpsControllersCard'
 import { CapacityCard } from './CapacityCard'
 import { useCapabilitiesContext } from '../../contexts/CapabilitiesContext'
 import { Tooltip } from '../ui/Tooltip'
+import { getNetworkPolicyResourceTarget } from '../../utils/navigation'
 import {
   AuditCard,
   FreshnessControl,
@@ -73,8 +74,13 @@ export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNav
     })
     const nodeIds = new Set(nodes.map(n => n.id))
     const edges = topology.edges.filter(e => nodeIds.has(e.source) && nodeIds.has(e.target))
-    return { nodes, edges }
+    // Carry the frame's own flags through the filter. A large cluster serves an
+    // empty graph flagged requiresNamespaceFilter until SSE picks the pick up
+    // server-side, and a consumer that sees only nodes/edges reads that
+    // declined build as a namespace holding nothing.
+    return { ...topology, nodes, edges }
   }, [topology, namespaces])
+  const networkPolicyTarget = getNetworkPolicyResourceTarget(scopedTopology)
   // CRDs and Helm load lazily after main dashboard to keep initial load fast
   const { data: crdsData } = useDashboardCRDs(namespaces)
   const { data: helmData } = useDashboardHelm(namespaces)
@@ -150,7 +156,7 @@ export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNav
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
               <TopologyPreview
                 topology={scopedTopology}
-                summary={data.topologySummary}
+                namespaceSelected={namespaces.length > 0}
                 onNavigate={() => onNavigateToView('topology')}
               />
               <ActivitySummary
@@ -198,7 +204,13 @@ export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNav
                   <BandItem>
                     <NetworkPolicyCoverageCard
                       data={data.networkPolicyCoverage}
-                      onNavigate={() => onNavigateToResourceKind('networkpolicies', 'networking.k8s.io')}
+                      onNavigate={() => {
+                        if (networkPolicyTarget) {
+                          onNavigateToResourceKind(networkPolicyTarget.kind, networkPolicyTarget.group)
+                        } else {
+                          onNavigateToView('resources')
+                        }
+                      }}
                     />
                   </BandItem>
                 )}

package/src/components/home/NetworkPolicyCoverageCard.test.tsx

@@ -0,0 +1,81 @@
+import type React from "react";
+import { renderToString } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { NetworkPolicyCoverageCard } from "./NetworkPolicyCoverageCard";
+
+// React separates adjacent text nodes with comment markers. Strip them so an
+// assertion matches the text a reader sees instead of a style-attribute value
+// that happens to contain the same characters.
+const render = (element: React.ReactElement) =>
+  renderToString(element).replaceAll("<!-- -->", "");
+
+// The card's own accent turns red at low coverage, so an assertion has to look
+// at the striped staged segment rather than at the whole card.
+const stagedSegmentClass = (html: string) => {
+  const match = html.match(/class="([^"]*)"[^>]*repeating-linear-gradient/);
+  if (!match) throw new Error("no staged segment rendered");
+  return match[1];
+};
+
+describe("NetworkPolicyCoverageCard", () => {
+  it("shows enforced and staged preview coverage separately", () => {
+    const html = render(
+      <NetworkPolicyCoverageCard
+        data={{
+          totalPolicies: 6,
+          stagedPolicies: 2,
+          coveredWorkloads: 3,
+          coveredWorkloadsIfStaged: 5,
+          totalWorkloads: 10,
+        }}
+        onNavigate={() => {}}
+      />,
+    );
+
+    expect(html).toContain("30%");
+    expect(html).toContain("(50% if staged applied)");
+    expect(html).toContain("Covered workloads");
+    expect(html).toContain("Covered if staged");
+    expect(html).toContain("Uncovered workloads");
+    expect(html).toContain("Uncovered if staged");
+    // The delta segment's tone carries the direction: amber for coverage the
+    // staged set would add. Its wording lives in a Tooltip portal, which server
+    // rendering does not emit, so the class is what an assertion can reach.
+    expect(stagedSegmentClass(html)).toContain("text-yellow-500");
+  });
+
+  it("shows coverage going down when a staged policy stages a deletion", () => {
+    const html = render(
+      <NetworkPolicyCoverageCard
+        data={{
+          totalPolicies: 6,
+          stagedPolicies: 1,
+          coveredWorkloads: 8,
+          coveredWorkloadsIfStaged: 5,
+          totalWorkloads: 10,
+        }}
+        onNavigate={() => {}}
+      />,
+    );
+
+    expect(html).toContain("80%");
+    expect(html).toContain("(50% if staged applied)");
+    // Red, not amber: this staged set takes coverage away.
+    expect(stagedSegmentClass(html)).toContain("text-red-500");
+    // The projected figure must not be clamped up to today's coverage.
+    expect(html).toContain("5/10");
+  });
+
+  it("keeps the original enforced-only presentation without staged policies", () => {
+    const html = render(
+      <NetworkPolicyCoverageCard
+        data={{ totalPolicies: 2, coveredWorkloads: 2, totalWorkloads: 4 }}
+        onNavigate={() => {}}
+      />,
+    );
+
+    expect(html).toContain("50%");
+    expect(html).not.toContain("if staged");
+    expect(html).not.toContain("repeating-linear-gradient");
+  });
+});

package/src/components/home/NetworkPolicyCoverageCard.tsx

@@ -1,6 +1,7 @@
 import type { DashboardNetworkPolicyCoverage } from '../../api/client'
 import { ShieldCheck, ArrowRight } from 'lucide-react'
 import { clsx } from 'clsx'
+import { Tooltip } from '../ui/Tooltip'
 
 interface NetworkPolicyCoverageCardProps {
   data: DashboardNetworkPolicyCoverage
@@ -8,9 +9,23 @@ interface NetworkPolicyCoverageCardProps {
 }
 
 export function NetworkPolicyCoverageCard({ data, onNavigate }: NetworkPolicyCoverageCardProps) {
+  const hasStagedPolicies = (data.stagedPolicies ?? 0) > 0
+  // A staged policy can stage a deletion, so the projected coverage is allowed
+  // to be lower than today's. Clamping it would hide exactly the case an
+  // operator most needs to see before promoting the staged set.
+  const coveredIfStaged = data.coveredWorkloadsIfStaged ?? data.coveredWorkloads
+  const stagedDelta = coveredIfStaged - data.coveredWorkloads
   const percentage = data.totalWorkloads > 0
     ? Math.round((data.coveredWorkloads / data.totalWorkloads) * 100)
     : 0
+  const percentageIfStaged = data.totalWorkloads > 0
+    ? Math.round((coveredIfStaged / data.totalWorkloads) * 100)
+    : 0
+  const enforcedPercentage = hasStagedPolicies ? Math.min(percentage, percentageIfStaged) : percentage
+  // Gated on the same condition as the segment that draws it, so the three
+  // widths always sum to the full track even for a host that supplies a
+  // projection without any staged policies.
+  const stagedDeltaPercentage = hasStagedPolicies ? Math.abs(percentageIfStaged - percentage) : 0
   const hasPolicies = data.totalPolicies > 0
   const accentColor = !hasPolicies
     ? 'text-theme-text-tertiary'
@@ -48,28 +63,56 @@ export function NetworkPolicyCoverageCard({ data, onNavigate }: NetworkPolicyCov
             <>
               <div className="flex items-center gap-3 w-full">
                 <div className="flex-1 h-3 rounded-full overflow-hidden bg-theme-hover flex">
-                  {data.coveredWorkloads > 0 && (
+                  {enforcedPercentage > 0 && (
                     <div
                       className="h-full bg-green-500"
-                      style={{ width: `${percentage}%` }}
+                      style={{ width: `${enforcedPercentage}%` }}
                     />
                   )}
-                  {data.totalWorkloads - data.coveredWorkloads > 0 && (
+                  {hasStagedPolicies && stagedDeltaPercentage > 0 && (
+                    // The width belongs on the flex child; the tooltip wrapper
+                    // inside it carries the hover target.
+                    <div className="h-full" style={{ width: `${stagedDeltaPercentage}%` }}>
+                      <Tooltip
+                        content={stagedDelta > 0
+                          ? `${stagedDelta} more workloads covered if staged policies are applied`
+                          : `${-stagedDelta} workloads lose coverage if staged policies are applied`}
+                        wrapperClassName="!block h-full w-full"
+                      >
+                        <div
+                          className={clsx('h-full w-full', stagedDelta > 0 ? 'text-yellow-500' : 'text-red-500')}
+                          style={{
+                            backgroundImage: 'repeating-linear-gradient(135deg, currentColor 0, currentColor 2px, transparent 2px, transparent 5px)',
+                          }}
+                        />
+                      </Tooltip>
+                    </div>
+                  )}
+                  {100 - enforcedPercentage - stagedDeltaPercentage > 0 && (
                     <div
                       className="h-full bg-theme-hover"
-                      style={{ width: `${100 - percentage}%` }}
+                      style={{ width: `${100 - enforcedPercentage - stagedDeltaPercentage}%` }}
                     />
                   )}
                 </div>
-                <span className={clsx('text-sm font-semibold tabular-nums', accentColor)}>
-                  {percentage}%
-                </span>
+                <div className="flex shrink-0 flex-col items-end tabular-nums">
+                  <span className={clsx('text-sm font-semibold', accentColor)}>{percentage}%</span>
+                  {hasStagedPolicies && (
+                    <span className="text-[10px] text-theme-text-tertiary">({percentageIfStaged}% if staged applied)</span>
+                  )}
+                </div>
               </div>
 
               <div className="grid grid-cols-1 gap-y-2 mt-4 w-full">
                 <StatRow label="Policies" value={data.totalPolicies} />
                 <StatRow label="Covered workloads" value={data.coveredWorkloads} total={data.totalWorkloads} />
+                {hasStagedPolicies && (
+                  <StatRow label="Covered if staged" value={coveredIfStaged} total={data.totalWorkloads} />
+                )}
                 <StatRow label="Uncovered workloads" value={data.totalWorkloads - data.coveredWorkloads} warn />
+                {hasStagedPolicies && (
+                  <StatRow label="Uncovered if staged" value={data.totalWorkloads - coveredIfStaged} warn />
+                )}
               </div>
             </>
           )}

package/src/components/home/TopologyPreview.tsx

@@ -1,12 +1,11 @@
 import { useMemo } from 'react'
 import type { Topology } from '../../types'
-import type { DashboardTopologySummary } from '../../api/client'
 import { Network, ArrowRight } from 'lucide-react'
 import { clsx } from 'clsx'
 
 interface TopologyPreviewProps {
   topology: Topology | null
-  summary: DashboardTopologySummary
+  namespaceSelected: boolean
   onNavigate: () => void
 }
 
@@ -133,9 +132,30 @@ const kindDotColors: Record<string, string> = {
   ReplicaSet: 'bg-green-400', HPA: 'bg-pink-500', PVC: 'bg-cyan-400',
 }
 
-export function TopologyPreview({ topology, summary, onNavigate }: TopologyPreviewProps) {
+export function TopologyPreview({ topology, namespaceSelected, onNavigate }: TopologyPreviewProps) {
   const stats = useTopologyStats(topology)
 
+  // A large cluster with no namespace filter gets an empty graph carrying this
+  // flag instead of a build. There is no graph to preview and there never will
+  // be until the user filters, so the card says that rather than counting a
+  // refusal as zero.
+  //
+  // With a pick already active the same flag means something else entirely: SSE
+  // only learns to filter server-side after a flagged frame arrives, so a
+  // cluster-wide refusal still reaches a viewer whose namespace is on its way
+  // to the server. That resolves on its own, and asking for what the viewer
+  // already chose is the wrong thing to say while it does.
+  const needsNamespaceFilter = topology?.requiresNamespaceFilter === true && !namespaceSelected
+
+  // The graph this card draws is the only source for its caption. Node count is
+  // not the test for whether a frame counts — the stream holds topology at null
+  // until one lands and resets it there on reconnect and context switch, so a
+  // delivered graph with no nodes is an empty scope and an honest zero.
+  const counts = useMemo(() => {
+    if (!topology || topology.requiresNamespaceFilter) return null
+    return { nodeCount: topology.nodes.length, edgeCount: topology.edges.length }
+  }, [topology])
+
   return (
     <button
       onClick={onNavigate}
@@ -147,13 +167,27 @@ export function TopologyPreview({ topology, summary, onNavigate }: TopologyPrevi
           <Network className="w-4 h-4 text-theme-text-tertiary" />
           <span className="text-xs font-semibold uppercase tracking-wider text-theme-text-secondary">Topology</span>
         </div>
-        <span className="text-[11px] text-theme-text-tertiary">
-          {summary.nodeCount} resources &middot; {summary.edgeCount} conn
-        </span>
+        {counts ? (
+          <span className="text-[11px] text-theme-text-tertiary">
+            {counts.nodeCount} resources &middot; {counts.edgeCount} conn
+          </span>
+        ) : needsNamespaceFilter ? null : (
+          <span className="h-3 w-28 rounded bg-theme-text-tertiary/20 animate-pulse" />
+        )}
       </div>
 
       {/* Stats (left) + Schematic (right) */}
       <div className="flex-1 flex items-stretch min-h-0 px-3 py-1.5 gap-2">
+        {needsNamespaceFilter ? (
+          <div className="flex-1 flex items-center justify-center px-4">
+            <p className="text-[11px] leading-relaxed text-theme-text-tertiary text-center">
+              This cluster is too large to graph every namespace.
+              <br />
+              <span className="text-theme-text-secondary font-medium">Select a namespace</span> to view the topology.
+            </p>
+          </div>
+        ) : (
+          <>
         {/* Left: compact stats */}
         <div className="flex flex-col justify-center gap-0.5 min-w-0 w-[105px] shrink-0">
           {stats ? (
@@ -187,16 +221,26 @@ export function TopologyPreview({ topology, summary, onNavigate }: TopologyPrevi
               )}
             </>
           ) : (
-            // Show summary-based placeholder while full topology loads via SSE
+            // No graph yet, or one with nothing in scope. Until a frame lands
+            // there is no honest number here — a zero would read as an empty
+            // cluster, so pulse instead.
             <div className="flex flex-col gap-0.5">
               <div className="flex items-center gap-1.5 text-[10px] leading-tight">
-                <span className="w-1.5 h-1.5 rounded-full bg-blue-400 shrink-0" />
-                <span className="text-theme-text-primary font-medium w-5 text-right tabular-nums">{summary.nodeCount}</span>
+                <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', counts ? 'bg-blue-400' : 'bg-theme-text-tertiary/30 animate-pulse')} />
+                {counts ? (
+                  <span className="text-theme-text-primary font-medium w-5 text-right tabular-nums">{counts.nodeCount}</span>
+                ) : (
+                  <span className="h-3 w-5 rounded bg-theme-text-tertiary/20 animate-pulse" />
+                )}
                 <span className="text-theme-text-tertiary">resources</span>
               </div>
               <div className="flex items-center gap-1.5 text-[10px] leading-tight">
-                <span className="w-1.5 h-1.5 rounded-full bg-theme-text-tertiary shrink-0" />
-                <span className="text-theme-text-primary font-medium w-5 text-right tabular-nums">{summary.edgeCount}</span>
+                <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', counts ? 'bg-theme-text-tertiary' : 'bg-theme-text-tertiary/30 animate-pulse')} />
+                {counts ? (
+                  <span className="text-theme-text-primary font-medium w-5 text-right tabular-nums">{counts.edgeCount}</span>
+                ) : (
+                  <span className="h-3 w-5 rounded bg-theme-text-tertiary/10 animate-pulse" />
+                )}
                 <span className="text-theme-text-tertiary">connections</span>
               </div>
             </div>
@@ -207,6 +251,8 @@ export function TopologyPreview({ topology, summary, onNavigate }: TopologyPrevi
         <div className="flex-1 flex items-center min-w-0">
           <TopologySchematic />
         </div>
+          </>
+        )}
       </div>
 
       <div className="px-4 py-1.5 border-t border-theme-border/50 flex items-center justify-end gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-theme-text-secondary group-hover:text-theme-text-primary transition-colors">

package/src/components/home/mcpToolCatalog.ts

@@ -52,13 +52,13 @@ export const MCP_TOOL_CATALOG: MCPToolInfo[] = [
   },
   {
     name: 'get_resource',
-    desc: 'A single resource: minified spec/status/metadata plus resourceContext (relationships, refs, issue/audit/policy rollups). Optionally include heavier event/metrics data.',
+    desc: 'A single resource: minified spec/status/metadata plus resourceContext (relationships, refs, issue/audit/policy rollups). Optionally include heavier event/metrics/change/revision data.',
     params: [
       { arg: 'kind', required: true, desc: 'resource kind, e.g. pod, deployment, service' },
       { arg: 'name', required: true, desc: 'resource name' },
       { arg: 'namespace', desc: 'omit for cluster-scoped kinds (Node, ClusterRole, IngressClass, etc.)' },
       { arg: 'group', desc: 'API group when the kind is ambiguous (e.g. serving.knative.dev for Knative Service vs core Service)' },
-      { arg: 'include', desc: 'events, metrics' },
+      { arg: 'include', desc: 'events, metrics, changes, revisions (rollback targets for Deployment/StatefulSet/DaemonSet/Rollout)' },
       { arg: 'context', desc: 'resourceContext tier: basic (default) or none' },
     ],
   },
@@ -147,6 +147,18 @@ export const MCP_TOOL_CATALOG: MCPToolInfo[] = [
       { arg: 'limit', desc: 'max findings (default 30, max 100)' },
     ],
   },
+  {
+    name: 'get_cluster_upgrade_readiness',
+    desc: 'Upgrade impact analysis for a target Kubernetes minor: the evidenced check catalog (version skew, removed/deprecated APIs, node runtime, drain feasibility, webhook readiness) with per-check coverage and caveats, expandable into findings with evidence and remediation. The first call runs a live scan; results are briefly cached per caller.',
+    params: [
+      { arg: 'target', desc: 'target Kubernetes minor (default: next minor above current)' },
+      { arg: 'check', desc: 'check id to expand into findings' },
+      { arg: 'level', desc: 'filter expanded findings: blocker, warning, or review' },
+      { arg: 'offset', desc: 'page through findings beyond the per-call cap' },
+      { arg: 'scan_id', desc: 'binds paging to one scan snapshot (required with offset)' },
+      { arg: 'refresh', desc: 'bypass the cached scan after changing something' },
+    ],
+  },
   {
     name: 'list_helm_releases',
     desc: 'All Helm releases with status, resource health, storage namespace, Flux ownership, current lastOperation, and capped operation trails for failed upgrades, rollbacks, or stuck pending operations.',
@@ -260,14 +272,24 @@ export const MCP_TOOL_CATALOG: MCPToolInfo[] = [
   {
     name: 'manage_workload',
     write: true,
-    desc: 'Operate on a workload: restart triggers a rolling restart, scale changes the replica count, rollback reverts to a previous revision.',
+    desc: 'Operate on a workload: restart triggers a rolling restart, scale changes the replica count, rollback reverts to a previous revision. Rollout rollback re-runs every canary step — pair it with manage_rollout promote-full, or abort instead.',
     params: [
       { arg: 'action', required: true, desc: 'restart, scale, or rollback' },
-      { arg: 'kind', required: true, desc: 'deployment, statefulset, or daemonset' },
+      { arg: 'kind', required: true, desc: 'deployment, statefulset, daemonset, or rollout' },
       { arg: 'namespace', required: true, desc: 'workload namespace' },
       { arg: 'name', required: true, desc: 'workload name' },
       { arg: 'replicas', desc: 'target replica count (for scale)' },
-      { arg: 'revision', desc: 'target revision (for rollback)' },
+      { arg: 'revision', desc: 'target revision (for rollback); list them with get_resource include=revisions' },
+    ],
+  },
+  {
+    name: 'manage_rollout',
+    write: true,
+    desc: 'Control an Argo Rollout progressive delivery: abort reverts traffic to the last stable version immediately, retry clears an abort, promote advances one step, promote-full skips all remaining steps/pauses/analysis, skip-step advances exactly one canary step. A Rollout paused on an inconclusive analysis names its AnalysisRun in status — read that first.',
+    params: [
+      { arg: 'action', required: true, desc: 'abort, retry, promote, promote-full, or skip-step' },
+      { arg: 'namespace', required: true, desc: 'rollout namespace' },
+      { arg: 'name', required: true, desc: 'rollout name' },
     ],
   },
   {

package/src/components/nav/PrimaryNavRail.tsx

@@ -10,7 +10,7 @@ import {
   GitBranch,
   Boxes,
   Activity,
-  DollarSign,
+  Coins,
   Gauge,
   ShieldCheck,
   Settings,
@@ -80,7 +80,7 @@ const NAV_ITEMS: NavItemDef[] = [
   { view: "gitops", icon: GitBranch, label: "GitOps" },
   { view: "checks", icon: ShieldCheck, label: "Checks" },
   { view: "capacity", icon: Gauge, label: "Capacity" },
-  { view: "cost", icon: DollarSign, label: "Cost" },
+  { view: "cost", icon: Coins, label: "Cost" },
 ];
 
 interface PrimaryNavRailProps {