@skyhook-io/k8s-ui 1.6.0 → 1.6.2

package/src/components/gitops/RollbackDialog.tsx

@@ -0,0 +1,117 @@
+import { useState, useEffect } from 'react'
+import { History, Loader2 } from 'lucide-react'
+
+import { DialogPortal } from '../ui/DialogPortal'
+import { Tooltip } from '../ui/Tooltip'
+
+// =============================================================================
+// RollbackDialog — Argo CD Application rollback confirmation. Shared
+// between per-cluster Radar (OSS web/) and Radar Hub's fleet GitOps
+// detail page. Presentational only; caller mints the historyId/revision
+// from the clicked GitOpsHistoryItem and handles the POST to
+// /api/argo/applications/{ns}/{name}/rollback in onConfirm.
+//
+// Defaults are conservative: no prune (avoid surprise deletions of
+// resources added after the target revision), no dry-run (default is to
+// actually roll back). Operators wanting a preview check Dry Run; the
+// result lands in the Activity tab.
+// =============================================================================
+
+export interface RollbackDialogProps {
+  open: boolean
+  // Caller provides the user-visible revision (mono SHA / tag) and the
+  // history id — Argo's API uses the id, the user reads the revision.
+  appLabel: string
+  revision: string
+  historyId?: string
+  pending?: boolean
+  onCancel: () => void
+  onConfirm: (opts: { prune: boolean; dryRun: boolean }) => void
+}
+
+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,160 @@
+import { useState, useEffect, type ComponentType } from 'react'
+import { Loader2, RefreshCw } from 'lucide-react'
+
+import { DialogPortal } from '../ui/DialogPortal'
+
+// =============================================================================
+// SyncOptionsDialog — Argo CD Sync drawer, shared between per-cluster
+// Radar (OSS web/) and Radar Hub's fleet GitOps detail page. Presentational
+// only: caller controls open state, supplies the app label, and handles
+// the onConfirm callback (POST to /api/argo/applications/{ns}/{name}/sync
+// or the hub-proxied equivalent /c/{ctrl}/api/argo/...).
+//
+// Defaults match Argo's most-common path (prune true, no dry-run, no
+// force) so the two-click sync stays cheap. Revision is optional — empty
+// falls through to the Application's targetRevision.
+// =============================================================================
+
+// ArgoSyncOpts is the payload shape the dialog passes to its onConfirm
+// callback (and that downstream POSTs to `/api/argo/applications/{ns}/{name}/sync`
+// expect). Exported separately so consumers can type the mutationFn arg
+// without redeclaring the structure — keeps OSS and Hub in lockstep on
+// the wire shape.
+export interface ArgoSyncOpts {
+  revision?: string
+  prune: boolean
+  dryRun: boolean
+  force: boolean
+  applyOnly: boolean
+  syncOptions: string[]
+}
+
+export interface SyncOptionsDialogProps {
+  open: boolean
+  appLabel: string
+  pending?: boolean
+  onCancel: () => void
+  onConfirm: (opts: ArgoSyncOpts) => void
+}
+
+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/gitops/detail-helpers.test.ts

