@skyhook-io/k8s-ui 1.7.6 → 1.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.7.6",
+  "version": "1.7.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/gitops/GitOpsDetailLayout.tsx

@@ -1,5 +1,5 @@
 import { useEffect, type ComponentType, type ReactNode } from 'react'
-import { ChevronDown, ChevronRight, Clock3, GitBranch, GitCommit, Loader2, Pause, Play, RefreshCw, RotateCw, Settings, Trash2, XCircle } from 'lucide-react'
+import { ArrowDownUp, ChevronDown, ChevronRight, Clock3, GitBranch, GitCommit, Loader2, Pause, Play, RefreshCw, Settings, Trash2, XCircle, Zap } from 'lucide-react'
 
 import { HealthStatusBadge, SyncStatusBadge } from './GitOpsStatusBadge'
 import { GitOpsIssuesBand, GitOpsStatusStrip } from './insights'
@@ -340,7 +340,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
                   <ActionButton
                     label="Sync…"
                     description="Apply manifests from Git to the cluster. Opens an options dialog (prune, dry-run, revision)."
-                    icon={RefreshCw}
+                    icon={ArrowDownUp}
                     loading={argo.syncing}
                     onClick={argo.onSyncRequested}
                     disabled={effectiveSuspended || terminating}
@@ -350,14 +350,14 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
                   <ActionButton
                     label="Refresh"
                     description="Re-check Git for new commits and recompute sync status. Doesn't apply anything."
-                    icon={RotateCw}
+                    icon={RefreshCw}
                     loading={argo.refreshing && argo.refreshingKind === 'normal'}
                     onClick={() => argo.onRefresh('normal')}
                   />
                   <ActionButton
                     label="Hard refresh"
                     description="Like Refresh, but also bypasses Argo's manifest cache (re-renders Helm/Kustomize)."
-                    icon={RotateCw}
+                    icon={Zap}
                     loading={argo.refreshing && argo.refreshingKind === 'hard'}
                     onClick={() => argo.onRefresh('hard')}
                   />

