@skyhook-io/k8s-ui 1.14.12 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.14.12",
+  "version": "1.16.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -100,12 +100,12 @@
     "diff": "^9.0.0",
     "elkjs": "^0.11.1",
     "jsdom": "^29.1.1",
-    "lucide-react": "^1.37.0",
+    "lucide-react": "^1.48.0",
     "monaco-editor": "0.55.1",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "typescript": "^6.0.2",
-    "vitest": "^4.1.11",
+    "vitest": "^5.0.2",
     "yaml": "^2.9.0"
   }
 }

package/src/components/audit/AuditFindingsTable.tsx

@@ -515,7 +515,7 @@ function FlatFindingRow({ finding, onResourceClick, showCluster, onClusterClick
         onClusterClick ? (
           <button
             onClick={() => onClusterClick(finding.cluster!.id)}
-            className="text-xs text-[var(--color-radar-accent)] hover:underline shrink-0 max-w-[160px] truncate text-left"
+            className="text-xs text-[var(--color-radar-accent,var(--accent))] hover:underline shrink-0 max-w-[160px] truncate text-left"
           >
             {finding.cluster.name}
           </button>

package/src/components/checks/ChecksView.tsx

@@ -285,7 +285,7 @@ export function ChecksView({ checks, catalog, anyData, evaluated, missingInputs
               placeholder="Search checks…"
               value={search}
               onChange={(e) => filters.setString('q', e.target.value)}
-              className="w-64 rounded-lg border border-theme-border-light bg-theme-base py-1.5 pl-9 pr-8 text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-[var(--color-radar-accent)]"
+              className="w-64 rounded-lg border border-theme-border-light bg-theme-base py-1.5 pl-9 pr-8 text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-[var(--color-radar-accent,var(--accent))]"
             />
             {search && (
               <button
@@ -340,7 +340,7 @@ export function ChecksView({ checks, catalog, anyData, evaluated, missingInputs
                 return (
                   <span
                     key={id}
-                    className="inline-flex items-center gap-1 rounded-full border border-[var(--color-radar-accent)]/30 bg-[var(--color-radar-accent)]/10 py-1 pl-2.5 pr-1 text-xs text-theme-text-primary"
+                    className="inline-flex items-center gap-1 rounded-full border border-[var(--color-radar-accent,var(--accent))]/30 bg-[var(--color-radar-accent,var(--accent))]/10 py-1 pl-2.5 pr-1 text-xs text-theme-text-primary"
                   >
                     <span className="min-w-0 max-w-[12rem] truncate">
                       <ClusterName name={label} />
@@ -520,7 +520,7 @@ function CheckReferenceLinks({ references }: { references: CheckReference[] }) {
           href={r.url}
           target="_blank"
           rel="noreferrer"
-          className="inline-flex items-center gap-1 text-xs font-medium text-[var(--color-radar-accent)] hover:underline"
+          className="inline-flex items-center gap-1 text-xs font-medium text-[var(--color-radar-accent,var(--accent))] hover:underline"
         >
           {r.label}
           <ExternalLink className="h-3 w-3" />
@@ -594,7 +594,7 @@ export function CheckCardShell({
             onToggle()
           }
         }}
-        className={`group flex cursor-pointer items-center gap-3 border-l-[3px] py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent)]/40 ${open ? SEVERITY_HEADER_BAND_CLASS[sev] : SEVERITY_RAIL_CLASS[sev]}`}
+        className={`group flex cursor-pointer items-center gap-3 border-l-[3px] py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent,var(--accent))]/40 ${open ? SEVERITY_HEADER_BAND_CLASS[sev] : SEVERITY_RAIL_CLASS[sev]}`}
       >
         <SeverityIcon className={`h-[18px] w-[18px] shrink-0 ${SEVERITY_TEXT_CLASS[sev]}`} aria-hidden />
 
@@ -701,7 +701,7 @@ export function CheckClusterBreakdownShell<T extends CheckClusterBreakdownGroup>
         <button
           type="button"
           onClick={() => setShowAllClusters(true)}
-          className="mt-0.5 inline-flex w-fit items-center gap-1 rounded px-2 py-1 text-xs font-medium text-[var(--color-radar-accent)] hover:underline"
+          className="mt-0.5 inline-flex w-fit items-center gap-1 rounded px-2 py-1 text-xs font-medium text-[var(--color-radar-accent,var(--accent))] hover:underline"
         >
           View all {groups.length} clusters →
         </button>
@@ -849,7 +849,7 @@ function ResourceList({
         <button
           type="button"
           onClick={() => setShowAll(true)}
-          className="mt-0.5 inline-flex w-fit items-center gap-1 rounded px-2 py-1 text-xs font-medium text-[var(--color-radar-accent)] hover:underline"
+          className="mt-0.5 inline-flex w-fit items-center gap-1 rounded px-2 py-1 text-xs font-medium text-[var(--color-radar-accent,var(--accent))] hover:underline"
         >
           View all {check.findings.length} →
         </button>
@@ -875,7 +875,7 @@ function FindingLine({
     <>
       <span className="flex min-w-0 items-baseline gap-2">
         <span className="shrink-0 font-mono text-[11px] uppercase tracking-wide text-theme-text-tertiary">{r.kind}</span>
-        <span className={`min-w-0 break-all font-medium ${linkable ? 'text-[var(--color-radar-accent)]' : 'text-theme-text-primary'}`}>
+        <span className={`min-w-0 break-all font-medium ${linkable ? 'text-[var(--color-radar-accent,var(--accent))]' : 'text-theme-text-primary'}`}>
           {r.namespace ? `${r.namespace} / ` : ''}
           {r.name}
         </span>
@@ -1010,7 +1010,7 @@ function ClusterFilter({
                   onClick={() => onToggle(o.id)}
                   className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-theme-text-secondary transition-colors hover:bg-theme-hover hover:text-theme-text-primary"
                 >
-                  <span className={`flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm border ${on ? 'border-[var(--color-radar-accent)] bg-[var(--color-radar-accent)] text-white' : 'border-theme-border'}`}>
+                  <span className={`flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm border ${on ? 'border-[var(--color-radar-accent,var(--accent))] bg-[var(--color-radar-accent,var(--accent))] text-white' : 'border-theme-border'}`}>
                     {on && <span className="text-[9px] leading-none">✓</span>}
                   </span>
                   <span className="min-w-0 truncate">

package/src/components/compare/CompareResourcePicker.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState, useId } from 'react'
 import { clsx } from 'clsx'
 import { GitCompare, Search, X } from 'lucide-react'
 import { DialogPortal } from '../ui/DialogPortal'
@@ -33,6 +33,7 @@ export function CompareResourcePicker({
   error,
   onPick,
 }: CompareResourcePickerProps) {
+  const titleId = useId()
   const [query, setQuery] = useState('')
   const [highlightIdx, setHighlightIdx] = useState(0)
   const listRef = useRef<HTMLUListElement | null>(null)
@@ -90,11 +91,11 @@ export function CompareResourcePicker({
   const sourceChipBg = SIDE_TONES[sourceSide].chipBg
 
   return (
-    <DialogPortal open={open} onClose={onClose} className="max-w-xl w-full max-h-[70vh] flex flex-col">
+    <DialogPortal ariaLabelledBy={titleId} open={open} onClose={onClose} className="max-w-xl w-full max-h-[70vh] flex flex-col">
       <div className="flex items-center justify-between px-4 py-3 border-b border-theme-border shrink-0">
         <div className="flex items-center gap-2">
           <GitCompare className="w-5 h-5 text-skyhook-400" />
-          <h3 className="text-sm font-semibold text-theme-text-primary">
+          <h3 id={titleId} className="text-sm font-semibold text-theme-text-primary">
             {sourceSide === 'a'
               ? `Compare to another ${pluralToKind(source.kind)}`
               : `Replace side B with another ${pluralToKind(source.kind)}`}

package/src/components/gitops/GitOpsDetailLayout.tsx

@@ -147,6 +147,7 @@ export interface GitOpsDetailLayoutProps {
   remoteDestinationHint?: ReactNode
   // Opens the host's Argo CD settings, when it has such a place.
   onOpenSettings?: () => void
+  settingsNote?: string
 
   // Action buttons — Argo + Flux. Exactly one applies for any given CR.
   isArgoApp: boolean
@@ -235,6 +236,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
     healthDocsUrl,
     remoteDestinationHint,
     onOpenSettings,
+    settingsNote,
     isArgoApp,
     isFlux,
     isFluxWorkload,
@@ -475,7 +477,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
       {!fullscreen && (
         <>
           <GitOpsStatusStrip insight={insight ?? undefined} loading={insightLoading} renderRevisionMeta={renderRevisionMeta} />
-          <GitOpsHealthSourceNotice summary={insight?.summary} changes={insight?.changes} docsUrl={healthDocsUrl} remoteDestinationHint={remoteDestinationHint} onOpenSettings={onOpenSettings} />
+          <GitOpsHealthSourceNotice summary={insight?.summary} changes={insight?.changes} docsUrl={healthDocsUrl} remoteDestinationHint={remoteDestinationHint} onOpenSettings={onOpenSettings} settingsNote={settingsNote} />
           <GitOpsIssuesBand
             issues={insight?.issues}
             terminating={terminating}

package/src/components/gitops/GitOpsHealthSourceNotice.tsx

@@ -61,12 +61,18 @@ export function hasRadarFinding(changes: GitOpsChange[] | undefined): boolean {
   return (changes ?? []).some((c) => c.healthSource === 'radar' && (c.health === 'Degraded' || c.health === 'Missing'))
 }
 
+export function hasHealthSettingsHint(summary: HealthSourceNoticeSummary | undefined, changes: GitOpsChange[] | undefined): boolean {
+  return healthSourceNoticeKind(summary) === 'appTree'
+    && (!!summary?.resourceHealthApiError || (!hasRadarFinding(changes) && summary?.health === 'Degraded'))
+}
+
 export function GitOpsHealthSourceNotice({
   summary,
   changes,
   docsUrl,
   remoteDestinationHint,
   onOpenSettings,
+  settingsNote,
 }: {
   summary: HealthSourceNoticeSummary | undefined
   // Decides between the two appTree sentences: with a Radar-sourced
@@ -84,6 +90,9 @@ export function GitOpsHealthSourceNotice({
   // the first way out, and "check Settings" when a configured connection
   // didn't deliver. Without it, only the Argo-side knob is named.
   onOpenSettings?: () => void
+  // Host context shown before the settings link, such as settings that can
+  // be copied for this cluster.
+  settingsNote?: string
 }) {
   const kind = healthSourceNoticeKind(summary)
   if (!kind) return null
@@ -92,7 +101,7 @@ export function GitOpsHealthSourceNotice({
   // app with no Radar finding has nothing here to attribute.
   const radarFinding = hasRadarFinding(changes)
   const apiError = summary?.resourceHealthApiError
-  if (kind === 'appTree' && !radarFinding && !apiError && summary?.health !== 'Degraded') return null
+  if (kind === 'appTree' && !radarFinding && !hasHealthSettingsHint(summary, changes)) return null
   const settingsLink = (label: string) =>
     onOpenSettings ? (
       <button type="button" onClick={onOpenSettings} className="underline decoration-theme-border underline-offset-2 hover:text-theme-text-primary">
@@ -117,7 +126,7 @@ export function GitOpsHealthSourceNotice({
             {apiError ? (
               <>
                 {APP_TREE_API_ERROR_NOTICE}: {apiError}.
-                {onOpenSettings && <> {settingsLink('Check Argo CD in Settings')}.</>}
+                {onOpenSettings && <> {settingsNote} {settingsLink('Check Argo CD in Settings')}.</>}
                 {' '}
                 {radarFinding ? APP_TREE_API_ERROR_FINDINGS : APP_TREE_API_ERROR_NO_FINDINGS}
               </>
@@ -127,6 +136,7 @@ export function GitOpsHealthSourceNotice({
                 {!radarFinding && (
                   <>
                     {' '}
+                    {settingsNote && onOpenSettings && <>{settingsNote}{' '}</>}
                     To see Argo's per-resource health here, {onOpenSettings && <>{settingsLink('connect Radar to your Argo CD server')}, or </>}
                     {APP_TREE_PERSIST_REMEDY}
                   </>

package/src/components/gitops/RollbackDialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useId } from 'react'
 import { History, Loader2 } from 'lucide-react'
 
 import { DialogPortal } from '../ui/DialogPortal'
@@ -30,6 +30,7 @@ export interface RollbackDialogProps {
 }
 
 export function RollbackDialog({ open, appLabel, revision, historyId, pending, onCancel, onConfirm }: RollbackDialogProps) {
+  const titleId = useId()
   const [prune, setPrune] = useState(false)
   const [dryRun, setDryRun] = useState(false)
 
@@ -41,9 +42,9 @@ export function RollbackDialog({ open, appLabel, revision, historyId, pending, o
   }, [open])
 
   return (
-    <DialogPortal open={open} onClose={pending ? () => {} : onCancel} className="w-[440px]" closable={!pending}>
+    <DialogPortal ariaLabelledBy={titleId} open={open} onClose={pending ? () => {} : onCancel} className="w-[440px]" closable={!pending}>
       <div className="border-b border-theme-border px-4 py-3">
-        <h2 className="text-sm font-semibold text-theme-text-primary">Roll back application</h2>
+        <h2 id={titleId} className="text-sm font-semibold text-theme-text-primary">Roll back application</h2>
         <p className="mt-0.5 text-xs text-theme-text-tertiary">{appLabel}</p>
       </div>
       <div className="space-y-4 px-4 py-4 text-sm">

package/src/components/gitops/SyncOptionsDialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, type ComponentType } from 'react'
+import { useState, useEffect, type ComponentType, useId } from 'react'
 import { AlertTriangle, CheckCircle2, CircleAlert, Loader2, RefreshCw, ShieldCheck, XCircle } from 'lucide-react'
 
 import { DialogPortal } from '../ui/DialogPortal'
@@ -58,6 +58,7 @@ export interface ResourceValidationResult {
 }
 
 export function SyncOptionsDialog({ open, appLabel, resource, pending, autoSyncEnabled, validationPending, operationInProgress, validationResult, validationError, onCancel, onConfirm, onValidate, onValidationReset }: SyncOptionsDialogProps) {
+  const titleId = useId()
   const [revision, setRevision] = useState('')
   const [prune, setPrune] = useState(true)
   const [dryRun, setDryRun] = useState(false)
@@ -97,9 +98,9 @@ export function SyncOptionsDialog({ open, appLabel, resource, pending, autoSyncE
   }
 
   return (
-    <DialogPortal open={open} onClose={busy ? () => {} : onCancel} className="w-[480px]" closable={!busy}>
+    <DialogPortal ariaLabelledBy={titleId} open={open} onClose={busy ? () => {} : onCancel} className="w-[480px]" closable={!busy}>
       <div className="border-b border-theme-border px-4 py-3">
-        <h2 className="text-sm font-semibold text-theme-text-primary">{resource ? 'Sync resource' : 'Sync application'}</h2>
+        <h2 id={titleId} className="text-sm font-semibold text-theme-text-primary">{resource ? 'Sync resource' : 'Sync application'}</h2>
         <p className="mt-0.5 break-all text-xs text-theme-text-tertiary">{appLabel}</p>
       </div>
       <div className="space-y-4 px-4 py-4 text-sm">

package/src/components/gitops/health-provenance.test.ts

@@ -30,7 +30,7 @@ describe('radarHealthNote', () => {
 
   test('hasRadarFinding reads the rows the markers read', () => {
     const row = (health: string, healthSource?: string) =>
-      ({ ref: { kind: 'Deployment', namespace: 'p', name: 'w' }, category: 'Unknown', health, healthSource, hasDesired: false, hasLive: true }) as const
+      ({ ref: { kind: 'Deployment', namespace: 'p', name: 'w' }, category: 'Unknown', health, healthSource, hasDesired: false, hasLive: true, partial: false }) as const
     expect(hasRadarFinding(undefined)).toBe(false)
     expect(hasRadarFinding([row('Degraded', 'controller')])).toBe(false)
     expect(hasRadarFinding([row('Healthy', 'radar')])).toBe(false)

package/src/components/gitops/index.ts

@@ -61,4 +61,5 @@ export type {
   GitOpsHelmValuesData,
 } from './GitOpsDetailLayout'
 export { GitOpsHealthSourceNotice, healthSourceNoticeKind, hasRadarFinding, APP_TREE_HEALTH_NOTICE, APP_TREE_NO_FINDINGS_NOTICE, REMOTE_DESTINATION_NOTICE, REMOTE_FLUX_TARGET_NOTICE } from './GitOpsHealthSourceNotice'
+export { hasHealthSettingsHint } from './GitOpsHealthSourceNotice'
 export { radarHealthNote, RADAR_HEALTH_NOTE } from './health-provenance'

package/src/components/gitops/insights/ArgoResourceDiff.tsx

@@ -83,6 +83,7 @@ export function ArgoResourceDiff({ diff, loading, error }: ArgoResourceDiffProps
       <DialogPortal
         open={maximized}
         onClose={() => setMaximized(false)}
+        ariaLabel="Resource diff"
         className="dialog flex h-[90vh] w-full max-w-6xl flex-col"
       >
         <ArgoResourceDiffContent diff={diff} onClose={() => setMaximized(false)} />

package/src/components/gitops/insights/GitOpsInsightViews.tsx

@@ -739,6 +739,7 @@ interface GitOpsChangesViewProps {
   // Opens the global Settings dialog. Backs the "Connect Argo CD" hint shown
   // when the root is an Argo Application without the diff integration.
   onOpenSettings?: () => void
+  settingsNote?: string
 }
 
 // Status facets for the Resources list. OutOfSync is a sync-status concern
@@ -749,7 +750,7 @@ const STATUS_FACETS: { key: ResourceStatusFacet; label: string; tone: FilterPill
   { key: 'missing', label: 'Missing', tone: 'danger' },
 ]
 
-export function GitOpsChangesView({ insight, error, onOpenResource, onSyncResource, syncResourceDisabledReason, focusKey, tree, renderResourceDiff, onOpenSettings }: GitOpsChangesViewProps) {
+export function GitOpsChangesView({ insight, error, onOpenResource, onSyncResource, syncResourceDisabledReason, focusKey, tree, renderResourceDiff, onOpenSettings, settingsNote }: GitOpsChangesViewProps) {
   // "All resources" toggle: when on, render generated descendants alongside
   // the controller's declared inventory. Argo's UI defaults to "all" — we
   // default to "declared" because the diagnostic data (drift, events) lives
@@ -1009,12 +1010,14 @@ export function GitOpsChangesView({ insight, error, onOpenResource, onSyncResour
             {insight.capabilities?.argoConfigured ? (
               <>
                 Argo CD's full Git-rendered diff isn't available for this app (connection down or token not authorized).{' '}
+                {settingsNote && <>{settingsNote} </>}
                 <button type="button" onClick={onOpenSettings} className="font-medium text-accent-text hover:underline">
                   Check Argo CD in Settings
                 </button>.
               </>
             ) : (
               <>
+                {settingsNote && <>{settingsNote} </>}
                 <button type="button" onClick={onOpenSettings} className="font-medium text-accent-text hover:underline">
                   Connect Argo CD
                 </button>{' '}

package/src/components/issues/IssuesView.tsx

@@ -283,7 +283,7 @@ export function IssueRow({
             onToggle();
           }
         }}
-        className={`group @container/issue flex cursor-pointer items-center gap-3 border-l-[3px] py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent)]/40 ${open ? ISSUE_SEVERITY_HEADER_BAND_CLASS[severity] : ISSUE_SEVERITY_RAIL_CLASS[severity]}`}
+        className={`group @container/issue flex cursor-pointer items-center gap-3 border-l-[3px] py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent,var(--accent))]/40 ${open ? ISSUE_SEVERITY_HEADER_BAND_CLASS[severity] : ISSUE_SEVERITY_RAIL_CLASS[severity]}`}
       >
         <SeverityIcon className={`h-[18px] w-[18px] shrink-0 ${ISSUE_SEVERITY_TEXT_CLASS[severity]}`} aria-hidden />
 
@@ -719,7 +719,7 @@ function ResourceLine({
       ) : (
         <span className="shrink-0 font-mono text-[11px] uppercase tracking-wide text-theme-text-tertiary">{r.kind}</span>
       )}
-      <span className={`min-w-0 truncate text-sm ${linkable ? `${compact ? 'font-semibold' : 'font-medium'} text-[var(--color-radar-accent)]` : 'font-medium text-theme-text-primary'}`}>
+      <span className={`min-w-0 truncate text-sm ${linkable ? `${compact ? 'font-semibold' : 'font-medium'} text-[var(--color-radar-accent,var(--accent))]` : 'font-medium text-theme-text-primary'}`}>
         {r.namespace ? `${r.namespace} / ` : ''}
         {r.name}
       </span>