@skyhook-io/radar-app 1.13.5 → 1.14.1

package/src/components/gitops/GitOpsView.tsx

@@ -72,6 +72,9 @@ import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
 import { CodeViewer } from '../ui/CodeViewer'
 import { ArgoResourceDiffLoader } from './ArgoResourceDiffLoader'
 import { RevisionMetaChip } from './RevisionMetaChip'
+import { RemoteDestinationCloudHint } from './RemoteDestinationCloudHint'
+
+const GITOPS_HEALTH_DOCS_URL = 'https://radarhq.io/docs/features/gitops#per-resource-health'
 import type { GitOpsHistoryItem } from '@skyhook-io/k8s-ui'
 
 const GITOPS_KINDS: APIResource[] = [
@@ -634,6 +637,9 @@ function GitOpsDetailView({ namespaces, onOpenResource, onOpenSettings }: GitOps
       detail={detail}
       insight={insightsQ.data ?? null}
       insightLoading={insightsQ.isLoading}
+      healthDocsUrl={GITOPS_HEALTH_DOCS_URL}
+      remoteDestinationHint={<RemoteDestinationCloudHint />}
+      onOpenSettings={onOpenSettings}
       renderRevisionMeta={
         isArgoApp && insightsQ.data?.capabilities?.revisionMetadataAvailable
           ? (revision) => (
@@ -808,6 +814,7 @@ function GitOpsDetailView({ namespaces, onOpenResource, onOpenSettings }: GitOps
                 onQueryChange={setGraphSearch}
                 filters={graphFilters}
                 showToolbar={false}
+                issues={insightsQ.data?.issues}
               />
             </div>
           </div>

package/src/components/gitops/RemoteDestinationCloudHint.tsx

@@ -0,0 +1,26 @@
+import { useNavCustomization } from '../../context/NavCustomization'
+import { useCapabilities } from '../../api/client'
+import { openCloudFunnel } from '../CloudFunnelButton'
+
+// The one sentence a standalone Radar adds after "this application deploys
+// to another cluster": the thing the user just ran into is what Radar Cloud
+// does. "Radar Cloud" opens the same dialog as the top-right button, so
+// there is one pitch and one connect flow. That dialog connects THIS
+// cluster; the destination is a second connect from Cloud, which is why the
+// copy says "both clusters" and promises the view in Cloud, not here. Rendered only when that button
+// is: the server decides whether there is anything to pitch (cloudConnect
+// capability), and embedded hosts (Radar Cloud itself) mount neither.
+export function RemoteDestinationCloudHint() {
+  const { embedded } = useNavCustomization()
+  const capabilities = useCapabilities()
+  if (embedded || !capabilities.data?.cloudConnect) return null
+  return (
+    <>
+      Connect both clusters to{' '}
+      <button type="button" onClick={openCloudFunnel} className="underline decoration-theme-border underline-offset-2 hover:text-theme-text-primary">
+        Radar Cloud
+      </button>{' '}
+      to see this app's resources together.
+    </>
+  )
+}

package/src/components/helm/HelmCompareRoute.tsx

@@ -32,6 +32,8 @@ import { getHelmStatusColor, getKindBadgeColor, SEVERITY_BADGE } from '../../uti
 import { formatDate } from './helm-utils'
 import { RoleGatedPanel } from './RoleGatedPanel'
 import { Tooltip } from '../ui/Tooltip'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
 
 type DiffTone = 'success' | 'warning' | 'error' | 'info' | 'neutral'
 
@@ -342,6 +344,9 @@ function RevisionSelect({
   onChange: (revision: number) => void
 }) {
   const [open, setOpen] = useState(false)
+  // Presence outlives `open` by the menu exit so the list fades out in place;
+  // the outside-click / Escape listeners below still key off logical `open`.
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, overlayExitMs('menu'))
   const [activeIndex, setActiveIndex] = useState(0)
   const rootRef = useRef<HTMLDivElement>(null)
   const listboxId = useId()
@@ -371,12 +376,14 @@ function RevisionSelect({
     if (open) setActiveIndex(selectedIndex)
   }, [open, selectedIndex])
 
+  // The listbox mounts a commit after `open` (presence hook); without
+  // `shouldRender` here a reopen at an unchanged activeIndex never scrolls.
   useEffect(() => {
-    if (!open) return
+    if (!open || !shouldRender) return
     const revision = revisions[activeIndex]
     if (!revision) return
     document.getElementById(`${listboxId}-${revision.revision}`)?.scrollIntoView({ block: 'nearest' })
-  }, [activeIndex, listboxId, open, revisions])
+  }, [activeIndex, listboxId, open, shouldRender, revisions])
 
   const selectRevision = (revision: number) => {
     setOpen(false)
@@ -438,11 +445,18 @@ function RevisionSelect({
         <span className="min-w-0 truncate">{selected ? formatRevisionOption(selected) : 'No revisions'}</span>
         <ChevronDown className={clsx('h-3.5 w-3.5 shrink-0 text-theme-text-tertiary transition-transform', open && 'rotate-180')} />
       </button>
-      {open && (
+      {shouldRender && (
         <div
           id={listboxId}
           role="listbox"
-          className="absolute right-0 top-full z-50 mt-1 max-h-80 w-[min(36rem,calc(100vw-2rem))] overflow-y-auto rounded-lg border border-theme-border bg-theme-surface p-1 shadow-theme-lg"
+          inert={!open || undefined}
+          className={clsx(
+            'absolute right-0 top-full z-50 mt-1 max-h-80 w-[min(36rem,calc(100vw-2rem))] origin-top-right overflow-y-auto rounded-lg border border-theme-border bg-theme-surface p-1 shadow-theme-lg',
+            TRANSITION_MENU,
+            isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]',
+            !open && 'pointer-events-none',
+          )}
+          style={overlayTransitionStyle(isOpen, 'menu')}
         >
           {revisions.map((revision, index) => {
             const selectedRevision = revision.revision === value

package/src/components/helm/HelmReleaseDrawer.tsx

@@ -4,7 +4,7 @@ import { FetchResult, useDockReservedHeight, compareVersions } from '@skyhook-io
 import { startViewTransitionSafe } from '@skyhook-io/k8s-ui/utils/view-transition'
 import { TRANSITION_DRAWER } from '../../utils/animation'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
-import { X, Copy, Check, RefreshCw, Package, Code, History, Settings, Link2, Anchor, GitFork, BookOpen, ArrowUpCircle, Trash2, GitBranch, AlertTriangle, RotateCcw, Clock, GitCompare, ExternalLink, ChevronRight, SlidersHorizontal, Eye, Loader2 } from 'lucide-react'
+import { X, Copy, Check, RefreshCw, Package, Code, History, Settings, Link2, Anchor, GitFork, BookOpen, ArrowUpCircle, Trash2, GitBranch, AlertTriangle, RotateCcw, Clock, GitCompare, ExternalLink, SlidersHorizontal, Eye, Loader2 } from 'lucide-react'
 import yaml from 'yaml'
 import { useNavigate } from 'react-router-dom'
 import { clsx } from 'clsx'
@@ -25,6 +25,8 @@ import { ManifestViewer } from './ManifestViewer'
 import { ValuesViewer } from './ValuesViewer'
 import { OwnedResources } from './OwnedResources'
 import { TrackChartSourceDialog } from './TrackChartSourceDialog'
+import { Collapse, CollapseChevron } from '@skyhook-io/k8s-ui/components/ui/Collapse'
+import { Disclosure } from '../ui/Disclosure'
 
 interface HelmReleaseDrawerProps {
   release: SelectedHelmRelease
@@ -117,7 +119,6 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
   const [showTrackSource, setShowTrackSource] = useState(false)
   const [selectedVersion, setSelectedVersion] = useState<string | null>(null)
   const [adjustValues, setAdjustValues] = useState(false)
-  const [renderAdjustValues, setRenderAdjustValues] = useState(false)
   const [editedUpgradeYaml, setEditedUpgradeYaml] = useState('')
   const [upgradeYamlError, setUpgradeYamlError] = useState<string | null>(null)
   const [upgradeValuesSeeded, setUpgradeValuesSeeded] = useState(false)
@@ -357,7 +358,6 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
     setUpgradeProgress([])
     setSelectedVersion(null)
     setAdjustValues(false)
-    setRenderAdjustValues(false)
     setEditedUpgradeYaml('')
     editedUpgradeYamlRef.current = ''
     setUpgradeYamlError(null)
@@ -383,7 +383,6 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
       return
     }
 
-    setRenderAdjustValues(true)
     setEditedUpgradeYaml('')
     editedUpgradeYamlRef.current = ''
     setUpgradeYamlError(null)
@@ -911,24 +910,15 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
                 aria-controls="helm-upgrade-values-panel"
                 className="flex items-center gap-1.5 text-sm font-medium text-theme-text-secondary hover:text-theme-text-primary disabled:opacity-50"
               >
-                <ChevronRight className={clsx('w-4 h-4 transition-transform duration-200', adjustValues && 'rotate-90')} />
+                <CollapseChevron open={adjustValues} className="w-4 h-4" />
                 <SlidersHorizontal className="w-3.5 h-3.5" />
                 Adjust your values (optional)
               </button>
             </Tooltip>
-            <div
-              id="helm-upgrade-values-panel"
-              className={`issue-details-motion ${adjustValues ? 'issue-details-motion-open' : ''}`}
-              onTransitionEnd={(event) => {
-                if (event.target !== event.currentTarget) return
-                if (event.propertyName !== 'grid-template-rows') return
-                if (!adjustValues) {
-                  setRenderAdjustValues(false)
-                }
-              }}
-            >
-              <div className="overflow-hidden">
-                {renderAdjustValues && (
+            {/* unmountOnExit: the editor (uncontrolled textarea + seeded values)
+                must reset between opens, and the values query only runs while
+                the panel is open. */}
+            <Collapse open={adjustValues} unmountOnExit id="helm-upgrade-values-panel">
                   <div className="mt-2">
                     <p className="mb-2 text-xs text-theme-text-tertiary">
                       These are your current settings — edit them to carry into {targetVersion}. What you see here is exactly what gets applied.
@@ -988,9 +978,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
                       </Tooltip>
                     </div>
                   </div>
-                )}
-              </div>
-            </div>
+            </Collapse>
           </div>
         )}
         {upgradeProgress.length > 0 && <ProgressLog entries={upgradeProgress} />}
@@ -1138,14 +1126,11 @@ function HelmOperationBanner({
           </div>
           <p className="mt-1 text-sm text-theme-text-secondary">{operation.message}</p>
           {hasRawMessage && (
-            <details className="mt-2">
-              <summary className="cursor-pointer select-none text-xs font-medium text-theme-text-tertiary hover:text-theme-text-secondary">
-                Show raw Helm error
-              </summary>
+            <Disclosure className="mt-2" summaryClassName="select-none text-xs font-medium text-theme-text-tertiary hover:text-theme-text-secondary" summary="Show raw Helm error">
               <pre className="mt-2 max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-theme-base/60 p-2 font-mono text-[11px] leading-relaxed text-theme-text-tertiary">
                 {rawMessage}
               </pre>
-            </details>
+            </Disclosure>
           )}
           {operation.failureDescription && !hasRawMessage && (
             <Tooltip content={operation.failureDescription} wrapperClassName="mt-1 flex">

package/src/components/helm/InstallWizard.tsx

@@ -9,6 +9,7 @@ import { useChartDetail, useNamespaces, useArtifactHubChart, installChartWithPro
 import { useCanHelmAct } from '../../api/client'
 import type { ChartSource, ChartDetail, ArtifactHubChartDetail } from '../../types'
 import { YamlEditor } from '../ui/YamlEditor'
+import { Collapse, CollapseChevron, useDisclosure } from '@skyhook-io/k8s-ui/components/ui/Collapse'
 import { Tooltip } from '../ui/Tooltip'
 import { Markdown } from '../ui/Markdown'
 import { SEVERITY_BADGE, SEVERITY_TEXT } from '../../utils/badge-colors'
@@ -656,6 +657,7 @@ interface ValuesStepProps {
 
 function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartDetail, source }: ValuesStepProps) {
   const [showEditor, setShowEditor] = useState(false)
+  const editorDisclosure = useDisclosure(showEditor)
 
   const isLocal = source === 'local'
   const localDetail = chartDetail as ChartDetail | undefined
@@ -700,11 +702,12 @@ function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartD
       {/* Collapsible editor section */}
       <div className="border border-theme-border rounded-lg overflow-hidden">
         <button
+          {...editorDisclosure.buttonProps}
           onClick={() => setShowEditor(!showEditor)}
           className="w-full flex items-center justify-between px-4 py-3 bg-theme-elevated/50 hover:bg-theme-elevated transition-colors"
         >
           <div className="flex items-center gap-2">
-            <ChevronRight className={clsx('w-4 h-4 text-theme-text-tertiary transition-transform', showEditor && 'rotate-90')} />
+            <CollapseChevron open={showEditor} className="w-4 h-4" />
             <span className="text-sm font-medium text-theme-text-primary">
               {hasValues ? (showEditor ? 'Hide' : 'Show') : 'Add'} configuration values
             </span>
@@ -715,7 +718,9 @@ function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartD
           </div>
         </button>
 
-        {showEditor && (
+        {/* unmountOnExit: the Monaco editor is heavy and its instance should
+            not outlive a closed section; values live in `valuesYaml` above. */}
+        <Collapse open={showEditor} unmountOnExit id={editorDisclosure.panelId}>
           <div className="p-4 border-t border-theme-border">
             {/* Action buttons */}
             <div className="flex items-center gap-3 mb-4">
@@ -777,7 +782,7 @@ function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartD
               </div>
             )}
           </div>
-        )}
+        </Collapse>
       </div>
     </div>
   )

package/src/components/home/MCPSetupDialog.tsx

@@ -1,8 +1,9 @@
 import { useRef, useEffect, useState, useCallback } from 'react'
-import { X, Copy, Check, Radio, Terminal, MessageSquare, Code2, ChevronRight, Pin } from 'lucide-react'
+import { X, Copy, Check, Radio, Terminal, MessageSquare, Code2, Pin } from 'lucide-react'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
 import { MCP_TOOL_CATALOG } from './mcpToolCatalog'
 import { Tooltip } from '../ui/Tooltip'
+import { Disclosure } from '../ui/Disclosure'
 
 interface MCPSetupDialogProps {
   open: boolean
@@ -285,17 +286,22 @@ export function MCPSetupDialog({ open, onClose, mcpUrl }: MCPSetupDialogProps) {
               { icon: Terminal, name: 'OpenAI Codex', path: '~/.codex/config.toml', config: codexConfig },
               { icon: Terminal, name: 'Gemini CLI', path: '~/.gemini/settings.json', config: geminiConfig },
             ].map((agent) => (
-              <details key={agent.name} className="group rounded-md border border-theme-border/50 bg-theme-base/30">
-                <summary className="flex items-center gap-2 px-3 py-2 select-none list-none hover:bg-theme-hover/50 rounded-md transition-colors [&::-webkit-details-marker]:hidden">
-                  <ChevronRight className="w-3.5 h-3.5 text-theme-text-tertiary transition-transform group-open:rotate-90" />
-                  <agent.icon className="w-4 h-4 text-theme-text-tertiary" />
-                  <span className="text-sm font-medium text-theme-text-primary">{agent.name}</span>
-                  {agent.path && <span className="text-[10px] text-theme-text-tertiary ml-auto">{agent.path}</span>}
-                </summary>
+              <Disclosure
+                key={agent.name}
+                className="rounded-md border border-theme-border/50 bg-theme-base/30"
+                summaryClassName="gap-2 px-3 py-2 select-none hover:bg-theme-hover/50 rounded-md transition-colors"
+                summary={
+                  <>
+                    <agent.icon className="w-4 h-4 text-theme-text-tertiary" />
+                    <span className="text-sm font-medium text-theme-text-primary">{agent.name}</span>
+                    {agent.path && <span className="text-[10px] text-theme-text-tertiary ml-auto">{agent.path}</span>}
+                  </>
+                }
+              >
                 <div className="px-3 pb-3 pt-1">
                   <CodeBlock>{agent.config}</CodeBlock>
                 </div>
-              </details>
+              </Disclosure>
             ))}
           </div>
 

package/src/components/portforward/PortForwardManager.tsx

@@ -33,6 +33,7 @@ import { openExternal } from '../../utils/navigation'
 import { apiUrl } from '../../api/config'
 import { apiFetch, useCapabilities } from '../../api/client'
 import { pluralize } from '@skyhook-io/k8s-ui'
+import { Collapse } from '@skyhook-io/k8s-ui/components/ui/Collapse'
 
 // --- Types -------------------------------------------------------------------
 
@@ -661,17 +662,10 @@ export function PortForwardPanel() {
           keeping border and rounded corners correct at every intermediate height. */}
       <div className="overflow-hidden rounded-xl bg-theme-surface dark:bg-theme-elevated border-2 border-skyhook-500/35 dark:border-skyhook-400/40 shadow-2xl dark:shadow-[0_24px_60px_-12px_rgba(0,0,0,0.75),0_10px_24px_-6px_rgba(0,0,0,0.45)]">
 
-        {/* Grid sizer — the height engine. grid-template-rows 0fr→1fr animates
-            height from 0 to auto. Content clips from the bottom up, creating a
-            natural top-to-bottom reveal (header appears first, sessions follow). */}
-        <div
-          className={clsx(
-            'grid transition-[grid-template-rows] duration-300',
-            isPanelOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
-          )}
-          style={{ transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)' }}
-        >
-          <div className="overflow-hidden">
+        {/* Height engine — Collapse animates grid-template-rows 0fr→1fr so the
+            shell grows from 0 to auto. Content clips from the bottom up, creating
+            a natural top-to-bottom reveal (header appears first, sessions follow). */}
+        <Collapse open={isPanelOpen}>
 
       {/* Header — tinted green when all sessions running, red when any have failed. */}
       <div
@@ -927,8 +921,7 @@ export function PortForwardPanel() {
         )}
       </div>
 
-          </div>{/* /overflow-hidden */}
-        </div>{/* /grid-sizer */}
+        </Collapse>
       </div>{/* /panel-shell */}
 
       {/* Caret — rendered after the shell so it paints on top (z-10). Opaque fill

package/src/components/resource/PrometheusCharts.overlays.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { computeRequestLimitLines } from './PrometheusCharts'
+
+describe('Pod request and limit overlays', () => {
+  it('does not draw a Pod limit when one runtime container is unlimited', () => {
+    const resource = { spec: { containers: [
+      { resources: { requests: { cpu: '100m' }, limits: { cpu: '1' } } },
+      { resources: { requests: { cpu: '200m' } } },
+    ] } }
+    const lines = computeRequestLimitLines(resource, 'Pod', 'cpu')!
+    expect(lines).toHaveLength(1)
+    expect(lines[0].kind).toBe('request')
+    expect(lines[0].value).toBeCloseTo(0.3)
+  })
+  it('sums fully limited runtime containers at per-Pod scale', () => {
+    const resource = { spec: { replicas: 5, template: { spec: {
+      containers: [{ resources: { limits: { cpu: '1' } } }],
+      initContainers: [{ restartPolicy: 'Always', resources: { limits: { cpu: '200m' } } }],
+    } } } }
+    expect(computeRequestLimitLines(resource, 'Deployment', 'cpu')![0].value).toBeCloseTo(1.2)
+  })
+})

package/src/components/resource/PrometheusCharts.tsx

@@ -121,6 +121,7 @@ export function PrometheusCharts({ kind, namespace, name, showEmptyState = false
       statusError={status?.error}
       onConnect={() => connectMutation.mutate()}
       connecting={connectMutation.isPending}
+      discovering={status?.discovering === true}
       category={activeCategory}
       onCategoryChange={setActiveCategory}
       range={timeRange}
@@ -161,12 +162,12 @@ export function computeRequestLimitLines(
   if (runtimeContainers.length === 0) return undefined
 
   let reqSum = 0, reqAny = false
-  let limSum = 0, limAny = false
+  let limSum = 0, limAll = true
   for (const c of runtimeContainers) {
     const req = readQuantity(c.resources?.requests?.[category], category)
     const lim = readQuantity(c.resources?.limits?.[category], category)
     if (req != null) { reqSum += req; reqAny = true }
-    if (lim != null) { limSum += lim; limAny = true }
+    if (lim != null && lim > 0) { limSum += lim } else { limAll = false }
   }
 
   const lines: ReferenceLine[] = []
@@ -177,7 +178,7 @@ export function computeRequestLimitLines(
       kind: 'request',
     })
   }
-  if (limAny) {
+  if (limAll) {
     lines.push({
       value: limSum,
       label: `limit ${formatRequestLimitLabel(limSum, category)}`,

package/src/components/resource/PrometheusChartsGrid.render.test.tsx

@@ -0,0 +1,99 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { MemoryRouter } from 'react-router-dom'
+import { NavCustomizationProvider } from '../../context/NavCustomization'
+import type { WorkloadMetrics } from '../../api/workloadMetrics'
+
+let connected = false
+const ranges: string[] = []
+const charts: { seriesLabels?: string[]; referenceLines?: unknown[] }[] = []
+let workload: WorkloadMetrics
+
+vi.mock('../../api/client', async (importActual) => ({
+  ...(await importActual<typeof import('../../api/client')>()),
+  useAutoPromConnect: () => undefined,
+  usePrometheusStatus: () => ({ data: { connected, error: 'Backend query failed' } }),
+  usePrometheusConnect: () => ({ mutate: vi.fn(), isPending: false }),
+  usePrometheusResourceMetrics: (_kind: string, _ns: string, _name: string, _category: string, range: string) => {
+    ranges.push(range)
+    return { data: { unit: 'cores', result: { series: [{ labels: { pod: 'web-0' }, dataPoints: [{ timestamp: 100, value: 1 }, { timestamp: 160, value: 2 }] }] } } }
+  },
+}))
+vi.mock('../../api/workloadMetrics', () => ({ useWorkloadMetrics: () => ({ data: workload }) }))
+vi.mock('./RestartChart', () => ({ RestartEventLane: () => null }))
+vi.mock('./RightsizingStrip', () => ({ RightsizingStrip: () => null }))
+vi.mock('@skyhook-io/k8s-ui/components/charts', async (importActual) => ({
+  ...(await importActual<typeof import('@skyhook-io/k8s-ui/components/charts')>()),
+  AreaChart: (props: typeof charts[number]) => { charts.push(props); return <span>Chart</span> },
+}))
+
+const { PrometheusChartsGrid } = await import('./PrometheusChartsGrid')
+const resource = { spec: { template: { spec: { containers: [{ resources: { requests: { cpu: '100m' }, limits: { cpu: '200m' } } }] } } } }
+const render = (url = '/workloads/Deployment/demo/web?tab=metrics', embedded = false) => renderToString(
+  <MemoryRouter initialEntries={[url]}><NavCustomizationProvider value={embedded ? { embedded: true, rightExtras: null } : {}}>
+    <PrometheusChartsGrid kind="Deployment" namespace="demo" name="web" resource={resource} />
+  </NavCustomizationProvider></MemoryRouter>,
+)
+
+beforeEach(() => {
+  connected = false
+  ranges.length = 0
+  charts.length = 0
+  workload = { state: 'available', sources: [], pods: 1, podsTotal: 1, start: 100, end: 160, stepSeconds: 60, rateWindowSeconds: 300, history: {}, comparison: {}, panels: {} }
+})
+
+describe('Expanded metrics recovery and scope', () => {
+  it('offers standalone setup without losing the backend error or retry', () => {
+    const html = render()
+    expect(html).toContain('Backend query failed')
+    expect(html).toContain('Discover Prometheus')
+    expect(html).toContain('Configure metrics')
+    expect(html).toContain('workload-metrics.md#what-each-chart-needs')
+  })
+  it('uses operator guidance instead of standalone settings when embedded', () => {
+    const html = render(undefined, true)
+    expect(html).toContain('Ask your operator')
+    expect(html).not.toContain('Configure metrics')
+    expect(html).toContain('Discover Prometheus')
+  })
+  it.each([
+    ['/workloads/Deployment/demo/web?tab=metrics&metricsRange=3h', '3h'],
+    ['/applications?app=demo&workload=Deployment%2Fdemo%2Fweb&tab=metrics&metricsRange=6h', '6h'],
+    ['/applications?tab=metrics&metricsRange=invalid', '1h'],
+    ['/applications?tab=metrics', '1h'],
+  ])('reads and validates the URL range: %s', (url, expected) => {
+    connected = true
+    const html = render(url)
+    expect(html).toContain(`value="${expected}" selected=""`)
+    expect(ranges.length).toBeGreaterThan(0)
+    expect(ranges.every((range) => range === expected)).toBe(true)
+  })
+  it('leaves unverified charts accessible without template overlays or saturation', () => {
+    connected = true
+    const html = render()
+    expect(html).toContain('<details aria-label="Name-matched resource metrics">')
+    expect(html).toContain('Network and storage')
+    expect(html).not.toContain('% of limit')
+    expect(charts.length).toBeGreaterThan(0)
+    expect(charts.every((chart) => !chart.referenceLines?.length)).toBe(true)
+  })
+  it('labels unlabeled request totals without changing aggregate and quantile labels', () => {
+    connected = true
+    const series = [{ labels: {}, dataPoints: [{ timestamp: 160, value: 1 }] }]
+    workload.panels.requests = { state: 'available', unit: 'requests/s', series }
+    workload.panels.p50 = { state: 'available', unit: 'seconds', series }
+    workload.panels.p95 = { state: 'available', unit: 'seconds', series }
+    workload.panels.cpu = { state: 'available', unit: 'cores', series: [{ ...series[0], labels: { aggregation: 'Workload' } }, { ...series[0], labels: { aggregation: 'Maximum Pod' } }] }
+    render()
+    expect(charts.map((chart) => chart.seriesLabels)).toContainEqual(['Requests / sec'])
+    expect(charts.map((chart) => chart.seriesLabels)).toContainEqual(['p50', 'p95'])
+    expect(charts.map((chart) => chart.seriesLabels)).toContainEqual(['Workload', 'Maximum Pod'])
+  })
+  it('retains template references on verified current-Pod charts', () => {
+    connected = true
+    workload.history.cpu = { mode: 'current-pods' }
+    workload.panels.cpu = { state: 'available', unit: 'cores', series: [{ labels: { pod: 'web-0' }, dataPoints: [{ timestamp: 160, value: 0.1 }] }] }
+    render()
+    expect(charts.some((chart) => chart.referenceLines?.some((line) => (line as { label: string }).label === 'Template request 100m'))).toBe(true)
+  })
+})