@skyhook-io/k8s-ui 1.5.8 → 1.5.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.5.8",
+  "version": "1.5.10",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -58,7 +58,7 @@
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
     "html-to-image": "^1.11.0",
-    "react-virtuoso": "^4.18.5",
+    "react-virtuoso": "^4.18.6",
     "shiki": "^4.0.0"
   },
   "peerDependencies": {
@@ -85,7 +85,7 @@
     "clsx": "^2.1.1",
     "diff": "^9.0.0",
     "elkjs": "^0.11.1",
-    "lucide-react": "^1.8.0",
+    "lucide-react": "^1.12.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "typescript": "^6.0.2",

package/src/components/resources/renderers/NetworkPolicyDiagram.tsx

@@ -190,7 +190,7 @@ function FlowRow({
   const isIngress = direction === 'ingress'
 
   const sourceNodes = (
-    <div className="flex-1 min-w-0 space-y-1">
+    <div className="min-w-0 max-w-full shrink space-y-1">
       {sources.map((peer, i) => (
         <div key={i}>
           {i > 0 && (
@@ -199,13 +199,13 @@ function FlowRow({
           <Tooltip content={peer.sublabel ? `${peer.label}\n${peer.sublabel}` : peer.label} position="top">
             <div
               className={clsx(
-                'rounded-md border px-2 py-1.5',
+                'rounded-md border px-2 py-1.5 min-w-0 overflow-hidden',
                 PEER_STYLES[peer.type],
               )}
             >
-              <div className="flex items-center gap-1.5">
+              <div className="flex items-center gap-1.5 min-w-0">
                 <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', PEER_DOT[peer.type])} />
-                <span className={clsx('text-[11px] font-medium truncate', denied && 'line-through text-red-400')}>
+                <span className={clsx('text-[11px] font-medium truncate min-w-0', denied && 'line-through text-red-400')}>
                   {peer.label}
                 </span>
               </div>
@@ -220,14 +220,16 @@ function FlowRow({
   )
 
   const targetNode = (
-    <Tooltip content={target} position="top">
-      <div className="rounded-md border border-indigo-500/30 bg-indigo-500/8 px-2 py-1.5 flex-1 min-w-0">
-        <div className="flex items-center gap-1.5">
-          <span className="w-1.5 h-1.5 rounded-full shrink-0 bg-indigo-500" />
-          <span className="text-[11px] font-medium truncate">{target}</span>
+    <div className="min-w-0 max-w-full shrink-[1000]">
+      <Tooltip content={target} position="top">
+        <div className="rounded-md border border-indigo-500/30 bg-indigo-500/8 px-2 py-1.5 min-w-0 max-w-full overflow-hidden">
+          <div className="flex items-center gap-1.5 min-w-0">
+            <span className="w-1.5 h-1.5 rounded-full shrink-0 bg-indigo-500" />
+            <span className="text-[11px] font-medium truncate min-w-0">{target}</span>
+          </div>
         </div>
-      </div>
-    </Tooltip>
+      </Tooltip>
+    </div>
   )
 
   const arrow = (

package/src/components/topology/K8sResourceNode.tsx

@@ -374,72 +374,59 @@ export const K8sResourceNode = memo(function K8sResourceNode({
           'pl-3 pr-3',
           isSmallNode ? 'py-2' : 'py-2.5'
         )}>
-          {/* Header row: icon + kind label + expand/collapse + status dot */}
+          {/* Header row: icon + kind label + (right-aligned) policy badge + expand/collapse + status dot */}
           <div className="flex items-center gap-1.5 mb-0.5">
             <span className={iconClass} />
             <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary font-medium">
               {isPodGroup ? 'Pod Group' : displayKind(kind)}
             </span>
-            {/* Expand/Collapse button for PodGroup */}
-            {canExpand && (
-              <button
-                onClick={(e) => {
-                  e.stopPropagation()
-                  onExpand(id)
-                }}
-                className="ml-auto p-0.5 hover:bg-theme-elevated rounded transition-colors"
-                title="Expand to show individual pods"
-              >
-                <ChevronDown className="w-3.5 h-3.5 text-theme-text-secondary" />
-              </button>
-            )}
-            {canCollapse && (
-              <button
-                onClick={(e) => {
-                  e.stopPropagation()
-                  onCollapse(id)
-                }}
-                className="ml-auto p-0.5 hover:bg-theme-elevated rounded transition-colors"
-                title="Collapse back to group"
-              >
-                <ChevronUp className="w-3.5 h-3.5 text-theme-text-secondary" />
-              </button>
-            )}
-            {issueTooltip ? (
-              <Tooltip content={issueTooltip} position="right">
-                <span
-                  className={clsx(
-                    canExpand || canCollapse ? '' : 'ml-auto',
-                    'w-1.5 h-1.5 rounded-full cursor-help',
-                    getStatusDotColor(status)
-                  )}
-                />
-              </Tooltip>
-            ) : (
-              <span
-                className={clsx(
-                  canExpand || canCollapse ? '' : 'ml-auto',
-                  'w-1.5 h-1.5 rounded-full',
-                  getStatusDotColor(status)
-                )}
-              />
-            )}
+            <div className="ml-auto flex items-center gap-1.5">
+              {policyStatus && (
+                <Tooltip content={policyStatus === 'protected' ? 'Protected by NetworkPolicy' : 'No NetworkPolicy coverage'} position="right">
+                  <span className={clsx(
+                    'inline-flex items-center justify-center w-3 h-3 rounded-sm text-[8px] font-bold cursor-help leading-none',
+                    policyStatus === 'protected'
+                      ? 'bg-green-500/20 text-green-500 border border-green-500/30'
+                      : 'bg-yellow-500/20 text-yellow-500 border border-yellow-500/30',
+                  )}>
+                    {policyStatus === 'protected' ? '✓' : '!'}
+                  </span>
+                </Tooltip>
+              )}
+              {canExpand && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onExpand(id)
+                  }}
+                  className="p-0.5 hover:bg-theme-elevated rounded transition-colors"
+                  title="Expand to show individual pods"
+                >
+                  <ChevronDown className="w-3.5 h-3.5 text-theme-text-secondary" />
+                </button>
+              )}
+              {canCollapse && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onCollapse(id)
+                  }}
+                  className="p-0.5 hover:bg-theme-elevated rounded transition-colors"
+                  title="Collapse back to group"
+                >
+                  <ChevronUp className="w-3.5 h-3.5 text-theme-text-secondary" />
+                </button>
+              )}
+              {issueTooltip ? (
+                <Tooltip content={issueTooltip} position="right">
+                  <span className={clsx('w-1.5 h-1.5 rounded-full cursor-help', getStatusDotColor(status))} />
+                </Tooltip>
+              ) : (
+                <span className={clsx('w-1.5 h-1.5 rounded-full', getStatusDotColor(status))} />
+              )}
+            </div>
           </div>
 
-          {/* Network Policy coverage indicator */}
-          {policyStatus && (
-            <Tooltip content={policyStatus === 'protected' ? 'Protected by NetworkPolicy' : 'No NetworkPolicy coverage'} position="right">
-              <span className={clsx(
-                'inline-flex items-center justify-center w-3.5 h-3.5 rounded-sm text-[8px] font-bold cursor-help',
-                policyStatus === 'protected'
-                  ? 'bg-green-500/20 text-green-500 border border-green-500/30'
-                  : 'bg-yellow-500/20 text-yellow-500 border border-yellow-500/30',
-              )}>
-                {policyStatus === 'protected' ? '✓' : '!'}
-              </span>
-            </Tooltip>
-          )}
-
           {/* Name */}
           <div className="text-sm font-medium text-theme-text-primary truncate pr-1">
             {name}

package/src/components/topology/TopologyGraph.tsx

@@ -654,12 +654,12 @@ export function TopologyGraph({
   }, [selectedNodeId, setNodes])
 
   if (!topology) {
-    return <PaneLoader label="Loading topology…" className="flex-1" />
+    return <PaneLoader label="Loading topology…" className="absolute inset-0" />
   }
 
   if (topology.nodes.length === 0) {
     return (
-      <div className="flex-1 flex items-center justify-center text-theme-text-secondary">
+      <div className="absolute inset-0 flex items-center justify-center text-theme-text-secondary">
         <div className="text-center">
           <p className="text-lg">No resources found</p>
           <p className="text-sm mt-2">
@@ -673,7 +673,7 @@ export function TopologyGraph({
   // Show layout error if we have topology data but layout failed
   if (layoutError && nodes.length === 0) {
     return (
-      <div className="flex-1 flex items-center justify-center text-theme-text-secondary">
+      <div className="absolute inset-0 flex items-center justify-center text-theme-text-secondary">
         <div className="text-center max-w-md">
           <p className="text-lg text-amber-400">Layout Error</p>
           <p className="text-sm mt-2">

package/src/types/core.ts

@@ -33,11 +33,27 @@ export interface Capabilities {
   helmWrite: boolean      // Helm write operations (install, upgrade, rollback, uninstall, apply values)
   nodeWrite: boolean      // Node write operations (cordon, uncordon, drain)
   mcpEnabled: boolean     // MCP server is running
+  // How / where this Radar binary is running. Optional on the wire so a
+  // newer frontend (e.g. radar-hub-web bundling a fresher @skyhook-io/radar-app)
+  // doesn't crash against an older backend that hasn't shipped the field yet —
+  // consumers should default to { mode: 'local' } when absent.
+  deployment?: Deployment
   resources?: ResourcePermissions // Per-resource-type permissions
   authEnabled?: boolean   // Auth is enabled on the backend
   username?: string       // Authenticated user's username (when auth enabled)
 }
 
+// DeploymentMode is the closed set of topologies Radar can run in.
+// `local` is a developer's machine with a kubeconfig (most OSS use).
+// `in-cluster` is a Radar pod inside the cluster, no kubeconfig.
+// `cloud` is in-cluster + tunneled to Radar Cloud's hub — UI suppresses
+// chrome the hub already renders (cluster headline, local-MCP card).
+export type DeploymentMode = 'local' | 'in-cluster' | 'cloud'
+
+export interface Deployment {
+  mode: DeploymentMode
+}
+
 // Core node kinds that have specific UI handling
 //
 // When adding a new kind here, also update: