From b799d558352576c943260490389d1bb3e55c0b1e Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 23 Apr 2026 19:15:01 +0200
Subject: [PATCH] fix(ui): sidebar catalog counts follow global time range
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

useCatalog now accepts optional from/to query params and LayoutShell
threads the TopBar time range through, so the per-app exchange counts
shown in the sidebar align with the Exchanges tab window. Previously
the sidebar relied on the backend's 24h default — 73.5k in the sidebar
coexisted with 0 hits in a 1h Exchanges search, confusing users.

Other useCatalog callers stay on the default (no time range), matching
their existing behavior.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ui/src/api/queries/catalog.ts     | 6 ++++--
 ui/src/components/LayoutShell.tsx | 4 +++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/ui/src/api/queries/catalog.ts b/ui/src/api/queries/catalog.ts
index d29a3c91..ef895533 100644
--- a/ui/src/api/queries/catalog.ts
+++ b/ui/src/api/queries/catalog.ts
@@ -38,14 +38,16 @@ export interface CatalogApp {
   deployment: DeploymentSummary | null;
 }
 
-export function useCatalog(environment?: string) {
+export function useCatalog(environment?: string, from?: string, to?: string) {
   const refetchInterval = useRefreshInterval(15_000);
   return useQuery({
-    queryKey: ['catalog', environment],
+    queryKey: ['catalog', environment, from, to],
     queryFn: async () => {
       const token = useAuthStore.getState().accessToken;
       const params = new URLSearchParams();
       if (environment) params.set('environment', environment);
+      if (from) params.set('from', from);
+      if (to) params.set('to', to);
       const qs = params.toString();
       const res = await fetch(`${config.apiBaseUrl}/catalog${qs ? `?${qs}` : ''}`, {
         headers: {
diff --git a/ui/src/components/LayoutShell.tsx b/ui/src/components/LayoutShell.tsx
index aa06515e..bf767dac 100644
--- a/ui/src/components/LayoutShell.tsx
+++ b/ui/src/components/LayoutShell.tsx
@@ -361,7 +361,9 @@ function LayoutContent() {
   const selectedEnv = useEnvironmentStore((s) => s.environment);
   const setSelectedEnvRaw = useEnvironmentStore((s) => s.setEnvironment);
 
-  const { data: catalog } = useCatalog(selectedEnv);
+  const catalogFrom = timeRange.start.toISOString();
+  const catalogTo = timeRange.end.toISOString();
+  const { data: catalog } = useCatalog(selectedEnv, catalogFrom, catalogTo);
   // Env is always required now (path-based endpoint). For cross-env "all agents"
   // we'd need a separate flat endpoint; sidebar uses env-filtered list directly.
   const { data: agents } = useAgents();  // env pulled from store internally