@skyhook-io/radar-app 1.8.2 → 1.8.5

package/src/components/applications/ApplicationsView.tsx

@@ -5,6 +5,7 @@ import {
   ApplicationDetail,
   CenteredEmpty,
   PageHeader,
+  FreshnessControl,
   useToast,
   orderEnvs,
   matchWorkloadAcrossInstances,
@@ -18,6 +19,7 @@ import {
 } from '@skyhook-io/k8s-ui'
 import { Boxes } from 'lucide-react'
 import { useApplications, useTopology } from '../../api/client'
+import { useConnection } from '../../context/ConnectionContext'
 import { kindToPlural } from '../../utils/navigation'
 import { WorkloadView } from '../workload/WorkloadView'
 
@@ -28,8 +30,18 @@ interface ApplicationsViewProps {
 
 export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsViewProps) {
   const query = useApplications(namespaces)
+  const { connection } = useConnection()
   const apps = useMemo(() => query.data?.applications ?? [], [query.data])
 
+  const freshness = (
+    <FreshnessControl
+      mode="auto"
+      dataUpdatedAt={query.dataUpdatedAt}
+      onRefresh={() => query.refetch()}
+      connectionState={connection.state}
+    />
+  )
+
   // Which app is open lives in the URL (?app=<key>) so the detail view is
   // deep-linkable and the browser back button returns to the list. Opening or
   // closing an app also clears the per-app params (workload, tab).
@@ -92,7 +104,7 @@ export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsVie
 
   return (
     <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-      <ApplicationsList apps={apps} onSelect={selectApp} />
+      <ApplicationsList apps={apps} onSelect={selectApp} headerActions={freshness} />
     </div>
   )
 }

package/src/components/audit/AuditView.tsx

@@ -1,10 +1,11 @@
 import { useState, useCallback } from 'react'
 import { useAudit, useAuditSettings, useUpdateAuditSettings, useCloudRole } from '../../api/client'
 import type { SelectedResource } from '../../types'
-import { ChecksView, PaneLoader, PageHeader, type CheckResourceRef } from '@skyhook-io/k8s-ui'
+import { ChecksView, PaneLoader, PageHeader, FreshnessControl, type CheckResourceRef } from '@skyhook-io/k8s-ui'
 import { ShieldCheck, Settings } from 'lucide-react'
 import { AuditSettingsDialog } from './AuditSettingsDialog'
 import { Tooltip } from '../ui/Tooltip'
+import { useConnection } from '../../context/ConnectionContext'
 
 interface AuditViewProps {
   namespaces: string[]
@@ -18,7 +19,7 @@ interface AuditViewProps {
 // ~/.radar settings are this cluster's "policy" and the row hide-menu writes to
 // them.
 export function AuditView({ namespaces, onNavigateToResource }: AuditViewProps) {
-  const { data, isLoading, error } = useAudit(namespaces)
+  const { data, isLoading, error, dataUpdatedAt, refetch } = useAudit(namespaces)
   const { data: auditSettings } = useAuditSettings()
   const updateSettings = useUpdateAuditSettings()
   // Audit policy is owner-gated (enforced server-side). Withhold the inline
@@ -30,6 +31,8 @@ export function AuditView({ namespaces, onNavigateToResource }: AuditViewProps)
 
   const ignoredCount = auditSettings?.ignoredNamespaces?.length ?? 0
 
+  const { connection } = useConnection()
+
   // Inline hide actions — persist to local settings immediately.
   const hideCheck = useCallback((checkID: string) => {
     if (!auditSettings) return
@@ -80,6 +83,12 @@ export function AuditView({ namespaces, onNavigateToResource }: AuditViewProps)
         description="Security, reliability, and efficiency best practices (NSA/CISA, CIS, Polaris, Kubescape), grouped into a remediation queue."
         actions={
           <>
+            <FreshnessControl
+              mode="auto"
+              dataUpdatedAt={dataUpdatedAt}
+              onRefresh={() => refetch()}
+              connectionState={connection.state}
+            />
             {ignoredCount > 0 && (
               <button onClick={() => setShowSettings(true)} className="text-xs text-theme-text-tertiary hover:text-theme-text-secondary transition-colors">{ignoredCount} {ignoredCount === 1 ? 'namespace' : 'namespaces'} hidden</button>
             )}

package/src/components/cost/CostView.tsx

@@ -2,17 +2,19 @@ import { useState, useEffect } from 'react'
 import { useOpenCostSummary, useOpenCostWorkloads, useOpenCostNodes } from '../../api/client'
 import type { OpenCostNamespaceCost, OpenCostWorkloadCost, OpenCostNodeCost } from '../../api/client'
 import { ArrowLeft, ChevronDown, ChevronRight, DollarSign, HelpCircle, Loader2, Server, X } from 'lucide-react'
-import { PaneLoader } from '@skyhook-io/k8s-ui'
+import { PaneLoader, FreshnessControl } from '@skyhook-io/k8s-ui'
 import { CostTrendChart } from './CostTrendChart'
 import { Tooltip } from '../ui/Tooltip'
+import { useConnection } from '../../context/ConnectionContext'
 
 interface CostViewProps {
   onBack: () => void
 }
 
 export function CostView({ onBack }: CostViewProps) {
-  const { data, isLoading } = useOpenCostSummary()
+  const { data, isLoading, dataUpdatedAt, refetch } = useOpenCostSummary()
   const { data: nodeData } = useOpenCostNodes()
+  const { connection } = useConnection()
   const [showHelp, setShowHelp] = useState(false)
 
   if (isLoading) {
@@ -90,6 +92,14 @@ export function CostView({ onBack }: CostViewProps) {
             </button>
           </div>
           <div className="flex items-center gap-4">
+            {/* Tracks the headline $/hr summary (the primary query); its load
+                time is the representative freshness signal for the view. */}
+            <FreshnessControl
+              mode="auto"
+              dataUpdatedAt={dataUpdatedAt}
+              onRefresh={() => refetch()}
+              connectionState={connection.state}
+            />
             {hasEfficiency && (
               <div className="flex flex-col items-end gap-0.5">
                 <div className="flex items-center gap-2 text-sm">

package/src/components/curl/ServiceCurlButton.tsx

@@ -0,0 +1,445 @@
+import { useState, useEffect, useLayoutEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { useMutation } from '@tanstack/react-query'
+import { Activity, Loader2, X, ChevronDown, Maximize2, Copy, Check } from 'lucide-react'
+import { clsx } from 'clsx'
+import { apiFetch } from '../../api/client'
+import { apiUrl } from '../../api/config'
+import { Tooltip } from '../ui/Tooltip'
+
+// A port is "curl-able" only if it plausibly speaks HTTP — probing a raw TCP
+// port (Postgres, Redis) with a GET returns noise, so we don't offer it there
+// (that's the local-client TCP path's job). Heuristic over name/appProtocol/number.
+const HTTP_PORT_NUMBERS = new Set([80, 443, 8080, 8443, 8000, 8081, 3000, 5000, 9090, 9091, 9093, 9100, 15000, 15090])
+const HTTP_NAME_RE = /(^|[-_])(http|https|web|ui|console|dashboard|metrics|api|admin)([-_]|$)/i
+
+// Common metrics port numbers — used to decide which quick-path chips make sense.
+const METRICS_PORT_NUMBERS = new Set([9090, 9091, 9093, 9100, 9153, 2112, 8888])
+
+function isMetricsPort(port: number, name?: string, appProtocol?: string): boolean {
+  if ((appProtocol || '').toLowerCase().includes('metric')) return true
+  if (name && /metric/i.test(name)) return true
+  return METRICS_PORT_NUMBERS.has(port)
+}
+
+// Default request path for a port. Only metrics ports get a non-root default —
+// /metrics is a near-deterministic convention there. We deliberately don't
+// pre-fill or suggest health paths (/healthz etc.): those are genuine guesses
+// (apps vary: /health, /actuator/health, /-/healthy …) and a suggestion that
+// 404s reads as the tool being wrong. The honest one-click-health feature is to
+// derive paths from the backing pod's liveness/readiness probes — a follow-up.
+export function defaultPathForPort(port: number, name?: string, appProtocol?: string): string {
+  return isMetricsPort(port, name, appProtocol) ? '/metrics' : '/'
+}
+
+export function isHttpishPort(port: number, name?: string, appProtocol?: string, protocol?: string): boolean {
+  // HTTP rides TCP — a UDP port is never a GET target (e.g. statsd "metrics-udp").
+  if ((protocol || '').toUpperCase() === 'UDP') return false
+  const proto = (appProtocol || '').toLowerCase()
+  if (proto === 'http' || proto === 'https' || proto === 'http2') return true
+  if (proto && proto !== 'tcp') {
+    // explicit non-HTTP appProtocol (grpc, redis, postgres, …) → not a GET target
+    return false
+  }
+  if (name && HTTP_NAME_RE.test(name)) return true
+  return HTTP_PORT_NUMBERS.has(port)
+}
+
+export function defaultScheme(port: number, name?: string, appProtocol?: string): 'http' | 'https' {
+  if ((appProtocol || '').toLowerCase() === 'https') return 'https'
+  if (port === 443 || port === 8443) return 'https'
+  if (name && /https/i.test(name)) return 'https'
+  return 'http'
+}
+
+interface CurlResult {
+  status: number
+  statusText: string
+  durationMs: number
+  headers: Record<string, string>
+  body: string
+  truncated: boolean
+  bodyBytes: number
+  error?: string
+}
+
+function statusTextTone(status: number): string {
+  if (status >= 200 && status < 300) return 'text-emerald-400'
+  if (status >= 300 && status < 400) return 'text-blue-400'
+  if (status >= 400 && status < 500) return 'text-amber-400'
+  return 'text-red-400'
+}
+
+function statusDotTone(status: number): string {
+  if (status >= 200 && status < 300) return 'bg-emerald-400'
+  if (status >= 300 && status < 400) return 'bg-blue-400'
+  if (status >= 400 && status < 500) return 'bg-amber-400'
+  return 'bg-red-400'
+}
+
+// Make the body readable per content type: pretty-print JSON, label everything
+// else (HTML / Prometheus / XML / …) so the operator knows what they're looking at.
+function formatBody(result: CurlResult): { text: string; label: string } {
+  const body = result.body
+  const ct = (result.headers['Content-Type'] || result.headers['content-type'] || '').toLowerCase()
+  const looksJson = ct.includes('json') || /^\s*[[{]/.test(body)
+  if (looksJson) {
+    let text = body
+    if (!result.truncated) {
+      try { text = JSON.stringify(JSON.parse(body), null, 2) } catch { /* leave raw */ }
+    }
+    return { text, label: 'JSON' }
+  }
+  if (ct.includes('html')) return { text: body, label: 'HTML' }
+  if (body.startsWith('# HELP') || body.startsWith('# TYPE') || ct.includes('openmetrics')) {
+    return { text: body, label: 'Prometheus' }
+  }
+  if (ct.includes('xml')) return { text: body, label: 'XML' }
+  const short = ct ? (ct.split(';')[0].split('/').pop() || 'text') : 'text'
+  return { text: body, label: short }
+}
+
+function CopyButton({ text, className }: { text: string; className?: string }) {
+  const [copied, setCopied] = useState(false)
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation()
+        navigator.clipboard?.writeText(text).then(() => {
+          setCopied(true)
+          setTimeout(() => setCopied(false), 1500)
+        }).catch(() => {})
+      }}
+      className={clsx('inline-flex items-center gap-1 text-xs text-theme-text-secondary hover:text-theme-text-primary', className)}
+    >
+      {copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
+      {copied ? 'Copied' : 'Copy'}
+    </button>
+  )
+}
+
+// Small toggle button rendered in a port row's action slot. The panel itself
+// renders inline within the port card (see CurlPanel), not as an overlay.
+export function CurlButton({ active, onClick }: { active: boolean; onClick: () => void }) {
+  return (
+    <Tooltip content="Curl this endpoint — GET from inside the cluster">
+      <button
+        onClick={(e) => { e.stopPropagation(); onClick() }}
+        aria-expanded={active}
+        className={clsx(
+          'inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs transition-colors',
+          active ? 'bg-accent-muted text-blue-400' : 'bg-theme-elevated hover:bg-accent-muted',
+        )}
+      >
+        Curl
+        {/* Disclosure caret: signals this expands an inline panel rather than firing a request. */}
+        <ChevronDown className={clsx('w-3 h-3 transition-transform', active && 'rotate-180')} />
+      </button>
+    </Tooltip>
+  )
+}
+
+function VerdictLine({
+  result,
+  showHeaders,
+  onToggleHeaders,
+}: {
+  result: CurlResult
+  showHeaders: boolean
+  onToggleHeaders: () => void
+}) {
+  return (
+    <div className="flex items-center gap-3 text-xs">
+      <span className={clsx('flex items-center gap-1.5 font-mono font-semibold', statusTextTone(result.status))}>
+        <span className={clsx('w-1.5 h-1.5 rounded-full', statusDotTone(result.status))} />
+        {result.status}{result.statusText ? ` ${result.statusText}` : ''}
+      </span>
+      <span className="text-theme-text-tertiary">{result.durationMs} ms</span>
+      <span className="text-theme-text-tertiary">{result.bodyBytes.toLocaleString()} bytes{result.truncated ? ' (truncated)' : ''}</span>
+      <button
+        type="button"
+        onClick={onToggleHeaders}
+        className="ml-auto flex items-center gap-1 text-theme-text-secondary hover:text-theme-text-primary"
+      >
+        Headers <ChevronDown className={clsx('w-3 h-3 transition-transform', showHeaders && 'rotate-180')} />
+      </button>
+    </div>
+  )
+}
+
+// Roomy response viewer. The narrow drawer can't show a 27 KB /metrics body
+// readably (wide lines wrap into mush), so the full body opens in a centered
+// dialog — wide, tall, monospace, no-wrap with its own scroll (decoupled from the
+// drawer, so there's no nested-scroll). Triggered on demand; the request + verdict
+// stay inline in the port card. Matches the kubectl copy-command dialog pattern.
+function CurlResponseDialog({
+  serviceName,
+  port,
+  scheme,
+  path,
+  result,
+  onClose,
+}: {
+  serviceName: string
+  port: number
+  scheme: string
+  path: string
+  result: CurlResult
+  onClose: () => void
+}) {
+  const [showHeaders, setShowHeaders] = useState(false)
+  const { text, label } = formatBody(result)
+  useEffect(() => {
+    // Capture + stopPropagation so Escape closes only this dialog, not the drawer
+    // behind it (its Escape shortcut listens in the bubble phase).
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') { e.stopPropagation(); onClose() } }
+    document.addEventListener('keydown', onKey, true)
+    return () => document.removeEventListener('keydown', onKey, true)
+  }, [onClose])
+  // Portal to <body>: the drawer is a transformed ancestor, which would otherwise
+  // trap this position:fixed dialog inside the drawer instead of centering it on
+  // the viewport.
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center" onClick={(e) => e.stopPropagation()}>
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div className="relative dialog w-full max-w-4xl mx-4 max-h-[85vh] flex flex-col outline-none">
+        <div className="flex items-center justify-between gap-3 p-4 border-b border-theme-border">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <Activity className="w-4 h-4 text-blue-400 shrink-0" />
+              <h3 className="text-sm font-semibold text-theme-text-primary truncate">Response</h3>
+            </div>
+            <div className="text-xs text-theme-text-tertiary font-mono mt-0.5 truncate">
+              GET {scheme}://{serviceName}:{port}{path}
+            </div>
+          </div>
+          <button onClick={onClose} aria-label="Close" className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded shrink-0">
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="px-4 py-2 border-b border-theme-border">
+          <VerdictLine result={result} showHeaders={showHeaders} onToggleHeaders={() => setShowHeaders((v) => !v)} />
+        </div>
+
+        <div className="grid transition-[grid-template-rows] duration-200 ease-out mx-4" style={{ gridTemplateRows: showHeaders ? '1fr' : '0fr' }}>
+          <div className="overflow-hidden">
+            <pre className="text-xs bg-theme-base mt-4 rounded p-3 overflow-auto max-h-48 text-theme-text-secondary font-mono whitespace-pre">
+              {Object.entries(result.headers).map(([k, v]) => `${k}: ${v}`).join('\n') || '(no headers)'}
+            </pre>
+          </div>
+        </div>
+
+        {result.error ? (
+          <div className="m-4 text-sm text-amber-400 bg-amber-500/10 border border-amber-500/30 rounded px-3 py-2">
+            {result.error}
+          </div>
+        ) : (
+          <div className="flex flex-col min-h-0 flex-1 m-4">
+            <div className="flex items-center justify-between mb-1.5">
+              <span className="badge-sm bg-theme-elevated text-theme-text-secondary border border-theme-border">{label}</span>
+              {result.body && <CopyButton text={text} />}
+            </div>
+            <pre className="flex-1 text-xs bg-theme-base rounded p-3 overflow-auto text-theme-text-primary font-mono whitespace-pre">
+              {text || '(empty response body)'}
+            </pre>
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+// Inline curl: request form + verdict + a short body peek, rendered in the
+// drawer flow (inside the port card). The full body opens in CurlResponseDialog
+// so a large response never bloats the drawer.
+export function CurlPanel({
+  namespace,
+  serviceName,
+  port,
+  initialScheme,
+  initialPath,
+  open,
+  onClose,
+}: {
+  namespace: string
+  serviceName: string
+  port: number
+  initialScheme: 'http' | 'https'
+  initialPath: string
+  // Host-controlled: false triggers the collapse animation before the host unmounts.
+  open: boolean
+  onClose: () => void
+}) {
+  const [scheme, setScheme] = useState<'http' | 'https'>(initialScheme)
+  // Stored WITHOUT the leading slash — the "/" is a fixed, non-deletable prefix
+  // glued to the input. Typed/pasted leading slashes are swallowed on change.
+  const [path, setPath] = useState(() => initialPath.replace(/^\/+/, ''))
+  const fullPath = '/' + path
+  const [showHeaders, setShowHeaders] = useState(false)
+  const [sheetOpen, setSheetOpen] = useState(false)
+  // What was actually sent — so the sheet header / re-renders reflect the response.
+  const [sent, setSent] = useState<{ scheme: 'http' | 'https'; path: string }>({ scheme: initialScheme, path: initialPath })
+  // Enter animation: mount collapsed, then expand next tick (radar's grid 0fr↔1fr).
+  // Combined with the host-controlled `open` prop this gives a symmetric reveal:
+  // expand on mount, collapse when the host sets open=false (before it unmounts).
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => { setMounted(true) }, [])
+
+  const curl = useMutation<CurlResult, Error, { scheme: 'http' | 'https'; path: string }>({
+    mutationFn: async (vars) => {
+      setSent(vars)
+      const res = await apiFetch(apiUrl('/curl/service'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ namespace, name: serviceName, port: String(port), scheme: vars.scheme, path: vars.path }),
+      })
+      const data = await res.json().catch(() => ({}))
+      if (!res.ok) throw new Error(data?.error || `Request failed (${res.status})`)
+      return data as CurlResult
+    },
+  })
+
+  const result = curl.data
+  const peek = result && !result.error ? formatBody(result) : null
+
+  // Only fade + offer "View full response" when the body actually overflows the
+  // peek box — a small body that fits has nothing more to show, and a fade over
+  // it reads as a rendering glitch.
+  const peekRef = useRef<HTMLPreElement>(null)
+  const [peekOverflows, setPeekOverflows] = useState(false)
+  useLayoutEffect(() => {
+    const el = peekRef.current
+    setPeekOverflows(!!el && el.scrollHeight > el.clientHeight + 1)
+  }, [peek?.text, open])
+
+  return (
+    <div className="grid transition-[grid-template-rows] duration-200 ease-out" style={{ gridTemplateRows: mounted && open ? '1fr' : '0fr' }}>
+      <div className="overflow-hidden">
+      <div className="mt-3 pt-3 border-t border-theme-border space-y-2" onClick={(e) => e.stopPropagation()}>
+      <div className="flex items-center justify-between">
+        <span className="flex items-center gap-1.5 text-xs font-medium text-theme-text-secondary">
+          <Activity className="w-3.5 h-3.5 text-blue-400" />
+          Curl — GET from inside the cluster
+        </span>
+        <button
+          onClick={onClose}
+          aria-label="Close"
+          className="p-0.5 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+        >
+          <X className="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      <form className="flex items-stretch gap-2" onSubmit={(e) => { e.preventDefault(); curl.mutate({ scheme, path: fullPath }) }}>
+        <select
+          value={scheme}
+          onChange={(e) => setScheme(e.target.value as 'http' | 'https')}
+          className="bg-theme-base border border-theme-border rounded px-2 py-1 text-xs text-theme-text-primary font-mono"
+          aria-label="Scheme"
+        >
+          <option value="http">http</option>
+          <option value="https">https</option>
+        </select>
+        <div className="flex-1 min-w-0 flex items-center bg-theme-base border border-theme-border rounded px-2 focus-within:border-blue-500">
+          <span className="text-xs text-theme-text-tertiary font-mono select-none pointer-events-none">/</span>
+          <input
+            type="text"
+            value={path}
+            onChange={(e) => setPath(e.target.value.replace(/^\/+/, ''))}
+            placeholder="healthz"
+            aria-label="Request path"
+            className="flex-1 min-w-0 bg-transparent border-0 outline-none pl-0.5 py-1 text-xs text-theme-text-primary font-mono"
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={curl.isPending}
+          className="shrink-0 px-3 py-1 btn-brand text-xs rounded-lg flex items-center gap-1.5 disabled:opacity-50"
+        >
+          {curl.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Activity className="w-3.5 h-3.5" />}
+          Send
+        </button>
+      </form>
+
+      {curl.isError && (
+        <div className="text-xs text-red-400 bg-red-500/10 border border-red-500/30 rounded px-2 py-1.5">
+          {(curl.error as Error).message}
+        </div>
+      )}
+
+      {/* Reveal the response with the same grid transition as the panel itself. */}
+      <div className="grid transition-[grid-template-rows] duration-200 ease-out" style={{ gridTemplateRows: result ? '1fr' : '0fr' }}>
+        <div className="overflow-hidden">
+      {result && (
+        <div className="space-y-2 pt-0.5">
+          <VerdictLine result={result} showHeaders={showHeaders} onToggleHeaders={() => setShowHeaders((v) => !v)} />
+
+          {result.error && (
+            <div className="text-xs text-amber-400 bg-amber-500/10 border border-amber-500/30 rounded px-2 py-1.5">
+              {result.error}
+            </div>
+          )}
+
+          <div className="grid transition-[grid-template-rows] duration-200 ease-out" style={{ gridTemplateRows: showHeaders ? '1fr' : '0fr' }}>
+            <div className="overflow-hidden">
+              <pre className="text-xs bg-theme-base rounded p-2 overflow-auto max-h-32 text-theme-text-secondary font-mono whitespace-pre">
+                {Object.entries(result.headers).map(([k, v]) => `${k}: ${v}`).join('\n') || '(no headers)'}
+              </pre>
+            </div>
+          </div>
+
+          {peek && (
+            <>
+              {result.body && (
+                <div className="flex items-center justify-between">
+                  <span className="badge-sm bg-theme-elevated text-theme-text-secondary border border-theme-border">{peek.label}</span>
+                  <CopyButton text={peek.text} />
+                </div>
+              )}
+              {/* Short peek — a bounded teaser, not a scroll surface (the full body
+                  has its own scrollable dialog). When the body overflows, a bottom
+                  fade signals "more below"; when it fits, no fade and no "view full"
+                  (there's nothing more to see). */}
+              <div className="relative">
+                <pre ref={peekRef} className="text-xs bg-theme-base rounded p-2 overflow-hidden max-h-24 text-theme-text-primary font-mono whitespace-pre-wrap break-words">
+                  {peek.text || '(empty response body)'}
+                </pre>
+                {result.body && peekOverflows && (
+                  <div className="pointer-events-none absolute inset-x-0 bottom-0 h-8 rounded-b bg-gradient-to-t from-theme-base to-transparent" />
+                )}
+              </div>
+              {result.body && peekOverflows && (
+                <button
+                  type="button"
+                  onClick={() => setSheetOpen(true)}
+                  className="flex items-center gap-1.5 text-xs text-blue-400 hover:text-blue-300"
+                >
+                  <Maximize2 className="w-3 h-3" />
+                  View full response
+                </button>
+              )}
+            </>
+          )}
+        </div>
+      )}
+        </div>
+      </div>
+
+      {sheetOpen && result && (
+        <CurlResponseDialog
+          serviceName={serviceName}
+          port={port}
+          scheme={sent.scheme}
+          path={sent.path}
+          result={result}
+          onClose={() => setSheetOpen(false)}
+        />
+      )}
+      </div>
+      </div>
+    </div>
+  )
+}

package/src/components/gitops/GitOpsView.tsx

@@ -8,6 +8,7 @@ import {
   GitOpsDetailLayout,
   GitOpsGraphFilterRail,
   GitOpsTableView as SharedGitOpsTableView,
+  FreshnessControl,
   GitOpsTreeGraph,
   RollbackDialog,
   SyncOptionsDialog,
@@ -61,6 +62,7 @@ import {
   useResource,
 } from '../../api/client'
 import { useAPIResources } from '../../api/apiResources'
+import { useConnection } from '../../context/ConnectionContext'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
 import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
 import { CodeViewer } from '../ui/CodeViewer'
@@ -80,6 +82,11 @@ const GITOPS_KINDS: APIResource[] = [
 
 const KIND_BY_NAME = new Map(GITOPS_KINDS.map((k) => [k.name, k]))
 
+// Rows are the table's primary content; their poll cadence is what the toolbar
+// freshness signal advertises ("Auto-refreshes every 2m"). Single source of
+// truth so the signal can't drift from the actual refetchInterval below.
+const GITOPS_ROWS_REFRESH_INTERVAL_MS = 120_000
+
 interface ResourceCountsResponse {
   counts: Record<string, number>
   forbidden?: string[]
@@ -102,6 +109,7 @@ export function GitOpsView({ namespaces, onOpenResource, onClearNamespaces }: Gi
 
 function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string[]; onClearNamespaces?: () => void }) {
   const navigate = useNavigate()
+  const { connection } = useConnection()
   const namespacesParam = namespaces.join(',')
   const { data: apiResources, isLoading: apiResourcesLoading } = useAPIResources()
 
@@ -191,7 +199,7 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
     },
     enabled: !apiResourcesLoading,
     staleTime: 30_000,
-    refetchInterval: 120_000,
+    refetchInterval: GITOPS_ROWS_REFRESH_INTERVAL_MS,
   })
 
   // Row mutations invalidate granular keys (['resource', …], ['gitops-tree', …])
@@ -201,11 +209,11 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
   // inviting a duplicate request. Radar serves reads from an informer cache that
   // lags the write by the watch-propagation delay, so refetch once now (covers
   // an already-current cache) and once shortly after to catch the propagated
-  // update; refetch() forces a fetch regardless of staleTime.
-  const refetchTable = () => {
-    rowsQuery.refetch()
-    countsQuery.refetch()
-  }
+  // update; refetch() forces a fetch regardless of staleTime. The toolbar's
+  // manual refresh reuses refetchTable so rows + counts stay in sync.
+  // Return the combined promise so the toolbar's refresh animation waits for the
+  // real fetches to settle before showing its success checkmark.
+  const refetchTable = () => Promise.all([rowsQuery.refetch(), countsQuery.refetch()])
   const refetchTableAfterMutation = () => {
     refetchTable()
     window.setTimeout(refetchTable, 1200)
@@ -280,7 +288,14 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
         error={(rowsQuery.error as Error | null) ?? null}
         counts={countsQuery.data?.counts ?? {}}
         countsUnavailable={countsQuery.data?.unavailable}
-        onRefresh={() => rowsQuery.refetch()}
+        freshnessSlot={
+          <FreshnessControl
+            mode="auto"
+            dataUpdatedAt={rowsQuery.dataUpdatedAt}
+            onRefresh={refetchTable}
+            connectionState={connection.state}
+          />
+        }
         onRowClick={(row) => {
           const ns = row.namespace || '_'
           const params = new URLSearchParams()
@@ -446,15 +461,6 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
   const isFlux = tool === 'flux'
   const isArgoApp = kind === 'applications'
 
-  // Set the browser tab title so users with multiple resource tabs open can
-  // tell which is which without focusing each tab. Restore on unmount so a
-  // stray "Radar — argocd/foo" doesn't outlive its page.
-  useEffect(() => {
-    const previous = document.title
-    document.title = `${name} — Radar`
-    return () => { document.title = previous }
-  }, [name])
-
   // Detail-page shortcuts. Skip when a modal is already open so a stray "s"
   // in an input field doesn't pop another sync dialog.
   const shortcutsEnabled = !syncDialogOpen && !rollbackTarget
@@ -645,7 +651,7 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
           search: params.toString(),
         })
       } : undefined}
-      manageDocumentTitle={false /* OSS handles it via the in-effect-above */}
+      manageDocumentTitle={false /* title handled centrally in App's radarPageTitle */}
       renderTabBarCounts={({ tab }) => (
         tab === 'topology' && tree ? <TopologyCounts tree={tree} /> : null
       )}