@skyhook-io/radar-app 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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",
@@ -32,7 +32,7 @@
     "@monaco-editor/react": "^4.7.0",
     "diff": "^9.0.0",
     "react-markdown": "^10.1.0",
-    "react-virtuoso": "^4.18.5",
+    "react-virtuoso": "^4.18.6",
     "remark-gfm": "^4.0.1",
     "shiki": "^4.0.1",
     "yaml": "^2.8.3"
@@ -54,7 +54,7 @@
     "@skyhook-io/k8s-ui": "*",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.2.4",
-    "@tanstack/react-query": "^5.99.0",
+    "@tanstack/react-query": "^5.100.6",
     "@types/diff": "^8.0.0",
     "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
@@ -63,8 +63,8 @@
     "@xyflow/react": "^12.10.2",
     "clsx": "^2.1.1",
     "elkjs": "^0.11.1",
-    "lucide-react": "^1.8.0",
-    "postcss": "^8.5.8",
+    "lucide-react": "^1.12.0",
+    "postcss": "^8.5.12",
     "prettier": "^3.8.1",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
@@ -72,7 +72,7 @@
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.4",
     "typescript": "^6.0.2",
-    "vite": "^8.0.9"
+    "vite": "^8.0.10"
   },
   "sideEffects": [
     "*.css"

package/src/App.tsx

@@ -366,7 +366,7 @@ function AppInner() {
   const switchContext = useSwitchContext()
 
   // View switching keyboard shortcuts
-  const views: ExtendedMainView[] = ['home', 'topology', 'resources', 'timeline', 'helm', 'traffic']
+  const views: ExtendedMainView[] = ['home', 'topology', 'resources', 'timeline', 'helm', 'traffic', 'cost', 'audit']
   useRegisterShortcuts([
     ...views.map((view, i) => ({
       id: `view-${view}`,

package/src/assets/platform-icons/azure-aks.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="url(#azure-aks-color-16__paint0_linear_2372_185)" d="M5.511 2l-2.224.412v3.034l2.224.474 2.232-.894V2.762L5.511 2z"/><path fill="#341A6E" d="M3.287 2.412v3.034l2.247.474V2.031l-2.247.381zm.949 2.8l-.63-.124V2.754l.63-.1v2.558zm.98.18l-.724-.118V2.607l.724-.125v2.91z"/><path fill="url(#azure-aks-color-16__paint1_linear_2372_185)" d="M10.325 2.039l-2.224.412v3.033l2.224.475 2.225-.902V2.8l-2.225-.762z"/><path fill="#341A6E" d="M8.101 2.451v3.033l2.232.475V2.07l-2.232.381zm.941 2.8l-.63-.124V2.793l.63-.1V5.25zm.98.179L9.3 5.313V2.646l.723-.133V5.43z"/><path fill="url(#azure-aks-color-16__paint2_linear_2372_185)" d="M3.232 6.184l-2.224.413V9.63l2.224.474 2.232-.894V6.947l-2.232-.763z"/><path fill="#341A6E" d="M1 6.597v3.01l2.248.474V6.192L1 6.597zm.941 2.807l-.63-.132V6.94l.63-.109v2.574zm.988.203l-.723-.117V6.791l.723-.124v2.94z"/><path fill="url(#azure-aks-color-16__paint3_linear_2372_185)" d="M8.031 6.153l-2.224.413v3.033l2.224.482 2.224-.902V6.916l-2.224-.763z"/><path fill="#341A6E" d="M5.807 6.566v3.04l2.24.475V6.192l-2.24.374zm.94 2.807l-.63-.132V6.908l.63-.11v2.575zm.98.171l-.723-.116V6.76l.724-.124v2.908z"/><path fill="url(#azure-aks-color-16__paint4_linear_2372_185)" d="M12.83 6.192l-2.225.412v3.034l2.225.474 2.232-.894V6.954l-2.232-.762z"/><path fill="#341A6E" d="M10.605 6.604v3.003l2.248.474V6.192l-2.248.412zm.95 2.808l-.63-.132V6.947l.63-.11v2.575zm.98.171l-.724-.116V6.799l.723-.125v2.91z"/><path fill="url(#azure-aks-color-16__paint5_linear_2372_185)" d="M5.457 10.415l-2.225.405v3.033l2.225.482 2.232-.902v-2.255l-2.232-.763z"/><path fill="#341A6E" d="M3.232 10.82v3.033l2.248.483v-3.952l-2.248.436zm.95 2.808l-.63-.132v-2.334l.63-.109v2.575zm.98.179l-.724-.117v-2.675l.723-.125v2.917z"/><path fill="url(#azure-aks-color-16__paint6_linear_2372_185)" d="M10.263 10.447l-2.224.412v3.033l2.224.475 2.232-.895V11.21l-2.232-.762z"/><path fill="#341A6E" d="M8.039 10.859v3.033l2.248.475v-3.89l-2.248.382zm.949 2.808l-.63-.133v-2.333l.63-.109v2.575zm.98.17l-.724-.116v-2.668l.724-.124v2.909z"/><defs><linearGradient id="azure-aks-color-16__paint0_linear_2372_185" x1="3.287" x2="7.743" y1="3.96" y2="3.96" gradientUnits="userSpaceOnUse"><stop stop-color="#B77AF4"/><stop offset="1" stop-color="#773ADC"/></linearGradient><linearGradient id="azure-aks-color-16__paint1_linear_2372_185" x1="8.101" x2="12.55" y1="3.999" y2="3.999" gradientUnits="userSpaceOnUse"><stop stop-color="#B77AF4"/><stop offset="1" stop-color="#773ADC"/></linearGradient><linearGradient id="azure-aks-color-16__paint2_linear_2372_185" x1="1.008" x2="5.457" y1="8.144" y2="8.144" gradientUnits="userSpaceOnUse"><stop stop-color="#B77AF4"/><stop offset="1" stop-color="#773ADC"/></linearGradient><linearGradient id="azure-aks-color-16__paint3_linear_2372_185" x1="5.807" x2="10.255" y1="8.113" y2="8.113" gradientUnits="userSpaceOnUse"><stop stop-color="#B77AF4"/><stop offset="1" stop-color="#773ADC"/></linearGradient><linearGradient id="azure-aks-color-16__paint4_linear_2372_185" x1="10.605" x2="15.062" y1="8.152" y2="8.152" gradientUnits="userSpaceOnUse"><stop stop-color="#B77AF4"/><stop offset="1" stop-color="#773ADC"/></linearGradient><linearGradient id="azure-aks-color-16__paint5_linear_2372_185" x1="3.232" x2="7.689" y1="12.376" y2="12.376" gradientUnits="userSpaceOnUse"><stop stop-color="#B77AF4"/><stop offset="1" stop-color="#773ADC"/></linearGradient><linearGradient id="azure-aks-color-16__paint6_linear_2372_185" x1="8.039" x2="12.495" y1="12.407" y2="12.407" gradientUnits="userSpaceOnUse"><stop stop-color="#B77AF4"/><stop offset="1" stop-color="#773ADC"/></linearGradient></defs></svg>

package/src/components/home/ClusterHealthCard.tsx

@@ -12,6 +12,9 @@ import { useCapabilitiesContext } from '../../contexts/CapabilitiesContext'
 import { MCPSetupDialog } from './MCPSetupDialog'
 import { pluralize, parseContextName } from '@skyhook-io/k8s-ui'
 import { Tooltip } from '../ui/Tooltip'
+import gkeIcon from '../../assets/platform-icons/google_kubernetes_engine.png'
+import eksIcon from '../../assets/platform-icons/aws_eks.png'
+import aksIcon from '../../assets/platform-icons/azure-aks.svg'
 
 interface ClusterHealthCardProps {
   health: DashboardResponse['health']
@@ -67,13 +70,13 @@ function MetricsUnavailableHint({ platform, metricsServerAvailable }: { platform
 function getPlatformInfo(platform: string): { name: string; icon: string | null } {
   const platformLower = platform.toLowerCase()
   if (platformLower.includes('gke') || platformLower.includes('google')) {
-    return { name: 'Google Kubernetes Engine', icon: '/icons/google_kubernetes_engine.png' }
+    return { name: 'Google Kubernetes Engine', icon: gkeIcon }
   }
   if (platformLower.includes('eks') || platformLower.includes('amazon') || platformLower.includes('aws')) {
-    return { name: 'Amazon EKS', icon: '/icons/aws_eks.png' }
+    return { name: 'Amazon EKS', icon: eksIcon }
   }
   if (platformLower.includes('aks') || platformLower.includes('azure')) {
-    return { name: 'Azure Kubernetes Service', icon: '/icons/azure-aks.svg' }
+    return { name: 'Azure Kubernetes Service', icon: aksIcon }
   }
   if (platformLower.includes('openshift')) {
     return { name: 'OpenShift', icon: null }
@@ -93,7 +96,14 @@ function getPlatformInfo(platform: string): { name: string; icon: string | null
   if (platformLower.includes('docker')) {
     return { name: 'Docker Desktop', icon: null }
   }
-  return { name: platform || 'Kubernetes', icon: null }
+  // The Go backend returns "generic" for unrecognized platforms — that
+  // literal string is no better than the empty case, so fall back to
+  // the friendlier "Kubernetes" label for both. Only pass the platform
+  // string through when it's actually a recognizable name.
+  if (!platform || platformLower === 'generic') {
+    return { name: 'Kubernetes', icon: null }
+  }
+  return { name: platform, icon: null }
 }
 
 export function ClusterHealthCard({
@@ -113,8 +123,20 @@ export function ClusterHealthCard({
   void _topCRDs // Reserved for future CRD display
 
   const [mcpDialogOpen, setMcpDialogOpen] = useState(false)
-  const { mcpEnabled } = useCapabilitiesContext()
+  const caps = useCapabilitiesContext()
+  // Default to local mode when the backend doesn't ship a `deployment`
+  // field (older Radar binaries pre-0.2.2). Local rendering is the safe
+  // OSS-shape default — wrong-direction defaults would briefly suppress
+  // chrome OSS users expect to see.
+  const deployment = caps.deployment ?? { mode: 'local' as const }
+  const mcpEnabled = caps.mcpEnabled
+  const isCloud = deployment.mode === 'cloud'
+  const isInCluster = deployment.mode === 'in-cluster' || deployment.mode === 'cloud'
   const mcpUrl = `${window.location.origin}/mcp`
+  // In Cloud, MCP is org-wide and PAT-authed (api.radarhq.io/mcp). The OSS
+  // "this binary is your local MCP server" framing is wrong there — Cloud
+  // surfaces MCP from the hub Home dashboard instead.
+  const showLocalMcpCard = mcpEnabled && !isCloud
 
   const restricted = counts.restricted ?? []
   const isRestricted = (kind: string) => restricted.includes(kind)
@@ -158,13 +180,23 @@ export function ClusterHealthCard({
     { kind: 'cronjobs', label: 'CronJobs', icon: Clock, total: counts.cronJobs.total, subtitle: `${counts.cronJobs.active} active` },
   ]
   const platformInfo = getPlatformInfo(cluster.platform)
-  // The raw cluster.name is the kubeconfig context (e.g.
-  // `gke_koalabackend_us-east1-b_nonprod-cluster-us-east1`). That string
-  // is the user's primary orientation cue, but the bit they actually
-  // recognize is the short clusterName. We promote that, push the raw
-  // path into a tooltip, and surface project/region as muted metadata.
+  // Headline-name derivation has three branches, in priority order:
+  //  1. Local-kubeconfig users get the parsed short clusterName from a
+  //     string like `gke_koalabackend_us-east1-b_nonprod-cluster-us-east1`
+  //     (the meaningful tail). Account/region are surfaced separately
+  //     below as muted metadata, and the raw path is exposed via tooltip
+  //     on the headline element.
+  //  2. In-cluster mode (deployment.mode === 'in-cluster' OR 'cloud')
+  //     has no meaningful kubeconfig context — bootstrap sets it to
+  //     the literal "in-cluster" sentinel. Fall back to the platform
+  //     label ("Google Kubernetes Engine") which IS recognizable.
+  //  3. Last resort: the literal cluster.name, or "Cluster".
+  // When the card is rendered embedded (cloud mode), the H2 itself is
+  // suppressed below — the hub shell already shows the cluster name in
+  // its top bar.
   const parsedContext = parseContextName(cluster.name || '')
-  const headlineName = parsedContext.clusterName || cluster.name || 'Cluster'
+  const rawHeadline = parsedContext.clusterName || cluster.name || 'Cluster'
+  const headlineName = isInCluster ? platformInfo.name : rawHeadline
 
   return (
     <div className="rounded-xl bg-theme-surface shadow-theme-sm overflow-hidden">
@@ -181,12 +213,23 @@ export function ClusterHealthCard({
               )}
               <span className="text-xs text-theme-text-secondary truncate">{platformInfo.name}</span>
             </div>
-            <h2
-              className="text-xl font-semibold text-theme-text-primary truncate mb-1.5 leading-tight"
-              title={cluster.name}
-            >
-              {headlineName}
-            </h2>
+            {/* In Cloud, the hub shell already shows the cluster name in
+                its top bar; rendering it again here is redundant and
+                makes the card feel like a label rather than content. */}
+            {!isCloud && (
+              <h2
+                className="text-xl font-semibold text-theme-text-primary truncate mb-1.5 leading-tight"
+                // In-cluster mode's cluster.name is the literal "in-cluster"
+                // sentinel, which would leak via the browser hover tooltip
+                // even though the visible text falls back to the platform
+                // label. Drop the title attribute entirely in that case;
+                // local mode keeps it so users can hover to see the full
+                // kubeconfig context path.
+                title={isInCluster ? undefined : cluster.name}
+              >
+                {headlineName}
+              </h2>
+            )}
             <div className="flex flex-col gap-0.5 text-xs text-theme-text-tertiary">
               {(parsedContext.account || parsedContext.region) && (
                 <span className="truncate font-mono" title={[parsedContext.account, parsedContext.region].filter(Boolean).join(' · ')}>
@@ -197,7 +240,11 @@ export function ClusterHealthCard({
                 <span>Kubernetes {cluster.version}</span>
               )}
               <span><span className="font-mono">{counts.namespaces}</span> namespaces</span>
-              {cluster.name && cluster.name !== headlineName && (
+              {/* Show raw kubeconfig context as muted metadata only when
+                  it differs from the headline AND we're in local mode
+                  (in-cluster has no meaningful context name, cloud
+                  shell already renders the canonical name). */}
+              {cluster.name && cluster.name !== headlineName && deployment.mode === 'local' && (
                 <span
                   className="font-mono text-[10px] text-theme-text-disabled break-all leading-snug pt-0.5"
                   title={cluster.name}
@@ -229,8 +276,11 @@ export function ClusterHealthCard({
                 </span>
               </Tooltip>
             )}
-            {/* MCP Server indicator */}
-            {mcpEnabled && (
+            {/* MCP Server indicator. OSS-only: in Cloud, MCP discovery
+                lives at the hub level (org-wide endpoint, PAT-authed)
+                rather than per-cluster, so this localhost/no-auth card
+                would mislead a Cloud user. */}
+            {showLocalMcpCard && (
               <button
                 onClick={() => setMcpDialogOpen(true)}
                 className="flex items-center gap-2 mt-3 px-2.5 py-2 bg-purple-500/5 hover:bg-purple-500/10 border border-purple-500/20 rounded-md transition-colors w-full"

package/src/components/resources/ResourcesView.tsx

@@ -181,15 +181,14 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       pinned={pinned}
       togglePin={togglePin}
       isPinned={(kind: string, group?: string) => isPinned(kind, group ?? '')}
-      // Navigation. basePath is the full URL prefix where the Resources view
-      // lives — '/resources' for standalone Radar, '/c/{cluster}/resources'
-      // when embedded in a host app that mounts RadarApp under a basename.
-      // k8s-ui's ResourcesView uses this to read the current kind out of
-      // window.location.pathname and to write URL updates (drawer open/close,
-      // filter changes) back via history.replaceState. Without the basename
-      // prefix, those writes would drop the host-app route context and the
-      // URL would no longer be reloadable.
-      basePath={getBasename() + '/resources'}
+      // Navigation. basePath is basename-relative. React Router's useLocation
+      // strips the basename from `location.pathname`, so reading the current
+      // kind compares basename-relative paths on both sides. URL writes go
+      // through `handleNavigate`, which strips any leading basename before
+      // handing off to react-router (which re-applies it). Embedding hosts
+      // (e.g. Radar Cloud at /c/{cluster}/resources) work without ResourcesView
+      // needing to know the basename.
+      basePath="/resources"
       locationSearch={location.search}
       locationPathname={location.pathname}
       onNavigate={handleNavigate}

package/src/contexts/CapabilitiesContext.tsx

@@ -13,6 +13,11 @@ const defaultCapabilities: Capabilities = {
   helmWrite: true,
   nodeWrite: true,
   mcpEnabled: true,
+  // Default to 'local' for the loading window so the UI renders the
+  // OSS standalone shape until /api/capabilities resolves. Both
+  // alternatives ('in-cluster', 'cloud') would cause OSS users to
+  // briefly see suppressed chrome — wrong default direction.
+  deployment: { mode: 'local' },
 }
 
 // Restricted capabilities for error/failure cases (fail-closed)
@@ -26,6 +31,7 @@ const restrictedCapabilities: Capabilities = {
   helmWrite: false,
   nodeWrite: false,
   mcpEnabled: false,
+  deployment: { mode: 'local' },
 }
 
 const CapabilitiesContext = createContext<Capabilities>(defaultCapabilities)