@skyhook-io/radar-app 1.0.1 → 1.1.0

package/src/components/gitops/RollbackDialog.tsx

@@ -0,0 +1,107 @@
+import { useState, useEffect } from 'react'
+import { DialogPortal } from '@skyhook-io/k8s-ui'
+import { History, Loader2 } from 'lucide-react'
+import { Tooltip } from '../ui/Tooltip'
+
+interface RollbackDialogProps {
+  open: boolean
+  // Identifies the target history entry. Caller provides the user-visible
+  // revision (mono SHA / tag) and the API id; Argo uses id, the user reads
+  // the revision.
+  appLabel: string
+  revision: string
+  historyId?: string
+  pending?: boolean
+  onCancel: () => void
+  onConfirm: (opts: { prune: boolean; dryRun: boolean }) => void
+}
+
+// Confirms an Argo Application rollback. Defaults are conservative — no
+// prune (avoid surprise deletions), no dry run (just do it). Operators
+// who want to preview check Dry Run; the result lands in Activity.
+export function RollbackDialog({ open, appLabel, revision, historyId, pending, onCancel, onConfirm }: RollbackDialogProps) {
+  const [prune, setPrune] = useState(false)
+  const [dryRun, setDryRun] = useState(false)
+
+  useEffect(() => {
+    if (open) {
+      setPrune(false)
+      setDryRun(false)
+    }
+  }, [open])
+
+  return (
+    <DialogPortal 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>
+        <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">
+        <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-400">
+          Argo will sync this application to a previous revision. This is a write operation on the cluster.
+        </div>
+        <dl className="grid grid-cols-[80px_minmax(0,1fr)] gap-x-3 gap-y-1 text-xs">
+          <dt className="text-theme-text-tertiary">Revision</dt>
+          <dd className="min-w-0">
+            <Tooltip content={revision} delay={400} disabled={!revision} wrapperClassName="block max-w-full">
+              <span className="block truncate font-mono text-theme-text-primary">{revision || '-'}</span>
+            </Tooltip>
+          </dd>
+          {historyId && (
+            <>
+              <dt className="text-theme-text-tertiary">History ID</dt>
+              <dd className="font-mono text-theme-text-primary">#{historyId}</dd>
+            </>
+          )}
+        </dl>
+        <div className="space-y-2">
+          <label className="flex items-start gap-2">
+            <input
+              type="checkbox"
+              checked={prune}
+              onChange={(e) => setPrune(e.target.checked)}
+              disabled={pending}
+              className="mt-0.5 h-3.5 w-3.5 cursor-pointer accent-sky-500 disabled:cursor-not-allowed"
+            />
+            <div className="min-w-0">
+              <div className="text-xs text-theme-text-primary">Prune resources added since this revision</div>
+              <div className="text-[11px] text-theme-text-tertiary">Off by default — leaves any resources created after this revision untouched.</div>
+            </div>
+          </label>
+          <label className="flex items-start gap-2">
+            <input
+              type="checkbox"
+              checked={dryRun}
+              onChange={(e) => setDryRun(e.target.checked)}
+              disabled={pending}
+              className="mt-0.5 h-3.5 w-3.5 cursor-pointer accent-sky-500 disabled:cursor-not-allowed"
+            />
+            <div className="min-w-0">
+              <div className="text-xs text-theme-text-primary">Dry run</div>
+              <div className="text-[11px] text-theme-text-tertiary">Preview the rollback without applying it.</div>
+            </div>
+          </label>
+        </div>
+      </div>
+      <div className="flex items-center justify-end gap-2 border-t border-theme-border bg-theme-base px-4 py-3">
+        <button
+          type="button"
+          onClick={onCancel}
+          disabled={pending}
+          className="rounded-md border border-theme-border bg-theme-surface px-3 py-1.5 text-xs text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={() => onConfirm({ prune, dryRun })}
+          disabled={pending}
+          className="inline-flex items-center gap-1.5 rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-1.5 text-xs font-medium text-amber-700 hover:bg-amber-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:text-amber-400"
+        >
+          {pending ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <History className="h-3.5 w-3.5" />}
+          {dryRun ? 'Run dry-run' : 'Roll back'}
+        </button>
+      </div>
+    </DialogPortal>
+  )
+}

package/src/components/gitops/SyncOptionsDialog.tsx

