@skyhook-io/radar-app 1.0.1 → 1.1.0

package/src/components/ui/CommandPalette.tsx

@@ -2,11 +2,12 @@ import { useState, useMemo, useRef, useEffect, useCallback } from 'react'
 import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
 import { Search, X, ChevronRight } from 'lucide-react'
 import { Home, Network, List, Clock, Package, Activity, Sun, Stethoscope, DollarSign, ShieldCheck } from 'lucide-react'
+import { GitBranch } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useNamespaces, useContexts } from '../../api/client'
 import { CORE_RESOURCES, useAPIResources } from '../../api/apiResources'
 import { getResourceIcon } from '../../utils/resource-icons'
-type MainView = 'home' | 'topology' | 'resources' | 'timeline' | 'helm' | 'traffic' | 'cost' | 'audit'
+type MainView = 'home' | 'topology' | 'resources' | 'timeline' | 'helm' | 'traffic' | 'cost' | 'audit' | 'gitops'
 
 interface CommandPaletteProps {
   onClose: () => void
@@ -154,9 +155,10 @@ export function CommandPalette({
       { view: 'resources', label: 'Resources', icon: List, shortcut: '3' },
       { view: 'timeline', label: 'Timeline', icon: Clock, shortcut: '4' },
       { view: 'helm', label: 'Helm', icon: Package, shortcut: '5' },
-      { view: 'traffic', label: 'Traffic', icon: Activity, shortcut: '6' },
-      { view: 'cost', label: 'Cost', icon: DollarSign, shortcut: '7' },
-      { view: 'audit', label: 'Audit', icon: ShieldCheck, shortcut: '8' },
+      { view: 'gitops', label: 'GitOps', icon: GitBranch, shortcut: '6' },
+      { view: 'traffic', label: 'Traffic', icon: Activity, shortcut: '7' },
+      { view: 'cost', label: 'Cost', icon: DollarSign, shortcut: '8' },
+      { view: 'audit', label: 'Audit', icon: ShieldCheck, shortcut: '9' },
     ]
     for (const v of viewEntries) {
       result.push({

package/src/components/ui/ShortcutHelpOverlay.tsx

@@ -19,7 +19,7 @@ const CONTEXT_CATEGORIES: ShortcutCategory[] = ['Drawer', 'Dock']
 
 // Preferred ordering within the view section
 const VIEW_CATEGORY_ORDER: ShortcutCategory[] = [
-  'Search', 'Table', 'Resource Actions', 'Topology', 'Timeline', 'Helm',
+  'Search', 'Table', 'Resource Actions', 'Topology', 'Timeline', 'Helm', 'GitOps',
 ]
 
 const VIEW_LABELS: Record<string, string> = {
@@ -28,6 +28,7 @@ const VIEW_LABELS: Record<string, string> = {
   resources: 'Resources',
   timeline: 'Timeline',
   helm: 'Helm',
+  gitops: 'GitOps',
   traffic: 'Traffic',
 }
 

package/src/components/ui/UpdateNotification.tsx

@@ -8,6 +8,7 @@ import {
   useApplyDesktopUpdate,
 } from '../../api/client'
 import type { DesktopUpdateState } from '../../api/client'
+import { WithTooltip } from './Tooltip'
 
 const DISMISSED_KEY = 'radar-update-dismissed'
 
@@ -117,7 +118,7 @@ export function UpdateNotification() {
           <UpdateIcon state={effectiveState} />
         </div>
         <div className="flex-1 min-w-0">
-          <h4 className="text-sm font-medium text-theme-text-primary">
+          <h4 className="text-sm font-medium text-theme-text-primary pr-6">
             <UpdateTitle state={effectiveState} />
           </h4>
           <p className="text-xs text-theme-text-secondary mt-1">
@@ -140,15 +141,30 @@ export function UpdateNotification() {
 
           {/* CLI: show update command with copy button for package managers */}
           {!isDesktop && versionInfo.updateCommand ? (
-            <button
-              onClick={handleCopyCommand}
-              className="flex items-center gap-2 mt-2 px-2 py-1.5 bg-theme-elevated rounded text-xs font-mono text-theme-text-primary hover:bg-theme-surface-hover transition-colors w-full"
-            >
-              <code className="flex-1 text-left truncate">{versionInfo.updateCommand}</code>
-              <CopyIcon copied={copied} failed={copyFailed} />
-            </button>
+            <>
+              <WithTooltip tip={versionInfo.updateCommand} delay={100}>
+                <button
+                  onClick={handleCopyCommand}
+                  className="flex items-center gap-2 mt-2 px-2 py-1.5 bg-theme-elevated rounded font-mono text-theme-text-primary hover:bg-theme-surface-hover transition-colors w-full"
+                >
+                  <code className="flex-1 text-left truncate text-[11px]">{versionInfo.updateCommand}</code>
+                  <CopyIcon copied={copied} failed={copyFailed} />
+                </button>
+              </WithTooltip>
+              {/* Direct installs may have placed the binary somewhere the install
+                  script won't touch — surface a download link as a fallback. */}
+              {versionInfo.installMethod === 'direct' && versionInfo.releaseUrl && (
+                <a
+                  href={versionInfo.releaseUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1 mt-1.5 text-xs text-theme-text-tertiary hover:text-theme-text-secondary hover:underline"
+                >
+                  or download from GitHub →
+                </a>
+              )}
+            </>
           ) : (
-            /* Direct download - show release link */
             !isDesktop && versionInfo.releaseUrl && (
               <a
                 href={versionInfo.releaseUrl}
@@ -161,17 +177,18 @@ export function UpdateNotification() {
             )
           )}
         </div>
-        {/* Don't show dismiss during active update */}
-        {effectiveState !== 'downloading' && effectiveState !== 'applying' && (
-          <button
-            onClick={handleDismiss}
-            className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded shrink-0"
-            aria-label="Dismiss"
-          >
-            <X className="w-4 h-4" />
-          </button>
-        )}
       </div>
+      {/* Dismiss is absolute so it doesn't compress the chip's width.
+          fixed on the parent already establishes the positioning context. */}
+      {effectiveState !== 'downloading' && effectiveState !== 'applying' && (
+        <button
+          onClick={handleDismiss}
+          className="absolute top-2 right-2 p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+          aria-label="Dismiss"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      )}
     </div>
   )
 }

package/src/components/workload/WorkloadView.tsx

@@ -6,9 +6,11 @@ import { Terminal } from 'lucide-react'
 import {
   WorkloadView as BaseWorkloadView,
   type RendererOverrides,
+  type GitOpsOwnerRef,
+  gitOpsRouteForOwner,
 } from '@skyhook-io/k8s-ui'
 import type { SelectedResource, ResourceRef, ResolvedEnvFrom } from '../../types'
-import { kindToPlural, type NavigateToResource } from '../../utils/navigation'
+import { kindToPlural, buildWorkloadPath, type NavigateToResource } from '../../utils/navigation'
 import {
   useChanges, useResourceWithRelationships, usePodLogs, useTopology, useUpdateResource,
   useDeleteResource, useTriggerCronJob, useSuspendCronJob, useResumeCronJob,
@@ -21,7 +23,7 @@ import {
   fetchJSON,
 } from '../../api/client'
 import { PrometheusCharts, isPrometheusSupported } from '../resource/PrometheusCharts'
-import { useResourceAudit } from '../../api/client'
+import { useResourceAudit, useResources } from '../../api/client'
 import { AuditAlerts } from '@skyhook-io/k8s-ui'
 import { WorkloadLogsViewer } from '../logs/WorkloadLogsViewer'
 import { LogsViewer } from '../logs/LogsViewer'
@@ -35,6 +37,7 @@ import { ServiceRenderer } from '../resources/renderers/ServiceRenderer'
 import { WorkloadRenderer } from '../resources/renderers/WorkloadRenderer'
 import { CreateResourceDialog } from '../shared/CreateResourceDialog'
 import { cleanYamlForDuplicate } from '../../utils/skeleton-yaml'
+import { useDesktopDownload } from '../../hooks/useDesktopDownload'
 
 type TabType = 'overview' | 'timeline' | 'logs' | 'metrics' | 'yaml'
 
@@ -54,13 +57,19 @@ interface WorkloadViewRouteProps {
 export function WorkloadViewRoute({ onNavigateToResource }: WorkloadViewRouteProps) {
   const location = useLocation()
   const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
 
-  // Parse /workload/:kind/:ns/:name from pathname
+  // Parse /workload/:kind/:ns/:name from pathname. Segments are URL-encoded by
+  // buildWorkloadPath; names can also contain literal slashes (e.g. some CRD names),
+  // which survive encoding as %2F and reassemble correctly here.
   const parts = location.pathname.replace(/^\//, '').split('/')
-  // parts[0] = 'workload', parts[1] = kind, parts[2] = ns, parts[3+] = name (may contain slashes)
-  const kind = parts[1] || ''
-  const namespace = parts[2] || ''
-  const name = parts.slice(3).join('/') || ''
+  const decode = (s: string): string => {
+    try { return decodeURIComponent(s) } catch { return s }
+  }
+  const kind = decode(parts[1] ?? '')
+  const namespace = decode(parts[2] ?? '')
+  const name = parts.slice(3).map(decode).join('/')
+  const group = searchParams.get('apiGroup') || ''
 
   if (!kind || !namespace || !name) {
     return (
@@ -79,8 +88,7 @@ export function WorkloadViewRoute({ onNavigateToResource }: WorkloadViewRoutePro
   }, [navigate])
 
   const handleNavigate = useCallback((resource: SelectedResource) => {
-    // Navigate to another workload view
-    navigate(`/workload/${resource.kind}/${resource.namespace}/${resource.name}`)
+    navigate(buildWorkloadPath(resource))
   }, [navigate])
 
   return (
@@ -88,6 +96,7 @@ export function WorkloadViewRoute({ onNavigateToResource }: WorkloadViewRoutePro
       kind={kind}
       namespace={namespace}
       name={name}
+      group={group}
       onBack={handleBack}
       onNavigateToResource={onNavigateToResource || handleNavigate}
     />
@@ -315,11 +324,22 @@ export function WorkloadView({
   const canUpdateSecrets = useCanUpdateSecrets()
   const updateResource = useUpdateResource()
   const actionsBarProps = useActionsBarProps(kindProp, namespace, name)
+  const desktopDownload = useDesktopDownload()
 
   const handleUpdateResource = useCallback(async (params: { kind: string; namespace: string; name: string; yaml: string }) => {
     await updateResource.mutateAsync(params)
   }, [updateResource])
 
+  const navigateRouter = useNavigate()
+  const handleOpenGitOpsResource = useCallback(
+    (ref: GitOpsOwnerRef) => navigateRouter(gitOpsRouteForOwner(ref)),
+    [navigateRouter],
+  )
+  const handleNavigateGitOpsPath = useCallback(
+    (path: string) => navigateRouter(path),
+    [navigateRouter],
+  )
+
   // Duplicate dialog
   const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false)
   const [duplicateYaml, setDuplicateYaml] = useState('')
@@ -370,12 +390,18 @@ export function WorkloadView({
         isPrometheusSupported(kind) && !(kind === 'Pod' && res?.status?.phase === 'Pending')
       }
       onDuplicate={handleDuplicate}
+      onDownload={desktopDownload}
       actionsBarProps={actionsBarProps}
       rendererOverrides={rendererOverrides}
       resolvedEnvFrom={resolvedEnvFrom}
       renderOverviewExtra={({ kind: k, namespace: ns, name: n }) => (
-        <AuditSection kind={k} namespace={ns} name={n} />
+        <>
+          <AuditSection kind={k} namespace={ns} name={n} />
+          <FluxSourceConsumersSection kind={k} namespace={ns} name={n} />
+        </>
       )}
+      onOpenGitOpsResource={handleOpenGitOpsResource}
+      onNavigateGitOpsPath={handleNavigateGitOpsPath}
     />
     <CreateResourceDialog
       open={duplicateDialogOpen}
@@ -546,3 +572,93 @@ function AuditSection({ kind, namespace, name }: { kind: string; namespace: stri
   if (!findings || findings.length === 0) return null
   return <AuditAlerts findings={findings} onViewAll={() => navigate('/audit')} />
 }
+
+// FluxSourceConsumersSection lists the reconcilers (Kustomization, HelmRelease)
+// that reference this Flux source CR — the inverse of `spec.sourceRef`. Renders
+// only when the focused resource is a Flux source kind; otherwise null. Sources
+// can have many consumers (one repo feeding multiple apps), so this answers
+// "if I edit this source, what gets affected on the next reconcile?".
+//
+// Filtering happens client-side off the namespaced reconciler lists — these
+// are typically small (tens, not thousands) and the dynamic informer cache
+// makes the request cheap. If a cluster ever has thousands of HelmReleases,
+// a dedicated /api/gitops/consumers endpoint would be the right move; today
+// it'd be premature.
+// Outer component is cheap — it does only the kind check and decides whether
+// to mount the data-fetching child. Without this split, useResources would
+// fire two API calls on EVERY workload drawer open (Pod, Deployment, Service,
+// …), since the hook has no `enabled` flag and can't be conditionally called
+// (Rules of Hooks). The hooks only need to run when the focused resource is
+// actually a Flux source CR.
+function FluxSourceConsumersSection({ kind, namespace, name }: { kind: string; namespace: string; name: string }) {
+  // The inner WorkloadView de-pluralizes the URL's plural form, which gives
+  // "Gitrepository" (single-uppercase) rather than the wire-correct
+  // "GitRepository" — so we match lowercase. spec.sourceRef.kind on consumers
+  // is always wire-correct, so we look that up separately.
+  const sourceKind = FLUX_SOURCE_KIND_BY_LOWER.get(kind.toLowerCase()) ?? null
+  if (!sourceKind) return null
+  return <FluxSourceConsumersInner sourceKind={sourceKind} namespace={namespace} name={name} />
+}
+
+function FluxSourceConsumersInner({ sourceKind, namespace, name }: { sourceKind: string; namespace: string; name: string }) {
+  const navigate = useNavigate()
+  const { data: kustomizations } = useResources<any>('kustomizations', undefined, 'kustomize.toolkit.fluxcd.io')
+  const { data: helmReleases } = useResources<any>('helmreleases', undefined, 'helm.toolkit.fluxcd.io')
+
+  const consumers: Array<{ kind: 'Kustomization' | 'HelmRelease'; namespace: string; name: string; plural: string }> = []
+  for (const k of kustomizations ?? []) {
+    const ref = k?.spec?.sourceRef ?? {}
+    const refNs = ref.namespace || k?.metadata?.namespace
+    if (ref.kind === sourceKind && ref.name === name && refNs === namespace) {
+      consumers.push({ kind: 'Kustomization', namespace: k.metadata.namespace, name: k.metadata.name, plural: 'kustomizations' })
+    }
+  }
+  for (const h of helmReleases ?? []) {
+    const ref = h?.spec?.chart?.spec?.sourceRef ?? {}
+    const refNs = ref.namespace || h?.metadata?.namespace
+    if (ref.kind === sourceKind && ref.name === name && refNs === namespace) {
+      consumers.push({ kind: 'HelmRelease', namespace: h.metadata.namespace, name: h.metadata.name, plural: 'helmreleases' })
+    }
+  }
+
+  if (consumers.length === 0) {
+    return (
+      <div className="rounded-lg border border-theme-border bg-theme-elevated/40 p-3 text-xs text-theme-text-tertiary">
+        Consumed by — no Kustomization or HelmRelease references this source.
+      </div>
+    )
+  }
+
+  return (
+    <div className="rounded-lg border border-theme-border bg-theme-elevated/40 p-3">
+      <h3 className="mb-2 text-xs font-medium text-theme-text-secondary">
+        Consumed by ({consumers.length})
+      </h3>
+      <div className="flex flex-wrap gap-1.5">
+        {consumers.map((c) => (
+          <button
+            key={`${c.kind}/${c.namespace}/${c.name}`}
+            onClick={() => navigate(`/gitops/detail/${c.plural}/${encodeURIComponent(c.namespace)}/${encodeURIComponent(c.name)}`)}
+            className="inline-flex items-center gap-1.5 rounded border border-theme-border bg-theme-surface px-1.5 py-0.5 text-[11px] text-theme-text-secondary hover:border-skyhook-500/60 hover:text-skyhook-500 transition-colors"
+            title={`${c.kind} ${c.namespace}/${c.name}`}
+          >
+            <span className="text-theme-text-tertiary">{c.kind === 'HelmRelease' ? 'HR' : 'K'}</span>
+            <span>{c.namespace}/{c.name}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// FLUX_SOURCE_KIND_BY_LOWER maps lowercase kind (what the inner WorkloadView
+// produces via its plural-to-singular fallback) to the wire-correct
+// PascalCase form that consumers carry in spec.sourceRef.kind. HelmChart is
+// intentionally absent — it's an auto-generated internal CR, not something
+// users create or point reconcilers at directly.
+const FLUX_SOURCE_KIND_BY_LOWER = new Map<string, string>([
+  ['gitrepository', 'GitRepository'],
+  ['helmrepository', 'HelmRepository'],
+  ['ocirepository', 'OCIRepository'],
+  ['bucket', 'Bucket'],
+])

package/src/types.ts

@@ -1,3 +1,5 @@
 // Re-export all types from the shared @skyhook-io/k8s-ui package.
 // This file exists for backward compatibility — new code should import from '@skyhook-io/k8s-ui' directly.
 export * from '@skyhook-io/k8s-ui/types/core'
+export * from '@skyhook-io/k8s-ui/types/gitops-tree'
+export * from '@skyhook-io/k8s-ui/types/gitops-insights'

package/src/utils/navigation.ts

@@ -1,9 +1,22 @@
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../api/config'
+import type { SelectedResource } from '@skyhook-io/k8s-ui/types/core'
 
 // Re-export shared navigation utilities from @skyhook-io/k8s-ui.
-export { kindToPlural, pluralToKind, refToSelectedResource } from '@skyhook-io/k8s-ui/utils/navigation'
+export { kindToPlural, pluralToKind, refToSelectedResource, apiVersionToGroup } from '@skyhook-io/k8s-ui/utils/navigation'
 export type { NavigateToResource } from '@skyhook-io/k8s-ui/utils/navigation'
 
+/**
+ * Build a /workload/:kind/:namespace/:name URL, preserving the API group as a
+ * query param so the WorkloadView can resolve CRDs with colliding kind names.
+ */
+export function buildWorkloadPath(resource: SelectedResource): string {
+  const kind = encodeURIComponent(resource.kind)
+  const namespace = encodeURIComponent(resource.namespace)
+  const name = encodeURIComponent(resource.name)
+  const base = `/workload/${kind}/${namespace}/${name}`
+  return resource.group ? `${base}?apiGroup=${encodeURIComponent(resource.group)}` : base
+}
+
 // radar-specific: open URL in system browser (desktop app support)
 export function openExternal(url: string): void {
   fetch(apiUrl('/desktop/open-url'), {