@skyhook-io/radar-app 1.9.4 → 1.9.6

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[] = [
     {
@@ -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