@skyhook-io/k8s-ui 1.18.0 → 1.18.2

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

@@ -1,3 +1,5 @@
+import { getOpenTelemetryColumnValue } from './resource-utils-opentelemetry'
+import { getFlaggerColumnValue } from './resource-utils-flagger'
 // Utility functions for resource display in tables
 
 import { getNodeLifecycle } from '../../utils/node-lifecycle'
@@ -33,6 +35,7 @@ import { getExternalSecretStatus as _getExternalSecretStatus, getClusterExternal
 import { getHPATableState, hpaStatusFromState } from './resource-utils-hpa'
 import { getCNPGClusterStatus as _getCNPGClusterStatus, getCNPGBackupStatus as _getCNPGBackupStatus, getCNPGScheduledBackupStatus as _getCNPGScheduledBackupStatus, getCNPGPoolerStatus as _getCNPGPoolerStatus, isApiGroup as _isApiGroup, CNPG_GROUP as _CNPG_GROUP } from './resource-utils-cnpg'
 import { getGenericResourceStatus } from './generic-status'
+import { getCrossplaneStatus, getProviderStatus, getProviderConfigStatus, isManagedResource, isComposite } from './resource-utils-crossplane'
 import { getIstioGatewayStatus as _getIstioGatewayStatus, getIstioGatewayServerCount as _getIstioGatewayServerCount, getIstioGatewaySelectorString as _getIstioGatewaySelectorString, getAuthorizationPolicySelectorString as _getAuthorizationPolicySelectorString, getDestinationRuleTlsMode as _getDestinationRuleTlsMode } from './resource-utils-istio'
 import { formatKubernetesLabelSelector, getCalicoIPPoolAllowedUses, getCalicoIPPoolBlockSize, getCalicoIPPoolEncapsulation, getCalicoPolicyNamespaceSelector, getCalicoPolicyServiceAccountSelector, getCalicoPolicyTypes, isCalicoApiVersion, isCalicoPolicyResource } from './resource-utils-calico'
 
@@ -159,7 +162,7 @@ export function podMatchesProblemCategory(problems: PodProblem[], restarts: numb
     case 'Unschedulable':
       return msgs.includes('Unschedulable')
     case 'Not Ready':
-      return msgs.includes('Not Ready') || msgs.some(m => m.includes('Probe'))
+      return msgs.includes('Not Ready') || msgs.some(m => m.includes('Probe') || m.includes('Readiness Gate'))
     case 'High Restarts':
       return restarts > 5
     case 'Init Failed':
@@ -169,7 +172,7 @@ export function podMatchesProblemCategory(problems: PodProblem[], restarts: numb
     case 'Failed':
       return msgs.includes('Failed') || msgs.includes('Unknown')
     case 'Other': {
-      const knownPatterns = ['CrashLoopBackOff', 'ImagePull', 'ErrImagePull', 'OOMKilled', 'Unschedulable', 'Not Ready', 'Probe', 'Init:', 'Exit Code', 'Failed', 'Unknown']
+      const knownPatterns = ['CrashLoopBackOff', 'ImagePull', 'ErrImagePull', 'OOMKilled', 'Unschedulable', 'Not Ready', 'Probe', 'Readiness Gate', 'Init:', 'Exit Code', 'Failed', 'Unknown']
       return problems.some(p => !knownPatterns.some(pat => p.message.includes(pat)) && p.message !== `${restarts} restarts`)
     }
     default:
@@ -293,6 +296,52 @@ function podCrashRestartTotal(pod: any): number {
     .reduce((sum, cs) => sum + (cs?.restartCount || 0), 0)
 }
 
+function podReadinessGateBlocked(pod: any): boolean {
+  const gates: { conditionType: string }[] = pod.spec?.readinessGates || []
+  if (pod.metadata?.deletionTimestamp || pod.status?.phase !== 'Running' || gates.length === 0) return false
+  const conditions: any[] = pod.status?.conditions || []
+  const ready = conditions.find(c => c.type === 'Ready')
+  const containersReady = conditions.find(c => c.type === 'ContainersReady')
+  if (ready?.status !== 'False' || ready.reason !== 'ReadinessGatesNotReady' || containersReady?.status !== 'True') return false
+  const now = Date.now()
+  let recent = false
+  for (const c of [ready, containersReady]) {
+    const since = Date.parse(c.lastTransitionTime || pod.metadata?.creationTimestamp)
+    if (!Number.isFinite(since)) continue
+    recent ||= since <= now + PENDING_STUCK_MINUTES * 60000 && now - since < PENDING_STUCK_MINUTES * 60000
+  }
+  if (recent) return false
+  return gates.some(g => {
+    const condition = conditions.find(c => c.type === g.conditionType)
+    return !condition || condition.status !== 'True'
+  })
+}
+
+// Match the health classifier's OOM recovery precedence before showing a gate failure.
+function readinessGateOOMRecovery(pod: any): string | null {
+  const now = Date.now()
+  for (const cs of pod.status?.containerStatuses || []) {
+    if (cs.lastState?.terminated?.reason !== 'OOMKilled') continue
+    const probe = pod.spec?.containers?.find((c: any) => c.name === cs.name)?.readinessProbe
+    if (cs.ready && probe) continue
+    const startedAt = Date.parse(cs.state?.running?.startedAt)
+    if (Number.isFinite(startedAt)) {
+      if (now - startedAt <= CRASH_SETTLE_MS) return cs.name
+      continue
+    }
+    const finishedAt = Date.parse(cs.lastState.terminated.finishedAt)
+    if (cs.state?.waiting || (Number.isFinite(finishedAt) && now - finishedAt <= CRASH_SETTLE_MS)) return cs.name
+  }
+  for (const cs of pod.status?.initContainerStatuses || []) {
+    if (cs.lastState?.terminated?.reason !== 'OOMKilled') continue
+    if (cs.state?.terminated?.exitCode === 0) continue
+    const startedAt = Date.parse(cs.state?.running?.startedAt)
+    if (Number.isFinite(startedAt) && now - startedAt > CRASH_SETTLE_MS) continue
+    return cs.name
+  }
+  return null
+}
+
 export function getPodStatus(pod: any): StatusBadge {
   const phase = pod.status?.phase || 'Unknown'
   const containerStatuses = pod.status?.containerStatuses || []
@@ -316,6 +365,12 @@ export function getPodStatus(pod: any): StatusBadge {
     return { text: 'Failed', color: healthColors.unhealthy, level: 'unhealthy' }
   }
 
+  const gateBlocked = podReadinessGateBlocked(pod)
+  const gateOOM = gateBlocked ? readinessGateOOMRecovery(pod) : null
+  if (gateOOM) {
+    return { text: 'OOMKilled', color: healthColors.unhealthy, level: 'unhealthy' }
+  }
+
   const crashHistoryLevel = phase !== 'Succeeded' && phase !== 'Unknown'
     ? podCrashHistoryLevel(pod)
     : null
@@ -348,6 +403,9 @@ export function getPodStatus(pod: any): StatusBadge {
 
   switch (phase) {
     case 'Running': {
+      if (gateBlocked) {
+        return { text: 'Readiness gate blocked', color: healthColors.degraded, level: 'degraded' }
+      }
       // Degrade only on containers that are neither ready nor successfully done —
       // a completed container (exit 0) on a Running pod is finishing, not a fault.
       const ready = containerStatuses.filter((c: any) => c.ready).length
@@ -439,6 +497,12 @@ export function getPodPhaseDisplay(pod: any): PodPhaseDisplay {
     return { phase, text: 'Failed', level: 'unhealthy' }
   }
 
+  const gateBlocked = podReadinessGateBlocked(pod)
+  const gateOOM = gateBlocked ? readinessGateOOMRecovery(pod) : null
+  if (gateOOM) {
+    return { phase, text: `${phase} — OOMKilled`, level: 'unhealthy', hint: `Container "${gateOOM}" is recovering from an OOM kill.` }
+  }
+
   const crashHistoryLevel = phase !== 'Succeeded' && phase !== 'Unknown'
     ? podCrashHistoryLevel(pod)
     : null
@@ -477,6 +541,9 @@ export function getPodPhaseDisplay(pod: any): PodPhaseDisplay {
 
   switch (phase) {
     case 'Running': {
+      if (gateBlocked) {
+        return { phase, text: 'Running — Readiness gate blocked', level: 'degraded', hint: pod.status?.conditions?.find((c: any) => c.type === 'Ready')?.message }
+      }
       // A successfully-completed container (exit 0) is settled, not "not ready" —
       // don't degrade a completing pod over it (matches getPodStatus / timeline).
       const unsettled = containerStatuses.filter((c) => !containerSettledOk(c)).length
@@ -613,6 +680,10 @@ export function getPodProblems(pod: any): PodProblem[] {
     }
   }
 
+  if (podReadinessGateBlocked(pod)) {
+    problems.push({ severity: 'medium', message: 'Readiness Gate Blocked', detail: conditions.find((c: any) => c.type === 'Ready')?.message })
+  }
+
   // Check conditions
   for (const cond of conditions) {
     if (cond.type === 'PodScheduled' && cond.status === 'False') {
@@ -2393,6 +2464,10 @@ function parseColumnFilterPair(
 
 export function getCellFilterValue(resource: any, column: string, kind: string): string {
   try {
+  const otelValue = getOpenTelemetryColumnValue(resource, column)
+  if (otelValue !== undefined) return otelValue
+  const flaggerValue = getFlaggerColumnValue(resource, column)
+  if (flaggerValue !== undefined) return flaggerValue
   const kindLower = kind.toLowerCase()
 
   switch (column) {
@@ -2530,6 +2605,9 @@ export function getCellFilterValue(resource: any, column: string, kind: string):
       if (kindLower === 'scheduledbackups' && _isApiGroup(resource.apiVersion, _CNPG_GROUP)) return _getCNPGScheduledBackupStatus(resource).text
       if (kindLower === 'poolers' && _isApiGroup(resource.apiVersion, _CNPG_GROUP)) return _getCNPGPoolerStatus(resource).text
       if (kindLower === 'istiogateways') return _getIstioGatewayStatus(resource).text
+      if (kindLower === 'providers' && _isApiGroup(resource.apiVersion, 'pkg.crossplane.io')) return getProviderStatus(resource).text
+      if (kindLower === 'providerconfigs') return getProviderConfigStatus(resource).text
+      if (isManagedResource(resource) || isComposite(resource)) return getCrossplaneStatus(resource).text
       // Generic CRDs. Must read the same text the cell renders or the dropdown
       // offers strings that appear on no row — hence the shared derivation.
       return getGenericResourceStatus(resource)?.text ?? ''

package/src/components/shared/CreateResourceDialog.test.tsx

@@ -328,3 +328,17 @@ it('keeps created-object facts and the edited draft when canceling a file replac
     expect(onClose).not.toHaveBeenCalled()
   } finally { await act(async () => root.unmount()); host.remove() }
 })
+
+it.each(['apply', 'create'] as const)('explains unknown live pause only in direct %s mode without changing submission', async (mode) => {
+  const onApply = vi.fn(async () => [])
+  const host = document.createElement('div'); document.body.appendChild(host); const root = createRoot(host)
+  const yaml = 'apiVersion: example.test/v1\nkind: Bucket\nmetadata:\n  name: archive\nspec:\n  providerConfigRef:\n    name: default\n'
+  try {
+    await act(async () => root.render(<CreateResourceDialog open onClose={() => {}} initialYaml={yaml} initialMode={mode} lockMode={mode === 'create'} onApply={onApply} isApplying={false} />))
+    expect(document.body.textContent?.includes('Existing pause state is unknown')).toBe(mode === 'apply')
+    const submit = button(mode === 'apply' ? 'Apply' : 'Create')!
+    expect(submit.disabled).toBe(false)
+    await act(async () => submit.click())
+    expect(onApply).toHaveBeenCalledWith(expect.objectContaining({ yaml, mode }))
+  } finally { await act(async () => root.unmount()); host.remove() }
+})

package/src/components/shared/CreateResourceDialog.tsx

@@ -9,6 +9,8 @@ import {
   YamlReview,
   type YamlPreviewResult,
 } from '../ui/YamlReview'
+import { useDebouncedValue } from '../../hooks/useDebouncedValue'
+import { CrossplaneYamlApplyNotice } from '../ui/CrossplaneOperationNotice'
 import { Tooltip } from '../ui/Tooltip'
 import { formatApplyError } from '../../utils/k8s-errors'
 import {
@@ -84,6 +86,7 @@ export function CreateResourceDialog({
 }: CreateResourceDialogProps) {
   const titleId = useId()
   const [yaml, setYaml] = useState(initialYaml)
+  const pauseContextYaml = useDebouncedValue(onPreview ? '' : yaml, 200)
   const [mode, setMode] = useState<'apply' | 'create'>(initialMode)
   const [dryRun, setDryRun] = useState(false)
   const [force, setForce] = useState(false)
@@ -401,6 +404,7 @@ export function CreateResourceDialog({
         <YamlReview
           titleId={titleId}
           submittedYaml={preview.yaml}
+          mode={preview.mode}
           documents={preview.documents}
           nonAtomic={preview.nonAtomic}
           force={preview.force}
@@ -493,6 +497,7 @@ export function CreateResourceDialog({
             </div>
           </div>
 
+          {!onPreview && <div className="px-4"><CrossplaneYamlApplyNotice yaml={pauseContextYaml} baselineUnavailable={mode === 'apply'} /></div>}
           {(error || previewError || partialCreates.length > 0) && (
             <ApplyErrorBanner error={error || previewError || 'Resources were created before the previous attempt stopped.'} partialCreates={partialCreates} strictCreate={lockMode && mode === 'create'} hasPreview={Boolean(onPreview)} />
           )}

package/src/components/shared/DetailShell.phone.test.tsx

@@ -0,0 +1,54 @@
+// @vitest-environment jsdom
+//
+// On a phone, a tab that opts into a compact header shows the host's compact
+// identity in place of the full one (whose links aren't rendered at all);
+// the breadcrumb stays, since some hosts navigate through it.
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, expect, it, vi } from 'vitest'
+import { DetailShell } from './DetailShell'
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+afterEach(() => { vi.unstubAllGlobals() })
+
+function render({ phone, activeTab }: { phone: boolean; activeTab: 'overview' | 'logs' }) {
+  vi.stubGlobal('matchMedia', (query: string) => ({ matches: phone, media: query, addEventListener: () => {}, removeEventListener: () => {} }))
+  vi.stubGlobal('ResizeObserver', class { observe() {} disconnect() {} })
+  const tabs = [{ id: 'overview' as const, label: 'Overview' }, { id: 'logs' as const, label: 'Logs', phoneCompactHeader: true }]
+  const host = document.createElement('div'); const root = createRoot(host)
+  act(() => root.render(
+    <DetailShell
+      breadcrumb={<nav>Workspace crumb</nav>}
+      identity={<div>web <a href="#owner">Owner link</a></div>}
+      compactIdentity={<span>web (compact)</span>}
+      headerActions={<button type="button">Investigate</button>}
+      subheader={<p>Status summary</p>}
+      tabs={tabs}
+      activeTab={activeTab}
+      onTabChange={() => {}}
+    >
+      content
+    </DetailShell>,
+  ))
+  const text = host.textContent ?? ''
+  act(() => root.unmount())
+  return text
+}
+
+it('shows only the compact identity on a phone while the tab opts in', () => {
+  const text = render({ phone: true, activeTab: 'logs' })
+  expect(text).toContain('web (compact)')
+  expect(text).toContain('Workspace crumb')
+  expect(text).not.toContain('Owner link')
+  expect(text).not.toContain('Investigate')
+  expect(text).not.toContain('Status summary')
+})
+
+it('keeps the full header on other tabs and off a phone', () => {
+  for (const args of [{ phone: true, activeTab: 'overview' as const }, { phone: false, activeTab: 'logs' as const }]) {
+    const text = render(args)
+    expect(text).toContain('Owner link')
+    expect(text).toContain('Investigate')
+    expect(text).toContain('Status summary')
+    expect(text).not.toContain('web (compact)')
+  }
+})

package/src/components/shared/DetailShell.tsx

@@ -1,5 +1,6 @@
 import { useLayoutEffect, useRef, useState, type ReactNode } from 'react'
 import { clsx } from 'clsx'
+import { usePhoneLayout } from '../../hooks/usePhoneLayout'
 
 // Shared tabbed detail chrome. Hosts provide all data-aware pieces; this owns
 // only the header, tab strip, optional controls, overlay, and content frame.
@@ -11,6 +12,8 @@ export interface DetailShellTab<TId extends string = string> {
   badge?: ReactNode
   /** Omit the tab from the strip without disturbing the others' identity. */
   hidden?: boolean
+  /** On a phone, show `compactIdentity` alone in the header while this tab is active. */
+  phoneCompactHeader?: boolean
 }
 
 export interface DetailShellProps<TId extends string = string> {
@@ -23,6 +26,8 @@ export interface DetailShellProps<TId extends string = string> {
   /** Inline leading control on the identity row — a back button in standalone Radar. */
   nav?: ReactNode
   identity: ReactNode
+  /** Replaces the identity on a phone while a `phoneCompactHeader` tab is active (e.g. the name). The breadcrumb and nav stay. */
+  compactIdentity?: ReactNode
   headerActions?: ReactNode
   /** A line under the identity row, above the tabs — e.g. a status summary that holds on every tab. */
   subheader?: ReactNode
@@ -46,6 +51,7 @@ export function DetailShell<TId extends string = string>({
   breadcrumb,
   nav,
   identity,
+  compactIdentity,
   headerActions,
   subheader,
   scopeControls,
@@ -71,28 +77,35 @@ export function DetailShell<TId extends string = string>({
     }
   }, [activeTab, compact])
 
+  // A tab that wants the screen (Logs) swaps the header for the host's compact
+  // identity on a phone, so its content gets the rest of the height.
+  const isPhone = usePhoneLayout()
+  const phoneCompact = isPhone && compactIdentity != null && !!visibleTabs.find((t) => t.id === activeTab)?.phoneCompactHeader
+
   return (
     <div className="flex flex-col h-full w-full bg-theme-base">
       {/* Header */}
       <div className="shrink-0 border-b border-theme-border bg-theme-base">
         {!compactHeader && (
           <>
-            {breadcrumb && <div className="px-6 pt-2.5">{breadcrumb}</div>}
-            <div className={clsx('px-6 flex items-start gap-4', wrapHeader && 'flex-wrap gap-y-2', breadcrumb ? 'pb-3 pt-1.5' : 'py-3')}>
+            {breadcrumb && <div className="px-6 pt-2.5 phone:px-4">{breadcrumb}</div>}
+            {/* Phones always wrap: the identity takes the row beside the back
+                button and the actions drop below it. */}
+            <div className={clsx('px-6 flex items-start gap-4 phone:px-4 phone:flex-wrap phone:gap-x-3 phone:gap-y-2', wrapHeader && 'flex-wrap gap-y-2', breadcrumb ? 'pb-3 pt-1.5' : 'py-3')}>
               {nav}
               {/* Wrapping on, the identity's basis is its one-line width, so the
                   actions move below whenever the whole title line would not fit
                   beside them — never squeezing the name to keep them up. */}
-              <div className={clsx('min-w-0', wrapHeader ? 'flex-auto' : 'flex-1')}>{identity}</div>
-              {wrapHeader ? <div className="ml-auto flex shrink-0 items-start gap-4">{headerActions}</div> : headerActions}
+              <div className={clsx('min-w-0 phone:basis-[calc(100%-3rem)]', wrapHeader ? 'flex-auto' : 'flex-1')}>{phoneCompact ? compactIdentity : identity}</div>
+              {phoneCompact ? null : wrapHeader ? <div className="ml-auto flex shrink-0 items-start gap-4">{headerActions}</div> : headerActions}
             </div>
-            {subheader && <div className="-mt-1 px-6 pb-3">{subheader}</div>}
+            {subheader && !phoneCompact && <div className="-mt-1 px-6 pb-3 phone:px-4">{subheader}</div>}
           </>
         )}
 
         {/* Tabs (left) + scope controls / actions (right) */}
-        <div className={clsx('flex items-center', compactHeader ? 'px-0' : 'border-t border-theme-border px-6')}>
-          <div ref={stripRef} className={clsx('flex min-w-0 flex-auto overflow-x-auto', compact ? 'gap-0' : 'gap-1')} role="tablist">
+        <div className={clsx('flex items-center phone:flex-wrap', compactHeader ? 'px-0' : 'border-t border-theme-border px-6 phone:px-4')}>
+          <div ref={stripRef} className={clsx('flex min-w-0 flex-auto overflow-x-auto phone:basis-full', compact ? 'gap-0' : 'gap-1')} role="tablist">
             {visibleTabs.map((t) => (
               <DetailShellTabButton key={t.id} active={activeTab === t.id} compact={compact} onClick={() => onTabChange(t.id)}>
                 {!compact && t.icon}
@@ -102,7 +115,7 @@ export function DetailShell<TId extends string = string>({
             ))}
           </div>
           {(scopeControls || tabStripEnd) && (
-            <div className="ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2 pl-2">
+            <div className="ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2 pl-2 phone:py-2">
               {scopeControls}
               {tabStripEnd}
             </div>

package/src/components/shared/EditableYamlView.phone.test.tsx

@@ -0,0 +1,44 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, expect, it, vi } from "vitest";
+
+vi.mock("../ui/YamlEditor", () => ({ YamlEditor: () => <div />, YamlDiffEditor: () => <div /> }));
+
+const { EditableYamlView } = await import("./EditableYamlView");
+
+vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+afterEach(() => vi.unstubAllGlobals());
+
+function render(phone: boolean) {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  vi.stubGlobal("matchMedia", (query: string) => ({ matches: phone, media: query, addEventListener: () => {}, removeEventListener: () => {} }));
+  const host = document.createElement("div");
+  const root = createRoot(host);
+  act(() =>
+    root.render(
+      <EditableYamlView
+        resource={{ kind: "deployments", namespace: "default", name: "web" }}
+        data={{ apiVersion: "apps/v1", kind: "Deployment", metadata: { name: "web", namespace: "default" } }}
+        onCopy={() => {}}
+        copied={false}
+        onSave={async () => {}}
+        onDuplicate={() => {}}
+      />,
+    ),
+  );
+  const buttons = [...host.querySelectorAll("button")].map((b) => b.textContent?.trim());
+  act(() => root.unmount());
+  return buttons;
+}
+
+it("offers Edit and Duplicate off a phone", () => {
+  expect(render(false)).toEqual(expect.arrayContaining(["Edit", "Duplicate"]));
+});
+
+it("keeps Copy and Download but drops Edit and Duplicate on a phone", () => {
+  const buttons = render(true);
+  expect(buttons).not.toContain("Edit");
+  expect(buttons).not.toContain("Duplicate");
+  expect(buttons.some((b) => b?.includes("Download"))).toBe(true);
+});

package/src/components/shared/EditableYamlView.test.tsx

@@ -7,6 +7,7 @@
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { resourceToYaml } from "../../utils/yaml";
 
 vi.mock("../ui/YamlEditor", async () => {
   const { useEffect } = await import("react");
@@ -273,3 +274,60 @@ it("uses the accent token for a generic ConfigMap Edit control", () => {
   expect(edit.classList.contains("text-accent-text")).toBe(true);
   expect(edit.className).not.toContain("text-blue-");
 });
+
+
+it("keeps the SSA omission caveat in a direct editor save with a known paused baseline", () => {
+  const target = { kind: "TaskBucket", namespace: "shop", name: "archive" };
+  const baseline = { apiVersion: "example.test/v1", kind: "TaskBucket", metadata: { name: "archive", namespace: "shop", annotations: { "crossplane.io/paused": "true" } }, spec: { providerConfigRef: { name: "default" } } };
+  sessionStorage.setItem("radar_yaml_draft:TaskBucket/shop/archive", "apiVersion: example.test/v1\nkind: TaskBucket\nmetadata:\n  name: archive\n  namespace: shop\nspec:\n  providerConfigRef:\n    name: default\n");
+  act(() => root.render(<EditableYamlView resource={target as never} data={baseline} onCopy={() => {}} copied={false} onSave={async () => {}} />));
+  expect(text()).toContain("Pause affects reconciliation");
+  expect(text()).toContain("Omitting the annotation from server-side apply YAML does not guarantee its removal");
+});
+
+it("does not carry a paused baseline to a different API group in a direct editor save", async () => {
+  const target = { kind: "TaskBucket", namespace: "shop", name: "archive" };
+  const baseline = { apiVersion: "example.test/v1", kind: "TaskBucket", metadata: { name: "archive", namespace: "shop", annotations: { "crossplane.io/paused": "true" } }, spec: { providerConfigRef: { name: "default" } } };
+  const yaml = "apiVersion: another.example.test/v1\nkind: TaskBucket\nmetadata:\n  name: archive\n  namespace: shop\nspec: {}\n";
+  const onSave = vi.fn(async () => {});
+  sessionStorage.setItem("radar_yaml_draft:TaskBucket/shop/archive", yaml);
+  act(() => root.render(<EditableYamlView resource={target as never} data={baseline} onCopy={() => {}} copied={false} onSave={onSave} />));
+  expect(text()).not.toContain("Pause affects reconciliation");
+  expect(text()).not.toContain("Existing pause state is unknown");
+  await click(/^Save$/);
+  expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ kind: "TaskBucket", namespace: "shop", name: "archive", yaml }));
+});
+
+it("does not infer annotation omission before the first direct-edit debounce settles", () => {
+  vi.useFakeTimers();
+  try {
+    const target = { kind: "TaskBucket", namespace: "shop", name: "archive" };
+    const baseline = { apiVersion: "example.test/v1", kind: "TaskBucket", metadata: { name: "archive", namespace: "shop", annotations: { "crossplane.io/paused": "true" } }, spec: { providerConfigRef: { name: "default" } } };
+    act(() => root.render(<EditableYamlView resource={target as never} data={baseline} onCopy={() => {}} copied={false} onSave={async () => {}} />));
+    const edit = [...host.querySelectorAll("button")].find(button => button.textContent?.trim() === "Edit")!;
+    act(() => edit.click());
+    expect(text()).not.toContain("Omitting the annotation");
+    act(() => vi.advanceTimersByTime(200));
+    expect(text()).toContain("Pause affects reconciliation");
+    expect(text()).not.toContain("Omitting the annotation");
+  } finally {
+    vi.useRealTimers();
+  }
+});
+
+
+it("retains raw acknowledged ref-less pause evidence through editor and status-free review", async () => {
+  const target = { kind: "TaskClaim", namespace: "shop", name: "ref-less" };
+  const raw = { apiVersion: "example.test/v1", kind: "TaskClaim", metadata: { name: "ref-less", namespace: "shop", annotations: { "crossplane.io/paused": "true" } }, spec: {}, status: { conditions: [{ type: "Synced", status: "False", reason: "ReconcilePaused" }] } };
+  const clean = resourceToYaml(raw);
+  expect(clean).not.toContain("status:");
+  expect(clean).not.toContain("ReconcilePaused");
+  const onPreview = vi.fn(async () => ({ documents: [{ index: 0, status: "accepted" as const, action: "update" as const, baselineYaml: clean, predictedYaml: clean, reviewedResourceVersion: "1" }], nonAtomic: false }));
+  act(() => root.render(<EditableYamlView resource={target as never} data={raw} onCopy={() => {}} copied={false} onSave={async () => {}} onPreview={onPreview} />));
+  await click(/^Edit$/);
+  await click(/Review changes/);
+  expect(text()).toContain("Pause affects reconciliation");
+  expect(text()).toContain("Server preview keeps the pause request on TaskClaim shop/ref-less");
+  expect(onPreview).toHaveBeenCalledWith(expect.objectContaining({ yaml: clean }));
+  expect(raw.status.conditions[0].reason).toBe("ReconcilePaused");
+});

package/src/components/shared/EditableYamlView.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef } from 'react'
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react'
 import {
   Copy,
   CopyPlus,
@@ -12,6 +12,8 @@ import {
 } from 'lucide-react'
 import { Download } from 'lucide-react'
 import { stringify as yamlStringify } from 'yaml'
+import { useDebouncedValue } from '../../hooks/useDebouncedValue'
+import { CrossplaneYamlApplyNotice } from '../ui/CrossplaneOperationNotice'
 import { CodeViewer } from '../ui/CodeViewer'
 import { YamlEditor } from '../ui/YamlEditor'
 import type { YamlSchemaLoader } from '../ui/YamlEditor'
@@ -21,6 +23,7 @@ import type { SelectedResource } from '../../types'
 import { resourceToYaml } from '../../utils/yaml'
 import { triggerDownload } from '../../utils/download'
 import { isCoreBatchJob } from '../../utils/api-resources'
+import { usePhoneLayout } from '../../hooks/usePhoneLayout'
 
 // ============================================================================
 // SUCCESS ANIMATION
@@ -197,6 +200,10 @@ export function EditableYamlView({
   onDownload,
 }: EditableYamlViewProps) {
   const draftKey = `radar_yaml_draft:${resource.kind}/${resource.namespace}/${resource.name}`
+  // Phones read YAML but don't start an edit or a duplicate: authoring YAML by
+  // touch is error-prone. Not folded into readOnly, which would discard an edit
+  // already open when a phone rotates from landscape to portrait.
+  const isPhone = usePhoneLayout()
 
   // Restore draft from sessionStorage (e.g., after session-expiry redirect).
   // All sessionStorage calls are wrapped in try-catch — storage can throw
@@ -207,6 +214,8 @@ export function EditableYamlView({
   const reviewGeneration = useRef(0)
   const [isEditing, setIsEditing] = useState(savedDraft.current !== null)
   const [editedYaml, setEditedYaml] = useState(savedDraft.current ?? '')
+  const pauseContextYaml = useDebouncedValue(!onPreview && isEditing ? editedYaml : '', 200)
+  const pauseBaselineYaml = useMemo(() => !onPreview && isEditing ? resourceToYaml(data) : '', [data, onPreview, isEditing])
   const [yamlErrors, setYamlErrors] = useState<string[]>([])
   const [showErrorDetails, setShowErrorDetails] = useState(false)
   // Default on: the editor resubmits the full live manifest, so an unforced
@@ -216,6 +225,7 @@ export function EditableYamlView({
     yaml: string
     force: boolean
     originalYaml: string
+    resourceData: unknown
     documents: YamlPreviewResult[]
     nonAtomic: boolean
     context?: string
@@ -293,6 +303,7 @@ export function EditableYamlView({
           yaml: editedYaml,
           force,
           originalYaml: resourceToYaml(data),
+          resourceData: data,
           documents: result.documents,
           nonAtomic: result.nonAtomic,
           context: result.context,
@@ -382,7 +393,9 @@ export function EditableYamlView({
       return (
         <YamlReview
           submittedYaml={preview.yaml}
+          mode="update"
           originalYaml={preview.originalYaml}
+          resourceData={preview.resourceData}
           documents={preview.documents}
           nonAtomic={preview.nonAtomic}
           force={preview.force}
@@ -465,6 +478,8 @@ export function EditableYamlView({
           </div>
         </div>
 
+        {!onPreview && <div className="px-4 pt-2"><CrossplaneYamlApplyNotice yaml={pauseContextYaml} baselineYaml={pauseBaselineYaml} resourceData={data} /></div>}
+
         {editWarning && (
           <div className="px-4 py-2.5 bg-amber-500/10 dark:bg-yellow-500/10 border-b border-amber-300 dark:border-yellow-500/30">
             <div className="flex items-start gap-2">
@@ -549,7 +564,7 @@ export function EditableYamlView({
       <div className="flex items-center justify-between mb-2">
         <span className="text-sm font-medium text-theme-text-secondary">YAML</span>
         <div className="flex items-center gap-2">
-          {!readOnly && (
+          {!readOnly && !isPhone && (
             <button
               onClick={handleStartEdit}
               className="flex items-center gap-1 px-2 py-1 text-xs text-accent-text hover:text-accent-light hover:bg-theme-elevated rounded"
@@ -578,7 +593,7 @@ export function EditableYamlView({
               Download
             </button>
           </Tooltip>
-          {onDuplicate && (
+          {onDuplicate && !isPhone && (
             <Tooltip content="Duplicate as new resource">
               <button
                 onClick={() =>

package/src/components/shared/FilterRailPanel.test.tsx

@@ -0,0 +1,39 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, expect, it, vi } from 'vitest'
+import { FilterRailPanel } from './FilterRailPanel'
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+afterEach(() => { vi.unstubAllGlobals() })
+
+function stubPhone(matches: boolean) {
+  vi.stubGlobal('matchMedia', (query: string) => ({ matches, media: query, addEventListener: () => {}, removeEventListener: () => {} }))
+}
+
+function render(activeCount: number) {
+  const host = document.createElement('div'); const root = createRoot(host)
+  act(() => root.render(<FilterRailPanel activeCount={activeCount} clear={<button type="button">Clear</button>}><div>Status facet</div></FilterRailPanel>))
+  return host
+}
+
+it('keeps the plain header and an open body off a phone', () => {
+  stubPhone(false)
+  const host = render(2)
+  expect(host.querySelector('[aria-expanded]')).toBeNull()
+  expect(host.textContent).toContain('Status facet')
+  expect(host.textContent).not.toContain('2')
+})
+
+it('collapses the facets behind a Filters button with the active count on a phone', () => {
+  stubPhone(true)
+  const host = render(2)
+  const button = host.querySelector<HTMLButtonElement>('button[aria-expanded]')!
+  expect(button.textContent).toContain('Filters')
+  expect(button.textContent).toContain('2')
+  expect(button.getAttribute('aria-expanded')).toBe('false')
+  const panel = host.querySelector(`#${button.getAttribute('aria-controls')}`)!
+  expect(panel.querySelector('[inert]')).not.toBeNull()
+  act(() => button.click())
+  expect(button.getAttribute('aria-expanded')).toBe('true')
+  expect(panel.querySelector('[inert]')).toBeNull()
+})