@skyhook-io/k8s-ui 1.18.0 → 1.18.1

package/README.md

@@ -2,6 +2,13 @@
 
 Shared, source-distributed Kubernetes UI components used by Radar.
 
+## Toast updates
+
+`useToast().showToast(message, { id })` updates an existing toast with that ID
+in place and restarts its dismiss timer. Omit `id` for independent toasts.
+Set `duration: 0` to keep a progress toast visible until its result replaces it;
+omit `duration` on the result to use the normal dismiss time.
+
 ## Local terminal metadata
 
 `LocalTerminalTab` accepts optional `onSessionInfo` and `toolbarExtra` props.
@@ -42,6 +49,12 @@ resolve: {
 
 webpack 5 hosts need the same mapping in `resolve.alias`. Without it the build fails to resolve the worker import.
 
+## Resource read coverage
+
+`ResourceReadCoverage` describes the scope an answer covers (and `narrowedBy`, when the caller's access, Radar's pin or what Radar collects narrowed it), what Radar read of it, and coded gaps naming what it did not read and why. `READ_ACTIONS` / `readActionFor` say what resolves each code. `ResourceCoverage` additionally permits `unknown` in UI adapters for older Radar instances. It does not describe object freshness or count truncation.
+
+Pass list coverage through `ResourceQueryResult.coverage`, and per-kind count coverage through `ResourcesView.resourceCoverage` / `ResourcesSidebar.resourceCoverage`. Counts stay useful for sizing; a partial count displays as a lower bound and a partial zero does not hide a kind as empty; a category total is a lower bound when any of its kinds is partial or narrowed by what Radar collects. A complete list whose scope Radar's collection narrowed (`narrowedBy: ["namespace_collection"]`) gets a neutral note naming the collected namespaces. Unknown or absent coverage keeps the presentation that predates coverage. Partial list notices name the affected namespaces when the gap names at most three; larger or unnamed sets keep the compact wording. Loaded list counts retain their coverage when cached. `GitOpsTableView` accepts aggregate `coverageStatus` and `countsPartial` keys; hosts must combine coverage across every cluster/source contributing to the view, and a host that passes no `coverageStatus` gets the unqualified view. Keep source-specific metadata in the host rather than repeating it on every row.
+
 ## Resource kind views and certainty
 
 `ResourcesView.renderKindView(kind)` optionally replaces a kind's table while

package/package.json

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

package/src/components/compare/CompareResourcePicker.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState, useId } from 'react'
+import { useEffect, useMemo, useRef, useState, useId, type ReactNode } from 'react'
 import { clsx } from 'clsx'
 import { GitCompare, Search, X } from 'lucide-react'
 import { DialogPortal } from '../ui/DialogPortal'
