@skyhook-io/radar-app 1.8.3 → 1.8.6

package/src/components/traffic/TrafficView.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react'
-import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { useTrafficSources, useTrafficFlows, useTrafficConnect, useSetTrafficSource } from '../../api/traffic'
 import { useClusterInfo } from '../../api/client'
 import type { TrafficWizardState, AggregatedFlow } from '../../types'
@@ -7,11 +6,12 @@ import { TrafficWizard } from './TrafficWizard'
 import { TrafficGraph, type TrafficGraphSelection } from './TrafficGraph'
 import { TrafficFilterSidebar } from './TrafficFilterSidebar'
 import { TrafficFlowListProvider } from './TrafficFlowListContext'
-import { Loader2, RefreshCw, Filter, Plug, ChevronDown, List, Activity, AlertTriangle } from 'lucide-react'
+import { Loader2, Filter, Plug, ChevronDown, List, Activity, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useQueryClient } from '@tanstack/react-query'
 import { useDock } from '../dock'
-import { EmptyState, PaneLoader } from '@skyhook-io/k8s-ui'
+import { EmptyState, PaneLoader, FreshnessControl } from '@skyhook-io/k8s-ui'
+import { useConnection } from '../../context/ConnectionContext'
 import { Tooltip } from '../ui/Tooltip'
 
 // Addon types for filtering
