Add a Settings page section to view and override the configured API base URL

[mikewheeleer]

Surface the resolved API base URL on the Settings page

Description

src/app/settings/page.tsx only renders an Appearance section with the ThemeToggle; operators have no way to see which backend the dashboard is talking to, even though src/lib/resolveApiBase.ts computes that origin and it drives every request. This issue adds a read-only "Connection" section that displays the resolved API base (with a CopyButton) so operators can confirm the environment they are in.

Requirements and context

• Repository scope: Agentpay-Org/Agentpay-frontend only.
• Add a "Connection" <section> that shows the resolved base URL from resolveApiBase inside a KeyValueGrid row with a CopyButton.
• Keep the page server-rendered where possible; only the copy control needs a client island.
• Preserve the existing Appearance section, the main landmark, the metadata title, and dark-mode classes.
• Do not display any secret value — only the public base URL.

Suggested execution

• Fork the repo and create a branch
• git checkout -b feature/settings-api-base-section
• Implement changes
  • Write code in: src/app/settings/page.tsx; reuse src/components/KeyValueGrid.tsx and src/components/CopyButton.tsx.
  • Write comprehensive tests in: create src/app/settings/page.test.tsx — assert the resolved base renders and the copy control is present.
  • Add documentation: note the Connection section in README.md.
  • JSDoc the island; validate the copy control's aria-live feedback.
• Test and commit

Test and commit

• Run npm run lint, npm run typecheck, npm test, and npm run build.
• Cover edge cases: default localhost base, an overridden env base, and copy behaviour.
• Include the npm test output.

Example commit message

feat(settings): add Connection section displaying the resolved API base URL

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.

[Unclebaffa]

Hello Maintainer,
I'm interested in contributing to this amazing project of yours, I'm confident i will deliver the best result that aligns with this project.
Kindly assign me.
Thank you

[grantfox-oss]

🦊 GrantFox — @Unclebaffa has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #142)
2. Your PR will be reviewed by the Agentpay-Org maintainers

Good luck! Track your progress on GrantFox.