@skyhook-io/radar-app 1.8.6 → 1.8.7

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,4 +1,5 @@
 import { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
 import { X, Play, Loader2, FileText, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
 import type { ValuesPreviewResponse } from '../../types'
@@ -8,6 +9,8 @@ interface ValuesDiffPreviewProps {
   onClose: () => void
   onApply: () => void
   isApplying: boolean
+  title?: string
+  applyLabel?: string
 }
 
 export function ValuesDiffPreview({
@@ -15,6 +18,8 @@ export function ValuesDiffPreview({
   onClose,
   onApply,
   isApplying,
+  title = 'Preview Changes',
+  applyLabel = 'Apply Changes',
 }: ValuesDiffPreviewProps) {
   const dialogRef = useRef<HTMLDivElement>(null)
 
@@ -40,7 +45,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 +59,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 +68,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 +130,13 @@ export function ValuesDiffPreview({
               ) : (
                 <Play className="w-4 h-4" />
               )}
-              Apply Changes
+              {applyLabel}
             </button>
           </div>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body
   )
 }
 

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)}

package/src/components/portforward/PortForwardManager.tsx

@@ -644,7 +644,7 @@ export function PortForwardPanel() {
       onMouseEnter={onPanelHoverEnter}
       onMouseLeave={onPanelHoverLeave}
       className={clsx(
-        'fixed z-[51] w-80',
+        'fixed z-[51] w-[26rem] max-w-[calc(100vw-2rem)]',
         'transition-opacity duration-150 ease-out',
         isPanelOpen
           ? 'opacity-100 pointer-events-auto'
@@ -726,14 +726,16 @@ export function PortForwardPanel() {
           </div>
         ) : (
           <div className="divide-y divide-theme-border">
-            {activeSessions.map((session) => (
-              <div
-                key={session.id}
-                className={clsx(
-                  'p-3 space-y-1',
-                  session.status === 'error' ? 'bg-red-500/10' : 'hover:bg-theme-elevated'
-                )}
-              >
+            {activeSessions.map((session) => {
+              const resourceName = session.serviceName || session.podName
+              return (
+                <div
+                  key={session.id}
+                  className={clsx(
+                    'p-3 space-y-1',
+                    session.status === 'error' ? 'bg-red-500/10' : 'hover:bg-theme-elevated'
+                  )}
+                >
                 {/* Row 1: status dot + name | stop button */}
                 <div className="flex items-start justify-between gap-2">
                   <div className="flex items-start gap-2 min-w-0 flex-1">
@@ -743,9 +745,11 @@ export function PortForwardPanel() {
                         session.status === 'running' ? 'bg-green-500' : 'bg-red-500'
                       )}
                     />
-                    <span className="text-sm text-theme-text-primary font-medium break-all line-clamp-2">
-                      {session.serviceName || session.podName}
-                    </span>
+                    <Tooltip content={resourceName} delay={300} position="bottom" disabled={!isPanelOpen} wrapperClassName="min-w-0 flex-1">
+                      <span className="block min-w-0 truncate text-sm font-medium text-theme-text-primary">
+                        {resourceName}
+                      </span>
+                    </Tooltip>
                     {session.status === 'error' && (
                       <span className={clsx('badge-sm shrink-0', SEVERITY_BADGE.error)}>Failed</span>
                     )}
@@ -916,8 +920,9 @@ export function PortForwardPanel() {
                     </div>
                   </div>
                 )}
-              </div>
-            ))}
+                </div>
+              )
+            })}
           </div>
         )}
       </div>