@skyhook-io/radar-app 1.13.5 → 1.14.1

package/src/components/ui/Disclosure.tsx

@@ -0,0 +1,47 @@
+import { useState, type ReactNode } from 'react'
+import { clsx } from 'clsx'
+import { Collapse, CollapseChevron, useDisclosure } from '@skyhook-io/k8s-ui/components/ui/Collapse'
+
+// In-flow disclosure with the app-standard motion — the replacement for native
+// <details>/<summary> on primary paths. Native details snaps open with no
+// transition and its marker ignores the caret language; this pairs a button
+// header (aria-expanded / aria-controls via useDisclosure) with CollapseChevron
+// and an animated Collapse panel. Content stays mounted while closed, exactly
+// like native details, so server-rendered markup and in-page search still see
+// the collapsed copy.
+export function Disclosure({
+  summary,
+  children,
+  className,
+  summaryClassName,
+  chevronClassName = 'h-3.5 w-3.5',
+  defaultOpen = false,
+}: {
+  summary: ReactNode
+  children: ReactNode
+  /** Wrapper (what the old <details> carried). */
+  className?: string
+  /** Header button (what the old <summary> carried). */
+  summaryClassName?: string
+  chevronClassName?: string
+  defaultOpen?: boolean
+}) {
+  const [open, setOpen] = useState(defaultOpen)
+  const disclosure = useDisclosure(open)
+  return (
+    <div className={className}>
+      <button
+        type="button"
+        {...disclosure.buttonProps}
+        onClick={() => setOpen((value) => !value)}
+        className={clsx('flex w-full cursor-pointer items-center gap-1.5 text-left', summaryClassName)}
+      >
+        <CollapseChevron open={open} className={chevronClassName} />
+        {summary}
+      </button>
+      <Collapse open={open} id={disclosure.panelId}>
+        {children}
+      </Collapse>
+    </div>
+  )
+}

package/src/components/ui/Markdown.tsx

@@ -2,12 +2,20 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { clsx } from 'clsx'
 
+import type { ReactNode } from 'react'
+
 interface MarkdownProps {
   children: string
   className?: string
+  /**
+   * Intercepts links before the default anchor renders. Return null to fall
+   * through. Lets a caller turn a reserved href (an in-page evidence
+   * reference, say) into a control instead of an external link.
+   */
+  linkRenderer?: (href: string | undefined, children: ReactNode) => ReactNode | null
 }
 
