@skyhook-io/k8s-ui 1.11.0 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -71,7 +71,7 @@
     "html-to-image": "^1.11.0",
     "monaco-yaml": "5.5.1",
     "react-virtuoso": "^4.18.11",
-    "shiki": "^4.2.0"
+    "shiki": "^4.4.2"
   },
   "peerDependencies": {
     "@xterm/addon-fit": ">=0.10.0",
@@ -88,7 +88,7 @@
     "yaml": ">=2.0.0"
   },
   "devDependencies": {
-    "@types/node": "^26.1.1",
+    "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.3",
     "@xterm/addon-fit": "^0.11.0",
@@ -98,7 +98,7 @@
     "clsx": "^2.1.1",
     "diff": "^9.0.0",
     "elkjs": "^0.11.1",
-    "lucide-react": "^1.28.0",
+    "lucide-react": "^1.30.0",
     "monaco-editor": "0.55.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",

package/src/components/gitops/GitOpsStatusBadge.tsx

@@ -2,6 +2,8 @@ import { clsx } from 'clsx'
 import { CheckCircle2, AlertCircle, Loader2, Pause, HelpCircle, XCircle } from 'lucide-react'
 import type { GitOpsStatus, SyncStatus, GitOpsHealthStatus } from '../../types/gitops'
 import { SEVERITY_BADGE_BORDERED, SEVERITY_BADGE } from '../../utils/badge-colors'
+import { formatCompactAge } from '../../utils/format'
+import { Tooltip } from '../ui/Tooltip'
 
 interface GitOpsStatusBadgeProps {
   status: GitOpsStatus
@@ -176,3 +178,41 @@ export function HealthStatusBadge({ health }: { health: GitOpsHealthStatus }) {
     </span>
   )
 }
+
+
+/**
+ * ReconcilingIndicator rides alongside the sync badge rather than replacing it,
+ * the same primary-plus-secondary shape the Velero schedule cell uses for a
+ * paused-and-rejected schedule.
+ *
+ * A pass being in flight says nothing about whether the declared state is
+ * applied, so it must not touch the sync word — but a pass that never finishes
+ * is the one fault nothing else in the product notices, and on a healthy object
+ * a real pass completes in milliseconds. In practice this only becomes visible
+ * when a controller is wedged, which is exactly when it should be.
+ */
+export function ReconcilingIndicator({
+  reconciling,
+  since,
+  sync,
+}: {
+  reconciling?: boolean
+  since?: string
+  /** The sync word shown beside this. Omitted when there is no badge alongside. */
+  sync?: SyncStatus
+}) {
+  // Suppressed when the sync badge already says Reconciling — it carries the
+  // same fact and spins for it. Showing both puts two spinners on one row for
+  // one thing. The secondary exists for the case the primary CANNOT express:
+  // an applied object whose reconcile pass never finished.
+  if (!reconciling || sync === 'Reconciling') return null
+  const age = formatCompactAge(since)
+  const tip = age
+    ? `A reconcile pass has been in flight for ${age}. On a healthy resource a pass finishes in milliseconds, so a long-running one usually means the controller is stuck.`
+    : 'A reconcile pass is in flight.'
+  return (
+    <Tooltip content={tip}>
+      <Loader2 className="w-3 h-3 shrink-0 animate-spin text-theme-text-tertiary" aria-label="Reconcile pass in flight" />
+    </Tooltip>
+  )
+}

package/src/components/gitops/GitOpsTableView.tsx

@@ -24,7 +24,7 @@ import {
   Zap,
 } from 'lucide-react'
 
-import { HealthStatusBadge, SyncStatusBadge } from './GitOpsStatusBadge'
+import { HealthStatusBadge, ReconcilingIndicator, SyncStatusBadge } from './GitOpsStatusBadge'
 import { Tooltip } from '../ui/Tooltip'
 import { Input } from '../ui/Input'
 import { PageHeader } from '../ui/PageHeader'
@@ -150,6 +150,14 @@ export interface GitOpsRow {
   sync: string
   health: string
   suspended: boolean
+  /**
+   * A reconcile pass is executing. Deliberately separate from sync: a pass
+   * being in flight says nothing about whether the declared state is applied,
+   * but a pass that never finishes is the one fault nothing else in the
+   * product notices.
+   */
+  reconciling?: boolean
+  reconcilingSince?: string
   repository: string
   targetRevision: string
   path: string
@@ -1300,7 +1308,12 @@ function GitOpsTable({
               <TableCell>
                 {row.terminating
                   ? <span className="text-[11px] text-theme-text-tertiary">—</span>
-                  : <SyncStatusBadge sync={row.sync as any} suspended={row.suspended} />}
+                  : (
+                    <span className="inline-flex items-center gap-1 min-w-0">
+                      <SyncStatusBadge sync={row.sync as any} suspended={row.suspended} />
+                      <ReconcilingIndicator reconciling={row.reconciling} since={row.reconcilingSince} sync={row.sync as any} />
+                    </span>
+                  )}
               </TableCell>
               <TableCell>
                 {row.terminating
@@ -1529,6 +1542,7 @@ function GitOpsTile({
           ) : (
             <>
               <SyncStatusBadge sync={row.sync as any} suspended={row.suspended} />
+              <ReconcilingIndicator reconciling={row.reconciling} since={row.reconcilingSince} sync={row.sync as any} />
               <HealthStatusBadge health={row.health as any} />
             </>
           )}
@@ -1896,6 +1910,8 @@ export function normalizeArgoApplication(resource: any): GitOpsRow {
     labels: (resource.metadata?.labels ?? {}) as Record<string, string>,
     sync: status?.sync ?? 'Unknown',
     health: status?.health ?? 'Unknown',
+    reconciling: status?.reconciling,
+    reconcilingSince: status?.reconcilingSince,
     suspended: (status?.suspended ?? false) || isArgoSuspendedByRadar(resource),
     repository: resource.spec?.source?.repoURL ?? '',
     targetRevision: resource.spec?.source?.targetRevision ?? '',
@@ -1932,6 +1948,8 @@ export function normalizeFluxKustomization(resource: any, fluxSourceUrls?: Map<s
     labels: (resource.metadata?.labels ?? {}) as Record<string, string>,
     sync: status?.sync ?? 'Unknown',
     health: status?.health ?? 'Unknown',
+    reconciling: status?.reconciling,
+    reconcilingSince: status?.reconcilingSince,
     suspended: status?.suspended ?? resource.spec?.suspend === true,
     repository,
     targetRevision: resource.status?.lastAppliedRevision ?? resource.status?.lastAttemptedRevision ?? '',
@@ -1969,6 +1987,8 @@ export function normalizeFluxHelmRelease(resource: any, fluxSourceUrls?: Map<str
     labels: (resource.metadata?.labels ?? {}) as Record<string, string>,
     sync: status?.sync ?? 'Unknown',
     health: status?.health ?? 'Unknown',
+    reconciling: status?.reconciling,
+    reconcilingSince: status?.reconcilingSince,
     suspended: status?.suspended ?? resource.spec?.suspend === true,
     repository,
     targetRevision: chartSpec.version ?? resource.status?.lastAttemptedRevision ?? '',

package/src/components/gitops/ReconcilingIndicator.test.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { ReconcilingIndicator } from './GitOpsStatusBadge'
+
+const LABEL = 'Reconcile pass in flight'
+
+// A reconcile pass in flight is worth showing only where the sync word cannot
+// already say it. Radar's own precedent for a secondary indicator (the Velero
+// schedule cell's paused-and-rejected case) suppresses the icon when the badge
+// carries the same fact, and without that rule one row shows two spinners.
+describe('ReconcilingIndicator', () => {
+  it('shows on an applied object whose pass never finished', () => {
+    // The case the sync word cannot express, and the reason this exists: a
+    // wedged controller behind a correct "Synced".
+    const html = renderToString(
+      <ReconcilingIndicator reconciling since="2026-08-11T06:05:00Z" sync="Synced" />,
+    )
+    expect(html).toContain(LABEL)
+  })
+
+  it('is suppressed when the sync badge already reports Reconciling', () => {
+    const html = renderToString(
+      <ReconcilingIndicator reconciling since="2026-08-11T06:05:00Z" sync="Reconciling" />,
+    )
+    expect(html).toBe('')
+  })
+
+  it('is absent when nothing is in flight', () => {
+    expect(renderToString(<ReconcilingIndicator reconciling={false} sync="Synced" />)).toBe('')
+  })
+})

package/src/components/gitops/detail-helpers.ts

@@ -100,7 +100,10 @@ export function getGitOpsResourceStatus(kind: string, resource: any): GitOpsStat
     return argoStatusToGitOpsStatus(resource?.status ?? {})
   }
   const conditions = (resource?.status?.conditions ?? []) as FluxCondition[]
-  return fluxConditionsToGitOpsStatus(conditions, resource?.spec?.suspend === true)
+  return fluxConditionsToGitOpsStatus(conditions, resource?.spec?.suspend === true, {
+    generation: resource?.metadata?.generation,
+    observedGeneration: resource?.status?.observedGeneration,
+  })
 }
 
 // getGitOpsTool routes a kind+group to 'argo' or 'flux'. Same shape used

package/src/components/issues/severity.ts

@@ -85,6 +85,7 @@ const CATEGORY_LABEL: Record<string, string> = {
   volume_access_mode_conflict: 'Volume access conflict',
   backup_failed: 'Backup failed',
   backup_target_unavailable: 'Backup target unavailable',
+  backup_stalled: 'Backup not progressing',
   job_failed: 'Job failed',
   cronjob_failed: 'CronJob failed',
   rollout_stalled: 'Rollout stalled',

package/src/components/resources/ResourcesView.empty-note.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import { emptyKindNote } from './ResourcesView'
+
+describe('emptyKindNote', () => {
+  it('explains that no UpdateRequest is the resting state, and that it looks the same as a rule that never ran', () => {
+    const note = emptyKindNote('UpdateRequest', 'kyverno.io')
+    expect(note).toContain('deleted seconds after')
+    expect(note).toContain('never ran')
+  })
+
+  it('says an absent EphemeralReport means the scan finished, not that nothing was checked', () => {
+    expect(emptyKindNote('EphemeralReport', 'reports.kyverno.io')).toContain('scan has finished')
+    expect(emptyKindNote('ClusterEphemeralReport', 'reports.kyverno.io')).toContain('scan has finished')
+  })
+
+  it('is case-insensitive on the kind, which arrives from a URL as often as from discovery', () => {
+    expect(emptyKindNote('updaterequest', 'kyverno.io')).toBeDefined()
+  })
+
+  // Same plural, different operator: Kyverno's group is what makes the note true.
+  it('says nothing about a kind of the same name from another group', () => {
+    expect(emptyKindNote('UpdateRequest', 'example.com')).toBeUndefined()
+    expect(emptyKindNote('EphemeralReport', '')).toBeUndefined()
+  })
+
+  it('says nothing about kinds with no such story', () => {
+    expect(emptyKindNote('Pod', '')).toBeUndefined()
+  })
+
+  // The table can be empty because the reader emptied it. Telling them none is
+  // normal then answers a question they did not ask, with their term still in
+  // the search box.
+  it('stays silent when the kind has rows and a filter is what emptied the table', () => {
+    expect(emptyKindNote('UpdateRequest', 'kyverno.io', 3)).toBeUndefined()
+    expect(emptyKindNote('EphemeralReport', 'reports.kyverno.io', 192)).toBeUndefined()
+  })
+
+  it('still speaks when the kind is genuinely empty', () => {
+    expect(emptyKindNote('UpdateRequest', 'kyverno.io', 0)).toBeDefined()
+  })
+})