@skyhook-io/radar-app 1.9.5 → 1.9.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.9.5",
+  "version": "1.9.7",
   "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",
@@ -41,7 +41,7 @@
     "yaml": "^2.9.0"
   },
   "peerDependencies": {
-    "@skyhook-io/k8s-ui": ">=1.10.0",
+    "@skyhook-io/k8s-ui": ">=1.11.0",
     "@tanstack/react-query": ">=5",
     "@xyflow/react": ">=12.0.0",
     "clsx": ">=2",
@@ -60,22 +60,22 @@
     "@tailwindcss/vite": "^4.3.3",
     "@tanstack/react-query": "^5.101.4",
     "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
+    "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.4",
     "@xyflow/react": "^12.11.2",
     "clsx": "^2.1.1",
     "elkjs": "^0.11.1",
-    "eslint": "^10.6.0",
+    "eslint": "^10.8.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
-    "globals": "^17.7.0",
-    "lucide-react": "^1.24.0",
-    "postcss": "^8.5.16",
+    "globals": "^17.9.0",
+    "lucide-react": "^1.28.0",
+    "postcss": "^8.5.25",
     "prettier": "^3.9.5",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "react-router-dom": "^7.18.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.2",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.3",
     "typescript": "^6.0.2",

package/src/api/client.authRedirect.test.ts

@@ -0,0 +1,194 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+// Deterministic config so the 401 handler's basename/routePath math is fixed and
+// independent of window/env. client.ts only consumes these six exports.
+vi.mock('./config', () => ({
+  getApiBase: () => '/api',
+  getAuthHeaders: () => ({}),
+  getCredentialsMode: () => 'include' as RequestCredentials,
+  getBasename: () => '',
+  routePath: (p: string) => p,
+  stripBasename: (p: string) => p,
+}))
+
+interface NavRecorder {
+  count: number
+  urls: string[]
+}
+
+// Stub window.location (counting href assignments + reloads) and sessionStorage.
+// Runs in vitest's node environment — there is no real DOM.
+function installDom(pathname = '/traffic'): NavRecorder {
+  const rec: NavRecorder = { count: 0, urls: [] }
+  const location: Record<string, unknown> = {
+    pathname,
+    search: '',
+    _href: `http://radar.local${pathname}`,
+    reload: () => {
+      rec.count++
+      rec.urls.push('[reload]')
+    },
+  }
+  Object.defineProperty(location, 'href', {
+    get() {
+      return location._href as string
+    },
+    set(v: string) {
+      rec.count++
+      rec.urls.push(v)
+      location._href = v
+    },
+  })
+  vi.stubGlobal('window', { location })
+
+  const store = new Map<string, string>()
+  vi.stubGlobal('sessionStorage', {
+    getItem: (k: string) => (store.has(k) ? (store.get(k) as string) : null),
+    setItem: (k: string, v: string) => {
+      store.set(k, String(v))
+    },
+  })
+  return rec
+}
+
+// A 401 whose body advertises the auth mode, matching what the backend returns
+// on a protected /api/* call with no session.
+function make401(authMode: string): Response {
+  const body = JSON.stringify({ authMode })
+  return {
+    status: 401,
+    ok: false,
+    clone() {
+      return make401(authMode)
+    },
+    async json() {
+      return JSON.parse(body)
+    },
+  } as unknown as Response
+}
+
+beforeEach(() => {
+  // Reset module state so the redirect gate starts fresh.
+  vi.resetModules()
+  vi.unstubAllGlobals()
+  vi.restoreAllMocks()
+})
+
+describe('apiFetch OIDC 401 -> login redirect (single-flight)', () => {
+  it('navigates to /auth/login exactly once for a burst of concurrent 401s', async () => {
+    const rec = installDom('/traffic')
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async () => make401('oidc')),
+    )
+    const { apiFetch } = await import('./client')
+
+    // Mirror first paint / mid-session expiry: many protected calls 401 together.
+    const paths = [
+      '/connection',
+      '/capabilities',
+      '/namespaces',
+      '/portforwards',
+      '/dashboard',
+      '/issues',
+      '/auth/me',
+      '/topology',
+    ]
+    await Promise.all(paths.map((p) => apiFetch(`/api${p}`)))
+
+    expect(rec.count).toBe(1)
+    expect(rec.urls).toEqual(['/auth/login'])
+  })
+
+  it('still redirects on the first 401 (guard does not suppress the initial navigation)', async () => {
+    const rec = installDom('/traffic')
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async () => make401('oidc')),
+    )
+    const { apiFetch } = await import('./client')
+
+    await apiFetch('/api/connection')
+
+    expect(rec.count).toBe(1)
+    expect(rec.urls).toEqual(['/auth/login'])
+  })
+
+  it('re-redirects after the throttle window (self-heals canceled nav / bfcache Back)', async () => {
+    const rec = installDom('/traffic')
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async () => make401('oidc')),
+    )
+    const nowSpy = vi.spyOn(Date, 'now')
+    const { apiFetch } = await import('./client')
+
+    nowSpy.mockReturnValue(1_000_000)
+    await apiFetch('/api/connection')
+    expect(rec.count).toBe(1)
+
+    // Within the window a repeat 401 is suppressed (no state rotation).
+    nowSpy.mockReturnValue(1_000_000 + 2_000)
+    await apiFetch('/api/connection')
+    expect(rec.count).toBe(1)
+
+    // Past the window it redirects again instead of stalling until a hard reload.
+    nowSpy.mockReturnValue(1_000_000 + 6_000)
+    await apiFetch('/api/connection')
+    expect(rec.count).toBe(2)
+  })
+
+  it('still redirects (once) when sessionStorage is blocked', async () => {
+    // Simulate private-mode / sandboxed storage where every access throws.
+    const rec = installDom('/traffic')
+    vi.stubGlobal('sessionStorage', {
+      getItem: () => {
+        throw new DOMException('blocked', 'SecurityError')
+      },
+      setItem: () => {
+        throw new DOMException('blocked', 'SecurityError')
+      },
+    })
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async () => make401('oidc')),
+    )
+    const { apiFetch } = await import('./client')
+
+    // Fail-open: the throwing read must not abort the redirect...
+    await Promise.all(
+      ['/connection', '/capabilities', '/namespaces'].map((p) => apiFetch(`/api${p}`)),
+    )
+    // ...and the in-memory fallback still collapses the burst to one navigation.
+    expect(rec.count).toBe(1)
+    expect(rec.urls).toEqual(['/auth/login'])
+  })
+
+  it('does not navigate to /auth/login when already on an /auth path', async () => {
+    const rec = installDom('/auth/login')
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async () => make401('oidc')),
+    )
+    const { apiFetch } = await import('./client')
+
+    await apiFetch('/api/connection')
+
+    expect(rec.count).toBe(0)
+    expect(rec.urls).toEqual([])
+  })
+
+  it('proxy/unknown mode reloads (once) instead of hitting /auth/login', async () => {
+    const rec = installDom('/traffic')
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async () => make401('proxy')),
+    )
+    const { apiFetch } = await import('./client')
+
+    await apiFetch('/api/connection')
+
+    expect(rec.urls).toEqual(['[reload]'])
+    expect(rec.urls).not.toContain('/auth/login')
+  })
+})

