@skyhook-io/k8s-ui 1.7.6 → 1.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -31,6 +31,11 @@
       "./src/components/gitops/*.tsx",
       "./src/components/gitops/*.ts"
     ],
+    "./components/issues": "./src/components/issues/index.ts",
+    "./components/issues/*": [
+      "./src/components/issues/*.tsx",
+      "./src/components/issues/*.ts"
+    ],
     "./components/timeline/*": [
       "./src/components/timeline/*.tsx",
       "./src/components/timeline/*.ts"

package/src/components/charts/PrometheusChartsView.tsx

@@ -0,0 +1,233 @@
+import { clsx } from 'clsx'
+import { BarChart3, Wifi, WifiOff, Loader2 } from 'lucide-react'
+import { AreaChart } from './AreaChart'
+import { MetricsSummary } from './MetricsSummary'
+import { SeriesLegend } from './SeriesLegend'
+import type { TimeSeries, ReferenceLine } from './types'
+
+// Pure presentational Prometheus charts view, shared between radar's WorkloadView
+// and Radar Hub's Application metrics tab. It owns NO data fetching — the host
+// passes status, the selected category/range, the metrics result, and an
+// onConnect callback. radar/web injects its global-apiBase hooks; the hub injects
+// per-cluster tunnel fetches. Built on the AreaChart/MetricsSummary/SeriesLegend
+// primitives already in this package.
+
+export type PrometheusMetricCategory = 'cpu' | 'memory' | 'network_rx' | 'network_tx' | 'filesystem' | 'restarts'
+export type PrometheusTimeRange = '10m' | '30m' | '1h' | '3h' | '6h' | '12h' | '24h' | '48h' | '7d' | '14d'
+
+export interface MetricCategoryDef {
+  key: PrometheusMetricCategory
+  label: string
+  color: string // tailwind text class for the summary's current value
+  chartColor: string // hex for the SVG line
+  fillColor: string // hex + alpha for the SVG fill
+}
+
+export const WORKLOAD_METRIC_CATEGORIES: MetricCategoryDef[] = [
+  { key: 'cpu', label: 'CPU', color: 'text-blue-400', chartColor: '#60a5fa', fillColor: '#60a5fa22' },
+  { key: 'memory', label: 'Memory', color: 'text-purple-400', chartColor: '#c084fc', fillColor: '#c084fc22' },
+  { key: 'network_rx', label: 'Net RX', color: 'text-emerald-400', chartColor: '#34d399', fillColor: '#34d39922' },
+  { key: 'network_tx', label: 'Net TX', color: 'text-orange-400', chartColor: '#fb923c', fillColor: '#fb923c22' },
+  { key: 'filesystem', label: 'Disk I/O', color: 'text-amber-400', chartColor: '#fbbf24', fillColor: '#fbbf2422' },
+]
+
+export const NODE_METRIC_CATEGORIES: MetricCategoryDef[] = [
+  { key: 'cpu', label: 'CPU', color: 'text-blue-400', chartColor: '#60a5fa', fillColor: '#60a5fa22' },
+  { key: 'memory', label: 'Memory', color: 'text-purple-400', chartColor: '#c084fc', fillColor: '#c084fc22' },
+  { key: 'filesystem', label: 'Disk', color: 'text-amber-400', chartColor: '#fbbf24', fillColor: '#fbbf2422' },
+]
+
+export const METRIC_TIME_RANGES: { value: PrometheusTimeRange; label: string }[] = [
+  { value: '10m', label: '10m' },
+  { value: '30m', label: '30m' },
+  { value: '1h', label: '1h' },
+  { value: '3h', label: '3h' },
+  { value: '6h', label: '6h' },
+  { value: '12h', label: '12h' },
+  { value: '24h', label: '24h' },
+  { value: '7d', label: '7d' },
+]
+
+const SUPPORTED_KINDS = new Set([
+  'Pod', 'Deployment', 'StatefulSet', 'DaemonSet', 'ReplicaSet', 'Job', 'CronJob', 'Node',
+])
+
+export interface PrometheusResourceMetricsResult {
+  unit: string
+  result?: { series?: TimeSeries[] }
+  query?: string
+  hint?: string
+}
+
+export interface PrometheusChartsViewProps {
+  kind: string
+  /** When false (embedded in an Overview), hide entirely when not connected or no data. */
+  showEmptyState?: boolean
+  // Connection status (host-provided)
+  statusLoading: boolean
+  isConnected: boolean
+  statusError?: string
+  onConnect: () => void
+  connecting: boolean
+  // Selection (controlled by host)
+  category: PrometheusMetricCategory
+  onCategoryChange: (c: PrometheusMetricCategory) => void
+  range: PrometheusTimeRange
+  onRangeChange: (r: PrometheusTimeRange) => void
+  // Metrics (host-fetched)
+  metrics?: PrometheusResourceMetricsResult
+  metricsLoading: boolean
+  metricsError?: Error | null
+  referenceLines?: ReferenceLine[]
+}
+
+export function PrometheusChartsView({
+  kind,
+  showEmptyState = false,
+  statusLoading,
+  isConnected,
+  statusError,
+  onConnect,
+  connecting,
+  category,
+  onCategoryChange,
+  range,
+  onRangeChange,
+  metrics,
+  metricsLoading,
+  metricsError,
+  referenceLines,
+}: PrometheusChartsViewProps) {
+  const categories = kind === 'Node' ? NODE_METRIC_CATEGORIES : WORKLOAD_METRIC_CATEGORIES
+  const isSupported = SUPPORTED_KINDS.has(kind)
+  const activeCategoryDef = categories.find((c) => c.key === category) || categories[0]
+  const series = metrics?.result?.series ?? []
+
+  if (!isSupported) return null
+
+  if (statusLoading) {
+    if (!showEmptyState) return null
+    return (
+      <div className="flex items-center justify-center py-12 text-theme-text-tertiary">
+        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+        Checking Prometheus availability...
+      </div>
+    )
+  }
+
+  if (!showEmptyState) {
+    if (!isConnected) return null
+    if (!metricsLoading && !metricsError && !series.length) return null
+  }
+
+  if (!isConnected) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-4 py-12">
+        <WifiOff className="h-10 w-10 text-theme-text-tertiary" />
+        <div className="text-center">
+          <p className="mb-1 text-sm text-theme-text-secondary">Prometheus not connected</p>
+          <p className="mb-4 text-xs text-theme-text-tertiary">
+            {statusError || 'Connect to view historical CPU, memory, and network metrics'}
+          </p>
+          <button
+            type="button"
+            onClick={onConnect}
+            disabled={connecting}
+            className="btn-brand inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium"
+          >
+            {connecting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Wifi className="h-4 w-4" />}
+            Discover Prometheus
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Toolbar */}
+      <div className="flex shrink-0 items-center justify-between border-b border-theme-border bg-theme-surface/50 px-4 py-2.5">
+        <div className="flex items-center gap-1">
+          <BarChart3 className="mr-2 h-4 w-4 text-theme-text-tertiary" />
+          {categories.map((cat) => (
+            <button
+              key={cat.key}
+              type="button"
+              onClick={() => onCategoryChange(cat.key)}
+              className={clsx(
+                'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',
+                category === cat.key
+                  ? 'bg-theme-elevated text-theme-text-primary shadow-sm'
+                  : 'text-theme-text-tertiary hover:bg-theme-elevated/50 hover:text-theme-text-secondary',
+              )}
+            >
+              {cat.label}
+            </button>
+          ))}
+        </div>
+        <select
+          value={range}
+          onChange={(e) => onRangeChange(e.target.value as PrometheusTimeRange)}
+          className="rounded-md border border-theme-border bg-theme-elevated px-2 py-1 text-xs text-theme-text-secondary focus:outline-none focus:ring-1 focus:ring-blue-500/50"
+        >
+          {METRIC_TIME_RANGES.map((tr) => (
+            <option key={tr.value} value={tr.value}>
+              {tr.label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Chart area */}
+      <div className="min-h-[280px] flex-1 p-4">
+        {metricsLoading ? (
+          <div className="flex min-h-[240px] items-center justify-center text-theme-text-tertiary">
+            <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+            Loading metrics...
+          </div>
+        ) : metricsError ? (
+          <div className="flex h-full items-center justify-center text-sm text-red-400">
+            Failed to load metrics: {(metricsError as Error).message}
+          </div>
+        ) : series.length ? (
+          <div className="flex h-full flex-col gap-4">
+            <MetricsSummary series={series} unit={metrics!.unit} currentColorClass={activeCategoryDef.color} />
+            <div className="min-h-0 flex-1">
+              <AreaChart
+                series={series}
+                color={activeCategoryDef.chartColor}
+                fillColor={activeCategoryDef.fillColor}
+                unit={metrics!.unit}
+                referenceLines={referenceLines}
+              />
+            </div>
+            {series.length > 1 && <SeriesLegend series={series} color={activeCategoryDef.chartColor} />}
+          </div>
+        ) : (
+          <div className="flex h-full flex-col items-center justify-center text-theme-text-tertiary">
+            <BarChart3 className="mb-2 h-8 w-8 opacity-40" />
+            <p className="text-sm">No data for this time range</p>
+            <p className="mt-1 text-xs text-theme-text-quaternary">
+              Try a different time range or check that metrics are being collected
+            </p>
+            {metrics?.hint && (
+              <p className="mt-3 w-full max-w-lg rounded border border-yellow-500/30 bg-yellow-500/10 px-3 py-2 text-xs text-yellow-700 dark:text-yellow-400">
+                {metrics.hint}
+              </p>
+            )}
+            {metrics?.query && (
+              <details className="mt-3 w-full max-w-lg text-left">
+                <summary className="cursor-pointer text-xs text-theme-text-quaternary hover:text-theme-text-tertiary">
+                  Diagnostics: show PromQL query
+                </summary>
+                <div className="mt-2 break-all rounded border border-theme-border bg-theme-base p-2 font-mono text-xs text-theme-text-secondary">
+                  {metrics.query}
+                </div>
+              </details>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/charts/index.ts

@@ -1,6 +1,19 @@
 export { AreaChart } from './AreaChart'
 export { MetricsSummary } from './MetricsSummary'
 export { SeriesLegend } from './SeriesLegend'
+export {
+  PrometheusChartsView,
+  WORKLOAD_METRIC_CATEGORIES,
+  NODE_METRIC_CATEGORIES,
+  METRIC_TIME_RANGES,
+} from './PrometheusChartsView'
+export type {
+  PrometheusChartsViewProps,
+  PrometheusMetricCategory,
+  PrometheusTimeRange,
+  MetricCategoryDef,
+  PrometheusResourceMetricsResult,
+} from './PrometheusChartsView'
 export { SERIES_COLORS, seriesColor, seriesFill, computeShortLabels } from './colors'
 export { formatMetricValue, formatTimestamp } from './format'
 export { computeSaturation } from './saturation'

package/src/components/checks/ChecksView.tsx

@@ -703,7 +703,11 @@ function FindingLine({
           {body}
         </button>
       ) : resourceHref ? (
-        <a href={resourceHref(r)} className={cls}>
+        // Opens in a new tab to match the ExternalLink glyph in `body`. For the
+        // Hub fleet view this href crosses the Hub→Cluster SPA boundary (a full
+        // document nav); a new tab keeps the Checks queue intact and avoids the
+        // cross-tree browser-Back dead-end (SKY-931).
+        <a href={resourceHref(r)} target="_blank" rel="noreferrer" className={cls}>
           {body}
         </a>
       ) : (

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')
@@ -516,7 +552,7 @@ export function GitOpsTableView({
           // understand why some destinations show as unmatched.
           <div className="shrink-0 border-b border-amber-500/30 bg-amber-500/10 px-4 py-2 text-xs text-amber-700 dark:text-amber-300">
             <span className="font-medium">Cross-cluster mapping limited for {forbiddenSecretsClusters.join(', ')}.</span>{' '}
-            Owner needs <code>get secrets</code> in the <code>argocd</code> namespace there; destination
+            Owner needs <code className="inline-code">get secrets</code> in the <code className="inline-code">argocd</code> namespace there; destination
             correlation falls back to name-only resolution.
           </div>
         )}
@@ -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 ?? '',
@@ -1717,4 +1915,3 @@ function newestConditionTime(resource: any): string {
     .sort()
   return times[times.length - 1] ?? ''
 }
-

package/src/components/gitops/index.ts

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

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

@@ -818,12 +818,12 @@ export function GitOpsChangesView({ insight, error, onOpenResource, focusKey, tr
           <div className="border-b border-theme-border bg-theme-base/40 px-4 py-2 text-[11px] text-theme-text-tertiary">
             Radar reads each resource's drift status from the controller. For a line-by-line diff, {insight.summary.tool === 'fluxcd' ? (
               insight.summary.kind === 'HelmRelease' ? (
-                <>run <code className="rounded bg-theme-elevated px-1 py-0.5 font-mono text-[10px]">helm diff upgrade {insight.summary.name} &lt;chart&gt;</code> (requires the helm-diff plugin).</>
+                <>run <code className="inline-code text-[10px]">helm diff upgrade {insight.summary.name} &lt;chart&gt;</code> (requires the helm-diff plugin).</>
               ) : (
-                <>run <code className="rounded bg-theme-elevated px-1 py-0.5 font-mono text-[10px]">flux diff kustomization {insight.summary.name} --path &lt;local-manifests&gt;</code>.</>
+                <>run <code className="inline-code text-[10px]">flux diff kustomization {insight.summary.name} --path &lt;local-manifests&gt;</code>.</>
               )
             ) : (
-              <>use the Argo CD UI or run <code className="rounded bg-theme-elevated px-1 py-0.5 font-mono text-[10px]">argocd app diff {insight.summary.name}</code>.</>
+              <>use the Argo CD UI or run <code className="inline-code text-[10px]">argocd app diff {insight.summary.name}</code>.</>
             )}
           </div>
         )}