fix(web): retry failed recent instances, keep usage selections across scope, reload on project switch

- Profile cards show an error with Retry when recent instances fail to load, and retry on reopen
- Org and project usage pages share range, measure, and breakdown for the session
- Project usage remounts per project so it shows a loading state instead of stale totals

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: cmsparks

frontend/apps/web/src/components/agents/AgentProfilesSection.tsx

@@ -39,6 +39,7 @@ import { agentStatusLabel } from '@/lib/agent-status'
 import { formatCount, formatTimeAgo } from '@/lib/format'
 import { isInsufficientCreditsError } from '@/lib/insufficient-credits'
 import { canManageOrg } from '@/lib/permissions'
+import { errorMessage } from '@/lib/submit-status'
 import { useActiveOrg } from '@/lib/use-active-org'
 import { useWebConfig } from '@/lib/web-config'
 
@@ -301,6 +302,24 @@ function ProfileCard({
     open: expanded,
     content: instances.isPending ? (
       <p className="text-muted-foreground border-t px-4 py-3 text-xs">Loading…</p>
+    ) : instances.isError ? (
+      <div className="flex items-center justify-between gap-3 border-t px-4 py-2">
+        <p className="text-destructive text-xs" role="alert">
+          {errorMessage(instances.error, 'Could not load recent instances.')}
+        </p>
+        <Button
+          type="button"
+          size="sm"
+          variant="ghost"
+          className="h-7 px-2"
+          loading={instances.isFetching}
+          onClick={() => {
+            void instances.refetch()
+          }}
+        >
+          Retry
+        </Button>
+      </div>
     ) : (
       <RecentAgentList
         projectId={projectId}
@@ -367,7 +386,9 @@ function ProfileCard({
               }}
               onToggle={() => {
                 setWantsRecent(true)
-                setExpanded((open) => !open)
+                // Reopening after a failed load tries again.
+                if (!expanded && instances.isError) void instances.refetch()
+                setExpanded(!expanded)
               }}
             />
           ) : (

frontend/apps/web/src/components/usage/UsageTimeseriesPanel.tsx

@@ -22,6 +22,11 @@ export type UsageTimeseriesScope = Omit<
   'timezone' | 'metric' | 'groupBy' | 'groupLimit'
 >
 
+export interface UsageChartSelection {
+  measure: UsageMeasure
+  breakdown: UsageBreakdown
+}
+
 const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
 
 const breakdowns: { value: UsageBreakdown; label: string }[] = [
@@ -40,15 +45,27 @@ export function UsageTimeseriesPanel({
   filters,
   summary,
   showControls = true,
+  selection,
+  onSelectionChange,
 }: {
   orgId: string
   filters: UsageTimeseriesScope
   summary?: (timeseries: UsageTimeseries) => ReactNode
   /** Measure and breakdown toggles; without them the chart shows tokens by model. */
   showControls?: boolean
+  /** Controls the measure and breakdown from outside, so they outlive this panel. */
+  selection?: UsageChartSelection
+  onSelectionChange?: (patch: Partial<UsageChartSelection>) => void
 }) {
-  const [breakdown, setBreakdown] = useState<UsageBreakdown>('model')
-  const [measure, setMeasure] = useState<UsageMeasure>('tokens')
+  const [localSelection, setLocalSelection] = useState<UsageChartSelection>({
+    measure: 'tokens',
+    breakdown: 'model',
+  })
+  const { measure, breakdown } = selection ?? localSelection
+  function select(patch: Partial<UsageChartSelection>) {
+    if (onSelectionChange) onSelectionChange(patch)
+    else setLocalSelection((current) => ({ ...current, ...patch }))
+  }
   const query = useUsageTimeseries(orgId, {
     ...filters,
     timezone: browserTimezone,
@@ -86,13 +103,17 @@ export function UsageTimeseriesPanel({
               label="Usage measure"
               value={measure}
               options={measures}
-              onChange={setMeasure}
+              onChange={(next) => {
+                select({ measure: next })
+              }}
             />
             <UsageToggle
               label="Break usage down by"
               value={breakdown}
               options={breakdowns}
-              onChange={setBreakdown}
+              onChange={(next) => {
+                select({ breakdown: next })
+              }}
             />
           </div>
         )}

frontend/apps/web/src/components/usage/usage-view-state.ts

@@ -0,0 +1,37 @@
+import { useSyncExternalStore } from 'react'
+
+import type { UsageBreakdown, UsageMeasure } from '@/components/usage/usage-chart-data'
+import { defaultUsageRange, type UsageDateRange } from '@/components/usage/usage-date-range'
+
+export interface UsageViewState {
+  range: UsageDateRange
+  measure: UsageMeasure
+  breakdown: UsageBreakdown
+}
+
+/**
+ * The org and project usage pages share one selection for the session, so switching
+ * between all projects and a single project keeps the range, measure, and breakdown.
+ */
+let state: UsageViewState = { range: defaultUsageRange(), measure: 'tokens', breakdown: 'model' }
+const listeners = new Set<() => void>()
+
+export function useUsageViewState() {
+  return useSyncExternalStore(subscribe, getSnapshot)
+}
+
+export function updateUsageViewState(patch: Partial<UsageViewState>) {
+  state = { ...state, ...patch }
+  for (const listener of listeners) listener()
+}
+
+function subscribe(onStoreChange: () => void) {
+  listeners.add(onStoreChange)
+  return () => {
+    listeners.delete(onStoreChange)
+  }
+}
+
+function getSnapshot() {
+  return state
+}

frontend/apps/web/src/routes/OrganizationUsagePage.tsx

@@ -1,21 +1,18 @@
 import { useOrgUsage } from '@omnara/react'
 import { Link } from '@tanstack/react-router'
-import { useState } from 'react'
 
 import { Button } from '@/components/ui/button'
-import {
-  defaultUsageDays,
-  defaultUsageRange,
-  isDefaultUsageRange,
-} from '@/components/usage/usage-date-range'
+import { defaultUsageDays, isDefaultUsageRange } from '@/components/usage/usage-date-range'
+import { updateUsageViewState, useUsageViewState } from '@/components/usage/usage-view-state'
 import { UsageDateRangeMenu } from '@/components/usage/UsageDateRangeMenu'
 import { UsageReportView } from '@/components/usage/UsageReport'
 import { UsageTimeseriesPanel } from '@/components/usage/UsageTimeseriesPanel'
 import { useActiveOrg } from '@/lib/use-active-org'
 
 export function OrganizationUsagePage() {
   const { activeOrg } = useActiveOrg()
-  const [range, setRange] = useState(defaultUsageRange)
+  const view = useUsageViewState()
+  const range = view.range
   const query = useOrgUsage(activeOrg.id, range.window)
   const filtered = !isDefaultUsageRange(range)
 
@@ -24,14 +21,21 @@ export function OrganizationUsagePage() {
       <section className="flex flex-col gap-4">
         <div className="flex flex-wrap items-center justify-between gap-3">
           <h1 className="type-title">Usage</h1>
-          <UsageDateRangeMenu value={range} onChange={setRange} />
+          <UsageDateRangeMenu
+            value={range}
+            onChange={(next) => {
+              updateUsageViewState({ range: next })
+            }}
+          />
         </div>
         <UsageReportView
           query={query}
           chart={
             <UsageTimeseriesPanel
               orgId={activeOrg.id}
               filters={{ ...range.window, interval: range.interval }}
+              selection={view}
+              onSelectionChange={updateUsageViewState}
             />
           }
           emptyMessage={

frontend/apps/web/src/routes/ProjectUsagePage.tsx

@@ -1,35 +1,40 @@
 import { useProjectUsage } from '@omnara/react'
 import { Link } from '@tanstack/react-router'
-import { useState } from 'react'
 
 import { ProjectPageFrame } from '@/components/projects/ProjectPageFrame'
 import { Button } from '@/components/ui/button'
-import {
-  defaultUsageDays,
-  defaultUsageRange,
-  isDefaultUsageRange,
-} from '@/components/usage/usage-date-range'
+import { defaultUsageDays, isDefaultUsageRange } from '@/components/usage/usage-date-range'
+import { updateUsageViewState, useUsageViewState } from '@/components/usage/usage-view-state'
 import { UsageDateRangeMenu } from '@/components/usage/UsageDateRangeMenu'
 import { UsageReportView } from '@/components/usage/UsageReport'
 import { UsageTimeseriesPanel } from '@/components/usage/UsageTimeseriesPanel'
 
 export function ProjectUsagePage() {
   return (
     <ProjectPageFrame>
-      {({ activeOrg, projectId }) => <ProjectUsage orgId={activeOrg.id} projectId={projectId} />}
+      {({ activeOrg, projectId }) => (
+        // Keyed so a project switch shows a loading state, not the last project's usage.
+        <ProjectUsage key={projectId} orgId={activeOrg.id} projectId={projectId} />
+      )}
     </ProjectPageFrame>
   )
 }
 
 function ProjectUsage({ orgId, projectId }: { orgId: string; projectId: string }) {
-  const [range, setRange] = useState(defaultUsageRange)
+  const view = useUsageViewState()
+  const range = view.range
   const query = useProjectUsage(orgId, projectId, range.window)
   const filtered = !isDefaultUsageRange(range)
   return (
     <section className="flex flex-col gap-4">
       <div className="flex flex-wrap items-center justify-between gap-3">
         <h1 className="type-title">Usage</h1>
-        <UsageDateRangeMenu value={range} onChange={setRange} />
+        <UsageDateRangeMenu
+          value={range}
+          onChange={(next) => {
+            updateUsageViewState({ range: next })
+          }}
+        />
       </div>
       <UsageReportView
         query={query}
@@ -41,6 +46,8 @@ function ProjectUsage({ orgId, projectId }: { orgId: string; projectId: string }
               interval: range.interval,
               projectIDs: [projectId],
             }}
+            selection={view}
+            onSelectionChange={updateUsageViewState}
           />
         }
         emptyMessage={