@skyhook-io/radar-app 0.1.1

package/src/components/home/CostCard.tsx

@@ -0,0 +1,112 @@
+import type { OpenCostSummary } from '../../api/client'
+import { useOpenCostSummary } from '../../api/client'
+import { DollarSign } from 'lucide-react'
+
+export function CostCard({ onNavigate }: { onNavigate?: () => void }) {
+  const { data } = useOpenCostSummary()
+
+  // Only show when OpenCost data is actually available — no placeholder card
+  if (!data || !data.available) {
+    return null
+  }
+
+  return <CostCardContent data={data} onNavigate={onNavigate} />
+}
+
+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)
+
+  // Find the max cost for bar scaling
+  const maxCost = topNamespaces.length > 0 ? topNamespaces[0].hourlyCost : 0
+
+  return (
+    <div
+      onClick={onNavigate}
+      className={`h-[260px] rounded-xl bg-theme-surface shadow-theme-sm text-left animate-fade-in-up ${onNavigate ? 'cursor-pointer hover:-translate-y-1 hover:shadow-theme-md transition-all duration-200' : ''}`}
+    >
+      <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>
+            {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">
+                {namespaces.length} ns
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="flex-1 min-h-0 flex flex-col px-4 py-3">
+          {/* Hero cost numbers */}
+          <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)}
+              </span>
+              <span className="text-xs text-theme-text-tertiary">/hr</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>
+          </div>
+
+          {/* Top namespaces */}
+          <div className="flex-1 min-h-0 space-y-1.5">
+            {topNamespaces.map((ns) => {
+              const pct = maxCost > 0 ? (ns.hourlyCost / maxCost) * 100 : 0
+              return (
+                <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>
+                  <span className="text-[10px] text-theme-text-tertiary tabular-nums w-14 text-right shrink-0">
+                    {formatCost(ns.hourlyCost)}/h
+                  </span>
+                </div>
+              )
+            })}
+            {namespaces.length > 5 && (
+              <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
+          </span>
+          <span className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-indigo-500">
+            OpenCost
+          </span>
+        </div>
+      </div>
+    </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/HealthRing.tsx

@@ -0,0 +1 @@
+export { HealthRing } from '@skyhook-io/k8s-ui/components/ui/HealthRing'

package/src/components/home/HelmSummary.tsx

@@ -0,0 +1,129 @@
+import type { DashboardHelmSummary } from '../../api/client'
+import { Package, ArrowRight, Shield } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Tooltip } from '../ui/Tooltip'
+
+interface HelmSummaryProps {
+  data?: DashboardHelmSummary
+  onNavigate: () => void
+}
+
+function getStatusBadgeClass(status: string): string {
+  switch (status.toLowerCase()) {
+    case 'deployed':
+    case 'succeeded':
+      return 'status-healthy'
+    case 'failed':
+      return 'status-unhealthy'
+    case 'pending-install':
+    case 'pending-upgrade':
+    case 'pending-rollback':
+      return 'status-degraded'
+    case 'superseded':
+    case 'uninstalled':
+      return 'status-unknown'
+    default:
+      return 'status-unknown'
+  }
+}
+
+function getHealthDot(health?: string): string {
+  switch (health) {
+    case 'healthy':
+      return 'bg-green-500'
+    case 'degraded':
+      return 'bg-yellow-500'
+    case 'unhealthy':
+      return 'bg-red-500'
+    default:
+      return 'bg-theme-text-tertiary'
+  }
+}
+
+export function HelmSummary({ data, onNavigate }: HelmSummaryProps) {
+  return (
+    <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"
+    >
+      <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">
+          <Package className="w-4 h-4 text-theme-text-tertiary" />
+          <span className="text-xs font-semibold uppercase tracking-wider text-theme-text-secondary">Helm Releases</span>
+          {data && data.total > 0 && (
+            <span className="badge-sm bg-theme-elevated text-theme-text-secondary">
+              {data.total}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-hidden">
+        {!data ? (
+          <div className="divide-y divide-theme-border">
+            {[...Array(3)].map((_, i) => (
+              <div key={i} className="flex items-center justify-between px-3 py-1.5">
+                <div className="flex items-center gap-2 min-w-0">
+                  <span className="w-1.5 h-1.5 rounded-full shrink-0 bg-theme-text-tertiary/30 animate-pulse" />
+                  <span className="h-3 w-24 rounded bg-theme-text-tertiary/20 animate-pulse" />
+                  <span className="h-3 w-14 rounded bg-theme-text-tertiary/10 animate-pulse" />
+                </div>
+                <div className="flex items-center gap-1.5 ml-2">
+                  <span className="h-3 w-20 rounded bg-theme-text-tertiary/10 animate-pulse hidden sm:inline-block" />
+                  <span className="h-4 w-14 rounded bg-theme-text-tertiary/15 animate-pulse" />
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : data.restricted ? (
+          <div className="flex flex-col items-center justify-center h-full py-4 text-theme-text-tertiary">
+            <Shield className="w-8 h-8 text-amber-400 mb-2" />
+            <span className="text-xs font-medium text-theme-text-secondary">Access Restricted</span>
+            <span className="text-[11px] mt-1">Insufficient permissions to list Helm releases</span>
+          </div>
+        ) : !data.releases || data.releases.length === 0 ? (
+          <div className="flex items-center justify-center h-full py-4 text-xs text-theme-text-tertiary">
+            No Helm releases found
+          </div>
+        ) : (
+          <div className="divide-y divide-theme-border">
+            {data.releases.map((release) => (
+              <div
+                key={`${release.namespace}/${release.name}`}
+                className="flex items-center justify-between px-3 py-1.5 overflow-hidden"
+              >
+                <div className="flex items-center gap-2 min-w-0">
+                  <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', getHealthDot(release.resourceHealth))} />
+                  <span className="text-xs text-theme-text-primary truncate">{release.name}</span>
+                  <span className="text-[10px] text-theme-text-tertiary truncate">{release.namespace}</span>
+                </div>
+                <div className="flex items-center gap-1.5 ml-2 min-w-0">
+                  <Tooltip content={`${release.chart} ${release.chartVersion}`} delay={100}>
+                    <span className="text-[10px] text-theme-text-tertiary hidden sm:inline truncate max-w-[150px]">
+                      {release.chart} {release.chartVersion}
+                    </span>
+                  </Tooltip>
+                  <span className={clsx('badge-sm shrink-0', getStatusBadgeClass(release.status))}>
+                    {release.status}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </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 && data.releases && data.total > data.releases.length ? `+${data.total - data.releases.length} more` : ''}
+        </span>
+        <span className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-theme-text-secondary group-hover:text-theme-text-primary transition-colors">
+          Open Helm
+          <ArrowRight className="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5" />
+        </span>
+      </div>
+      </div>
+    </button>
+  )
+}

package/src/components/home/HomeView.tsx

@@ -0,0 +1,224 @@
+import { useDashboard, useDashboardCRDs, useDashboardHelm } from '../../api/client'
+import type { DashboardResponse } from '../../api/client'
+import type { ExtendedMainView, Topology, SelectedResource } from '../../types'
+import { kindToPlural } from '../../utils/navigation'
+import { TopologyPreview } from './TopologyPreview'
+import { HelmSummary } from './HelmSummary'
+import { ActivitySummary } from './ActivitySummary'
+import { TrafficSummary } from './TrafficSummary'
+import { CertificateHealthCard } from './CertificateHealthCard'
+import { NetworkPolicyCoverageCard } from './NetworkPolicyCoverageCard'
+import { CostCard } from './CostCard'
+import { AuditCard } from '@skyhook-io/k8s-ui'
+import { ClusterHealthCard } from './ClusterHealthCard'
+import { AlertTriangle, Loader2, Shield } from 'lucide-react'
+import { clsx } from 'clsx'
+
+interface HomeViewProps {
+  namespaces: string[]
+  topology: Topology | null
+  onNavigateToView: (view: ExtendedMainView, params?: Record<string, string>) => void
+  onNavigateToResourceKind: (kind: string, group?: string, filters?: Record<string, string[]>) => void
+  onNavigateToResource: (resource: SelectedResource) => void
+}
+
+export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToResourceKind, onNavigateToResource }: HomeViewProps) {
+  const { data, isLoading, error } = useDashboard(namespaces)
+  // CRDs and Helm load lazily after main dashboard to keep initial load fast
+  const { data: crdsData } = useDashboardCRDs(namespaces)
+  const { data: helmData } = useDashboardHelm(namespaces)
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <div className="flex flex-col items-center gap-3">
+          <Loader2 className="w-6 h-6 animate-spin text-theme-text-tertiary" />
+          <span className="text-sm text-theme-text-tertiary">Loading dashboard...</span>
+        </div>
+      </div>
+    )
+  }
+
+  if (error || !data) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-theme-text-secondary">
+        <p>Failed to load dashboard data</p>
+      </div>
+    )
+  }
+
+  if (data.accessRestricted) {
+    return (
+      <div className="flex-1 flex items-center justify-center bg-theme-base">
+        <div className="flex flex-col items-center gap-3 max-w-md text-center">
+          <div className="w-12 h-12 rounded-full bg-amber-500/10 flex items-center justify-center">
+            <Shield className="w-6 h-6 text-amber-500" />
+          </div>
+          <p className="text-lg font-medium text-theme-text-primary">No Namespace Access</p>
+          <p className="text-sm text-theme-text-secondary">
+            Your account does not have access to any namespaces in this cluster. Contact your administrator to add a Kubernetes RoleBinding or ClusterRoleBinding for your user.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  const hasProblems = data.problems && data.problems.length > 0
+
+  return (
+    <div className="flex-1 overflow-y-auto">
+      <div className="max-w-[1600px] mx-auto px-6 py-6 space-y-6">
+        {/* Row 1: Cluster Health Card (combined health + resource counts) */}
+        <ClusterHealthCard
+          health={data.health}
+          counts={data.resourceCounts}
+          cluster={data.cluster}
+          metrics={data.metrics}
+          metricsServerAvailable={data.metricsServerAvailable}
+          topCRDs={crdsData?.topCRDs}
+          problems={data.problems ?? []}
+          nodeVersionSkew={data.nodeVersionSkew}
+          onNavigateToKind={onNavigateToResourceKind}
+          onNavigateToView={() => onNavigateToView('resources')}
+          onWarningEventsClick={() => onNavigateToView('timeline', { view: 'list', filter: 'warnings', time: 'all' })}
+          onUnhealthyClick={() => onNavigateToView('timeline', { view: 'list', filter: 'unhealthy', time: 'all' })}
+        />
+
+        {/* Row 2: Main content columns — teasers left, problems right (if any) */}
+        <div className={clsx(
+          'grid gap-6',
+          hasProblems ? 'grid-cols-1 lg:grid-cols-[1fr_420px]' : 'grid-cols-1'
+        )}>
+          {/* Left column: teaser cards */}
+          <div className="flex flex-col gap-6 auto-rows-min">
+            {/* Primary cards — 2-col grid */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+              <TopologyPreview
+                topology={topology}
+                summary={data.topologySummary}
+                onNavigate={() => onNavigateToView('topology')}
+              />
+              <HelmSummary
+                data={helmData}
+                onNavigate={() => onNavigateToView('helm')}
+              />
+              <ActivitySummary
+                namespaces={namespaces}
+                topology={topology}
+                onNavigate={() => onNavigateToView('timeline')}
+              />
+              <TrafficSummary
+                data={data.trafficSummary}
+                onNavigate={() => onNavigateToView('traffic')}
+              />
+              <CostCard onNavigate={() => onNavigateToView('cost')} />
+            </div>
+
+            {/* Health & compliance cards — 3-col when enough cards, 2-col fallback */}
+            {(data.certificateHealth || data.networkPolicyCoverage || data.audit) && (() => {
+              const healthCards = [
+                data.certificateHealth && (
+                  <CertificateHealthCard
+                    key="certs"
+                    data={data.certificateHealth}
+                    onNavigate={() => onNavigateToResourceKind('secrets', undefined, { type: ['TLS'] })}
+                  />
+                ),
+                data.networkPolicyCoverage && (
+                  <NetworkPolicyCoverageCard
+                    key="netpol"
+                    data={data.networkPolicyCoverage}
+                    onNavigate={() => onNavigateToResourceKind('networkpolicies', 'networking.k8s.io')}
+                  />
+                ),
+                data.audit && (
+                  <AuditCard
+                    key="audit"
+                    data={data.audit}
+                    onNavigate={() => onNavigateToView('audit')}
+                  />
+                ),
+              ].filter(Boolean)
+
+              return (
+                <div className={clsx(
+                  'grid gap-6',
+                  healthCards.length >= 3 ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3' : 'grid-cols-1 sm:grid-cols-2'
+                )}>
+                  {healthCards}
+                </div>
+              )
+            })()}
+          </div>
+
+          {/* Right column: problems panel */}
+          {hasProblems && (
+            <ProblemsPanel
+              problems={data.problems}
+              onResourceClick={onNavigateToResource}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Problems Panel (right sidebar, scrollable)
+// ============================================================================
+
+interface ProblemsPanelProps {
+  problems: DashboardResponse['problems']
+  onResourceClick: (resource: SelectedResource) => void
+}
+
+
+function ProblemsPanel({ problems, onResourceClick }: ProblemsPanelProps) {
+  return (
+    <div className="rounded-xl bg-theme-surface shadow-theme-sm flex flex-col lg:max-h-[calc(100vh-280px)] lg:sticky lg:top-0">
+      <div className="flex items-center justify-between px-5 py-3 border-b border-theme-border/50 shrink-0">
+        <div className="flex items-center gap-2">
+          <AlertTriangle className="w-4 h-4 text-red-500" />
+          <span className="text-xs font-semibold uppercase tracking-wider text-red-500">Unhealthy Workloads</span>
+        </div>
+        <span className="badge status-unhealthy rounded-full">{problems.length}</span>
+      </div>
+      <div className="overflow-y-auto flex-1 min-h-0">
+        <div className="divide-y divide-theme-border">
+          {problems.map((p, i) => (
+            <button
+              key={`${p.kind}-${p.namespace}-${p.name}-${i}`}
+              className="w-full flex items-center gap-2 px-3 py-1.5 hover:bg-theme-hover transition-colors text-left"
+              onClick={() => onResourceClick({
+                kind: kindToPlural(p.kind),
+                namespace: p.namespace,
+                name: p.name,
+                group: p.group,
+              })}
+            >
+              <span className={clsx(
+                'w-1.5 h-1.5 rounded-full shrink-0',
+                p.severity === 'critical' ? 'bg-red-400' : p.severity === 'high' ? 'bg-orange-400' : 'bg-yellow-400'
+              )} />
+              <div className="min-w-0 flex-1">
+                <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">{p.kind}</span>
+                  <span className="text-xs text-theme-text-primary truncate font-medium">{p.name}</span>
+                  <span className="text-[10px] text-theme-text-tertiary ml-auto shrink-0">{p.duration || p.age}</span>
+                </div>
+                <div className="flex items-center gap-1.5 mt-0.5">
+                  <span className="text-[11px] text-theme-text-secondary truncate">{p.reason}</span>
+                  <span className="text-[10px] text-theme-text-tertiary shrink-0">{p.namespace}</span>
+                </div>
+                {p.message && (
+                  <div className="text-[10px] text-theme-text-tertiary truncate mt-0.5">{p.message}</div>
+                )}
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}