@skyhook-io/k8s-ui 1.7.3 → 1.7.5

package/src/components/checks/checks.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest'
+import { resourceKey, resourceRefKey, checkFindingKey, mapRadarSeverity, SOURCE_RADAR_BUILTIN, type CheckResourceRef } from './types'
+
+describe('resourceKey', () => {
+  // Same kind/ns/name across two API groups must not collide. Mirrors
+  // radar/pkg/audit helpers_test.go's group-aware key.
+  it('disambiguates the same kind/ns/name across API groups', () => {
+    expect(resourceKey('', 'Service', 'prod', 'api')).not.toBe(resourceKey('serving.knative.dev', 'Service', 'prod', 'api'))
+  })
+})
+
+describe('checkFindingKey', () => {
+  const ref = (cluster_id: string): CheckResourceRef => ({ cluster_id, group: 'apps', kind: 'Deployment', namespace: 'prod', name: 'api' })
+
+  // The same resource identity + check on two clusters must produce distinct
+  // keys — even when the clusters' display names collapse to the same label.
+  it('disambiguates identical findings across cluster IDs', () => {
+    const a = checkFindingKey('cl_aaa', SOURCE_RADAR_BUILTIN, resourceRefKey(ref('cl_aaa')), 'run-as-root')
+    const b = checkFindingKey('cl_bbb', SOURCE_RADAR_BUILTIN, resourceRefKey(ref('cl_bbb')), 'run-as-root')
+    expect(a).not.toBe(b)
+  })
+
+  it('disambiguates by the optional detail discriminator', () => {
+    const rk = resourceRefKey(ref('cl_aaa'))
+    const noDetail = checkFindingKey('cl_aaa', SOURCE_RADAR_BUILTIN, rk, 'container-checks')
+    const a = checkFindingKey('cl_aaa', SOURCE_RADAR_BUILTIN, rk, 'container-checks', 'sidecar')
+    const b = checkFindingKey('cl_aaa', SOURCE_RADAR_BUILTIN, rk, 'container-checks', 'app')
+    expect(new Set([noDetail, a, b]).size).toBe(3)
+  })
+})
+
+describe('mapRadarSeverity', () => {
+  it('maps danger→high and warning→medium', () => {
+    expect(mapRadarSeverity('danger')).toBe('high')
+    expect(mapRadarSeverity('warning')).toBe('medium')
+  })
+  it('falls back to medium for an unrecognized severity', () => {
+    expect(mapRadarSeverity('unknown')).toBe('medium')
+  })
+})

package/src/components/checks/index.ts

@@ -0,0 +1,3 @@
+export { ChecksView, type ChecksViewProps } from './ChecksView'
+export * from './types'
+export * from './severity'

package/src/components/checks/severity.ts

