@skyhook-io/radar-app 0.2.1 → 0.3.1

package/src/components/home/ClusterHealthCard.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react'
-import type { DashboardResponse, DashboardMetrics, DashboardCRDCount, DashboardProblem } from '../../api/client'
+import { useState, type ReactNode } from 'react'
+import type { DashboardResponse, DashboardMetrics, DashboardCRDCount } from '../../api/client'
 import { HealthRing } from './HealthRing'
 import {
   AlertTriangle, CheckCircle, XCircle,
@@ -12,6 +12,9 @@ import { useCapabilitiesContext } from '../../contexts/CapabilitiesContext'
 import { MCPSetupDialog } from './MCPSetupDialog'
 import { pluralize, parseContextName } from '@skyhook-io/k8s-ui'
 import { Tooltip } from '../ui/Tooltip'
+import gkeIcon from '../../assets/platform-icons/google_kubernetes_engine.png'
+import eksIcon from '../../assets/platform-icons/aws_eks.png'
+import aksIcon from '../../assets/platform-icons/azure-aks.svg'
 
 interface ClusterHealthCardProps {
   health: DashboardResponse['health']
@@ -20,12 +23,16 @@ interface ClusterHealthCardProps {
   metrics: DashboardMetrics | null
   metricsServerAvailable: boolean
   topCRDs?: DashboardCRDCount[] // Loaded lazily, may be undefined
-  problems: DashboardProblem[]
+  issueCount: number
+  hasCriticalIssues: boolean
   nodeVersionSkew: DashboardResponse['nodeVersionSkew']
   onNavigateToKind: (kind: string, group?: string) => void
   onNavigateToView: () => void
   onWarningEventsClick?: () => void
-  onUnhealthyClick?: () => void
+  onIssuesClick?: () => void
+  // Freshness/refresh control for the dashboard poll — rendered under the
+  // cluster metadata so the overview carries a freshness signal without a band.
+  freshness?: ReactNode
 }
 
 function getMetricsInstallHint(platform: string): string {
@@ -49,7 +56,7 @@ function MetricsUnavailableHint({ platform, metricsServerAvailable }: { platform
       content={
         <div className="space-y-1">
           <div className="font-medium">How to fix</div>
-          <div>{isPreInstalled ? hint : <>Install by running:<br /><code className="text-[10px] opacity-80">{hint}</code></>}</div>
+          <div>{isPreInstalled ? hint : <>Install by running:<br /><code className="inline-code text-[10px] opacity-80">{hint}</code></>}</div>
         </div>
       }
       position="bottom"
@@ -67,13 +74,13 @@ function MetricsUnavailableHint({ platform, metricsServerAvailable }: { platform
 function getPlatformInfo(platform: string): { name: string; icon: string | null } {
   const platformLower = platform.toLowerCase()
   if (platformLower.includes('gke') || platformLower.includes('google')) {
-    return { name: 'Google Kubernetes Engine', icon: '/icons/google_kubernetes_engine.png' }
+    return { name: 'Google Kubernetes Engine', icon: gkeIcon }
   }
   if (platformLower.includes('eks') || platformLower.includes('amazon') || platformLower.includes('aws')) {
-    return { name: 'Amazon EKS', icon: '/icons/aws_eks.png' }
+    return { name: 'Amazon EKS', icon: eksIcon }
   }
   if (platformLower.includes('aks') || platformLower.includes('azure')) {
-    return { name: 'Azure Kubernetes Service', icon: '/icons/azure-aks.svg' }
+    return { name: 'Azure Kubernetes Service', icon: aksIcon }
   }
   if (platformLower.includes('openshift')) {
     return { name: 'OpenShift', icon: null }
@@ -93,7 +100,14 @@ function getPlatformInfo(platform: string): { name: string; icon: string | null
   if (platformLower.includes('docker')) {
     return { name: 'Docker Desktop', icon: null }
   }
-  return { name: platform || 'Kubernetes', icon: null }
+  // The Go backend returns "generic" for unrecognized platforms — that
+  // literal string is no better than the empty case, so fall back to
+  // the friendlier "Kubernetes" label for both. Only pass the platform
+  // string through when it's actually a recognizable name.
+  if (!platform || platformLower === 'generic') {
+    return { name: 'Kubernetes', icon: null }
+  }
+  return { name: platform, icon: null }
 }
 
 export function ClusterHealthCard({
@@ -103,18 +117,32 @@ export function ClusterHealthCard({
   metrics,
   metricsServerAvailable,
   topCRDs: _topCRDs,
-  problems,
+  issueCount,
+  hasCriticalIssues,
   nodeVersionSkew,
   onNavigateToKind,
   onNavigateToView,
   onWarningEventsClick,
-  onUnhealthyClick,
+  onIssuesClick,
+  freshness,
 }: ClusterHealthCardProps) {
   void _topCRDs // Reserved for future CRD display
 
   const [mcpDialogOpen, setMcpDialogOpen] = useState(false)
-  const { mcpEnabled } = useCapabilitiesContext()
+  const caps = useCapabilitiesContext()
+  // Default to local mode when the backend doesn't ship a `deployment`
+  // field (older Radar binaries pre-0.2.2). Local rendering is the safe
+  // OSS-shape default — wrong-direction defaults would briefly suppress
+  // chrome OSS users expect to see.
+  const deployment = caps.deployment ?? { mode: 'local' as const }
+  const mcpEnabled = caps.mcpEnabled
+  const isCloud = deployment.mode === 'cloud'
+  const isInCluster = deployment.mode === 'in-cluster' || deployment.mode === 'cloud'
   const mcpUrl = `${window.location.origin}/mcp`
+  // In Cloud, MCP is org-wide and PAT-authed (api.radarhq.io/mcp). The OSS
+  // "this binary is your local MCP server" framing is wrong there — Cloud
+  // surfaces MCP from the hub Home dashboard instead.
+  const showLocalMcpCard = mcpEnabled && !isCloud
 
   const restricted = counts.restricted ?? []
   const isRestricted = (kind: string) => restricted.includes(kind)
@@ -158,13 +186,23 @@ export function ClusterHealthCard({
     { kind: 'cronjobs', label: 'CronJobs', icon: Clock, total: counts.cronJobs.total, subtitle: `${counts.cronJobs.active} active` },
   ]
   const platformInfo = getPlatformInfo(cluster.platform)
-  // The raw cluster.name is the kubeconfig context (e.g.
-  // `gke_koalabackend_us-east1-b_nonprod-cluster-us-east1`). That string
-  // is the user's primary orientation cue, but the bit they actually
-  // recognize is the short clusterName. We promote that, push the raw
-  // path into a tooltip, and surface project/region as muted metadata.
+  // Headline-name derivation has three branches, in priority order:
+  //  1. Local-kubeconfig users get the parsed short clusterName from a
+  //     string like `gke_koalabackend_us-east1-b_nonprod-cluster-us-east1`
+  //     (the meaningful tail). Account/region are surfaced separately
+  //     below as muted metadata, and the raw path is exposed via tooltip
+  //     on the headline element.
+  //  2. In-cluster mode (deployment.mode === 'in-cluster' OR 'cloud')
+  //     has no meaningful kubeconfig context — bootstrap sets it to
+  //     the literal "in-cluster" sentinel. Fall back to the platform
+  //     label ("Google Kubernetes Engine") which IS recognizable.
+  //  3. Last resort: the literal cluster.name, or "Cluster".
+  // When the card is rendered embedded (cloud mode), the H2 itself is
+  // suppressed below — the hub shell already shows the cluster name in
+  // its top bar.
   const parsedContext = parseContextName(cluster.name || '')
-  const headlineName = parsedContext.clusterName || cluster.name || 'Cluster'
+  const rawHeadline = parsedContext.clusterName || cluster.name || 'Cluster'
+  const headlineName = isInCluster ? platformInfo.name : rawHeadline
 
   return (
     <div className="rounded-xl bg-theme-surface shadow-theme-sm overflow-hidden">
@@ -181,31 +219,46 @@ export function ClusterHealthCard({
               )}
               <span className="text-xs text-theme-text-secondary truncate">{platformInfo.name}</span>
             </div>
-            <h2
-              className="text-xl font-semibold text-theme-text-primary truncate mb-1.5 leading-tight"
-              title={cluster.name}
-            >
-              {headlineName}
-            </h2>
+            {/* In Cloud, the hub shell already shows the cluster name in
+                its top bar; rendering it again here is redundant and
+                makes the card feel like a label rather than content. */}
+            {!isCloud && (
+              // In-cluster mode's cluster.name is the literal "in-cluster"
+              // sentinel, which would leak via the hover tooltip even though
+              // the visible text falls back to the platform label. Render no
+              // tooltip in that case; local mode keeps it so users can hover
+              // to see the full kubeconfig context path.
+              <Tooltip content={isInCluster ? '' : cluster.name} wrapperClassName="!block min-w-0">
+              <h2 className="text-xl font-semibold text-theme-text-primary truncate leading-tight mb-1.5">
+                {headlineName}
+              </h2>
+              </Tooltip>
+            )}
             <div className="flex flex-col gap-0.5 text-xs text-theme-text-tertiary">
               {(parsedContext.account || parsedContext.region) && (
-                <span className="truncate font-mono" title={[parsedContext.account, parsedContext.region].filter(Boolean).join(' · ')}>
+                <Tooltip content={[parsedContext.account, parsedContext.region].filter(Boolean).join(' · ')} wrapperClassName="min-w-0">
+                <span className="truncate font-mono">
                   {[parsedContext.account, parsedContext.region].filter(Boolean).join(' · ')}
                 </span>
+                </Tooltip>
               )}
               {cluster.version && (
                 <span>Kubernetes {cluster.version}</span>
               )}
               <span><span className="font-mono">{counts.namespaces}</span> namespaces</span>
-              {cluster.name && cluster.name !== headlineName && (
-                <span
-                  className="font-mono text-[10px] text-theme-text-disabled break-all leading-snug pt-0.5"
-                  title={cluster.name}
-                >
+              {/* Show raw kubeconfig context as muted metadata only when
+                  it differs from the headline AND we're in local mode
+                  (in-cluster has no meaningful context name, cloud
+                  shell already renders the canonical name). */}
+              {cluster.name && cluster.name !== headlineName && deployment.mode === 'local' && (
+                <Tooltip content={cluster.name}>
+                <span className="font-mono text-[10px] text-theme-text-disabled break-all leading-snug pt-0.5">
                   {cluster.name}
                 </span>
+                </Tooltip>
               )}
             </div>
+            {freshness && <div className="mt-2">{freshness}</div>}
             {nodeVersionSkew && (
               <Tooltip
                 content={
@@ -229,8 +282,11 @@ export function ClusterHealthCard({
                 </span>
               </Tooltip>
             )}
-            {/* MCP Server indicator */}
-            {mcpEnabled && (
+            {/* MCP Server indicator. OSS-only: in Cloud, MCP discovery
+                lives at the hub level (org-wide endpoint, PAT-authed)
+                rather than per-cluster, so this localhost/no-auth card
+                would mislead a Cloud user. */}
+            {showLocalMcpCard && (
               <button
                 onClick={() => setMcpDialogOpen(true)}
                 className="flex items-center gap-2 mt-3 px-2.5 py-2 bg-purple-500/5 hover:bg-purple-500/10 border border-purple-500/20 rounded-md transition-colors w-full"
@@ -238,9 +294,11 @@ export function ClusterHealthCard({
                 <Radio className="w-3.5 h-3.5 text-purple-400 animate-pulse shrink-0" />
                 <div className="flex flex-col gap-0.5 min-w-0 flex-1 text-left">
                   <span className="text-xs font-medium text-purple-400">MCP Server Live</span>
-                  <span className="text-[10px] text-theme-text-tertiary truncate font-mono" title={mcpUrl}>
+                  <Tooltip content={mcpUrl} wrapperClassName="min-w-0">
+                  <span className="text-[10px] text-theme-text-tertiary truncate font-mono">
                     HTTP · {mcpUrl}
                   </span>
+                  </Tooltip>
                 </div>
                 <Info className="w-3.5 h-3.5 text-purple-400/60 shrink-0" />
               </button>
@@ -339,12 +397,14 @@ export function ClusterHealthCard({
                     <Cpu className="w-3.5 h-3.5 text-theme-text-tertiary" />
                     CPU
                   </div>
-                  <ResourceBar
-                    label="Used"
-                    used={formatCPUMillicores(metrics.cpu.usageMillis)}
-                    total={formatCPUMillicores(metrics.cpu.capacityMillis)}
-                    percent={metrics.cpu.usagePercent}
-                  />
+                  {metricsServerAvailable && (
+                    <ResourceBar
+                      label="Used"
+                      used={formatCPUMillicores(metrics.cpu.usageMillis)}
+                      total={formatCPUMillicores(metrics.cpu.capacityMillis)}
+                      percent={metrics.cpu.usagePercent}
+                    />
+                  )}
                   <ResourceBar
                     label="Requested"
                     used={formatCPUMillicores(metrics.cpu.requestsMillis)}
@@ -359,12 +419,14 @@ export function ClusterHealthCard({
                     <MemoryStick className="w-3.5 h-3.5 text-theme-text-tertiary" />
                     Memory
                   </div>
-                  <ResourceBar
-                    label="Used"
-                    used={formatMemoryMiB(metrics.memory.usageMillis)}
-                    total={formatMemoryMiB(metrics.memory.capacityMillis)}
-                    percent={metrics.memory.usagePercent}
-                  />
+                  {metricsServerAvailable && (
+                    <ResourceBar
+                      label="Used"
+                      used={formatMemoryMiB(metrics.memory.usageMillis)}
+                      total={formatMemoryMiB(metrics.memory.capacityMillis)}
+                      percent={metrics.memory.usagePercent}
+                    />
+                  )}
                   <ResourceBar
                     label="Requested"
                     used={formatMemoryMiB(metrics.memory.requestsMillis)}
@@ -373,7 +435,7 @@ export function ClusterHealthCard({
                   />
                 </div>
               )}
-              {!metrics?.cpu && !metrics?.memory && (
+              {!metricsServerAvailable && (
                 <MetricsUnavailableHint platform={cluster.platform} metricsServerAvailable={metricsServerAvailable} />
               )}
             </div>
@@ -387,24 +449,26 @@ export function ClusterHealthCard({
         {/* Left column: Warning indicators (aligned with cluster info) */}
         <div className="flex flex-col justify-center gap-1 w-1/4 shrink-0 pr-4 border-r border-theme-border/50">
           {health.warningEvents > 0 && (
+            <Tooltip content="Native Kubernetes Warning events (e.g., ImagePullBackOff, FailedScheduling)" wrapperClassName="w-fit">
             <button
               onClick={onWarningEventsClick}
-              title="Native Kubernetes Warning events (e.g., ImagePullBackOff, FailedScheduling)"
               className="badge status-degraded w-fit gap-1.5 hover:opacity-80 transition-opacity"
             >
               <AlertTriangle className="w-3.5 h-3.5 shrink-0" />
               <span><span className="font-mono">{health.warningEvents}</span> Warning Events</span>
             </button>
+            </Tooltip>
           )}
-          {problems.length > 0 && (
+          {issueCount > 0 && (
+            <Tooltip content="View grouped live operational issues" wrapperClassName="w-fit">
             <button
-              onClick={onUnhealthyClick}
-              title="View timeline of unhealthy/degraded workload events"
-              className="badge status-unhealthy w-fit gap-1.5 hover:opacity-80 transition-opacity"
+              onClick={onIssuesClick}
+              className={clsx('badge w-fit gap-1.5 hover:opacity-80 transition-opacity', hasCriticalIssues ? 'status-unhealthy' : 'status-degraded')}
             >
               <AlertTriangle className="w-3.5 h-3.5 shrink-0" />
-              <span>View unhealthy workload events</span>
+              <span>{pluralize(issueCount, 'Active Issue')}</span>
             </button>
+            </Tooltip>
           )}
         </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/GitOpsControllersCard.tsx

@@ -0,0 +1,110 @@
+import { GitBranch, AlertCircle, CheckCircle2 } from 'lucide-react'
+import type { DashboardGitOpsControllers, DashboardGitOpsController } from '../../api/client'
+import { clsx } from 'clsx'
+
+interface GitOpsControllersCardProps {
+  data: DashboardGitOpsControllers
+  onNavigate: () => void
+}
+
+// GitOpsControllersCard surfaces Argo CD / Flux controller pod health
+// on the Home dashboard so an operator can spot "source-controller is
+// CrashLoopBackOff" before drilling into individual GitOps applications
+// and seeing the *symptoms* (apps stuck OutOfSync, sources unfetched).
+//
+// Capability-gated: the parent only renders this card when the backend
+// actually detected controllers in the cluster (DashboardResponse.gitopsControllers
+// is null on non-GitOps clusters). The card itself doesn't have an
+// "empty state" branch — by the time we get here, we have something to show.
+export function GitOpsControllersCard({ data, onNavigate }: GitOpsControllersCardProps) {
+  const headerTone =
+    data.status === 'crashing'
+      ? 'text-red-500'
+      : data.status === 'degraded'
+        ? 'text-amber-400'
+        : 'text-emerald-500'
+
+  const headerLabel =
+    data.status === 'crashing'
+      ? 'Controllers crashing'
+      : data.status === 'degraded'
+        ? 'Controllers degraded'
+        : 'Controllers healthy'
+
+  // Group controllers by tool so the card reads as two sections (Argo +
+  // Flux) when both are installed. Operators with only one tool see a
+  // single-section card without empty placeholders.
+  const argo = data.controllers.filter((c) => c.tool === 'argocd')
+  const flux = data.controllers.filter((c) => c.tool === 'fluxcd')
+
+  return (
+    <button
+      type="button"
+      onClick={onNavigate}
+      className="group h-[260px] rounded-xl bg-theme-surface shadow-theme-sm hover:-translate-y-1 hover:shadow-theme-md transition-all duration-200 text-left animate-fade-in-up"
+    >
+      <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">
+            <GitBranch className={clsx('h-4 w-4', headerTone)} />
+            <span className={clsx('text-xs font-semibold uppercase tracking-wider', headerTone)}>
+              GitOps Controllers
+            </span>
+          </div>
+          <span className={clsx('text-[11px] font-medium', headerTone)}>{headerLabel}</span>
+        </div>
+
+        <div className="flex-1 min-h-0 overflow-y-auto px-5 py-3 flex flex-col gap-3">
+          {argo.length > 0 && <ControllerSection label="Argo CD" controllers={argo} />}
+          {flux.length > 0 && <ControllerSection label="Flux CD" controllers={flux} />}
+        </div>
+      </div>
+    </button>
+  )
+}
+
+function ControllerSection({ label, controllers }: { label: string; controllers: DashboardGitOpsController[] }) {
+  return (
+    <div>
+      <div className="mb-1 text-[10px] font-medium uppercase tracking-wide text-theme-text-tertiary">{label}</div>
+      <div className="flex flex-col gap-1">
+        {controllers.map((c) => (
+          <ControllerRow key={`${c.tool}-${c.name}`} c={c} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function ControllerRow({ c }: { c: DashboardGitOpsController }) {
+  // Per-row tone matches the per-controller status. We don't reuse
+  // mapHealthToTone because the controller status vocabulary
+  // (healthy/degraded/crashing/pending) is different from resource
+  // health (Healthy/Degraded/Missing/etc). Mapping inline keeps the
+  // intent obvious.
+  const tone =
+    c.status === 'crashing'
+      ? 'text-red-500'
+      : c.status === 'degraded' || c.status === 'pending'
+        ? 'text-amber-400'
+        : 'text-emerald-500'
+  const Icon = c.status === 'crashing' ? AlertCircle : c.status === 'degraded' || c.status === 'pending' ? AlertCircle : CheckCircle2
+  return (
+    <div className="flex items-center justify-between gap-2 text-[12px]">
+      <div className="flex min-w-0 items-center gap-1.5">
+        <Icon className={clsx('h-3 w-3 shrink-0', tone)} />
+        <span className="truncate text-theme-text-primary">{c.name}</span>
+      </div>
+      <div className="flex shrink-0 items-center gap-1.5 text-[11px] text-theme-text-secondary">
+        <span>
+          {c.ready}/{c.total} ready
+        </span>
+        {c.crashReason && (
+          <span className={clsx('rounded border px-1 py-px text-[10px] font-medium', 'border-red-500/40 bg-red-500/10 text-red-400')}>
+            {c.crashReason}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/home/HelmSummary.tsx

@@ -88,11 +88,13 @@ export function HelmSummary({ data, onNavigate }: HelmSummaryProps) {
             <span className="text-xs font-medium text-theme-text-secondary">
               {data.errorCode === 'unconfigured' ? 'Helm not configured' : 'Helm unavailable'}
             </span>
-            <span className="text-[11px] mt-1 text-center px-2 truncate max-w-full" title={data.error}>
+            <Tooltip content={data.error} wrapperClassName="!block mt-1 min-w-0 text-center">
+            <span className="text-[11px] text-center px-2 truncate max-w-full">
               {data.errorCode === 'unconfigured'
                 ? 'Set rbac.helm=true in the Radar Helm chart values.'
                 : data.error}
             </span>
+            </Tooltip>
           </div>
         ) : !data.releases || data.releases.length === 0 ? (
           <div className="flex items-center justify-center h-full py-4 text-xs text-theme-text-tertiary">