@@ -0,0 +1,144 @@
+import { useState, useEffect, type ComponentType } from 'react'
+import { DialogPortal } from '@skyhook-io/k8s-ui'
+import { Loader2, RefreshCw } from 'lucide-react'
+
+interface SyncOptionsDialogProps {
+  open: boolean
+  appLabel: string
+  pending?: boolean
+  onCancel: () => void
+  onConfirm: (opts: {
+    revision?: string
+    prune: boolean
+    dryRun: boolean
+    force: boolean
+    applyOnly: boolean
+    syncOptions: string[]
+  }) => void
+}
+
+// Modeled on ArgoCD's Sync drawer. Single Sync-now button at the bottom;
+// defaults are "what most users want" (prune true, no dry-run, no force)
+// so the common path is two clicks. Revision is optional and falls
+// through to whatever Argo had targeted before.
+export function SyncOptionsDialog({ open, appLabel, pending, onCancel, onConfirm }: SyncOptionsDialogProps) {
+  const [revision, setRevision] = useState('')
+  const [prune, setPrune] = useState(true)
+  const [dryRun, setDryRun] = useState(false)
+  const [force, setForce] = useState(false)
+  const [applyOnly, setApplyOnly] = useState(false)
+  const [replace, setReplace] = useState(false)
+  const [serverSideApply, setServerSideApply] = useState(false)
+
+  // Reset on each open so a previous attempt's flags don't leak into the
+  // next sync — easy footgun in modal-heavy flows.
+  useEffect(() => {
+    if (open) {
+      setRevision('')
+      setPrune(true)
+      setDryRun(false)
+      setForce(false)
+      setApplyOnly(false)
+      setReplace(false)
+      setServerSideApply(false)
+    }
+  }, [open])
+
+  function submit() {
+    const syncOptions: string[] = []
+    if (replace) syncOptions.push('Replace=true')
+    if (serverSideApply) syncOptions.push('ServerSideApply=true')
+    onConfirm({
+      revision: revision.trim() || undefined,
+      prune,
+      dryRun,
+      force,
+      applyOnly,
+      syncOptions,
+    })
+  }
+
+  return (
+    <DialogPortal open={open} onClose={pending ? () => {} : onCancel} className="w-[480px]" closable={!pending}>
+      <div className="border-b border-theme-border px-4 py-3">
+        <h2 className="text-sm font-semibold text-theme-text-primary">Sync 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">
+        <label className="block">
+          <span className="text-xs font-medium text-theme-text-secondary">Revision (optional)</span>
+          <input
+            type="text"
+            value={revision}
+            onChange={(e) => setRevision(e.target.value)}
+            placeholder="HEAD"
+            disabled={pending}
+            className="mt-1 w-full rounded-md border border-theme-border bg-theme-base px-2 py-1.5 font-mono text-xs text-theme-text-primary outline-none placeholder:text-theme-text-tertiary focus:border-sky-500"
+          />
+          <span className="mt-0.5 block text-[11px] text-theme-text-tertiary">
+            Branch, tag, or commit SHA. Leave empty to use the Application's targetRevision.
+          </span>
+        </label>
+
+        {/* Common (Prune / Dry run) sit above a divider; Advanced toggles
+            stay accessible but visually subordinate so the common-case user
+            can scan past them without parsing every helper line. */}
+        <fieldset className="space-y-2">
+          <legend className="mb-1 text-xs font-medium text-theme-text-secondary">Sync options</legend>
+          <Toggle label="Prune" checked={prune} onChange={setPrune} disabled={pending} hint="Delete resources that are no longer in Git." />
+          <Toggle label="Dry run" checked={dryRun} onChange={setDryRun} disabled={pending} hint="Preview only — Argo computes the diff but applies nothing." />
+        </fieldset>
+        <fieldset className="space-y-2 border-t border-theme-border pt-3">
+          <legend className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Advanced</legend>
+          <Toggle label="Apply only" checked={applyOnly} onChange={setApplyOnly} disabled={pending} hint="Skip PreSync / PostSync / SyncFail hooks." />
+          <Toggle label="Force" checked={force} onChange={setForce} disabled={pending} hint="Use kubectl --force; required for some immutable-field changes." />
+          <Toggle label="Replace" checked={replace} onChange={setReplace} disabled={pending} hint="kubectl replace instead of apply (drops fields not in source)." />
+          <Toggle label="Server-side apply" checked={serverSideApply} onChange={setServerSideApply} disabled={pending} hint="Use the K8s server-side apply mechanism for ownership tracking." />
+        </fieldset>
+      </div>
+      <div className="flex items-center justify-end gap-2 border-t border-theme-border bg-theme-base px-4 py-3">
+        <button
+          type="button"
+          onClick={onCancel}
+          disabled={pending}
+          className="rounded-md border border-theme-border bg-theme-surface px-3 py-1.5 text-xs text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          Cancel
+        </button>
+        <PrimaryButton onClick={submit} disabled={pending} icon={pending ? Loader2 : RefreshCw} loading={pending} label={dryRun ? 'Run dry-run' : 'Sync now'} />
+      </div>
+    </DialogPortal>
+  )
+}
+
+function Toggle({ label, checked, onChange, disabled, hint }: { label: string; checked: boolean; onChange: (v: boolean) => void; disabled?: boolean; hint?: string }) {
+  return (
+    <label className="flex items-start gap-2">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        disabled={disabled}
+        className="mt-0.5 h-3.5 w-3.5 cursor-pointer accent-sky-500 disabled:cursor-not-allowed"
+      />
+      <div className="min-w-0">
+        <div className="text-xs text-theme-text-primary">{label}</div>
+        {hint && <div className="text-[11px] text-theme-text-tertiary">{hint}</div>}
+      </div>
+    </label>
+  )
+}
+
+function PrimaryButton({ onClick, disabled, icon: Icon, loading, label }: { onClick: () => void; disabled?: boolean; icon: ComponentType<{ className?: string }>; loading?: boolean; label: string }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className="btn-brand inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50"
+    >
+      <Icon className={`h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`} />
+      {label}
+    </button>
+  )
+}

