@skyhook-io/radar-app 1.8.6 → 1.8.8

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
@@ -68,32 +67,3 @@ export function ManifestDiffViewer({ diff, isLoading, revision1, revision2, onCl
     </div>
   )
 }
-
-export function hasDiffBodyChange(diff: string): boolean {
-  return diff.split('\n').some((line) => {
-    if (!line || line.startsWith('---') || line.startsWith('+++') || line.startsWith('@@')) {
-      return false
-    }
-    return line.startsWith('+') || line.startsWith('-')
-  })
-}
-
-export 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-700 dark:text-green-400',
-        isRemoval && 'bg-red-500/10 text-red-700 dark:text-red-400',
-        isHeader && 'text-theme-text-tertiary font-bold',
-        !isAddition && !isRemoval && !isHeader && 'text-theme-text-secondary'
-      )}
-    >
-      {line || ' '}
-    </div>
-  )
-}

package/src/components/helm/TrackChartSourceDialog.tsx

@@ -3,12 +3,40 @@ import { DialogPortal } from '@skyhook-io/k8s-ui/components/ui/DialogPortal'
 import { X, Plus, Trash2, Link2, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useHelmOCISources, useAddOCISource, useRemoveOCISource, useClusterInfo } from '../../api/client'
+import { Input } from '@skyhook-io/k8s-ui'
+import type { UpgradeInfo } from '../../types'
 
 interface TrackChartSourceDialogProps {
   open: boolean
   onClose: () => void
   /** Chart name of the release this was opened from, for the example prompt. */
   chartName?: string
+  sourceIssue?: UpgradeInfo['sourceIssue']
+  sourceError?: string
+}
+
+function getSourceIssueCopy(sourceIssue: UpgradeInfo['sourceIssue'], sourceError?: string) {
+  switch (sourceIssue) {
+    case 'repo_index_error':
+      return {
+        title: 'A Helm repo index failed',
+        body: 'Fix, refresh, or remove the broken Helm repo index. If this release came from OCI, add its registry prefix and Radar will check OCI before reporting that repo error.',
+      }
+    case 'ambiguous_repository':
+      return {
+        title: 'Multiple Helm repos match',
+        body: 'Radar will not guess between classic repos. Adding an OCI prefix will not enable direct upgrades while those repos remain ambiguous.',
+      }
+    case 'untracked':
+      return {
+        title: 'Source not tracked',
+        body: 'Helm does not record the install source. Add the OCI prefix that contains this chart.',
+      }
+    default:
+      return sourceError
+        ? { title: 'Source unresolved', body: sourceError }
+        : undefined
+  }
 }
 
 // TrackChartSourceDialog lets the user register an OCI chart-source prefix — the