@@ -0,0 +1,63 @@
+import type { CheckSeverity } from './types'
+
+// The visual language for the 4-tier Checks severity ladder. Pale-pastel tints
+// with hand-rolled dark variants (no theme token covers these). One hue per
+// tier: red=critical, orange=high, amber=medium, slate=low — read the queue's
+// left rail top-to-bottom and severity is obvious without reading a word.
+//
+// Class strings are literal so each consuming app's Tailwind @source scan emits
+// them.
+
+export const SEVERITY_LABEL: Record<CheckSeverity, string> = {
+  critical: 'Critical',
+  high: 'High',
+  medium: 'Medium',
+  low: 'Low',
+}
+
+// Pill badge — the loud, explicit severity signal on rows + drawer header.
+export const SEVERITY_BADGE_CLASS: Record<CheckSeverity, string> = {
+  critical: 'bg-red-50 text-red-700 ring-1 ring-red-200 dark:bg-red-950/50 dark:text-red-300 dark:ring-red-900',
+  high: 'bg-orange-50 text-orange-700 ring-1 ring-orange-200 dark:bg-orange-950/50 dark:text-orange-300 dark:ring-orange-900',
+  medium: 'bg-amber-50 text-amber-700 ring-1 ring-amber-200 dark:bg-amber-950/50 dark:text-amber-300 dark:ring-amber-900',
+  low: 'bg-slate-100 text-slate-600 ring-1 ring-slate-200 dark:bg-slate-800/60 dark:text-slate-300 dark:ring-slate-700',
+}
+
+// Solid fill — dots + the proportional distribution bar segments.
+export const SEVERITY_FILL_CLASS: Record<CheckSeverity, string> = {
+  critical: 'bg-red-500',
+  high: 'bg-orange-500',
+  medium: 'bg-amber-500',
+  low: 'bg-slate-400',
+}
+
+export const SEVERITY_TEXT_CLASS: Record<CheckSeverity, string> = {
+  critical: 'text-red-600 dark:text-red-400',
+  high: 'text-orange-600 dark:text-orange-400',
+  medium: 'text-amber-600 dark:text-amber-400',
+  low: 'text-slate-500 dark:text-slate-400',
+}
+
+// Left accent rail on a queue row — the scan-down severity cue. Pairs a colored
+// 2px border with a faint severity-tinted background that deepens on hover.
+export const SEVERITY_RAIL_CLASS: Record<CheckSeverity, string> = {
+  critical: 'border-l-red-500 hover:bg-red-50/40 dark:hover:bg-red-950/20',
+  high: 'border-l-orange-500 hover:bg-orange-50/40 dark:hover:bg-orange-950/20',
+  medium: 'border-l-amber-500 hover:bg-amber-50/30 dark:hover:bg-amber-950/15',
+  low: 'border-l-slate-300 dark:border-l-slate-600 hover:bg-theme-hover/40',
+}
+
+// Category accent — a quiet tag (severity is the loud one). Security is the
+// headline beat, so it gets the most distinct hue.
+const CATEGORY_BADGE_CLASS: Record<string, string> = {
+  Security: 'bg-violet-50 text-violet-700 ring-1 ring-violet-200 dark:bg-violet-950/40 dark:text-violet-300 dark:ring-violet-900',
+  Reliability: 'bg-sky-50 text-sky-700 ring-1 ring-sky-200 dark:bg-sky-950/40 dark:text-sky-300 dark:ring-sky-900',
+  Efficiency: 'bg-teal-50 text-teal-700 ring-1 ring-teal-200 dark:bg-teal-950/40 dark:text-teal-300 dark:ring-teal-900',
+}
+
+export function categoryBadgeClass(category: string): string {
+  return (
+    CATEGORY_BADGE_CLASS[category] ??
+    'bg-theme-elevated text-theme-text-secondary ring-1 ring-theme-border'
+  )
+}

package/src/components/checks/types.ts