package/src/components/helm/HelmReleaseDrawer.tsx

@@ -1,10 +1,11 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
 import { flushSync } from 'react-dom'
-import { PaneLoader } from '@skyhook-io/k8s-ui'
+import { PaneLoader, useDockReservedHeight } from '@skyhook-io/k8s-ui'
 import { startViewTransitionSafe } from '@skyhook-io/k8s-ui/utils/view-transition'
 import { TRANSITION_DRAWER } from '../../utils/animation'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
-import { X, Copy, Check, RefreshCw, Package, Code, History, FileText, Settings, Link2, Anchor, GitFork, BookOpen, ArrowUpCircle, Trash2 } from 'lucide-react'
+import { X, Copy, Check, RefreshCw, Package, Code, History, FileText, Settings, Link2, Anchor, GitFork, BookOpen, ArrowUpCircle, Trash2, GitBranch } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
 import { clsx } from 'clsx'
 import { useHelmRelease, useHelmManifest, useHelmValues, useHelmManifestDiff, useHelmUpgradeInfo, useHelmUninstall, upgradeWithProgress, rollbackWithProgress } from '../../api/client'
 import { useQueryClient } from '@tanstack/react-query'
@@ -37,6 +38,7 @@ const MAX_WIDTH_PERCENT = 0.8
 const DEFAULT_WIDTH = 1000
 
 export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOpen = true }: HelmReleaseDrawerProps) {
+  const navigate = useNavigate()
   const [activeTab, setActiveTab] = useState<TabId>('overview')
   const [copied, setCopied] = useState<string | null>(null)
   const [drawerWidth, setDrawerWidth] = useState(DEFAULT_WIDTH)
@@ -279,6 +281,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
   }
 
   const headerHeight = 49
+  const dockInset = useDockReservedHeight()
 
   const tabs: { id: TabId; label: string; icon: typeof Package }[] = [
     { id: 'overview', label: 'Overview', icon: Package },
@@ -301,7 +304,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
         TRANSITION_DRAWER,
         isOpen ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'
       )}
-      style={{ width: drawerWidth, top: headerHeight, height: `calc(100vh - ${headerHeight}px)` }}
+      style={{ width: drawerWidth, top: headerHeight, height: `calc(100vh - ${headerHeight}px - ${dockInset}px)` }}
     >
       {/* Resize handle */}
       <div
@@ -405,6 +408,20 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
             </button>
           </div>
           <p className="text-sm text-theme-text-tertiary">{release.namespace}</p>