package/src/api/client.trace.test.ts

@@ -0,0 +1,37 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { runInClusterMerged } from './client'
+
+// The in-cluster endpoint returns a JSON body on denial too, and a Hub
+// ingress/chi timeout returns HTML. Every branch must surface as a thrown
+// error with the truthful message - a partial body painted as a
+// server-finalized trace would be a fabricated result.
+const respond = (status: number, body: string, contentType = 'application/json') =>
+  vi.stubGlobal('fetch', () =>
+    Promise.resolve(new Response(body, { status, headers: { 'Content-Type': contentType } })),
+  )
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('runInClusterMerged error surfacing', () => {
+  it('rejects a denial with the server message', async () => {
+    respond(403, JSON.stringify({ error: 'your Radar Cloud role cannot run an in-cluster reachability test' }))
+    await expect(runInClusterMerged('Service', 'prod', 'web')).rejects.toThrow(/Cloud role/)
+  })
+
+  it('rejects a 200 that carries an error field', async () => {
+    respond(200, JSON.stringify({ error: 'no eligible routes' }))
+    await expect(runInClusterMerged('Service', 'prod', 'web')).rejects.toThrow('no eligible routes')
+  })
+
+  it('rejects a non-JSON gateway failure with the status, not a parse error', async () => {
+    respond(504, '<html>Gateway Timeout</html>', 'text/html')
+    await expect(runInClusterMerged('Service', 'prod', 'web')).rejects.toThrow('In-cluster test failed (504)')
+  })
+
+  it('resolves a clean run with the finalized payload', async () => {
+    respond(200, JSON.stringify({ trace: { subject: { kind: 'Service', name: 'web' } }, inClusterTests: [] }))
+    await expect(runInClusterMerged('Service', 'prod', 'web')).resolves.toMatchObject({ inClusterTests: [] })
+  })
+})

