From 39a5f69bcb919f5e613d13585ddd540405b1b23f Mon Sep 17 00:00:00 2001
From: lzt404 <2596933790@qq.com>
Date: Tue, 6 Oct 2026 14:21:22 +0800
Subject: [PATCH] fix(usage): soften filter focus and keep views while
 reloading

Remove the green focus halo from usage filters and update the current view in place instead of rebuilding it on every filter change.
---
 src/pages/UsageRecordsPage.tsx | 50 +++++++---------------------------
 src/styles/ui-refinements.css  |  9 ++++--
 2 files changed, 17 insertions(+), 42 deletions(-)

diff --git a/src/pages/UsageRecordsPage.tsx b/src/pages/UsageRecordsPage.tsx
index 0abf5a1..8fd7723 100644
--- a/src/pages/UsageRecordsPage.tsx
+++ b/src/pages/UsageRecordsPage.tsx
@@ -271,7 +271,6 @@ export function UsageRecordsPage() {
   const [pricing, setPricing] = useState<UsagePricing | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
-  const [loadedScopeKey, setLoadedScopeKey] = useState('');
   const loadedFilterScopeKeyRef = useRef('');
   const requestIdRef = useRef(0);
   const schedulerRef = useRef<ReturnType<typeof createRefreshScheduler> | null>(null);
@@ -328,32 +327,6 @@ export function UsageRecordsPage() {
     pageSize: 1,
   }), [customEnd, customStart, range]);
 
-  const scopeKey = useMemo(() => usageViewScopeKey({
-    tab: activeTab,
-    range,
-    customStart,
-    customEnd,
-    model,
-    provider,
-    source,
-    apiKeyHash,
-    result,
-    page,
-    pageSize,
-  }), [
-    activeTab,
-    apiKeyHash,
-    customEnd,
-    customStart,
-    model,
-    page,
-    pageSize,
-    provider,
-    range,
-    result,
-    source,
-  ]);
-
   const executeLoadData = useCallback(
     async (quiet = false) => {
       const requestId = ++requestIdRef.current;
@@ -419,7 +392,6 @@ export function UsageRecordsPage() {
           setStatus(nextStatus);
           if (nextOptions) setOptionsAnalysis(nextOptions);
         }
-        setLoadedScopeKey(scopeKey);
         if (filtersChanged) loadedFilterScopeKeyRef.current = filterScopeKey;
         setError('');
       } catch (requestError) {
@@ -428,7 +400,7 @@ export function UsageRecordsPage() {
         if (requestId === requestIdRef.current) setLoading(false);
       }
     },
-    [activeTab, buildQueries, filterScopeKey, page, pageSize, model, provider, source, apiKeyHash, result, scopeKey]
+    [activeTab, buildQueries, filterScopeKey, page, pageSize, model, provider, source, apiKeyHash, result]
   );
 
   const loadData = useCallback(
@@ -484,16 +456,14 @@ export function UsageRecordsPage() {
   };
 
   const collectorTone = status?.state === 'error' ? 'error' : status?.state === 'collecting' ? 'success' : '';
-  const hasCurrentSnapshot = loadedScopeKey === scopeKey;
   const showInitialLoading =
     activeTab !== 'data-management' &&
     !error &&
-    (!hasCurrentSnapshot ||
-      (loading &&
-        ((activeTab === 'overview' && !overview) ||
-          (activeTab === 'analysis' && !overview) ||
-          (activeTab === 'events' && !events) ||
-          (activeTab === 'pricing' && !pricing))));
+    loading &&
+    ((activeTab === 'overview' && !overview) ||
+      (activeTab === 'analysis' && !overview && !analysis) ||
+      (activeTab === 'events' && !events) ||
+      (activeTab === 'pricing' && !pricing));
 
   const handleTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>, tab: UsageTab) => {
     handleHorizontalTabKey(
@@ -716,12 +686,12 @@ export function UsageRecordsPage() {
         </div>
       ) : null}
 
-      {hasCurrentSnapshot && activeTab === 'overview' && overview ? <OverviewView overview={overview} range={overviewRange} /> : null}
-      {hasCurrentSnapshot && activeTab === 'analysis' ? <UsageAnalysisView analysis={analysis} overview={overview} range={overviewRange} /> : null}
+      {activeTab === 'overview' && overview ? <OverviewView overview={overview} range={overviewRange} /> : null}
+      {activeTab === 'analysis' && (analysis || overview) ? <UsageAnalysisView analysis={analysis} overview={overview} range={overviewRange} /> : null}
       {activeTab === 'events' ? (
         <EventsView
           events={events ?? { items: [], total: 0, page, pageSize, totalPages: 1 }}
-          loading={!events || (loading && !hasCurrentSnapshot)}
+          loading={!events}
           pageSize={pageSize}
           query={buildQueries().query}
           onPage={setPage}
@@ -731,7 +701,7 @@ export function UsageRecordsPage() {
           }}
         />
       ) : null}
-      {hasCurrentSnapshot && activeTab === 'pricing' && pricing ? (
+      {activeTab === 'pricing' && pricing ? (
         <PricingView pricing={pricing} query={buildQueries().query} onChanged={() => loadData(true)} />
       ) : null}
       {activeTab === 'data-management' ? <UsageDataManagementView /> : null}
diff --git a/src/styles/ui-refinements.css b/src/styles/ui-refinements.css
index fd335e4..084e8fb 100644
--- a/src/styles/ui-refinements.css
+++ b/src/styles/ui-refinements.css
@@ -634,8 +634,13 @@ body, html, #root {
 }
 
 .usage-records-page .usage-filter-item:focus-within {
-  border-color: var(--ui-accent);
-  box-shadow: 0 0 0 3px var(--ui-focus-ring);
+  border-color: var(--border-hover);
+  box-shadow: none;
+}
+
+.usage-records-page .usage-filter-item .select-menu-trigger:focus,
+.usage-records-page .usage-filter-item .select-menu-trigger:focus-visible {
+  outline: none;
 }
 
 .usage-records-page .usage-filter-item select:hover,