@skyhook-io/radar-app 1.9.4 → 1.9.5

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[] = [
     {
@@ -1119,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
+  }
+}