package/src/api/client.ts

@@ -68,6 +68,49 @@ const COST_TREND_REFRESH_INTERVAL_MS = 120_000;
 const CHANGES_REFRESH_INTERVAL_MS = 60_000;
 const APPLICATIONS_REFRESH_INTERVAL_MS = 60_000;
 
+// Throttle window for the OIDC login redirect. On first paint (and again on
+// mid-session session expiry) many protected /api/* requests can 401 in the same
+// tick; without a guard each 401 independently navigates to /auth/login, and each
+// /auth/login regenerates the single radar_oidc_state cookie — so callbacks from
+// earlier redirects fail state validation (or get their token exchange canceled)
+// and the login loops until one happens to win. A short time gate collapses the
+// burst to one navigation while still self-recovering if that navigation is
+// canceled or the page is restored from bfcache (module/JS-realm state survives
+// bfcache, so a plain latch would stick). Mirrors the proxy branch's reload
+// throttle below.
+const OIDC_LOGIN_REDIRECT_THROTTLE_MS = 5000;
+const OIDC_LOGIN_REDIRECT_KEY = "radar_oidc_login_redirect";
+
+// In-memory fallback for when sessionStorage is unavailable (private mode,
+// sandboxed/blocked storage). A timestamp, not a boolean latch, so it still
+// self-heals within the throttle window instead of sticking.
+let lastOidcLoginRedirectAt = 0;
+
+// Fail open: if reading storage throws, fall back to the in-memory timestamp so
+// the redirect still fires. Otherwise the 401 handler would reject before
+// redirecting and strand the user on a "not signed in" screen.
+function lastOidcLoginRedirect(): number {
+  try {
+    const stored = sessionStorage.getItem(OIDC_LOGIN_REDIRECT_KEY);
+    if (stored) {
+      const parsed = parseInt(stored);
+      if (!Number.isNaN(parsed)) return parsed;
+    }
+  } catch {
+    /* storage blocked — use the in-memory fallback */
+  }
+  return lastOidcLoginRedirectAt;
+}
+
+function markOidcLoginRedirect(now: number): void {
+  lastOidcLoginRedirectAt = now;
+  try {
+    sessionStorage.setItem(OIDC_LOGIN_REDIRECT_KEY, String(now));
+  } catch {
+    /* best-effort — the in-memory fallback still throttles this realm */
+  }
+}
+
 // Wrapper around fetch that always includes credentials (for session cookies)
 // and handles 401 responses globally. Merges caller-provided headers with
 // auth headers from the config module so library consumers (Radar Hub) can
@@ -112,7 +155,15 @@ export function apiFetch(
       }
 
       if (authMode === "oidc") {
-        window.location.href = routePath("/auth/login");
+        // Only the first 401 in a burst navigates; concurrent 401s within the
+        // window are suppressed so they don't rotate radar_oidc_state. The gate
+        // is time-based, so a canceled navigation or bfcache Back re-auths on the
+        // next 401 instead of stalling until a hard reload.
+        const now = Date.now();
+        if (now - lastOidcLoginRedirect() > OIDC_LOGIN_REDIRECT_THROTTLE_MS) {
+          markOidcLoginRedirect(now);
+          window.location.href = routePath("/auth/login");
+        }
       } else {
         // Proxy mode or unknown — reload is safe for both (proxy re-injects headers,
         // unknown avoids redirecting to /auth/login which doesn't exist in proxy mode).
@@ -262,6 +313,7 @@ export interface DashboardProblem {
   ageSeconds: number;
   duration: string;
   durationSeconds: number;
+  onsetUnknown?: boolean;
   podCount?: number;
 }
 
@@ -626,6 +678,85 @@ export function useResourceIssues(
   });
 }
 