@@ -16,7 +44,7 @@ interface TrackChartSourceDialogProps {
 // installed from, so for charts published to an OCI registry (and not managed by
 // GitOps) Radar can only track upgrades once the user declares where they live.
 // Registering a registry/org prefix lets Radar probe "<prefix>/<chartName>".
-export function TrackChartSourceDialog({ open, onClose, chartName }: TrackChartSourceDialogProps) {
+export function TrackChartSourceDialog({ open, onClose, chartName, sourceIssue, sourceError }: TrackChartSourceDialogProps) {
   const [value, setValue] = useState('')
   const { data: sources } = useHelmOCISources()
   const { data: clusterInfo } = useClusterInfo()
@@ -30,6 +58,11 @@ export function TrackChartSourceDialog({ open, onClose, chartName }: TrackChartS
 
   const trimmed = value.trim()
   const invalid = trimmed !== '' && !trimmed.startsWith('oci://')
+  const normalizedInput = trimmed.replace(/\/+$/, '')
+  const normalizedChartName = chartName?.trim().replace(/^\/+|\/+$/g, '') ?? ''
+  const probedRef = normalizedInput && normalizedChartName ? `${normalizedInput}/${normalizedChartName}` : ''
+  const looksLikeFullChartRef = Boolean(normalizedInput && normalizedChartName && normalizedInput.endsWith(`/${normalizedChartName}`))
+  const sourceIssueCopy = getSourceIssueCopy(sourceIssue, sourceError)
 
   const handleAdd = () => {
     if (!trimmed || invalid) return
@@ -58,13 +91,22 @@ export function TrackChartSourceDialog({ open, onClose, chartName }: TrackChartS
       </div>
 
       <div className="p-4 space-y-4">
+        {sourceIssueCopy && (
+          <div className="flex items-start gap-2 rounded-lg border border-theme-border bg-theme-elevated px-3 py-2 text-sm">
+            <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5 text-theme-text-secondary" />
+            <div>
+              <p className="font-medium text-theme-text-primary">{sourceIssueCopy.title}</p>
+              <p className="text-theme-text-secondary">{sourceIssueCopy.body}</p>
+            </div>
+          </div>
+        )}
+
         <div>
           <label className="block text-sm font-medium text-theme-text-secondary mb-2">
             OCI registry prefix
           </label>
           <div className="flex gap-2">
-            <input
-              type="text"
+            <Input
               value={value}
               onChange={(e) => setValue(e.target.value)}
               onKeyDown={(e) => e.key === 'Enter' && handleAdd()}
@@ -87,8 +129,10 @@ export function TrackChartSourceDialog({ open, onClose, chartName }: TrackChartS
           <p className="mt-1 text-xs text-theme-text-tertiary">
             {invalid
               ? 'Must be an oci:// reference.'
+              : looksLikeFullChartRef
+                ? `This looks like a full chart ref. Radar would probe "${probedRef}"; remove the final "/${normalizedChartName}" if "${normalizedChartName}" is the chart name.`
               : chartName
-                ? `Radar will look for "${chartName}" under this prefix (and any others below).`
+                ? `Radar will probe "${probedRef || `<prefix>/${normalizedChartName}`}".`
                 : 'Radar probes <prefix>/<chartName> for each untracked release.'}
           </p>
         </div>

package/src/components/helm/ValuesDiffPreview.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
 import { X, Play, Loader2, FileText, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
+import { classifyDiffLine } from '@skyhook-io/k8s-ui'
 import type { ValuesPreviewResponse } from '../../types'
 
 interface ValuesDiffPreviewProps {
@@ -8,6 +10,8 @@ interface ValuesDiffPreviewProps {
   onClose: () => void
   onApply: () => void
   isApplying: boolean
+  title?: string
+  applyLabel?: string
 }
 
 export function ValuesDiffPreview({
@@ -15,6 +19,8 @@ export function ValuesDiffPreview({
   onClose,
   onApply,
   isApplying,
+  title = 'Preview Changes',
+  applyLabel = 'Apply Changes',
 }: ValuesDiffPreviewProps) {
   const dialogRef = useRef<HTMLDivElement>(null)
 
@@ -40,7 +46,10 @@ export function ValuesDiffPreview({
   const hasChanges = previewData.manifestDiff.trim().length > 0 &&
     previewData.manifestDiff.split('\n').some(line => line.startsWith('+') || line.startsWith('-'))
 
-  return (
+  // Portal to body so the modal escapes any CSS-transformed ancestor (the release
+  // drawer, the upgrade ConfirmDialog) and layers on top rather than being trapped
+  // in a lower stacking context.
+  return createPortal(
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
       <div
@@ -51,6 +60,8 @@ export function ValuesDiffPreview({
       {/* Dialog */}
       <div
         ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
         tabIndex={-1}
         className="relative dialog max-w-4xl w-full mx-4 max-h-[85vh] flex flex-col outline-none"
       >
@@ -58,7 +69,7 @@ export function ValuesDiffPreview({
         <div className="flex items-center justify-between px-4 py-3 border-b border-theme-border shrink-0">
           <div className="flex items-center gap-2">
             <FileText className="w-5 h-5 text-blue-400" />
-            <h3 className="text-lg font-semibold text-theme-text-primary">Preview Changes</h3>
+            <h3 className="text-lg font-semibold text-theme-text-primary">{title}</h3>
           </div>
           <button
             onClick={onClose}
@@ -120,12 +131,13 @@ export function ValuesDiffPreview({
               ) : (
                 <Play className="w-4 h-4" />
               )}
-              Apply Changes
+              {applyLabel}
             </button>
           </div>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body
   )
 }
 
@@ -158,9 +170,7 @@ interface DiffLineProps {
 }
 
 function DiffLine({ line, lineNumber }: DiffLineProps) {
-  const isAddition = line.startsWith('+') && !line.startsWith('+++')
-  const isDeletion = line.startsWith('-') && !line.startsWith('---')
-  const isHeader = line.startsWith('@@') || line.startsWith('---') || line.startsWith('+++')
+  const { isAddition, isRemoval: isDeletion, isHeader } = classifyDiffLine(line)
 
   return (
     <div

package/src/components/home/CostCard.tsx

@@ -1,6 +1,12 @@
 import type { OpenCostSummary } from '../../api/client'
 import { useOpenCostSummary } from '../../api/client'
 import { DollarSign } from 'lucide-react'
+import {
+  formatCostPerHour,
+  formatProjectedDailyRate,
+  formatProjectedMonthlyCost,
+  formatProjectedMonthlyRate,
+} from '../cost/format'
 
 export function CostCard({ onNavigate }: { onNavigate?: () => void }) {
   const { data } = useOpenCostSummary()
@@ -15,7 +21,6 @@ export function CostCard({ onNavigate }: { onNavigate?: () => void }) {
 
 function CostCardContent({ data, onNavigate }: { data: OpenCostSummary; onNavigate?: () => void }) {
   const hourlyCost = data.totalHourlyCost ?? 0
-  const monthlyCost = hourlyCost * 730
   const namespaces = data.namespaces ?? []
   const topNamespaces = namespaces.slice(0, 5)
 
@@ -30,10 +35,10 @@ function CostCardContent({ data, onNavigate }: { data: OpenCostSummary; onNaviga
       <div className="flex flex-col h-full w-full">
         <div className="flex items-center justify-between px-5 py-3 border-b border-theme-border/50">
           <div className="flex items-center gap-2">
-            <DollarSign className="w-4 h-4 text-indigo-500" />
-            <span className="text-xs font-semibold uppercase tracking-wider text-indigo-500">Cost Insights</span>
+            <DollarSign className="w-4 h-4 text-accent-text" />
+            <span className="text-xs font-semibold uppercase tracking-wider text-accent-text">Cost Insights</span>
             {namespaces.length > 0 && (
-              <span className="badge-sm bg-indigo-100 text-indigo-700 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-400 dark:border-indigo-700/40">
+              <span className="badge-sm border border-theme-border bg-accent-muted text-accent-text">
                 {namespaces.length} ns
               </span>
             )}
@@ -45,13 +50,14 @@ function CostCardContent({ data, onNavigate }: { data: OpenCostSummary; onNaviga
           <div className="flex items-baseline gap-3 mb-3">
             <div className="flex items-baseline gap-1">
               <span className="text-2xl font-bold text-theme-text-primary tabular-nums">
-                {formatCost(hourlyCost)}
+                {formatProjectedMonthlyCost(hourlyCost)}
               </span>
-              <span className="text-xs text-theme-text-tertiary">/hr</span>
+              <span className="text-xs text-theme-text-tertiary">/mo</span>
             </div>
-            <div className="flex items-baseline gap-1 text-theme-text-secondary">
-              <span className="text-sm font-medium tabular-nums">~{formatCost(monthlyCost)}</span>
-              <span className="text-[10px] text-theme-text-tertiary">/mo</span>
+            <div className="flex items-baseline gap-1.5 text-theme-text-secondary">
+              <span className="text-xs font-medium tabular-nums">{formatProjectedDailyRate(hourlyCost)}</span>
+              <span className="text-[10px] text-theme-text-quaternary">·</span>
+              <span className="text-xs font-medium tabular-nums">{formatCostPerHour(hourlyCost)}</span>
             </div>
           </div>
 
@@ -63,30 +69,25 @@ function CostCardContent({ data, onNavigate }: { data: OpenCostSummary; onNaviga
                 <div key={ns.name} className="flex items-center gap-2">
                   <span className="text-[11px] text-theme-text-secondary truncate w-24 shrink-0">{ns.name}</span>
                   <div className="flex-1 h-2 rounded-full overflow-hidden bg-theme-hover">
-                    <div
-                      className="h-full rounded-full bg-indigo-500/60"
-                      style={{ width: `${Math.max(pct, 2)}%` }}
-                    />
+                    <div className="h-full rounded-full bg-indigo-500/60" style={{ width: `${Math.max(pct, 2)}%` }} />
                   </div>
-                  <span className="text-[10px] text-theme-text-tertiary tabular-nums w-14 text-right shrink-0">
-                    {formatCost(ns.hourlyCost)}/h
+                  <span className="text-[10px] text-theme-text-tertiary tabular-nums w-20 text-right shrink-0">
+                    {formatProjectedMonthlyRate(ns.hourlyCost)}
                   </span>
                 </div>
               )
             })}
             {namespaces.length > 5 && (
-              <span className="text-[10px] text-theme-text-tertiary">
-                +{namespaces.length - 5} more namespaces
-              </span>
+              <span className="text-[10px] text-theme-text-tertiary">+{namespaces.length - 5} more namespaces</span>
             )}
           </div>
         </div>
 
         <div className="px-4 py-1.5 border-t border-theme-border/50 flex items-center justify-between">
           <span className="text-[10px] text-theme-text-tertiary">
-            {data.currency ?? 'USD'} &middot; {data.window ?? '1h'} window
+            {data.currency ?? 'USD'} &middot; projected monthly from {data.window ?? '1h'} window
           </span>
-          <span className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-indigo-500">
+          <span className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-accent-text">
             OpenCost
           </span>
         </div>
@@ -94,19 +95,3 @@ function CostCardContent({ data, onNavigate }: { data: OpenCostSummary; onNaviga
     </div>
   )
 }
-
-function formatCost(value: number): string {
-  if (value >= 1000) {
-    return `$${(value / 1000).toFixed(1)}k`
-  }
-  if (value >= 1) {
-    return `$${value.toFixed(2)}`
-  }
-  if (value >= 0.01) {
-    return `$${value.toFixed(3)}`
-  }
-  if (value > 0) {
-    return `$${value.toFixed(4)}`
-  }
-  return '$0.00'
-}

package/src/components/home/HomeView.tsx

@@ -1,6 +1,7 @@
 import { useMemo, type ReactNode } from 'react'
 import { useDashboard, useDashboardCRDs, useDashboardHelm, useIssues, type IssuesResponse } from '../../api/client'
 import { useConnection } from '../../context/ConnectionContext'
+import type { ClusterLoadState } from '../../types/clusterLoadState'
 import type { ExtendedMainView, Topology, SelectedResource } from '../../types'
 import { TopologyPreview } from './TopologyPreview'
 import { HelmSummary } from './HelmSummary'
@@ -10,6 +11,7 @@ import { CertificateHealthCard } from './CertificateHealthCard'
 import { NetworkPolicyCoverageCard } from './NetworkPolicyCoverageCard'
 import { CostCard } from './CostCard'
 import { GitOpsControllersCard } from './GitOpsControllersCard'
+import { Tooltip } from '../ui/Tooltip'
 import {
   AuditCard,
   FreshnessControl,
@@ -17,6 +19,7 @@ import {
   StatusDot,
   categoryLabel,
   groupLabel,
+  issueTiming,
   subjectRef,
   type Issue,
 } from '@skyhook-io/k8s-ui'
@@ -31,6 +34,7 @@ interface HomeViewProps {
   onNavigateToView: (view: ExtendedMainView, params?: Record<string, string>) => void
   onNavigateToResourceKind: (kind: string, group?: string, filters?: Record<string, string[]>) => void
   onNavigateToResource: (resource: SelectedResource) => void
+  fallbackClusterLoadState?: ClusterLoadState
   /**
    * Optional override for the Certificate Health card's click. When an embedded
    * host (Radar Cloud) takes Certs over with its own fleet page, it passes this
@@ -40,7 +44,7 @@ interface HomeViewProps {
   onNavigateToCerts?: () => void
 }
 
-export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToResourceKind, onNavigateToResource, onNavigateToCerts }: HomeViewProps) {
+export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNavigateToView, onNavigateToResourceKind, onNavigateToResource, onNavigateToCerts }: HomeViewProps) {
   const { data, isLoading, error, dataUpdatedAt, refetch } = useDashboard(namespaces)
   const { connection } = useConnection()
   const { data: issuesData, isLoading: issuesLoading, isFetching: issuesFetching, error: issuesError } = useIssues(namespaces)
@@ -67,7 +71,7 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
   const { data: helmData } = useDashboardHelm(namespaces)
 
   if (isLoading) {
-    return <PaneLoader label="Loading dashboard…" className="flex-1" />
+    return <PaneLoader label="Loading dashboard…" className="flex-1 min-h-0" />
   }
 
   if (error || !data) {
@@ -94,19 +98,13 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
     )
   }
 
-  const stillLoading = data.deferredLoading || (data.partialData && data.partialData.length > 0)
-
   return (
     <div className="flex-1 overflow-y-auto">
       <div className="max-w-[1600px] mx-auto px-6 py-6 space-y-6">
-        {stillLoading && (
-          <div className="flex items-center gap-2 text-xs text-theme-text-tertiary">
-            <Loader2 className="w-3 h-3 animate-spin" />
-            <span>
-              {data.partialData && data.partialData.length > 0
-                ? `Still loading: ${data.partialData.join(', ')}`
-                : 'Loading remaining resources…'}
-            </span>
+        {fallbackClusterLoadState?.loading && (
+          <div className="flex items-center gap-2 text-sm text-theme-text-tertiary">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            <span>{fallbackClusterLoadState.message}</span>
           </div>
         )}
         {/* Row 1: Cluster Health Card (combined health + resource counts) */}
@@ -360,7 +358,7 @@ function ProblemsPanel({
                 {issues.map((issue) => {
                   const ref = subjectRef(issue)
                   const age = issue.first_seen ? formatCompactAge(issue.first_seen) : ''
-                  const startedAtDeploy = issue.issue_timing === 'started_at_resource_creation'
+                  const timing = issueTiming(issue)
 
                   return (
                     <button
@@ -378,10 +376,14 @@ function ProblemsPanel({
                         <div className="flex items-center gap-1.5">
                           <span className="text-[10px] text-theme-text-tertiary bg-theme-elevated px-1 py-0.5 rounded">{issue.kind}</span>
                           <span className="text-xs text-theme-text-primary truncate font-medium">{issue.name}</span>
-                          {(age || startedAtDeploy) && (
+                          {(age || timing) && (
                             <span className="ml-auto flex shrink-0 items-center gap-1">
                               {age && <span className="text-[10px] text-theme-text-tertiary tabular-nums">{age}</span>}
-                              {startedAtDeploy && <span className="badge-sm text-[10px] text-theme-text-secondary">since deploy</span>}
+                              {timing && (
+                                <Tooltip content={timing.tooltip} delay={100}>
+                                  <span className="badge-sm text-[10px] text-theme-text-secondary">{timing.chip}</span>
+                                </Tooltip>
+                              )}
                             </span>
                           )}
                         </div>

package/src/components/home/MCPSetupDialog.tsx

@@ -204,7 +204,7 @@ export function MCPSetupDialog({ open, onClose, mcpUrl }: MCPSetupDialogProps) {
               <a href="https://modelcontextprotocol.io" target="_blank" rel="noopener noreferrer" className="text-purple-400 hover:text-purple-300 underline underline-offset-2">
                 Model Context Protocol
               </a>{' '}
-              (MCP) server that lets AI assistants query your cluster through Radar.
+              (MCP) server that lets AI agents query your cluster through Radar.
               Unlike raw kubectl access, Radar gives your AI pre-processed, enriched data —
               topology graphs, health assessments, deduplicated events, filtered logs — so it
               can understand your cluster state quickly without burning through context on

package/src/components/home/mcpToolCatalog.ts

@@ -237,9 +237,9 @@ export const MCP_TOOL_CATALOG: MCPToolInfo[] = [
   },
   {
     name: 'get_workload_logs',
-    desc: 'Aggregated, filtered logs across all pods of a workload (Deployment, StatefulSet, or DaemonSet) — collected concurrently, filtered for errors/warnings, and deduplicated.',
+    desc: 'Aggregated, filtered logs across all pods of a workload (Deployment, StatefulSet, DaemonSet, Job, or Argo Workflow) — collected concurrently, filtered for errors/warnings, and deduplicated.',
     params: [
-      { arg: 'kind', desc: 'deployment (default), statefulset, or daemonset' },
+      { arg: 'kind', desc: 'deployment (default), statefulset, daemonset, job, or workflow' },
       { arg: 'namespace', required: true, desc: 'workload namespace' },
       { arg: 'name', required: true, desc: 'workload name' },
       { arg: 'container', desc: 'specific container (defaults to all)' },

package/src/components/issues/IssuesPane.tsx

@@ -15,6 +15,7 @@ import {
   type SummaryTone,
 } from '@skyhook-io/k8s-ui'
 import { AlertTriangle } from 'lucide-react'
+import { IssueDiagnoseButton } from '../diagnose/LocalDiagnoseAction'
 
 const SEVERITY_TONE: Record<IssueSeverity, SummaryTone> = { critical: 'error', warning: 'warning' }
 
@@ -136,7 +137,14 @@ export function IssuesPane({ namespaces, onNavigateToResource }: IssuesPaneProps
       ) : (
         /* anyData = the query resolved, i.e. the cluster is reachable; an empty
            list then means "nothing broken" rather than "not connected". */
-        <IssuesView issues={shown} anyData={!!data} onResourceClick={onResourceClick} />
+        <IssuesView
+          issues={shown}
+          anyData={!!data}
+          onResourceClick={onResourceClick}
+          renderActions={({ issue }) => (
+            <IssueDiagnoseButton kind={issue.kind} namespace={issue.namespace ?? ''} name={issue.name} />
+          )}
+        />
       )}
     </div>
   )

package/src/components/logs/ScheduledWorkloadLogsViewer.tsx

@@ -0,0 +1,135 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Loader2, Terminal } from 'lucide-react'
+import { clsx } from 'clsx'
+import { useWorkloadRuns, type WorkloadRun } from '../../api/client'
+import { WorkloadLogsViewer } from './WorkloadLogsViewer'
+import { pickDefaultRun, workloadRunKey } from '../execution/BatchExecutionView'
+
+interface ScheduledWorkloadLogsViewerProps {
+  kind: string
+  namespace: string
+  name: string
+  selectedRunKey?: string
+  onSelectRun?: (runKey: string) => void
+}
+
+const EMPTY_RUNS: WorkloadRun[] = []
+
+export function ScheduledWorkloadLogsViewer({ kind, namespace, name, selectedRunKey, onSelectRun }: ScheduledWorkloadLogsViewerProps) {
+  const clusterScoped = kind === 'ClusterWorkflowTemplate' || kind === 'clusterworkflowtemplates'
+  const runsQuery = useWorkloadRuns(kind, namespace, name, true, { clusterScoped, refetchActive: true })
+  const runs = runsQuery.data?.runs ?? EMPTY_RUNS
+  const defaultRun = useMemo(() => pickDefaultRun(runs), [runs])
+  const [localRunKey, setLocalRunKey] = useState('')
+  const effectiveRunKey = selectedRunKey ?? localRunKey
+  const selectRun = onSelectRun ?? setLocalRunKey
+
+  useEffect(() => {
+    if (!runsQuery.data) return
+    if (runs.length === 0) {
+      if (effectiveRunKey) selectRun('')
+      return
+    }
+    if (!runs.some(run => workloadRunKey(run) === effectiveRunKey)) {
+      selectRun(workloadRunKey(defaultRun ?? runs[0]))
+    }
+  }, [runsQuery.data, runs, effectiveRunKey, defaultRun, selectRun])
+
+  const selectedRun = runs.find(run => workloadRunKey(run) === effectiveRunKey) ?? defaultRun
+
+  if (runsQuery.isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center text-theme-text-tertiary">
+        <div className="flex items-center gap-2">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          <span>Loading runs...</span>
+        </div>
+      </div>
+    )
+  }
+
+  if (runsQuery.error) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-2 text-theme-text-tertiary">
+        <Terminal className="h-8 w-8" />
+        <span>{runsQuery.error instanceof Error ? runsQuery.error.message : 'Failed to load runs'}</span>
+      </div>
+    )
+  }
+
+  if (!selectedRun) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-2 text-theme-text-tertiary">
+        <Terminal className="h-8 w-8" />
+        <span>No retained runs found</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="shrink-0 border-b border-theme-border bg-theme-surface px-3 py-2">
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-xs font-medium text-theme-text-secondary">Run</span>
+          <select
+            value={workloadRunKey(selectedRun)}
+            onChange={(event) => selectRun(event.target.value)}
+            className="min-w-0 max-w-full rounded-md border border-theme-border bg-theme-elevated px-2 py-1 text-sm text-theme-text-primary"
+          >
+            {runs.map(run => (
+              <option key={workloadRunKey(run)} value={workloadRunKey(run)}>
+                {formatRunOption(run, clusterScoped)}
+              </option>
+            ))}
+          </select>
+          <span className={clsx('badge-sm', phaseBadgeClass(selectedRun.phase))}>
+            {selectedRun.phase}
+          </span>
+          <span className="text-xs text-theme-text-tertiary">
+            {formatRunTime(selectedRun)}
+          </span>
+        </div>
+      </div>
+      <div className="min-h-0 flex-1">
+        <WorkloadLogsViewer
+          key={`${selectedRun.kind}/${selectedRun.namespace}/${selectedRun.name}`}
+          kind={selectedRun.kind}
+          namespace={selectedRun.namespace}
+          name={selectedRun.name}
+          autoStream={selectedRun.active}
+        />
+      </div>
+    </div>
+  )
+}
+
+function phaseBadgeClass(phase: string): string {
+  switch (phase) {
+    case 'Succeeded':
+      return 'status-healthy'
+    case 'Running':
+      return 'status-neutral'
+    case 'Failed':
+    case 'Error':
+      return 'status-unhealthy'
+    case 'Pending':
+      return 'status-degraded'
+    default:
+      return 'status-unknown'
+  }
+}
+
+function formatRunTime(run: WorkloadRun): string {
+  const raw = run.startedAt || run.scheduledAt || run.finishedAt
+  if (!raw) return ''
+  return new Date(raw).toLocaleString()
+}
+
+function formatRunOption(run: WorkloadRun, showNamespace: boolean): string {
+  const bits = [showNamespace ? `${run.namespace}/${run.name}` : run.name, run.phase]
+  if (run.progress) bits.push(run.progress)
+  else if (run.desired) bits.push(`${run.succeeded ?? 0}/${run.desired}`)
+  const work = run.podTotal ? `${run.podSucceeded ?? 0}/${run.podTotal} pods` : ''
+  if (work) bits.push(work)
+  return bits.join(' · ')
+}

package/src/components/portforward/PortForwardButton.tsx

@@ -7,6 +7,7 @@ import { useStartPortForward } from './PortForwardManager'
 import { useIsLocalDeployment } from '../../contexts/CapabilitiesContext'
 import { validatePort } from '@skyhook-io/k8s-ui/utils/validators'
 import { Tooltip } from '../ui/Tooltip'
+import { Input } from '@skyhook-io/k8s-ui'
 
 interface PortForwardButtonProps {
   type: 'pod' | 'service'
@@ -123,9 +124,8 @@ function KubectlCommandDialog({
           <div className="flex flex-col gap-1">
             <div className="flex items-center gap-2 text-sm text-theme-text-secondary">
               <label htmlFor="local-port">Local port:</label>
-              <input
+              <Input
                 id="local-port"
-                type="text"
                 inputMode="numeric"
                 value={portInput}
                 onChange={(e) => setPortInput(e.target.value)}