@skyhook-io/radar-app 0.2.2 → 0.3.1

package/src/components/helm/InstallWizard.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect, useMemo, useRef } from 'react'
 import { X, Package, ChevronRight, ChevronLeft, Play, Loader2, AlertTriangle, CheckCircle, User, BookOpen, Link as LinkIcon, Star, BadgeCheck, Shield, Globe, Building2, Plus, Minus, Terminal } from 'lucide-react'
-import { PaneLoader } from '@skyhook-io/k8s-ui'
+import { PaneLoader, Input } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
 import yaml from 'yaml'
 import { createPatch } from 'diff'
@@ -12,6 +12,7 @@ import { YamlEditor } from '../ui/YamlEditor'
 import { Tooltip } from '../ui/Tooltip'
 import { Markdown } from '../ui/Markdown'
 import { SEVERITY_BADGE, SEVERITY_TEXT } from '../../utils/badge-colors'
+import { validateHelmReleaseName, validateRFC1123Label } from '@skyhook-io/k8s-ui/utils/validators'
 
 // Deep merge two objects — values from `overrides` take priority
 function deepMerge(base: Record<string, unknown>, overrides: Record<string, unknown>): Record<string, unknown> {
@@ -27,7 +28,6 @@ function deepMerge(base: Record<string, unknown>, overrides: Record<string, unkn
   }
   return result
 }
-
 interface InstallWizardProps {
   repo: string
   chartName: string
@@ -105,11 +105,11 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
       }
     }
     if (baseValues && defaultValues) {
-      setValuesYaml(yaml.stringify(deepMerge(baseValues, defaultValues)))
+      setValuesYaml(yaml.stringify(deepMerge(baseValues, defaultValues), { lineWidth: 0 }))
     } else if (defaultValues && !baseValues) {
-      setValuesYaml(yaml.stringify(defaultValues))
+      setValuesYaml(yaml.stringify(defaultValues, { lineWidth: 0 }))
     } else if (baseValues) {
-      setValuesYaml(yaml.stringify(baseValues))
+      setValuesYaml(yaml.stringify(baseValues, { lineWidth: 0 }))
     }
   }, [localChartDetail?.values, artifactHubDetail?.values, isLocal, defaultValues])
 
@@ -134,11 +134,20 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
     setInstallError(null)
     setProgressLogs([])
 
