@skyhook-io/k8s-ui 1.3.2 → 1.4.1

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

@@ -1,5 +1,5 @@
-import { useState } from 'react'
-import { Package, ChevronDown, ChevronRight } from 'lucide-react'
+import { useState, useMemo } from 'react'
+import { Package, ChevronDown, ChevronRight, Search } from 'lucide-react'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
 import { formatTrivyImage } from './trivy-shared'
@@ -13,6 +13,7 @@ const INITIAL_SHOW_COUNT = 100
 export function SbomReportRenderer({ data }: SbomReportRendererProps) {
   const [showAll, setShowAll] = useState(false)
   const [expanded, setExpanded] = useState(true)
+  const [searchTerm, setSearchTerm] = useState('')
 
   const report = data.report || {}
   const scanner = report.scanner || {}
@@ -29,7 +30,18 @@ export function SbomReportRenderer({ data }: SbomReportRendererProps) {
   const bomFormat = components.bomFormat || '-'
   const specVersion = components.specVersion || '-'
 
-  const displayedComponents = showAll ? bom : bom.slice(0, INITIAL_SHOW_COUNT)
+  const filteredBom = useMemo(() => {
+    if (!searchTerm) return bom
+    const term = searchTerm.toLowerCase()
+    return bom.filter((comp: any) =>
+      (comp.name || '').toLowerCase().includes(term) ||
+      (comp.purl || '').toLowerCase().includes(term) ||
+      (comp.type || '').toLowerCase().includes(term)
+    )
+  }, [bom, searchTerm])
+
+  const hasActiveFilter = searchTerm !== ''
+  const displayedComponents = showAll ? filteredBom : filteredBom.slice(0, INITIAL_SHOW_COUNT)
 
   return (
     <>
@@ -58,6 +70,30 @@ export function SbomReportRenderer({ data }: SbomReportRendererProps) {
           </button>
           {expanded && (
             <div className="overflow-x-auto -mx-1">
+              {/* Search */}
+              <div className="flex items-center gap-2 mb-2 px-1">
+                <div className="relative flex-1">
+                  <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-theme-text-tertiary" />
+                  <input
+                    type="text"
+                    placeholder="Filter by name, type, or purl..."
+                    value={searchTerm}
+                    onChange={(e) => { setSearchTerm(e.target.value); setShowAll(false) }}
+                    className="w-full pl-6 pr-2 py-1 text-xs bg-theme-bg border border-theme-border rounded text-theme-text-primary placeholder:text-theme-text-tertiary focus:outline-none focus:ring-1 focus:ring-blue-500/50"
+                  />
+                </div>
+              </div>
+              {hasActiveFilter && (
+                <div className="flex items-center gap-1 mb-2 px-1 text-xs text-theme-text-tertiary">
+                  Showing {filteredBom.length} of {bom.length}
+                  <button
+                    onClick={() => { setSearchTerm(''); setShowAll(false) }}
+                    className="ml-1 text-blue-400 hover:text-blue-300 hover:underline"
+                  >
+                    Clear
+                  </button>
+                </div>
+              )}
               <table className="w-full text-xs">
                 <thead>
                   <tr className="border-b border-theme-border text-theme-text-tertiary">
@@ -81,12 +117,17 @@ export function SbomReportRenderer({ data }: SbomReportRendererProps) {
                   })}
                 </tbody>
               </table>
-              {!showAll && bom.length > INITIAL_SHOW_COUNT && (
+              {displayedComponents.length === 0 && (
+                <div className="py-4 text-center text-xs text-theme-text-tertiary">
+                  No components match the current filter.
+                </div>
+              )}
+              {!showAll && filteredBom.length > INITIAL_SHOW_COUNT && (
                 <button
                   onClick={() => setShowAll(true)}
                   className="mt-2 text-xs text-blue-400 hover:text-blue-300 hover:underline"
                 >
-                  Show all {bom.length} components
+                  Show all {filteredBom.length} components
                 </button>
               )}
             </div>

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

@@ -1,9 +1,10 @@
 import { Lock, Key, FileText } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 
 interface SealedSecretRendererProps {
   data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
 }
 
 function getScope(annotations: Record<string, string> | undefined): string {
@@ -13,7 +14,7 @@ function getScope(annotations: Record<string, string> | undefined): string {
   return 'strict'
 }
 
-export function SealedSecretRenderer({ data }: SealedSecretRendererProps) {
+export function SealedSecretRenderer({ data, onNavigate }: SealedSecretRendererProps) {
   const spec = data.spec || {}
   const status = data.status || {}
   const conditions = status.conditions || []
@@ -65,6 +66,14 @@ export function SealedSecretRenderer({ data }: SealedSecretRendererProps) {
               </span>
             }
           />
+          <Property label="Target Secret" value={
+            <ResourceLink
+              name={data.spec?.template?.metadata?.name || data.metadata?.name || ''}
+              kind="secrets"
+              namespace={data.metadata?.namespace || ''}
+              onNavigate={onNavigate}
+            />
+          } />
           <Property label="Secret Type" value={secretType} />
           <Property label="Scope" value={scope} />
           <Property label="Observed Gen" value={status.observedGeneration} />

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

@@ -1,5 +1,5 @@
 import { Radio } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, LabelSelectorDisplay } from '../../ui/drawer-components'
 import {
   getServiceMonitorEndpoints,
   getServiceMonitorJobLabel,
@@ -12,7 +12,7 @@ interface ServiceMonitorRendererProps {
 
 export function ServiceMonitorRenderer({ data }: ServiceMonitorRendererProps) {
   const endpoints = getServiceMonitorEndpoints(data)
-  const selector = data.spec?.selector?.matchLabels
+  const selector = data.spec?.selector
   const conditions = data.status?.conditions
 
   return (
@@ -53,11 +53,9 @@ export function ServiceMonitorRenderer({ data }: ServiceMonitorRendererProps) {
         </Section>
       )}
 
-      {selector && Object.keys(selector).length > 0 && (
-        <Section title="Selector">
-          <KeyValueBadgeList items={selector} />
-        </Section>
-      )}
+      <Section title="Selector">
+        <LabelSelectorDisplay selector={selector} emptyText="No selector" />
+      </Section>
 
       <ConditionsSection conditions={conditions} />
     </>

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

@@ -16,11 +16,10 @@ export function ServiceRenderer({ data, onCopy, copied, renderPortAction }: Serv
   const namespace = data.metadata?.namespace
   const serviceName = data.metadata?.name
 
-  // Check for issues
   const isLoadBalancer = spec.type === 'LoadBalancer'
+  const isExternalName = spec.type === 'ExternalName'
   const lbPending = isLoadBalancer && lbIngress.length === 0
   const hasNoSelector = !spec.selector || Object.keys(spec.selector).length === 0
-  const isExternalName = spec.type === 'ExternalName'
 
   return (
     <>
@@ -46,47 +45,60 @@ export function ServiceRenderer({ data, onCopy, copied, renderPortAction }: Serv
       <Section title="Service" icon={Globe}>
         <PropertyList>
           <Property label="Type" value={spec.type || 'ClusterIP'} />
-          <Property label="Cluster IP" value={spec.clusterIP} copyable onCopy={onCopy} copied={copied} />
+          {isExternalName ? (
+            <Property label="External Name" value={spec.externalName} copyable onCopy={onCopy} copied={copied} />
+          ) : (
+            <Property label="Cluster IP" value={spec.clusterIP} copyable onCopy={onCopy} copied={copied} />
+          )}
           {spec.externalIPs?.length > 0 && (
             <Property label="External IPs" value={spec.externalIPs.join(', ')} copyable onCopy={onCopy} copied={copied} />
           )}
-          {lbIngress.length > 0 && (
+          {lbIngress.map((ing: any, i: number) => (
             <Property
-              label="Load Balancer"
-              value={lbIngress[0].ip || lbIngress[0].hostname}
+              key={i}
+              label={lbIngress.length > 1 ? `Load Balancer ${i + 1}` : 'Load Balancer'}
+              value={ing.ip || ing.hostname}
               copyable
               onCopy={onCopy}
               copied={copied}
             />
-          )}
+          ))}
           <Property label="Session Affinity" value={spec.sessionAffinity} />
           <Property label="External Traffic" value={spec.externalTrafficPolicy} />
+          <Property label="Internal Traffic" value={spec.internalTrafficPolicy} />
+          {spec.ipFamilyPolicy && <Property label="IP Family Policy" value={spec.ipFamilyPolicy} />}
+          {spec.ipFamilies?.length > 0 && <Property label="IP Families" value={spec.ipFamilies.join(', ')} />}
         </PropertyList>
       </Section>
 
-      <Section title="Ports" defaultExpanded>
-        <div className="space-y-2">
-          {ports.map((port: any, i: number) => (
-            <div key={`${port.port}-${port.protocol || 'TCP'}`} className="card-inner text-sm">
-              <div className="flex items-center justify-between">
-                <span className="text-theme-text-primary font-medium">{port.name || `port-${i + 1}`}</span>
-                <div className="flex items-center gap-2">
-                  {renderPortAction?.({
-                    namespace,
-                    serviceName,
-                    port: port.port,
-                    protocol: port.protocol || 'TCP',
-                  })}
+      {ports.length > 0 && (
+        <Section title="Ports" defaultExpanded>
+          <div className="space-y-2">
+            {ports.map((port: any, i: number) => (
+              <div key={`${port.port}-${port.protocol || 'TCP'}`} className="card-inner text-sm">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className="text-theme-text-primary font-medium">{port.name || `port-${i + 1}`}</span>
+                    <span className="text-xs text-theme-text-tertiary">{port.protocol || 'TCP'}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {renderPortAction?.({
+                      namespace,
+                      serviceName,
+                      port: port.port,
+                      protocol: port.protocol || 'TCP',
+                    })}
+                  </div>
+                </div>
+                <div className="text-xs text-theme-text-secondary mt-1">
+                  {port.port}{port.targetPort != null && port.targetPort !== port.port ? ` → ${port.targetPort}` : ''}
+                  {port.nodePort ? ` (NodePort: ${port.nodePort})` : ''}
                 </div>
               </div>
-              <div className="text-xs text-theme-text-secondary mt-1">
-                {port.port} {port.targetPort !== port.port && `→ ${port.targetPort}`}
-                {port.nodePort && ` (NodePort: ${port.nodePort})`}
-              </div>
-            </div>
-          ))}
-        </div>
-      </Section>
+            ))}
+          </div>
+        </Section>
+      )}
 
       {spec.selector && (
         <Section title="Selector">

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

@@ -56,7 +56,7 @@ export function VeleroBackupRenderer({ data }: VeleroBackupRendererProps) {
         <AlertBanner
           variant="error"
           title={isFailed ? 'Backup Failed' : 'Backup Partially Failed'}
-          message={`${errors} error(s) occurred during backup.`}
+          message={status.failureReason || `${errors} error(s) occurred during backup.`}
           items={validationErrors.length > 0 ? validationErrors : undefined}
         />
       )}
@@ -84,8 +84,16 @@ export function VeleroBackupRenderer({ data }: VeleroBackupRendererProps) {
           )}
           <Property label="Duration" value={getBackupDuration(data)} />
           <Property label="Expiration" value={getBackupExpiry(data)} />
-          {errors > 0 && <Property label="Errors" value={String(errors)} />}
-          {warnings > 0 && <Property label="Warnings" value={String(warnings)} />}
+          <Property label="Errors" value={
+            errors > 0
+              ? <span className="text-red-500 dark:text-red-400 font-medium">{errors}</span>
+              : '0'
+          } />
+          <Property label="Warnings" value={
+            warnings > 0
+              ? <span className="text-amber-500 dark:text-amber-400 font-medium">{warnings}</span>
+              : '0'
+          } />
         </PropertyList>
       </Section>
 

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

@@ -49,7 +49,7 @@ export function VeleroRestoreRenderer({ data }: VeleroRestoreRendererProps) {
         <AlertBanner
           variant="error"
           title={isFailed ? 'Restore Failed' : 'Restore Partially Failed'}
-          message={`${errors} error(s) occurred during restore.`}
+          message={status.failureReason || `${errors} error(s) occurred during restore.`}
         />
       )}
       {warnings > 0 && !isFailed && (
@@ -76,8 +76,16 @@ export function VeleroRestoreRenderer({ data }: VeleroRestoreRendererProps) {
             <Property label="Completed" value={formatAge(status.completionTimestamp) + ' ago'} />
           )}
           <Property label="Duration" value={getRestoreDuration(data)} />
-          {errors > 0 && <Property label="Errors" value={String(errors)} />}
-          {warnings > 0 && <Property label="Warnings" value={String(warnings)} />}
+          <Property label="Errors" value={
+            errors > 0
+              ? <span className="text-red-500 dark:text-red-400 font-medium">{errors}</span>
+              : '0'
+          } />
+          <Property label="Warnings" value={
+            warnings > 0
+              ? <span className="text-amber-500 dark:text-amber-400 font-medium">{warnings}</span>
+              : '0'
+          } />
         </PropertyList>
       </Section>
 

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

@@ -1,6 +1,6 @@
 import { Shield } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, AlertBanner, LabelSelectorDisplay } from '../../ui/drawer-components'
 
 interface WebhookConfigRendererProps {
   data: any
@@ -65,8 +65,8 @@ export function WebhookConfigRenderer({ data, isMutating }: WebhookConfigRendere
                 ? `URL: ${url}`
                 : 'No target'
 
-            const nsLabels = wh.namespaceSelector?.matchLabels
-            const objLabels = wh.objectSelector?.matchLabels
+            const nsSelector = wh.namespaceSelector
+            const objSelector = wh.objectSelector
 
             return (
               <div key={i} className="card-inner-lg">
@@ -119,26 +119,18 @@ export function WebhookConfigRenderer({ data, isMutating }: WebhookConfigRendere
                 )}
 
                 {/* Selectors */}
-                {(nsLabels || objLabels) && (
+                {(nsSelector || objSelector) && (
                   <div className="mt-2 space-y-1">
-                    {nsLabels && Object.keys(nsLabels).length > 0 && (
+                    {nsSelector && (
                       <div>
                         <div className="text-xs text-theme-text-tertiary mb-1">Namespace Selector</div>
-                        <div className="flex flex-wrap gap-1">
-                          {Object.entries(nsLabels).map(([k, v]) => (
-                            <span key={k} className="badge-sm bg-theme-elevated text-theme-text-secondary">{k}={String(v)}</span>
-                          ))}
-                        </div>
+                        <LabelSelectorDisplay selector={nsSelector} />
                       </div>
                     )}
-                    {objLabels && Object.keys(objLabels).length > 0 && (
+                    {objSelector && (
                       <div>
                         <div className="text-xs text-theme-text-tertiary mb-1">Object Selector</div>
-                        <div className="flex flex-wrap gap-1">
-                          {Object.entries(objLabels).map(([k, v]) => (
-                            <span key={k} className="badge-sm bg-theme-elevated text-theme-text-secondary">{k}={String(v)}</span>
-                          ))}
-                        </div>
+                        <LabelSelectorDisplay selector={objSelector} />
                       </div>
                     )}
                   </div>

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

@@ -1,4 +1,4 @@
-import { Play, Clock, CheckCircle, XCircle, Loader2 } from 'lucide-react'
+import { Play, Clock, CheckCircle, XCircle, Loader2, SkipForward, PauseCircle } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
 import { formatAge, formatDuration } from '../resource-utils'
@@ -13,6 +13,8 @@ interface WorkflowStep {
   phase: string
   startedAt: string | null
   finishedAt: string | null
+  message: string | null
+  nodeType: string
 }
 
 function getStepDuration(step: WorkflowStep): string | null {
@@ -22,7 +24,13 @@ function getStepDuration(step: WorkflowStep): string | null {
   return formatDuration(end.getTime() - start.getTime(), true)
 }
 
-function StepStatusIcon({ phase }: { phase: string }) {
+function StepStatusIcon({ phase, nodeType }: { phase: string; nodeType?: string }) {
+  if (nodeType === 'Skipped' || phase === 'Skipped') {
+    return <SkipForward className="w-4 h-4 text-theme-text-tertiary shrink-0" />
+  }
+  if (nodeType === 'Suspend' && phase !== 'Succeeded') {
+    return <PauseCircle className="w-4 h-4 text-yellow-400 shrink-0" />
+  }
   switch (phase) {
     case 'Succeeded':
       return <CheckCircle className="w-4 h-4 text-green-400 shrink-0" />
@@ -46,6 +54,9 @@ function getPhaseBadgeClass(phase: string): string {
       return 'status-unhealthy'
     case 'Pending':
       return 'status-degraded'
+    case 'Skipped':
+    case 'Omitted':
+      return 'status-unknown'
     default:
       return 'status-unknown'
   }
@@ -74,29 +85,39 @@ function getWorkflowProblems(data: any): string[] {
     problems.push(status.message || 'Workflow error')
   }
 
-  // Check for failed nodes
+  // Check for failed nodes — include error messages when available
   const nodes = status.nodes || {}
-  const failedSteps = Object.values(nodes)
-    .filter((node: any) => node.type === 'Pod' && node.phase === 'Failed')
-    .map((node: any) => node.displayName)
+  const failedNodes = Object.values(nodes)
+    .filter((node: any) => (node.type === 'Pod' || node.type === 'Suspend' || node.type === 'Skipped') && (node.phase === 'Failed' || node.phase === 'Error'))
 
-  if (failedSteps.length > 0) {
-    problems.push(`Failed steps: ${failedSteps.join(', ')}`)
+  if (failedNodes.length > 0) {
+    const withMessages = failedNodes.filter((node: any) => node.message)
+    if (withMessages.length > 0) {
+      for (const n of withMessages as any[]) {
+        problems.push(`${n.displayName}: ${n.message}`)
+      }
+    } else {
+      problems.push(`Failed steps: ${failedNodes.map((n: any) => n.displayName).join(', ')}`)
+    }
   }
 
   return problems
 }
 
+const VISIBLE_NODE_TYPES = new Set(['Pod', 'Skipped', 'Suspend'])
+
 function extractSteps(data: any): WorkflowStep[] {
   const nodes = data.status?.nodes || {}
   const steps: WorkflowStep[] = Object.entries(nodes)
-    .filter(([, node]: [string, any]) => node.type === 'Pod')
+    .filter(([, node]: [string, any]) => VISIBLE_NODE_TYPES.has(node.type))
     .map(([id, node]: [string, any]) => ({
       id,
       displayName: node.displayName || id,
-      phase: node.phase || 'Pending',
+      phase: node.phase || (node.type === 'Skipped' ? 'Skipped' : 'Pending'),
       startedAt: node.startedAt || null,
       finishedAt: node.finishedAt || null,
+      message: node.message || null,
+      nodeType: node.type,
     }))
 
   steps.sort((a, b) => {
@@ -163,9 +184,22 @@ export function WorkflowRenderer({ data }: WorkflowRendererProps) {
           {status.startedAt && <Property label="Started" value={formatAge(status.startedAt)} />}
           <Property label="Finished" value={status.finishedAt ? formatAge(status.finishedAt) : 'Running...'} />
           {templateName && <Property label="Template" value={templateName} />}
+          {status.progress && (
+            <Property label="Progress" value={status.progress} />
+          )}
           {estimatedDuration != null && (
             <Property label="Estimated Duration" value={formatEstimatedDuration(estimatedDuration)} />
           )}
+          {status.resourcesDuration && (
+            <Property
+              label="Resource Usage"
+              value={
+                Object.entries(status.resourcesDuration as Record<string, number>)
+                  .map(([resource, seconds]) => `${resource}: ${seconds}s`)
+                  .join(', ')
+              }
+            />
+          )}
         </PropertyList>
       </Section>
 
@@ -173,13 +207,33 @@ export function WorkflowRenderer({ data }: WorkflowRendererProps) {
       {steps.length > 0 && (
         <Section title={`Steps (${steps.length})`} defaultExpanded>
           <div className="space-y-1.5">
-            {steps.map(step => (
-              <div key={step.id} className="flex items-center gap-2 text-sm card-inner px-3 py-2">
-                <StepStatusIcon phase={step.phase} />
-                <span className="flex-1 text-theme-text-primary">{step.displayName}</span>
-                <span className="text-xs text-theme-text-secondary">{getStepDuration(step) || '-'}</span>
-              </div>
-            ))}
+            {steps.map(step => {
+              const isFailed = step.phase === 'Failed' || step.phase === 'Error'
+              const isSkipped = step.nodeType === 'Skipped' || step.phase === 'Skipped'
+              const isSuspend = step.nodeType === 'Suspend'
+              return (
+                <div key={step.id} className={clsx(
+                  'text-sm card-inner px-3 py-2',
+                  isFailed && 'border-l-2 border-red-500'
+                )}>
+                  <div className="flex items-center gap-2">
+                    <StepStatusIcon phase={step.phase} nodeType={step.nodeType} />
+                    <span className={clsx(
+                      'flex-1',
+                      isSkipped ? 'text-theme-text-tertiary' : isSuspend ? 'text-yellow-400' : 'text-theme-text-primary'
+                    )}>
+                      {step.displayName}
+                      {isSkipped && <span className="ml-1 text-xs text-theme-text-tertiary">(skipped)</span>}
+                      {isSuspend && <span className="ml-1 text-xs text-yellow-400/70">(suspend)</span>}
+                    </span>
+                    <span className="text-xs text-theme-text-secondary">{getStepDuration(step) || '-'}</span>
+                  </div>
+                  {isFailed && step.message && (
+                    <div className="text-xs text-red-400 mt-1 ml-6 break-all">{step.message}</div>
+                  )}
+                </div>
+              )
+            })}
           </div>
         </Section>
       )}

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

@@ -1,4 +1,4 @@
-import { Play, FileText, Key, Lock } from 'lucide-react'
+import { Play, FileText, Key, Lock, File, ArrowDownToLine, ArrowUpFromLine } from 'lucide-react'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
 
 interface WorkflowTemplateRendererProps {
@@ -44,6 +44,11 @@ export function WorkflowTemplateRenderer({ data }: WorkflowTemplateRendererProps
             {templates.map((template: any) => {
               const type = getTemplateType(template)
               const image = getTemplateImage(template)
+              const inputParams: Array<{ name: string }> = template.inputs?.parameters || []
+              const outputParams: Array<{ name: string }> = template.outputs?.parameters || []
+              const outputArtifacts: Array<{ name: string }> = template.outputs?.artifacts || []
+              const inputArtifacts: Array<{ name: string }> = template.inputs?.artifacts || []
+              const hasIO = inputParams.length > 0 || outputParams.length > 0 || outputArtifacts.length > 0 || inputArtifacts.length > 0
               return (
                 <div key={template.name} className="card-inner px-3 py-2 text-sm">
                   <div className="font-medium text-theme-text-primary">{template.name}</div>
@@ -53,6 +58,46 @@ export function WorkflowTemplateRenderer({ data }: WorkflowTemplateRendererProps
                       {image}
                     </div>
                   )}
+                  {hasIO && (
+                    <div className="mt-2 space-y-1.5">
+                      {(inputParams.length > 0 || inputArtifacts.length > 0) && (
+                        <div className="flex items-start gap-1.5">
+                          <ArrowDownToLine className="w-3 h-3 text-theme-text-tertiary mt-0.5 shrink-0" />
+                          <div className="flex flex-wrap gap-1">
+                            {inputParams.map((p) => (
+                              <span key={p.name} className="badge-sm bg-theme-elevated text-theme-text-secondary">
+                                {p.name}
+                              </span>
+                            ))}
+                            {inputArtifacts.map((a) => (
+                              <span key={a.name} className="badge-sm bg-theme-elevated text-theme-text-secondary flex items-center gap-0.5">
+                                <File className="w-2.5 h-2.5" />
+                                {a.name}
+                              </span>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                      {(outputParams.length > 0 || outputArtifacts.length > 0) && (
+                        <div className="flex items-start gap-1.5">
+                          <ArrowUpFromLine className="w-3 h-3 text-theme-text-tertiary mt-0.5 shrink-0" />
+                          <div className="flex flex-wrap gap-1">
+                            {outputParams.map((p) => (
+                              <span key={p.name} className="badge-sm bg-theme-elevated text-theme-text-secondary">
+                                {p.name}
+                              </span>
+                            ))}
+                            {outputArtifacts.map((a) => (
+                              <span key={a.name} className="badge-sm bg-theme-elevated text-theme-text-secondary flex items-center gap-0.5">
+                                <File className="w-2.5 h-2.5" />
+                                {a.name}
+                              </span>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  )}
                 </div>
               )
             })}

package/src/components/resources/renderers/index.ts

@@ -62,6 +62,9 @@ export * from './kyverno-cells'
 export * from './KyvernoPolicyReportRenderer'
 export * from './LeaseRenderer'
 export * from './NetworkPolicyRenderer'
+export * from './NetworkPolicyDiagram'
+export * from './CiliumNetworkPolicyRenderer'
+export * from './ClusterNetworkPolicyRenderer'
 export * from './NodeRenderer'
 export * from './OCIRepositoryRenderer'
 export * from './OrderRenderer'

package/src/components/resources/renderers/karpenter-cells.tsx

@@ -3,6 +3,7 @@
 import { clsx } from 'clsx'
 import { Tooltip } from '../../ui/Tooltip'
 import {
+  CAPACITY_TYPE_BADGE,
   getNodePoolStatus,
   getNodePoolNodeClassRef,
   getNodePoolLimits,
@@ -22,9 +23,11 @@ export function NodePoolCell({ resource, column }: { resource: any; column: stri
     case 'status': {
       const status = getNodePoolStatus(resource)
       return (
-        <span className={clsx('badge', status.color)}>
-          {status.text}
-        </span>
+        <Tooltip content={status.text}>
+          <span className={clsx('badge truncate max-w-[140px]', status.color)}>
+            {status.text}
+          </span>
+        </Tooltip>
       )
     }
     case 'nodeClass': {
@@ -70,6 +73,18 @@ export function NodeClaimCell({ resource, column }: { resource: any; column: str
       const pool = getNodeClaimNodePoolRef(resource)
       return <span className="text-sm text-theme-text-secondary">{pool}</span>
     }
+    case 'capacityType': {
+      const ct = resource.metadata?.labels?.['karpenter.sh/capacity-type'] || '-'
+      return (
+        <span className={clsx('badge-sm', CAPACITY_TYPE_BADGE[ct] || '')}>
+          {ct}
+        </span>
+      )
+    }
+    case 'zone': {
+      const zone = resource.metadata?.labels?.['topology.kubernetes.io/zone'] || '-'
+      return <span className="text-sm text-theme-text-secondary">{zone}</span>
+    }
     default:
       return <span className="text-sm text-theme-text-tertiary">-</span>
   }