@skyhook-io/k8s-ui 1.2.3 → 1.3.0

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

@@ -191,7 +191,7 @@ export function FluxHelmReleaseRenderer({ data }: FluxHelmReleaseRendererProps)
                   </span>
                   <span
                     className={clsx(
-                      'px-1.5 py-0.5 rounded text-xs',
+                      'badge-sm',
                       release.status === 'deployed'
                         ? 'status-healthy'
                         : release.status === 'failed'

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

@@ -77,7 +77,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
               hostnames.length > 0 ? (
                 <div className="flex flex-wrap gap-1">
                   {hostnames.map((h: string) => (
-                    <span key={h} className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary">{h}</span>
+                    <span key={h} className="badge bg-theme-elevated text-theme-text-secondary">{h}</span>
                   ))}
                 </div>
               ) : (
@@ -111,7 +111,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
             const multiBackend = backendRefs.length > 1
 
             return (
-              <div key={ruleIdx} className="bg-theme-elevated/30 rounded p-2.5">
+              <div key={ruleIdx} className="card-inner">
                 <div className="text-xs font-medium text-theme-text-tertiary mb-1.5">
                   Rule {ruleIdx + 1}
                 </div>
@@ -224,7 +224,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
               const resolved = conditions.find((c: any) => c.type === 'ResolvedRefs')
 
               return (
-                <div key={`${ref.namespace || ''}-${ref.name}-${idx}`} className="bg-theme-elevated/30 rounded p-2.5">
+                <div key={`${ref.namespace || ''}-${ref.name}-${idx}`} className="card-inner">
                   <div className="text-sm font-medium text-theme-text-primary mb-1.5">
                     {ref.namespace ? `${ref.namespace}/` : ''}{ref.name || 'unknown'}
                     {ref.sectionName ? ` (${ref.sectionName})` : ''}
@@ -232,7 +232,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
                   <div className="flex flex-wrap gap-2">
                     {accepted && (
                       <span className={clsx(
-                        'px-2 py-0.5 rounded text-xs font-medium',
+                        'badge',
                         accepted.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
                       )}>
                         {accepted.status === 'True' ? 'Accepted' : 'Not Accepted'}
@@ -240,7 +240,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
                     )}
                     {resolved && (
                       <span className={clsx(
-                        'px-2 py-0.5 rounded text-xs font-medium',
+                        'badge',
                         resolved.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
                       )}>
                         {resolved.status === 'True' ? 'Refs Resolved' : 'Unresolved Refs'}

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

@@ -35,7 +35,7 @@ export function GatewayClassRenderer({ data }: GatewayClassRendererProps) {
             label="Accepted"
             value={
               <span className={clsx(
-                'px-2 py-0.5 rounded text-xs font-medium',
+                'badge',
                 isAccepted
                   ? 'bg-green-500/20 text-green-400'
                   : isNotAccepted

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

@@ -68,7 +68,7 @@ export function GatewayRenderer({ data, onNavigate }: GatewayRendererProps) {
             label="Accepted"
             value={
               <span className={clsx(
-                'px-2 py-0.5 rounded text-xs font-medium',
+                'badge',
                 isAccepted
                   ? 'bg-green-500/20 text-green-400'
                   : isNotAccepted
@@ -83,7 +83,7 @@ export function GatewayRenderer({ data, onNavigate }: GatewayRendererProps) {
             label="Programmed"
             value={
               <span className={clsx(
-                'px-2 py-0.5 rounded text-xs font-medium',
+                'badge',
                 isProgrammed
                   ? 'bg-green-500/20 text-green-400'
                   : isNotProgrammed
@@ -127,7 +127,7 @@ export function GatewayRenderer({ data, onNavigate }: GatewayRendererProps) {
             const isHTTPS = listener.protocol === 'HTTPS' || listener.protocol === 'TLS'
 
             return (
-              <div key={listener.name} className="bg-theme-elevated/30 rounded p-3">
+              <div key={listener.name} className="card-inner-lg">
                 <div className="flex items-center justify-between mb-2">
                   <div className="flex items-center gap-2">
                     {isHTTPS && <Lock className="w-3.5 h-3.5 text-green-400" />}

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

@@ -428,7 +428,7 @@ function GenericConditionsSection({ conditions }: { conditions: any[] }) {
                 <div className="flex items-center gap-2 flex-wrap">
                   <span className="text-theme-text-primary font-medium">{cond.type}</span>
                   <span className={clsx(
-                    'px-1.5 py-0.5 rounded text-xs font-medium',
+                    'badge-sm',
                     isTrue ? 'bg-theme-elevated text-theme-text-secondary' : 'bg-red-500/20 text-red-400'
                   )}>
                     {cond.status}

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

@@ -136,7 +136,7 @@ export function HPARenderer({ data, onNavigate }: HPARendererProps) {
               const current = metric.resource?.current?.averageUtilization || metric.resource?.current?.averageValue
               const target = spec.metrics?.[i]?.resource?.target?.averageUtilization || spec.metrics?.[i]?.resource?.target?.averageValue
               return (
-                <div key={i} className="bg-theme-elevated/30 rounded p-2">
+                <div key={i} className="card-inner">
                   <div className="flex items-center justify-between text-sm">
                     <span className="text-theme-text-primary">{metric.resource?.name || metric.type}</span>
                     <span className="text-theme-text-secondary">{current}{typeof current === 'number' ? '%' : ''} / {target}{typeof target === 'number' ? '%' : ''}</span>

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

@@ -77,7 +77,7 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
               hostnames.length > 0 ? (
                 <div className="flex flex-wrap gap-1">
                   {hostnames.map((h: string) => (
-                    <span key={h} className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary">{h}</span>
+                    <span key={h} className="badge bg-theme-elevated text-theme-text-secondary">{h}</span>
                   ))}
                 </div>
               ) : (
@@ -111,7 +111,7 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
             const multiBackend = backendRefs.length > 1
 
             return (
-              <div key={ruleIdx} className="bg-theme-elevated/30 rounded p-2.5">
+              <div key={ruleIdx} className="card-inner">
                 <div className="text-xs font-medium text-theme-text-tertiary mb-1.5">
                   Rule {ruleIdx + 1}
                 </div>
@@ -256,7 +256,7 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
               const resolved = conditions.find((c: any) => c.type === 'ResolvedRefs')
 
               return (
-                <div key={`${ref.namespace || ''}-${ref.name}-${idx}`} className="bg-theme-elevated/30 rounded p-2.5">
+                <div key={`${ref.namespace || ''}-${ref.name}-${idx}`} className="card-inner">
                   <div className="text-sm font-medium text-theme-text-primary mb-1.5">
                     {ref.namespace ? `${ref.namespace}/` : ''}{ref.name || 'unknown'}
                     {ref.sectionName ? ` (${ref.sectionName})` : ''}
@@ -264,7 +264,7 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
                   <div className="flex flex-wrap gap-2">
                     {accepted && (
                       <span className={clsx(
-                        'px-2 py-0.5 rounded text-xs font-medium',
+                        'badge',
                         accepted.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
                       )}>
                         {accepted.status === 'True' ? 'Accepted' : 'Not Accepted'}
@@ -272,7 +272,7 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
                     )}
                     {resolved && (
                       <span className={clsx(
-                        'px-2 py-0.5 rounded text-xs font-medium',
+                        'badge',
                         resolved.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
                       )}>
                         {resolved.status === 'True' ? 'Refs Resolved' : 'Unresolved Refs'}

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

@@ -97,7 +97,7 @@ export function HelmRepositoryRenderer({ data }: HelmRepositoryRendererProps) {
             label="Type"
             value={
               <span className={clsx(
-                'px-2 py-0.5 rounded text-xs font-medium',
+                'badge',
                 isOCI ? 'bg-purple-500/20 text-purple-400' : 'bg-blue-500/20 text-blue-400'
               )}>
                 {isOCI ? 'OCI' : 'HTTP'}

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

@@ -21,7 +21,7 @@ export function IngressClassRenderer({ data }: IngressClassRendererProps) {
             label="Default"
             value={
               <span className={clsx(
-                'px-2 py-0.5 rounded text-xs font-medium',
+                'badge',
                 isDefault
                   ? 'bg-green-500/20 text-green-400'
                   : 'bg-gray-500/20 text-gray-400'

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

@@ -53,7 +53,7 @@ export function IngressRenderer({ data, onNavigate }: IngressRendererProps) {
       <Section title="Rules" defaultExpanded>
         <div className="space-y-3">
           {rules.map((rule: any, i: number) => (
-            <div key={i} className="bg-theme-elevated/30 rounded p-3">
+            <div key={i} className="card-inner-lg">
               <div className="flex items-center gap-2 mb-2">
                 {tls.some((t: any) => t.hosts?.includes(rule.host)) && (
                   <Shield className="w-3.5 h-3.5 text-green-400" />

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

@@ -51,7 +51,7 @@ export function IstioAuthorizationPolicyRenderer({ data }: IstioAuthorizationPol
         <PropertyList>
           <Property label="Action" value={
             <span className={clsx(
-              'px-2 py-0.5 rounded text-xs font-medium',
+              'badge',
               actionColors[action] || 'bg-gray-500/20 text-gray-400'
             )}>
               {action}
@@ -77,7 +77,7 @@ export function IstioAuthorizationPolicyRenderer({ data }: IstioAuthorizationPol
         <Section title={`Rules (${rules.length})`} defaultExpanded>
           <div className="space-y-3">
             {rules.map((rule: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-3">
+              <div key={i} className="card-inner-lg">
                 <div className="text-sm font-medium text-theme-text-primary mb-2">Rule {i + 1}</div>
 
                 {/* From (sources) */}
@@ -87,22 +87,22 @@ export function IstioAuthorizationPolicyRenderer({ data }: IstioAuthorizationPol
                     {rule.from.map((f: any, fi: number) => (
                       <div key={fi} className="flex flex-wrap gap-1 mb-1">
                         {f.source?.principals?.map((p: string, pi: number) => (
-                          <span key={`p-${pi}`} className="px-1.5 py-0.5 bg-blue-500/10 text-blue-400 rounded text-xs">
+                          <span key={`p-${pi}`} className="badge-sm bg-blue-500/10 text-blue-400">
                             principal: {p}
                           </span>
                         ))}
                         {f.source?.namespaces?.map((n: string, ni: number) => (
-                          <span key={`n-${ni}`} className="px-1.5 py-0.5 bg-purple-500/10 text-purple-400 rounded text-xs">
+                          <span key={`n-${ni}`} className="badge-sm bg-purple-500/10 text-purple-400">
                             namespace: {n}
                           </span>
                         ))}
                         {f.source?.ipBlocks?.map((ip: string, ipi: number) => (
-                          <span key={`ip-${ipi}`} className="px-1.5 py-0.5 bg-orange-500/10 text-orange-400 rounded text-xs">
+                          <span key={`ip-${ipi}`} className="badge-sm bg-orange-500/10 text-orange-400">
                             IP: {ip}
                           </span>
                         ))}
                         {f.source?.requestPrincipals?.map((rp: string, rpi: number) => (
-                          <span key={`rp-${rpi}`} className="px-1.5 py-0.5 bg-cyan-500/10 text-cyan-400 rounded text-xs">
+                          <span key={`rp-${rpi}`} className="badge-sm bg-cyan-500/10 text-cyan-400">
                             reqPrincipal: {rp}
                           </span>
                         ))}
@@ -118,22 +118,22 @@ export function IstioAuthorizationPolicyRenderer({ data }: IstioAuthorizationPol
                     {rule.to.map((t: any, ti: number) => (
                       <div key={ti} className="flex flex-wrap gap-1 mb-1">
                         {t.operation?.hosts?.map((h: string, hi: number) => (
-                          <span key={`h-${hi}`} className="px-1.5 py-0.5 bg-blue-500/10 text-blue-400 rounded text-xs">
+                          <span key={`h-${hi}`} className="badge-sm bg-blue-500/10 text-blue-400">
                             host: {h}
                           </span>
                         ))}
                         {t.operation?.ports?.map((p: string, pi: number) => (
-                          <span key={`p-${pi}`} className="px-1.5 py-0.5 bg-orange-500/10 text-orange-400 rounded text-xs">
+                          <span key={`p-${pi}`} className="badge-sm bg-orange-500/10 text-orange-400">
                             port: {p}
                           </span>
                         ))}
                         {t.operation?.methods?.map((m: string, mi: number) => (
-                          <span key={`m-${mi}`} className="px-1.5 py-0.5 bg-green-500/10 text-green-400 rounded text-xs">
+                          <span key={`m-${mi}`} className="badge-sm bg-green-500/10 text-green-400">
                             method: {m}
                           </span>
                         ))}
                         {t.operation?.paths?.map((p: string, pi: number) => (
-                          <span key={`path-${pi}`} className="px-1.5 py-0.5 bg-purple-500/10 text-purple-400 rounded text-xs">
+                          <span key={`path-${pi}`} className="badge-sm bg-purple-500/10 text-purple-400">
                             path: {p}
                           </span>
                         ))}

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

@@ -151,7 +151,7 @@ export function IstioDestinationRuleRenderer({ data, onNavigate }: IstioDestinat
         <Section title={`Subsets (${subsets.length})`} defaultExpanded>
           <div className="space-y-3">
             {subsets.map((subset, i) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-3">
+              <div key={i} className="card-inner-lg">
                 <div className="text-sm font-medium text-theme-text-primary mb-2">{subset.name}</div>
                 {Object.keys(subset.labels).length > 0 && (
                   <div className="mb-2">

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

@@ -43,7 +43,7 @@ export function IstioGatewayRenderer({ data }: IstioGatewayRendererProps) {
       <Section title="Gateway" icon={Globe} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />
@@ -64,7 +64,7 @@ export function IstioGatewayRenderer({ data }: IstioGatewayRendererProps) {
               const protocol = server.port.protocol || 'TCP'
 
               return (
-                <div key={i} className="bg-theme-elevated/30 rounded p-3">
+                <div key={i} className="card-inner-lg">
                   <div className="flex items-center justify-between mb-2">
                     <div className="flex items-center gap-2">
                       {isSecure && <Lock className="w-3.5 h-3.5 text-green-400" />}

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

@@ -32,7 +32,7 @@ export function IstioPeerAuthenticationRenderer({ data }: IstioPeerAuthenticatio
         <PropertyList>
           <Property label="mTLS Mode" value={
             <span className={clsx(
-              'px-2 py-0.5 rounded text-xs font-medium',
+              'badge',
               modeColors[mode] || modeColors.UNSET
             )}>
               {mode}
@@ -67,7 +67,7 @@ export function IstioPeerAuthenticationRenderer({ data }: IstioPeerAuthenticatio
               <div key={port} className="flex items-center gap-2 text-sm">
                 <span className="text-theme-text-secondary font-mono">Port {port}</span>
                 <span className={clsx(
-                  'px-1.5 py-0.5 rounded text-xs font-medium',
+                  'badge-sm',
                   modeColors[config.mode] || modeColors.UNSET
                 )}>
                   {config.mode}

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

@@ -38,14 +38,14 @@ export function IstioServiceEntryRenderer({ data }: IstioServiceEntryRendererPro
       <Section title="Service Entry" icon={Globe} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />
           <Property label="Hosts" value={hosts.join(', ') || '-'} />
           <Property label="Location" value={
             <span className={clsx(
-              'px-2 py-0.5 rounded text-xs font-medium',
+              'badge',
               location === 'MESH_EXTERNAL'
                 ? 'bg-orange-500/20 text-orange-400'
                 : 'bg-blue-500/20 text-blue-400'
@@ -63,7 +63,7 @@ export function IstioServiceEntryRenderer({ data }: IstioServiceEntryRendererPro
           <div className="space-y-1">
             {ports.map((port, i) => (
               <div key={i} className="flex items-center gap-2 text-sm">
-                <span className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                <span className="badge-sm bg-theme-hover text-theme-text-secondary">
                   {port.number}/{port.protocol || 'TCP'}
                 </span>
                 {port.name && (
@@ -80,12 +80,12 @@ export function IstioServiceEntryRenderer({ data }: IstioServiceEntryRendererPro
         <Section title={`Endpoints (${endpoints.length})`} defaultExpanded>
           <div className="space-y-2">
             {endpoints.map((endpoint, i) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+              <div key={i} className="card-inner">
                 <div className="text-sm text-theme-text-primary">{endpoint.address}</div>
                 {endpoint.ports && Object.keys(endpoint.ports).length > 0 && (
                   <div className="flex flex-wrap gap-1 mt-1">
                     {Object.entries(endpoint.ports).map(([name, port]) => (
-                      <span key={name} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                      <span key={name} className="badge-sm bg-theme-hover text-theme-text-secondary">
                         {name}: {port}
                       </span>
                     ))}
@@ -94,7 +94,7 @@ export function IstioServiceEntryRenderer({ data }: IstioServiceEntryRendererPro
                 {endpoint.labels && Object.keys(endpoint.labels).length > 0 && (
                   <div className="flex flex-wrap gap-1 mt-1">
                     {Object.entries(endpoint.labels).map(([k, v]) => (
-                      <span key={k} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                      <span key={k} className="badge-sm bg-theme-hover text-theme-text-secondary">
                         {k}={v}
                       </span>
                     ))}

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

@@ -51,7 +51,7 @@ export function IstioVirtualServiceRenderer({ data, onNavigate }: IstioVirtualSe
       <Section title="Routing" icon={Network} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />
@@ -62,7 +62,7 @@ export function IstioVirtualServiceRenderer({ data, onNavigate }: IstioVirtualSe
                 {gateways.map((gw, i) => {
                   // Gateway reference can be "namespace/name" or just "name" or "mesh"
                   if (gw === 'mesh') {
-                    return <span key={i} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">mesh</span>
+                    return <span key={i} className="badge-sm bg-theme-hover text-theme-text-secondary">mesh</span>
                   }
                   const parts = gw.split('/')
                   const gwNs = parts.length === 2 ? parts[0] : ns
@@ -88,7 +88,7 @@ export function IstioVirtualServiceRenderer({ data, onNavigate }: IstioVirtualSe
         <Section title={`HTTP Routes (${httpRoutes.length})`} icon={Route} defaultExpanded>
           <div className="space-y-3">
             {httpRoutes.map((route: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-3">
+              <div key={i} className="card-inner-lg">
                 {/* Route header */}
                 <div className="flex items-center gap-2 mb-2">
                   <span className="text-sm font-medium text-theme-text-primary">
@@ -239,7 +239,7 @@ export function IstioVirtualServiceRenderer({ data, onNavigate }: IstioVirtualSe
         <Section title={`TCP Routes (${tcpRoutes.length})`} defaultExpanded>
           <div className="space-y-2">
             {tcpRoutes.map((route: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+              <div key={i} className="card-inner">
                 {route.match && (
                   <div className="text-xs text-theme-text-tertiary mb-1">
                     Match: {JSON.stringify(route.match)}
@@ -263,7 +263,7 @@ export function IstioVirtualServiceRenderer({ data, onNavigate }: IstioVirtualSe
         <Section title={`TLS Routes (${tlsRoutes.length})`} defaultExpanded>
           <div className="space-y-2">
             {tlsRoutes.map((route: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+              <div key={i} className="card-inner">
                 {route.match && (
                   <div className="text-xs text-theme-text-tertiary mb-1">
                     SNI: {route.match.map((m: any) => m.sniHosts?.join(', ')).join('; ')}

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

@@ -50,7 +50,7 @@ export function KarpenterEC2NodeClassRenderer({ data }: KarpenterEC2NodeClassRen
         <Section title={`Block Devices (${blockDevices.length})`} icon={HardDrive}>
           <div className="space-y-2">
             {blockDevices.map((bd: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+              <div key={i} className="card-inner">
                 <div className="text-sm font-medium text-theme-text-primary mb-1">
                   {bd.deviceName || `/dev/xvda`}
                 </div>
@@ -102,9 +102,9 @@ export function KarpenterEC2NodeClassRenderer({ data }: KarpenterEC2NodeClassRen
           <div className="mb-3">
             <div className="text-xs text-theme-text-tertiary font-medium mb-1">Subnet Selector</div>
             {subnetTerms.map((term: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2 mb-1">
+              <div key={i} className="card-inner mb-1">
                 {term.tags && Object.entries(term.tags).map(([key, val]) => (
-                  <span key={key} className="inline-flex items-center px-1.5 py-0.5 mr-1 mb-1 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                  <span key={key} className="badge-sm mr-1 mb-1 bg-theme-hover text-theme-text-secondary">
                     {key}: {String(val)}
                   </span>
                 ))}
@@ -119,9 +119,9 @@ export function KarpenterEC2NodeClassRenderer({ data }: KarpenterEC2NodeClassRen
           <div>
             <div className="text-xs text-theme-text-tertiary font-medium mb-1">Security Group Selector</div>
             {sgTerms.map((term: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2 mb-1">
+              <div key={i} className="card-inner mb-1">
                 {term.tags && Object.entries(term.tags).map(([key, val]) => (
-                  <span key={key} className="inline-flex items-center px-1.5 py-0.5 mr-1 mb-1 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                  <span key={key} className="badge-sm mr-1 mb-1 bg-theme-hover text-theme-text-secondary">
                     {key}: {String(val)}
                   </span>
                 ))}

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

@@ -105,7 +105,7 @@ export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeCl
         <Section title={`Requirements (${requirements.length})`} icon={Settings}>
           <div className="space-y-1">
             {requirements.map((req: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+              <div key={i} className="card-inner">
                 <div className="flex items-center gap-2 text-sm">
                   <span className="text-theme-text-primary font-medium">{req.key}</span>
                   <span className="text-theme-text-tertiary">{req.operator}</span>
@@ -113,7 +113,7 @@ export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeCl
                 {req.values && req.values.length > 0 && (
                   <div className="mt-1 flex flex-wrap gap-1">
                     {req.values.map((v: string, vi: number) => (
-                      <span key={vi} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                      <span key={vi} className="badge-sm bg-theme-hover text-theme-text-secondary">
                         {v}
                       </span>
                     ))}

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

@@ -92,7 +92,7 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
           <div className="mt-2 space-y-1">
             <div className="text-xs text-theme-text-tertiary font-medium mb-1">Budgets</div>
             {disruption.budgets.map((budget: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm text-theme-text-secondary">
+              <div key={i} className="card-inner text-sm text-theme-text-secondary">
                 {budget.nodes && <span>Nodes: {budget.nodes}</span>}
                 {budget.schedule && <span className="ml-2">Schedule: {budget.schedule}</span>}
                 {budget.duration && <span className="ml-2">Duration: {budget.duration}</span>}
@@ -109,7 +109,7 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
             {Object.entries(templateLabels).map(([key, val]) => (
               <span
                 key={key}
-                className="inline-flex items-center px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary"
+                className="badge-sm bg-theme-hover text-theme-text-secondary"
               >
                 {key}: {String(val)}
               </span>
@@ -123,7 +123,7 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
         <Section title={`Requirements (${requirements.length})`} icon={Settings} defaultExpanded>
           <div className="space-y-1">
             {requirements.map((req: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+              <div key={i} className="card-inner">
                 <div className="flex items-center gap-2 text-sm">
                   <span className="text-theme-text-primary font-medium">{req.key}</span>
                   <span className="text-theme-text-tertiary">{req.operator}</span>
@@ -131,7 +131,7 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
                 {req.values && req.values.length > 0 && (
                   <div className="mt-1 flex flex-wrap gap-1">
                     {req.values.map((v: string, vi: number) => (
-                      <span key={vi} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                      <span key={vi} className="badge-sm bg-theme-hover text-theme-text-secondary">
                         {v}
                       </span>
                     ))}

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

@@ -57,14 +57,14 @@ export function KedaScaledJobRenderer({ data }: KedaScaledJobRendererProps) {
         <Section title={`Triggers (${triggers.length})`} defaultExpanded>
           <div className="space-y-2">
             {triggers.map((trigger, i) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+              <div key={i} className="card-inner">
                 <div className="flex items-center gap-2 text-sm">
                   <span className="text-theme-text-primary font-medium">{trigger.type}</span>
                   {trigger.name && (
                     <span className="text-theme-text-tertiary">({trigger.name})</span>
                   )}
                   {trigger.authenticationRef && (
-                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                    <span className="badge-sm bg-theme-hover text-theme-text-secondary">
                       auth: {trigger.authenticationRef.name}
                     </span>
                   )}
@@ -72,7 +72,7 @@ export function KedaScaledJobRenderer({ data }: KedaScaledJobRendererProps) {
                 {trigger.metadata && Object.keys(trigger.metadata).length > 0 && (
                   <div className="mt-1 flex flex-wrap gap-1">
                     {Object.entries(trigger.metadata).map(([k, v]) => (
-                      <span key={k} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                      <span key={k} className="badge-sm bg-theme-hover text-theme-text-secondary">
                         {k}: {v}
                       </span>
                     ))}

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

@@ -104,14 +104,14 @@ export function KedaScaledObjectRenderer({ data, onNavigate }: KedaScaledObjectR
         <Section title={`Triggers (${triggers.length})`} defaultExpanded>
           <div className="space-y-2">
             {triggers.map((trigger, i) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+              <div key={i} className="card-inner">
                 <div className="flex items-center gap-2 text-sm">
                   <span className="text-theme-text-primary font-medium">{trigger.type}</span>
                   {trigger.name && (
                     <span className="text-theme-text-tertiary">({trigger.name})</span>
                   )}
                   {trigger.authenticationRef && (
-                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                    <span className="badge-sm bg-theme-hover text-theme-text-secondary">
                       auth: {trigger.authenticationRef.name}
                     </span>
                   )}
@@ -119,7 +119,7 @@ export function KedaScaledObjectRenderer({ data, onNavigate }: KedaScaledObjectR
                 {trigger.metadata && Object.keys(trigger.metadata).length > 0 && (
                   <div className="mt-1 flex flex-wrap gap-1">
                     {Object.entries(trigger.metadata).map(([k, v]) => (
-                      <span key={k} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                      <span key={k} className="badge-sm bg-theme-hover text-theme-text-secondary">
                         {k}: {v}
                       </span>
                     ))}

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

@@ -43,7 +43,7 @@ export function KedaTriggerAuthRenderer({ data, onNavigate }: KedaTriggerAuthRen
         <Section title={`Secret References (${secretRefs.length})`} icon={KeyRound} defaultExpanded>
           <div className="space-y-2">
             {secretRefs.map((ref, i) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+              <div key={i} className="card-inner">
                 <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
                   <span className="text-theme-text-primary font-medium">{ref.parameter}</span>
                   <span className="text-theme-text-secondary">
@@ -61,7 +61,7 @@ export function KedaTriggerAuthRenderer({ data, onNavigate }: KedaTriggerAuthRen
         <Section title={`Environment Variables (${envVars.length})`} defaultExpanded>
           <div className="space-y-2">
             {envVars.map((env, i) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+              <div key={i} className="card-inner">
                 <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
                   <span className="text-theme-text-primary font-medium">{env.parameter}</span>
                   <span className="text-theme-text-secondary">Env: {env.name}</span>
@@ -90,7 +90,7 @@ export function KedaTriggerAuthRenderer({ data, onNavigate }: KedaTriggerAuthRen
             <div className="mt-2 space-y-1">
               <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Secrets</div>
               {vault.secrets.map((s: any, i: number) => (
-                <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+                <div key={i} className="card-inner text-sm">
                   <span className="text-theme-text-primary font-medium">{s.parameter}</span>
                   <span className="text-theme-text-secondary ml-2">{s.path} / {s.key}</span>
                 </div>
@@ -113,7 +113,7 @@ export function KedaTriggerAuthRenderer({ data, onNavigate }: KedaTriggerAuthRen
             <div className="mt-2 space-y-1">
               <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Secrets</div>
               {azureKeyVault.secrets.map((s: any, i: number) => (
-                <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+                <div key={i} className="card-inner text-sm">
                   <span className="text-theme-text-primary font-medium">{s.parameter}</span>
                   <span className="text-theme-text-secondary ml-2">{s.name}</span>
                 </div>
@@ -135,7 +135,7 @@ export function KedaTriggerAuthRenderer({ data, onNavigate }: KedaTriggerAuthRen
             <div className="mt-2 space-y-1">
               <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Secrets</div>
               {awsSecretManager.secrets.map((s: any, i: number) => (
-                <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+                <div key={i} className="card-inner text-sm">
                   <span className="text-theme-text-primary font-medium">{s.parameter}</span>
                   <span className="text-theme-text-secondary ml-2">{s.name}</span>
                 </div>

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

@@ -23,7 +23,7 @@ export function KnativeConfigurationRenderer({ data, onNavigate }: KnativeConfig
       <Section title="Overview" icon={Settings} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />
@@ -50,7 +50,7 @@ export function KnativeConfigurationRenderer({ data, onNavigate }: KnativeConfig
         <Section title="Template" icon={Container} defaultExpanded>
           <div className="space-y-2">
             {containers.map((c: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+              <div key={i} className="card-inner text-sm">
                 <div className="font-medium text-theme-text-primary">{c.name || 'container'}</div>
                 <div className="text-xs text-theme-text-secondary truncate" title={c.image}>{c.image}</div>
                 {c.ports && c.ports.length > 0 && (