@skyhook-io/k8s-ui 1.3.2 → 1.4.1

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -97,6 +97,8 @@ import {
   SealedSecretRenderer,
   WorkflowTemplateRenderer,
   NetworkPolicyRenderer,
+  CiliumNetworkPolicyRenderer,
+  ClusterNetworkPolicyRenderer,
   PodDisruptionBudgetRenderer,
   ServiceAccountRenderer,
   RoleRenderer,
@@ -212,7 +214,10 @@ const KNOWN_KINDS = new Set([
   'storageclasses', 'certificaterequests', 'clusterissuers', 'issuers',
   'orders', 'challenges',
   'gateways', 'gatewayclasses', 'httproutes', 'grpcroutes', 'tcproutes', 'tlsroutes', 'sealedsecrets', 'workflowtemplates',
-  'networkpolicies', 'poddisruptionbudgets', 'serviceaccounts',
+  'networkpolicies', 'networkpolicy',
+  'ciliumnetworkpolicies', 'ciliumnetworkpolicy', 'ciliumclusterwidenetworkpolicies', 'ciliumclusterwidenetworkpolicy',
+  'clusternetworkpolicies', 'clusternetworkpolicy',
+  'poddisruptionbudgets', 'serviceaccounts',
   'roles', 'clusterroles', 'rolebindings', 'clusterrolebindings',
   'events', 'gitrepositories', 'ocirepositories', 'helmrepositories',
   'kustomizations', 'helmreleases', 'alerts', 'applications',
@@ -348,9 +353,11 @@ export function ResourceRendererDispatch({
         {kind === 'grpcroutes' && <GRPCRouteRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'tcproutes' && <SimpleRouteRenderer data={data} kind="TCPRoute" onNavigate={onNavigate} />}
         {kind === 'tlsroutes' && <SimpleRouteRenderer data={data} kind="TLSRoute" onNavigate={onNavigate} />}
-        {kind === 'sealedsecrets' && <SealedSecretRenderer data={data} />}
+        {kind === 'sealedsecrets' && <SealedSecretRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'workflowtemplates' && <WorkflowTemplateRenderer data={data} />}
-        {kind === 'networkpolicies' && <NetworkPolicyRenderer data={data} />}
+        {(kind === 'networkpolicies' || kind === 'networkpolicy') && <NetworkPolicyRenderer data={data} />}
+        {(kind === 'ciliumnetworkpolicies' || kind === 'ciliumnetworkpolicy' || kind === 'ciliumclusterwidenetworkpolicies' || kind === 'ciliumclusterwidenetworkpolicy') && <CiliumNetworkPolicyRenderer data={data} />}
+        {(kind === 'clusternetworkpolicies' || kind === 'clusternetworkpolicy') && <ClusterNetworkPolicyRenderer data={data} />}
         {kind === 'poddisruptionbudgets' && <PodDisruptionBudgetRenderer data={data} />}
         {kind === 'serviceaccounts' && <ServiceAccountRenderer data={data} />}
         {(kind === 'roles' || kind === 'clusterroles') && <RoleRenderer data={data} />}
@@ -359,8 +366,8 @@ export function ResourceRendererDispatch({
         {kind === 'gitrepositories' && <GitRepositoryRenderer data={data} />}
         {kind === 'ocirepositories' && <OCIRepositoryRenderer data={data} />}
         {kind === 'helmrepositories' && <HelmRepositoryRenderer data={data} />}
-        {kind === 'kustomizations' && <KustomizationRenderer data={data} />}
-        {kind === 'helmreleases' && <FluxHelmReleaseRenderer data={data} />}
+        {kind === 'kustomizations' && <KustomizationRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'helmreleases' && <FluxHelmReleaseRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'alerts' && <AlertRenderer data={data} />}
         {kind === 'applications' && <ArgoApplicationRenderer data={data} />}
         {kind === 'nodepools' && <KarpenterNodePoolRenderer data={data} onNavigate={onNavigate} />}
@@ -388,7 +395,7 @@ export function ResourceRendererDispatch({
         {kind === 'backupstoragelocations' && <VeleroBSLRenderer data={data} />}
         {kind === 'volumesnapshotlocations' && <VeleroVSLRenderer data={data} />}
         {kind === 'externalsecrets' && <ExternalSecretRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'clusterexternalsecrets' && <ClusterExternalSecretRenderer data={data} />}
+        {kind === 'clusterexternalsecrets' && <ClusterExternalSecretRenderer data={data} onNavigate={onNavigate} />}
         {(kind === 'secretstores' || kind === 'clustersecretstores') && <SecretStoreRenderer data={data} />}
         {kind === 'clusters' && <CNPGClusterRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'scheduledbackups' && <CNPGScheduledBackupRenderer data={data} onNavigate={onNavigate} />}

package/src/components/shared/index.ts

@@ -1,3 +1,4 @@
 export { ResourceRendererDispatch, getResourceStatus, type RendererOverrides } from './ResourceRendererDispatch'
 export { EditableYamlView, SaveSuccessAnimation } from './EditableYamlView'
 export { ResourceActionsBar, RevisionHistoryDialog } from './ResourceActionsBar'
+export { CreateResourceDialog, type CreateResourceDialogProps, type ApplyResult } from './CreateResourceDialog'

package/src/components/timeline/TimelineList.tsx

@@ -603,10 +603,17 @@ function ActivityCard({ item, expanded, onToggle, onResourceClick }: ActivityCar
               {item.owner && (
                 <span className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
                   <span className="text-xs text-theme-text-quaternary">←</span>
-                  <ResourceRefBadge
-                    resourceRef={{ kind: item.owner.kind, namespace: item.namespace, name: item.owner.name }}
-                    onClick={(ref) => onResourceClick?.(refToSelectedResource(ref))}
-                  />
+                  {item.owner.kind === 'ReplicaSet' ? (
+                    <ResourceRefBadge
+                      resourceRef={{ kind: 'Deployment', namespace: item.namespace, name: item.owner.name.replace(/-[a-z0-9]+$/, '') }}
+                      onClick={(ref) => onResourceClick?.(refToSelectedResource(ref))}
+                    />
+                  ) : (
+                    <ResourceRefBadge
+                      resourceRef={{ kind: item.owner.kind, namespace: item.namespace, name: item.owner.name }}
+                      onClick={(ref) => onResourceClick?.(refToSelectedResource(ref))}
+                    />
+                  )}
                 </span>
               )}
               {item.createdAt && (

package/src/components/topology/K8sResourceNode.tsx

@@ -302,6 +302,7 @@ export const K8sResourceNode = memo(function K8sResourceNode({
   const canCollapse = isPodGroup && onCollapse && isExpanded
   const statusIssue = nodeData.statusIssue as string | undefined
   const issueTooltip = getIssueTooltip(statusIssue)
+  const policyStatus = nodeData.policyStatus as string | undefined
 
   // CSS class for icon (replaces Lucide SVG - saves ~5 DOM elements per node)
   const iconClass = `topology-icon topology-icon-${kind.toLowerCase()}`
@@ -417,6 +418,20 @@ export const K8sResourceNode = memo(function K8sResourceNode({
             )}
           </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/TopologyControls.tsx

@@ -1,4 +1,4 @@
-import { FolderTree } from 'lucide-react'
+import { FolderTree, ShieldCheck } from 'lucide-react'
 import type { TopologyMode, GroupingMode } from '../../types/core'
 
 interface TopologyControlsProps {
@@ -7,6 +7,8 @@ interface TopologyControlsProps {
   groupingMode: GroupingMode
   onGroupingModeChange: (mode: GroupingMode) => void
   showNoGrouping?: boolean
+  showPolicyEffect?: boolean
+  onShowPolicyEffectChange?: (show: boolean) => void
 }
 
 export function TopologyControls({
@@ -15,9 +17,27 @@ export function TopologyControls({
   groupingMode,
   onGroupingModeChange,
   showNoGrouping = true,
+  showPolicyEffect = false,
+  onShowPolicyEffectChange,
 }: TopologyControlsProps) {
   return (
     <div className="absolute top-4 right-4 z-10 flex items-center gap-2">
+      {/* Policy effect toggle */}
+      {onShowPolicyEffectChange && (
+        <button
+          onClick={() => onShowPolicyEffectChange(!showPolicyEffect)}
+          className={`flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded-lg border transition-colors ${
+            showPolicyEffect
+              ? 'bg-indigo-600 text-white border-indigo-600'
+              : 'bg-theme-surface/90 backdrop-blur text-theme-text-secondary border-theme-border hover:text-theme-text-primary'
+          }`}
+          title="Show NetworkPolicy effects on edges"
+        >
+          <ShieldCheck className="w-3.5 h-3.5" />
+          Policies
+        </button>
+      )}
+
       {/* Grouping selector */}
       <div className="flex items-center gap-1.5 px-2 py-1.5 bg-theme-surface/90 backdrop-blur border border-theme-border rounded-lg">
         <FolderTree className="w-3.5 h-3.5 text-theme-text-secondary" />

package/src/components/topology/TopologyGraph.tsx

@@ -73,7 +73,7 @@ const LARGE_CLUSTER_NS_THRESHOLD = 5
 
 // Build edges, handling collapsed groups
 function buildEdges(
-  topologyEdges: { id: string; source: string; target: string; type: string }[],
+  topologyEdges: TopologyEdge[],
   collapsedGroups: Set<string>,
   groupMap: Map<string, string[]>,
   groupingMode: GroupingMode,

package/src/components/ui/Badge.tsx

@@ -73,6 +73,10 @@ const KIND: Record<string, string> = {
   HorizontalPodAutoscaler: 'bg-pink-100 text-pink-800 border-pink-300 dark:bg-pink-950/50 dark:text-pink-300 dark:border-pink-700/40',
   PersistentVolumeClaim:   'bg-cyan-100 text-cyan-800 border-cyan-300 dark:bg-cyan-950/50 dark:text-cyan-400 dark:border-cyan-700/40',
   PodDisruptionBudget:     'bg-orange-100 text-orange-800 border-orange-300 dark:bg-orange-950/50 dark:text-orange-300 dark:border-orange-700/40',
+  NetworkPolicy:                      'bg-indigo-100 text-indigo-800 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-300 dark:border-indigo-700/40',
+  CiliumNetworkPolicy:                'bg-indigo-100 text-indigo-800 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-300 dark:border-indigo-700/40',
+  CiliumClusterwideNetworkPolicy:     'bg-indigo-100 text-indigo-800 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-300 dark:border-indigo-700/40',
+  ClusterNetworkPolicy:               'bg-violet-100 text-violet-800 border-violet-300 dark:bg-violet-950/50 dark:text-violet-300 dark:border-violet-700/40',
 
   // Cluster-scoped
   Node:          'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
@@ -147,6 +151,10 @@ export function getKindColorClass(kind: string): string {
     horizontalpodautoscalers: 'HorizontalPodAutoscaler',
     persistentvolumeclaims: 'PersistentVolumeClaim',
     poddisruptionbudgets: 'PodDisruptionBudget',
+    networkpolicies: 'NetworkPolicy',
+    ciliumnetworkpolicies: 'CiliumNetworkPolicy',
+    ciliumclusterwidenetworkpolicies: 'CiliumClusterwideNetworkPolicy',
+    clusternetworkpolicies: 'ClusterNetworkPolicy',
     rollouts: 'Rollout', httproutes: 'HTTPRoute', grpcroutes: 'GRPCRoute',
     events: 'Event', helmreleases: 'HelmRelease',
   }

package/src/components/ui/drawer-components.tsx

@@ -28,6 +28,53 @@ export function KeyValueBadgeList({ items }: { items: Record<string, unknown> |
   )
 }
 
+/**
+ * Renders a Kubernetes label selector (matchLabels + matchExpressions).
+ * Accepts either a full selector object `{ matchLabels?, matchExpressions? }`
+ * or a flat `Record<string, string>` (e.g. Service.spec.selector).
+ * Pass `inline` for flow-inline rendering (e.g. within a sentence).
+ */
+export function LabelSelectorDisplay({
+  selector,
+  emptyText = 'All',
+  inline = false,
+}: {
+  selector: any
+  emptyText?: string
+  inline?: boolean
+}) {
+  if (!selector) {
+    return <span className="text-xs text-theme-text-tertiary">{emptyText}</span>
+  }
+
+  // Detect flat selector (e.g. Service.spec.selector has no matchLabels wrapper)
+  const isFlat = typeof selector === 'object' && !Array.isArray(selector) && !selector.matchLabels && !selector.matchExpressions
+  const matchLabels: Record<string, unknown> = isFlat ? selector : (selector.matchLabels || {})
+  const matchExpressions: Array<{ key: string; operator: string; values?: string[] }> = selector.matchExpressions || []
+
+  const hasLabels = Object.keys(matchLabels).length > 0
+  const hasExpressions = matchExpressions.length > 0
+
+  if (!hasLabels && !hasExpressions) {
+    return <span className="text-xs text-theme-text-tertiary">{emptyText}</span>
+  }
+
+  const Wrapper = inline ? 'span' : 'div'
+
+  return (
+    <Wrapper className={inline ? 'inline-flex flex-wrap gap-1 align-middle' : 'flex flex-wrap gap-1'}>
+      {Object.entries(matchLabels).map(([k, v]) => (
+        <KeyValueBadge key={`l-${k}`} k={k} v={String(v)} />
+      ))}
+      {matchExpressions.map((expr, i) => (
+        <span key={`e-${i}`} className="badge bg-theme-elevated text-theme-text-secondary">
+          {expr.key} {expr.operator}{expr.values && expr.values.length > 0 ? ` ${expr.values.join(', ')}` : ''}
+        </span>
+      ))}
+    </Wrapper>
+  )
+}
+
 interface SectionProps {
   title: string
   icon?: React.ComponentType<{ className?: string }>
@@ -117,7 +164,7 @@ export function Property({ label, value, copyable, onCopy, copied }: PropertyPro
 
   return (
     <div className="flex items-start gap-2 text-sm">
-      <span className="text-theme-text-tertiary w-28 shrink-0">{label}</span>
+      <span className="text-theme-text-tertiary w-40 shrink-0">{label}</span>
       <span className="text-theme-text-primary break-all flex-1">{displayValue}</span>
       {copyable && onCopy && !isReactElement(value) && (
         <button
@@ -234,7 +281,7 @@ export interface Problem {
   message: string
 }
 
-/** Displays a list of problem alerts (warnings and errors) for GitOps resources */
+/** Displays a list of problem alerts (warnings and errors) */
 export function ProblemAlerts({ problems }: { problems: Problem[] }) {
   if (problems.length === 0) return null
 
@@ -568,9 +615,25 @@ export function RelatedResourcesSection({ relationships, onNavigate }: RelatedRe
         {relationships.scalers && relationships.scalers.length > 0 && (
           <RelationshipGroup label="Autoscaler" refs={dedupeRefs(relationships.scalers)} onNavigate={onNavigate} />
         )}
-        {relationships.policies && relationships.policies.length > 0 && (
-          <RelationshipGroup label="Disruption Budget" refs={dedupeRefs(relationships.policies)} onNavigate={onNavigate} />
-        )}
+        {relationships.policies && relationships.policies.length > 0 && (() => {
+          const policyKinds = new Set(['NetworkPolicy', 'CiliumNetworkPolicy', 'CiliumClusterwideNetworkPolicy', 'ClusterNetworkPolicy'])
+          const pdbs = relationships.policies.filter(r => r.kind === 'PodDisruptionBudget')
+          const netpols = relationships.policies.filter(r => policyKinds.has(r.kind))
+          const other = relationships.policies.filter(r => r.kind !== 'PodDisruptionBudget' && !policyKinds.has(r.kind))
+          return (
+            <>
+              {pdbs.length > 0 && (
+                <RelationshipGroup label="Disruption Budget" refs={dedupeRefs(pdbs)} onNavigate={onNavigate} />
+              )}
+              {netpols.length > 0 && (
+                <RelationshipGroup label="Network Policies" refs={dedupeRefs(netpols)} onNavigate={onNavigate} />
+              )}
+              {other.length > 0 && (
+                <RelationshipGroup label="Policies" refs={dedupeRefs(other)} onNavigate={onNavigate} />
+              )}
+            </>
+          )
+        })()}
         {relationships.scaleTarget && (
           <RelationshipGroup label="Scale Target" refs={[relationships.scaleTarget]} onNavigate={onNavigate} />
         )}

package/src/components/workload/WorkloadView.tsx

@@ -121,6 +121,12 @@ interface WorkloadViewProps {
   renderMetricsTab?: (props: { kind: string; namespace: string; name: string }) => ReactNode
   /** Whether metrics are available for this resource kind */
   isMetricsAvailable?: (kind: string, resource: any) => boolean
+  /** Render extra content at the bottom of the overview tab (e.g. audit findings) */
+  renderOverviewExtra?: (props: { kind: string; namespace: string; name: string }) => ReactNode
+
+  // ── Duplicate ────────────────────────────────────────────────────────────
+  /** Duplicate handler — opens create dialog with this resource's YAML */
+  onDuplicate?: (params: { kind: string; namespace: string; name: string; yaml: string }) => void
 
   // ── ResourceActionsBar props (passed through) ────────────────────────────
   /** All props for the actions bar (forwarded as-is) */
@@ -166,6 +172,9 @@ export function WorkloadView({
   renderLogsTab,
   renderMetricsTab,
   isMetricsAvailable,
+  // Duplicate
+  onDuplicate,
+  renderOverviewExtra,
   // Actions bar
   actionsBarProps,
   // Renderer overrides
@@ -430,22 +439,30 @@ export function WorkloadView({
               onSave={onUpdateResource}
               isSaving={isUpdatingResource}
               saveError={updateResourceError}
+              onDuplicate={onDuplicate}
             />
           ) : (
-            <ResourceRendererDispatch
-              resource={selectedResource}
-              data={resource}
-              relationships={relationships}
-              certificateInfo={certificateInfo}
-              onCopy={copyToClipboard}
-              copied={copied}
-              onNavigate={onNavigateToResource ? (ref) => onNavigateToResource(refToSelectedResource(ref)) : undefined}
-              onSaveSecretValue={canUpdateSecrets ? handleSaveSecretValue : undefined}
-              isSavingSecret={isUpdatingResource}
-              rendererOverrides={rendererOverrides}
-              resolvedEnvFrom={resolvedEnvFrom}
-              renderMetrics={renderMetricsTab}
-            />
+            <>
+              <ResourceRendererDispatch
+                resource={selectedResource}
+                data={resource}
+                relationships={relationships}
+                certificateInfo={certificateInfo}
+                onCopy={copyToClipboard}
+                copied={copied}
+                onNavigate={onNavigateToResource ? (ref) => onNavigateToResource(refToSelectedResource(ref)) : undefined}
+                onSaveSecretValue={canUpdateSecrets ? handleSaveSecretValue : undefined}
+                isSavingSecret={isUpdatingResource}
+                rendererOverrides={rendererOverrides}
+                resolvedEnvFrom={resolvedEnvFrom}
+                renderMetrics={renderMetricsTab}
+              />
+              {renderOverviewExtra && (
+                <div className="px-4 pb-4">
+                  {renderOverviewExtra({ kind, namespace, name })}
+                </div>
+              )}
+            </>
           )}
         </div>
       </div>
@@ -571,21 +588,22 @@ export function WorkloadView({
       {/* Tab Content */}
       <div className="flex-1 overflow-hidden relative">
         {activeTab === 'overview' && (
-          <InfoTab
-            resource={resource}
-            selectedResource={selectedResource}
-            relationships={relationships}
-            isLoading={resourceLoading}
-            onNavigate={onNavigateToResource}
-            onCopy={copyToClipboard}
-            copied={copied}
-            onSaveSecretValue={canUpdateSecrets ? handleSaveSecretValue : undefined}
-            isSavingSecret={isUpdatingResource}
-            onOpenLogs={handleOpenLogs}
-            onSwitchToTimeline={() => handleSetTab('timeline')}
-            rendererOverrides={rendererOverrides}
-            resolvedEnvFrom={resolvedEnvFrom}
-          />
+            <InfoTab
+              resource={resource}
+              selectedResource={selectedResource}
+              relationships={relationships}
+              isLoading={resourceLoading}
+              onNavigate={onNavigateToResource}
+              onCopy={copyToClipboard}
+              copied={copied}
+              onSaveSecretValue={canUpdateSecrets ? handleSaveSecretValue : undefined}
+              isSavingSecret={isUpdatingResource}
+              onOpenLogs={handleOpenLogs}
+              onSwitchToTimeline={() => handleSetTab('timeline')}
+              rendererOverrides={rendererOverrides}
+              resolvedEnvFrom={resolvedEnvFrom}
+              extraContent={renderOverviewExtra && renderOverviewExtra({ kind, namespace, name })}
+            />
         )}
         {activeTab === 'timeline' && (
           <EventsTab
@@ -635,6 +653,7 @@ export function WorkloadView({
                 onSave={onUpdateResource}
                 isSaving={isUpdatingResource}
                 saveError={updateResourceError}
+                onDuplicate={onDuplicate}
               />
             )}
           </div>
@@ -1068,6 +1087,7 @@ function InfoTab({
   onSwitchToTimeline,
   rendererOverrides,
   resolvedEnvFrom,
+  extraContent,
 }: {
   resource: any
   selectedResource: SelectedResource
@@ -1082,6 +1102,7 @@ function InfoTab({
   onSwitchToTimeline?: () => void
   rendererOverrides?: RendererOverrides
   resolvedEnvFrom?: ResolvedEnvFrom
+  extraContent?: ReactNode
 }) {
   if (isLoading) {
     return (
@@ -1132,6 +1153,11 @@ function InfoTab({
           </div>
         )}
       />
+      {extraContent && (
+        <div className="px-4 pb-4">
+          {extraContent}
+        </div>
+      )}
     </div>
   )
 }

package/src/index.ts

@@ -33,3 +33,6 @@ export * from './components/dock'
 
 // Topology (TopologyGraph, TopologySearch, TopologyFilterSidebar, layout utilities)
 export * from './components/topology'
+
+// Cluster audit (AuditCard, AuditAlerts, AuditFindingsTable)
+export * from './components/audit'

package/src/theme/variables.css

@@ -43,7 +43,7 @@
   /* ── Text (cool neutral) ── */
   --text-primary: light-dark(#1A1C20, #F5F6F8);
   --text-secondary: light-dark(#555860, #D8DAE0);
-  --text-tertiary: light-dark(#7E828A, #B0B5C0);
+  --text-tertiary: light-dark(#6B7080, #B0B5C0);
   --text-disabled: light-dark(#A0A4AC, #6A7080);
 
   /* ── Borders (lightly blue-tinted in light mode) ── */

package/src/types/core.ts

@@ -145,6 +145,7 @@ export interface TopologyEdge {
   type: EdgeType
   label?: string
   skipIfKindVisible?: string // Hide this edge if this kind is visible (for shortcut edges)
+  policyEffect?: 'allowed' | 'blocked' | 'unprotected'
 }
 
 export interface Topology {
@@ -846,7 +847,7 @@ export interface TrafficFilters {
 }
 
 // Main view type now includes 'traffic' and 'cost'
-export type ExtendedMainView = MainView | 'traffic' | 'cost'
+export type ExtendedMainView = MainView | 'traffic' | 'cost' | 'audit'
 
 // ============================================================================
 // Image Filesystem Types

package/src/types/gitops.ts

@@ -230,7 +230,9 @@ export interface ArgoAppStatus {
   operationState?: {
     phase?: ArgoOperationPhase | string // Known types + allow unknown
     message?: string
+    startedAt?: string
     finishedAt?: string
+    retryCount?: number
     syncResult?: {
       revision?: string
       source?: ArgoSyncResultSource
@@ -238,6 +240,12 @@ export interface ArgoAppStatus {
     }
   }
   reconciledAt?: string
+  history?: Array<{
+    revision?: string
+    deployedAt?: string
+    id?: number
+    source?: { repoURL?: string; path?: string }
+  }>
 }
 
 /**

package/src/utils/badge-colors.ts

@@ -52,6 +52,13 @@ export const HELM_STATUS_COLORS: Record<string, string> = {
   uninstalled: BADGE_SEVERITY_COLORS.neutral,
 }
 
+// Best practices category colors
+export const BP_CATEGORY_BADGE: Record<string, string> = {
+  Security: 'bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-950/40 dark:text-purple-400 dark:border-purple-800/40',
+  Reliability: 'bg-sky-50 text-sky-700 border-sky-200 dark:bg-sky-950/40 dark:text-sky-400 dark:border-sky-800/40',
+  Efficiency: 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-950/40 dark:text-emerald-400 dark:border-emerald-800/40',
+}
+
 // Default fallback color
 export const DEFAULT_BADGE_COLOR = 'bg-theme-elevated text-theme-text-secondary'
 

package/src/utils/index.ts

@@ -8,3 +8,5 @@ export * from './resource-hierarchy'
 export * from './log-format'
 export * from './download'
 export * from './api-resources'
+export * from './skeleton-yaml'
+export * from './k8s-errors'

package/src/utils/k8s-errors.ts

@@ -0,0 +1,142 @@
+// Human-friendly summaries for common Kubernetes API error patterns.
+// Falls back to null when no known pattern matches — caller shows raw error.
+
+interface FriendlyError {
+  summary: string
+  suggestion: string
+}
+
+const patterns: Array<{ test: (msg: string) => boolean; friendly: (msg: string) => FriendlyError }> = [
+  // Admission webhook timeout
+  {
+    test: (msg) => /failed calling webhook.*context deadline exceeded/i.test(msg),
+    friendly: (msg) => {
+      const webhook = msg.match(/webhook "([^"]+)"/)?.[1] ?? 'unknown'
+      const service = webhook.split('.')[0] || webhook
+      return {
+        summary: `Admission webhook timed out (${service})`,
+        suggestion: 'A cluster validation webhook failed to respond. This is usually a temporary cluster issue, not a problem with your YAML. Try again or contact your cluster admin.',
+      }
+    },
+  },
+  // Admission webhook rejected
+  {
+    test: (msg) => /admission webhook.*denied the request/i.test(msg),
+    friendly: (msg) => {
+      const webhook = msg.match(/webhook "([^"]+)"/)?.[1] ?? 'unknown'
+      return {
+        summary: `Rejected by admission policy (${webhook.split('.')[0]})`,
+        suggestion: 'A cluster admission webhook rejected this resource. Check that your YAML meets the cluster\'s policies, or contact your cluster admin.',
+      }
+    },
+  },
+  // Validation error — invalid field value
+  {
+    test: (msg) => /is invalid:.*Invalid value/i.test(msg),
+    friendly: (msg) => {
+      const fields = [...msg.matchAll(/(\S+): Invalid value/g)].map(m => m[1])
+      const fieldList = fields.length > 0 ? fields.join(', ') : 'unknown field'
+      return {
+        summary: `Validation failed: invalid value for ${fieldList}`,
+        suggestion: 'One or more field values don\'t match what Kubernetes expects. Check the highlighted fields in the error details.',
+      }
+    },
+  },
+  // Validation error — selector doesn't match labels
+  {
+    test: (msg) => /`selector` does not match template `labels`/i.test(msg),
+    friendly: () => ({
+      summary: 'Selector doesn\'t match template labels',
+      suggestion: 'The spec.selector.matchLabels must match spec.template.metadata.labels exactly.',
+    }),
+  },
+  // Validation error — required field
+  {
+    test: (msg) => /Required value|is required/i.test(msg),
+    friendly: (msg) => {
+      const field = msg.match(/(\S+): Required value/)?.[1] ?? msg.match(/(\S+) is required/)?.[1] ?? ''
+      return {
+        summary: `Missing required field${field ? `: ${field}` : ''}`,
+        suggestion: 'Add the missing required field to your YAML.',
+      }
+    },
+  },
+  // RBAC forbidden — use "is forbidden:" to avoid matching "Forbidden: field is immutable" or "forbidden: exceeded quota"
+  {
+    test: (msg) => /is forbidden:|cannot .* in the namespace/i.test(msg),
+    friendly: (msg) => {
+      const verb = msg.match(/cannot (\w+)/)?.[1] ?? 'perform this action on'
+      return {
+        summary: `Permission denied`,
+        suggestion: `Your cluster role doesn't allow you to ${verb} this resource. Contact your cluster admin for access.`,
+      }
+    },
+  },
+  // Already exists (create mode)
+  {
+    test: (msg) => /already exists/i.test(msg),
+    friendly: () => ({
+      summary: 'Resource already exists',
+      suggestion: 'Switch to Apply mode to update the existing resource, or change the name to create a new one.',
+    }),
+  },
+  // Quota exceeded
+  {
+    test: (msg) => /exceeded quota|quota.*exceeded|forbidden.*quota/i.test(msg),
+    friendly: () => ({
+      summary: 'Resource quota exceeded',
+      suggestion: 'The namespace has reached its resource quota limit. Request a quota increase or reduce resource requests.',
+    }),
+  },
+  // Namespace not found
+  {
+    test: (msg) => /namespace.*not found|namespaces.*not found/i.test(msg),
+    friendly: (msg) => {
+      const ns = msg.match(/namespace[s]? "([^"]+)"/)?.[1] ?? ''
+      return {
+        summary: `Namespace "${ns}" not found`,
+        suggestion: 'Create the namespace first or change the namespace in your YAML.',
+      }
+    },
+  },
+  // Immutable field
+  {
+    test: (msg) => /field is immutable/i.test(msg),
+    friendly: () => ({
+      summary: 'Cannot change immutable field',
+      suggestion: 'Some fields can\'t be modified after creation. Delete and recreate the resource, or remove the immutable field change.',
+    }),
+  },
+  // Connection refused / cluster unreachable
+  {
+    test: (msg) => /connection refused|no such host|cluster.*unreachable/i.test(msg),
+    friendly: () => ({
+      summary: 'Cannot reach the cluster',
+      suggestion: 'The Kubernetes API server is unreachable. Check your cluster connection.',
+    }),
+  },
+]
+
+// Strip the "failed to apply resource: " / "failed to create resource: " prefix our backend adds
+function stripPrefix(msg: string): string {
+  return msg.replace(/^failed to (apply|create) resource:\s*/i, '')
+}
+
+export function getFriendlyError(rawError: string): { summary: string; suggestion: string; raw: string } | null {
+  const cleaned = stripPrefix(rawError)
+  for (const pattern of patterns) {
+    if (pattern.test(cleaned)) {
+      const { summary, suggestion } = pattern.friendly(cleaned)
+      return { summary, suggestion, raw: cleaned }
+    }
+  }
+  return null
+}
+
+// Always returns something displayable — friendly if matched, raw if not
+export function formatApplyError(rawError: string): { summary: string; suggestion?: string; raw: string } {
+  const friendly = getFriendlyError(rawError)
+  if (friendly) return friendly
+  const cleaned = stripPrefix(rawError)
+  return { summary: cleaned, raw: rawError }
+}