@skyhook-io/radar-app 0.1.1

package/src/components/helm/ManifestDiffViewer.tsx

@@ -0,0 +1,91 @@
+import { X, GitCompare } from 'lucide-react'
+import { clsx } from 'clsx'
+
+interface ManifestDiffViewerProps {
+  diff: string
+  isLoading: boolean
+  revision1: number
+  revision2: number
+  onClose: () => void
+}
+
+export function ManifestDiffViewer({ diff, isLoading, revision1, revision2, onClose }: ManifestDiffViewerProps) {
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-32 text-theme-text-tertiary">
+        Computing diff...
+      </div>
+    )
+  }
+
+  if (!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>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-4">
+      <div className="flex items-center justify-between mb-3">
+        <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}
+          </span>
+        </div>
+        <button
+          onClick={onClose}
+          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"
+        >
+          <X className="w-3.5 h-3.5" />
+          Close
+        </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="p-3">
+          {diff.split('\n').map((line, index) => (
+            <DiffLine key={index} line={line} />
+          ))}
+        </div>
+      </div>
+
+      {/* Legend */}
+      <div className="flex items-center gap-4 mt-3 text-xs text-theme-text-tertiary">
+        <div className="flex items-center gap-1">
+          <span className="w-3 h-3 bg-red-500/20 border border-red-500/50 rounded" />
+          <span>Removed</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <span className="w-3 h-3 bg-green-500/20 border border-green-500/50 rounded" />
+          <span>Added</span>
+        </div>
+      </div>
+    </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/ManifestViewer.tsx

@@ -0,0 +1,61 @@
+import { Copy, Check, Code } from 'lucide-react'
+import { CodeViewer } from '../ui/CodeViewer'
+
+interface ManifestViewerProps {
+  manifest: string
+  isLoading: boolean
+  revision?: number
+  onCopy: (text: string) => void
+  copied: boolean
+}
+
+export function ManifestViewer({ manifest, isLoading, revision, onCopy, copied }: ManifestViewerProps) {
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-32 text-theme-text-tertiary">
+        Loading manifest...
+      </div>
+    )
+  }
+
+  if (!manifest) {
+    return (
+      <div className="flex flex-col items-center justify-center h-32 text-theme-text-tertiary gap-2">
+        <Code className="w-8 h-8 text-theme-text-disabled" />
+        <span>No manifest available</span>
+      </div>
+    )
+  }
+
+  const lineCount = manifest.split('\n').length
+
+  return (
+    <div className="p-4">
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium text-theme-text-secondary">Rendered Manifest</span>
+          {revision && (
+            <span className="badge bg-theme-elevated text-theme-text-secondary">
+              Revision {revision}
+            </span>
+          )}
+          <span className="text-xs text-theme-text-tertiary">{lineCount} lines</span>
+        </div>
+        <button
+          onClick={() => onCopy(manifest)}
+          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"
+        >
+          {copied ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
+          Copy
+        </button>
+      </div>
+
+      <CodeViewer
+        code={manifest}
+        language="yaml"
+        showLineNumbers
+        maxHeight="calc(100vh - 300px)"
+      />
+    </div>
+  )
+}

package/src/components/helm/OwnedResources.tsx