-export function Markdown({ children, className }: MarkdownProps) {
+export function Markdown({ children, className, linkRenderer }: MarkdownProps) {
   return (
     <div className={clsx('markdown-content', className)}>
       <ReactMarkdown
@@ -28,16 +36,20 @@ export function Markdown({ children, className }: MarkdownProps) {
         p: ({ children }) => (
           <p className="text-theme-text-secondary my-2 leading-relaxed">{children}</p>
         ),
-        a: ({ href, children }) => (
-          <a
-            href={href}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-blue-400 hover:text-blue-300 underline underline-offset-2"
-          >
-            {children}
-          </a>
-        ),
+        a: ({ href, children }) => {
+          const custom = linkRenderer?.(href, children)
+          if (custom !== null && custom !== undefined) return <>{custom}</>
+          return (
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-400 hover:text-blue-300 underline underline-offset-2"
+            >
+              {children}
+            </a>
+          )
+        },
         ul: ({ children }) => (
           <ul className="list-disc list-outside pl-4 my-2 space-y-1 text-theme-text-secondary">{children}</ul>
         ),

package/src/components/ui/ShortcutHelpOverlay.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { X } from 'lucide-react'
 import { clsx } from 'clsx'
-import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+import { TRANSITION_BACKDROP, TRANSITION_PANEL, overlayTransitionStyle } from '../../utils/animation'
 import { useActiveShortcuts, type ShortcutCategory } from '../../hooks/useKeyboardShortcuts'
 
 interface ShortcutHelpOverlayProps {
@@ -232,6 +232,7 @@ export function ShortcutHelpOverlay({ onClose, currentView, isOpen = true }: Sho
           TRANSITION_BACKDROP,
           isOpen ? 'opacity-100' : 'opacity-0'
         )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
         onClick={onClose}
       />
 
@@ -243,6 +244,7 @@ export function ShortcutHelpOverlay({ onClose, currentView, isOpen = true }: Sho
           TRANSITION_PANEL,
           isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-[0.97]'
         )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
       >
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-3.5 border-b border-theme-border">

package/src/components/ui/UpdateNotification.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react'
+import { clsx } from 'clsx'
 import { Download, X, Copy, Check, RotateCw, ArrowDownToLine, Loader2 } from 'lucide-react'
 import { useQueryClient } from '@tanstack/react-query'
 import {
@@ -10,6 +11,8 @@ import {
 } from '../../api/client'
 import type { DesktopUpdateState } from '../../api/client'
 import { WithTooltip } from './Tooltip'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
 
 const DISMISSED_KEY = 'radar-update-dismissed'
 
@@ -103,7 +106,11 @@ export function UpdateNotification() {
 
   // Shared in-cluster viewers get a persistent Home notice instead of a
   // floating action prompt they may not be able to act on.
-  if (!versionInfo?.updateAvailable || dismissed || deploymentMode === undefined || deploymentMode === 'in-cluster' || deploymentMode === 'cloud') {
+  const show = !!versionInfo?.updateAvailable && !dismissed && deploymentMode !== undefined && deploymentMode !== 'in-cluster' && deploymentMode !== 'cloud'
+  // Presence outlives `show` by the menu exit so a dismiss fades the chip out
+  // instead of snapping it away; the enter runs the same transition in reverse.
+  const { shouldRender, isOpen } = useAnimatedUnmount(show, overlayExitMs('menu'))
+  if (!shouldRender || !versionInfo) {
     return null
   }
 
@@ -111,7 +118,16 @@ export function UpdateNotification() {
   const effectiveState: DesktopUpdateState = updateStatus?.state ?? 'idle'
 
   return (
-    <div className="fixed bottom-4 right-4 z-50 max-w-sm bg-theme-surface border border-accent/50 rounded-lg shadow-xl p-4 animate-in slide-in-from-right">
+    <div
+      inert={!show || undefined}
+      className={clsx(
+        'fixed bottom-4 right-4 z-50 max-w-sm bg-theme-surface border border-accent/50 rounded-lg shadow-xl p-4 origin-bottom-right',
+        TRANSITION_MENU,
+        isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-1 scale-[0.97]',
+        !show && 'pointer-events-none',
+      )}
+      style={overlayTransitionStyle(isOpen, 'menu')}
+    >
       <div className="flex items-start gap-3">
         <div className="flex items-center justify-center w-8 h-8 bg-accent-muted rounded-full shrink-0">
           <UpdateIcon state={effectiveState} />

package/src/components/workload/WorkloadView.tsx

@@ -70,6 +70,8 @@ import {
   useCordonNode,
   useUncordonNode,
   useDrainNode,
+  useDrainPlan,
+  DrainPlanUnsupportedError,
   useCascadeDeletePreview,
   useResourceEvents,
   useResource,
@@ -81,7 +83,7 @@ import {
 import { PrometheusCharts, isPrometheusSupported } from '../resource/PrometheusCharts'
 import { PrometheusChartsGrid } from '../resource/PrometheusChartsGrid'
 import { RestartEventLane } from '../resource/RestartChart'
-import { RightsizingPanel, RightsizingStrip } from '../resource/RightsizingStrip'
+import { RightsizingPanel } from '../resource/RightsizingStrip'
 import { WorkloadCostTab } from '../cost/WorkloadCostTab'
 import { isOpenCostWorkloadKind } from '../cost/kinds'
 import { useResourceAudit, useResourceIssues, useResources, useTrace, fetchTraceWithProbes, fetchInClusterCapability, runInClusterMerged } from '../../api/client'
@@ -381,6 +383,7 @@ function useActionsBarProps(
   const cordonMutation = useCordonNode()
   const uncordonMutation = useUncordonNode()
   const drainMutation = useDrainNode()
+  const drainPlanMutation = useDrainPlan()
 
   const { renderAction: renderDiagnose } = useDiagnoseCustomization()
 
@@ -485,6 +488,13 @@ function useActionsBarProps(
     onDrainNode: (params: Parameters<typeof drainMutation.mutate>[0]) =>
       drainMutation.mutate(params),
     isDrainingNode: drainMutation.isPending,
+    onPlanDrain: (params: Parameters<typeof drainPlanMutation.mutate>[0]) =>
+      drainPlanMutation.mutate(params),
+    onPlanDrainReset: () => drainPlanMutation.reset(),
+    drainPlan: drainPlanMutation.data ?? null,
+    isPlanningDrain: drainPlanMutation.isPending,
+    drainPlanError: drainPlanMutation.error?.message ?? null,
+    drainPlanUnsupported: drainPlanMutation.error instanceof DrainPlanUnsupportedError,
   }
 }
 
@@ -2411,16 +2421,9 @@ function MetricsTabContent({
   resource: any
   expanded: boolean
 }) {
-  const showRightsizing = expanded && ['Deployment', 'StatefulSet', 'DaemonSet'].includes(kind)
-
   if (expanded) {
     return (
       <div className="flex flex-col h-full">
-        {showRightsizing && (
-          <div className="px-4 pt-4">
-            <RightsizingStrip kind={kind} namespace={namespace} name={name} />
-          </div>
-        )}
         <div className="flex-1 min-h-0">
           <PrometheusChartsGrid kind={kind} namespace={namespace} name={name} resource={resource} />
         </div>
@@ -2446,9 +2449,17 @@ function DrawerMetricsContent({
 }) {
   const [chartRange, setChartRange] = useState<import('../../api/client').PrometheusTimeRange>('1h')
   const showRestartLane = isPrometheusSupported(kind) && kind !== 'Node'
+  const navigate = useNavigate()
 
   return (
     <div className="flex flex-col h-full">
+      {['Deployment', 'StatefulSet', 'DaemonSet'].includes(kind) && (
+        <div className="px-4 pt-3">
+          <button className="text-xs text-accent hover:underline" onClick={() => navigate(`${buildWorkloadPath({ kind, namespace, name })}?tab=metrics&metricsRange=${chartRange}`)}>
+            Open request and resource dashboard →
+          </button>
+        </div>
+      )}
       <div className="flex-1 min-h-0">
         <PrometheusCharts
           kind={kind}

package/src/context/ConnectionContext.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, useState, useCallback, useEffect, useRef, ReactNode } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { getApiBase } from '../api/config'
-import { apiFetch } from '../api/client'
+import { apiFetch, type SyncStatusSnapshot } from '../api/client'
 
 export type ConnectionStateType = 'connected' | 'disconnected' | 'connecting'
 
@@ -12,6 +12,10 @@ export interface ConnectionState {
   error?: string
   errorType?: string // config, auth, auth-rejected, auth-plugin-stuck, rbac, network, timeout, tls, unknown
   progressMessage?: string
+  // Per-kind readiness while the initial informer sync runs ('connecting'
+  // with informers started). Drives the progressive app shell — absent once
+  // connected or before informers exist.
+  syncStatus?: SyncStatusSnapshot
 }
 
 interface ConnectionStatusResponse extends ConnectionState {
@@ -157,7 +161,15 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
     if (!firstConnect || cacheWarmAtMountRef.current) {
       queryClient.invalidateQueries()
     } else {
-      queryClient.invalidateQueries({ predicate: (q) => q.state.status === 'error' })
+      // Detail responses served during the progressive shell are partial —
+      // the server skips relationship computation while the topology cache
+      // is unavailable — and they resolve as successes, so the error-only
+      // sweep would leave an open drawer without its Related Resources
+      // forever (focus refetch is globally off). Refetching the resource
+      // detail keys is at most the open drawer, so it stays cheap.
+      queryClient.invalidateQueries({
+        predicate: (q) => q.state.status === 'error' || q.queryKey[0] === 'resource',
+      })
     }
   }, [queryClient])
 
@@ -195,12 +207,35 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
     // while the retry is still running; the retry's own result supersedes it.
     if (manualRetryPendingRef.current || autoRetryInFlightRef.current) return
     const current = connectionRef.current
+    // The progressive shell renders real resource lists while still
+    // 'connecting'. A query client shared across cluster mounts may hold
+    // another cluster's data under identical keys — drop it before the
+    // shell can show it (the 'connected' path repeats this for the
+    // full-refresh case). Deliberately ahead of the SSE-generation guard:
+    // live connection_state frames bump the generation and drop the poll,
+    // and the shell must not spend the whole sync on another cluster's rows.
+    if (current.state === 'connecting' && data.state === 'connecting' &&
+        data.syncStatus && cacheWarmAtMountRef.current) {
+      cacheWarmAtMountRef.current = false
+      // Drop only cluster-scoped data. App chrome (auth identity, kubeconfig
+      // contexts) is not another cluster's data, and purging it flips
+      // authMePending back on — which holds the whole shell on the splash
+      // until /auth/me refetches, delaying the first progressive paint.
+      const keep = new Set(['connection-status', 'auth-me', 'contexts'])
+      queryClient.removeQueries({ predicate: (q) => !keep.has(String(q.queryKey[0])) })
+    }
     if (!shouldApplyPolledConnection(
       current.state,
       data.state,
       data.sseGenerationAtStart,
       sseGenerationRef.current,
     )) {
+      // SSE owns the state fields, but connection_state frames don't carry
+      // per-kind sync progress — merge it from the poll so the progressive
+      // shell keeps ticking while still connecting.
+      if (data.state === 'connecting' && data.syncStatus) {
+        setConnection(prev => prev.state === 'connecting' ? { ...prev, syncStatus: data.syncStatus } : prev)
+      }
       return
     }
     const becameConnected = current.state !== 'connected' && data.state === 'connected'
@@ -211,11 +246,12 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
       error: data.error,
       errorType: data.errorType,
       progressMessage: data.progressMessage,
+      syncStatus: data.syncStatus,
     })
     if (becameConnected) {
       refreshCachesOnConnect()
     }
-  }, [data, dataUpdatedAt, refreshCachesOnConnect])
+  }, [data, dataUpdatedAt, refreshCachesOnConnect, queryClient])
 
   // Retry mutation
   const retryMutation = useMutation({
@@ -231,6 +267,9 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
         state: 'connecting',
         error: undefined,
         progressMessage: 'Connecting to cluster...',
+        // A retry is a fresh attempt — per-kind progress from the previous
+        // attempt would mislabel readiness until the next poll.
+        syncStatus: undefined,
       }))
     },
     onSuccess: (result) => {
@@ -371,6 +410,12 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
       if (prev.state === 'connected' && status.state === 'connecting') {
         return prev
       }
+      // connection_state frames don't carry per-kind sync progress — keep the
+      // last polled snapshot while still connecting, or each SSE progress
+      // frame would flicker the progressive shell back to the splash.
+      if (status.state === 'connecting' && !status.syncStatus && prev.state === 'connecting') {
+        return { ...status, syncStatus: prev.syncStatus }
+      }
       return status
     })
 

package/src/context/DiagnoseCustomization.tsx

@@ -23,6 +23,7 @@ export type RenderInvestigationRunActions = (props: {
 
 /** Render prop for the resource-level Investigate action. */
 export type RenderDiagnoseAction = (ctx: {
+  /** Kubernetes Kind when loaded or discovered; otherwise its API resource name. */
   kind: string;
   /** Kubernetes API group; empty means core. */
   group?: string;

package/src/index.css

@@ -21,6 +21,23 @@
 }
 
 @layer components {
+  .metrics-layout {
+    container-type: inline-size;
+    container-name: metrics;
+  }
+  .metrics-chart-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.75rem;
+  }
+  @container metrics (min-width: 760px) {
+    .metrics-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .metrics-chart-wide { grid-column: 1 / -1; }
+  }
+  @container metrics (min-width: 1200px) {
+    .metrics-chart-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .metrics-chart-wide { grid-column: auto; }
+  }
   .investigation-assessment {
     background: var(--color-investigation-assessment);
     border-color: var(--color-investigation-assessment-border);
@@ -327,10 +344,26 @@ body {
   animation: status-enter 140ms ease-out both;
 }
 
+/* Reduced motion is an app-level policy, not a per-class list. Durations and
+   delays go to ~0 (a delay left in place would hold a fill-mode:both element
+   invisible), every loop runs once (an infinite animation at 0.01ms is still an
+   active animation — pulse, ping, Monaco's progress bit), and status spinners
+   keep turning because they convey state, not motion. Components that coordinate motion in
+   JS (presence hooks, drawer morph) check prefersReducedMotion() themselves and
+   dispose at logical close. */
 @media (prefers-reduced-motion: reduce) {
-  .animate-transcript-enter,
-  .animate-status-enter {
-    animation: none;
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0ms !important;
+    scroll-behavior: auto !important;
+  }
+  /* The one exception: a spinner that stops reads as "done", not "calm". */
+  .animate-spin {
+    animation-duration: 1s !important;
+    animation-iteration-count: infinite !important;
   }
 }
 
@@ -386,9 +419,6 @@ body {
     -webkit-text-fill-color: currentColor;
     color: var(--text-secondary);
   }
-  .animate-result-in {
-    animation: none;
-  }
 }
 
 /* Gentle colorize when syntax-highlighted code swaps in over plain text — opacity

package/src/utils/navigation.ts

@@ -14,7 +14,7 @@ export function searchHitToSelectedResource(hit: SearchHit): SelectedResource {
 }
 
 // Re-export shared navigation utilities from @skyhook-io/k8s-ui.
-export { kindToPlural, kindToPluralWithGroup, pluralToKind, refToSelectedResource, apiVersionToGroup } from '@skyhook-io/k8s-ui/utils/navigation'
+export { kindToPlural, kindToPluralWithGroup, pluralToKind, knownKindForPluralWithGroup, refToSelectedResource, apiVersionToGroup } from '@skyhook-io/k8s-ui/utils/navigation'
 export type { NavigateToResource } from '@skyhook-io/k8s-ui/utils/navigation'
 
 const NETWORK_POLICY_TOPOLOGY_KINDS = new Set([

package/src/utils/topology-namespace.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest'
+import type { TopologyNode } from '@skyhook-io/k8s-ui/types/core'
+import { isInNamespaceScope, scopeNodesToNamespaces } from './topology-namespace'
+
+function node(id: string, kind: string, namespace?: string): TopologyNode {
+  return {
+    id,
+    kind,
+    name: id,
+    status: 'healthy',
+    data: namespace === undefined ? {} : { namespace },
+  } as TopologyNode
+}
+
+const nodes = [
+  node('web', 'Deployment', 'prod'),
+  node('ing', 'Ingress', 'staging'),
+  node('db', 'StatefulSet', 'prod'),
+  node('node-1', 'Node'),          // cluster-scoped
+  node('pv-1', 'PersistentVolume'), // cluster-scoped
+]
+
+describe('scopeNodesToNamespaces', () => {
+  it('returns every node when no namespace is selected', () => {
+    expect(scopeNodesToNamespaces(nodes, [])).toHaveLength(5)
+  })
+
+  it('keeps only the selected namespace, plus cluster-scoped nodes', () => {
+    const scoped = scopeNodesToNamespaces(nodes, ['prod'])
+    expect(scoped.map(n => n.id)).toEqual(['web', 'db', 'node-1', 'pv-1'])
+  })
+
+  it('drops a kind that exists only outside the scope', () => {
+    const scoped = scopeNodesToNamespaces(nodes, ['prod'])
+    expect(scoped.some(n => n.kind === 'Ingress')).toBe(false)
+  })
+
+  it('accepts several namespaces at once', () => {
+    const scoped = scopeNodesToNamespaces(nodes, ['prod', 'staging'])
+    expect(scoped).toHaveLength(5)
+  })
+
+  it('returns the same array identity when the scope is empty', () => {
+    expect(scopeNodesToNamespaces(nodes, [])).toBe(nodes)
+  })
+})
+
+describe('isInNamespaceScope', () => {
+  it('passes everything for a null scope', () => {
+    expect(isInNamespaceScope(node('x', 'Pod', 'any'), null)).toBe(true)
+  })
+
+  it('always passes a node with no namespace', () => {
+    expect(isInNamespaceScope(node('node-1', 'Node'), new Set(['prod']))).toBe(true)
+  })
+
+  it('treats an empty-string namespace as cluster-scoped', () => {
+    expect(isInNamespaceScope(node('n', 'Node', ''), new Set(['prod']))).toBe(true)
+  })
+
+  it('rejects a namespaced node outside the scope', () => {
+    expect(isInNamespaceScope(node('ing', 'Ingress', 'staging'), new Set(['prod']))).toBe(false)
+  })
+})

package/src/utils/topology-namespace.ts

@@ -0,0 +1,18 @@
+import type { TopologyNode } from '@skyhook-io/k8s-ui/types/core'
+
+// A node with no namespace is cluster-scoped (Node, PersistentVolume,
+// Namespace, ...) and stays visible in every scope.
+export function isInNamespaceScope(node: TopologyNode, nsSet: Set<string> | null): boolean {
+  if (!nsSet) return true
+  const ns = node.data?.namespace as string | undefined
+  return !ns || nsSet.has(ns)
+}
+
+// Shared by the topology graph and the filter sidebar so the two cannot
+// disagree about which nodes are in scope. Namespace carve-out only — kind
+// filtering stays on the graph.
+export function scopeNodesToNamespaces(nodes: TopologyNode[], namespaces: string[]): TopologyNode[] {
+  if (namespaces.length === 0) return nodes
+  const nsSet = new Set(namespaces)
+  return nodes.filter(node => isInNamespaceScope(node, nsSet))
+}