@@ -339,6 +339,7 @@ interface TrafficViewProps {
 }
 
 export function TrafficView({ namespaces }: TrafficViewProps) {
+  const { connection } = useConnection()
   const [wizardState, setWizardState] = useState<TrafficWizardState>('detecting')
   const [timeRange, setTimeRange] = useState<string>('5m')
   const [hideSystem, setHideSystem] = useState(true)
@@ -421,8 +422,8 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
 
   const {
     data: flowsData,
-    isLoading: flowsLoading,
     isFetching: flowsFetching,
+    dataUpdatedAt: flowsUpdatedAt,
     refetch: refetchFlowsRaw,
   } = useTrafficFlows({
     namespaces,
@@ -430,7 +431,6 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
     // Only fetch flows when connected (not connecting and no connection error)
     enabled: wizardState === 'ready' && !isConnecting && !connectionError,
   })
-  const [refetchFlows, isRefreshAnimating] = useRefreshAnimation(refetchFlowsRaw)
 
   // Auto-retry when flows return with warning but no data (e.g., port-forward not ready yet)
   useEffect(() => {
@@ -1125,12 +1125,19 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
                     </button>
                     </Tooltip>
                   )}
-                  <div className="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-theme-surface/90 backdrop-blur border border-theme-border text-[10px] text-theme-text-tertiary">
+                  <div className="flex items-center px-2 py-1 rounded-lg bg-theme-surface/90 backdrop-blur border border-theme-border text-[10px] text-theme-text-tertiary tabular-nums">
                     {flowStats.shown}/{flowStats.total}
-                    <button onClick={refetchFlows} disabled={flowsLoading || isRefreshAnimating}
-                      className={clsx('p-0.5 rounded hover:text-theme-text-primary transition-colors', (flowsLoading || isRefreshAnimating) && 'opacity-50')}>
-                      {flowsLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : <RefreshCw className={clsx('h-3 w-3', isRefreshAnimating && 'animate-spin')} />}
-                    </button>
+                  </div>
+                  {/* Flows are a REST snapshot (no poll, no stream), so this is
+                      an honest "Updated N ago" + manual refresh — not "live". */}
+                  <div className="flex items-center rounded-lg bg-theme-surface/90 backdrop-blur border border-theme-border px-1.5 py-0.5">
+                    <FreshnessControl
+                      mode="snapshot"
+                      dataUpdatedAt={flowsUpdatedAt}
+                      isFetching={flowsFetching}
+                      onRefresh={() => refetchFlowsRaw()}
+                      connectionState={connection.state}
+                    />
                   </div>
                 </div>
               </>

package/src/components/ui/Markdown.tsx

@@ -39,10 +39,10 @@ export function Markdown({ children, className }: MarkdownProps) {
           </a>
         ),
         ul: ({ children }) => (
-          <ul className="list-disc list-inside my-2 space-y-1 text-theme-text-secondary">{children}</ul>
+          <ul className="list-disc list-outside pl-4 my-2 space-y-1 text-theme-text-secondary">{children}</ul>
         ),
         ol: ({ children }) => (
-          <ol className="list-decimal list-inside my-2 space-y-1 text-theme-text-secondary">{children}</ol>
+          <ol className="list-decimal list-outside pl-4 my-2 space-y-1 text-theme-text-secondary">{children}</ol>
         ),
         li: ({ children }) => (
           <li className="leading-relaxed">{children}</li>

package/src/components/ui/Omnibar.tsx

@@ -414,7 +414,7 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
   return (
     <div
       ref={containerRef}
-      className={clsx('relative w-full', hero ? 'max-w-3xl' : 'max-w-xl', open && hero && 'z-[16]')}
+      className={clsx('relative w-full', hero ? 'max-w-3xl' : 'max-w-lg', open && hero && 'z-[16]')}
       // Open on click even when the field is already focused — onFocus alone
       // never fires again, so an autofocused hero (Home) wouldn't reveal the
       // launcher on a click.

package/src/components/workload/WorkloadView.tsx

@@ -161,8 +161,12 @@ interface WorkloadViewProps {
   onNavigateToResource?: NavigateToResource
   onCollapseToDrawer?: () => void
   expanded?: boolean
+  /** false on the outgoing layer during an expand/collapse crossfade (default true) */
+  active?: boolean
   onClose?: () => void
-  onExpand?: () => void
+  onExpand?: (opts?: { yaml?: boolean }) => void
+  onExpandIntent?: () => void
+  onCancelExpandIntent?: () => void
   initialTab?: 'detail' | 'yaml'
   group?: string
 }

package/src/filter/FilterLocationBridge.tsx

@@ -0,0 +1,30 @@
+import { useCallback, useMemo, useRef, type ReactNode } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { FilterLocationProvider, type FilterLocation } from '@skyhook-io/k8s-ui';
+
+// Adapts OSS Radar's react-router search params to the app-agnostic
+// FilterLocation seam that @skyhook-io/k8s-ui's useFilterState reads. Mounted
+// once inside the router; every list view's shared filter state flows through
+// it, keeping the URL the single source of truth. (Radar Hub provides its own
+// bridge over its router — k8s-ui itself never depends on react-router.)
+export function FilterLocationBridge({ children }: { children: ReactNode }) {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // React Router's functional updater is NOT state-queued: two updates in one
+  // tick can both read the same params and clobber. Advance a ref synchronously
+  // so successive filter changes (e.g. toggling two facets fast) compose.
+  const latest = useRef(searchParams);
+  latest.current = searchParams;
+
+  const update = useCallback<FilterLocation['update']>(
+    (updater, opts) => {
+      const next = updater(new URLSearchParams(latest.current));
+      latest.current = next;
+      setSearchParams(next, opts);
+    },
+    [setSearchParams],
+  );
+
+  const value = useMemo<FilterLocation>(() => ({ searchParams, update }), [searchParams, update]);
+  return <FilterLocationProvider value={value}>{children}</FilterLocationProvider>;
+}

package/src/hooks/useKeyboardShortcuts.tsx

@@ -3,5 +3,6 @@ export {
   useRegisterShortcut,
   useRegisterShortcuts,
   useActiveShortcuts,
+  useSuppressBaseShortcuts,
 } from '@skyhook-io/k8s-ui'
 export type { KeyboardShortcut, ShortcutCategory } from '@skyhook-io/k8s-ui'

package/src/index.ts

@@ -23,6 +23,21 @@ export { ShortcutHelpOverlay } from './components/ui/ShortcutHelpOverlay';
 export { ClusterSwitcher } from '@skyhook-io/k8s-ui';
 export type { ClusterSwitcherProps, ClusterSwitcherItem } from '@skyhook-io/k8s-ui';
 
+// Shared namespace-scope picker primitive — re-exported so embedders (Radar
+// Hub) can render a namespace filter visually identical to OSS Radar's, driving
+// their own per-cluster scope (Hub via ?namespaces= on the embedded RadarApp).
+export { NamespacePicker } from '@skyhook-io/k8s-ui';
+export type {
+  NamespacePickerProps,
+  NamespacePickerHandle,
+  NamespaceScopeView,
+} from '@skyhook-io/k8s-ui';
+
+// Shared bordered shell that groups the cluster + namespace segments into one
+// pill — so Radar Hub's cluster top bar matches OSS Radar's header exactly.
+export { ScopePill } from '@skyhook-io/k8s-ui';
+export type { ScopePillProps } from '@skyhook-io/k8s-ui';
+
 // Deep-link builders — so consumers (Radar Hub) construct deep links into a
 // cluster view without hand-rolling Radar's internal URL format, which drifts
 // silently when Radar re-routes. `resourcePath` opens the detail drawer for any