@@ -18,6 +18,11 @@ export interface CompareResourcePickerProps {
   sourceSide?: CompareSide
   /** Candidate resources — same kind as source. Source is filtered out automatically. */
   candidates: CompareResourceRef[]
+  /** Says the candidate list may be incomplete; shown as a warning above it. */
+  coverageNote?: ReactNode
+  /** Says the list covers only the namespaces Radar collects; shown neutrally.
+   *  Ignored when coverageNote is set. */
+  scopeNote?: ReactNode
   loading?: boolean
   error?: unknown
   onPick: (r: CompareResourceRef) => void
@@ -30,6 +35,8 @@ export function CompareResourcePicker({
   sourceSide = 'a',
   candidates,
   loading,
+  coverageNote,
+  scopeNote,
   error,
   onPick,
 }: CompareResourcePickerProps) {
@@ -133,6 +140,9 @@ export function CompareResourcePicker({
         </div>
       </div>
 
+      {coverageNote
+        ? <div role="status" className="px-4 py-2 text-xs text-warning-text border-b border-theme-border">{coverageNote}</div>
+        : scopeNote && <div role="status" className="px-4 py-2 text-xs text-theme-text-tertiary border-b border-theme-border">{scopeNote}</div>}
       <div className="flex-1 min-h-0 overflow-y-auto">
         {loading && (
           <div className="flex items-center justify-center py-8 text-theme-text-secondary text-sm">
@@ -146,9 +156,13 @@ export function CompareResourcePicker({
         )}
         {!loading && error == null && filtered.length === 0 && (
           <div className="flex flex-col items-center justify-center py-12 text-theme-text-tertiary text-sm gap-1">
-            {candidates.length <= 1
-              ? `No other ${source.kind} available to compare against.`
-              : 'No matches.'}
+            {candidates.length > 1
+              ? 'No matches.'
+              : coverageNote
+                ? `No other ${source.kind} found in what Radar could read.`
+                : scopeNote
+                  ? `No other ${source.kind} found in the collected namespaces.`
+                  : `No other ${source.kind} available to compare against.`}
           </div>
         )}
         {!loading && error == null && filtered.length > 0 && (

package/src/components/gitops/GitOpsDetailLayout.test.tsx

@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { GitOpsDetailLayout, type GitOpsDetailLayoutProps } from './GitOpsDetailLayout'
+
+const noop = () => {}
+
+const shell: Omit<GitOpsDetailLayoutProps, 'identity' | 'isArgoApp'> = {
+  status: null,
+  terminating: false,
+  terminatingChipTooltip: '',
+  terminatingActionTooltip: '',
+  insight: null,
+  insightLoading: false,
+  isFlux: false,
+  isFluxWorkload: false,
+  activeTab: 'topology',
+  onTabChange: noop,
+  fullscreen: false,
+  onToggleFullscreen: noop,
+  renderTabBody: () => null,
+  onNavigateRoot: noop,
+}
+
+describe('GitOpsDetailLayout', () => {
+  it('shows the tool chip, facts and Argo operations for an Argo CD Application', () => {
+    const html = renderToString(
+      <GitOpsDetailLayout
+        {...shell}
+        identity={{ kind: 'applications', group: 'argoproj.io', namespace: 'shop', name: 'wordpress', toolLabel: 'ArgoCD', kindLabel: 'Application' }}
+        detail={{ project: 'default', destination: 'in-cluster' }}
+        isArgoApp
+        argo={{
+          onSyncRequested: noop, onRefresh: noop, onTerminate: noop, onSuspend: noop, onResume: noop,
+          syncing: false, refreshing: false, refreshingKind: 'normal', terminating: false, suspending: false, resuming: false,
+          isRunning: false, autoSyncEnabled: false,
+        }}
+      />,
+    )
+    expect(html).toContain('ArgoCD')
+    expect(html).toContain('Project')
+    expect(html).toContain('Sync…')
+  })
+
+  // A root that is not a GitOps resource gets one state: its name and why
+  // there is no GitOps view, with no tool label, facts or operations.
+  it('shows only the refusal for a root that is not a GitOps resource', () => {
+    const message = 'Application.app.k8s.io shop/wordpress is not a supported Argo CD or Flux resource, so it has no GitOps view'
+    const html = renderToString(
+      <GitOpsDetailLayout
+        {...shell}
+        identity={{ kind: 'applications', group: 'app.k8s.io', namespace: 'shop', name: 'wordpress', kindLabel: 'Application' }}
+        isArgoApp={false}
+        resourceError={new Error(message)}
+      />,
+    )
+    expect(html).toContain('wordpress')
+    expect(html).toContain(message)
+    expect(html).not.toContain('ArgoCD')
+    expect(html).not.toContain('FluxCD')
+    expect(html).not.toContain('Project')
+    expect(html).not.toContain('Sync…')
+    expect(html).not.toContain('Reconcile')
+  })
+})

package/src/components/gitops/GitOpsDetailLayout.tsx

@@ -20,8 +20,9 @@ export interface GitOpsDetailIdentity {
   name: string
   // toolLabel: "ArgoCD" | "FluxCD" — passed through as a chip; kept as a
   // free string so future tools (Komodor, Argo Workflows, etc.) don't need
-  // an enum bump here.
-  toolLabel: string
+  // an enum bump here. Omitted for a root that is not a GitOps resource,
+  // which hides the tool/kind chip.
+  toolLabel?: string
   // kindLabel: human-facing kind (e.g. "Application"). Caller does the
   // lookup against its API resource catalog.
   kindLabel: string
@@ -117,7 +118,9 @@ export interface GitOpsDetailLayoutProps {
   terminatingActionTooltip: string
 
   // Spec/config row
-  detail: GitOpsDetailMetadata
+  // Omitted for a root that is not a GitOps resource, which hides the
+  // spec/config facts row.
+  detail?: GitOpsDetailMetadata
 
   // Insights — drives StatusStrip + IssuesBand
   insight: GitOpsInsight | null
@@ -334,9 +337,11 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
                     </span>
                   </Tooltip>
                 )}
-                <span className="inline-flex shrink-0 items-center rounded border border-theme-border bg-theme-hover/50 px-1.5 py-0.5 text-[11px] font-medium text-theme-text-secondary">
-                  {identity.toolLabel} · {identity.kindLabel}
-                </span>
+                {identity.toolLabel && (
+                  <span className="inline-flex shrink-0 items-center rounded border border-theme-border bg-theme-hover/50 px-1.5 py-0.5 text-[11px] font-medium text-theme-text-secondary">
+                    {identity.toolLabel} · {identity.kindLabel}
+                  </span>
+                )}
                 {isFleetContext && destinationCluster && (
                   // Cross-cluster lineage chip — fleet-only. Renders the
                   // destination cluster alongside the tool/kind chip so
@@ -350,14 +355,16 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
                 )}
               </div>
               {/* Spec/config row */}
-              <div className="mt-2 flex flex-wrap gap-x-5 gap-y-0.5 text-[11px] text-theme-text-tertiary">
-                <AppFact label="Project" value={detail.project || '-'} />
-                {detail.repository && <AppFact label="Source" value={detail.repository} />}
-                {detail.path && <AppFact label="Path" value={detail.path} />}
-                {detail.chart && <AppFact label="Chart" value={detail.chart} />}
-                <AppFact label="Destination" value={detail.destination || '-'} />
-                {detail.autoSyncMode && <AppFact label="Sync mode" value={detail.autoSyncMode} />}
-              </div>
+              {detail && (
+                <div className="mt-2 flex flex-wrap gap-x-5 gap-y-0.5 text-[11px] text-theme-text-tertiary">
+                  <AppFact label="Project" value={detail.project || '-'} />
+                  {detail.repository && <AppFact label="Source" value={detail.repository} />}
+                  {detail.path && <AppFact label="Path" value={detail.path} />}
+                  {detail.chart && <AppFact label="Chart" value={detail.chart} />}
+                  <AppFact label="Destination" value={detail.destination || '-'} />
+                  {detail.autoSyncMode && <AppFact label="Sync mode" value={detail.autoSyncMode} />}
+                </div>
+              )}
             </div>
             {/* Action buttons */}
             <div className="flex flex-wrap items-center gap-2">
@@ -518,7 +525,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
       {resourceLoading ? (
         <PaneLoader label="Loading GitOps resource…" className="flex-1" />
       ) : resourceError ? (
-        <div className="p-4 text-sm text-red-500">Failed to load resource: {resourceError.message}</div>
+        <div className="p-4 text-sm text-red-500">Failed to load GitOps view: {resourceError.message}</div>
       ) : (
         <div className={bodyShellClass}>
           <div className="flex shrink-0 items-center justify-between gap-3 border-b border-theme-border bg-theme-base px-4 py-2">

package/src/components/gitops/GitOpsTableView.coverage.test.tsx

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { GitOpsTableView } from './GitOpsTableView'
+
+const render = (props: Partial<Parameters<typeof GitOpsTableView>[0]> = {}) =>
+  renderToString(<GitOpsTableView rows={[]} counts={{}} onRowClick={() => {}} {...props} />)
+
+describe('GitOpsTableView coverage', () => {
+  it('shows the onboarding state to a host that passes no coverage, as before coverage', () => {
+    expect(render()).toContain('No GitOps resources detected')
+    expect(render({ coverageStatus: 'complete' })).toContain('No GitOps resources detected')
+  })
+  it('keeps the unqualified labels and empty text for unknown coverage', () => {
+    const html = render({ coverageStatus: 'unknown', counts: { 'argoproj.io/Application': 2 } })
+    expect(html).toContain('Total Applications')
+    expect(html).toContain('No applications found.')
+    expect(html).not.toContain('Partial results')
+  })
+  it('says what a complete empty answer covers', () => {
+    expect(render({ coverageStatus: 'complete', counts: { 'argoproj.io/Application': 2 } })).toContain('No applications found in the requested scope.')
+  })
+  it('does not call a partial answer empty', () => {
+    const html = render({ coverageStatus: 'partial' })
+    expect(html).not.toContain('No GitOps resources detected')
+    expect(html).toContain('Partial results')
+  })
+})

package/src/components/gitops/GitOpsTableView.tsx

@@ -202,7 +202,13 @@ export interface GitOpsTableViewProps {
   // counts keyed "group/Kind" — e.g. "argoproj.io/Application" → 17. Drives
   // the Scope-section mode tabs and the empty-state check.
   counts: Record<string, number>
+  // Read coverage of `rows`, combined across every source and cluster that
+  // contributes to them. `unknown` (the default) keeps the presentation that
+  // predates coverage; only `partial` qualifies the view.
+  coverageStatus?: 'complete' | 'partial' | 'unknown'
   countsUnavailable?: string[]
+  // Count keys whose counts are lower bounds.
+  countsPartial?: string[]
   // @deprecated Superseded by `freshnessSlot` — kept for source compatibility
   // with existing consumers; no longer drives any affordance here.
   onRefresh?: () => void
@@ -305,6 +311,8 @@ export function GitOpsTableView({
   error,
   counts,
   countsUnavailable,
+  countsPartial,
+  coverageStatus = 'unknown',
   freshnessSlot,
   onRowClick,
   rowHrefFor,
@@ -403,6 +411,13 @@ export function GitOpsTableView({
     projects: counts['argoproj.io/AppProject'] ?? 0,
     alerts: counts['notification.toolkit.fluxcd.io/Alert'] ?? 0,
   }
+  const partialCountKeys = new Set(countsPartial ?? [])
+  const modeCountsPartial: Record<GitOpsMode, boolean> = {
+    applications: coverageStatus === 'partial',
+    sources: ['source.toolkit.fluxcd.io/GitRepository', 'source.toolkit.fluxcd.io/OCIRepository', 'source.toolkit.fluxcd.io/HelmRepository'].some(key => partialCountKeys.has(key)),
+    projects: partialCountKeys.has('argoproj.io/AppProject'),
+    alerts: partialCountKeys.has('notification.toolkit.fluxcd.io/Alert'),
+  }
   const totalGitOps = Object.entries(counts).reduce(
     (sum, [key, n]) => sum + (isGitOpsCountKey(key) ? n : 0),
     0,
@@ -548,7 +563,7 @@ export function GitOpsTableView({
   // Also require zero actual rows: the cold-cache retry can populate `rows`
   // before the separate counts map catches up, and a populated table must not
   // be hidden behind a "nothing here" screen.
-  if (totalGitOps === 0 && allRowsInput.length === 0 && !loading && !hasGlobalNamespaceFilter && !hasUnavailableGitOpsCounts) {
+  if (totalGitOps === 0 && allRowsInput.length === 0 && !loading && !hasGlobalNamespaceFilter && !hasUnavailableGitOpsCounts && coverageStatus !== 'partial') {
     return (
       <div className="flex h-full min-h-0 flex-1 items-start justify-center bg-theme-base px-4 pb-4 pt-[22vh]">
         <div className="rounded-lg border border-theme-border bg-theme-surface p-8 text-center">
@@ -580,7 +595,7 @@ export function GitOpsTableView({
   const summaryTiles: SummaryTileSpec[] = [
     {
       key: 'total',
-      label: 'Total Applications',
+      label: coverageStatus === 'partial' ? 'Observed Applications' : 'Total Applications',
       value: allRows.length,
       tone: 'neutral',
       active: noOtherFiltersActive(),
@@ -678,6 +693,7 @@ export function GitOpsTableView({
         mode={mode}
         onModeChange={setMode}
         modeCounts={modeCounts}
+        modeCountsPartial={modeCountsPartial}
         syncCounts={syncCounts}
         syncFilters={syncFilters}
         onToggleSync={(value) => filters.toggle('sync', value)}
@@ -790,6 +806,10 @@ export function GitOpsTableView({
           </div>
         </div>
 
+        {coverageStatus === 'partial' && (
+          <p role="status" className="px-4 py-2 text-xs text-warning-text border-b border-theme-border">Partial results. Radar couldn't read every namespace for some GitOps resources or sources, so counts are lower bounds.</p>
+        )}
+
         {/* 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
@@ -806,7 +826,7 @@ export function GitOpsTableView({
             <div className="p-4 text-sm text-red-500">Failed to load GitOps applications: {error.message}</div>
           ) : filteredRows.length === 0 ? (
             <div className="flex h-full flex-col items-center justify-center gap-3 text-sm text-theme-text-secondary">
-              <p>{allRows.length === 0 && !hasGlobalNamespaceFilter ? 'No applications found.' : 'No applications match the current filters.'}</p>
+              <p>{noApplicationsMessage(allRows.length > 0, coverageStatus, hasGlobalNamespaceFilter)}</p>
               {hasGlobalNamespaceFilter && globalNamespaces && (
                 <p className="text-xs text-theme-text-tertiary">
                   Viewing {globalNamespaces.length === 1 ? `namespace: ${globalNamespaces[0]}` : `${globalNamespaces.length} namespaces`}
@@ -857,6 +877,7 @@ function GitOpsFilterSidebar({
   mode,
   onModeChange,
   modeCounts,
+  modeCountsPartial,
   syncCounts,
   syncFilters,
   onToggleSync,
@@ -884,6 +905,7 @@ function GitOpsFilterSidebar({
   mode: GitOpsMode
   onModeChange: (mode: GitOpsMode) => void
   modeCounts: Record<GitOpsMode, number>
+  modeCountsPartial: Record<GitOpsMode, boolean>
   syncCounts: Map<string, number>
   syncFilters: Set<string>
   onToggleSync: (value: string) => void
@@ -949,7 +971,7 @@ function GitOpsFilterSidebar({
                 }`}
               >
                 <div className="font-medium">{modeLabel(item)}</div>
-                <div className={mode === item ? 'text-white/70' : 'text-theme-text-tertiary'}>{modeCounts[item]}</div>
+                <div className={mode === item ? 'text-white/70' : 'text-theme-text-tertiary'}>{modeCountsPartial[item] ? '≥' : ''}{modeCounts[item]}</div>
               </button>
             ))}
           </div>
@@ -1882,6 +1904,13 @@ function countMap(values: string[]) {
   return counts
 }
 
+function noApplicationsMessage(hasRows: boolean, coverageStatus: GitOpsTableViewProps['coverageStatus'], namespaceFiltered: boolean): string {
+  if (hasRows) return 'No applications match the current filters.'
+  if (coverageStatus === 'complete') return 'No applications found in the requested scope.'
+  if (coverageStatus === 'partial') return 'No applications found in the namespaces Radar could read.'
+  return namespaceFiltered ? 'No applications match the current filters.' : 'No applications found.'
+}
+
 function countLabels(rows: GitOpsRow[]) {
   const counts = new Map<string, number>()
   for (const row of rows) {

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

@@ -5,6 +5,7 @@ import {
   formatGitOpsSourceUrl,
   getGitOpsResourceStatus,
   getGitOpsTool,
+  gitOpsDetailGroup,
   isDestinationRef,
   parseArgoRollbackID,
 } from './detail-helpers'
@@ -75,26 +76,47 @@ describe('formatGitOpsSourceUrl', () => {
 })
 
 describe('getGitOpsTool', () => {
-  // Group is the canonical discriminator.
-  test('Argo via group', () => {
+  // The API group decides, the same rule as the backend (pkg/gitops ToolFor).
+  test('Argo CD kinds in argoproj.io', () => {
     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 frontend 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', () => {
+  test('Flux groups', () => {
     expect(getGitOpsTool('kustomizations', 'kustomize.toolkit.fluxcd.io')).toBe('flux')
     expect(getGitOpsTool('helmreleases', 'helm.toolkit.fluxcd.io')).toBe('flux')
+    expect(getGitOpsTool('gitrepositories', 'source.toolkit.fluxcd.io')).toBe('flux')
+  })
+  // SIG Apps defines its own Application kind; offering Argo Sync on it
+  // would sync a same-named argoproj.io Application instead.
+  test('an Application outside argoproj.io is not Argo CD', () => {
+    expect(getGitOpsTool('applications', 'app.k8s.io')).toBeNull()
+    expect(getGitOpsTool('applications', 'source.toolkit.fluxcd.io')).toBeNull()
+    expect(getGitOpsTool('kustomizations', 'source.toolkit.fluxcd.io')).toBeNull()
+    expect(getGitOpsTool('helmreleases', 'kustomize.toolkit.fluxcd.io')).toBeNull()
+  })
+  // argoproj.io is shared with Argo Rollouts and Workflows.
+  test('other argoproj.io kinds are not Argo CD', () => {
+    expect(getGitOpsTool('rollouts', 'argoproj.io')).toBeNull()
+    expect(getGitOpsTool('workflows', 'argoproj.io')).toBeNull()
+  })
+  // The kind alone is not identity, and nothing defaults to Flux.
+  test('no group or an unknown group is not GitOps', () => {
+    expect(getGitOpsTool('applications', undefined)).toBeNull()
+    expect(getGitOpsTool('applicationsets', '')).toBeNull()
+    expect(getGitOpsTool('somecustomresource', 'unknown.io')).toBeNull()
+    expect(getGitOpsTool('applications', 'notargoproj.io')).toBeNull()
+    expect(getGitOpsTool('kustomizations', 'fake.kustomize.toolkit.fluxcd.io')).toBeNull()
+  })
+})
+
+describe('gitOpsDetailGroup', () => {
+  test('the loaded object\'s apiVersion wins over the route group', () => {
+    expect(gitOpsDetailGroup('argoproj.io', { apiVersion: 'app.k8s.io/v1beta1' })).toBe('app.k8s.io')
   })
-  // Unknown kinds default to flux (matches the OSS fall-through).
-  test('unknown kind defaults to flux', () => {
-    expect(getGitOpsTool('somecustomresource', 'unknown.io')).toBe('flux')
+  test('the route group stands in until the object loads', () => {
+    expect(gitOpsDetailGroup('app.k8s.io', undefined)).toBe('app.k8s.io')
+    expect(gitOpsDetailGroup('argoproj.io', {})).toBe('argoproj.io')
   })
 })
 
@@ -181,3 +203,26 @@ describe('isDestinationRef', () => {
     expect(isDestinationRef(null, true, { group: 'apps', kind: 'Deployment', namespace: 'prod', name: 'billing' })).toBe(true)
   })
 })
+
+describe('GitOps status identity', () => {
+  test.each([
+    ['applications', 'app.k8s.io/v1beta1'],
+    ['applicationsets', 'vendor.io/v1'],
+    ['kustomizations', 'source.toolkit.fluxcd.io/v1'],
+    ['helmreleases', 'vendor.helm.toolkit.fluxcd.io/v1'],
+  ])('does not interpret foreign %s status from %s', (kind, apiVersion) => {
+    expect(getGitOpsResourceStatus(kind, {
+      apiVersion,
+      status: { sync: { status: 'Synced' }, health: { status: 'Healthy' }, conditions: [{ type: 'Ready', status: 'True' }] },
+    })).toBeNull()
+  })
+
+  test('preserves existing controller-specific status-only callers', () => {
+    expect(getGitOpsResourceStatus('applications', { status: { sync: { status: 'Synced' }, health: { status: 'Healthy' } } })?.sync).toBe('Synced')
+    expect(getGitOpsResourceStatus('kustomizations', { status: { conditions: [{ type: 'Ready', status: 'True' }] } })?.health).toBe('Healthy')
+  })
+
+  test('does not interpret an AppProject as a Flux resource', () => {
+    expect(getGitOpsResourceStatus('appprojects', { apiVersion: 'argoproj.io/v1alpha1', status: { conditions: [{ type: 'Ready', status: 'True' }] } })).toBeNull()
+  })
+})

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

@@ -1,6 +1,7 @@
 import { argoApplicationSetConditionsToGitOpsStatus, argoStatusToGitOpsStatus, fluxConditionsToGitOpsStatus, type FluxCondition, type GitOpsStatus } from '../../types/gitops'
 import type { GitOpsResourceTree } from '../../types/gitops-tree'
 import { formatCompactAge } from '../../utils/format'
+import { apiVersionToGroup } from '../../utils/navigation'
 
 // =============================================================================
 // Shared helpers used by both per-cluster Radar's GitOps detail view (OSS
@@ -92,12 +93,31 @@ export function describeGitOpsTerminating(summary?: {
   }
 }
 
+const FLUX_KIND_GROUPS: Readonly<Record<string, string | undefined>> = {
+  gitrepositories: 'source.toolkit.fluxcd.io',
+  ocirepositories: 'source.toolkit.fluxcd.io',
+  helmrepositories: 'source.toolkit.fluxcd.io',
+  helmcharts: 'source.toolkit.fluxcd.io',
+  buckets: 'source.toolkit.fluxcd.io',
+  kustomizations: 'kustomize.toolkit.fluxcd.io',
+  helmreleases: 'helm.toolkit.fluxcd.io',
+  alerts: 'notification.toolkit.fluxcd.io',
+}
+const ARGO_CD_KINDS = new Set(['applications', 'applicationsets', 'appprojects'])
+
+
 // getGitOpsResourceStatus dispatches sync/health extraction by kind. Argo
 // Applications read from .status (rich operationState + sync state); Argo
 // ApplicationSets read their own generator conditions; Flux kinds read
 // .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 {
+  // Existing callers also pass status-only objects with a controller-specific
+  // kind. A loaded API identity, when present, must agree with that kind.
+  const group = resource?.apiVersion ? apiVersionToGroup(resource.apiVersion)
+    : ARGO_CD_KINDS.has(kind) ? 'argoproj.io' : FLUX_KIND_GROUPS[kind]
+  const tool = getGitOpsTool(kind, group)
+  if (!tool) return null
   if (kind === 'applications') {
     return argoStatusToGitOpsStatus(resource?.status ?? {})
   }
@@ -110,6 +130,7 @@ export function getGitOpsResourceStatus(kind: string, resource: any): GitOpsStat
       (resource?.status?.conditions ?? []) as FluxCondition[]
     )
   }
+  if (tool === 'argo') return null
   const conditions = (resource?.status?.conditions ?? []) as FluxCondition[]
   return fluxConditionsToGitOpsStatus(conditions, resource?.spec?.suspend === true, {
     generation: resource?.metadata?.generation,
@@ -117,12 +138,22 @@ export function getGitOpsResourceStatus(kind: string, resource: any): GitOpsStat
   })
 }
 
-// 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'
+
+// getGitOpsTool decides the controller family from the API group, the same
+// rule the backend applies (pkg/gitops ToolFor). The kind alone is not
+// identity: SIG Apps (app.k8s.io) defines an Application too, and argoproj.io
+// is shared with Argo Rollouts and Workflows. null means the object is not a
+// supported GitOps resource and has no GitOps view or operations.
+export function getGitOpsTool(kind: string, group: string | undefined): 'argo' | 'flux' | null {
+  if (group === 'argoproj.io') return ARGO_CD_KINDS.has(kind) ? 'argo' : null
+  if (group && FLUX_KIND_GROUPS[kind] === group) return 'flux'
+  return null
+}
+
+// gitOpsDetailGroup is the API group a detail page acts on: the fetched
+// object's own apiVersion once it has loaded, the route's group before that.
+export function gitOpsDetailGroup(routeGroup: string, resource: { apiVersion?: string } | null | undefined): string {
+  return resource?.apiVersion ? apiVersionToGroup(resource.apiVersion) : routeGroup
 }
 
 // isDestinationRef reports whether a resource named on a remote GitOps

package/src/components/gitops/index.ts

@@ -41,6 +41,7 @@ export {
   describeGitOpsTerminating,
   getGitOpsResourceStatus,
   getGitOpsTool,
+  gitOpsDetailGroup,
   isDestinationRef,
 } from './detail-helpers'
 export { SyncOptionsDialog } from './SyncOptionsDialog'

package/src/components/issues/IssuesView.tsx

@@ -288,13 +288,16 @@ export function IssueRow({
             onToggle();
           }
         }}
-        className={`group @container/issue flex cursor-pointer items-center gap-3 border-l-[3px] py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent,var(--accent))]/40 ${open ? ISSUE_SEVERITY_HEADER_BAND_CLASS[severity] : ISSUE_SEVERITY_RAIL_CLASS[severity]}`}
+        className={`group @container/issue flex cursor-pointer items-center gap-3 phone:flex-wrap phone:gap-y-2 border-l-[3px] py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent,var(--accent))]/40 ${open ? ISSUE_SEVERITY_HEADER_BAND_CLASS[severity] : ISSUE_SEVERITY_RAIL_CLASS[severity]}`}
       >
         <SeverityIcon className={`h-[18px] w-[18px] shrink-0 ${ISSUE_SEVERITY_TEXT_CLASS[severity]}`} aria-hidden />
 
-        <div className="flex min-w-0 flex-1 flex-col gap-1">
-          <div className="flex min-w-0 items-baseline gap-2">
-            <span className="min-w-0 truncate text-sm font-medium text-theme-text-primary">{issueTitle(issue)}</span>
+        {/* Phones: the title takes its own line with the badge and reason
+            under it, and the severity, actions and chevron get a last line
+            (the right cluster below wraps under the text). */}
+        <div className="flex min-w-0 flex-1 flex-col gap-1 phone:basis-[calc(100%-30px)]">
+          <div className="flex min-w-0 items-baseline gap-2 phone:flex-wrap phone:gap-y-1">
+            <span className="min-w-0 truncate text-sm font-medium text-theme-text-primary phone:basis-full">{issueTitle(issue)}</span>
             <span className={`shrink-0 self-center ${groupBadgeClass(issue.category_group)}`}>{groupLabel(issue.category_group)}</span>
             {renderBadges?.(slotCtx)}
             {/* The detector reason rides the title row while COLLAPSED so the
@@ -351,15 +354,17 @@ export function IssueRow({
           {/* Narrow container: the meta chips drop to their own line here rather
               than stealing width from the title on the row above. Hidden once the
               row is wide enough to hold them inline in the right cluster. */}
-          {metaChips('flex @2xl/issue:hidden')}
+          {metaChips('flex @2xl/issue:hidden phone:hidden')}
         </div>
 
         {/* Right cluster — the always-visible affordances (per-row action +
             chevron) plus, on a wide container, the inline meta chips. */}
-        <div className="flex shrink-0 items-center gap-3">
-          {metaChips('hidden @2xl/issue:flex')}
-          {renderActions?.(slotCtx)}
-          <CollapseChevron open={open} className="h-4 w-4" />
+        <div className="flex shrink-0 items-center gap-3 phone:basis-full phone:pl-[30px]">
+          {metaChips('hidden @2xl/issue:flex phone:flex')}
+          <div className="contents phone:ml-auto phone:flex phone:items-center phone:gap-3">
+            {renderActions?.(slotCtx)}
+            <CollapseChevron open={open} className="h-4 w-4" />
+          </div>
         </div>
       </div>