Add a request/response viewer with pretty-print + raw toggle to ApiUsage test-call panel

[greatest0fallt1me]

Description

This is a UI/UX issue. ApiUsage.tsx currently shows a "Make Test Call" response as a flat stringified blob. Replace it with a proper request/response viewer that renders JSON in a syntax-highlighted, collapsible tree with a "Pretty / Raw" toggle, so developers can inspect deeply nested fields quickly.

Requirements and Context

• Reference: src/ApiUsage.tsx — the test-call response area
• Provide a Pretty / Raw segmented control above the viewer
• Collapsible nodes must be operable with Enter/Space and expose aria-expanded
• Long string values should truncate with a "Show more" affordance, not break layout
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b feature/api-usage-response-viewer

2. Implement changes
   • src/components/JsonViewer.tsx — new component with collapse/expand state
   • src/ApiUsage.tsx — replace the raw <pre> with <JsonViewer value={response} />
   • src/index.css — add .json-key, .json-string, .json-number, .json-bool color tokens for both themes
3. Test and commit
   • Test with a 5-level-deep mock response
   • Verify Tab order through collapsed/expanded nodes
   • npm test

Example commit message

feat: add JSON request/response viewer to ApiUsage

Acceptance Criteria

• Pretty/Raw toggle switches between tree view and plain text
• Each node is keyboard-collapsible and announces aria-expanded
• Syntax colors meet AA contrast in light and dark themes
• No horizontal page scroll on deeply nested responses

Guidelines

• Prefer CSS-driven syntax colors over inline styles
• Do not pull in a heavy JSON-viewer dependency; a tiny in-house tree is enough
• Clear documentation and inline comments
• Timeframe: 96 hours

[gloskull]

Hi, I’d love to work on this issue. I have 4 years of experience across backend, frontend, full-stack, and smart contract development. I understand the task clearly and can deliver a clean, efficient, well-tested solution on time, with strong focus on code quality and maintainability. My PR will be submitted in under 10 hours.

[emynogithub]

@emynogithub has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I have the skill it takes to work on this issue , please give me the opportunity to show my competence in problems solving

ℹ️ Repo Maintainers: To accept this application, review their application or assign @emynogithub to this issue.

[drips-wave]

Congratulations, @emynogithub! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @emynogithub: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