@skyhook-io/radar-app 0.1.6 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "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",

package/src/App.tsx

@@ -37,7 +37,7 @@ import { useNamespaces, useSwitchContext, useAuthMe } from './api/client'
 import { routePath, apiUrl, getAuthHeaders, getCredentialsMode } from './api/config'
 import { KeyboardShortcutProvider, useRegisterShortcut, useRegisterShortcuts } from './hooks/useKeyboardShortcuts'
 import { useAnimatedUnmount } from './hooks/useAnimatedUnmount'
-import { Loader2 } from 'lucide-react'
+import radarLoadingIcon from '@skyhook-io/k8s-ui/assets/radar/radar-icon-loading.svg'
 import { RefreshCw, Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, Settings, SquareTerminal, ShieldCheck } from 'lucide-react'
 import { useTheme } from './context/ThemeContext'
 import { Tooltip } from './components/ui/Tooltip'
@@ -141,8 +141,8 @@ function AuthBarrier({ authMode }: { authMode: string }) {
     return (
       <div className="flex-1 flex items-center justify-center bg-theme-base">
         <div className="flex flex-col items-center gap-4">
-          <Loader2 className="w-8 h-8 animate-spin text-blue-400" />
-          <p className="text-sm text-theme-text-secondary">Redirecting to login...</p>
+          <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
+          <p className="text-sm text-theme-text-secondary">Redirecting to login…</p>
         </div>
       </div>
     )
@@ -217,6 +217,23 @@ function AppInner() {
   // Get mainView from URL path
   const mainView = getViewFromPath(location.pathname)
 
+  // Workload slug after `/resources/` (defaults to `pods`). Bare `/resources` redirects to `/resources/pods`.
+  const normalizedResourcesKindSlug = useMemo(() => {
+    const m = location.pathname.match(/^\/resources(?:\/([^/]+))?/)
+    const slug = m?.[1] ?? ''
+    return slug || 'pods'
+  }, [location.pathname])
+
+  // Canonical URL — `/resources` is not stable for bookmarks/sharing; normalize to `/resources/pods`.
+  useEffect(() => {
+    const path = location.pathname.replace(/\/+$/, '') || '/'
+    if (path !== '/resources') return
+    navigate(
+      { pathname: '/resources/pods', search: location.search, hash: location.hash },
+      { replace: true },
+    )
+  }, [location.pathname, location.search, location.hash, navigate])
+
   // Set mainView by navigating to the path
   const setMainView = useCallback((view: ExtendedMainView, params?: Record<string, string>) => {
     const path = view === 'home' ? '/' : `/${view}`
@@ -292,6 +309,23 @@ function AppInner() {
   // Suppress the mainView-change clear effect during controlled expand/collapse transitions.
   const suppressViewClearRef = useRef(false)
 
+  // Close resource drawer when switching workload kind in URL (/resources/pods → /resources/deployments).
+  // Keeps stale Pod drawer from masking the table after sidebar navigation (Radar Hub / app.radarhq.io).
+  const prevResourcesKindSlugRef = useRef<string | null>(null)
+  useEffect(() => {
+    if (mainView !== 'resources') {
+      prevResourcesKindSlugRef.current = null
+      return
+    }
+    const slug = normalizedResourcesKindSlug
+    const prev = prevResourcesKindSlugRef.current
+    prevResourcesKindSlugRef.current = slug
+    if (prev !== null && prev !== slug) {
+      setSelectedResource(null)
+      setDrawerExpanded(false)
+    }
+  }, [mainView, normalizedResourcesKindSlug])
+
   // Animation hooks for smooth mount/unmount transitions
   const resourceDrawer = useAnimatedUnmount(!!selectedResource, 300)
   const helmDrawer = useAnimatedUnmount(!!(mainView === 'helm' && selectedHelmRelease), 300)
@@ -755,12 +789,7 @@ function AppInner() {
       <header className="relative z-50 flex items-center justify-between px-4 py-2 bg-theme-base/90 backdrop-blur-sm border-b border-theme-border/50">
         {/* Left: Logo + Cluster info */}
         <div className="flex items-center gap-4 shrink-0">
-          {navCustomization.brandSlot ?? (
-            <div className="flex items-center gap-2.5">
-              <Logo />
-              <span className="text-xl text-theme-text-primary leading-none -translate-y-0.5" style={{ fontFamily: "'DM Sans', sans-serif", fontWeight: 520 }}>radar</span>
-            </div>
-          )}
+          {navCustomization.brandSlot ?? <Logo />}
 
           <div className="flex items-center gap-2">
             {navCustomization.contextSlot ?? <ContextSwitcher />}
@@ -787,13 +816,17 @@ function AppInner() {
                   }`}
                 />
               </Tooltip>
-              <span className="text-xs text-theme-text-tertiary hidden xl:inline">
-                {!connected
-                  ? 'Disconnected'
-                  : crdDiscoveryStatus === 'discovering'
-                    ? 'Discovering Custom Resources...'
-                    : 'Connected'}
-              </span>
+              {/* Inline label only for non-steady states where the user
+                  might need to act or wait. The healthy "Connected" case
+                  is the dot alone; the dot's tooltip discloses it. Keeping
+                  "Connected" text here would expand the left section and
+                  collide with the absolute-centered nav block at xl, which
+                  is the same breakpoint where nav labels appear. */}
+              {(!connected || crdDiscoveryStatus === 'discovering') && (
+                <span className="text-xs text-theme-text-tertiary hidden xl:inline">
+                  {!connected ? 'Disconnected' : 'Discovering Custom Resources...'}
+                </span>
+              )}
               {!connected && (
                 <button
                   onClick={reconnect}
@@ -834,7 +867,17 @@ function AppInner() {
                 }`}
               >
                 <Icon className="w-4 h-4" />
-                <span className="hidden lg:inline">{label}</span>
+                {/* Labels appear only when the absolute-centered nav has
+                    enough horizontal room past the left section. Right-side
+                    chrome that adds further pressure (Connected text, star
+                    count) is intentionally pushed to the next tier (xl) so
+                    label rendering and right-side expansion stay decoupled.
+                    Per-button Tooltip discloses labels on hover when the
+                    icon-only viewport is in effect. The 1440 anchor is an
+                    off-system breakpoint chosen by measurement at the time
+                    of this PR — recompute if the cluster switcher cap or
+                    other left-section chrome changes appreciably. */}
+                <span className="hidden min-[1440px]:inline">{label}</span>
               </button>
             </Tooltip>
           ))}
@@ -942,10 +985,12 @@ function AppInner() {
       {!isSwitching && !(authMe?.authEnabled && !authMe?.username) && connection.state === 'connecting' && (
         <div className="flex-1 flex items-center justify-center bg-theme-base">
           <div className="flex flex-col items-center gap-4 text-theme-text-secondary">
-            <Loader2 className="w-8 h-8 animate-spin text-blue-400" />
+            <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
             <div className="text-center">
               <p className="font-medium text-theme-text-primary">Connecting to cluster</p>
-              <p className="text-sm text-theme-text-secondary mt-1">{connection.context || 'Loading...'}</p>
+              {connection.context && (
+                <p className="text-sm text-theme-text-secondary mt-1">{connection.context}</p>
+              )}
               {connection.progressMessage && (
                 <p className="text-xs text-theme-text-tertiary animate-pulse mt-3">
                   {connection.progressMessage}
@@ -960,7 +1005,7 @@ function AppInner() {
       {isSwitching && (
         <div className="flex-1 flex items-center justify-center bg-theme-base">
           <div className="flex flex-col items-center gap-4 text-theme-text-secondary">
-            <Loader2 className="w-8 h-8 animate-spin text-blue-400" />
+            <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
             <div className="text-center">
               <div className="text-sm font-medium text-theme-text-primary">Switching context</div>
               {targetContext && (
@@ -1379,14 +1424,35 @@ function App() {
   )
 }
 
-// Skyhook logo that switches based on theme
+// Header brand: emerald-square radar icon + stacked "Radar" / "by Skyhook"
+// wordmark. Shares its visual shape with the radar-hub-web shell so the
+// standalone OSS app and the embedded Cloud experience read as the same
+// product, and is narrow enough to leave room for the cluster switcher
+// and nav block on standard laptop viewports.
 function Logo() {
-  const { theme } = useTheme()
-  const logoSrc = theme === 'dark'
-    ? '/assets/skyhook/logotype-white-color.svg'
-    : '/assets/skyhook/logotype-dark-color.svg'
-
-  return <img src={logoSrc} alt="Skyhook" className="h-5 w-auto" />
+  return (
+    <div className="flex items-center gap-2.5">
+      <div className="relative w-7 h-7 rounded-lg overflow-hidden flex-shrink-0 bg-emerald-500/10 border border-emerald-500/20">
+        <img
+          src="/images/radar/radar-icon.svg"
+          alt=""
+          aria-hidden
+          className="w-full h-full p-0.5"
+          // Fail loud on a missing/blocked asset rather than rendering an
+          // empty emerald square next to the wordmark — the latter reads
+          // as broken chrome with no diagnostics. Most likely cause is a
+          // build/deploy path mismatch.
+          onError={(e) =>
+            console.error('Radar logo asset failed to load:', (e.currentTarget as HTMLImageElement).src)
+          }
+        />
+      </div>
+      <div className="flex flex-col leading-none">
+        <span className="font-semibold text-[15px] tracking-tight text-theme-text-primary">Radar</span>
+        <span className="text-[9px] mt-0.5 tracking-wide uppercase text-theme-text-tertiary">by Skyhook</span>
+      </div>
+    </div>
+  )
 }
 
 // GitHub star button with live star count + programmatic starring via gh CLI

package/src/api/client.ts

@@ -1,5 +1,6 @@
 import { useQuery, useMutation, useQueryClient, skipToken } from '@tanstack/react-query'
 import { showApiError, showApiSuccess } from '../components/ui/Toast'
+import { useCanHelmWrite } from '../contexts/CapabilitiesContext'
 import type {
   Topology,
   ClusterInfo,
@@ -25,6 +26,7 @@ import type {
 } from '../types'
 import type { GitOpsOperationResponse } from '../types/gitops'
 import { getApiBase, getAuthHeaders, getCredentialsMode, getBasename, routePath } from './config'
+import { pluralToKind } from '../utils/navigation'
 
 // Wrapper around fetch that always includes credentials (for session cookies)
 // and handles 401 responses globally. Merges caller-provided headers with
@@ -212,7 +214,13 @@ export interface DashboardHelmRelease {
 export interface DashboardHelmSummary {
   total: number
   releases: DashboardHelmRelease[]
-  restricted?: boolean // True when user lacks permissions to list Helm releases
+  restricted?: boolean // True when user lacks permissions to list Helm releases (RBAC-denied)
+  // error + errorCode populated when the Helm read failed for a non-RBAC
+  // reason (client not initialized, unconfigured, network). Surfaced
+  // via the dashboard widget so empty results aren't mistaken for
+  // "this cluster has zero releases."
+  error?: string
+  errorCode?: string
 }
 
 export interface DashboardCRDCount {
@@ -264,6 +272,7 @@ export interface DashboardResponse {
   audit: DashboardAudit | null
   nodeVersionSkew: { versions: Record<string, string[]>; minVersion: string; maxVersion: string } | null
   deferredLoading?: boolean // True while deferred informers (secrets, events, etc.) are still syncing
+  partialData?: string[] // Resource kinds still loading after first paint (slow-cluster fallback)
   accessRestricted?: boolean // True when user has no namespace access (RBAC)
 }
 
@@ -654,11 +663,16 @@ export function useNamespaceCapabilities(namespace: string | undefined, globalCa
 }
 
 // Auth
+export type CloudRole = 'owner' | 'member' | 'viewer'
+
 export interface AuthMe {
   authEnabled: boolean
   authMode?: string
   username?: string
   groups?: string[]
+  /** Pre-computed Cloud tier from `cloud:<tier>` group prefix.
+   *  Absent when not running under Cloud (OSS, OIDC, no role group). */
+  cloudRole?: CloudRole
 }
 
 export function useAuthMe() {
@@ -669,6 +683,81 @@ export function useAuthMe() {
   })
 }
 
+// Tier ordering for Cloud-role gates. Mirrors radar OSS pkg/auth
+// CloudRole.AtLeast — the SPA must agree with the backend on what
+// "member-or-higher" means; otherwise we'd hide a button the
+// backend would happily honor (or vice versa).
+const CLOUD_ROLE_RANK: Record<string, number> = { viewer: 1, member: 2, owner: 3 }
+
+/**
+ * useCloudRole returns the caller's Cloud tier (`owner` / `member` /
+ * `viewer`) and a `canAtLeast(min)` gate. When no Cloud role is
+ * present (OSS, OIDC, no role group, OR auth/me is still loading),
+ * `canAtLeast` returns true — the gate is strictly additive for
+ * Cloud-attributed users, mirroring the backend's `requireCloudRole`
+ * semantics. Use for passive content gating (panels, sections); use
+ * `useCanHelmAct` (or similar) for *click-prone* surfaces where you
+ * need fail-closed behavior during the auth/me round-trip to prevent
+ * a viewer from clicking through during the loading window.
+ *
+ * Why optimistic during load: the gated empty state ("Your role can't
+ * view…") rendered briefly to OSS / kubectl-plugin users before
+ * auth/me resolves is a worse regression than a Cloud viewer seeing
+ * a content tab populate for a tick before being gated out. Click-
+ * prevention belongs in the action-button hook, not here.
+ */
+export function useCloudRole() {
+  const { data, isLoading } = useAuthMe()
+  const role = data?.cloudRole
+  return {
+    role,
+    isLoading,
+    isCloudUser: !!role,
+    canAtLeast: (min: CloudRole) => {
+      if (!role) return true // not Cloud-attributed (incl. still-loading) → no gate
+      return (CLOUD_ROLE_RANK[role] ?? 0) >= (CLOUD_ROLE_RANK[min] ?? 0)
+    },
+  }
+}
+
+/**
+ * useCanHelmAct combines the K8s capability gate (rbac.helm=true) and
+ * the Cloud role gate (member+) into a single answer for any Helm
+ * write or sensitive-read button. Returns { allowed, reason } so the
+ * tooltip can explain which gate failed.
+ *
+ * Cloud role check runs FIRST so the message is actionable for Cloud
+ * users — telling them "Helm write permissions required" is wrong if
+ * the chart is fine and the actual gate is their viewer role.
+ */
+export function useCanHelmAct(): { allowed: boolean; reason?: string } {
+  const helmWrite = useCanHelmWrite()
+  const { role, canAtLeast, isLoading } = useCloudRole()
+  // Fail-closed for action buttons during the auth/me round-trip:
+  // a Cloud viewer who clicks during loading would otherwise fire a
+  // real request that gets 403'd. For OSS / kubectl-plugin the
+  // round-trip is sub-ms so this is imperceptible; for Cloud it
+  // prevents the click-through window. Distinct from useCloudRole's
+  // canAtLeast (which is optimistic during loading) because passive
+  // content gates don't have a click-handler to misfire.
+  if (isLoading) {
+    return { allowed: false, reason: 'Loading permissions…' }
+  }
+  if (!canAtLeast('member')) {
+    return {
+      allowed: false,
+      reason: `Your Radar Cloud role (${role ?? 'unknown'}) cannot run Helm operations. Ask a member or owner.`,
+    }
+  }
+  if (!helmWrite) {
+    return {
+      allowed: false,
+      reason: 'Helm write permissions required. Set rbac.helm=true in the Radar Helm chart values.',
+    }
+  }
+  return { allowed: true }
+}
+
 // Namespaces
 export function useNamespaces() {
   return useQuery<Namespace[]>({
@@ -819,27 +908,78 @@ export function useResourceChildren(kind: string, namespace: string, name: strin
   })
 }
 
-// Resource-specific events (filtered by resource name)
-export function useResourceEvents(kind: string, namespace: string, name: string) {
-  const params = new URLSearchParams()
-  params.set('namespace', namespace)
-  params.set('kind', kind)
-  params.set('limit', '50')
+export interface ResourceEventsResult {
+  k8sEvents: TimelineEvent[]
+  updates: TimelineEvent[]
+  isLoading: boolean
+  // Per-stream errors are surfaced separately so the UI can distinguish
+  // "this stream failed" from "no data" — silent fallback to [] would
+  // reproduce the exact failure mode #547 is about.
+  k8sError: Error | null
+  updatesError: Error | null
+}
+
+// K8s events and resource updates are fetched separately so a high-frequency
+// informer update stream (e.g. a CrashLoop status field flapping every few
+// seconds) can never starve out user-meaningful K8s events under a shared limit.
+export function useResourceEvents(kind: string, namespace: string, name: string): ResourceEventsResult {
+  // The timeline store keys events by their K8s Kind (singular PascalCase, e.g. "Pod"),
+  // but callers pass the URL-form kind ("pods").
+  const singularKind = pluralToKind(kind)
+  const since = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()
+
+  // Include managed resources — when viewing a specific resource (e.g. a Pod owned
+  // by a ReplicaSet, or a K8s Event whose involvedObject is the Pod itself), the
+  // default preset's IsManaged() filter would otherwise drop everything.
+  const baseParams = () => {
+    const p = new URLSearchParams()
+    p.set('namespace', namespace)
+    p.set('kind', singularKind)
+    p.set('include_managed', 'true')
+    p.set('since', since)
+    return p
+  }
 
-  // Get events from last 24 hours
-  const since = new Date(Date.now() - 24 * 60 * 60 * 1000)
-  params.set('since', since.toISOString())
+  const enabled = Boolean(kind && namespace && name)
 
-  return useQuery<TimelineEvent[]>({
-    queryKey: ['resource-events', kind, namespace, name],
+  // K8s events: high limit so the full set is always returned. The number of
+  // distinct K8s events per resource is naturally bounded — kubelet/controllers
+  // dedupe via Reason+InvolvedObject and bump count.
+  const k8sQuery = useQuery<TimelineEvent[]>({
+    queryKey: ['resource-events', 'k8s', singularKind, namespace, name],
     queryFn: async () => {
+      const params = baseParams()
+      params.set('sources', 'k8s_event')
+      params.set('limit', '500')
       const events = await fetchJSON<TimelineEvent[]>(`/changes?${params.toString()}`)
-      // Filter to only events for this specific resource
       return events.filter(e => e.name === name)
     },
-    enabled: Boolean(kind && namespace && name),
-    refetchInterval: 15000, // Refresh every 15 seconds
+    enabled,
+    refetchInterval: 15000,
+  })
+
+  // Resource updates (informer diffs + historical): bounded so a flapping
+  // resource doesn't return an unbounded payload.
+  const updatesQuery = useQuery<TimelineEvent[]>({
+    queryKey: ['resource-events', 'updates', singularKind, namespace, name],
+    queryFn: async () => {
+      const params = baseParams()
+      params.set('sources', 'informer,historical')
+      params.set('limit', '50')
+      const events = await fetchJSON<TimelineEvent[]>(`/changes?${params.toString()}`)
+      return events.filter(e => e.name === name)
+    },
+    enabled,
+    refetchInterval: 15000,
   })
+
+  return {
+    k8sEvents: k8sQuery.data ?? [],
+    updates: updatesQuery.data ?? [],
+    isLoading: k8sQuery.isLoading || updatesQuery.isLoading,
+    k8sError: (k8sQuery.error as Error | null) ?? null,
+    updatesError: (updatesQuery.error as Error | null) ?? null,
+  }
 }
 
 // ============================================================================
@@ -1652,8 +1792,11 @@ export function useHelmRelease(namespace: string, name: string) {
   })
 }
 
-// Get manifest for a Helm release (optionally at a specific revision)
-export function useHelmManifest(namespace: string, name: string, revision?: number) {
+// Get manifest for a Helm release (optionally at a specific revision).
+// `enabled` lets callers skip the query when the user's Cloud role
+// would 403 the read — saves a round-trip and avoids a transient
+// "error" state that the role-gated empty panel doesn't need.
+export function useHelmManifest(namespace: string, name: string, revision?: number, enabled = true) {
   const params = revision ? `?revision=${revision}` : ''
   return useQuery<string>({
     queryKey: ['helm-manifest', namespace, name, revision],
@@ -1665,34 +1808,35 @@ export function useHelmManifest(namespace: string, name: string, revision?: numb
       }
       return response.text()
     },
-    enabled: Boolean(namespace && name),
+    enabled: Boolean(namespace && name && enabled),
     staleTime: 60000, // 1 minute
   })
 }
 
-// Get values for a Helm release
-export function useHelmValues(namespace: string, name: string, allValues?: boolean) {
+// Get values for a Helm release. `enabled` see useHelmManifest.
+export function useHelmValues(namespace: string, name: string, allValues?: boolean, enabled = true) {
   const params = allValues ? '?all=true' : ''
   return useQuery<HelmValues>({
     queryKey: ['helm-values', namespace, name, allValues],
     queryFn: () => fetchJSON(`/helm/releases/${namespace}/${name}/values${params}`),
-    enabled: Boolean(namespace && name),
+    enabled: Boolean(namespace && name && enabled),
     staleTime: 60000,
   })
 }
 
-// Get diff between two revisions
+// Get diff between two revisions. `enabled` see useHelmManifest.
 export function useHelmManifestDiff(
   namespace: string,
   name: string,
   revision1: number,
-  revision2: number
+  revision2: number,
+  enabled = true,
 ) {
   return useQuery<ManifestDiff>({
     queryKey: ['helm-diff', namespace, name, revision1, revision2],
     queryFn: () =>
       fetchJSON(`/helm/releases/${namespace}/${name}/diff?revision1=${revision1}&revision2=${revision2}`),
-    enabled: Boolean(namespace && name && revision1 > 0 && revision2 > 0 && revision1 !== revision2),
+    enabled: Boolean(namespace && name && revision1 > 0 && revision2 > 0 && revision1 !== revision2 && enabled),
     staleTime: 60000,
   })
 }