refactor(usage): inline the explore section

UsageExplorer rendered no DOM of its own and forwarded four of its
seven props straight to UsageOverTime. It was added to stop the page
and the stories spelling out the same ordering twice, which was worth
less than it looked: the stories never passed its loading state, and
they already recompute every derived value the page does.

The scoped loading branch moves into the page. It is still needed, and
is not the page loader: only the filtered half reloads when the period
or project changes, so the plan meter above it stays put.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: talissoncosta

frontend/documentation/components/UsageDashboard.stories.tsx

@@ -6,8 +6,8 @@ import SectionHeading from 'components/pages/usage/components/SectionHeading'
 import UsageBreakdown, {
   useUsageBreakdown,
 } from 'components/pages/usage/components/UsageBreakdown'
-import UsageExplorer from 'components/pages/usage/components/UsageExplorer'
 import UsageMeter from 'components/pages/usage/components/UsageMeter'
+import UsageOverTime from 'components/pages/usage/components/UsageOverTime'
 import { overLimitNote, overLimitOf } from 'components/pages/usage/overLimit'
 import {
   allowanceWindow,
@@ -145,16 +145,10 @@ const UsagePage: FC<HarnessProps> = ({
         note={exceeded ? overLimitNote(exceeded) : contribution}
       />
 
-      <UsageExplorer
-        data={scoped}
-        limit={
-          showsPlanCeiling(billingPeriod, filtered ? 1 : undefined)
-            ? limit
-            : undefined
-        }
-        isBillingPeriod={isBillingPeriodSelected(billingPeriod)}
-        periodLabel={periodLabel(periods, billingPeriod)}
-        filters={
+      <SectionHeading
+        title='Explore usage'
+        hint='Narrow the chart and the breakdown by period or project.'
+        action={
           <Row className='gap-2'>
             <div className='usage-filters__field'>
               <Select
@@ -178,13 +172,23 @@ const UsagePage: FC<HarnessProps> = ({
             </div>
           </Row>
         }
-        breakdown={
-          <UsageBreakdown
-            {...breakdown}
-            onChangeDimension={setDimension}
-            scope={scope}
-          />
+      />
+
+      <UsageOverTime
+        data={scoped}
+        limit={
+          showsPlanCeiling(billingPeriod, filtered ? 1 : undefined)
+            ? limit
+            : undefined
         }
+        isBillingPeriod={isBillingPeriodSelected(billingPeriod)}
+        periodLabel={periodLabel(periods, billingPeriod)}
+      />
+
+      <UsageBreakdown
+        {...breakdown}
+        onChangeDimension={setDimension}
+        scope={scope}
       />
     </UsagePageLayout>
   )

frontend/web/components/pages/usage/UsageDashboardPage.tsx

@@ -6,9 +6,9 @@ import { useGetSubscriptionMetadataQuery } from 'common/services/useSubscription
 import OverLimitBanner from './components/OverLimitBanner'
 import SectionHeading from './components/SectionHeading'
 import UsageBreakdown, { useUsageBreakdown } from './components/UsageBreakdown'
-import UsageExplorer from './components/UsageExplorer'
 import UsageFilters from './components/UsageFilters'
 import UsageMeter from './components/UsageMeter'
+import UsageOverTime from './components/UsageOverTime'
 import UsagePageLayout from './components/UsagePageLayout'
 import { useUsageData } from './useUsageData'
 import { overLimitNote, overLimitOf } from './overLimit'
@@ -128,15 +128,10 @@ const UsageDashboardPage: FC<UsageDashboardPageProps> = ({
 
       <UsageMeter total={allowanceTotal} limit={limit} note={meterNote} />
 
-      <UsageExplorer
-        data={usage.scoped}
-        limit={
-          showsPlanCeiling(billingPeriod, selectedProjectId) ? limit : undefined
-        }
-        isBillingPeriod={isBillingPeriodSelected(billingPeriod)}
-        periodLabel={periodLabel(periods, billingPeriod)}
-        isLoading={usage.isLoadingScoped}
-        filters={
+      <SectionHeading
+        title='Explore usage'
+        hint='Narrow the chart and the breakdown by period or project.'
+        action={
           <UsageFilters
             organisationId={organisationId}
             periods={periods}
@@ -149,14 +144,33 @@ const UsageDashboardPage: FC<UsageDashboardPageProps> = ({
             }}
           />
         }
-        breakdown={
+      />
+
+      {/* Only the filtered half reloads, so the meter above stays put. */}
+      {usage.isLoadingScoped ? (
+        <div className='text-center py-5'>
+          <Loader />
+        </div>
+      ) : (
+        <>
+          <UsageOverTime
+            data={usage.scoped}
+            limit={
+              showsPlanCeiling(billingPeriod, selectedProjectId)
+                ? limit
+                : undefined
+            }
+            isBillingPeriod={isBillingPeriodSelected(billingPeriod)}
+            periodLabel={periodLabel(periods, billingPeriod)}
+          />
+
           <UsageBreakdown
             {...breakdown}
             onChangeDimension={setDimension}
             scope={scope}
           />
-        }
-      />
+        </>
+      )}
     </UsagePageLayout>
   )
 }