@skyhook-io/radar-app 1.9.3 → 1.9.5

package/src/components/capacity/shared.tsx

@@ -1341,7 +1341,7 @@ export function EmptyState({
 }: {
   icon: ComponentType<{ className?: string }>;
   title: string;
-  detail: string;
+  detail: ReactNode;
   action?: ReactNode;
 }) {
   return (
@@ -1528,7 +1528,14 @@ export function integrationBlock(
         <EmptyState
           icon={Gauge}
           title="Capacity needs a newer Radar"
-          detail="This cluster's Radar predates the Capacity view (added in Radar v1.9.0). Upgrade the in-cluster Radar to enable it."
+          detail={
+            <>
+              This cluster&rsquo;s Radar predates the Capacity view (added in
+              Radar v1.9.0).
+              <br />
+              Upgrade the in-cluster Radar to enable it.
+            </>
+          }
         />
       );
     return (

package/src/components/diagnose/DiagnoseSurface.tsx

@@ -30,6 +30,7 @@ import { AgentSetupNotice } from "./AgentSetupNotice";
 import { ConsentCard } from "./parts";
 import { buildLaunchCommand, launchAgentLabel, openInTerminal } from "./launch";
 import { type RunSummary, type ExecutionProfile } from "../../api/diagnose";
+import { routePath } from "../../api/config";
 
 function capWord(s: string): string {
   return s ? s[0].toUpperCase() + s.slice(1) : s;
@@ -66,7 +67,7 @@ function InvestigationMenu({ run }: { run: RunSummary }) {
   const [open, setOpen] = useState(false);
   const [copied, setCopied] = useState(false);
   const label = launchAgentLabel(run);
-  const command = buildLaunchCommand(run, `${window.location.origin}/mcp`);
+  const command = buildLaunchCommand(run, `${window.location.origin}${routePath('/mcp')}`);
   // No resumable session yet (or stale run) → nothing to hand off.
   if (!command) return null;
 

package/src/components/home/ClusterHealthCard.tsx

@@ -10,12 +10,17 @@ import { clsx } from 'clsx'
 import { formatCPUMillicores, formatMemoryMiB } from '../../utils/format'
 import { useCapabilitiesContext } from '../../contexts/CapabilitiesContext'
 import { MCPSetupDialog } from './MCPSetupDialog'
-import { pluralize, parseContextName } from '@skyhook-io/k8s-ui'
+import { assetUrl, pluralize, parseContextName } from '@skyhook-io/k8s-ui'
 import { Tooltip } from '../ui/Tooltip'
+import { routePath } from '../../api/config'
 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'
 
+const gkeIconUrl = assetUrl(gkeIcon)
+const eksIconUrl = assetUrl(eksIcon)
+const aksIconUrl = assetUrl(aksIcon)
+
 interface ClusterHealthCardProps {
   health: DashboardResponse['health']
   counts: DashboardResponse['resourceCounts']
@@ -74,13 +79,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: gkeIcon }
+    return { name: 'Google Kubernetes Engine', icon: gkeIconUrl }
   }
   if (platformLower.includes('eks') || platformLower.includes('amazon') || platformLower.includes('aws')) {
-    return { name: 'Amazon EKS', icon: eksIcon }
+    return { name: 'Amazon EKS', icon: eksIconUrl }
   }
   if (platformLower.includes('aks') || platformLower.includes('azure')) {
-    return { name: 'Azure Kubernetes Service', icon: aksIcon }
+    return { name: 'Azure Kubernetes Service', icon: aksIconUrl }
   }
   if (platformLower.includes('openshift')) {
     return { name: 'OpenShift', icon: null }
@@ -138,7 +143,7 @@ export function ClusterHealthCard({
   const mcpEnabled = caps.mcpEnabled
   const isCloud = deployment.mode === 'cloud'
   const isInCluster = deployment.mode === 'in-cluster' || deployment.mode === 'cloud'
-  const mcpUrl = `${window.location.origin}/mcp`
+  const mcpUrl = `${window.location.origin}${routePath('/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.

package/src/components/nav/PrimaryNavRail.tsx

@@ -20,6 +20,9 @@ import {
 import { clsx } from "clsx";
 import type { MainView } from "../../types";
 import { Tooltip } from "../ui/Tooltip";
+import { assetUrl } from "@skyhook-io/k8s-ui";
+
+const radarLogoUrl = assetUrl("/images/radar/radar-icon.svg");
 
 // The views the rail can navigate to. Broader than k8s-ui's ExtendedMainView
 // (which omits 'applications') — it mirrors the navigable subset of App.tsx's
@@ -233,7 +236,7 @@ function BrandRow({
         <span className="flex w-14 shrink-0 items-center justify-center">
           <span className="relative w-7 h-7 rounded-lg overflow-hidden bg-emerald-500/10 border border-emerald-500/20">
             <img
-              src="/images/radar/radar-icon.svg"
+              src={radarLogoUrl}
               alt=""
               aria-hidden
               className="w-full h-full p-0.5"

package/src/components/resources/ImageFilesystemModal.tsx

@@ -2,6 +2,7 @@ import { useState, useRef, useEffect, useMemo, useCallback } from 'react'
 import { createPortal } from 'react-dom'
 import { X, Folder, File, Link2, ChevronRight, ChevronDown, AlertTriangle, Loader2, Search, Download, HardDrive, Shield, ShieldCheck, Terminal, Copy, Check, RefreshCw } from 'lucide-react'
 import radarLoadingIcon from '@skyhook-io/k8s-ui/assets/radar/radar-icon-loading.svg'
+import { assetUrl } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
 import { useImageMetadata, ApiError } from '../../api/client'
 import type { FileNode, ImageFilesystem } from '../../types'
@@ -11,6 +12,8 @@ import { Tooltip } from '../ui/Tooltip'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
 import { Input } from '@skyhook-io/k8s-ui'
 
+const radarLoadingIconUrl = assetUrl(radarLoadingIcon)
+
 // Manual fetch function for filesystem (not a hook - gives us full control)
 async function fetchImageFilesystem(
   image: string,
@@ -182,7 +185,7 @@ export function ImageFilesystemModal({
           {/* Loading state */}
           {isLoading && (
             <div className="flex flex-col items-center justify-center gap-3 h-64">
-              <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
+              <img src={radarLoadingIconUrl} alt="" aria-hidden className="w-11 h-11" />
               <span className="text-sm text-theme-text-secondary">
                 {isLoadingMetadata ? 'Checking image…' : 'Downloading image layers…'}
               </span>

package/src/components/settings/SettingsDialog.tsx

@@ -9,7 +9,7 @@ import {
 import { clsx } from 'clsx'
 import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
 import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
-import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
+import { apiUrl, getAuthHeaders, getCredentialsMode, routePath } from '../../api/config'
 import {
   useCloudRole, useVersionCheck, useClusterInfo, usePrometheusStatus, useArgoStatus,
 } from '../../api/client'
@@ -20,6 +20,14 @@ import { AISettingsSection, type AIDraft } from '../diagnose/AISettings'
 import { MyPermissionsContent } from './MyPermissionsDialog'
 import { useDiagnose } from '../diagnose/DiagnoseContext'
 
+// The loopback URL an MCP client is told to connect to. Shared by the overview
+// row and the MCP section: both must carry the base path, or the URL they
+// advertise 404s under a subpath deployment.
+function mcpLoopbackUrl(): string {
+  const port = Number(window.location.port) || 80
+  return `http://localhost:${port}${routePath('/mcp')}`
+}
+
 interface Config {
   kubeconfig?: string
   kubeconfigDirs?: string[]
@@ -842,8 +850,7 @@ function OverviewPanel({ active, onNavigate }: { active: boolean; onNavigate: (s
   const agentLabel =
     diag.agents.find((a) => a.name === diag.selectedAgent)?.label ?? diag.agents[0]?.label
   const mcpOn = capabilities.mcpEnabled
-  const port = Number(window.location.port) || 80
-  const mcpUrl = `http://localhost:${port}/mcp`
+  const mcpUrl = mcpLoopbackUrl()
 
   const rows: OverviewRow[] = [
     {
@@ -964,8 +971,10 @@ function AIUnavailableNotice() {
     <div className="rounded-md border border-theme-border bg-theme-elevated/50 p-3">
       <p className="text-sm font-medium text-theme-text-primary">No supported agent CLI found</p>
       <p className="mt-1 text-xs text-theme-text-tertiary">
-        Install <span className="text-theme-text-secondary">Claude Code</span> or{' '}
-        <span className="text-theme-text-secondary">Codex</span>, then restart Radar — this tab
+        Install <span className="text-theme-text-secondary">Claude Code</span>,{' '}
+        <span className="text-theme-text-secondary">Codex</span>, or{' '}
+        <span className="text-theme-text-secondary">Cursor</span> (
+        <span className="font-mono">cursor-agent</span>), then restart Radar — this tab
         will show the agent, model, and effort controls.
       </p>
     </div>
@@ -1117,7 +1126,7 @@ function MCPSection({
   const [copied, setCopied] = useState(false)
 
   const currentPort = Number(window.location.port) || 80
-  const mcpUrl = `http://localhost:${currentPort}/mcp`
+  const mcpUrl = mcpLoopbackUrl()
 
   const handleCopy = () => {
     navigator.clipboard.writeText(mcpUrl)

package/src/components/traffic/TrafficWizard.tsx

@@ -1,10 +1,12 @@
 import { useState, useEffect } from 'react'
 import type { TrafficSourcesResponse, TrafficWizardState } from '../../types'
 import { CheckCircle2, XCircle, AlertTriangle, Copy, ExternalLink, ArrowRight, ArrowLeft, Package } from 'lucide-react'
-import { PaneLoader } from '@skyhook-io/k8s-ui'
+import { assetUrl, PaneLoader } from '@skyhook-io/k8s-ui'
 import radarLoadingIcon from '@skyhook-io/k8s-ui/assets/radar/radar-icon-loading.svg'
 import { InstallWizard } from '../helm/InstallWizard'
 
+const radarLoadingIconUrl = assetUrl(radarLoadingIcon)
+
 interface TrafficWizardProps {
   state: TrafficWizardState
   setState: (state: TrafficWizardState) => void
@@ -100,7 +102,7 @@ export function TrafficWizard({
         <div className="flex items-center justify-center h-full w-full">
           <div className="max-w-md w-full p-6 space-y-6">
             <div className="flex flex-col items-center gap-3">
-              <img src={radarLoadingIcon} alt="" aria-hidden className="h-11 w-11" />
+              <img src={radarLoadingIconUrl} alt="" aria-hidden className="h-11 w-11" />
               <h2 className="text-lg font-medium text-theme-text-primary">Waiting for traffic source…</h2>
               <p className="text-sm text-theme-text-secondary">
                 Checking for availability

package/src/main.tsx

@@ -153,8 +153,14 @@ window.addEventListener('mouseup', (e: MouseEvent) => {
 // tab, so it opts into per-view document.title. Library consumers (e.g.
 // radar-hub-web) render <RadarApp apiBase="..." basename="..." /> WITHOUT this
 // flag, keeping their own tab title.
+const runtimeConfig = window.__RADAR_RUNTIME_CONFIG__
+
 ReactDOM.createRoot(document.getElementById('radar')!).render(
   <React.StrictMode>
-    <RadarApp manageDocumentTitle />
+    <RadarApp
+      apiBase={runtimeConfig?.apiBase}
+      basename={runtimeConfig?.basePath}
+      manageDocumentTitle
+    />
   </React.StrictMode>
 )

package/src/vite-env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface Window {
+  __RADAR_RUNTIME_CONFIG__?: {
+    basePath?: string
+    apiBase?: string
+    assetBase?: string
+  }
+}