@skyhook-io/radar-app 1.9.1 → 1.9.2

package/src/components/home/CapacityCard.tsx

@@ -0,0 +1,125 @@
+import { Layers3 } from 'lucide-react'
+import { clsx } from 'clsx'
+import { useCapacityOverview } from '../../api/client'
+import { useCapabilitiesContext } from '../../contexts/CapabilitiesContext'
+import { coverageIsLowerBound, humanizeCode } from '../capacity/shared'
+
+// CapacityCard surfaces the cluster's capacity posture on the Home dashboard
+// so morning triage reaches the Capacity view without knowing it exists. It
+// renders whenever the cluster has a capacity story: Karpenter available, a
+// Karpenter the caller is denied (softened rows, honest header — the denied
+// Overview shape carries real node/pod truth), or detected managers/groups on
+// a Karpenter-less cluster. Bare clusters with no story keep a quiet Home.
+// Numbers the backend omitted (RBAC-denied / unobserved) render as "—",
+// never zero.
+export function CapacityCard({ onNavigate }: { onNavigate: () => void }) {
+  const karpenterState = useCapabilitiesContext().karpenter?.state
+  const mayHaveStory =
+    karpenterState === 'available' || karpenterState === 'denied' || karpenterState === 'not_detected'
+  const { data } = useCapacityOverview({ enabled: mayHaveStory })
+  if (!mayHaveStory || !data) return null
+  const karpenterDenied = data.state === 'denied'
+  const karpenterless = data.state === 'not_detected'
+  if (!karpenterDenied && !karpenterless && data.state !== 'available') return null
+  if (karpenterless && (data.summary.managers?.length ?? 0) === 0 && data.groups.length === 0)
+    return null
+
+  const actions = data.summary.actions ?? []
+  const worst = actions.find((a) => a.highestSeverity === 'critical') ?? actions.find((a) => a.highestSeverity === 'warning')
+  // A denied Karpenter must not read as healthy: "no signals" would be a
+  // claim about a fleet this identity cannot see.
+  const headerTone = karpenterDenied
+    ? 'text-theme-text-tertiary'
+    : worst
+      ? worst.highestSeverity === 'critical'
+        ? 'text-red-500'
+        : 'text-amber-400'
+      : 'text-emerald-500'
+  const headerLabel = karpenterDenied
+    ? 'Karpenter view unavailable'
+    : worst
+      ? humanizeCode(worst.code)
+      : 'No active signals'
+
+  // Namespace-scoped pod coverage hides pending pods this identity cannot see,
+  // so the count is a floor — it must not read as the cluster total.
+  const pendingIsLowerBound = coverageIsLowerBound(data.coverage.pods)
+  const pendingStat = {
+    label: 'Pending pods',
+    value: absentAsDash(data.summary.pendingPodCount, pendingIsLowerBound ? '≥' : ''),
+  }
+  const stats: { label: string; value: string }[] = karpenterless
+    ? [
+        { label: 'Node groups', value: `${data.groups.length}` },
+        pendingStat,
+        { label: 'Managers', value: `${data.summary.managers?.length ?? 0}` },
+        { label: 'Nodes', value: absentAsDash(data.summary.nodeCount) },
+      ]
+    : [
+        { label: 'NodePools', value: absentAsDash(data.summary.poolCount) },
+        pendingStat,
+        { label: 'NodeClaims', value: absentAsDash(data.summary.claimCount) },
+        { label: 'Nodes', value: absentAsDash(data.summary.nodeCount) },
+      ]
+
+  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">
+            <Layers3 className={clsx('h-4 w-4', headerTone)} />
+            <span className={clsx('text-xs font-semibold uppercase tracking-wider', headerTone)}>
+              Capacity
+            </span>
+          </div>
+          <span className={clsx('max-w-[55%] truncate text-[11px] font-medium', headerTone)}>{headerLabel}</span>
+        </div>
+
+        <div className="flex-1 min-h-0 px-5 py-3">
+          <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+            {stats.map((stat) => (
+              <div key={stat.label}>
+                <div className="text-lg font-semibold tabular-nums text-theme-text-primary">{stat.value}</div>
+                <div className="text-[11px] text-theme-text-tertiary">{stat.label}</div>
+              </div>
+            ))}
+          </div>
+          {actions.length > 0 && (
+            <div className="mt-3 space-y-1">
+              {actions.slice(0, 2).map((action) => (
+                <div key={action.code} className="flex items-center gap-1.5 text-[11px] text-theme-text-secondary">
+                  <span
+                    className={clsx(
+                      'h-1.5 w-1.5 shrink-0 rounded-full',
+                      action.highestSeverity === 'critical'
+                        ? 'bg-red-500'
+                        : action.highestSeverity === 'warning'
+                          ? 'bg-amber-400'
+                          : 'bg-sky-400',
+                    )}
+                  />
+                  <span className="truncate">
+                    {humanizeCode(action.code)}
+                    {action.count > 1 ? ` (${action.count})` : ''}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="px-5 py-2.5 border-t border-theme-border/50 text-[11px] text-theme-text-tertiary group-hover:text-theme-text-secondary transition-colors">
+          Open Capacity →
+        </div>
+      </div>
+    </button>
+  )
+}
+
+function absentAsDash(value: number | undefined, prefix = ''): string {
+  return value === undefined ? '—' : `${prefix}${value}`
+}

package/src/components/home/HomeView.tsx

@@ -11,6 +11,8 @@ import { CertificateHealthCard } from './CertificateHealthCard'
 import { NetworkPolicyCoverageCard } from './NetworkPolicyCoverageCard'
 import { CostCard } from './CostCard'
 import { GitOpsControllersCard } from './GitOpsControllersCard'
+import { CapacityCard } from './CapacityCard'
+import { useCapabilitiesContext } from '../../contexts/CapabilitiesContext'
 import { Tooltip } from '../ui/Tooltip'
 import {
   AuditCard,
@@ -45,6 +47,13 @@ interface HomeViewProps {
 }
 
 export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNavigateToView, onNavigateToResourceKind, onNavigateToResource, onNavigateToCerts }: HomeViewProps) {
+  // The card itself decides whether the cluster has a capacity story
+  // (available, softened-denied, or karpenterless-with-managers/groups) and
+  // returns null otherwise — the outer gate only excludes states with nothing
+  // to fetch against.
+  const karpenterState = useCapabilitiesContext().karpenter?.state
+  const capacityCardPossible =
+    karpenterState === 'available' || karpenterState === 'denied' || karpenterState === 'not_detected'
   const { data, isLoading, error, dataUpdatedAt, refetch } = useDashboard(namespaces)
   const { connection } = useConnection()
   const { data: issuesData, isLoading: issuesLoading, isFetching: issuesFetching, error: issuesError } = useIssues(namespaces)
@@ -175,7 +184,7 @@ export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNav
             {/* Posture band — same flex-grow wrap so any subset of compliance cards
                 fills its row instead of stranding the last one (the old 3-col grid
                 left Cluster Audit alone with two empty cells beside it). */}
-            {(data.certificateHealth || data.networkPolicyCoverage || data.audit || data.gitopsControllers) && (
+            {(data.certificateHealth || data.networkPolicyCoverage || data.audit || data.gitopsControllers || capacityCardPossible) && (
               <div className="flex flex-wrap gap-6">
                 {data.certificateHealth && (
                   <BandItem>
@@ -201,6 +210,11 @@ export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNav
                     />
                   </BandItem>
                 )}
+                {capacityCardPossible && (
+                  <BandItem>
+                    <CapacityCard onNavigate={() => onNavigateToView('capacity')} />
+                  </BandItem>
+                )}
                 {data.audit && (
                   <BandItem>
                     <AuditCard

package/src/components/issues/IssuesPane.test.ts

@@ -0,0 +1,142 @@
+import { describe, expect, it } from "vitest";
+import type { Issue } from "@skyhook-io/k8s-ui";
+import { capacityHrefForIssue } from "./IssuesPane";
+
+function issue(partial: Partial<Issue>): Issue {
+  return {
+    id: "1",
+    severity: "critical",
+    source: "problem",
+    category: "x",
+    category_group: "x",
+    grouping_scope: "x",
+    kind: "Pod",
+    name: "p",
+    reason: "r",
+    ...partial,
+  } as Issue;
+}
+
+describe("capacityHrefForIssue", () => {
+  it("returns null when Karpenter is not detected", () => {
+    expect(capacityHrefForIssue(issue({ source: "scheduling" }), false)).toBeNull();
+    expect(
+      capacityHrefForIssue(
+        issue({ kind: "NodePool", group: "karpenter.sh", name: "core" }),
+        false),
+    ).toBeNull();
+  });
+
+  it("links a backend-flagged capacity-relevant pod to the Demand queue", () => {
+    expect(
+      capacityHrefForIssue(
+        issue({ source: "scheduling", capacity_relevant: true }),
+        true),
+    ).toBe("/capacity/demand");
+  });
+
+  it("preserves namespace scope on the Demand link", () => {
+    expect(
+      capacityHrefForIssue(
+        issue({
+          source: "scheduling",
+          capacity_relevant: true,
+          namespace: "payments",
+          owner: { kind: "Deployment", name: "api" },
+        }),
+        true),
+    ).toBe(`/capacity/demand?owner=${encodeURIComponent("payments/Deployment/api")}`);
+  });
+
+  it("does NOT link a scheduling failure the backend did not flag", () => {
+    // Generic unschedulable (insufficient cpu, node-pinned, zonal, non-Karpenter
+    // node group): the backend leaves capacity_relevant unset → no link, even in
+    // a Karpenter cluster. No message parsing is involved.
+    expect(
+      capacityHrefForIssue(
+        issue({
+          source: "scheduling",
+          message: "Unschedulable — Insufficient cpu (0/9 nodes available)",
+        }),
+        true),
+    ).toBeNull();
+    expect(
+      capacityHrefForIssue(
+        issue({ source: "scheduling", capacity_relevant: false }),
+        true),
+    ).toBeNull();
+  });
+
+  it("links a NodePool-subject issue to its pool detail", () => {
+    expect(
+      capacityHrefForIssue(
+        issue({
+          kind: "NodePool",
+          group: "karpenter.sh",
+          name: "core-on-demand",
+          source: "condition",
+        }),
+        true),
+    ).toBe("/capacity/pools/core-on-demand");
+  });
+
+  it("does not link non-Karpenter issues even when Karpenter is present", () => {
+    expect(
+      capacityHrefForIssue(issue({ source: "problem", kind: "Service" }), true),
+    ).toBeNull();
+    // A NodePool from a different API group must not be treated as Karpenter's.
+    expect(
+      capacityHrefForIssue(
+        issue({ kind: "NodePool", group: "example.com", name: "x" }),
+        true),
+    ).toBeNull();
+  });
+});
+
+describe("capacityHrefForIssue subject carry", () => {
+  it("carries the grouped subject (the workload) into a filtered Demand", () => {
+    expect(
+      capacityHrefForIssue(
+        issue({
+          source: "scheduling",
+          capacity_relevant: true,
+          kind: "Deployment",
+          namespace: "shop",
+          name: "web",
+        }),
+        true,
+      ),
+    ).toBe("/capacity/demand?owner=shop%2FDeployment%2Fweb");
+  });
+
+  it("prefers the flat row's owner over its Pod subject", () => {
+    expect(
+      capacityHrefForIssue(
+        issue({
+          source: "scheduling",
+          capacity_relevant: true,
+          kind: "Pod",
+          namespace: "shop",
+          name: "web-abc12",
+          owner: { kind: "Deployment", name: "web" },
+        }),
+        true,
+      ),
+    ).toBe("/capacity/demand?owner=shop%2FDeployment%2Fweb");
+  });
+
+  it("fails closed to the unfiltered link when no complete subject exists", () => {
+    expect(
+      capacityHrefForIssue(
+        issue({
+          source: "scheduling",
+          capacity_relevant: true,
+          kind: "Pod",
+          namespace: "shop",
+          name: "orphan-abc12",
+        }),
+        true,
+      ),
+    ).toBe("/capacity/demand");
+  });
+});

package/src/components/issues/IssuesPane.tsx

@@ -1,7 +1,10 @@
-import { useMemo, useState } from 'react'
-import { useIssues } from '../../api/client'
-import { useConnection } from '../../context/ConnectionContext'
-import type { SelectedResource } from '../../types'
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useIssues } from "../../api/client";
+import { useAPIResources, karpenterCapacityAvailable } from "../../api/apiResources";
+import { useCapabilitiesContext } from "../../contexts/CapabilitiesContext";
+import { useConnection } from "../../context/ConnectionContext";
+import type { SelectedResource } from "../../types";
 import {
   IssuesView,
   PaneLoader,
@@ -10,18 +13,73 @@ import {
   FreshnessControl,
   ISSUE_SEVERITIES,
   ISSUE_SEVERITY_LABEL,
+  type Issue,
   type IssueResourceRef,
   type IssueSeverity,
   type SummaryTone,
-} from '@skyhook-io/k8s-ui'
-import { AlertTriangle } from 'lucide-react'
-import { IssueDiagnoseButton } from '../diagnose/LocalDiagnoseAction'
+} 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' }
+// A capacity-relevant issue links to its Karpenter diagnosis. Karpenter is
+// always single-cluster (unlike Argo hub-and-spoke), so the issue and the
+// Capacity view are guaranteed to be the same cluster — the deep link is
+// unambiguous.
+//
+// Fail closed: return null unless the issue is *definitely* Karpenter's, so the
+// link can't mislead. Only two signals qualify — (1) the subject IS a Karpenter
+// NodePool, or (2) the backend has flagged an unschedulable pod as requiring a
+// Karpenter NodePool (issue.capacity_relevant — a structural pod-spec check
+// server-side, not message parsing). A generic scheduling failure (insufficient
+// cpu, node-pinned, zonal PVC, a non-Karpenter managed node group) is NOT
+// Karpenter's to solve and gets no link, even in a Karpenter cluster. Clusters
+// without Karpenter never reach the signal checks (hasKarpenter is false).
+export function capacityHrefForIssue(
+  issue: Issue,
+  hasKarpenter: boolean,
+): string | null {
+  if (!hasKarpenter) return null;
+  // (1) A NodePool-subject issue (not ready, limit pressure, …) → its pool detail.
+  if (issue.kind === "NodePool" && issue.group === "karpenter.sh") {
+    return `/capacity/pools/${encodeURIComponent(issue.name)}`;
+  }
+  // (2) A pod the backend flagged as requiring a Karpenter NodePool → the Demand
+  // queue, which groups pending pods by scheduling signature and shows which
+  // pools can (or can't) take them. The link carries its subject (?owner=) so
+  // Demand lands filtered server-side: grouped scheduling issues have the
+  // workload AS their subject (grouping promotes the owner); flat pod rows
+  // carry issue.owner. Fail closed to the unfiltered link when no complete
+  // subject exists. No STATE filter on purpose — the issue doesn't map cleanly
+  // to a single demand state (blocked vs awaiting capacity), and a state filter
+  // could hide the very group being investigated. Capacity is deliberately
+  // cluster-wide — no namespace view-filter forwarding.
+  if (issue.capacity_relevant) {
+    const owner =
+      issue.owner?.kind && issue.owner.name
+        ? {
+            kind: issue.owner.kind,
+            namespace: issue.owner.namespace ?? issue.namespace,
+            name: issue.owner.name,
+          }
+        : issue.kind && issue.kind !== "Pod" && issue.name
+          ? { kind: issue.kind, namespace: issue.namespace, name: issue.name }
+          : undefined;
+    if (owner?.namespace) {
+      return `/capacity/demand?owner=${encodeURIComponent(`${owner.namespace}/${owner.kind}/${owner.name}`)}`;
+    }
+    return "/capacity/demand";
+  }
+  return null;
+}
+
+const SEVERITY_TONE: Record<IssueSeverity, SummaryTone> = {
+  critical: "error",
+  warning: "warning",
+};
 
 interface IssuesPaneProps {
-  namespaces: string[]
-  onNavigateToResource: (resource: SelectedResource) => void
+  namespaces: string[];
+  onNavigateToResource: (resource: SelectedResource) => void;
 }
 
 // The per-cluster Issues surface. Renders the same shared triage queue
@@ -32,31 +90,51 @@ interface IssuesPaneProps {
 // (IssuesView is a pure list); single-cluster gets a light severity filter via
 // the header status tiles (clickable → filter), matching the Applications /
 // GitOps header-tile pattern rather than Hub's fleet facet sidebar.
-export function IssuesPane({ namespaces, onNavigateToResource }: IssuesPaneProps) {
-  const { data, isLoading, error, dataUpdatedAt, refetch } = useIssues(namespaces)
-  const { connection } = useConnection()
-  const [severityFilter, setSeverityFilter] = useState<Set<IssueSeverity>>(new Set())
+export function IssuesPane({
+  namespaces,
+  onNavigateToResource,
+}: IssuesPaneProps) {
+  const { data, isLoading, error, dataUpdatedAt, refetch } =
+    useIssues(namespaces);
+  const { connection } = useConnection();
+  const navigate = useNavigate();
+  const apiResources = useAPIResources();
+  const hasKarpenter = karpenterCapacityAvailable(
+    useCapabilitiesContext().karpenter,
+    apiResources.data,
+  );
+  const [severityFilter, setSeverityFilter] = useState<Set<IssueSeverity>>(
+    new Set(),
+  );
 
-  const allIssues = useMemo(() => data?.issues ?? [], [data])
+  const allIssues = useMemo(() => data?.issues ?? [], [data]);
   const totals = useMemo(() => {
-    const t: Record<IssueSeverity, number> = { critical: 0, warning: 0 }
-    for (const i of allIssues) t[i.severity] = (t[i.severity] ?? 0) + 1
-    return t
-  }, [allIssues])
-  const shown = severityFilter.size ? allIssues.filter((i) => severityFilter.has(i.severity)) : allIssues
+    const t: Record<IssueSeverity, number> = { critical: 0, warning: 0 };
+    for (const i of allIssues) t[i.severity] = (t[i.severity] ?? 0) + 1;
+    return t;
+  }, [allIssues]);
+  const shown = severityFilter.size
+    ? allIssues.filter((i) => severityFilter.has(i.severity))
+    : allIssues;
 
   const toggleSeverity = (s: IssueSeverity) =>
     setSeverityFilter((prev) => {
-      const next = new Set(prev)
-      if (next.has(s)) next.delete(s); else next.add(s)
-      return next
-    })
+      const next = new Set(prev);
+      if (next.has(s)) next.delete(s);
+      else next.add(s);
+      return next;
+    });
 
   const onResourceClick = (ref: IssueResourceRef) =>
-    onNavigateToResource({ kind: ref.kind, namespace: ref.namespace ?? '', name: ref.name, group: ref.group ?? '' })
+    onNavigateToResource({
+      kind: ref.kind,
+      namespace: ref.namespace ?? "",
+      name: ref.name,
+      group: ref.group ?? "",
+    });
 
   if (isLoading) {
-    return <PaneLoader label="Loading issues…" className="flex-1" />
+    return <PaneLoader label="Loading issues…" className="flex-1" />;
   }
 
   if (error) {
@@ -64,7 +142,7 @@ export function IssuesPane({ namespaces, onNavigateToResource }: IssuesPaneProps
       <div className="flex-1 flex items-center justify-center text-theme-text-secondary">
         <p>Failed to load issues</p>
       </div>
-    )
+    );
   }
 
   return (
@@ -83,7 +161,10 @@ export function IssuesPane({ namespaces, onNavigateToResource }: IssuesPaneProps
             />
             {allIssues.length > 0 && (
               <>
-                <SummaryTile label={allIssues.length === 1 ? 'issue' : 'issues'} value={allIssues.length} />
+                <SummaryTile
+                  label={allIssues.length === 1 ? "issue" : "issues"}
+                  value={allIssues.length}
+                />
                 {ISSUE_SEVERITIES.map((s) =>
                   totals[s] > 0 || severityFilter.has(s) ? (
                     <SummaryTile
@@ -108,17 +189,22 @@ export function IssuesPane({ namespaces, onNavigateToResource }: IssuesPaneProps
       {data?.visibility?.impact && (
         <div className="flex items-start gap-2 rounded-lg border border-theme-border bg-theme-elevated px-3 py-2 text-xs text-theme-text-secondary">
           <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
-          <span>Limited visibility — {data.visibility.impact} Results may be incomplete.</span>
+          <span>
+            Limited visibility — {data.visibility.impact} Results may be
+            incomplete.
+          </span>
         </div>
       )}
 
       {/* Truncation honesty: when more issues matched than were returned, say
           so — don't present a capped list as the complete picture. */}
-      {data?.total_matched != null && data.total_matched > (data.issues?.length ?? 0) && (
-        <p className="text-xs text-theme-text-tertiary">
-          Showing {data.issues?.length ?? 0} of {data.total_matched} issues (capped) — narrow by namespace to see the rest.
-        </p>
-      )}
+      {data?.total_matched != null &&
+        data.total_matched > (data.issues?.length ?? 0) && (
+          <p className="text-xs text-theme-text-tertiary">
+            Showing {data.issues?.length ?? 0} of {data.total_matched} issues
+            (capped) — narrow by namespace to see the rest.
+          </p>
+        )}
 
       {/* Filtered-empty is NOT the healthy empty state: when a severity filter
           hides every row but issues still exist, say "no matches" rather than
@@ -141,11 +227,29 @@ export function IssuesPane({ namespaces, onNavigateToResource }: IssuesPaneProps
           issues={shown}
           anyData={!!data}
           onResourceClick={onResourceClick}
-          renderActions={({ issue }) => (
-            <IssueDiagnoseButton kind={issue.kind} namespace={issue.namespace ?? ''} name={issue.name} />
-          )}
+          renderActions={({ issue }) => {
+            const capacityHref = capacityHrefForIssue(issue, hasKarpenter);
+            return (
+              <div className="flex items-center gap-2">
+                {capacityHref && (
+                  <button
+                    type="button"
+                    onClick={() => navigate(capacityHref)}
+                    className="rounded-md border border-theme-border px-2 py-1 text-xs font-medium text-accent-text transition-colors hover:bg-theme-hover"
+                  >
+                    View in Capacity →
+                  </button>
+                )}
+                <IssueDiagnoseButton
+                  kind={issue.kind}
+                  namespace={issue.namespace ?? ""}
+                  name={issue.name}
+                />
+              </div>
+            );
+          }}
         />
       )}
     </div>
-  )
+  );
 }

package/src/components/nav/PrimaryNavRail.test.tsx

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { renderToString } from "react-dom/server";
+import { PrimaryNavRail } from "./PrimaryNavRail";
+
+function renderRail() {
+  return renderToString(
+    <PrimaryNavRail
+      activeView="home"
+      onNavigate={() => {}}
+      pinned
+      onTogglePinned={() => {}}
+    />,
+  );
+}
+
+describe("PrimaryNavRail", () => {
+  it("always surfaces Capacity — the view reads cluster capacity across every node manager, not just Karpenter", () => {
+    expect(renderRail()).toContain("Capacity");
+  });
+});