@skyhook-io/radar-app 0.2.2 → 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,
@@ -23,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 {
@@ -52,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"
@@ -113,12 +117,14 @@ 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
 
@@ -217,24 +223,24 @@ export function ClusterHealthCard({
                 its top bar; rendering it again here is redundant and
                 makes the card feel like a label rather than content. */}
             {!isCloud && (
-              <h2
-                className="text-xl font-semibold text-theme-text-primary truncate mb-1.5 leading-tight"
-                // In-cluster mode's cluster.name is the literal "in-cluster"
-                // sentinel, which would leak via the browser hover tooltip
-                // even though the visible text falls back to the platform
-                // label. Drop the title attribute entirely in that case;
-                // local mode keeps it so users can hover to see the full
-                // kubeconfig context path.
-                title={isInCluster ? undefined : cluster.name}
-              >
+              // 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>
@@ -245,14 +251,14 @@ export function ClusterHealthCard({
                   (in-cluster has no meaningful context name, cloud
                   shell already renders the canonical name). */}
               {cluster.name && cluster.name !== headlineName && deployment.mode === 'local' && (
-                <span
-                  className="font-mono text-[10px] text-theme-text-disabled break-all leading-snug pt-0.5"
-                  title={cluster.name}
-                >
+                <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={
@@ -288,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>
@@ -389,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)}
@@ -409,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)}
@@ -423,7 +435,7 @@ export function ClusterHealthCard({
                   />
                 </div>
               )}
-              {!metrics?.cpu && !metrics?.memory && (
+              {!metricsServerAvailable && (
                 <MetricsUnavailableHint platform={cluster.platform} metricsServerAvailable={metricsServerAvailable} />
               )}
             </div>
@@ -437,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">