@skyhook-io/k8s-ui 1.18.1 → 1.19.0

package/src/components/ui/YamlReview.test.tsx

@@ -38,3 +38,55 @@ describe('YamlReview after a failed apply', () => {
     expect(review()).not.toContain('changed after your review')
   })
 })
+
+
+it('retains pause context when the prediction removes the annotation without claiming confirmed resumption', () => {
+  const baselineYaml = 'apiVersion: example.test/v1\nkind: Bucket\nmetadata:\n  name: archive\n  annotations:\n    crossplane.io/paused: "true"\nspec:\n  providerConfigRef:\n    name: default\n'
+  const predictedYaml = baselineYaml.replace('    crossplane.io/paused: "true"', '    crossplane.io/paused: "false"')
+  const result = renderToString(<YamlReview submittedYaml={predictedYaml} documents={[{ index: 0, status: 'accepted', action: 'update', baselineYaml, predictedYaml }]} onBack={() => {}} onApply={() => {}} />)
+  expect(result).toContain('Pause affects reconciliation')
+  expect(result).toContain('requests resumption')
+  expect(result).not.toContain('will resume')
+  expect(result.replaceAll('<!-- -->', '')).toContain('Server preview clears the pause request on Bucket archive')
+})
+
+
+it('shows pause context for an unselected later document because Apply submits the whole batch', () => {
+  const first = 'apiVersion: v1\nkind: ConfigMap\nmetadata:\n  name: ordinary\n'
+  const second = 'apiVersion: example.test/v1\nkind: Bucket\nmetadata:\n  name: later-paused\n  annotations:\n    crossplane.io/paused: "true"\nspec:\n  providerConfigRef:\n    name: default\n'
+  const result = renderToString(<YamlReview submittedYaml={first + '\n---\n' + second} documents={[{ index: 0, status: 'accepted', predictedYaml: first }, { index: 1, status: 'accepted', predictedYaml: second }]} onBack={() => {}} onApply={() => {}} />)
+  expect(result).toContain('Pause affects reconciliation')
+  expect(result).toContain('Bucket later-paused')
+})
+
+
+it('states the actual retained pause in the prediction without inferring who preserved it', () => {
+  const baselineYaml = 'apiVersion: example.test/v1\nkind: Bucket\nmetadata:\n  name: archive\n  annotations:\n    crossplane.io/paused: "true"\nspec:\n  providerConfigRef:\n    name: default\n'
+  const submittedYaml = baselineYaml.replace('    crossplane.io/paused: "true"', '')
+  const result = renderToString(<YamlReview submittedYaml={submittedYaml} documents={[{ index: 0, status: 'accepted', action: 'update', baselineYaml, predictedYaml: baselineYaml }]} onBack={() => {}} onApply={() => {}} />)
+  expect(result.replaceAll('<!-- -->', '')).toContain('Server preview keeps the pause request on Bucket archive')
+  expect(result).not.toContain('another field manager owns')
+  expect(result).not.toContain('Server preview clears')
+})
+
+it.each(['apply', 'create'] as const)('handles a not-previewable Crossplane document in %s mode without pretending submitted YAML is live', mode => {
+  const submittedYaml = 'apiVersion: example.test/v1\nkind: Bucket\nmetadata:\n  name: archive\nspec:\n  providerConfigRef:\n    name: default\n'
+  const result = renderToString(<YamlReview submittedYaml={submittedYaml} mode={mode} documents={[{ index: 0, status: 'unavailable', submittedYaml }]} onBack={() => {}} onApply={() => {}} />)
+  expect(result.includes('Existing pause state is unknown')).toBe(mode === 'apply')
+  expect(result.includes('Omitting the annotation from server-side apply YAML does not guarantee its removal')).toBe(mode === 'apply')
+  expect(result).not.toContain('Server preview clears')
+})
+
+
+it.each(['create', 'unavailable'] as const)('keeps per-document pause evidence paired when the first document has no baseline (%s)', firstState => {
+  const firstYaml = 'apiVersion: example.test/v1\nkind: Bucket\nmetadata:\n  name: fresh\nspec:\n  providerConfigRef:\n    name: default\n'
+  const pausedYaml = firstYaml.replace('name: fresh', 'name: archive\n  annotations:\n    crossplane.io/paused: "true"')
+  const first = firstState === 'create'
+    ? { index: 0, status: 'accepted' as const, action: 'create' as const, name: 'fresh', predictedYaml: firstYaml }
+    : { index: 0, status: 'unavailable' as const, action: 'unknown' as const, name: 'fresh', submittedYaml: firstYaml }
+  const result = renderToString(<YamlReview submittedYaml={firstYaml + '\n---\n' + pausedYaml} documents={[first, { index: 1, status: 'accepted', action: 'update', name: 'archive', baselineYaml: pausedYaml, predictedYaml: pausedYaml }]} onBack={() => {}} onApply={() => {}} />).replaceAll('<!-- -->', '')
+  expect(result).toContain('Server preview keeps the pause request on Bucket archive')
+  expect(result).not.toContain('Server preview clears the pause request')
+  expect(result).not.toContain('Server preview requests a pause on Bucket archive')
+  expect(result.includes('Live pause state is unverified for Bucket fresh')).toBe(firstState === 'unavailable')
+})