@@ -0,0 +1,138 @@
+// Shared Checks identity contract + data shapes + severity vocabulary.
+//
+// k8s-ui owns these because the Checks queue presentation (ChecksView) is
+// host-agnostic: Radar Hub feeds it fleet-resolved data, and OSS Radar can feed
+// a single-cluster ("fleet of one") resolve. Hosts map their wire payloads onto
+// these types; the components render against them.
+//
+// Mirrors Radar OSS's resource-key convention (radar/pkg/audit.ResourceKey).
+
+/** Canonical Checks severity ladder — distinct from the raw detector severity
+ *  (danger/warning) so operational criticality and compliance risk stay
+ *  separate axes. */
+export type CheckSeverity = 'critical' | 'high' | 'medium' | 'low';
+
+/** Raw detector severity Radar emits. */
+export type RadarSeverity = 'danger' | 'warning';
+
+/** Ordered worst→least, for rendering severity filters/sorts consistently. */
+export const CHECK_SEVERITIES: CheckSeverity[] = ['critical', 'high', 'medium', 'low'];
+
+/** Worst-first ordering rank for the ladder. */
+export const CHECK_SEVERITY_RANK: Record<CheckSeverity, number> = {
+  critical: 4,
+  high: 3,
+  medium: 2,
+  low: 1,
+};
+
+export function isCheckSeverity(s: string): s is CheckSeverity {
+  return s === 'critical' || s === 'high' || s === 'medium' || s === 'low';
+}
+
+/** mapRadarSeverity maps a raw detector severity to the Checks ladder
+ *  (danger→high, warning→medium). critical/low are only reachable via an org
+ *  severity override; the detector never emits them. */
+export function mapRadarSeverity(raw: RadarSeverity | string): CheckSeverity {
+  switch (raw) {
+    case 'danger':
+      return 'high';
+    case 'warning':
+      return 'medium';
+    default:
+      return 'medium';
+  }
+}
+
+/**
+ * Canonical resource identity. `group` is '' for the core API group;
+ * `namespace` is '' for cluster-scoped resources. Both are always present.
+ * `cluster_id` scopes the ref to its source cluster — the disambiguator when
+ * two clusters' display names collapse to the same label.
+ */
+export interface CheckResourceRef {
+  cluster_id: string;
+  group: string;
+  kind: string;
+  namespace: string;
+  name: string;
+}
+
+/** Built-in (Radar-detected) finding source. The only V1 source. */
+export const SOURCE_RADAR_BUILTIN = 'radar_builtin';
+
+/**
+ * resourceKey mirrors Go `audit.ResourceKey(group, kind, namespace, name)`:
+ * `group|Kind|namespace|name`. Group first because group and namespace can each
+ * independently be empty; `|` is delimiter-safe (K8s API groups follow
+ * DNS-subdomain rules and can't contain it).
+ */
+export function resourceKey(group: string, kind: string, namespace: string, name: string): string {
+  return `${group}|${kind}|${namespace}|${name}`;
+}
+
+export function resourceRefKey(ref: CheckResourceRef): string {
+  return resourceKey(ref.group, ref.kind, ref.namespace, ref.name);
+}
+
+/**
+ * checkFindingKey is the canonical built-in finding key:
+ * `cluster_id + source + resourceKey + checkID + optional detail`. cluster_id is
+ * part of the key so identical resources across two clusters never collide,
+ * even when display names render the same.
+ */
+export function checkFindingKey(
+  clusterId: string,
+  source: string,
+  resKey: string,
+  checkID: string,
+  detail?: string,
+): string {
+  const base = `${clusterId} ${source} ${resKey} ${checkID}`;
+  return detail ? `${base} ${detail}` : base;
+}
+
+/** Explains how org config shaped a finding. */
+export interface EffectiveFindingState {
+  visibility: 'visible' | 'hidden';
+  source: 'detector_default' | 'org_config';
+  scoreImpact: 'counts' | 'excluded';
+  alertImpact: 'alerts' | 'muted';
+  complianceImpact: 'counts' | 'excluded_by_config';
+  reason?: string;
+}
+
+export interface EffectiveCheckFinding {
+  source: 'radar_builtin';
+  resource: CheckResourceRef;
+  checkID: string;
+  category: string;
+  originalSeverity: RadarSeverity;
+  effectiveSeverity: CheckSeverity;
+  message: string;
+  state: EffectiveFindingState;
+}
+
+/**
+ * A failing check, rolled up across every resource that fails it — one row of
+ * the remediation queue. `subject` is the most-severe representative resource;
+ * `findings` holds the per-resource detail underneath. (Distinct from CheckMeta,
+ * the check's static definition.)
+ */
+export interface Check {
+  id: string;
+  source: 'radar_builtin';
+  subject: CheckResourceRef;
+  checkID: string;
+  category: string;
+  effectiveSeverity: CheckSeverity;
+  title: string;
+  message: string;
+  affectedFindings: number;
+  affectedResources: number;
+  representativeFinding: EffectiveCheckFinding;
+  findings: EffectiveCheckFinding[];
+  /** Source cluster's environment label (e.g. "prod"), shown as a context tag.
+   *  Empty for OSS single-cluster and unlabeled clusters. */
+  environment?: string;
+}