+    // Send the same trimmed values the validators ran on, not the
+    // raw input. Without this, a release name with trailing
+    // whitespace passes the client-side validator (which calls
+    // `.trim()`) but the server receives the untrimmed string and
+    // rejects it — exactly the surprise this validation layer
+    // exists to prevent.
+    const trimmedReleaseName = releaseName.trim()
+    const trimmedNamespace = namespace.trim()
+
     try {
       const release = await installChartWithProgress(
         {
-          releaseName,
-          namespace,
+          releaseName: trimmedReleaseName,
+          namespace: trimmedNamespace,
           chartName,
           version,
           repository,
@@ -169,7 +178,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
 
       // Wait a moment to show success, then close
       setTimeout(() => {
-        onSuccess(namespace, releaseName)
+        onSuccess(trimmedNamespace, trimmedReleaseName)
       }, 1500)
     } catch (err) {
       setInstallError(err instanceof Error ? err.message : 'Install failed')
@@ -181,9 +190,25 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
     } finally {
       setIsInstalling(false)
     }
-  }, [releaseName, namespace, chartName, version, repo, valuesYaml, createNamespace, onSuccess, isLocal, artifactHubDetail, queryClient])
-
-  const canProceedFromInfo = releaseName.trim() !== '' && namespace.trim() !== ''
+  }, [releaseName, namespace, chartName, version, repo, repoUrl, valuesYaml, createNamespace, onSuccess, isLocal, artifactHubDetail, queryClient])
+
+  // Validate release name + namespace before letting the user
+  // advance. Without this, a name like "Invalid Name With Spaces!"
+  // was accepted through to step 2 and only failed server-side at
+  // install time — the server returned a 422 the user couldn't
+  // connect back to anything they typed. K8s / Helm rules are
+  // pinned in packages/k8s-ui/src/utils/validators.ts.
+  const releaseNameValidation = useMemo(
+    () => validateHelmReleaseName(releaseName.trim()),
+    [releaseName],
+  )
+  const namespaceValidation = useMemo(
+    () => validateRFC1123Label(namespace.trim()),
+    [namespace],
+  )
+  const releaseNameError = releaseNameValidation.valid ? null : releaseNameValidation.error
+  const namespaceError = namespaceValidation.valid ? null : namespaceValidation.error
+  const canProceedFromInfo = releaseNameValidation.valid && namespaceValidation.valid
   const canInstall = canProceedFromInfo && !yamlError
 
   const steps: { id: WizardStep; label: string }[] = [
@@ -206,7 +231,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
               <img
                 src={isLocal ? (chartDetail as ChartDetail)?.icon : (chartDetail as ArtifactHubChartDetail)?.logoUrl}
                 alt=""
-                className="w-8 h-8 rounded object-contain bg-white/10 p-1"
+                className="w-8 h-8 rounded object-contain bg-theme-elevated p-1"
               />
             ) : (
               <Package className="w-8 h-8 text-purple-400" />
@@ -216,7 +241,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
                 <h2 className="text-lg font-semibold text-theme-text-primary">Install {chartName}</h2>
                 {!isLocal && (
                   <Tooltip content="From ArtifactHub">
-                    <Globe className="w-4 h-4 text-blue-400" />
+                    <Globe className="w-4 h-4 text-accent" />
                   </Tooltip>
                 )}
               </div>
@@ -224,7 +249,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
                 <span>{repo} / {version}</span>
                 {!isLocal && (chartDetail as ArtifactHubChartDetail)?.repository?.official && (
                   <Tooltip content="Official">
-                    <BadgeCheck className="w-3.5 h-3.5 text-blue-400" />
+                    <BadgeCheck className="w-3.5 h-3.5 text-accent" />
                   </Tooltip>
                 )}
                 {!isLocal && (chartDetail as ArtifactHubChartDetail)?.repository?.verifiedPublisher && (
@@ -264,7 +289,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
                 >
                   <span className={clsx(
                     'w-5 h-5 rounded-full flex items-center justify-center text-xs font-medium',
-                    step === s.id ? 'bg-blue-500 text-white' : 'bg-theme-elevated text-theme-text-secondary'
+                    step === s.id ? 'bg-accent text-white' : 'bg-theme-elevated text-theme-text-secondary'
                   )}>
                     {i + 1}
                   </span>
@@ -287,8 +312,10 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
                   source={source}
                   releaseName={releaseName}
                   setReleaseName={setReleaseName}
+                  releaseNameError={releaseNameError}
                   namespace={namespace}
                   setNamespace={setNamespace}
+                  namespaceError={namespaceError}
                   namespaces={namespaces || []}
                   createNamespace={createNamespace}
                   setCreateNamespace={setCreateNamespace}
@@ -321,7 +348,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
                   valuesYaml={valuesYaml}
                   defaultValuesYaml={
                     isLocal
-                      ? (localChartDetail?.values ? yaml.stringify(localChartDetail.values) : '')
+                      ? (localChartDetail?.values ? yaml.stringify(localChartDetail.values, { lineWidth: 0 }) : '')
                       : (artifactHubDetail?.values || '')
                   }
                 />
@@ -383,11 +410,11 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
                   Cancel
                 </button>
                 {step === 'review' ? (
+                  <Tooltip content={!canHelmWrite ? helmActReason : ''}>
                   <button
                     onClick={handleInstall}
                     disabled={!canInstall || isInstalling || !canHelmWrite}
-                    className="flex items-center gap-2 px-4 py-2 text-sm font-medium btn-brand rounded-lg disabled:cursor-not-allowed"
-                    title={!canHelmWrite ? helmActReason : undefined}
+                    className="flex items-center gap-2 px-4 py-2 text-sm font-medium btn-brand rounded-lg disabled:cursor-not-allowed disabled:pointer-events-none"
                   >
                     {isInstalling ? (
                       <Loader2 className="w-4 h-4 animate-spin" />
@@ -396,6 +423,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
                     )}
                     Install
                   </button>
+                  </Tooltip>
                 ) : (
                   <button
                     onClick={() => setStep(step === 'info' ? 'values' : 'review')}
@@ -420,8 +448,10 @@ interface InfoStepProps {
   source: ChartSource
   releaseName: string
   setReleaseName: (name: string) => void
+  releaseNameError: string | null
   namespace: string
   setNamespace: (ns: string) => void
+  namespaceError: string | null
   namespaces: { name: string }[]
   createNamespace: boolean
   setCreateNamespace: (create: boolean) => void
@@ -434,8 +464,10 @@ function InfoStep({
   source,
   releaseName,
   setReleaseName,
+  releaseNameError,
   namespace,
   setNamespace,
+  namespaceError,
   namespaces,
   createNamespace,
   setCreateNamespace,
@@ -506,7 +538,7 @@ function InfoStep({
                   href={home}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex items-center gap-1 text-xs text-blue-400 hover:text-blue-300"
+                  className="flex items-center gap-1 text-xs text-accent-text hover:underline"
                 >
                   <LinkIcon className="w-3.5 h-3.5" />
                   Homepage
@@ -528,16 +560,28 @@ function InfoStep({
         <label className="block text-sm font-medium text-theme-text-secondary mb-2">
           Release Name
         </label>
-        <input
-          type="text"
+        <Input
           value={releaseName}
           onChange={(e) => setReleaseName(e.target.value)}
           placeholder="my-release"
-          className="w-full px-3 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-blue-500"
+          aria-invalid={releaseNameError ? true : undefined}
+          aria-describedby="release-name-help"
+          className={clsx(
+            'w-full px-3 py-2 bg-theme-elevated border rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2',
+            releaseNameError
+              ? 'border-red-500/60 focus:ring-red-500'
+              : 'border-theme-border-light focus:ring-accent',
+          )}
         />
-        <p className="mt-1 text-xs text-theme-text-tertiary">
-          A unique name for this release in the namespace
-        </p>
+        {releaseNameError ? (
+          <p id="release-name-help" className="mt-1 text-xs text-red-400">
+            Release name {releaseNameError}.
+          </p>
+        ) : (
+          <p id="release-name-help" className="mt-1 text-xs text-theme-text-tertiary">
+            A unique name for this release in the namespace
+          </p>
+        )}
       </div>
 
       {/* Namespace selection */}
@@ -545,14 +589,25 @@ function InfoStep({
         <label className="block text-sm font-medium text-theme-text-secondary mb-2">
           Namespace
         </label>
-        <input
-          type="text"
+        <Input
           list="namespace-suggestions"
           value={namespace}
           onChange={(e) => setNamespace(e.target.value)}
           placeholder="Enter namespace name"
-          className="w-full px-3 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-blue-500"
+          aria-invalid={namespaceError ? true : undefined}
+          aria-describedby="namespace-help"
+          className={clsx(
+            'w-full px-3 py-2 bg-theme-elevated border rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2',
+            namespaceError
+              ? 'border-red-500/60 focus:ring-red-500'
+              : 'border-theme-border-light focus:ring-accent',
+          )}
         />
+        {namespaceError && (
+          <p id="namespace-help" className="mt-1 text-xs text-red-400">
+            Namespace {namespaceError}.
+          </p>
+        )}
         <datalist id="namespace-suggestions">
           {namespaces.map(ns => (
             <option key={ns.name} value={ns.name} />
@@ -563,7 +618,7 @@ function InfoStep({
             type="checkbox"
             checked={createNamespace}
             onChange={(e) => setCreateNamespace(e.target.checked)}
-            className="rounded border-theme-border text-blue-500 focus:ring-blue-500"
+            className="rounded border-theme-border text-accent focus:ring-accent"
           />
           Create namespace if it doesn't exist
         </label>
@@ -574,7 +629,7 @@ function InfoStep({
         <div>
           <button
             onClick={() => setShowReadme(!showReadme)}
-            className="flex items-center gap-2 text-sm text-blue-400 hover:text-blue-300"
+            className="flex items-center gap-2 text-sm text-accent-text hover:underline"
           >
             <BookOpen className="w-4 h-4" />
             {showReadme ? 'Hide' : 'Show'} Chart README
@@ -607,7 +662,7 @@ function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartD
   const ahDetail = chartDetail as ArtifactHubChartDetail | undefined
 
   const defaultValues = isLocal
-    ? (localDetail?.values ? yaml.stringify(localDetail.values) : '')
+    ? (localDetail?.values ? yaml.stringify(localDetail.values, { lineWidth: 0 }) : '')
     : (ahDetail?.values || '')
 
   const hasDefaults = Boolean(defaultValues)
@@ -619,8 +674,8 @@ function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartD
   return (
     <div className="space-y-4">
       {/* Info banner */}
-      <div className="flex items-start gap-3 p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg">
-        <CheckCircle className="w-5 h-5 text-blue-400 shrink-0 mt-0.5" />
+      <div className="flex items-start gap-3 p-4 bg-accent-muted border border-accent/30 rounded-lg">
+        <CheckCircle className="w-5 h-5 text-accent shrink-0 mt-0.5" />
         <div>
           <p className="text-sm font-medium text-theme-text-primary">Ready to install with defaults</p>
           <p className="text-xs text-theme-text-secondary mt-1">
@@ -633,7 +688,7 @@ function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartD
               href={homeUrl}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 text-xs text-blue-400 hover:text-blue-300 mt-2"
+              className="inline-flex items-center gap-1 text-xs text-accent-text hover:underline mt-2"
             >
               <LinkIcon className="w-3 h-3" />
               View chart documentation
@@ -701,6 +756,7 @@ function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartD
               <YamlEditor
                 value={valuesYaml}
                 onChange={setValuesYaml}
+                showProblems={false}
                 height="300px"
                 onValidate={(isValid, errors) => {
                   setYamlError(isValid ? null : errors[0] || 'Invalid YAML')
@@ -819,8 +875,8 @@ function ReviewStep({
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center gap-3 p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg">
-        <CheckCircle className="w-6 h-6 text-blue-400 shrink-0" />
+      <div className="flex items-center gap-3 p-4 bg-accent-muted border border-accent/30 rounded-lg">
+        <CheckCircle className="w-6 h-6 text-accent shrink-0" />
         <div>
           <p className="text-sm font-medium text-theme-text-primary">Ready to install</p>
           <p className="text-xs text-theme-text-secondary mt-0.5">
@@ -836,7 +892,7 @@ function ReviewStep({
           <div>
             <p className="text-sm font-medium text-amber-400">Installing from ArtifactHub</p>
             <p className="text-xs text-theme-text-secondary mt-1">
-              This chart will be installed from: <code className="bg-theme-elevated px-1 rounded">{artifactHubRepoUrl || repo}</code>
+              This chart will be installed from: <code className="inline-code">{artifactHubRepoUrl || repo}</code>
             </p>
           </div>
         </div>
@@ -873,7 +929,7 @@ function ReviewStep({
                 <>Local: {repo}</>
               ) : (
                 <>
-                  <Globe className="w-3.5 h-3.5 text-blue-400" />
+                  <Globe className="w-3.5 h-3.5 text-accent" />
                   ArtifactHub: {repo}
                 </>
               )}

package/src/components/helm/ManifestDiffViewer.tsx

@@ -1,6 +1,5 @@
 import { X, GitCompare } from 'lucide-react'
-import { PaneLoader } from '@skyhook-io/k8s-ui'
-import { clsx } from 'clsx'
+import { PaneLoader, DiffLine, hasDiffBodyChange } from '@skyhook-io/k8s-ui'
 
 interface ManifestDiffViewerProps {
   diff: string
@@ -8,19 +7,21 @@ interface ManifestDiffViewerProps {
   revision1: number
   revision2: number
   onClose: () => void
+  title?: string
+  emptyLabel?: string
 }
 
-export function ManifestDiffViewer({ diff, isLoading, revision1, revision2, onClose }: ManifestDiffViewerProps) {
+export function ManifestDiffViewer({ diff, isLoading, revision1, revision2, onClose, title, emptyLabel }: ManifestDiffViewerProps) {
   if (isLoading) {
     return <PaneLoader label="Computing diff…" className="h-32" />
   }
 
-  if (!diff) {
+  if (!hasDiffBodyChange(diff)) {
     return (
       <div className="p-4">
         <div className="flex flex-col items-center justify-center h-32 text-theme-text-tertiary gap-2">
           <GitCompare className="w-8 h-8 text-theme-text-disabled" />
-          <span>No differences found</span>
+          <span>{emptyLabel || 'No differences found'}</span>
         </div>
       </div>
     )
@@ -32,7 +33,7 @@ export function ManifestDiffViewer({ diff, isLoading, revision1, revision2, onCl
         <div className="flex items-center gap-2">
           <GitCompare className="w-4 h-4 text-theme-text-secondary" />
           <span className="text-sm font-medium text-theme-text-secondary">
-            Comparing Revision {revision1} → {revision2}
+            {title || `Comparing Revision ${revision1} → ${revision2}`}
           </span>
         </div>
         <button
@@ -44,7 +45,7 @@ export function ManifestDiffViewer({ diff, isLoading, revision1, revision2, onCl
         </button>
       </div>
 
-      <div className="rounded-lg overflow-hidden max-h-[calc(100vh-300px)] overflow-auto bg-theme-base/50 font-mono text-xs">
+      <div className="rounded-lg max-h-[calc(100vh-300px)] overflow-auto bg-theme-base/50 font-mono text-xs">
         <div className="p-3">
           {diff.split('\n').map((line, index) => (
             <DiffLine key={index} line={line} />
@@ -66,23 +67,3 @@ export function ManifestDiffViewer({ diff, isLoading, revision1, revision2, onCl
     </div>
   )
 }
-
-function DiffLine({ line }: { line: string }) {
-  const isAddition = line.startsWith('+') && !line.startsWith('+++')
-  const isRemoval = line.startsWith('-') && !line.startsWith('---')
-  const isHeader = line.startsWith('---') || line.startsWith('+++') || line.startsWith('@@')
-
-  return (
-    <div
-      className={clsx(
-        'whitespace-pre',
-        isAddition && 'bg-green-500/10 text-green-400',
-        isRemoval && 'bg-red-500/10 text-red-400',
-        isHeader && 'text-theme-text-tertiary font-bold',
-        !isAddition && !isRemoval && !isHeader && 'text-theme-text-secondary'
-      )}
-    >
-      {line || ' '}
-    </div>
-  )
-}

package/src/components/helm/OwnedResources.tsx

@@ -1,18 +1,19 @@
 import { useState, useCallback } from 'react'
-import { Link2, ExternalLink, AlertCircle, Terminal, FileText, Plug, X, Loader2 } from 'lucide-react'
+import { Link2, ExternalLink, AlertCircle, Terminal, FileText, X, Loader2 } from 'lucide-react'
 import { getResourceIcon } from '../../utils/resource-icons'
 import { clsx } from 'clsx'
 import type { HelmOwnedResource } from '../../types'
 import type { NavigateToResource } from '../../utils/navigation'
-import { kindToPlural } from '../../utils/navigation'
+import { kindToPlural, apiVersionToGroup } from '../../utils/navigation'
 import { getResourceStatusColor, SEVERITY_BADGE } from '../../utils/badge-colors'
 import { useQueryClient } from '@tanstack/react-query'
 import { useOpenTerminal, useOpenLogs } from '../dock'
-import { useStartPortForward } from '../portforward/PortForwardManager'
+import { PortForwardInlineButton } from '../portforward/PortForwardButton'
 import { useAvailablePorts } from '../../api/client'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
-import { useNamespacedCapabilities } from '../../contexts/CapabilitiesContext'
+import { useNamespacedCapabilities, useIsLocalDeployment } from '../../contexts/CapabilitiesContext'
 import { pluralize } from '@skyhook-io/k8s-ui'
+import { Tooltip } from '../ui/Tooltip'
 
 interface OwnedResourcesProps {
   resources: HelmOwnedResource[]
@@ -103,13 +104,14 @@ export function OwnedResources({ resources, onNavigate }: OwnedResourcesProps) {
           ) : (
             <span className="flex items-center gap-2">
               Showing {filteredResources.length} of {resources.length} resources
+              <Tooltip content="Clear filter">
               <button
                 onClick={() => setHealthFilter('all')}
                 className="p-0.5 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
-                title="Clear filter"
               >
                 <X className="w-3.5 h-3.5" />
               </button>
+              </Tooltip>
             </span>
           )}
         </div>
@@ -205,7 +207,7 @@ function ResourceItem({ resource, onNavigate }: ResourceItemProps) {
 
   const handleClick = () => {
     if (onNavigate) {
-      onNavigate({ kind: kindToPlural(resource.kind), namespace: resource.namespace, name: resource.name })
+      onNavigate({ kind: kindToPlural(resource.kind), namespace: resource.namespace, name: resource.name, group: apiVersionToGroup(resource.apiVersion) })
     }
   }
 
@@ -255,39 +257,44 @@ function ResourceItem({ resource, onNavigate }: ResourceItemProps) {
 
         {/* Status badge */}
         {resource.status && (
+          <Tooltip content={resource.message || resource.status}>
           <span
             className={clsx('badge-sm', getResourceStatusColor(resource.status || ''))}
-            title={resource.message || resource.status}
           >
             {resource.status}
           </span>
+          </Tooltip>
         )}
 
         {/* Issue summary (e.g., "OOMKilled", "CrashLoopBackOff") */}
         {resource.issue && (
+          <Tooltip content={resource.summary || resource.issue}>
           <span
             className="text-xs text-red-400"
-            title={resource.summary || resource.issue}
           >
             {resource.issue}
           </span>
+          </Tooltip>
         )}
 
         {/* Error icon with message tooltip */}
         {isError && resource.message && !resource.issue && (
-          <span title={resource.message}>
+          <Tooltip content={resource.message}>
+          <span>
             <AlertCircle className="w-3.5 h-3.5 text-red-400" />
           </span>
+          </Tooltip>
         )}
 
         {canNavigate && (
+          <Tooltip content="View details">
           <button
             onClick={handleClick}
             className="p-1 text-theme-text-tertiary opacity-0 group-hover:opacity-100 hover:text-theme-text-primary hover:bg-theme-elevated rounded transition-all"
-            title="View details"
           >
             <ExternalLink className="w-3.5 h-3.5" />
           </button>
+          </Tooltip>
         )}
       </div>
     </div>
@@ -305,11 +312,14 @@ function PodQuickActions({ namespace, podName, isRunning }: PodQuickActionsProps
   const queryClient = useQueryClient()
   const openTerminal = useOpenTerminal()
   const openLogs = useOpenLogs()
-  const startPortForward = useStartPortForward()
   const { data: portsData, isLoading: portsLoading } = useAvailablePorts('pod', namespace, podName)
 
   // Capabilities (namespace-scoped: re-checks RBAC if globally denied)
   const { canExec, canViewLogs, canPortForward } = useNamespacedCapabilities(namespace)
+  // Live forward (local + RBAC) or the kubectl copy-command (in-cluster/Cloud);
+  // PortForwardInlineButton picks which by deployment mode.
+  const isLocal = useIsLocalDeployment()
+  const showPortForward = canPortForward || !isLocal
 
   const [isLoadingAction, setIsLoadingAction] = useState(false)
 
@@ -367,14 +377,6 @@ function PodQuickActions({ namespace, podName, isRunning }: PodQuickActionsProps
     }
   }, [namespace, podName, openLogs, fetchPodData])
 
-  const handlePortForward = useCallback((port: number) => {
-    startPortForward.mutate({
-      namespace,
-      podName,
-      podPort: port,
-    })
-  }, [namespace, podName, startPortForward])
-
   const ports = portsData?.ports || []
 
   return (
@@ -383,42 +385,33 @@ function PodQuickActions({ namespace, podName, isRunning }: PodQuickActionsProps
 
       {/* Terminal */}
       {isRunning && canExec && (
+        <Tooltip content="Open terminal">
         <button
           onClick={(e) => { e.stopPropagation(); handleOpenTerminal() }}
           disabled={isLoadingAction}
-          className="p-1 text-theme-text-tertiary hover:text-blue-400 hover:bg-blue-500/10 rounded transition-colors disabled:opacity-50"
-          title="Open terminal"
+          className="p-1 text-theme-text-tertiary hover:text-blue-400 hover:bg-blue-500/10 rounded transition-colors disabled:opacity-50 disabled:pointer-events-none"
         >
           <Terminal className="w-3.5 h-3.5" />
         </button>
+        </Tooltip>
       )}
 
       {/* Logs */}
       {canViewLogs && (
+        <Tooltip content="View logs">
         <button
           onClick={(e) => { e.stopPropagation(); handleOpenLogs() }}
           disabled={isLoadingAction}
-          className="p-1 text-theme-text-tertiary hover:text-blue-400 hover:bg-blue-500/10 rounded transition-colors disabled:opacity-50"
-          title="View logs"
+          className="p-1 text-theme-text-tertiary hover:text-blue-400 hover:bg-blue-500/10 rounded transition-colors disabled:opacity-50 disabled:pointer-events-none"
         >
           <FileText className="w-3.5 h-3.5" />
         </button>
+        </Tooltip>
       )}
 
-      {/* Port Forward */}
-      {canPortForward && !portsLoading && ports.length > 0 && (
-        <button
-          onClick={(e) => { e.stopPropagation(); handlePortForward(ports[0].port) }}
-          disabled={startPortForward.isPending}
-          className="p-1 text-theme-text-tertiary hover:text-blue-400 hover:bg-blue-500/10 rounded transition-colors disabled:opacity-50"
-          title={`Port forward :${ports[0].port}`}
-        >
-          {startPortForward.isPending ? (
-            <Loader2 className="w-3.5 h-3.5 animate-spin" />
-          ) : (
-            <Plug className="w-3.5 h-3.5" />
-          )}
-        </button>
+      {/* Port Forward (live locally; kubectl copy-command in-cluster/Cloud) */}
+      {showPortForward && !portsLoading && ports.length > 0 && (
+        <PortForwardInlineButton namespace={namespace} podName={podName} port={ports[0].port} />
       )}
     </div>
   )
@@ -431,36 +424,18 @@ interface ServiceQuickActionsProps {
 }
 
 function ServiceQuickActions({ namespace, serviceName }: ServiceQuickActionsProps) {
-  const startPortForward = useStartPortForward()
   const { data: portsData, isLoading: portsLoading } = useAvailablePorts('service', namespace, serviceName)
   const { canPortForward } = useNamespacedCapabilities(namespace)
-
-  const handlePortForward = useCallback((port: number) => {
-    startPortForward.mutate({
-      namespace,
-      serviceName,
-      podPort: port,
-    })
-  }, [namespace, serviceName, startPortForward])
+  const isLocal = useIsLocalDeployment()
+  const showPortForward = canPortForward || !isLocal
 
   const ports = portsData?.ports || []
 
-  if (!canPortForward || portsLoading || ports.length === 0) return null
+  if (!showPortForward || portsLoading || ports.length === 0) return null
 
   return (
     <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-      <button
-        onClick={(e) => { e.stopPropagation(); handlePortForward(ports[0].port) }}
-        disabled={startPortForward.isPending}
-        className="p-1 text-theme-text-tertiary hover:text-blue-400 hover:bg-blue-500/10 rounded transition-colors disabled:opacity-50"
-        title={`Port forward :${ports[0].port}`}
-      >
-        {startPortForward.isPending ? (
-          <Loader2 className="w-3.5 h-3.5 animate-spin" />
-        ) : (
-          <Plug className="w-3.5 h-3.5" />
-        )}
-      </button>
+      <PortForwardInlineButton namespace={namespace} serviceName={serviceName} port={ports[0].port} />
     </div>
   )
 }