package/src/components/gitops/GitOpsTableView.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState, type ComponentType,
 import { clsx } from 'clsx'
 import {
   AlertTriangle,
+  ArrowDownUp,
   CheckCircle2,
   CircleAlert,
   CircleDot,
@@ -10,16 +11,23 @@ import {
   LayoutGrid,
   List,
   Loader2,
+  Pause,
+  Play,
   RefreshCw,
   RotateCcw,
+  RotateCw,
   Search,
+  Square,
   Tag,
   Trash2,
+  Zap,
 } from 'lucide-react'
 
 import { HealthStatusBadge, SyncStatusBadge } from './GitOpsStatusBadge'
 import { Tooltip } from '../ui/Tooltip'
+import { RowActionMenu, type RowActionItem } from '../ui/RowActionMenu'
 import { getGitOpsResourceStatus } from './detail-helpers'
+import { isArgoSuspendedByRadar } from '../resources/resource-utils-argo'
 import { toggleSet } from './GitOpsGraphFilterRail'
 import { parseContextName } from '../../utils/context-name'
 
@@ -54,6 +62,21 @@ export type GitOpsMode = 'applications' | 'sources' | 'projects' | 'alerts'
 export type GitOpsViewMode = 'table' | 'tiles'
 export type SortKey = 'name' | 'health' | 'sync' | 'lastSync' | 'project'
 
+// Row-level actions surfaced from the table's three-dot menu. The set
+// mirrors what the detail page exposes today; callers wire the mutations
+// + dialogs and dispatch via `onRowAction`. Argo-only actions (refresh,
+// hard-refresh, terminate) and Flux-only actions (reconcile,
+// sync-with-source) are filtered per-tool inside the table.
+export type GitOpsRowAction =
+  | 'sync'
+  | 'refresh'
+  | 'hard-refresh'
+  | 'terminate'
+  | 'suspend'
+  | 'resume'
+  | 'reconcile'
+  | 'sync-with-source'
+
 // FleetClusterStamp + FleetDestinationStamp — optional fields the hub-side
 // `_cluster` / `_destination` stamping projects into. Keep the types here so
 // callers don't need to import a separate fleet types module; OSS leaves
@@ -190,6 +213,17 @@ export interface GitOpsTableViewProps {
    * button drops it alongside view-local filter state.
    */
   onClearNamespaces?: () => void
+
+  // Row-level action dispatcher. When provided, the table renders a
+  // right-most three-dot menu per row with Sync / Refresh / Suspend / etc.
+  // Caller owns the mutation hooks + any options dialogs (e.g. Argo
+  // SyncOptionsDialog). When undefined the actions column is omitted
+  // entirely — keeps Hub and other consumers' layout unchanged until they
+  // opt in.
+  onRowAction?: (row: GitOpsRow, action: GitOpsRowAction) => void
+  // In-flight action state, keyed by `row.id`. Drives the per-item
+  // spinner so the user can tell which Sync/Refresh is still running.
+  pendingRowActions?: Map<string, Set<GitOpsRowAction>>
 }
 
 // ----- Main component --------------------------------------------------------
@@ -213,6 +247,8 @@ export function GitOpsTableView({
   emptyStateBody,
   globalNamespaces,
   onClearNamespaces,
+  onRowAction,
+  pendingRowActions,
 }: GitOpsTableViewProps) {
   const searchInputRef = useRef<HTMLInputElement>(null)
   const [mode, setMode] = useState<GitOpsMode>('applications')
@@ -611,7 +647,12 @@ export function GitOpsTableView({
           </div>
         </div>
 
-        <div className="min-h-0 min-w-0 flex-1 overflow-auto bg-theme-base">
+        {/* pb-20 keeps the last row (and its three-dot menu) scrollable clear
+            of the app's fixed bottom-right overlay buttons; without the slack
+            the bottom row's action trigger sits under them and can't be clicked
+            once the list fills the viewport. Only needed when the actions column
+            is present — consumers without onRowAction (e.g. Hub) skip the slack. */}
+        <div className={clsx('min-h-0 min-w-0 flex-1 overflow-auto bg-theme-base', onRowAction && 'pb-20')}>
           {mode !== 'applications' ? (
             <div className="flex h-full items-center justify-center text-sm text-theme-text-secondary">
               {modeLabel(mode)} view is queued behind the application list.
@@ -644,7 +685,15 @@ export function GitOpsTableView({
           ) : viewMode === 'tiles' ? (
             <GitOpsTiles rows={filteredRows} onOpen={onRowClick} hrefFor={rowHrefFor} />
           ) : (
-            <GitOpsTable rows={filteredRows} onOpen={onRowClick} hrefFor={rowHrefFor} onDestinationClick={onDestinationClick} destinationHrefFor={destinationHrefFor} />
+            <GitOpsTable
+              rows={filteredRows}
+              onOpen={onRowClick}
+              hrefFor={rowHrefFor}
+              onDestinationClick={onDestinationClick}
+              destinationHrefFor={destinationHrefFor}
+              onRowAction={onRowAction}
+              pendingRowActions={pendingRowActions}
+            />
           )}
         </div>
       </div>
@@ -1035,24 +1084,34 @@ function GitOpsTable({
   hrefFor,
   onDestinationClick,
   destinationHrefFor,
+  onRowAction,
+  pendingRowActions,
 }: {
   rows: GitOpsRow[]
   onOpen: (row: GitOpsRow, event?: ReactMouseEvent) => void
   hrefFor?: (row: GitOpsRow) => string
   onDestinationClick?: (row: GitOpsRow, destination: FleetDestinationStamp) => void
   destinationHrefFor?: (row: GitOpsRow, destination: FleetDestinationStamp) => string
+  onRowAction?: (row: GitOpsRow, action: GitOpsRowAction) => void
+  pendingRowActions?: Map<string, Set<GitOpsRowAction>>
 }) {
+  const showActions = !!onRowAction
   return (
     <table className="w-full min-w-[1040px] table-fixed border-separate border-spacing-0 text-sm">
       <thead className="sticky top-0 z-10 bg-theme-surface">
         <tr className="text-left text-[11px] uppercase tracking-wide text-theme-text-tertiary">
-          <TableHead className="w-[22%]">Application</TableHead>
+          <TableHead className={showActions ? 'w-[16%]' : 'w-[22%]'}>Application</TableHead>
           <TableHead className="w-[9%]">Project</TableHead>
           <TableHead className="w-[9%]">Sync</TableHead>
           <TableHead className="w-[9%]">Health</TableHead>
           <TableHead className="w-[20%]">Source</TableHead>
           <TableHead className="w-[14%]">Destination</TableHead>
           <TableHead className="w-[10%]">Last Sync</TableHead>
+          {showActions && (
+            <TableHead className="w-[6%] text-right">
+              <span className="sr-only">Actions</span>
+            </TableHead>
+          )}
         </tr>
       </thead>
       <tbody>
@@ -1129,6 +1188,14 @@ function GitOpsTable({
                   ? <span className="text-orange-400/80">Pending {formatRelativeAge(row.terminationStartedAt ?? '') || 'now'}</span>
                   : formatRelativeAge(row.lastSync || row.createdAt)}
               </TableCell>
+              {showActions && onRowAction && (
+                <td
+                  className="overflow-visible border-b border-theme-border px-2 py-2 text-right align-middle"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <RowActionMenu items={buildRowActionItems(row, onRowAction, pendingRowActions)} />
+                </td>
+              )}
             </tr>
           )
         })}
@@ -1137,6 +1204,137 @@ function GitOpsTable({
   )
 }
 
+// buildRowActionItems composes the per-row three-dot menu entries based on
+// the row's tool (Argo vs Flux), current suspend state, terminating state,
+// and Argo's operationState.phase (used to gate the Terminate entry — only
+// shown while a sync is mid-flight, mirroring the detail-page condition).
+function buildRowActionItems(
+  row: GitOpsRow,
+  onAction: (row: GitOpsRow, action: GitOpsRowAction) => void,
+  pending?: Map<string, Set<GitOpsRowAction>>,
+): RowActionItem[] {
+  const inFlight = pending?.get(row.id)
+  const isPending = (action: GitOpsRowAction) => inFlight?.has(action) ?? false
+  const terminating = row.terminating
+  const suspended = row.suspended
+  // Disabled-reason copy matches what the detail page already shows so
+  // operators see consistent language whichever surface they use.
+  const terminatingReason = 'Resource is terminating; mutating actions are gated until finalizers complete.'
+  const suspendedReason = 'Cannot sync while suspended. Resume first.'
+  const items: RowActionItem[] = []
+
+  if (row.tool === 'argo') {
+    items.push({
+      key: 'sync',
+      label: 'Sync...',
+      icon: ArrowDownUp,
+      onClick: () => onAction(row, 'sync'),
+      disabled: suspended || terminating,
+      disabledReason: terminating ? terminatingReason : suspended ? suspendedReason : undefined,
+      pending: isPending('sync'),
+    })
+    // Refresh / Hard refresh are read-style verbs — they re-read Git and
+    // recompute status without mutating the cluster, so they stay enabled
+    // during termination (matches the detail page + the backend carve-out).
+    items.push({
+      key: 'refresh',
+      label: 'Refresh',
+      icon: RefreshCw,
+      onClick: () => onAction(row, 'refresh'),
+      pending: isPending('refresh'),
+    })
+    items.push({
+      key: 'hard-refresh',
+      label: 'Hard refresh',
+      icon: Zap,
+      onClick: () => onAction(row, 'hard-refresh'),
+      pending: isPending('hard-refresh'),
+    })
+    if (suspended) {
+      items.push({
+        key: 'resume',
+        label: 'Resume',
+        icon: Play,
+        onClick: () => onAction(row, 'resume'),
+        disabled: terminating,
+        disabledReason: terminating ? terminatingReason : undefined,
+        pending: isPending('resume'),
+        divider: true,
+      })
+    } else {
+      items.push({
+        key: 'suspend',
+        label: 'Suspend',
+        icon: Pause,
+        onClick: () => onAction(row, 'suspend'),
+        disabled: terminating,
+        disabledReason: terminating ? terminatingReason : undefined,
+        pending: isPending('suspend'),
+        divider: true,
+      })
+    }
+    // Argo Terminate only makes sense while a sync is Running — gating
+    // here matches the detail-page conditional (gitops detail mounts the
+    // shortcut only when `isRunning`). For non-running rows we just omit
+    // the entry rather than disabling it, to keep the menu tight.
+    if (row.raw?.status?.operationState?.phase === 'Running') {
+      items.push({
+        key: 'terminate',
+        label: 'Terminate sync',
+        icon: Square,
+        onClick: () => onAction(row, 'terminate'),
+        pending: isPending('terminate'),
+        danger: true,
+      })
+    }
+    return items
+  }
+
+  // Flux (Kustomization / HelmRelease)
+  items.push({
+    key: 'reconcile',
+    label: 'Reconcile',
+    icon: RefreshCw,
+    onClick: () => onAction(row, 'reconcile'),
+    disabled: suspended || terminating,
+    disabledReason: terminating ? terminatingReason : suspended ? suspendedReason : undefined,
+    pending: isPending('reconcile'),
+  })
+  items.push({
+    key: 'sync-with-source',
+    label: 'Reconcile with source',
+    icon: RotateCw,
+    onClick: () => onAction(row, 'sync-with-source'),
+    disabled: suspended || terminating,
+    disabledReason: terminating ? terminatingReason : suspended ? suspendedReason : undefined,
+    pending: isPending('sync-with-source'),
+  })
+  if (suspended) {
+    items.push({
+      key: 'resume',
+      label: 'Resume',
+      icon: Play,
+      onClick: () => onAction(row, 'resume'),
+      disabled: terminating,
+      disabledReason: terminating ? terminatingReason : undefined,
+      pending: isPending('resume'),
+      divider: true,
+    })
+  } else {
+    items.push({
+      key: 'suspend',
+      label: 'Suspend',
+      icon: Pause,
+      onClick: () => onAction(row, 'suspend'),
+      disabled: terminating,
+      disabledReason: terminating ? terminatingReason : undefined,
+      pending: isPending('suspend'),
+      divider: true,
+    })
+  }
+  return items
+}
+
 function GitOpsTiles({
   rows,
   onOpen,
@@ -1594,7 +1792,7 @@ export function normalizeArgoApplication(resource: any): GitOpsRow {
     labels: (resource.metadata?.labels ?? {}) as Record<string, string>,
     sync: status?.sync ?? 'Unknown',
     health: status?.health ?? 'Unknown',
-    suspended: status?.suspended ?? false,
+    suspended: (status?.suspended ?? false) || isArgoSuspendedByRadar(resource),
     repository: resource.spec?.source?.repoURL ?? '',
     targetRevision: resource.spec?.source?.targetRevision ?? '',
     path: resource.spec?.source?.path ?? '',

package/src/components/gitops/index.ts

@@ -22,6 +22,7 @@ export {
 export type {
   GitOpsTableViewProps,
   GitOpsRow,
+  GitOpsRowAction,
   GitOpsMode,
   GitOpsViewMode,
   SortKey,

package/src/components/resources/ResourcesView.tsx

@@ -229,6 +229,13 @@ const TAILWIND_WIDTH_TO_PX: Record<string, number> = {
   'w-48': 192, 'w-56': 224, 'w-64': 256,
 }
 
+const COMPARE_COLUMN_WIDTH = 36
+const COMPARE_COLUMN_STYLE: React.CSSProperties = {
+  width: COMPARE_COLUMN_WIDTH,
+  minWidth: COMPARE_COLUMN_WIDTH,
+  maxWidth: COMPARE_COLUMN_WIDTH,
+}
+
 function getColumnMinWidth(col: Column): number {
   if (col.minWidth) return col.minWidth
   if (!col.width) return 200 // Name column (no width class) gets wider minimum
@@ -3367,6 +3374,18 @@ export function ResourcesView({
     return allColumns.filter(c => visibleColumns.has(c.key))
   }, [allColumns, visibleColumns])
 
+  // Fixed-width columns can consume the table's flexible space and collapse
+  // the required name column. Keep a real table minimum and let the container
+  // scroll horizontally when the viewport is too narrow.
+  const tableMinWidth = useMemo(() => {
+    const compareColumnWidth = compareMode ? COMPARE_COLUMN_WIDTH : 0
+    const baseMinWidth = columns.reduce((sum, col) => sum + (columnWidths[col.key] || getColumnMinWidth(col)), compareColumnWidth)
+    const flexibleNameColumn = columns.find(col => col.key === 'name' && !columnWidths[col.key])
+
+    if (!hasResizedColumns || !flexibleNameColumn) return baseMinWidth
+    return baseMinWidth + getColumnMinWidth(flexibleNameColumn)
+  }, [columns, columnWidths, compareMode, hasResizedColumns])
+
   // Stable virtuoso components — memoized to avoid remounting the table on every render
   const virtuosoComponents = useMemo(() => ({
     Table: React.forwardRef<HTMLTableElement, React.TableHTMLAttributes<HTMLTableElement>>(function VirtuosoTable(props, ref) {
@@ -3375,7 +3394,7 @@ export function ResourcesView({
           {...props}
           ref={ref}
           className="w-full"
-          style={{ ...props.style, tableLayout: 'fixed' }}
+          style={{ ...props.style, tableLayout: 'fixed', minWidth: tableMinWidth }}
         >
           <colgroup>
             {/*
@@ -3385,7 +3404,7 @@ export function ResourcesView({
               the missing entry by stealing width from a sized neighbour
               — typically blowing this narrow column out to ~200px.
             */}
-            {compareMode && <col style={{ width: 36 }} />}
+            {compareMode && <col style={{ width: COMPARE_COLUMN_WIDTH }} />}
             {columns.map(col => (
               <col
                 key={col.key}
@@ -3403,7 +3422,7 @@ export function ResourcesView({
       )
     }),
     TableRow: VirtuosoTableRow,
-  }), [columns, columnWidths, hasResizedColumns, compareMode])
+  }), [columns, columnWidths, hasResizedColumns, compareMode, tableMinWidth])
 
   // Calculate filter options with counts based on current resources (before filtering)
   const filterOptions = useMemo(() => {
@@ -3949,7 +3968,7 @@ export function ResourcesView({
 
         {/* Table */}
         <div
-          className="flex-1 overflow-y-auto overflow-x-hidden relative"
+          className="flex-1 overflow-auto relative"
           ref={tableContainerRef}
           onClick={(e) => {
             if (e.target === e.currentTarget && selectedResource) {
@@ -4062,7 +4081,7 @@ export function ResourcesView({
                       // Inline px width — under `table-layout:fixed`,
                       // `w-9` is a hint the browser absorbs into leftover
                       // row width on an icon-only column.
-                      style={{ width: 36, minWidth: 36, maxWidth: 36 }}
+                      style={COMPARE_COLUMN_STYLE}
                       className="px-2 py-3 text-xs font-medium uppercase tracking-wide bg-theme-base border-b border-r-subtle border-theme-border text-center text-skyhook-400"
                       title="Compare mode"
                     >
@@ -4344,7 +4363,7 @@ function ResourceRowCells({ resource, kind, group, columns, extraColumnsByKey, h
         <td
           onClick={onClick}
           onMouseEnter={onMouseEnter}
-          style={{ width: 36, minWidth: 36, maxWidth: 36 }}
+          style={COMPARE_COLUMN_STYLE}
           className={clsx('px-2 py-3 border-b-subtle cursor-pointer text-center align-middle transition-colors', rowHighlight)}
         >
           {pickedSide ? (

package/src/components/resources/renderers/ArgoApplicationRenderer.tsx

@@ -1,4 +1,4 @@
-import { GitBranch, FolderTree, Settings, Target, XCircle, History, ListChecks } from 'lucide-react'
+import { GitBranch, FolderTree, Settings, Target, XCircle, History, ListChecks, ExternalLink } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
@@ -10,6 +10,9 @@ import {
   type ArgoResource,
 } from '../../../types/gitops'
 import { BADGE_INACTIVE } from '../../../utils/badge-colors'
+import { buildRepoBrowseUrl, buildPathBrowseUrl } from '../../../utils/git-provider-urls'
+
+const REPO_LINK_CLASS = 'text-blue-400 hover:text-blue-300 hover:underline break-all'
 
 interface ArgoApplicationRendererProps {
   data: any
@@ -19,10 +22,51 @@ interface ArgoApplicationRendererProps {
 
 function SourceProperties({ source }: { source: any }) {
   if (!source) return null
+  // Helm chart sources point repoURL at a chart registry, not a browseable git repo.
+  const isHelmSource = !!source.chart
+  const repoHref = isHelmSource ? null : buildRepoBrowseUrl(source.repoURL)
+  const pathHref = isHelmSource ? null : buildPathBrowseUrl(source.repoURL, source.path, source.targetRevision)
   return (
     <>
-      <Property label="Repository" value={source.repoURL} />
-      {source.path && <Property label="Path" value={source.path} />}
+      <Property
+        label="Repository"
+        value={
+          repoHref ? (
+            <a
+              href={repoHref}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={source.repoURL}
+              className={`${REPO_LINK_CLASS} inline-flex items-center gap-1`}
+            >
+              {source.repoURL}
+              <ExternalLink className="w-3 h-3 shrink-0" />
+            </a>
+          ) : (
+            source.repoURL
+          )
+        }
+      />
+      {source.path && (
+        <Property
+          label="Path"
+          value={
+            pathHref ? (
+              <a
+                href={pathHref}
+                target="_blank"
+                rel="noopener noreferrer"
+                title={source.path}
+                className={REPO_LINK_CLASS}
+              >
+                {source.path}
+              </a>
+            ) : (
+              source.path
+            )
+          }
+        />
+      )}
       {source.targetRevision && (
         <Property
           label="Target Revision"

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

@@ -57,6 +57,24 @@ export function getArgoApplicationStatus(app: any): StatusBadge {
   return { text: health || sync || 'Unknown', color: healthColors.unknown, level: 'unknown' }
 }
 
+// Radar suspends an Argo Application by clearing spec.syncPolicy.automated and
+// recording the prior prune/selfHeal flags in annotations so Resume can restore
+// them. The *presence* of any of these annotations marks the app as suspended —
+// independent of health.status, which stays whatever the app's resources report
+// (often Missing/OutOfSync, never literally "Suspended"). Both the current
+// radarhq.io keys and the legacy skyhook.io keys (still on apps suspended by
+// older builds) count. Shared so the fleet table and the detail page can't
+// disagree on whether an app is suspended.
+export function isArgoSuspendedByRadar(app: any): boolean {
+  const a = app?.metadata?.annotations
+  return Boolean(
+    a?.['radarhq.io/suspended-prune'] ||
+      a?.['radarhq.io/suspended-selfheal'] ||
+      a?.['skyhook.io/suspended-prune'] ||
+      a?.['skyhook.io/suspended-selfheal'],
+  )
+}
+
 // ============================================================================
 // ARGOCD TABLE CELL UTILITIES
 // ============================================================================

package/src/components/ui/RowActionMenu.tsx

@@ -0,0 +1,149 @@
+import { Fragment, useEffect, useLayoutEffect, useRef, useState, type ComponentType } from 'react'
+import { Loader2, MoreVertical } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Tooltip } from './Tooltip'
+
+export interface RowActionItem {
+  key: string
+  label: string
+  icon: ComponentType<{ className?: string }>
+  onClick: () => void
+  disabled?: boolean
+  disabledReason?: string
+  pending?: boolean
+  danger?: boolean
+  /** Render a horizontal divider above this item. */
+  divider?: boolean
+}
+
+interface RowActionMenuProps {
+  items: RowActionItem[]
+  ariaLabel?: string
+  /** Compact button variant (default: true) — sized for table-row anchoring. */
+  compact?: boolean
+}
+
+export function RowActionMenu({ items, ariaLabel = 'Row actions', compact = true }: RowActionMenuProps) {
+  const [open, setOpen] = useState(false)
+  // Flip the menu above the trigger when it would otherwise spill past the
+  // viewport bottom. The GitOps table's bottom rows sit at the end of a scroll
+  // container with the app's fixed overlay buttons below them, so a
+  // downward-opening menu there clips its lowest items with no way to scroll
+  // them into view. Measured after open (useLayoutEffect, pre-paint, no flicker).
+  const [openUp, setOpenUp] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  useLayoutEffect(() => {
+    if (!open) {
+      setOpenUp(false)
+      return
+    }
+    const trigger = ref.current?.getBoundingClientRect()
+    const menuH = menuRef.current?.offsetHeight ?? 0
+    if (!trigger) return
+    const spaceBelow = window.innerHeight - trigger.bottom
+    // Flip up only when there's not enough room below AND enough room above,
+    // so a tall menu near the top doesn't get clipped at the other end.
+    setOpenUp(menuH + 8 > spaceBelow && trigger.top > menuH + 8)
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    const onDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('mousedown', onDown)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onDown)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open])
+
+  const triggerSize = compact ? 'p-1' : 'p-1.5'
+  const iconSize = compact ? 'h-4 w-4' : 'h-5 w-5'
+
+  return (
+    <div ref={ref} className="relative inline-block">
+      <button
+        type="button"
+        aria-label={ariaLabel}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={(e) => {
+          e.stopPropagation()
+          setOpen((v) => !v)
+        }}
+        className={clsx(
+          'rounded text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-primary',
+          triggerSize,
+        )}
+      >
+        <MoreVertical className={iconSize} />
+      </button>
+      {open && (
+        <div
+          ref={menuRef}
+          role="menu"
+          className={clsx(
+            'absolute right-0 z-50 min-w-[180px] rounded-lg border border-theme-border bg-theme-surface py-1 shadow-xl',
+            openUp ? 'bottom-full mb-1' : 'top-full mt-1',
+          )}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {items.map((item) => {
+            const Icon = item.icon
+            const content = (
+              <button
+                type="button"
+                role="menuitem"
+                disabled={item.disabled || item.pending}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  if (item.disabled || item.pending) return
+                  item.onClick()
+                  setOpen(false)
+                }}
+                className={clsx(
+                  'flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors',
+                  item.disabled || item.pending
+                    ? 'cursor-not-allowed text-theme-text-tertiary'
+                    : item.danger
+                    ? 'text-red-500 hover:bg-theme-hover hover:text-red-400'
+                    : 'text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary',
+                )}
+              >
+                {item.pending ? (
+                  <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin" />
+                ) : (
+                  <Icon className="h-3.5 w-3.5 shrink-0" />
+                )}
+                <span className="truncate">{item.label}</span>
+              </button>
+            )
+            return (
+              <Fragment key={item.key}>
+                {item.divider && <div className="my-1 h-px bg-theme-border" />}
+                {item.disabled && item.disabledReason ? (
+                  // wrapperClassName=w-full so the disabled item fills the menu
+                  // like enabled items — the Tooltip wrapper is inline-flex and
+                  // would otherwise shrink-wrap, and the menu inherits text-right
+                  // from the table's actions cell, shoving the item to the edge.
+                  <Tooltip content={item.disabledReason} position="left" wrapperClassName="w-full">
+                    {content}
+                  </Tooltip>
+                ) : (
+                  content
+                )}
+              </Fragment>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/ui/index.ts

@@ -20,3 +20,5 @@ export { ForceDeleteConfirmDialog } from './ForceDeleteConfirmDialog'
 export { ToastProvider, useToast, showApiError, showApiSuccess } from './Toast'
 export { CodeViewer } from './CodeViewer'
 export { YamlEditor, YamlDiffEditor } from './YamlEditor'
+export { RowActionMenu } from './RowActionMenu'
+export type { RowActionItem } from './RowActionMenu'

package/src/utils/git-provider-urls.test.ts

@@ -0,0 +1,348 @@
+import { describe, it, expect } from 'vitest'
+import { buildRepoBrowseUrl, buildPathBrowseUrl } from './git-provider-urls'
+
+describe('buildRepoBrowseUrl', () => {
+  // Pass-through semantics: link the user's URL exactly as configured, no rewriting.
+  it('returns the input verbatim for https URL', () => {
+    expect(buildRepoBrowseUrl('https://github.com/KoalaOps/deployment')).toBe(
+      'https://github.com/KoalaOps/deployment'
+    )
+  })
+
+  it('preserves trailing .git suffix (no manipulation)', () => {
+    expect(buildRepoBrowseUrl('https://github.com/KoalaOps/deployment.git')).toBe(
+      'https://github.com/KoalaOps/deployment.git'
+    )
+  })
+
+  it('preserves trailing slash (no manipulation)', () => {
+    expect(buildRepoBrowseUrl('https://github.com/KoalaOps/deployment/')).toBe(
+      'https://github.com/KoalaOps/deployment/'
+    )
+  })
+
+  it('trims surrounding whitespace', () => {
+    expect(buildRepoBrowseUrl('  https://github.com/o/r  ')).toBe(
+      'https://github.com/o/r'
+    )
+  })
+
+  it('keeps unknown hosts (still a valid http(s) link)', () => {
+    expect(buildRepoBrowseUrl('https://git.internal.example.com/team/proj')).toBe(
+      'https://git.internal.example.com/team/proj'
+    )
+  })
+
+  it('preserves non-default port in self-hosted URLs', () => {
+    expect(buildRepoBrowseUrl('https://gitea.internal:3000/team/repo')).toBe(
+      'https://gitea.internal:3000/team/repo'
+    )
+  })
+
+  it('preserves http:// scheme (does not silently upgrade to https)', () => {
+    expect(buildRepoBrowseUrl('http://corp.example.com/team/repo')).toBe(
+      'http://corp.example.com/team/repo'
+    )
+  })
+
+  it('returns null for SCP-form (git@host:owner/repo) — not http(s)', () => {
+    expect(buildRepoBrowseUrl('git@github.com:KoalaOps/deployment.git')).toBe(null)
+  })
+
+  it('returns null for ssh:// scheme', () => {
+    expect(buildRepoBrowseUrl('ssh://git@github.com/KoalaOps/deployment.git')).toBe(null)
+  })
+
+  it('returns null for git+ssh:// scheme', () => {
+    expect(buildRepoBrowseUrl('git+ssh://git@github.com/o/r.git')).toBe(null)
+  })
+
+  it('returns null for oci:// scheme (Helm OCI registry)', () => {
+    expect(buildRepoBrowseUrl('oci://registry.example.com/charts/nginx')).toBe(null)
+  })
+
+  it('returns null for file:// scheme', () => {
+    expect(buildRepoBrowseUrl('file:///tmp/repo')).toBe(null)
+  })
+
+  it('returns null for javascript: scheme (XSS-safe)', () => {
+    expect(buildRepoBrowseUrl('javascript:alert(1)')).toBe(null)
+  })
+
+  it('returns null for empty / nullish input', () => {
+    expect(buildRepoBrowseUrl('')).toBe(null)
+    expect(buildRepoBrowseUrl(undefined)).toBe(null)
+    expect(buildRepoBrowseUrl(null)).toBe(null)
+    expect(buildRepoBrowseUrl('   ')).toBe(null)
+  })
+
+  it('returns null for non-URL garbage', () => {
+    expect(buildRepoBrowseUrl('not a url')).toBe(null)
+  })
+})
+
+describe('buildPathBrowseUrl - GitHub', () => {
+  it('builds tree URL with branch ref', () => {
+    expect(
+      buildPathBrowseUrl(
+        'https://github.com/KoalaOps/deployment',
+        'argocd/addons/keda/keda/nonprod-cluster-us-east1',
+        'main'
+      )
+    ).toBe(
+      'https://github.com/KoalaOps/deployment/tree/main/argocd/addons/keda/keda/nonprod-cluster-us-east1'
+    )
+  })
+
+  it('uses HEAD when targetRevision is empty', () => {
+    expect(
+      buildPathBrowseUrl('https://github.com/o/r', 'src', '')
+    ).toBe('https://github.com/o/r/tree/HEAD/src')
+  })
+
+  it('uses HEAD when targetRevision is literally "HEAD"', () => {
+    expect(
+      buildPathBrowseUrl('https://github.com/o/r', 'src', 'HEAD')
+    ).toBe('https://github.com/o/r/tree/HEAD/src')
+  })
+
+  it('passes SHA through as the ref (no special prefix)', () => {
+    const sha = 'a'.repeat(40)
+    expect(
+      buildPathBrowseUrl('https://github.com/o/r', 'src', sha)
+    ).toBe(`https://github.com/o/r/tree/${sha}/src`)
+  })
+
+  it('works with .git suffix on repo URL', () => {
+    expect(
+      buildPathBrowseUrl('https://github.com/o/r.git', 'a/b', 'main')
+    ).toBe('https://github.com/o/r/tree/main/a/b')
+  })
+
+  it('url-encodes path segments with spaces', () => {
+    expect(
+      buildPathBrowseUrl('https://github.com/o/r', 'dir with space/file', 'main')
+    ).toBe('https://github.com/o/r/tree/main/dir%20with%20space/file')
+  })
+
+  it('drops empty path segments from double slashes', () => {
+    expect(
+      buildPathBrowseUrl('https://github.com/o/r', 'a//b', 'main')
+    ).toBe('https://github.com/o/r/tree/main/a/b')
+  })
+
+  it('preserves slashes in branch names (feature/foo)', () => {
+    expect(
+      buildPathBrowseUrl('https://github.com/o/r', 'src', 'feature/foo')
+    ).toBe('https://github.com/o/r/tree/feature/foo/src')
+  })
+
+  it('treats uppercase 40-hex as a SHA (no special prefix)', () => {
+    const sha = 'A'.repeat(40)
+    expect(
+      buildPathBrowseUrl('https://github.com/o/r', 'src', sha)
+    ).toBe(`https://github.com/o/r/tree/${sha}/src`)
+  })
+})
+
+describe('buildPathBrowseUrl - GitLab', () => {
+  it('builds /-/tree URL', () => {
+    expect(
+      buildPathBrowseUrl('https://gitlab.com/group/proj', 'src/app', 'main')
+    ).toBe('https://gitlab.com/group/proj/-/tree/main/src/app')
+  })
+
+  it('supports nested subgroups (full group path before /-/tree)', () => {
+    expect(
+      buildPathBrowseUrl('https://gitlab.com/group/sub/proj', 'src', 'main')
+    ).toBe('https://gitlab.com/group/sub/proj/-/tree/main/src')
+  })
+})
+
+describe('buildPathBrowseUrl - Bitbucket', () => {
+  it('builds /src URL with explicit ref', () => {
+    expect(
+      buildPathBrowseUrl('https://bitbucket.org/team/proj', 'src/app', 'develop')
+    ).toBe('https://bitbucket.org/team/proj/src/develop/src/app')
+  })
+
+  // Bitbucket Cloud /src/ doesn't accept "HEAD" — better no link than a 404 link.
+  it('returns null when ref is empty (HEAD not a valid Bitbucket ref token)', () => {
+    expect(
+      buildPathBrowseUrl('https://bitbucket.org/team/proj', 'src/app', '')
+    ).toBe(null)
+  })
+  it('returns null when ref is literally "HEAD"', () => {
+    expect(
+      buildPathBrowseUrl('https://bitbucket.org/team/proj', 'src/app', 'HEAD')
+    ).toBe(null)
+  })
+})
+
+describe('buildPathBrowseUrl - Azure DevOps', () => {
+  it('builds dev.azure.com URL with GB prefix for branches', () => {
+    expect(
+      buildPathBrowseUrl(
+        'https://dev.azure.com/myorg/MyProject/_git/myrepo',
+        'src/app',
+        'main'
+      )
+    ).toBe(
+      'https://dev.azure.com/myorg/MyProject/_git/myrepo?path=/src/app&version=GBmain'
+    )
+  })
+
+  it('uses GC prefix for SHA refs (lowercase)', () => {
+    const sha = 'a'.repeat(40)
+    expect(
+      buildPathBrowseUrl(
+        'https://dev.azure.com/myorg/MyProject/_git/myrepo',
+        'src',
+        sha
+      )
+    ).toBe(
+      `https://dev.azure.com/myorg/MyProject/_git/myrepo?path=/src&version=GC${sha}`
+    )
+  })
+
+  it('uses GC prefix for SHA refs (uppercase)', () => {
+    const sha = 'A'.repeat(40)
+    expect(
+      buildPathBrowseUrl(
+        'https://dev.azure.com/myorg/MyProject/_git/myrepo',
+        'src',
+        sha
+      )
+    ).toBe(
+      `https://dev.azure.com/myorg/MyProject/_git/myrepo?path=/src&version=GC${sha}`
+    )
+  })
+
+  it('percent-encodes slashes in branch names (query-string context)', () => {
+    expect(
+      buildPathBrowseUrl(
+        'https://dev.azure.com/myorg/MyProject/_git/myrepo',
+        'src',
+        'feature/foo'
+      )
+    ).toBe(
+      'https://dev.azure.com/myorg/MyProject/_git/myrepo?path=/src&version=GBfeature%2Ffoo'
+    )
+  })
+
+  it('omits version when ref is HEAD/empty', () => {
+    expect(
+      buildPathBrowseUrl(
+        'https://dev.azure.com/myorg/MyProject/_git/myrepo',
+        'src',
+        'HEAD'
+      )
+    ).toBe('https://dev.azure.com/myorg/MyProject/_git/myrepo?path=/src')
+  })
+
+  it('supports legacy visualstudio.com host', () => {
+    expect(
+      buildPathBrowseUrl(
+        'https://myorg.visualstudio.com/MyProject/_git/myrepo',
+        'src',
+        'main'
+      )
+    ).toBe(
+      'https://dev.azure.com/myorg/MyProject/_git/myrepo?path=/src&version=GBmain'
+    )
+  })
+
+  it('does not double-encode project/repo segments that arrived percent-encoded', () => {
+    expect(
+      buildPathBrowseUrl(
+        'https://dev.azure.com/myorg/My%20Project/_git/My%20Repo',
+        'src',
+        'main'
+      )
+    ).toBe(
+      'https://dev.azure.com/myorg/My%20Project/_git/My%20Repo?path=/src&version=GBmain'
+    )
+  })
+})
+
+describe('buildPathBrowseUrl - unknown / no path', () => {
+  it('returns null for unknown hosts', () => {
+    expect(
+      buildPathBrowseUrl('https://git.internal.example.com/team/proj', 'src', 'main')
+    ).toBe(null)
+  })
+
+  it('returns null when path is empty', () => {
+    expect(buildPathBrowseUrl('https://github.com/o/r', '', 'main')).toBe(null)
+    expect(buildPathBrowseUrl('https://github.com/o/r', '   ', 'main')).toBe(null)
+    expect(buildPathBrowseUrl('https://github.com/o/r', null, 'main')).toBe(null)
+  })
+
+  it('returns null when path has only slashes', () => {
+    expect(buildPathBrowseUrl('https://github.com/o/r', '///', 'main')).toBe(null)
+  })
+
+  it('returns null for nullish repo URL', () => {
+    expect(buildPathBrowseUrl(undefined, 'src', 'main')).toBe(null)
+  })
+
+  // Known host but path too short to identify owner+repo -> downgrade to unknown.
+  // Pins the `pathParts.length < 2` guard across all three slash-providers.
+  it('returns null when github URL has only owner segment', () => {
+    expect(buildPathBrowseUrl('https://github.com/onlyowner', 'src', 'main')).toBe(null)
+  })
+  it('returns null when bitbucket URL has only owner segment', () => {
+    expect(buildPathBrowseUrl('https://bitbucket.org/onlyowner', 'src', 'main')).toBe(null)
+  })
+  it('returns null when gitlab URL has only one segment', () => {
+    expect(buildPathBrowseUrl('https://gitlab.com/onlyone', 'src', 'main')).toBe(null)
+  })
+
+  // Azure DevOps `_git` index arithmetic — high-risk branch.
+  it('returns null when dev.azure.com URL is missing _git', () => {
+    expect(
+      buildPathBrowseUrl('https://dev.azure.com/myorg/MyProject/myrepo', 'src', 'main')
+    ).toBe(null)
+  })
+  it('returns null when dev.azure.com URL ends with _git (no repo segment)', () => {
+    expect(
+      buildPathBrowseUrl('https://dev.azure.com/myorg/MyProject/_git', 'src', 'main')
+    ).toBe(null)
+  })
+  it('returns null when dev.azure.com URL has _git but no project (gitIdx < 2)', () => {
+    expect(
+      buildPathBrowseUrl('https://dev.azure.com/myorg/_git/myrepo', 'src', 'main')
+    ).toBe(null)
+  })
+  it('returns null when visualstudio.com URL is missing _git', () => {
+    expect(
+      buildPathBrowseUrl('https://myorg.visualstudio.com/MyProject/myrepo', 'src', 'main')
+    ).toBe(null)
+  })
+  it('returns null when visualstudio.com URL ends with _git', () => {
+    expect(
+      buildPathBrowseUrl('https://myorg.visualstudio.com/MyProject/_git', 'src', 'main')
+    ).toBe(null)
+  })
+
+  // Pin .toUpperCase() behavior so a refactor to === 'HEAD' would fail loudly.
+  it('treats lowercase "head" the same as "HEAD" (falls back to default branch)', () => {
+    expect(
+      buildPathBrowseUrl('https://github.com/o/r', 'src', 'head')
+    ).toBe('https://github.com/o/r/tree/HEAD/src')
+  })
+
+  // Pin SHA_RE's exact-40-char requirement. Loosening to {7,40} would mis-prefix
+  // short-hex branch names like "abc1234" as Azure commits (GC) instead of branches (GB).
+  it('does not treat 7-char hex as a SHA on Azure (stays GB)', () => {
+    expect(
+      buildPathBrowseUrl(
+        'https://dev.azure.com/myorg/MyProject/_git/myrepo',
+        'src',
+        'abc1234'
+      )
+    ).toBe(
+      'https://dev.azure.com/myorg/MyProject/_git/myrepo?path=/src&version=GBabc1234'
+    )
+  })
+})

package/src/utils/git-provider-urls.ts

@@ -0,0 +1,142 @@
+type ParsedRepo =
+  | { provider: 'github' | 'gitlab' | 'bitbucket'; owner: string; repo: string }
+  | { provider: 'azure-devops'; org: string; project: string; repo: string }
+  | { provider: 'unknown' }
+
+const SHA_RE = /^[0-9a-f]{40}$/i
+
+function stripDotGit(s: string): string {
+  return s.replace(/\.git$/i, '')
+}
+
+function encodePath(path: string): string {
+  return path
+    .split('/')
+    .filter(seg => seg.length > 0)
+    .map(encodeURIComponent)
+    .join('/')
+}
+
+// Refs (branches) can contain slashes — feature/foo — which providers serve as
+// literal path segments. encodeURIComponent would turn those into %2F and 404.
+function encodeRef(ref: string): string {
+  return ref.split('/').map(encodeURIComponent).join('/')
+}
+
+// Validate `repoURL` is a well-formed http(s) URL and return the URL object.
+// SCP-form (git@host:o/r), ssh://, git+ssh://, oci://, file://, etc. all
+// return null — we don't manipulate user-supplied URLs to make them linkable.
+function parseHttpRepoUrl(repoURL: string | undefined | null): URL | null {
+  if (!repoURL) return null
+  const trimmed = repoURL.trim()
+  if (!trimmed) return null
+  let url: URL
+  try {
+    url = new URL(trimmed)
+  } catch {
+    return null
+  }
+  if (url.protocol !== 'http:' && url.protocol !== 'https:') return null
+  return url
+}
+
+function detectProvider(url: URL): ParsedRepo {
+  const hostname = url.hostname.toLowerCase()
+  const pathParts = url.pathname.replace(/^\/+/, '').replace(/\/+$/, '').split('/')
+
+  if (hostname === 'github.com' || hostname === 'bitbucket.org') {
+    if (pathParts.length < 2) return { provider: 'unknown' }
+    return {
+      provider: hostname === 'github.com' ? 'github' : 'bitbucket',
+      owner: pathParts[0],
+      repo: stripDotGit(pathParts[1]),
+    }
+  }
+
+  if (hostname === 'gitlab.com') {
+    // GitLab supports nested groups: the owner segment may itself be a slash-joined path.
+    if (pathParts.length < 2) return { provider: 'unknown' }
+    return {
+      provider: 'gitlab',
+      owner: pathParts.slice(0, -1).join('/'),
+      repo: stripDotGit(pathParts[pathParts.length - 1]),
+    }
+  }
+
+  // Azure DevOps URL shape: /{org}/{project}/_git/{repo} (dev.azure.com)
+  // or {org}.visualstudio.com/{project}/_git/{repo} (legacy).
+  if (hostname === 'dev.azure.com') {
+    const gitIdx = pathParts.indexOf('_git')
+    if (gitIdx < 2 || gitIdx + 1 >= pathParts.length) {
+      return { provider: 'unknown' }
+    }
+    return {
+      provider: 'azure-devops',
+      org: pathParts.slice(0, gitIdx - 1).join('/'),
+      project: pathParts[gitIdx - 1],
+      repo: pathParts[gitIdx + 1],
+    }
+  }
+
+  if (hostname.endsWith('.visualstudio.com')) {
+    const gitIdx = pathParts.indexOf('_git')
+    if (gitIdx < 1 || gitIdx + 1 >= pathParts.length) {
+      return { provider: 'unknown' }
+    }
+    return {
+      provider: 'azure-devops',
+      org: hostname.slice(0, -'.visualstudio.com'.length),
+      project: pathParts.slice(0, gitIdx).join('/'),
+      repo: pathParts[gitIdx + 1],
+    }
+  }
+
+  return { provider: 'unknown' }
+}
+
+// Pass-through linkability check: link the user's repoURL as-is iff it parses
+// as http(s); never rewrite SCP/SSH forms.
+export function buildRepoBrowseUrl(repoURL: string | undefined | null): string | null {
+  return parseHttpRepoUrl(repoURL) ? repoURL!.trim() : null
+}
+
+export function buildPathBrowseUrl(
+  repoURL: string | undefined | null,
+  path: string | undefined | null,
+  targetRevision: string | undefined | null
+): string | null {
+  if (!path || !path.trim()) return null
+  const url = parseHttpRepoUrl(repoURL)
+  if (!url) return null
+  const parsed = detectProvider(url)
+  if (parsed.provider === 'unknown') return null
+
+  const rawRef = (targetRevision ?? '').trim()
+  // GitHub and GitLab browse URLs accept "HEAD" as a ref token that resolves
+  // to the default branch. Bitbucket Cloud's /src/ path does not — see the
+  // bitbucket case below.
+  const hasExplicitRef = rawRef !== '' && rawRef.toUpperCase() !== 'HEAD'
+  const ref = hasExplicitRef ? rawRef : 'HEAD'
+  const encodedPath = encodePath(path)
+  if (!encodedPath) return null
+
+  switch (parsed.provider) {
+    case 'github':
+      return `https://github.com/${parsed.owner}/${parsed.repo}/tree/${encodeRef(ref)}/${encodedPath}`
+    case 'gitlab':
+      return `https://gitlab.com/${parsed.owner}/${parsed.repo}/-/tree/${encodeRef(ref)}/${encodedPath}`
+    case 'bitbucket':
+      // Bitbucket Cloud's /src/{ref}/... endpoint requires a real branch name
+      // or commit hash; HEAD 404s. Without an explicit ref we can't build a
+      // working deep link, so fall through to plain text.
+      if (!hasExplicitRef) return null
+      return `https://bitbucket.org/${parsed.owner}/${parsed.repo}/src/${encodeRef(ref)}/${encodedPath}`
+    case 'azure-devops': {
+      const isSha = hasExplicitRef && SHA_RE.test(rawRef)
+      const versionParam = hasExplicitRef ? `&version=${isSha ? 'GC' : 'GB'}${encodeURIComponent(rawRef)}` : ''
+      // org/project/repo are taken straight from url.pathname segments, which the URL
+      // parser leaves percent-encoded — re-encoding would double-encode (My%20X → My%2520X).
+      return `https://dev.azure.com/${parsed.org}/${parsed.project}/_git/${parsed.repo}?path=/${encodedPath}${versionParam}`
+    }
+  }
+}

package/src/utils/index.ts

@@ -17,3 +17,4 @@ export * from './validators'
 export * from './gitops-owner'
 export * from './gitops-route'
 export * from './rbac-badges'
+export * from './git-provider-urls'