@@ -0,0 +1,97 @@
+import { describe, test, expect } from 'vitest'
+
+import {
+  formatGitOpsDestination,
+  formatGitOpsSourceUrl,
+  getGitOpsTool,
+  parseArgoRollbackID,
+} from './detail-helpers'
+
+describe('parseArgoRollbackID', () => {
+  // The function exists specifically to defend against three foot-guns
+  // that would each route to a wrong rollback target without it. Pins
+  // them so a future "simplification" can't regress.
+  test('undefined returns null', () => {
+    expect(parseArgoRollbackID(undefined)).toBeNull()
+  })
+  test('empty string returns null (would be Number("") === 0)', () => {
+    expect(parseArgoRollbackID('')).toBeNull()
+  })
+  test('"0" returns null (non-positive, Argo history starts at 1)', () => {
+    expect(parseArgoRollbackID('0')).toBeNull()
+  })
+  test('negative numbers return null', () => {
+    expect(parseArgoRollbackID('-5')).toBeNull()
+  })
+  test('Flux condition type string returns null', () => {
+    expect(parseArgoRollbackID('Ready')).toBeNull()
+  })
+  test('positive integer returns the number', () => {
+    expect(parseArgoRollbackID('42')).toBe(42)
+  })
+})
+
+describe('formatGitOpsDestination', () => {
+  // The literal Argo controllers write for the in-cluster destination.
+  test('canonical in-cluster URL collapses to "in-cluster"', () => {
+    expect(formatGitOpsDestination('https://kubernetes.default.svc', 'prod')).toBe('in-cluster, Namespace: prod')
+  })
+  // Argo 2.13 writes a trailing slash. Must normalize equivalently.
+  test('in-cluster URL with trailing slash collapses to "in-cluster"', () => {
+    expect(formatGitOpsDestination('https://kubernetes.default.svc/', 'prod')).toBe('in-cluster, Namespace: prod')
+  })
+  // Empty/whitespace-only server — Argo's "default when unspecified"
+  // semantics target the controller's own cluster.
+  test('empty server renders as "in-cluster"', () => {
+    expect(formatGitOpsDestination('', 'prod')).toBe('in-cluster, Namespace: prod')
+    expect(formatGitOpsDestination('   ', 'prod')).toBe('in-cluster, Namespace: prod')
+  })
+  // External destination URLs render with protocol stripped — keeps the
+  // chip readable (no redundant "https://" prefix when every URL has it).
+  test('external server strips protocol prefix', () => {
+    expect(formatGitOpsDestination('https://prod.k8s.example.com', 'web')).toBe('prod.k8s.example.com, Namespace: web')
+    expect(formatGitOpsDestination('http://insecure.example.com', 'web')).toBe('insecure.example.com, Namespace: web')
+  })
+  // No namespace → host alone.
+  test('namespace omitted when undefined', () => {
+    expect(formatGitOpsDestination('https://kubernetes.default.svc', undefined)).toBe('in-cluster')
+  })
+})
+
+describe('formatGitOpsSourceUrl', () => {
+  test('strips https://', () => {
+    expect(formatGitOpsSourceUrl('https://github.com/org/repo')).toBe('github.com/org/repo')
+  })
+  test('strips http://', () => {
+    expect(formatGitOpsSourceUrl('http://gitlab.example.com/repo')).toBe('gitlab.example.com/repo')
+  })
+  // SSH-style + on-prem mirrors don't carry the http(s) prefix; preserve
+  // the user's literal so they recognize their own config.
+  test('SSH origins pass through unchanged', () => {
+    expect(formatGitOpsSourceUrl('git@github.com:org/repo.git')).toBe('git@github.com:org/repo.git')
+  })
+})
+
+describe('getGitOpsTool', () => {
+  // Group is the canonical discriminator.
+  test('Argo via group', () => {
+    expect(getGitOpsTool('applications', 'argoproj.io')).toBe('argo')
+    expect(getGitOpsTool('applicationsets', 'argoproj.io')).toBe('argo')
+    expect(getGitOpsTool('appprojects', 'argoproj.io')).toBe('argo')
+  })
+  // Argo kinds without an explicit group still route to 'argo'.
+  // Defends against a normalizer that drops `group` from the SPA payload.
+  test('Argo kinds without group still route to argo', () => {
+    expect(getGitOpsTool('applications', undefined)).toBe('argo')
+    expect(getGitOpsTool('applicationsets', '')).toBe('argo')
+  })
+  // Flux kinds with their canonical groups.
+  test('Flux via group', () => {
+    expect(getGitOpsTool('kustomizations', 'kustomize.toolkit.fluxcd.io')).toBe('flux')
+    expect(getGitOpsTool('helmreleases', 'helm.toolkit.fluxcd.io')).toBe('flux')
+  })
+  // Unknown kinds default to flux (matches the OSS fall-through).
+  test('unknown kind defaults to flux', () => {
+    expect(getGitOpsTool('somecustomresource', 'unknown.io')).toBe('flux')
+  })
+})

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