package/src/components/gitops/GitOpsTableView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState, type ComponentType, type ReactNode } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState, type ComponentType, type ReactNode } from 'react'
 import { clsx } from 'clsx'
 import {
   AlertTriangle,
@@ -11,6 +11,7 @@ import {
   List,
   Loader2,
   RefreshCw,
+  RotateCcw,
   Search,
   Tag,
   Trash2,
@@ -117,6 +118,17 @@ export interface GitOpsRow {
 
 export type DestinationFilter = 'all' | 'this-cluster' | 'cross-cluster' | 'unmatched'
 
+type SummaryTone = 'neutral' | 'warning' | 'error' | 'info'
+
+interface SummaryTileSpec {
+  key: string
+  label: string
+  value: number
+  tone: SummaryTone
+  active: boolean
+  apply?: () => void
+}
+
 // ----- Component props -------------------------------------------------------
 
 export interface GitOpsTableViewProps {
@@ -153,6 +165,18 @@ export interface GitOpsTableViewProps {
   // detected" copy. Hub passes "No GitOps resources across the fleet".
   emptyStateTitle?: string
   emptyStateBody?: string
+  /**
+   * Global namespace pick from the host's NamespaceSwitcher. Used to
+   * surface "viewing in namespace: X" context and to power the Clear
+   * filters affordance when no rows match. Host owns the state; shared
+   * component is read-only.
+   */
+  globalNamespaces?: string[]
+  /**
+   * Resets the global namespace pick. When wired, the "Clear filters"
+   * button drops it alongside view-local filter state.
+   */
+  onClearNamespaces?: () => void
 }
 
 // ----- Main component --------------------------------------------------------
@@ -172,6 +196,8 @@ export function GitOpsTableView({
   searchHotkey,
   emptyStateTitle,
   emptyStateBody,
+  globalNamespaces,
+  onClearNamespaces,
 }: GitOpsTableViewProps) {
   const searchInputRef = useRef<HTMLInputElement>(null)
   const [mode, setMode] = useState<GitOpsMode>('applications')
@@ -186,8 +212,21 @@ export function GitOpsTableView({
   const [labelSearch, setLabelSearch] = useState('')
   const [automationFilter, setAutomationFilter] = useState<'all' | 'auto' | 'manual' | 'suspended'>('all')
   const [lifecycleFilter, setLifecycleFilter] = useState<'all' | 'terminating' | 'active'>('all')
+  const [reconcilingOnly, setReconcilingOnly] = useState(false)
   const [sortKey, setSortKey] = useState<SortKey>('health')
 
+  const hasLocalFilters =
+    !!search ||
+    syncFilters.size > 0 ||
+    healthFilters.size > 0 ||
+    projectFilters.size > 0 ||
+    namespaceFilters.size > 0 ||
+    labelFilters.size > 0 ||
+    automationFilter !== 'all' ||
+    lifecycleFilter !== 'all'
+  const hasGlobalNamespaceFilter = !!onClearNamespaces && (globalNamespaces?.length ?? 0) > 0
+  const hasAnyFilter = hasLocalFilters || hasGlobalNamespaceFilter
+
   // Optional '/' keyboard shortcut to focus search. Avoided as a default to
   // not collide with other surfaces' keyboard maps; OSS opts in via prop.
   useEffect(() => {
@@ -260,6 +299,7 @@ export function GitOpsTableView({
       if (automationFilter === 'suspended' && !row.suspended) return false
       if (lifecycleFilter === 'terminating' && !row.terminating) return false
       if (lifecycleFilter === 'active' && row.terminating) return false
+      if (reconcilingOnly && row.sync !== 'Reconciling' && row.health !== 'Progressing') return false
       if (destinationFilter && destinationFilter !== 'all') {
         const match = row._destination?.match
         if (destinationFilter === 'this-cluster' && match !== 'in_cluster') return false
@@ -273,12 +313,60 @@ export function GitOpsTableView({
       return true
     })
     return [...rows].sort((a, b) => compareRows(a, b, sortKey))
-  }, [allRows, automationFilter, healthFilters, labelFilters, lifecycleFilter, mode, namespaceFilters, projectFilters, search, sortKey, syncFilters, destinationFilter])
+  }, [allRows, automationFilter, healthFilters, labelFilters, lifecycleFilter, mode, namespaceFilters, projectFilters, search, sortKey, syncFilters, destinationFilter, reconcilingOnly])
 
   const terminatingCount = useMemo(() => allRows.filter((row) => row.terminating).length, [allRows])
 
+  const clearAllFilters = useCallback(() => {
+    setSearch('')
+    setSyncFilters(new Set())
+    setHealthFilters(new Set())
+    setProjectFilters(new Set())
+    setNamespaceFilters(new Set())
+    setLabelFilters(new Set())
+    setAutomationFilter('all')
+    setLifecycleFilter('all')
+    setReconcilingOnly(false)
+    onClearNamespaces?.()
+    onDestinationFilterChange?.('all')
+  }, [onClearNamespaces, onDestinationFilterChange])
+
+  const noOtherFiltersActive = useCallback(
+    (
+      exclude: 'sync' | 'health' | 'automation' | 'destination' | 'reconciling' | null = null,
+    ) => {
+      if (search !== '') return false
+      if (exclude !== 'sync' && syncFilters.size > 0) return false
+      if (exclude !== 'health' && healthFilters.size > 0) return false
+      if (projectFilters.size > 0) return false
+      if (namespaceFilters.size > 0) return false
+      if (labelFilters.size > 0) return false
+      if (exclude !== 'automation' && automationFilter !== 'all') return false
+      if (lifecycleFilter !== 'all') return false
+      if (exclude !== 'destination' && destinationFilter && destinationFilter !== 'all') return false
+      if (exclude !== 'reconciling' && reconcilingOnly) return false
+      return true
+    },
+    [
+      search,
+      syncFilters,
+      healthFilters,
+      projectFilters,
+      namespaceFilters,
+      labelFilters,
+      automationFilter,
+      lifecycleFilter,
+      destinationFilter,
+      reconcilingOnly,
+    ],
+  )
+
   // Empty-state — when there's truly nothing to show across all kinds.
-  if (totalGitOps === 0 && !loading) {
+  // `counts` is server-filtered by the global namespace pick, so a
+  // namespace-scoped zero is NOT the same as cluster-empty. Fall through
+  // to the actionable empty state below when the host owns a namespace
+  // pick we can clear; otherwise the user lands here with no escape hatch.
+  if (totalGitOps === 0 && !loading && !hasGlobalNamespaceFilter) {
     return (
       <div className="flex h-full min-h-0 flex-1 items-center justify-center bg-theme-base p-4">
         <div className="rounded-lg border border-theme-border bg-theme-surface p-8 text-center">
@@ -296,6 +384,62 @@ export function GitOpsTableView({
 
   const showCrossClusterTile = typeof crossClusterCount === 'number' && mode === 'applications'
 
+  const summaryTiles: SummaryTileSpec[] = [
+    {
+      key: 'total',
+      label: 'Total Applications',
+      value: allRows.length,
+      tone: 'neutral',
+      active: noOtherFiltersActive(),
+    },
+    {
+      key: 'outOfSync',
+      label: 'Out of sync',
+      value: statusSummary.outOfSync,
+      tone: 'warning',
+      active:
+        syncFilters.size === 1 && syncFilters.has('OutOfSync') && noOtherFiltersActive('sync'),
+      apply: () => setSyncFilters(new Set(['OutOfSync'])),
+    },
+    {
+      key: 'degraded',
+      label: 'Degraded',
+      value: statusSummary.degraded,
+      tone: 'error',
+      active:
+        healthFilters.size === 1 && healthFilters.has('Degraded') && noOtherFiltersActive('health'),
+      apply: () => setHealthFilters(new Set(['Degraded'])),
+    },
+    {
+      key: 'suspended',
+      label: 'Suspended',
+      value: statusSummary.suspended,
+      tone: 'warning',
+      active: automationFilter === 'suspended' && noOtherFiltersActive('automation'),
+      apply: () => setAutomationFilter('suspended'),
+    },
+    {
+      key: 'reconciling',
+      label: 'Reconciling',
+      value: statusSummary.reconciling,
+      tone: 'info',
+      active: reconcilingOnly && noOtherFiltersActive('reconciling'),
+      apply: () => setReconcilingOnly(true),
+    },
+    ...(showCrossClusterTile
+      ? [
+          {
+            key: 'crossCluster',
+            label: 'Cross-cluster',
+            value: crossClusterCount!,
+            tone: 'info' as const,
+            active: destinationFilter === 'cross-cluster' && noOtherFiltersActive('destination'),
+            apply: () => onDestinationFilterChange?.('cross-cluster'),
+          },
+        ]
+      : []),
+  ]
+
   return (
     <div className="flex h-full min-w-0 flex-1 overflow-hidden bg-theme-base max-lg:flex-col">
       <GitOpsFilterSidebar
@@ -319,16 +463,7 @@ export function GitOpsTableView({
         namespaces={rowNamespaces}
         namespaceFilters={namespaceFilters}
         onToggleNamespace={(value) => toggleSet(namespaceFilters, setNamespaceFilters, value)}
-        onClear={() => {
-          setSearch('')
-          setSyncFilters(new Set())
-          setHealthFilters(new Set())
-          setProjectFilters(new Set())
-          setNamespaceFilters(new Set())
-          setLabelFilters(new Set())
-          setAutomationFilter('all')
-          setLifecycleFilter('all')
-        }}
+        onClear={clearAllFilters}
       />
 
       <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
@@ -341,14 +476,19 @@ export function GitOpsTableView({
               </p>
             </div>
             <div className="flex shrink-0 flex-wrap justify-end gap-2">
-              <SummaryTile label="Applications" value={allRows.length} />
-              <SummaryTile label="Out of sync" value={statusSummary.outOfSync} tone="warning" />
-              <SummaryTile label="Degraded" value={statusSummary.degraded} tone="error" />
-              <SummaryTile label="Suspended" value={statusSummary.suspended} tone="warning" />
-              <SummaryTile label="Reconciling" value={statusSummary.reconciling} tone="info" />
-              {showCrossClusterTile && (
-                <SummaryTile label="Cross-cluster" value={crossClusterCount!} tone="info" />
-              )}
+              {summaryTiles.map((tile) => (
+                <SummaryTile
+                  key={tile.key}
+                  label={tile.label}
+                  value={tile.value}
+                  tone={tile.tone}
+                  active={tile.active}
+                  onClick={() => {
+                    clearAllFilters()
+                    if (!tile.active && tile.apply) tile.apply()
+                  }}
+                />
+              ))}
             </div>
           </div>
         </div>
@@ -426,6 +566,18 @@ export function GitOpsTableView({
                 ))}
               </div>
             )}
+            {hasAnyFilter && (
+              <Tooltip content={hasGlobalNamespaceFilter ? 'Reset all filters and the active namespace' : 'Reset all filters'}>
+                <button
+                  type="button"
+                  onClick={clearAllFilters}
+                  className="inline-flex h-8 items-center gap-1.5 rounded-md border border-theme-border bg-theme-base px-2.5 text-xs text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary"
+                >
+                  <RotateCcw className="h-3.5 w-3.5" />
+                  Clear filters
+                </button>
+              </Tooltip>
+            )}
             <div className="flex shrink-0 items-center gap-0 overflow-hidden rounded-md border border-theme-border">
               <GitOpsIconToggle active={viewMode === 'table'} label="Table view" icon={List} onClick={() => setViewMode('table')} />
               <GitOpsIconToggle active={viewMode === 'tiles'} label="Tiles view" icon={LayoutGrid} onClick={() => setViewMode('tiles')} />
@@ -456,8 +608,23 @@ export function GitOpsTableView({
           ) : error ? (
             <div className="p-4 text-sm text-red-500">Failed to load GitOps applications: {error.message}</div>
           ) : filteredRows.length === 0 ? (
-            <div className="flex h-full items-center justify-center text-sm text-theme-text-secondary">
-              No applications match the current filters.
+            <div className="flex h-full flex-col items-center justify-center gap-3 text-sm text-theme-text-secondary">
+              <p>{allRows.length === 0 && !hasGlobalNamespaceFilter ? 'No applications found.' : 'No applications match the current filters.'}</p>
+              {hasGlobalNamespaceFilter && globalNamespaces && (
+                <p className="text-xs text-theme-text-tertiary">
+                  Viewing {globalNamespaces.length === 1 ? `namespace: ${globalNamespaces[0]}` : `${globalNamespaces.length} namespaces`}
+                </p>
+              )}
+              {(hasGlobalNamespaceFilter || (allRows.length > 0 && hasLocalFilters)) && (
+                <button
+                  type="button"
+                  onClick={clearAllFilters}
+                  className="inline-flex items-center gap-1.5 rounded-md bg-theme-elevated px-3 py-1.5 text-sm text-theme-text-secondary transition-colors hover:bg-theme-border hover:text-theme-text-primary"
+                >
+                  <RotateCcw className="h-3.5 w-3.5" />
+                  Clear filters
+                </button>
+              )}
             </div>
           ) : viewMode === 'tiles' ? (
             <GitOpsTiles rows={filteredRows} onOpen={onRowClick} />
@@ -1021,18 +1188,54 @@ function GitOpsTile({
   )
 }
 
-function SummaryTile({ label, value, tone = 'neutral' }: { label: string; value: number; tone?: 'neutral' | 'warning' | 'error' | 'info' }) {
+function SummaryTile({
+  label,
+  value,
+  tone = 'neutral',
+  onClick,
+  active = false,
+}: {
+  label: string
+  value: number
+  tone?: SummaryTone
+  onClick?: () => void
+  active?: boolean
+}) {
   const toneClass = {
     neutral: 'text-theme-text-primary',
     warning: 'text-amber-600 dark:text-amber-300',
     error: 'text-red-600 dark:text-red-300',
     info: 'text-sky-600 dark:text-sky-300',
   }[tone]
+  const activeBorderClass = {
+    neutral: 'border-skyhook-500',
+    warning: 'border-amber-500',
+    error: 'border-red-500',
+    info: 'border-sky-500',
+  }[tone]
+  const value$ = <div className={`text-sm font-semibold ${toneClass}`}>{value}</div>
+  const label$ = <div className="text-xs text-theme-text-tertiary">{label}</div>
+  if (!onClick) {
+    return (
+      <div className="rounded-md border border-theme-border bg-theme-base px-3 py-2">
+        {value$}
+        {label$}
+      </div>
+    )
+  }
   return (
-    <div className="rounded-md border border-theme-border bg-theme-base px-3 py-2">
-      <div className={`text-sm font-semibold ${toneClass}`}>{value}</div>
-      <div className="text-xs text-theme-text-tertiary">{label}</div>
-    </div>
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={active}
+      className={clsx(
+        'cursor-pointer rounded-md border bg-theme-base px-3 py-2 text-left transition-colors hover:bg-theme-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-skyhook-500',
+        active ? activeBorderClass : 'border-theme-border',
+      )}
+    >
+      {value$}
+      {label$}
+    </button>
   )
 }