+import type { Trace as NetworkTrace, InClusterCapability } from '@skyhook-io/k8s-ui'
+
+// useTrace polls the static path-shaped diagnosis for one network entry
+// kind. 5s refetch + 15s staleTime keeps the drawer feeling live without
+// burning request budget; probes are deliberately excluded - they run via
+// fetchTraceWithProbes on operator click.
+export function useTrace(kind: string, namespace: string, name: string, enabled = true) {
+  return useQuery<NetworkTrace>({
+    queryKey: ['trace', kind, namespace, name, 'static'],
+    queryFn: () => fetchJSON(`/trace/${kind}/${namespace}/${name}`),
+    staleTime: 15000,
+    refetchInterval: enabled ? 5000 : false,
+    enabled: enabled && Boolean(kind) && Boolean(namespace) && Boolean(name),
+  })
+}
+
+// fetchTraceWithProbes is one-shot rather than polled: probes generate real
+// network traffic that observability systems can see, so they are NOT polled.
+// They fire on an explicit, scoped trigger - the operator clicking Run, or
+// opening the Reachability tab for a resource (auto-run once per resource, so the
+// tab shows results instead of a blank "click Run" page) - never on every render
+// or background refresh. The in-cluster probe (which spawns a Job) stays
+// click-only.
+export function fetchTraceWithProbes(kind: string, namespace: string, name: string, path?: string): Promise<NetworkTrace> {
+  const q = path && path !== '/' ? `&path=${encodeURIComponent(path)}` : ''
+  return fetchJSON(`/trace/${kind}/${namespace}/${name}?probe=true${q}`)
+}
+
+// fetchInClusterCapability tells the UI whether the active "test from inside the
+// cluster" probe can run for this caller (and names the cluster + namespace).
+export function fetchInClusterCapability(kind: string, namespace: string, name: string): Promise<InClusterCapability> {
+  return fetchJSON(`/trace/${kind}/${namespace}/${name}/probe-in-cluster/capability`)
+}
+
+// InClusterMergedResult is the WHOLE-subject in-cluster test: the server runs every
+// route's live probe, folds them in via the canonical trace.ApplyInClusterResults,
+// and returns the FINALIZED trace - so the frontend displays it directly instead of
+// reimplementing a weaker merge that could falsely confirm a sibling route.
+// InClusterTestOutcome is one route's in-cluster result. A failure (the Job
+// couldn't start / timed out / RBAC) comes back as HTTP 200 with a human status
+// and a copyable fallbackCommand - it MUST be surfaced, not dropped.
+export interface InClusterTestOutcome {
+  route: string
+  target?: string
+  status?: string
+  fallbackCommand?: string
+  // Raw probe results when the run produced any. A status WITH results is
+  // informational context; a status WITHOUT results means the route (or the
+  // whole subject) was not tested and the status must be surfaced.
+  results?: unknown[]
+}
+
+export interface InClusterMergedResult {
+  trace: NetworkTrace
+  inClusterTests?: InClusterTestOutcome[]
+}
+
+// runInClusterMerged triggers the whole-subject in-cluster test and returns the
+// server-finalized trace. The endpoint returns a JSON body on denial too, so
+// parse the body either way and surface the error field.
+export async function runInClusterMerged(kind: string, namespace: string, name: string, path?: string): Promise<InClusterMergedResult> {
+  const response = await apiFetch(`${getApiBase()}/trace/${kind}/${namespace}/${name}/in-cluster`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ path: path ?? '/' }),
+  })
+  // A gateway/proxy failure (chi's 60s timeout, a Hub ingress 502) returns
+  // HTML - an unguarded .json() surfaced "Unexpected token <" instead of the
+  // status. Mirror fetchJSON's tolerant parse.
+  const body = await response.json().catch(() => undefined)
+  if (!response.ok || body?.error) {
+    throw new Error(body?.error || `In-cluster test failed (${response.status})`)
+  }
+  if (body === undefined) {
+    throw new Error('In-cluster test returned an unreadable response')
+  }
+  return body
+}
+
 // Audit settings
 export interface AuditSettings {
   ignoredNamespaces: string[];
@@ -3491,6 +3622,7 @@ export function useUpdateResource() {
 // Cascade delete preview — shows resources that will be garbage-collected
 export interface CascadeDeletePreview {
   root: { kind: string; namespace: string; name: string; group?: string };
+  rootResolved: boolean;
   dependents: {
     kind: string;
     namespace: string;
@@ -3503,13 +3635,14 @@ export function useCascadeDeletePreview(
   kind: string,
   namespace: string,
   name: string,
+  group: string | undefined,
   enabled: boolean,
 ) {
   return useQuery<CascadeDeletePreview>({
-    queryKey: ["cascade-preview", kind, namespace, name],
+    queryKey: ["cascade-preview", kind, group, namespace, name],
     queryFn: () =>
       fetchJSON<CascadeDeletePreview>(
-        `/resources/${kind}/${namespace}/${name}/cascade-preview`,
+        `/resources/${kind}/${namespace}/${name}/cascade-preview${group ? `?group=${encodeURIComponent(group)}` : ""}`,
       ),
     enabled,
     staleTime: 30_000,

package/src/api/diagnose.ts

@@ -91,6 +91,9 @@ export interface RunSummary {
   kind: string;
   namespace: string;
   name: string;
+  /** The issue this session is for, on hosts that key sessions by issue. Always
+   *  absent from Radar's own backend, which records no issue. */
+  issueId?: string;
   context: string;
   agent?: string; // backend CLI that drove this run ("claude"/"codex")
   profile?: ExecutionProfile;
@@ -144,6 +147,15 @@ export async function createRun(
     kind: string;
     namespace: string;
     name: string;
+    // Associates the session with the issue it was started from, for hosts that
+    // group sessions that way. Inert for Radar's own backend, which neither reads
+    // it on start nor emits it on RunSummary — carried so both hosts share one
+    // request shape.
+    issueId?: string;
+    // Start a new session rather than continuing whatever the backend would
+    // otherwise hand back for this target. Inert for Radar's own backend, which
+    // only ever continues an in-flight run — and that one is never bypassed.
+    fresh?: boolean;
   },
   opts?: {
     agent?: string;

package/src/components/CloudConnectFlow.tsx

@@ -37,7 +37,7 @@ export function CloudConnectFlow({
   switch (status.state) {
     case 'preparing':
       return (
-        <div className="px-7 py-10 flex flex-col items-center gap-3 text-center">
+        <div className="px-8 py-10 flex flex-col items-center gap-3 text-center">
           <Loader2 className="w-5 h-5 animate-spin text-emerald-600 dark:text-emerald-400" />
           <p className="text-[13px] text-theme-text-secondary">
             Checking this cluster and preparing the install — this can take a moment on a slow link.
@@ -87,7 +87,7 @@ function BlockedView({
         ? 'Your Kubernetes identity can’t install this'
         : 'This cluster can’t be connected from here'
   return (
-    <div className="px-7 pt-6 pb-5">
+    <div className="px-8 pt-6 pb-5">
       <div className="card-inner-lg flex gap-2.5">
         {icon}
         <div className="min-w-0">
@@ -198,7 +198,7 @@ function PlanCard({
     (!!plan.sharedListener && !ackShared)
 
   return (
-    <div className="px-7 pt-6 pb-5">
+    <div className="px-8 pt-6 pb-5">
       <h4 className="text-[15px] font-semibold text-theme-text-primary mb-3">
         {adopt ? 'Adopt and connect this cluster' : 'Connect this cluster'}
       </h4>
@@ -356,7 +356,7 @@ function ApprovalCard({ status, onStatus }: { status: CloudInstallStatus; onStat
   const cancel = useCancelButton(status, onStatus)
   const starting = status.state === 'starting'
   return (
-    <div className="px-7 pt-6 pb-5">
+    <div className="px-8 pt-6 pb-5">
       <div className="flex items-center gap-2.5 mb-3">
         <Loader2 className="w-4 h-4 animate-spin text-emerald-600 dark:text-emerald-400" />
         <h4 className="text-[15px] font-semibold text-theme-text-primary">
@@ -394,7 +394,7 @@ function ProgressCard({ status, onStatus }: { status: CloudInstallStatus; onStat
     { label: 'Waiting for the agent to connect', state: provisioning ? 'todo' : 'active' },
   ]
   return (
-    <div className="px-7 pt-6 pb-5">
+    <div className="px-8 pt-6 pb-5">
       <h4 className="text-[15px] font-semibold text-theme-text-primary mb-3.5">
         Connecting {status.clusterName}
       </h4>
@@ -459,7 +459,7 @@ function ConnectedCard({
   const connected = status.connected
   if (!connected) return null
   return (
-    <div className="px-7 pt-6 pb-5">
+    <div className="px-8 pt-6 pb-5">
       <div className="flex items-center gap-2.5 mb-3">
         <span className="w-7 h-7 rounded-full bg-emerald-500/20 grid place-items-center">
           <Check className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
@@ -507,7 +507,7 @@ function FailedCard({
   const failure = status.failure
   if (!failure) return null
   return (
-    <div className="px-7 pt-6 pb-5">
+    <div className="px-8 pt-6 pb-5">
       <div className="flex items-start gap-2.5 mb-3">
         <AlertTriangle className="w-4 h-4 shrink-0 mt-1 text-amber-500" />
         <h4 className="text-[14px] font-semibold leading-snug text-theme-text-primary">{failure.message}</h4>