Convert the agent detail page to the shared useApi hook and add a typed total fetch

[mikewheeleer]

Refactor the agent detail fetches onto useApi with proper cancellation

Description

src/app/agents/[agent]/page.tsx fires two apiGet calls inside a useEffect with no cancellation token, so navigating between agents quickly can let a slow earlier response set state for the wrong agent, and the optional total request swallows errors with an empty catch. The repo ships useApi with a clean loading | error | ok machine and cancellation. This issue moves the primary usage fetch onto useApi and adds a guarded total fetch.

Requirements and context

• Repository scope: Agentpay-Org/Agentpay-frontend only.
• Migrate the primary /api/v1/agents/{agent}/usage fetch to useApi<Usage>(path), keyed on the encoded agent so it refetches on navigation and cancels superseded requests.
• Keep the optional /total fetch's soft-failure but guard it against out-of-order responses (latest agent wins).
• Preserve the monospace heading, the per-service list, and the error role="alert"; observable happy-path behaviour must not change.
• Coordinate with the agent-detail loading-states work if it lands; this issue is the network-layer refactor.

Suggested execution

• Fork the repo and create a branch
• git checkout -b refactor/agents-detail-useapi
• Implement changes
  • Write code in: src/app/agents/[agent]/page.tsx; reuse src/lib/useApi.ts.
  • Write comprehensive tests in: create/extend src/app/agents/[agent]/page.test.tsx — assert a stale response for a previous agent is ignored and the latest wins.
  • Add documentation: note the cancellation behaviour in README.md.
  • Validate no state-after-unmount warnings.
• Test and commit

Test and commit

• Run npm run lint, npm run typecheck, npm test, and npm run build.
• Cover edge cases: rapid agent switch, slow then fast response, usage error, and optional-total failure.
• Include the npm test output.

Example commit message

refactor(agents): adopt useApi and guard the total fetch on the detail page

Guidelines

• Minimum 95 percent test coverage for the changed page.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the AgentPay community on Discord for questions, reviews, and faster merges: https://discord.gg/eXvRKkgcv
• ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.

[gloskull]

Hello, I have 4 years of experience delivering solutions for projects like this, covering backend, frontend, and smart contract development. After carefully reviewing your requirements, I have a clear understanding of the task and am confident in my ability to deliver a clean, efficient, and thoroughly tested solution on time. I prioritize code quality, maintainability, and industry best practices throughout the development process.
My PR will be submitted in under 10hours.

[niufuti-cyber]

Hi maintainers, before I start implementation, could you confirm the reward path for this specific issue?

I see this is marked as GrantFox OSS / Official Campaign and MAYBE REWARDED. Is this issue currently eligible for a cash/GrantFox reward if a PR is accepted, and is a GitHub assignment/comment enough to preserve eligibility, or is there a separate GrantFox/Drips application step I should complete first?

If the reward/assignment path is confirmed, I would keep the change scoped to src/app/agents/[agent]/page.tsx and the existing src/lib/useApi.ts pattern:

• migrate the primary /api/v1/agents/{agent}/usage request to useApi<Usage>(path) keyed by the encoded agent
• preserve the existing visual behavior, including the monospace heading, per-service list, and role="alert" error path
• keep the optional /total request as a soft failure, but guard it so a slow response from a previous agent cannot overwrite the current agent's total
• add focused tests around rapid agent switching, slow-then-fast responses, usage errors, optional-total failure, and no state-after-unmount warning
• document the cancellation/stale-response behavior briefly in the README

Verification plan:

• inspect the current page and useApi state machine first, then keep the patch limited to the agent detail data-fetching layer
• run the relevant lint/typecheck/test/build commands requested in the issue
• include test output and notes showing stale responses are ignored and the latest agent wins

I will wait for reward/assignment confirmation before opening a PR.