package/src/components/ui/YamlReview.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { AlertTriangle, ArrowLeft, Check, Loader2, ShieldAlert, ShieldCheck, X } from 'lucide-react'
 import { normalizeYamlForReview, splitYamlDocuments } from '../../utils/yaml'
+import { CrossplaneYamlApplyNotice } from './CrossplaneOperationNotice'
 import { Badge } from './Badge'
 import { StatusDot } from './status-tone'
 import { YamlDiffEditor } from './YamlEditor'
@@ -25,6 +26,9 @@ export interface YamlPreviewResult {
 
 export interface YamlReviewProps {
   submittedYaml: string
+  mode?: 'apply' | 'create' | 'update'
+  /** Review YAML omits status; raw evidence is bound to one editor target. */
+  resourceData?: unknown
   originalYaml?: string
   documents: YamlPreviewResult[]
   nonAtomic?: boolean
@@ -85,6 +89,8 @@ export function reviewedResourceVersionsForPreview(documents: YamlPreviewResult[
 
 export function YamlReview({
   submittedYaml,
+  mode = 'apply',
+  resourceData,
   originalYaml,
   documents,
   nonAtomic = false,
@@ -363,6 +369,7 @@ export function YamlReview({
       </div>
 
       <div className="shrink-0 border-t border-theme-border bg-theme-elevated/80 px-4 py-3">
+        <CrossplaneYamlApplyNotice yaml={submittedYaml} baselineYaml={originalYaml} previewDocuments={documents} mode={mode} resourceData={resourceData} />
         {changedSinceReview && (
           <AlertBanner
             variant="warning"

package/src/components/ui/drawer-components.test.tsx

@@ -218,6 +218,33 @@ describe('RelatedResourcesSection ownership', () => {
     expect(html).toContain("Its destination isn't this cluster as far as Radar can tell, so its members aren't listed.")
   })
 
+  describe('titles managers the way the chip does', () => {
+    const other = { ...app, name: 'other' }
+    const title = (relationships: Relationships) => {
+      const html = renderToString(<RelatedResourcesSection relationships={relationships} onNavigate={() => {}} />)
+      return html.includes('Listed By') ? 'Listed By' : html.includes('Managed By') ? 'Managed By' : 'none'
+    }
+    const answer = (state: 'listed' | 'shared' | 'disagree' | 'agree', recorders = [app]) => ({ state, direct: { object: rs, recorders } })
+    it.each(['listed', 'shared', 'disagree'] as const)('a %s answer lists its recorders', state => {
+      expect(title({ managers: [app], ownership: { children: { complete: true }, manager: answer(state) } })).toBe('Listed By')
+    })
+    it('an agree answer manages', () => {
+      expect(title({ managers: [app], ownership: { children: { complete: true }, manager: answer('agree') } })).toBe('Managed By')
+    })
+    it('a manager that is not a direct recorder keeps Managed By', () => {
+      expect(title({ managers: [app, other], ownership: { children: { complete: true }, manager: answer('listed') } })).toBe('Managed By')
+    })
+    it('an inherited answer keeps Managed By', () => {
+      expect(title({ managers: [app], ownership: { children: { complete: true }, manager: { ...answer('listed'), via: { object: cm, recorders: [app] } } } })).toBe('Managed By')
+    })
+    it('a note without managers keeps Managed By', () => {
+      expect(title({ ownership: { children: { complete: true }, manager: answer('listed', []), managers: { remote: 1 } } })).toBe('Managed By')
+    })
+    it('an older Radar without an answer keeps Managed By', () => {
+      expect(title({ managers: [app] })).toBe('Managed By')
+    })
+  })
+
   it('says which direction Managed By comes from', () => {
     const html = renderToString(<RelatedResourcesSection relationships={{ managers: [app] }} onNavigate={() => {}} />)
     expect(html).toContain('Argo CD Applications or Flux objects whose status lists this resource, and other controllers that manage it without an owner reference.')

package/src/components/ui/drawer-components.tsx

@@ -1,4 +1,5 @@
-import { dedupeResourceRefs, omitResourceRefs } from '../../utils/resource-refs'
+import { dedupeResourceRefs, omitResourceRefs, resourceRefKey } from '../../utils/resource-refs'
+import { gapReasonText } from '../../utils/read-actions'
 import { customResourceDefinitionRef, getCRDDefinitionsSnapshot, subscribeCRDDefinitions } from '../../utils/navigation'
 import { Disclosure } from './Disclosure'
 import { createContext, useContext, useState, useSyncExternalStore } from 'react'
@@ -295,9 +296,9 @@ function isConditionHealthy(cond: { type?: string; status?: string }): boolean {
   return inverted ? cond.status === 'False' : cond.status === 'True'
 }
 
-export type ConditionTone = 'ok' | 'warning' | 'fail' | 'unknown'
+export type ConditionTone = 'ok' | 'warning' | 'fail' | 'unknown' | 'neutral'
 
-export function defaultConditionTone(cond: { type?: string; status?: string }): ConditionTone {
+export function defaultConditionTone(cond: { type?: string; status?: string }): Exclude<ConditionTone, 'neutral'> {
   if (cond.status !== 'True' && cond.status !== 'False') return 'unknown'
   return isConditionHealthy(cond) ? 'ok' : 'fail'
 }
@@ -342,6 +343,7 @@ export function ConditionsSection({
             const isOk = tone === 'ok'
             const isWarning = tone === 'warning'
             const isFail = tone === 'fail'
+            const isNeutral = tone === 'neutral'
             return (
               <div key={cond.type} className={clsx(
                 'flex items-start py-1.5 pr-1 text-sm relative',
@@ -355,12 +357,14 @@ export function ConditionsSection({
                 {/* Timeline dot */}
                 <span className={clsx(
                   'w-3 h-3 rounded-full flex items-center justify-center shrink-0 mt-1 z-10 ring-2 ring-theme-surface',
-                  isOk ? 'bg-emerald-500/20 text-emerald-500 dark:bg-emerald-500/30'
+                  isNeutral ? 'bg-theme-elevated text-theme-text-tertiary'
+                    : isOk ? 'bg-emerald-500/20 text-emerald-500 dark:bg-emerald-500/30'
                     : tone === 'unknown' ? 'bg-gray-400/20 text-gray-400 dark:bg-gray-400/30'
                     : isWarning ? 'bg-amber-500/25 text-amber-600 dark:text-amber-400 dark:bg-amber-500/35'
                     : 'bg-red-500/25 text-red-500 dark:bg-red-500/35'
                 )}>
-                  {isOk ? <Check className="w-2 h-2" strokeWidth={4} />
+                  {isNeutral ? <Minus className="w-2 h-2" strokeWidth={4} />
+                    : isOk ? <Check className="w-2 h-2" strokeWidth={4} />
                     : tone === 'unknown' ? <Minus className="w-2 h-2" strokeWidth={4} />
                     : isWarning ? <AlertTriangle className="w-2 h-2" strokeWidth={4} />
                     : <X className="w-2 h-2" strokeWidth={4} />}
@@ -369,7 +373,8 @@ export function ConditionsSection({
                 <div className="min-w-0 flex-1 pl-2">
                   <span className={clsx(
                     'font-medium text-[13px]',
-                    isOk ? 'text-theme-text-primary'
+                    isNeutral ? 'text-theme-text-secondary'
+                      : isOk ? 'text-theme-text-primary'
                       : tone === 'unknown' ? 'text-theme-text-secondary'
                         : isWarning ? 'text-amber-600 dark:text-amber-400'
                           : 'text-red-600 dark:text-red-400'
@@ -415,7 +420,7 @@ interface AlertBannerProps {
   icon?: React.ComponentType<{ className?: string }>
   title: string
   message?: React.ReactNode
-  items?: string[]
+  items?: React.ReactNode[]
   children?: React.ReactNode
   /** A control at the end of the title line, e.g. a link to where the problem is handled. */
   action?: React.ReactNode
@@ -815,7 +820,7 @@ export type CopyHandler = (text: string, key: string) => void
 // RELATED RESOURCES SECTION
 // ============================================================================
 
-import type { TimelineEvent, Relationships, ResourceRef, OwnershipCoverage } from '../../types'
+import type { TimelineEvent, Relationships, ResourceRef, OwnershipCoverage, ManagerAnswer } from '../../types'
 import { isChangeEvent, isK8sEvent } from '../../types'
 import { Info, Link } from 'lucide-react'
 import { formatRelativeAgeTime } from '../../utils/format'
@@ -910,7 +915,7 @@ export function RelatedResourcesSection({ relationships, onNavigate, kind, track
           />
         )}
         {(managers.length > 0 || managedByNote.text) && (
-          <RelationshipGroup label="Managed By" refs={managers} onNavigate={onNavigate} note={managedByNote} />
+          <RelationshipGroup label={managersListOnly(relationships.ownership?.manager, managers) ? 'Listed By' : 'Managed By'} refs={managers} onNavigate={onNavigate} note={managedByNote} />
         )}
         {relationships.deployment && (
           <RelationshipGroup label="Deployment" refs={[relationships.deployment]} onNavigate={onNavigate} />
@@ -1073,39 +1078,6 @@ function joinOr(items: string[]): string {
   return items.length < 2 ? items.join('') : `${items.slice(0, -1).join(', ')} or ${items[items.length - 1]}`
 }
 
-function gapReasonText(reason: string): string {
-  switch (reason) {
-    case 'radar_kind_not_collected':
-    case 'radar_namespace_not_collected':
-      return "Radar doesn't collect it"
-    case 'kind_sync_pending':
-      return 'still loading'
-    case 'kind_sync_timed_out':
-      return 'loading is overdue'
-    case 'radar_forbidden':
-    case 'radar_credentials_rejected':
-      return 'Radar may not list it'
-    case 'kind_not_watchable':
-      return "its API can't be watched"
-    case 'user_permission_check_failed':
-      return "your access couldn't be checked"
-    case 'user_forbidden':
-      return 'you may not list it'
-    case 'kind_unknown':
-      return "Radar's API discovery doesn't list its kind or version"
-    case 'object_not_found':
-      return "Radar doesn't have it yet"
-    case 'cluster_connecting':
-      return 'Radar is still connecting'
-    case 'cluster_disconnected':
-      return 'Radar lost its connection'
-    case 'connection_changed':
-      return "Radar's connection changed meanwhile"
-    default:
-      return 'the read failed'
-  }
-}
-
 // membersNote says what a GitOps manager's status records beyond the members
 // Manages lists; listed says whether it lists any.
 function membersNote(manages: OwnershipCoverage['manages'] | undefined, listed: boolean): RelationshipNote | undefined {
@@ -1180,6 +1152,14 @@ const MANAGED_BY_HINT = [
   "Kubernetes' garbage collector follows owner references, not these links.",
 ]
 
+// managersListOnly: every manager shown is one whose list names the resource
+// while its metadata doesn't confirm it, which the chip calls Listed by.
+function managersListOnly(answer: ManagerAnswer | undefined, managers: ResourceRef[]): boolean {
+  if (!answer || answer.via || !['listed', 'shared', 'disagree'].includes(answer.state) || !managers.length) return false
+  const recorders = new Set((answer.direct.recorders ?? []).map(resourceRefKey))
+  return managers.every(m => recorders.has(resourceRefKey(m)))
+}
+
 // managersNote explains Managed By: where it comes from, more than one
 // manager, and the managers the search couldn't settle. With none listed, a
 // remote list naming the resource or a manager kind Radar couldn't search is

package/src/components/workload/WorkloadView.relationships.test.tsx

@@ -68,3 +68,43 @@ describe('workload GitOps manager', () => {
     expect(html).toContain("Its tracking label names Application shop, whose status doesn't list it.")
   })
 })
+
+describe('manager answer group projection', () => {
+  const app = { kind: 'Application', group: 'argoproj.io', namespace: 'argocd', name: 'shop' }
+  const object = { kind: 'Deployment', group: 'apps', namespace: 'demo', name: 'web' }
+  const answer: import('../../types/core').ManagerAnswer = { state: 'listed', lead: app, direct: { object, recorders: [app] } }
+  const render = (manager: typeof answer, extra: Partial<import('../../types/core').Relationships> = {}) =>
+    renderToStaticMarkup(<WorkloadView kind="deployments" namespace="demo" name="web" onBack={() => {}} resource={workload} expanded={false}
+      relationships={{ managers: [app], ownership: { children: { complete: true }, manager }, ...extra }} />)
+  // The group is titled the way the chip words the answer.
+  const group = (html: string) => html.includes('Listed By') ? 'Listed By' : html.includes('Managed By') ? 'Managed By' : null
+
+  it.each(['agree', 'listed'] as const)('hides only the exact single %s recorder', state => {
+    const html = render({ ...answer, state })
+    expect(html).toContain(state === 'agree' ? 'Managed by' : 'Listed by')
+    expect(group(html)).toBeNull()
+  })
+  it.each(['claimed', 'unknown', 'none'] as const)('keeps Managed By for %s', state => {
+    expect(group(render({ ...answer, state }))).toBe('Managed By')
+  })
+  it.each(['disagree', 'shared'] as const)('keeps the group for %s, titled Listed By', state => {
+    expect(group(render({ ...answer, state }))).toBe('Listed By')
+  })
+  it('keeps Managed By with via', () => {
+    expect(render({ ...answer, via: { object, recorders: [app] } })).toContain('Managed By')
+  })
+  it('keeps extra non-recorded managers', () => {
+    expect(render(answer, { managers: [app, { kind: 'Certificate', group: 'cert-manager.io', namespace: 'demo', name: 'tls' }] })).toContain('Managed By')
+  })
+  it('keeps a different single manager', () => {
+    expect(render(answer, { managers: [{ ...app, name: 'other' }] })).toContain('Managed By')
+  })
+  it('keeps the coverage note', () => {
+    expect(group(render(answer, { ownership: { children: { complete: true }, manager: answer, managers: { unreadable: 1 } } }))).toBe('Listed By')
+  })
+  it('uses native Helm’s existing chip', () => {
+    const helm = { kind: 'HelmRelease', group: '', namespace: 'demo', name: 'chart' }
+    const html = render({ state: 'claimed', lead: helm, direct: { object, claims: [{ manager: helm, source: 'helm-release', check: 'not-recording' }] } })
+    expect(html).toContain('Managed by Helm')
+  })
+})

package/src/components/workload/WorkloadView.tsx

@@ -43,7 +43,7 @@ import type { NavigateToResource } from '../../utils/navigation'
 import { refToSelectedResource, pluralToKind, knownKindForPluralWithGroup, kindToPlural, kindToPluralWithGroup, apiVersionToGroup } from '../../utils/navigation'
 import { neighborhoodFor, seedNodeIds, topologyNodeResourceKind } from '../../utils/topology-neighborhood'
 import { TopologyGraph } from '../topology/TopologyGraph'
-import { gitOpsOwnerFromRelationships, managerListing, type GitOpsOwnerRef } from '../../utils/gitops-owner'
+import { gitOpsOwnerFromRelationships, managerChipCoversGroup, managerChipPresentation, managerListing, type GitOpsOwnerRef } from '../../utils/gitops-owner'
 import { gitOpsRouteForResource } from '../../utils/gitops-route'
 import { buildResourceHierarchy, getAllEventsFromHierarchy, isProblematicEvent, type ResourceLane } from '../../utils/resource-hierarchy'
 import { TimelineSwimlanes, type TimeWindow } from '../timeline/TimelineSwimlanes'
@@ -62,6 +62,8 @@ import { AlertBanner, getKindColorOutline, displayKindName, OperationalIssuesSho
 import { Badge, type BadgeSeverity } from '../ui/Badge'
 import { Tooltip } from '../ui/Tooltip'
 import { midTruncate } from '../../utils/format'
+import { isManagedResource, isComposite, getCrossplanePauseState } from '../resources/resource-utils-crossplane'
+import { CrossplanePauseChip } from '../resources/renderers/CrossplanePauseContext'
 import { hpaStateLabel } from '../resources/resource-utils-hpa'
 import {
   cronToHuman,
@@ -540,7 +542,7 @@ export function WorkloadView({
   gitOpsOwnerPending = false,
   gitOpsOwnerSource,
   gitOpsOwnerStatus,
-  helmOwner,
+  helmOwner: resolvedHelmOwner,
   helmOwnerSource,
   onOpenHelmRelease,
   onNavigateGitOpsPath,
@@ -725,7 +727,12 @@ export function WorkloadView({
   // Metadata
   const metadata = useMemo(() => extractMetadata(kind, resource), [kind, resource])
   const relationshipGitOpsOwner = useMemo(() => gitOpsOwnerFromRelationships(relationships), [relationships])
-  const gitopsOwner = resolvedGitOpsOwner ?? relationshipGitOpsOwner
+  const manager = relationships?.ownership?.manager
+  const gitopsOwner = manager ? relationshipGitOpsOwner : resolvedGitOpsOwner ?? relationshipGitOpsOwner
+  const helmOwner = manager
+    ? manager.lead?.kind === 'HelmRelease' && !manager.lead.group ? { namespace: manager.lead.namespace, name: manager.lead.name } : null
+    : resolvedHelmOwner
+  const showGitOpsChip = manager ? !helmOwner && Boolean(managerChipPresentation(manager)) : Boolean(gitopsOwner)
   const listing = useMemo(
     () => managerListing(gitopsOwner, relationships?.managers, gitOpsOwnerVerified, !relationships?.ownership?.managers),
     [gitopsOwner, relationships?.managers, relationships?.ownership?.managers, gitOpsOwnerVerified],
@@ -733,11 +740,11 @@ export function WorkloadView({
   // When the chip's manager is the only one whose status lists the resource,
   // the chip says it all: Related Resources would repeat it.
   const rendererRelationships = useMemo(
-    () => (relationships && listing?.state === 'confirmed' ? { ...relationships, managers: undefined } : relationships),
-    [relationships, listing],
+    () => (relationships && (manager ? managerChipCoversGroup(relationships) : listing?.state === 'confirmed') ? { ...relationships, managers: undefined } : relationships),
+    [relationships, manager, listing],
   )
   // When they disagree, Related Resources says which manager the label names.
-  const trackedBy = listing?.state === 'conflict' && gitopsOwner ? `${gitOpsOwnerKindLabel(gitopsOwner)} ${gitopsOwner.namespace ? `${gitopsOwner.namespace}/` : ''}${gitopsOwner.name}` : undefined
+  const trackedBy = !manager && listing?.state === 'conflict' && gitopsOwner ? `${gitOpsOwnerKindLabel(gitopsOwner)} ${gitopsOwner.namespace ? `${gitopsOwner.namespace}/` : ''}${gitopsOwner.name}` : undefined
   // When the resource itself is a portal GitOps CR (Application, Kustomization,
   // HelmRelease, etc.), surface a link to its dedicated GitOps detail page —
   // the drawer's renderer is thorough but the tab has the tree + insights +
@@ -835,6 +842,7 @@ export function WorkloadView({
     ? getWorkloadDisplayStatus(resource, apiKind, workloadPods)
     : null
   const rolloutActivity = rolloutDisplay?.activity ?? null
+  const crossplaneResource = isManagedResource(resource) || isComposite(resource) || getCrossplanePauseState(resource) === 'acknowledged'
   // A 404 with a cached copy: the object was deleted while this view was
   // open. Everything below that copy describes the past.
   const resourceGone = Boolean(resource) && isFetchError(resourceError) && resourceError.status === 404
@@ -922,7 +930,7 @@ export function WorkloadView({
       icon: <Activity className="w-4 h-4" />,
       badge: resourceEvents.length > 0 ? <span className="ml-1 badge-sm bg-theme-elevated">{resourceEvents.length}</span> : undefined,
     },
-    { id: 'logs', label: 'Logs', icon: <Terminal className="w-4 h-4" />, hidden: !logsTabVisible },
+    { id: 'logs', label: 'Logs', icon: <Terminal className="w-4 h-4" />, hidden: !logsTabVisible, phoneCompactHeader: true },
     { id: 'metrics', label: 'Metrics', icon: <BarChart3 className="w-4 h-4" />, hidden: !metricsTabVisible },
     {
       id: 'reachability',
@@ -975,6 +983,7 @@ export function WorkloadView({
                   {status.text}
                 </span>
               )}
+              {!resourceGone && crossplaneResource && <CrossplanePauseChip state={getCrossplanePauseState(resource)} />}
             </div>
             <div className="flex shrink-0 flex-nowrap items-center justify-end gap-1.5">
               {diagnoseAction}
@@ -1035,10 +1044,10 @@ export function WorkloadView({
               </Tooltip>
             </div>
             <p className="text-sm text-theme-text-tertiary">{namespace}</p>
-            {(gitopsOwner || helmOwner || (gitOpsResourcePath && onNavigateGitOpsPath) || onOpenLiveTraffic) && (
+            {(showGitOpsChip || helmOwner || (gitOpsResourcePath && onNavigateGitOpsPath) || onOpenLiveTraffic) && (
               <div className="mt-1 flex flex-wrap items-center gap-1.5">
-                {gitopsOwner && <ManagedByChip owner={gitopsOwner} status={gitOpsOwnerStatus} verified={gitOpsOwnerVerified} pending={gitOpsOwnerPending} source={gitOpsOwnerSource} listing={listing} onOpen={onOpenGitOpsResource} />}
-                {helmOwner && <HelmManagedByChip owner={helmOwner} source={helmOwnerSource} onOpen={onOpenHelmRelease} />}
+                {showGitOpsChip && <ManagedByChip manager={manager} owner={gitopsOwner} status={gitOpsOwnerStatus} verified={gitOpsOwnerVerified} pending={gitOpsOwnerPending} source={gitOpsOwnerSource} listing={listing} onOpen={onOpenGitOpsResource} />}
+                {helmOwner && <HelmManagedByChip manager={manager} owner={helmOwner} source={helmOwnerSource} onOpen={onOpenHelmRelease} />}
                 {gitOpsResourcePath && onNavigateGitOpsPath && (
                   <OpenInGitOpsChip onClick={() => onNavigateGitOpsPath(gitOpsResourcePath)} />
                 )}
@@ -1155,10 +1164,35 @@ export function WorkloadView({
   }
 
   // ── Expanded (full) mode ─────────────────────────────────────────────────
+    const nameAndCopy = (
+      <>
+        <h1 className="text-lg font-semibold text-theme-text-primary truncate">{name}</h1>
+        <Tooltip content="Copy name" delay={150}>
+          <button
+            onClick={() => copyToClipboard(name, 'name')}
+            className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded shrink-0"
+            aria-label="Copy name"
+          >
+            {copied === 'name' ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
+          </button>
+        </Tooltip>
+      </>
+    )
   return (
     <OperationalIssuesShownContext.Provider value={!!hasOperationalIssues || !!operationalIssuesPending}>
     <DetailShell
       breadcrumb={breadcrumb}
+      compactIdentity={
+        // The namespace stays: Restart and the other actions sit right below.
+        <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
+          {titlePrefix}
+          <div className="flex min-w-0 max-w-full items-center gap-2">{nameAndCopy}</div>
+          {namespace && namespace !== '_' && (
+            <span className="whitespace-nowrap text-sm text-theme-text-secondary">Namespace: <span className="text-theme-text-primary">{namespace}</span></span>
+          )}
+          {namespace && namespace !== '_' && namespaceNote}
+        </div>
+      }
       wrapHeader={inlineBadges}
       subheader={resourceGone ? undefined : subheader}
       nav={
@@ -1175,20 +1209,6 @@ export function WorkloadView({
         )
       }
       identity={(() => {
-        const nameAndCopy = (
-          <>
-            <h1 className="text-lg font-semibold text-theme-text-primary truncate">{name}</h1>
-            <Tooltip content="Copy name" delay={150}>
-              <button
-                onClick={() => copyToClipboard(name, 'name')}
-                className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded shrink-0"
-                aria-label="Copy name"
-              >
-                {copied === 'name' ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
-              </button>
-            </Tooltip>
-          </>
-        )
         const kindAndStatus = (
           <>
             {!hideKindBadge && (
@@ -1201,6 +1221,7 @@ export function WorkloadView({
                 {status.text}
               </span>
             )}
+            {!resourceGone && crossplaneResource && <CrossplanePauseChip state={getCrossplanePauseState(resource)} />}
             {!resourceGone && statusNote}
           </>
         )
@@ -1222,11 +1243,11 @@ export function WorkloadView({
               </span>
             </Tooltip>
           ),
-          gitopsOwner && (
-            <ManagedByChip key="gitops" owner={gitopsOwner} status={gitOpsOwnerStatus} verified={gitOpsOwnerVerified} pending={gitOpsOwnerPending} source={gitOpsOwnerSource} listing={listing} onOpen={onOpenGitOpsResource} variant="block" />
+          showGitOpsChip && (
+            <ManagedByChip key="gitops" manager={manager} owner={gitopsOwner} status={gitOpsOwnerStatus} verified={gitOpsOwnerVerified} pending={gitOpsOwnerPending} source={gitOpsOwnerSource} listing={listing} onOpen={onOpenGitOpsResource} variant="block" />
           ),
           helmOwner && (
-            <HelmManagedByChip key="helm" owner={helmOwner} source={helmOwnerSource} onOpen={onOpenHelmRelease} variant="block" />
+            <HelmManagedByChip key="helm" manager={manager} owner={helmOwner} source={helmOwnerSource} onOpen={onOpenHelmRelease} variant="block" />
           ),
           gitOpsResourcePath && onNavigateGitOpsPath && (
             <OpenInGitOpsChip key="open-gitops" onClick={() => onNavigateGitOpsPath(gitOpsResourcePath)} />
@@ -1447,10 +1468,12 @@ export function WorkloadView({
           </div>
         )}
         {effectiveTab === 'yaml' && (
-          <div className="flex h-full min-h-0">
+          // Phones put the objects in a scrolling row above the YAML, which
+          // gets the full width.
+          <div className="flex h-full min-h-0 phone:flex-col">
             {renderRelatedYaml && yamlObjects.length > 1 && (
-              <div className="flex w-56 shrink-0 flex-col gap-0.5 overflow-y-auto border-r border-theme-border bg-theme-base px-2 py-2">
-                <div className="px-1.5 pb-1 pt-0.5 text-[10px] font-medium uppercase tracking-wide text-theme-text-tertiary">Objects</div>
+              <div className="flex w-56 shrink-0 flex-col gap-0.5 overflow-y-auto border-r border-theme-border bg-theme-base px-2 py-2 phone:w-full phone:flex-row phone:gap-1 phone:overflow-x-auto phone:overflow-y-hidden phone:border-b phone:border-r-0">
+                <div className="px-1.5 pb-1 pt-0.5 text-[10px] font-medium uppercase tracking-wide text-theme-text-tertiary phone:hidden">Objects</div>
                 {yamlObjects.map((o) => {
                   const active = o.primary ? yamlObjectId === null : yamlObjectId === o.id
                   return (
@@ -1459,7 +1482,7 @@ export function WorkloadView({
                       type="button"
                       onClick={() => setYamlObjectId(o.primary ? null : o.id)}
                       className={clsx(
-                        'flex w-full flex-col rounded-md px-1.5 py-1.5 text-left transition-colors',
+                        'flex w-full flex-col rounded-md px-1.5 py-1.5 text-left transition-colors phone:w-auto phone:max-w-[11rem] phone:shrink-0',
                         active ? 'selection selection-ring' : 'hover:bg-theme-hover',
                       )}
                     >
@@ -2300,7 +2323,7 @@ function WorkloadOverviewTab({
 
           <div className="grid items-start gap-4 xl:grid-cols-[minmax(0,1fr)_360px] 2xl:grid-cols-[minmax(0,1fr)_400px]">
             <div className="space-y-4">
-              <div className="grid items-start gap-4 2xl:grid-cols-[minmax(0,1fr)_minmax(320px,420px)]">
+              <div className="grid items-start gap-4 phone:grid-cols-[minmax(0,1fr)] 2xl:grid-cols-[minmax(0,1fr)_minmax(320px,420px)]">
                 <div className="space-y-4">
                   {showServingPath && (
                     <ServingConfigurationCard
@@ -2393,7 +2416,7 @@ function WorkloadOverviewTab({
         <div className="grid items-start gap-4 xl:grid-cols-[minmax(0,1fr)_360px] 2xl:grid-cols-[minmax(0,1fr)_400px]">
           <div className="space-y-4">
             <CurrentStateCard resource={resource} apiKind={apiKind} readiness={readiness} />
-            <div className="grid items-start gap-4 2xl:grid-cols-2">
+            <div className="grid items-start gap-4 phone:grid-cols-[minmax(0,1fr)] 2xl:grid-cols-2">
               {overviewShape === 'cronjob' ? (
                 <CronJobRunsCard
                   resource={resource}
@@ -2433,7 +2456,7 @@ function WorkloadOverviewTab({
               />
             ) : null}
             {extraContent && (
-              <div className="grid items-start gap-4 2xl:grid-cols-2">
+              <div className="grid items-start gap-4 phone:grid-cols-[minmax(0,1fr)] 2xl:grid-cols-2">
                 {extraContent}
               </div>
             )}

package/src/hooks/useKeepInViewport.mounted.test.tsx

@@ -0,0 +1,72 @@
+// @vitest-environment jsdom
+//
+// The hook must leave a caller's own width constraints alone unless the menu
+// can't fit, and put them back exactly once it fits again.
+import { act, useRef } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, expect, it } from 'vitest'
+import { useKeepInViewport } from './useKeepInViewport'
+
+let root: Root | undefined
+let host: HTMLDivElement | undefined
+afterEach(() => {
+  act(() => root?.unmount())
+  host?.remove()
+})
+
+function Menu({ tick }: { tick: number }) {
+  const ref = useRef<HTMLDivElement>(null)
+  useKeepInViewport(ref, true)
+  return <div ref={ref} data-tick={tick} style={{ minWidth: 240 }} />
+}
+
+function setMenuWidth(el: HTMLElement, width: number) {
+  Object.defineProperty(el, 'offsetWidth', { configurable: true, value: width })
+  el.getBoundingClientRect = () => ({ left: 0, right: width, top: 0, bottom: 0, width, height: 0, x: 0, y: 0, toJSON: () => ({}) })
+}
+
+function render(tick: number) {
+  act(() => root!.render(<Menu tick={tick} />))
+  return host!.querySelector('div')!
+}
+
+it('keeps the caller min-width when the menu fits, and restores it after a squeeze', () => {
+  Object.defineProperty(document.documentElement, 'clientWidth', { configurable: true, value: 1024 })
+  host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+  let el = render(1)
+  setMenuWidth(el, 260)
+  el = render(2)
+  expect(el.style.minWidth).toBe('240px')
+  expect(el.style.maxWidth).toBe('')
+
+  Object.defineProperty(document.documentElement, 'clientWidth', { configurable: true, value: 200 })
+  el = render(3)
+  expect(el.style.minWidth).toBe('0px')
+  expect(el.style.maxWidth).toBe('184px')
+
+  Object.defineProperty(document.documentElement, 'clientWidth', { configurable: true, value: 1024 })
+  el = render(4)
+  expect(el.style.minWidth).toBe('240px')
+  expect(el.style.maxWidth).toBe('')
+})
+
+it('measures with transitions off and restores the caller transition', () => {
+  Object.defineProperty(document.documentElement, 'clientWidth', { configurable: true, value: 1024 })
+  host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+  let el = render(1)
+  el.style.transition = 'opacity 100ms'
+  const seen: string[] = []
+  el.getBoundingClientRect = () => {
+    seen.push(el.style.transition)
+    return { left: 410, right: 650, top: 0, bottom: 0, width: 240, height: 0, x: 410, y: 0, toJSON: () => ({}) }
+  }
+  el = render(2)
+  expect(seen.length).toBeGreaterThan(0)
+  expect(seen.every((t) => t === 'none')).toBe(true)
+  expect(el.style.transition).toBe('opacity 100ms')
+  expect(el.style.translate).toBe('')
+})

package/src/hooks/useKeepInViewport.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+import { keepInViewportShift } from './useKeepInViewport'
+
+describe('keepInViewportShift', () => {
+  it('leaves a menu that fits alone', () => {
+    expect(keepInViewportShift(56, 336, 8, 1272)).toBe(0)
+  })
+
+  it('pulls a menu past the right edge back inside', () => {
+    // A 280px menu opened at x=56 on a 320px phone.
+    expect(keepInViewportShift(56, 336, 8, 312)).toBe(-24)
+  })
+
+  it('stops at a clipping ancestor, not the viewport edge', () => {
+    // Content column starts after a 56px rail: the left bound is 64, not 8,
+    // so a menu sitting under the rail moves out from behind it.
+    expect(keepInViewportShift(40, 240, 64, 312)).toBe(24)
+  })
+
+  it('keeps the left edge when the menu is wider than the bounds', () => {
+    expect(keepInViewportShift(20, 420, 8, 312)).toBe(-12)
+  })
+
+  it('pushes a menu past the left edge back in', () => {
+    expect(keepInViewportShift(-30, 200, 8, 382)).toBe(38)
+  })
+})