+          {releaseDetail?.managedByFluxHelmRelease && (
+            <button
+              type="button"
+              onClick={() => {
+                const [ns, name] = releaseDetail.managedByFluxHelmRelease!.split('/')
+                navigate(`/gitops/detail/helmreleases/${encodeURIComponent(ns || '_')}/${encodeURIComponent(name)}`)
+              }}
+              className="mt-1 inline-flex items-center gap-1 rounded border border-amber-500/40 bg-amber-500/10 px-1.5 py-0.5 text-[11px] text-amber-700 dark:text-amber-400 hover:bg-amber-500/20 transition-colors"
+              title={`Installed by Flux helm-controller via HelmRelease ${releaseDetail.managedByFluxHelmRelease}. Changes here would be reverted at the next reconcile.`}
+            >
+              <GitBranch className="w-3 h-3" />
+              Managed by Flux · {releaseDetail.managedByFluxHelmRelease}
+            </button>
+          )}
         </div>
 
         {/* Tabs */}

package/src/components/helm/HelmView.tsx

@@ -1,7 +1,7 @@
 import { useState, useMemo, useRef, useEffect, useCallback, forwardRef } from 'react'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
-import { Package, Search, RefreshCw, ArrowUpCircle, LayoutGrid, List, Shield } from 'lucide-react'
+import { Package, Search, RefreshCw, ArrowUpCircle, LayoutGrid, List, Shield, GitBranch } from 'lucide-react'
 import { PaneLoader } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
 import { useHelmReleases, useHelmBatchUpgradeInfo, isForbiddenError } from '../../api/client'