@@ -0,0 +1,465 @@
+import { useState, useCallback } from 'react'
+import { Link2, ExternalLink, AlertCircle, Terminal, FileText, Plug, 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 { getResourceStatusColor, SEVERITY_BADGE } from '../../utils/badge-colors'
+import { useQueryClient } from '@tanstack/react-query'
+import { useOpenTerminal, useOpenLogs } from '../dock'
+import { useStartPortForward } from '../portforward/PortForwardManager'
+import { useAvailablePorts } from '../../api/client'
+import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
+import { useNamespacedCapabilities } from '../../contexts/CapabilitiesContext'
+
+interface OwnedResourcesProps {
+  resources: HelmOwnedResource[]
+  onNavigate?: NavigateToResource
+}
+
+function getIconForKind(kind: string) {
+  return getResourceIcon(kind)
+}
+
+// Group resources by kind
+function groupByKind(resources: HelmOwnedResource[]): Map<string, HelmOwnedResource[]> {
+  const groups = new Map<string, HelmOwnedResource[]>()
+  for (const resource of resources) {
+    const existing = groups.get(resource.kind) || []
+    existing.push(resource)
+    groups.set(resource.kind, existing)
+  }
+  return groups
+}
+
+// Health status types
+type HealthFilter = 'all' | 'healthy' | 'warning' | 'error'
+
+// Determine health status of a resource
+function getResourceHealth(resource: HelmOwnedResource): 'healthy' | 'warning' | 'error' | 'unknown' {
+  // An issue field always indicates a problem regardless of status
+  if (resource.issue) return 'error'
+  const status = resource.status
+  if (!status) return 'unknown'
+  const s = status.toLowerCase()
+  if (['running', 'active', 'succeeded', 'bound', 'available'].includes(s)) return 'healthy'
+  if (['pending', 'progressing', 'scaled to 0', 'suspended', 'creating'].includes(s)) return 'warning'
+  if (['failed', 'error', 'crashloopbackoff', 'imagepullbackoff', 'evicted', 'terminating'].includes(s)) return 'error'
+  return 'unknown'
+}
+
+// Compute health summary
+function computeHealthSummary(resources: HelmOwnedResource[]) {
+  let healthy = 0
+  let warning = 0
+  let error = 0
+  let unknown = 0
+
+  for (const r of resources) {
+    const health = getResourceHealth(r)
+    if (health === 'healthy') healthy++
+    else if (health === 'warning') warning++
+    else if (health === 'error') error++
+    else unknown++
+  }
+
+  return { healthy, warning, error, unknown, total: resources.length }
+}
+
+export function OwnedResources({ resources, onNavigate }: OwnedResourcesProps) {
+  const [healthFilter, setHealthFilter] = useState<HealthFilter>('all')
+
+  if (!resources || resources.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-32 text-theme-text-tertiary gap-2">
+        <Link2 className="w-8 h-8 text-theme-text-disabled" />
+        <span>No owned resources</span>
+      </div>
+    )
+  }
+
+  const health = computeHealthSummary(resources)
+
+  // Filter resources by health status
+  const filteredResources = healthFilter === 'all'
+    ? resources
+    : resources.filter(r => getResourceHealth(r) === healthFilter)
+
+  const grouped = groupByKind(filteredResources)
+
+  const handleFilterClick = (filter: HealthFilter) => {
+    setHealthFilter(prev => prev === filter ? 'all' : filter)
+  }
+
+  return (
+    <div className="p-4 space-y-4">
+      {/* Health summary - clickable badges */}
+      <div className="flex items-center justify-between">
+        <div className="text-sm text-theme-text-secondary">
+          {healthFilter === 'all' ? (
+            <>{resources.length} resource{resources.length !== 1 ? 's' : ''} created by this release</>
+          ) : (
+            <span className="flex items-center gap-2">
+              Showing {filteredResources.length} of {resources.length} resources
+              <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>
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {health.healthy > 0 && (
+            <button
+              onClick={() => handleFilterClick('healthy')}
+              className={clsx(
+                'flex items-center gap-1 px-2 py-0.5 text-xs rounded transition-all',
+                SEVERITY_BADGE.success,
+                healthFilter === 'healthy' && 'ring-2 ring-green-400/50 ring-offset-1 ring-offset-theme-surface'
+              )}
+            >
+              {health.healthy} healthy
+            </button>
+          )}
+          {health.warning > 0 && (
+            <button
+              onClick={() => handleFilterClick('warning')}
+              className={clsx(
+                'flex items-center gap-1 px-2 py-0.5 text-xs rounded transition-all',
+                SEVERITY_BADGE.warning,
+                healthFilter === 'warning' && 'ring-2 ring-amber-400/50 ring-offset-1 ring-offset-theme-surface'
+              )}
+            >
+              {health.warning} pending
+            </button>
+          )}
+          {health.error > 0 && (
+            <button
+              onClick={() => handleFilterClick('error')}
+              className={clsx(
+                'flex items-center gap-1 px-2 py-0.5 text-xs rounded transition-all',
+                SEVERITY_BADGE.error,
+                healthFilter === 'error' && 'ring-2 ring-red-400/50 ring-offset-1 ring-offset-theme-surface'
+              )}
+            >
+              {health.error} failed
+            </button>
+          )}
+        </div>
+      </div>
+
+      {filteredResources.length === 0 ? (
+        <div className="flex flex-col items-center justify-center h-32 text-theme-text-tertiary gap-2">
+          <AlertCircle className="w-8 h-8 text-theme-text-disabled" />
+          <span>No resources match the selected filter</span>
+          <button
+            onClick={() => setHealthFilter('all')}
+            className="text-xs text-blue-400 hover:text-blue-300"
+          >
+            Clear filter
+          </button>
+        </div>
+      ) : (
+        Array.from(grouped.entries()).map(([kind, items]) => {
+          const Icon = getIconForKind(kind)
+
+          return (
+            <div key={kind} className="bg-theme-elevated/30 rounded-lg p-3">
+              <div className="flex items-center gap-2 mb-2">
+                <Icon className="w-4 h-4 text-theme-text-secondary" />
+                <span className="text-sm font-medium text-theme-text-secondary">{kind}</span>
+                <span className="text-xs text-theme-text-tertiary">({items.length})</span>
+              </div>
+              <div className="space-y-1">
+                {items.map((resource, idx) => (
+                  <ResourceItem
+                    key={`${resource.namespace}-${resource.name}-${idx}`}
+                    resource={resource}
+                    onNavigate={onNavigate}
+                  />
+                ))}
+              </div>
+            </div>
+          )
+        })
+      )}
+    </div>
+  )
+}
+
+interface ResourceItemProps {
+  resource: HelmOwnedResource
+  onNavigate?: NavigateToResource
+}
+
+function ResourceItem({ resource, onNavigate }: ResourceItemProps) {
+  const canNavigate = !!onNavigate
+  const isPod = resource.kind.toLowerCase() === 'pod'
+  const isService = resource.kind.toLowerCase() === 'service'
+  const isRunning = resource.status?.toLowerCase() === 'running'
+
+  const handleClick = () => {
+    if (onNavigate) {
+      onNavigate({ kind: kindToPlural(resource.kind), namespace: resource.namespace, name: resource.name })
+    }
+  }
+
+  const isError = resource.status && ['failed', 'error', 'crashloopbackoff', 'imagepullbackoff', 'evicted'].includes(resource.status.toLowerCase())
+
+  return (
+    <div
+      className={clsx(
+        'flex items-center justify-between p-2 rounded text-sm group',
+        canNavigate
+          ? 'cursor-pointer hover:bg-theme-elevated/50'
+          : 'bg-theme-surface/50'
+      )}
+    >
+      <div
+        onClick={canNavigate ? handleClick : undefined}
+        className="flex items-center gap-2 min-w-0 flex-1"
+      >
+        <span className="text-theme-text-primary truncate">{resource.name}</span>
+        {resource.namespace && (
+          <span className="text-xs text-theme-text-tertiary shrink-0">{resource.namespace}</span>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2 shrink-0">
+        {/* Quick actions for pods */}
+        {isPod && (
+          <PodQuickActions
+            namespace={resource.namespace}
+            podName={resource.name}
+            isRunning={isRunning}
+          />
+        )}
+
+        {/* Quick actions for services */}
+        {isService && (
+          <ServiceQuickActions
+            namespace={resource.namespace}
+            serviceName={resource.name}
+          />
+        )}
+
+        {/* Ready count (e.g., 3/3) */}
+        {resource.ready && (
+          <span className="text-xs text-theme-text-secondary font-mono">{resource.ready}</span>
+        )}
+
+        {/* Status badge */}
+        {resource.status && (
+          <span
+            className={clsx('badge-sm', getResourceStatusColor(resource.status || ''))}
+            title={resource.message || resource.status}
+          >
+            {resource.status}
+          </span>
+        )}
+
+        {/* Issue summary (e.g., "OOMKilled", "CrashLoopBackOff") */}
+        {resource.issue && (
+          <span
+            className="text-xs text-red-400"
+            title={resource.summary || resource.issue}
+          >
+            {resource.issue}
+          </span>
+        )}
+
+        {/* Error icon with message tooltip */}
+        {isError && resource.message && !resource.issue && (
+          <span title={resource.message}>
+            <AlertCircle className="w-3.5 h-3.5 text-red-400" />
+          </span>
+        )}
+
+        {canNavigate && (
+          <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>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// Quick actions for pods
+interface PodQuickActionsProps {
+  namespace: string
+  podName: string
+  isRunning: boolean
+}
+
+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)
+
+  const [isLoadingAction, setIsLoadingAction] = useState(false)
+
+  // Fetch pod data using React Query cache - shared with resource views
+  const fetchPodData = useCallback(async () => {
+    return queryClient.fetchQuery({
+      queryKey: ['resource', 'pods', namespace, podName],
+      queryFn: async () => {
+        const response = await fetch(apiUrl(`/resources/pods/${namespace}/${podName}`), {
+          credentials: getCredentialsMode(),
+          headers: getAuthHeaders(),
+        })
+        if (!response.ok) throw new Error('Failed to fetch pod')
+        return response.json()
+      },
+      staleTime: 30000,
+    })
+  }, [queryClient, namespace, podName])
+
+  const handleOpenTerminal = useCallback(async () => {
+    if (!isRunning) return
+    setIsLoadingAction(true)
+    try {
+      const data = await fetchPodData()
+      const containers = data.resource?.spec?.containers || []
+      if (containers.length > 0) {
+        openTerminal({
+          namespace,
+          podName,
+          containerName: containers[0].name,
+          containers: containers.map((c: { name: string }) => c.name),
+        })
+      }
+    } catch (error) {
+      console.error('Failed to open terminal:', error)
+    } finally {
+      setIsLoadingAction(false)
+    }
+  }, [namespace, podName, isRunning, openTerminal, fetchPodData])
+
+  const handleOpenLogs = useCallback(async () => {
+    setIsLoadingAction(true)
+    try {
+      const data = await fetchPodData()
+      const containers = data.resource?.spec?.containers || []
+      openLogs({
+        namespace,
+        podName,
+        containers: containers.map((c: { name: string }) => c.name),
+      })
+    } catch (error) {
+      console.error('Failed to open logs:', error)
+    } finally {
+      setIsLoadingAction(false)
+    }
+  }, [namespace, podName, openLogs, fetchPodData])
+
+  const handlePortForward = useCallback((port: number) => {
+    startPortForward.mutate({
+      namespace,
+      podName,
+      podPort: port,
+    })
+  }, [namespace, podName, startPortForward])
+
+  const ports = portsData?.ports || []
+
+  return (
+    <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+      {isLoadingAction && <Loader2 className="w-3.5 h-3.5 animate-spin text-theme-text-tertiary" />}
+
+      {/* Terminal */}
+      {isRunning && canExec && (
+        <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"
+        >
+          <Terminal className="w-3.5 h-3.5" />
+        </button>
+      )}
+
+      {/* Logs */}
+      {canViewLogs && (
+        <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"
+        >
+          <FileText className="w-3.5 h-3.5" />
+        </button>
+      )}
+
+      {/* 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>
+      )}
+    </div>
+  )
+}
+
+// Quick actions for services
+interface ServiceQuickActionsProps {
+  namespace: string
+  serviceName: string
+}
+
+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 ports = portsData?.ports || []
+
+  if (!canPortForward || 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>
+    </div>
+  )
+}