@skyhook-io/k8s-ui 1.3.2 → 1.4.1

package/src/components/resources/resource-utils-cnpg.ts

@@ -166,6 +166,43 @@ export function getCNPGClusterPostgresParams(resource: any): Record<string, stri
   return resource.spec?.postgresql?.parameters || {}
 }
 
+/** Per-instance replication state from status.instancesReportedState */
+export interface CNPGInstanceReportedState {
+  podName: string
+  isPrimary: boolean
+  timelineID?: number
+}
+
+export function getCNPGClusterInstancesReportedState(resource: any): CNPGInstanceReportedState[] {
+  const reported = resource.status?.instancesReportedState
+  if (!reported || typeof reported !== 'object') return []
+  return Object.entries(reported).map(([podName, state]: [string, any]) => ({
+    podName,
+    isPrimary: state?.isPrimary === true,
+    timelineID: state?.timelineID,
+  }))
+}
+
+/** Certificate expirations from status.certificates.expirations */
+export interface CNPGCertificateExpiry {
+  secretName: string
+  expiryDate: string
+  daysUntilExpiry: number
+}
+
+export function getCNPGClusterCertificateExpirations(resource: any): CNPGCertificateExpiry[] {
+  const expirations = resource.status?.certificates?.expirations
+  if (!expirations || typeof expirations !== 'object') return []
+  const now = new Date()
+  return Object.entries(expirations).map(([secretName, expiryDate]: [string, any]) => {
+    const expiry = new Date(expiryDate)
+    const daysUntilExpiry = isNaN(expiry.getTime())
+      ? -1  // treat unparseable dates as expired/critical
+      : Math.floor((expiry.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
+    return { secretName, expiryDate: String(expiryDate), daysUntilExpiry }
+  })
+}
+
 // ============================================================================
 // CNPG BACKUP UTILITIES
 // ============================================================================
@@ -342,3 +379,13 @@ export function getCNPGPoolerInstances(resource: any): string {
 export function getCNPGPoolerParameters(resource: any): Record<string, string> {
   return resource.spec?.pgbouncer?.parameters || {}
 }
+
+export function getCNPGPoolerAuthQuery(resource: any): string | undefined {
+  return resource.spec?.pgbouncer?.authQuery
+}
+
+export function getCNPGPoolerAuthQuerySecret(resource: any): { name: string } | undefined {
+  const secret = resource.spec?.pgbouncer?.authQuerySecret
+  if (!secret?.name) return undefined
+  return { name: secret.name }
+}

package/src/components/resources/resource-utils-karpenter.ts

@@ -3,6 +3,12 @@
 import type { StatusBadge } from './resource-utils'
 import { healthColors } from './resource-utils'
 
+// Shared capacity type badge colors for NodeClaim renderer and table cells
+export const CAPACITY_TYPE_BADGE: Record<string, string> = {
+  spot: 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-700/40',
+  'on-demand': 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
+}
+
 // ============================================================================
 // KARPENTER NODEPOOL UTILITIES
 // ============================================================================

package/src/components/resources/resource-utils-prometheus.ts

@@ -99,23 +99,67 @@ export function getPrometheusRuleTotalRules(resource: any): number {
   return groups.reduce((sum: number, g: any) => sum + (g.rules?.length || 0), 0)
 }
 
-export function getPrometheusRuleGroups(resource: any): Array<{
+export interface PrometheusAlertRule {
+  type: 'alert'
+  alert: string
+  expr: string
+  for?: string
+  severity?: string
+  summary?: string
+  description?: string
+  labels?: Record<string, string>
+}
+
+export interface PrometheusRecordingRule {
+  type: 'recording'
+  record: string
+  expr: string
+  labels?: Record<string, string>
+}
+
+export type PrometheusRule = PrometheusAlertRule | PrometheusRecordingRule
+
+export interface PrometheusRuleGroup {
   name: string
   interval?: string
   ruleCount: number
   alertCount: number
   recordCount: number
-}> {
+  rules: PrometheusRule[]
+}
+
+export function getPrometheusRuleGroups(resource: any): PrometheusRuleGroup[] {
   return (resource.spec?.groups || []).map((g: any) => {
-    const rules = g.rules || []
-    const alertCount = rules.filter((r: any) => r.alert).length
-    const recordCount = rules.filter((r: any) => r.record).length
+    const rawRules = g.rules || []
+    const alertCount = rawRules.filter((r: any) => r.alert).length
+    const recordCount = rawRules.filter((r: any) => r.record).length
+    const rules: PrometheusRule[] = rawRules.map((r: any) => {
+      if (r.alert) {
+        return {
+          type: 'alert' as const,
+          alert: r.alert,
+          expr: r.expr || '',
+          for: r.for,
+          severity: r.labels?.severity,
+          summary: r.annotations?.summary,
+          description: r.annotations?.description,
+          labels: r.labels,
+        }
+      }
+      return {
+        type: 'recording' as const,
+        record: r.record || '',
+        expr: r.expr || '',
+        labels: r.labels,
+      }
+    })
     return {
       name: g.name,
       interval: g.interval,
-      ruleCount: rules.length,
+      ruleCount: rawRules.length,
       alertCount,
       recordCount,
+      rules,
     }
   })
 }

package/src/components/resources/resource-utils.ts

@@ -42,6 +42,44 @@ export interface PodProblem {
   message: string
 }
 
+/** Tailwind classes for severity dot indicators (used in tooltips and alert banners) */
+export const SEVERITY_DOT_COLOR: Record<PodProblem['severity'], string> = {
+  critical: 'bg-red-400',
+  high: 'bg-orange-400',
+  medium: 'bg-yellow-400',
+}
+
+/** Check whether a pod's problems match a given problem category (filter chip label) */
+export function podMatchesProblemCategory(problems: PodProblem[], restarts: number, category: string): boolean {
+  const msgs = problems.map(p => p.message)
+  switch (category) {
+    case 'CrashLoopBackOff':
+      return msgs.includes('CrashLoopBackOff')
+    case 'ImagePullBackOff':
+      return msgs.some(m => m.includes('ImagePull') && !m.startsWith('Init:'))
+    case 'OOMKilled':
+      return msgs.includes('OOMKilled')
+    case 'Unschedulable':
+      return msgs.includes('Unschedulable')
+    case 'Not Ready':
+      return msgs.includes('Not Ready') || msgs.some(m => m.includes('Probe'))
+    case 'High Restarts':
+      return restarts > 5
+    case 'Init Failed':
+      return msgs.some(m => m.startsWith('Init:'))
+    case 'Exit Code Error':
+      return msgs.some(m => m.startsWith('Exit Code'))
+    case 'Failed':
+      return msgs.includes('Failed') || msgs.includes('Unknown')
+    case 'Other': {
+      const knownPatterns = ['CrashLoopBackOff', 'ImagePull', 'ErrImagePull', 'OOMKilled', 'Unschedulable', 'Not Ready', 'Probe', 'Init:', 'Exit Code', 'Failed', 'Unknown']
+      return problems.some(p => !knownPatterns.some(pat => p.message.includes(pat)) && p.message !== `${restarts} restarts`)
+    }
+    default:
+      return false
+  }
+}
+
 export function getPodStatus(pod: any): StatusBadge {
   const phase = pod.status?.phase || 'Unknown'
   const containerStatuses = pod.status?.containerStatuses || []
@@ -87,7 +125,31 @@ export function getPodStatus(pod: any): StatusBadge {
 export function getPodProblems(pod: any): PodProblem[] {
   const problems: PodProblem[] = []
   const containerStatuses = pod.status?.containerStatuses || []
+  const initContainerStatuses = pod.status?.initContainerStatuses || []
   const conditions = pod.status?.conditions || []
+  const phase = pod.status?.phase
+
+  // Failed or Unknown phase
+  if (phase === 'Failed' && pod.status?.reason !== 'Evicted') {
+    problems.push({ severity: 'critical', message: 'Failed' })
+  } else if (phase === 'Unknown') {
+    problems.push({ severity: 'high', message: 'Unknown' })
+  }
+
+  // Init container failures
+  for (const cs of initContainerStatuses) {
+    if (cs.state?.waiting?.reason && cs.state.waiting.reason !== 'PodInitializing') {
+      const reason = cs.state.waiting.reason
+      if (['CrashLoopBackOff', 'ImagePullBackOff', 'ErrImagePull'].includes(reason)) {
+        problems.push({ severity: 'critical', message: `Init: ${reason}` })
+      } else {
+        problems.push({ severity: 'high', message: `Init: ${reason}` })
+      }
+    }
+    if (cs.state?.terminated?.exitCode && cs.state.terminated.exitCode !== 0) {
+      problems.push({ severity: 'high', message: `Init: Exit Code ${cs.state.terminated.exitCode}` })
+    }
+  }
 
   for (const cs of containerStatuses) {
     // Check waiting state
@@ -99,11 +161,15 @@ export function getPodProblems(pod: any): PodProblem[] {
         problems.push({ severity: 'critical', message: 'Config Error' })
       } else if (reason === 'ContainerCannotRun') {
         problems.push({ severity: 'critical', message: 'Cannot Run' })
+      } else if (reason !== 'ContainerCreating' && reason !== 'PodInitializing') {
+        problems.push({ severity: 'high', message: reason })
       }
     }
     // Check terminated state
     if (cs.state?.terminated?.reason === 'OOMKilled') {
       problems.push({ severity: 'critical', message: 'OOMKilled' })
+    } else if (cs.state?.terminated?.exitCode && cs.state.terminated.exitCode !== 0) {
+      problems.push({ severity: 'high', message: `Exit Code ${cs.state.terminated.exitCode}` })
     }
     // High restart count
     if (cs.restartCount > 5) {
@@ -142,7 +208,7 @@ export function getPodProblems(pod: any): PodProblem[] {
   }
 
   // Evicted pods
-  if (pod.status?.phase === 'Failed' && pod.status?.reason === 'Evicted') {
+  if (phase === 'Failed' && pod.status?.reason === 'Evicted') {
     problems.push({ severity: 'high', message: 'Evicted' })
   }
 
@@ -156,7 +222,6 @@ export function getPodProblems(pod: any): PodProblem[] {
   }
 
   // Not ready (Running but containers not ready)
-  const phase = pod.status?.phase
   if (phase === 'Running') {
     const readyContainers = containerStatuses.filter((c: any) => c.ready).length
     const totalContainers = containerStatuses.length
@@ -335,6 +400,70 @@ export function getWorkloadStatus(resource: any, kind: string): StatusBadge {
   return { text: `${ready}/${desired}`, color: healthColors.unhealthy, level: 'unhealthy' }
 }
 
+/** Detect problems for Deployments, StatefulSets, DaemonSets. Parallel to getPodProblems. */
+export function getWorkloadProblems(resource: any, kind: string): PodProblem[] {
+  const problems: PodProblem[] = []
+  const status = resource.status || {}
+  const spec = resource.spec || {}
+  const k = kind.toLowerCase()
+
+  if (k === 'daemonsets') {
+    const desired = status.desiredNumberScheduled || 0
+    const ready = status.numberReady || 0
+    if (desired > 0 && ready === 0) {
+      problems.push({ severity: 'critical', message: 'No pods ready' })
+    } else if (desired > 0 && ready < desired) {
+      problems.push({ severity: 'high', message: `${desired - ready} pods unavailable` })
+    }
+    return problems
+  }
+
+  // Deployment, StatefulSet
+  const desired = spec.replicas ?? status.replicas ?? 0
+  const ready = status.readyReplicas || 0
+  const available = status.availableReplicas ?? ready
+  const updated = status.updatedReplicas || 0
+
+  if (desired === 0) return problems
+
+  if (ready === 0 && desired > 0) {
+    problems.push({ severity: 'critical', message: 'No pods ready' })
+  } else if (available < desired) {
+    problems.push({ severity: 'high', message: `${desired - available} pods unavailable` })
+  }
+
+  if (updated > 0 && updated < desired) {
+    problems.push({ severity: 'medium', message: 'Rollout in progress' })
+  }
+
+  // Check conditions for stuck rollouts (Deployment only)
+  if (k === 'deployments') {
+    const conditions = status.conditions || []
+    for (const cond of conditions) {
+      if (cond.type === 'Progressing' && cond.status === 'False' && cond.reason === 'ProgressDeadlineExceeded') {
+        problems.push({ severity: 'critical', message: 'Rollout stuck' })
+      }
+    }
+  }
+
+  return problems
+}
+
+/** Check whether a workload's problems match a given problem category */
+export function workloadMatchesProblemCategory(problems: PodProblem[], category: string): boolean {
+  const msgs = problems.map(p => p.message)
+  switch (category) {
+    case 'Unavailable':
+      return msgs.some(m => m.includes('unavailable') || m.includes('No pods ready'))
+    case 'Rollout Stuck':
+      return msgs.includes('Rollout stuck')
+    case 'Rollout In Progress':
+      return msgs.includes('Rollout in progress')
+    default:
+      return false
+  }
+}
+
 export function getWorkloadImages(resource: any): string[] {
   const containers = resource.spec?.template?.spec?.containers || []
   return containers.map((c: any) => {
@@ -1325,37 +1454,6 @@ export function getRoleBindingSubjectCount(rb: any): number {
 // WORKLOAD PROBLEM DETECTION (for table row indicators)
 // ============================================================================
 
-export function getWorkloadProblems(resource: any, kind: string): string[] {
-  const problems: string[] = []
-  const status = resource.status || {}
-  const spec = resource.spec || {}
-
-  if (kind === 'daemonsets') {
-    const ready = status.numberReady || 0
-    const desired = status.desiredNumberScheduled || 0
-    if (desired > 0 && ready < desired) {
-      problems.push(`${desired - ready} pods not ready`)
-    }
-  } else {
-    const ready = status.readyReplicas || 0
-    const desired = spec.replicas ?? 0
-    if (desired > 0 && ready < desired) {
-      problems.push(`${desired - ready} replicas not ready`)
-    }
-  }
-
-  const conditions = status.conditions || []
-  for (const cond of conditions) {
-    if (cond.status === 'True' && cond.type === 'ReplicaFailure') {
-      problems.push('ReplicaFailure')
-    }
-    if (cond.status === 'False' && cond.type === 'Available') {
-      problems.push('Unavailable')
-    }
-  }
-
-  return problems
-}
 
 // ============================================================================
 // FORMATTING UTILITIES

package/src/components/shared/CreateResourceDialog.tsx

@@ -0,0 +1,236 @@
+import { useState, useCallback, useEffect } from 'react'
+import { X, Loader2, Check, AlertTriangle, ChevronDown, ChevronRight } from 'lucide-react'
+import { DialogPortal } from '../ui/DialogPortal'
+import { YamlEditor } from '../ui/YamlEditor'
+import { Tooltip } from '../ui/Tooltip'
+import { formatApplyError } from '../../utils/k8s-errors'
+
+export interface ApplyResult {
+  name: string
+  namespace: string
+  kind: string
+  created: boolean
+}
+
+export interface CreateResourceDialogProps {
+  open: boolean
+  onClose: () => void
+  initialYaml?: string
+  title?: string
+  // Injected by platform (decouples from data-fetching hooks)
+  onApply: (params: { yaml: string; mode: 'apply' | 'create'; dryRun: boolean }) => Promise<ApplyResult[]>
+  isApplying: boolean
+  /** Called after a successful non-dry-run apply with the first created resource */
+  onCreated?: (result: ApplyResult) => void
+}
+
+export function CreateResourceDialog({ open, onClose, initialYaml = '', title, onApply, isApplying, onCreated }: CreateResourceDialogProps) {
+  const [yaml, setYaml] = useState(initialYaml)
+  const [mode, setMode] = useState<'apply' | 'create'>('apply')
+  const [dryRun, setDryRun] = useState(false)
+  const [yamlValid, setYamlValid] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState<string | null>(null)
+
+  // Reset state when dialog opens or initialYaml changes
+  useEffect(() => {
+    if (open) {
+      setYaml(initialYaml)
+      setMode('apply')
+      setDryRun(false)
+      setError(null)
+      setSuccess(null)
+    }
+  }, [open, initialYaml])
+
+  const handleClose = useCallback(() => {
+    if (isApplying) return
+    setError(null)
+    setSuccess(null)
+    setYaml('')
+    onClose()
+  }, [onClose, isApplying])
+
+  const handleValidate = useCallback((_isValid: boolean, errors: string[]) => {
+    setYamlValid(errors.length === 0)
+  }, [])
+
+  const handleSubmit = useCallback(async () => {
+    if (!yaml.trim()) {
+      setError('YAML content is required')
+      return
+    }
+    setError(null)
+    setSuccess(null)
+
+    try {
+      const results = await onApply({ yaml, mode, dryRun })
+      const action = mode === 'create' ? 'Created' : 'Applied'
+      const dryRunLabel = dryRun ? ' (dry run)' : ''
+
+      if (results.length === 1) {
+        const r = results[0]
+        setSuccess(`${action} ${r.kind} ${r.namespace ? r.namespace + '/' : ''}${r.name}${dryRunLabel}`)
+      } else {
+        setSuccess(`${action} ${results.length} resources${dryRunLabel}`)
+      }
+
+      if (!dryRun) {
+        if (onCreated && results.length > 0) {
+          // Close immediately and navigate to the created resource
+          handleClose()
+          onCreated(results[0])
+        } else {
+          setTimeout(handleClose, 1200)
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error')
+    }
+  }, [yaml, mode, dryRun, onApply, onCreated, handleClose])
+
+  const dialogTitle = title || 'Create Resource'
+  const submitLabel = mode === 'create' ? 'Create' : 'Apply'
+
+  return (
+    <DialogPortal open={open} onClose={handleClose} closable={!isApplying} className="w-[700px] max-h-[85vh] flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between px-5 py-3.5 border-b border-theme-border shrink-0">
+        <h2 className="text-sm font-semibold text-theme-text-primary">{dialogTitle}</h2>
+        <Tooltip content="Close">
+          <button
+            onClick={handleClose}
+            className="p-1 rounded hover:bg-theme-hover text-theme-text-secondary transition-colors"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </Tooltip>
+      </div>
+
+      {/* Editor */}
+      <div className="flex-1 min-h-0 px-5 py-3">
+        <YamlEditor
+          value={yaml}
+          onChange={setYaml}
+          height="400px"
+          onValidate={handleValidate}
+        />
+      </div>
+
+      {/* Status messages — single location for feedback (no toast) */}
+      {error && <ApplyErrorBanner error={error} />}
+      {success && (
+        <div className="mx-5 mb-2 px-3 py-2 rounded-md bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-xs flex items-center gap-2">
+          <Check className="w-3.5 h-3.5 shrink-0" />
+          <span>{success}</span>
+        </div>
+      )}
+
+      {/* Footer */}
+      <div className="flex items-center justify-between px-5 py-3 border-t border-theme-border shrink-0">
+        <div className="flex items-center gap-3">
+          {/* Mode toggle — pill segmented control */}
+          <Tooltip content="Apply: create or update (idempotent). Create: fail if exists." position="bottom">
+            <div className="flex items-center rounded-md bg-theme-base border border-theme-border p-0.5" role="radiogroup" aria-label="Apply mode">
+              <button
+                onClick={() => setMode('apply')}
+                role="radio"
+                aria-checked={mode === 'apply'}
+                className={`px-2.5 py-1 rounded text-xs font-medium transition-colors ${
+                  mode === 'apply'
+                    ? 'bg-theme-elevated text-theme-text-primary shadow-sm'
+                    : 'text-theme-text-tertiary hover:text-theme-text-secondary'
+                }`}
+              >
+                Apply
+              </button>
+              <button
+                onClick={() => setMode('create')}
+                role="radio"
+                aria-checked={mode === 'create'}
+                className={`px-2.5 py-1 rounded text-xs font-medium transition-colors ${
+                  mode === 'create'
+                    ? 'bg-theme-elevated text-theme-text-primary shadow-sm'
+                    : 'text-theme-text-tertiary hover:text-theme-text-secondary'
+                }`}
+              >
+                Create
+              </button>
+            </div>
+          </Tooltip>
+
+          {/* Dry run checkbox */}
+          <Tooltip content="Validate against the cluster without persisting changes" position="bottom">
+            <label className="flex items-center gap-1.5 text-xs text-theme-text-secondary cursor-pointer">
+            <input
+              type="checkbox"
+              checked={dryRun}
+              onChange={(e) => setDryRun(e.target.checked)}
+              className="w-3.5 h-3.5 rounded border-theme-border bg-theme-base"
+            />
+            Dry run
+          </label>
+          </Tooltip>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            onClick={handleClose}
+            className="px-3 py-1.5 text-xs rounded-lg hover:bg-theme-hover text-theme-text-secondary transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSubmit}
+            disabled={isApplying || !yaml.trim() || !yamlValid}
+            className="px-4 py-1.5 text-xs rounded-lg btn-brand font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
+          >
+            {isApplying ? (
+              <>
+                <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                {submitLabel === 'Apply' ? 'Applying...' : 'Creating...'}
+              </>
+            ) : (
+              submitLabel
+            )}
+          </button>
+        </div>
+      </div>
+    </DialogPortal>
+  )
+}
+
+function ApplyErrorBanner({ error }: { error: string }) {
+  const [expanded, setExpanded] = useState(false)
+  const parsed = formatApplyError(error)
+  const hasFriendly = !!parsed.suggestion
+
+  return (
+    <div className="mx-5 mb-2 rounded-md bg-red-500/10 border border-red-500/30 text-xs">
+      <div className="px-3 py-2 flex items-start gap-2 text-red-400">
+        <AlertTriangle className="w-3.5 h-3.5 mt-0.5 shrink-0" />
+        <div className="min-w-0 flex-1">
+          <span className="font-medium">{parsed.summary}</span>
+          {parsed.suggestion && (
+            <p className="mt-1 text-red-400/80">{parsed.suggestion}</p>
+          )}
+        </div>
+      </div>
+      {hasFriendly && (
+        <button
+          type="button"
+          onClick={() => setExpanded(!expanded)}
+          className="flex items-center gap-1 px-3 pb-2 text-red-400/60 hover:text-red-400/80 transition-colors"
+        >
+          {expanded ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+          <span>Details</span>
+        </button>
+      )}
+      {(expanded || !hasFriendly) && hasFriendly && (
+        <div className="px-3 pb-2 text-red-400/60 break-all font-mono leading-relaxed">
+          {parsed.raw}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/shared/EditableYamlView.tsx

@@ -1,6 +1,7 @@
 import { useState, useCallback } from 'react'
 import {
   Copy,
+  CopyPlus,
   Check,
   RefreshCw,
   Pencil,
@@ -11,6 +12,7 @@ import {
 import { stringify as yamlStringify } from 'yaml'
 import { CodeViewer } from '../ui/CodeViewer'
 import { YamlEditor } from '../ui/YamlEditor'
+import { Tooltip } from '../ui/Tooltip'
 import type { SelectedResource } from '../../types'
 
 // ============================================================================
@@ -102,9 +104,11 @@ interface EditableYamlViewProps {
   isSaving?: boolean
   /** Error message from the last save attempt */
   saveError?: string | null
+  /** Duplicate handler — opens create dialog with this resource's YAML */
+  onDuplicate?: (params: { kind: string; namespace: string; name: string; yaml: string }) => void
 }
 
-export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSave, isSaving, saveError }: EditableYamlViewProps) {
+export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSave, isSaving, saveError, onDuplicate }: EditableYamlViewProps) {
   const [isEditing, setIsEditing] = useState(false)
   const [editedYaml, setEditedYaml] = useState('')
   const [yamlErrors, setYamlErrors] = useState<string[]>([])
@@ -289,6 +293,17 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
             {copied ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
             Copy
           </button>
+          {onDuplicate && (
+            <Tooltip content="Duplicate as new resource">
+              <button
+                onClick={() => onDuplicate({ kind: resource.kind, namespace: resource.namespace, name: resource.name, yaml: yamlContent })}
+                className="flex items-center gap-1 px-2 py-1 text-xs text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+              >
+                <CopyPlus className="w-3.5 h-3.5" />
+                Duplicate
+              </button>
+            </Tooltip>
+          )}
         </div>
       </div>
       <CodeViewer

package/src/components/shared/ResourceActionsBar.tsx

@@ -18,6 +18,7 @@ import {
 } from 'lucide-react'
 import { createTwoFilesPatch } from 'diff'
 import { clsx } from 'clsx'
+import { Tooltip } from '../ui/Tooltip'
 import { ForceDeleteConfirmDialog, type CascadeDependent } from '../ui/ForceDeleteConfirmDialog'
 import { ConfirmDialog } from '../ui/ConfirmDialog'
 import { DialogPortal } from '../ui/DialogPortal'
@@ -483,13 +484,14 @@ export function ResourceActionsBar({
       )}
 
       {onDelete && (
-        <button
-          onClick={() => setShowDeleteConfirm(true)}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-red-400 hover:text-white hover:bg-red-600 border border-red-400/50 hover:border-red-600 rounded-lg transition-colors"
-        >
-          <Trash2 className="w-3.5 h-3.5" />
-          Delete
-        </button>
+        <Tooltip content="Delete resource">
+          <button
+            onClick={() => setShowDeleteConfirm(true)}
+            className="p-1.5 text-theme-text-secondary border border-theme-border-light rounded-lg hover:text-red-400 hover:border-red-400/50 hover:bg-red-500/10 transition-colors"
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+          </button>
+        </Tooltip>
       )}
 
       <ForceDeleteConfirmDialog