@@ -453,6 +453,14 @@ const ReleaseRow = forwardRef<HTMLTableRowElement, ReleaseRowProps>(
           <Package className="w-4 h-4 text-theme-text-tertiary shrink-0" />
           <span className="text-sm text-theme-text-primary font-medium truncate">{release.name}</span>
           {getHealthBadge()}
+          {release.managedByFluxHelmRelease && (
+            <Tooltip content={`Installed by Flux helm-controller via HelmRelease ${release.managedByFluxHelmRelease}. Changes here will be reverted at the next reconcile — manage via the GitOps tab.`}>
+              <span className="badge-sm shrink-0 border border-theme-border bg-theme-elevated text-theme-text-secondary">
+                <GitBranch className="w-3 h-3" />
+                Flux
+              </span>
+            </Tooltip>
+          )}
           {upgradeInfo?.updateAvailable && (
             <Tooltip content={`Upgrade available: ${release.chartVersion} → ${upgradeInfo.latestVersion}`}>
               <span className={clsx('badge-sm shrink-0', SEVERITY_BADGE.warning)}>

package/src/components/helm/OwnedResources.tsx

@@ -4,7 +4,7 @@ import { getResourceIcon } from '../../utils/resource-icons'
 import { clsx } from 'clsx'
 import type { HelmOwnedResource } from '../../types'
 import type { NavigateToResource } from '../../utils/navigation'
-import { kindToPlural } from '../../utils/navigation'
+import { kindToPlural, apiVersionToGroup } from '../../utils/navigation'
 import { getResourceStatusColor, SEVERITY_BADGE } from '../../utils/badge-colors'
 import { useQueryClient } from '@tanstack/react-query'
 import { useOpenTerminal, useOpenLogs } from '../dock'
@@ -205,7 +205,7 @@ function ResourceItem({ resource, onNavigate }: ResourceItemProps) {
 
   const handleClick = () => {
     if (onNavigate) {
-      onNavigate({ kind: kindToPlural(resource.kind), namespace: resource.namespace, name: resource.name })
+      onNavigate({ kind: kindToPlural(resource.kind), namespace: resource.namespace, name: resource.name, group: apiVersionToGroup(resource.apiVersion) })
     }
   }
 

package/src/components/home/GitOpsControllersCard.tsx

@@ -0,0 +1,108 @@
+import { GitBranch, AlertCircle, CheckCircle2 } from 'lucide-react'
+import type { DashboardGitOpsControllers, DashboardGitOpsController } from '../../api/client'
+import { clsx } from 'clsx'
+
+interface GitOpsControllersCardProps {
+  data: DashboardGitOpsControllers
+  onNavigate: () => void
+}
+
+// GitOpsControllersCard surfaces Argo CD / Flux controller pod health
+// on the Home dashboard so an operator can spot "source-controller is
+// CrashLoopBackOff" before drilling into individual GitOps applications
+// and seeing the *symptoms* (apps stuck OutOfSync, sources unfetched).
+//
+// Capability-gated: the parent only renders this card when the backend
+// actually detected controllers in the cluster (DashboardResponse.gitopsControllers
+// is null on non-GitOps clusters). The card itself doesn't have an
+// "empty state" branch — by the time we get here, we have something to show.
+export function GitOpsControllersCard({ data, onNavigate }: GitOpsControllersCardProps) {
+  const headerTone =
+    data.status === 'crashing'
+      ? 'text-red-500'
+      : data.status === 'degraded'
+        ? 'text-amber-400'
+        : 'text-emerald-500'
+
+  const headerLabel =
+    data.status === 'crashing'
+      ? 'Controllers crashing'
+      : data.status === 'degraded'
+        ? 'Controllers degraded'
+        : 'Controllers healthy'
+
+  // Group controllers by tool so the card reads as two sections (Argo +
+  // Flux) when both are installed. Operators with only one tool see a
+  // single-section card without empty placeholders.
+  const argo = data.controllers.filter((c) => c.tool === 'argocd')
+  const flux = data.controllers.filter((c) => c.tool === 'fluxcd')
+
+  return (
+    <button
+      type="button"
+      onClick={onNavigate}
+      className="flex flex-col gap-3 rounded-xl bg-theme-surface p-4 text-left shadow-theme-sm transition-colors hover:bg-theme-hover"
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <GitBranch className="h-4 w-4 text-theme-text-tertiary" />
+          <span className="text-xs font-semibold uppercase tracking-wider text-theme-text-secondary">
+            GitOps Controllers
+          </span>
+        </div>
+        <span className={clsx('text-[11px] font-medium', headerTone)}>{headerLabel}</span>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        {argo.length > 0 && <ControllerSection label="Argo CD" controllers={argo} />}
+        {flux.length > 0 && <ControllerSection label="Flux CD" controllers={flux} />}
+      </div>
+    </button>
+  )
+}
+
+function ControllerSection({ label, controllers }: { label: string; controllers: DashboardGitOpsController[] }) {
+  return (
+    <div>
+      <div className="mb-1 text-[10px] font-medium uppercase tracking-wide text-theme-text-tertiary">{label}</div>
+      <div className="flex flex-col gap-1">
+        {controllers.map((c) => (
+          <ControllerRow key={`${c.tool}-${c.name}`} c={c} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function ControllerRow({ c }: { c: DashboardGitOpsController }) {
+  // Per-row tone matches the per-controller status. We don't reuse
+  // mapHealthToTone because the controller status vocabulary
+  // (healthy/degraded/crashing/pending) is different from resource
+  // health (Healthy/Degraded/Missing/etc). Mapping inline keeps the
+  // intent obvious.
+  const tone =
+    c.status === 'crashing'
+      ? 'text-red-500'
+      : c.status === 'degraded' || c.status === 'pending'
+        ? 'text-amber-400'
+        : 'text-emerald-500'
+  const Icon = c.status === 'crashing' ? AlertCircle : c.status === 'degraded' || c.status === 'pending' ? AlertCircle : CheckCircle2
+  return (
+    <div className="flex items-center justify-between gap-2 text-[12px]">
+      <div className="flex min-w-0 items-center gap-1.5">
+        <Icon className={clsx('h-3 w-3 shrink-0', tone)} />
+        <span className="truncate text-theme-text-primary">{c.name}</span>
+      </div>
+      <div className="flex shrink-0 items-center gap-1.5 text-[11px] text-theme-text-secondary">
+        <span>
+          {c.ready}/{c.total} ready
+        </span>
+        {c.crashReason && (
+          <span className={clsx('rounded border px-1 py-px text-[10px] font-medium', 'border-red-500/40 bg-red-500/10 text-red-400')}>
+            {c.crashReason}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/home/HomeView.tsx

@@ -9,6 +9,7 @@ import { TrafficSummary } from './TrafficSummary'
 import { CertificateHealthCard } from './CertificateHealthCard'
 import { NetworkPolicyCoverageCard } from './NetworkPolicyCoverageCard'
 import { CostCard } from './CostCard'
+import { GitOpsControllersCard } from './GitOpsControllersCard'
 import { AuditCard, PaneLoader, StatusDot, mapHealthToTone } from '@skyhook-io/k8s-ui'
 import { ClusterHealthCard } from './ClusterHealthCard'
 import { AlertTriangle, Loader2, Shield } from 'lucide-react'
@@ -120,7 +121,7 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
             </div>
 
             {/* Health & compliance cards — 3-col when enough cards, 2-col fallback */}
-            {(data.certificateHealth || data.networkPolicyCoverage || data.audit) && (() => {
+            {(data.certificateHealth || data.networkPolicyCoverage || data.audit || data.gitopsControllers) && (() => {
               const healthCards = [
                 data.certificateHealth && (
                   <CertificateHealthCard
@@ -136,6 +137,13 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
                     onNavigate={() => onNavigateToResourceKind('networkpolicies', 'networking.k8s.io')}
                   />
                 ),
+                data.gitopsControllers && (
+                  <GitOpsControllersCard
+                    key="gitops-controllers"
+                    data={data.gitopsControllers}
+                    onNavigate={() => onNavigateToView('gitops')}
+                  />
+                ),
                 data.audit && (
                   <AuditCard
                     key="audit"

package/src/components/resources/ResourcesView.tsx

@@ -1,7 +1,7 @@
 import { useState, useMemo, useCallback, useEffect } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
-import { ApiError, fetchJSON, isForbiddenError, useSecretCertExpiry, useTopPodMetrics, useTopNodeMetrics } from '../../api/client'
+import { ApiError, debugNamespaceLog, fetchJSON, isForbiddenError, useSecretCertExpiry, useTopPodMetrics, useTopNodeMetrics } from '../../api/client'
 import { apiUrl, getAuthHeaders, getCredentialsMode, getBasename } from '../../api/config'
 import { useAPIResources } from '../../api/apiResources'
 import { initNavigationMap } from '@skyhook-io/k8s-ui'
@@ -52,7 +52,17 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
     queryFn: async () => {
       const params = new URLSearchParams()
       if (namespaces.length > 0) params.set('namespaces', namespacesParam)
-      return fetchJSON<ResourceCountsResponse>(`/resource-counts?${params}`)
+      const startedAt = performance.now()
+      debugNamespaceLog('resources:counts-fetch-start', { namespaces, params: params.toString() })
+      try {
+        return await fetchJSON<ResourceCountsResponse>(`/resource-counts?${params}`)
+      } finally {
+        debugNamespaceLog('resources:counts-fetch-end', {
+          namespaces,
+          params: params.toString(),
+          durationMs: Math.round(performance.now() - startedAt),
+        })
+      }
     },
     staleTime: 10000,
     refetchInterval: 60000, // Safety net — SSE k8s_event drives near-real-time invalidation
@@ -75,10 +85,25 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       const params = new URLSearchParams()
       if (namespaces.length > 0) params.set('namespaces', namespacesParam)
       if (isSelectedCrd && selectedKind.group) params.set('group', selectedKind.group)
+      const startedAt = performance.now()
+      debugNamespaceLog('resources:selected-kind-fetch-start', {
+        kind: selectedKind.name,
+        group: isSelectedCrd ? selectedKind.group : '',
+        namespaces,
+        params: params.toString(),
+      })
       const res = await fetch(apiUrl(`/resources/${selectedKind.name}?${params}`), {
         credentials: getCredentialsMode(),
         headers: getAuthHeaders(),
       })
+      debugNamespaceLog('resources:selected-kind-fetch-response', {
+        kind: selectedKind.name,
+        group: isSelectedCrd ? selectedKind.group : '',
+        namespaces,
+        params: params.toString(),
+        status: res.status,
+        durationMs: Math.round(performance.now() - startedAt),
+      })
       if (!res.ok) {
         const errorData = await res.json().catch(() => ({ error: `HTTP ${res.status}` }))
         throw new ApiError(errorData.error || `Failed to fetch ${selectedKind.name}`, res.status, errorData)

package/src/components/resources/resource-utils.ts

@@ -1,5 +1,6 @@
 // Re-export all resource utilities from the shared @skyhook-io/k8s-ui package.
 export * from '@skyhook-io/k8s-ui/components/resources/resource-utils'
 
-// Backward compatibility: re-export formatBytes (previously re-exported here)
+// formatBytes lives in utils/format but is re-exported here so consumers
+// can import it from the same module as the rest of the resource utilities.
 export { formatBytes } from '@skyhook-io/k8s-ui/utils/format'

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -26,8 +26,9 @@ import {
 import { useHasLimitedAccess } from '../../contexts/CapabilitiesContext'
 import type { TimelineEvent, Topology } from '../../types'
 import type { NavigateToResource } from '../../utils/navigation'
-import { kindToPlural } from '../../utils/navigation'
-import { PaneLoader, pluralize } from '@skyhook-io/k8s-ui'
+import { kindToPlural, apiVersionToGroup } from '../../utils/navigation'
+import { PaneLoader, pluralize, gitOpsRouteForKind } from '@skyhook-io/k8s-ui'
+import { useNavigate } from 'react-router-dom'
 import { isChangeEvent, isHistoricalEvent, isOperation, displayKind } from '../../types'
 import { DiffViewer } from './DiffViewer'
 import { getOperationColor, getHealthBadgeColor, getEventTypeColor } from '../../utils/badge-colors'
@@ -174,7 +175,20 @@ function calculateInterestingnessWithBreakdown(lane: ResourceLane): ScoreBreakdo
 }
 
 export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode, onViewModeChange, topology, namespaces }: TimelineSwimlanesProps) {
+  const navigate = useNavigate()
   const hasLimitedAccess = useHasLimitedAccess()
+  // Timeline lane labels for GitOps CRs (Application/Kustomization/HelmRelease)
+  // deep-link to GitOps detail rather than the resource drawer — the lane is
+  // already telling the user "this controller had changes/events"; the GitOps
+  // tab is the right place to investigate further.
+  const handleLaneOpen = useCallback((kind: string, namespace: string, name: string, group?: string) => {
+    const gitOpsPath = gitOpsRouteForKind(kind, namespace, name)
+    if (gitOpsPath) {
+      navigate(gitOpsPath)
+      return
+    }
+    onResourceClick?.({ kind: kindToPlural(kind), namespace, name, group })
+  }, [navigate, onResourceClick])
   const containerRef = useRef<HTMLDivElement>(null)
   const searchInputRef = useRef<HTMLInputElement>(null)
   const [zoom, setZoom] = useState(1)
@@ -682,7 +696,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                         )}
                         <div
                           className="flex-1 min-w-0 cursor-pointer hover:bg-theme-surface/30 rounded px-1 -mx-1 group"
-                          onClick={() => onResourceClick?.({ kind: kindToPlural(lane.kind), namespace: lane.namespace, name: lane.name })}
+                          onClick={() => handleLaneOpen(lane.kind, lane.namespace, lane.name, lane.group)}
                         >
                           <div className="flex items-center gap-1">
                             <span className={clsx(
@@ -760,7 +774,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                           <div className="flex">
                             <div
                               className="w-[19.25rem] shrink-0 border-r border-theme-border/50 pl-4 pr-3 py-1.5 flex items-center gap-2 cursor-pointer hover:bg-theme-elevated/30 group"
-                              onClick={() => onResourceClick?.({ kind: kindToPlural(lane.kind), namespace: lane.namespace, name: lane.name })}
+                              onClick={() => handleLaneOpen(lane.kind, lane.namespace, lane.name, lane.group)}
                             >
                               <div className="flex-1 min-w-0">
                                 <div className="flex items-center gap-1">
@@ -812,7 +826,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                             {/* Child lane label - indented */}
                             <div
                               className="w-[19.25rem] shrink-0 border-r border-theme-border/50 pl-4 pr-3 py-1.5 flex items-center gap-2 cursor-pointer hover:bg-theme-elevated/30 group"
-                              onClick={() => onResourceClick?.({ kind: kindToPlural(child.kind), namespace: child.namespace, name: child.name })}
+                              onClick={() => handleLaneOpen(child.kind, child.namespace, child.name, child.group)}
                             >
                               <div className="flex-1 min-w-0">
                                 <div className="flex items-center gap-1">
@@ -1234,7 +1248,7 @@ function EventDetailPanel({ event, onClose, onResourceClick }: EventDetailPanelP
               {displayKind(event.kind)}
             </span>
             <button
-              onClick={() => onResourceClick?.({ kind: kindToPlural(event.kind), namespace: event.namespace, name: event.name })}
+              onClick={() => onResourceClick?.({ kind: kindToPlural(event.kind), namespace: event.namespace, name: event.name, group: apiVersionToGroup(event.apiVersion) })}
               className="text-theme-text-primary font-medium hover:text-accent-text"
             >
               {event.name}