@@ -0,0 +1,112 @@
+import { argoStatusToGitOpsStatus, fluxConditionsToGitOpsStatus, type FluxCondition, type GitOpsStatus } from '../../types/gitops'
+import { formatCompactAge } from '../../utils/format'
+
+// =============================================================================
+// Shared helpers used by both per-cluster Radar's GitOps detail view (OSS
+// web/src/components/gitops/GitOpsView.tsx) and Radar Hub's fleet GitOps
+// detail page (radar-hub-web/src/pages/fleet/GitOpsDetailPage.tsx). Lives
+// here so the two surfaces can't drift on what "in-cluster" means, how
+// rollback ids parse, or how terminating tooltips read.
+// =============================================================================
+
+// formatGitOpsSourceUrl drops the protocol prefix from a Git source URL
+// so the row reads as "github.com/org/repo" instead of the redundant
+// "https://github.com/org/repo". Leaves non-https URLs alone so SSH-style
+// origins (`git@github.com:org/repo`) and HTTP-only on-prem mirrors still
+// render as the user wrote them.
+export function formatGitOpsSourceUrl(repo: string): string {
+  return repo.replace(/^https?:\/\//, '')
+}
+
+// formatGitOpsDestination collapses the canonical in-cluster API server
+// URL to the literal "in-cluster" so the destination cell reads cleanly
+// for the common case. Empty/whitespace-only server also renders as
+// "in-cluster" — matches Argo's default-when-unspecified semantics
+// (controller-managed apps without an explicit destination target the
+// same cluster the controller runs in). Any other server URL gets its
+// protocol stripped for the same reason as the source. Namespace is
+// appended on the same line so operators see "<host>, Namespace: <ns>"
+// without two lookups.
+export function formatGitOpsDestination(server: string | undefined, namespace: string | undefined): string {
+  // Normalize: trim whitespace, drop any trailing slash so Argo 2.13's
+  // "https://kubernetes.default.svc/" variant (the in-cluster URL with a
+  // trailing slash that some controller versions emit) matches the literal
+  // we collapse to "in-cluster".
+  let host = (server || '').trim().replace(/\/+$/, '')
+  if (host === '' || host === 'https://kubernetes.default.svc' || host === 'in-cluster') {
+    host = 'in-cluster'
+  } else {
+    host = host.replace(/^https?:\/\//, '')
+  }
+  return namespace ? `${host}, Namespace: ${namespace}` : host
+}
+
+// gitOpsInsightChangeKey produces the stable string GitOpsChangesView
+// matches against to scroll-and-highlight a row when the user clicks an
+// issue alert in IssuesBand. Kept here so both pages key their focus
+// state identically.
+export function gitOpsInsightChangeKey(ref: { kind: string; namespace?: string; name: string }): string {
+  return `${ref.kind}/${ref.namespace || ''}/${ref.name}`
+}
+
+// parseArgoRollbackID parses an Argo HistoryItem.id into the int64 the
+// rollback API needs. Returns null when:
+//   - id is missing
+//   - id is non-numeric (Flux condition rows reuse the same slot for
+//     condition.type, which we never want to interpret as a rollback id)
+//   - id is non-positive ("0" and negative strings parse fine via
+//     Number() but aren't valid Argo history ids — Argo's id sequence
+//     starts at 1; rolling back to id 0 would unhelpfully target the
+//     first revision).
+export function parseArgoRollbackID(id: string | undefined): number | null {
+  if (!id) return null
+  const n = Number(id)
+  if (!Number.isFinite(n) || n <= 0) return null
+  return n
+}
+
+// describeGitOpsTerminating renders the two tooltip strings the detail
+// header + action buttons need when a resource is mid-deletion.
+// Returns:
+//   chipTooltip:           "Pending deletion 21d ago. Finalizers: foo, bar.
+//                           Mutating actions are disabled until cleanup completes."
+//   actionDisabledTooltip: "Disabled — resource is pending deletion (21d)"
+//
+// The age formatter shares its tier breakpoints with
+// pkg/gitops/insights/insights.go::formatAgeShort + pkg/audit/checks.go::
+// formatDurationShort so UI, lifecycle Issue messages, and audit findings
+// agree on units. Empty input → empty suffix.
+export function describeGitOpsTerminating(summary?: {
+  terminationStartedAt?: string
+  finalizers?: string[]
+}): { chipTooltip: string; actionDisabledTooltip: string } {
+  const ageText = formatCompactAge(summary?.terminationStartedAt)
+  const ageSuffix = ageText ? ` ${ageText} ago` : ''
+  const finalizers = summary?.finalizers ?? []
+  const finSuffix = finalizers.length > 0 ? ` Finalizers: ${finalizers.join(', ')}.` : ''
+  const ageInline = ageText ? ` (${ageText})` : ''
+  return {
+    chipTooltip: `Pending deletion${ageSuffix}.${finSuffix} Mutating actions are disabled until cleanup completes.`,
+    actionDisabledTooltip: `Disabled — resource is pending deletion${ageInline}`,
+  }
+}
+
+// getGitOpsResourceStatus dispatches sync/health extraction by tool. Argo
+// reads from .status (rich operationState + sync state); Flux reads from
+// .status.conditions + .spec.suspend. Returns null if the resource has
+// no recognizable status (e.g. just-created, status not yet populated).
+export function getGitOpsResourceStatus(kind: string, resource: any): GitOpsStatus | null {
+  if (kind === 'applications') {
+    return argoStatusToGitOpsStatus(resource?.status ?? {})
+  }
+  const conditions = (resource?.status?.conditions ?? []) as FluxCondition[]
+  return fluxConditionsToGitOpsStatus(conditions, resource?.spec?.suspend === true)
+}
+
+// getGitOpsTool routes a kind+group to 'argo' or 'flux'. Same shape used
+// by both detail pages + the fleet list normalizers so a kustomization
+// always reads as 'flux' and an Argo Application always as 'argo'.
+export function getGitOpsTool(kind: string, group?: string): 'argo' | 'flux' {
+  if (group === 'argoproj.io' || kind === 'applications' || kind === 'applicationsets' || kind === 'appprojects') return 'argo'
+  return 'flux'
+}

package/src/components/gitops/index.ts

@@ -2,7 +2,58 @@ export { GitOpsStatusBadge, SyncStatusBadge, HealthStatusBadge } from './GitOpsS
 export { SyncCountdown, IntervalDisplay } from './SyncCountdown'
 export { ManagedResourcesList, InventoryCount } from './ManagedResourcesList'
 export { GitOpsActions, SyncButton, SuspendToggle } from './GitOpsActions'
-export { GitOpsTreeGraph } from './tree'
+export { GitOpsTreeGraph, mergeGitOpsTrees, MERGED_NODE_SOURCE_KEY } from './tree'
+export type { MergedNodeSource } from './tree'
 export { gitOpsFilterSet, hasGitOpsTreeFilters, matchesGitOpsTreeFilters } from './tree'
 export type { GitOpsTreeFilters, GitOpsTreePreset } from './tree'
 export * from './insights'
+export {
+  GitOpsTableView,
+  GitOpsFilterSection,
+  GitOpsFacetButton,
+  GitOpsIconToggle,
+  shortClusterName,
+  summarizeGitOpsRows,
+  normalizeArgoApplication,
+  normalizeFluxKustomization,
+  normalizeFluxHelmRelease,
+  buildFluxSourceUrlMap,
+} from './GitOpsTableView'
+export type {
+  GitOpsTableViewProps,
+  GitOpsRow,
+  GitOpsMode,
+  GitOpsViewMode,
+  SortKey,
+  DestinationFilter,
+  FleetClusterStamp,
+  FleetDestinationStamp,
+  FleetDestinationMatch,
+} from './GitOpsTableView'
+export { GitOpsGraphFilterRail, buildTreeFacets, toggleSet } from './GitOpsGraphFilterRail'
+export {
+  formatGitOpsSourceUrl,
+  formatGitOpsDestination,
+  gitOpsInsightChangeKey,
+  parseArgoRollbackID,
+  describeGitOpsTerminating,
+  getGitOpsResourceStatus,
+  getGitOpsTool,
+} from './detail-helpers'
+export { SyncOptionsDialog } from './SyncOptionsDialog'
+export type { SyncOptionsDialogProps, ArgoSyncOpts } from './SyncOptionsDialog'
+export { RollbackDialog } from './RollbackDialog'
+export type { RollbackDialogProps } from './RollbackDialog'
+export type { GitOpsGraphFilterRailProps, GitOpsTreeFacets } from './GitOpsGraphFilterRail'
+export { GitOpsDetailLayout } from './GitOpsDetailLayout'
+export type {
+  GitOpsDetailLayoutProps,
+  GitOpsDetailIdentity,
+  GitOpsDetailLineage,
+  GitOpsDetailStatus,
+  GitOpsDetailMetadata,
+  GitOpsDetailTab,
+  ArgoActionHandlers,
+  FluxActionHandlers,
+  GitOpsHelmValuesData,
+} from './GitOpsDetailLayout'

package/src/components/gitops/short-cluster-name.test.ts

@@ -0,0 +1,36 @@
+import { describe, test, expect } from 'vitest'
+
+import { shortClusterName } from './GitOpsTableView'
+
+// shortClusterName strips kubectl-context-style prefixes so the Cluster
+// column shows the human-recognizable suffix. The orphan-empty-string
+// fallback ("|| full") is the function's main contract — without it,
+// malformed inputs would render as empty cells. These tests pin both
+// the happy paths and the fallback.
+
+describe('shortClusterName', () => {
+  test('GKE kubectl context strips to trailing name', () => {
+    expect(shortClusterName('gke_koalabackend_me-west1-a_management-cluster')).toBe('management-cluster')
+    expect(shortClusterName('gke_proj_us-east1-b_nonprod')).toBe('nonprod')
+  })
+
+  test('EKS ARN strips to suffix after final slash', () => {
+    expect(shortClusterName('arn:aws:eks:us-east-1:123456789:cluster/prod-east')).toBe('prod-east')
+  })
+
+  test('user-named clusters (kind, k3d, plain) pass through unchanged', () => {
+    expect(shortClusterName('k3d-radar-demo')).toBe('k3d-radar-demo')
+    expect(shortClusterName('kind-radar-gitops-demo')).toBe('kind-radar-gitops-demo')
+    expect(shortClusterName('production')).toBe('production')
+  })
+
+  // Malformed-input fallback: the function must not return empty/garbage
+  // for inputs that "look like" a recognized prefix but don't have a
+  // trailing segment.
+  test('malformed GKE prefix with trailing underscore falls back to full string', () => {
+    expect(shortClusterName('gke_proj_region_')).toBe('gke_proj_region_')
+  })
+  test('malformed EKS ARN with trailing slash falls back to full string', () => {
+    expect(shortClusterName('arn:aws:eks:us-east-1:123:cluster/')).toBe('arn:aws:eks:us-east-1:123:cluster/')
+  })
+})

package/src/components/gitops/tree/index.ts

@@ -2,3 +2,5 @@ export { GitOpsTreeGraph } from './GitOpsTreeGraph'
 export type { GitOpsTreePreset } from './GitOpsTreeGraph'
 export type { GitOpsTreeFilters } from './tree-helpers'
 export { gitOpsFilterSet, hasGitOpsTreeFilters, matchesGitOpsTreeFilters } from './tree-helpers'
+export { mergeGitOpsTrees, MERGED_NODE_SOURCE_KEY } from './merge'
+export type { MergedNodeSource } from './merge'