Harden API-key handling and JSON parameter input in the ApiUsage page

[greatest0fallt1me]

Description

The ApiUsage page treats a live-looking secret carelessly and trusts free-form user input. The API key is seeded as a hard-coded ck_live_... value and held in component state (src/ApiUsage.tsx:139), handleRegenerateApiKey mints a new key from Math.random() with no confirmation step (src/ApiUsage.tsx:173-176), and the parameters textarea accepts arbitrary text that is stored verbatim and later JSON-stringified into the call history without ever being parsed or validated (src/ApiUsage.tsx:143,363-368,524). For a page that demonstrates authenticated API calls, this is a poor security posture and a footgun.

This issue masks/handles the key safely and validates the JSON parameter input before use.

Requirements and context

• Remove the hard-coded ck_live_... literal default (src/ApiUsage.tsx:139); start masked/empty and only reveal on explicit user action (the Show/Hide toggle already exists, src/ApiUsage.tsx:316-321).
• Add a confirmation prompt before handleRegenerateApiKey rotates the key, and use a CSPRNG (crypto.getRandomValues) instead of Math.random() (src/ApiUsage.tsx:173-176).
• Validate the parameters textarea as JSON before "Make Test Call": parse with JSON.parse, show an inline error on failure, and block the call (src/ApiUsage.tsx:178-235,360-368); store the parsed object (not the raw string) in the call record (src/ApiUsage.tsx:218).
• While at it, fix the genuine build blocker in this file: statusFilter is declared twice (src/ApiUsage.tsx:148 and :150) and <Skeleton> is used (src/ApiUsage.tsx:391-399) but never imported — both must be resolved so the page compiles.
• Non-functional: never log the key (console.error only, no key in messages, see src/ApiUsage.tsx:168-170); keep the export functions working (src/ApiUsage.tsx:247-278).

Acceptance criteria

• No hard-coded ck_live_ secret remains; the key is masked by default.
• Key regeneration requires confirmation and uses crypto.getRandomValues.
• Invalid JSON in the parameters field shows an inline error and prevents the test call.
• Call records store parsed parameters, not raw unvalidated text.
• The duplicate statusFilter declaration and missing Skeleton import are fixed; npm run build passes.

Suggested execution

1. Fork the repo and create a branch — git checkout -b security/apiusage-key-and-input-hardening.

2. Implement changes — src/ApiUsage.tsx (key default/regeneration, JSON validation, fix duplicate state + Skeleton import).

3. Write/extend tests — this repo has no test runner configured. Add Vitest + @testing-library/react + @testing-library/user-event + jsdom and a "test": "vitest run" script, then test that invalid JSON blocks the call and shows an error, valid JSON is parsed, and regeneration is gated by confirmation (mock window.confirm).

4. Test and commit —

npm install
npm run build    # must now compile (duplicate declaration + missing import fixed)
npm run test
npm run dev

Example commit message

fix(security): mask api key, gate regeneration, and validate JSON params in ApiUsage

Guidelines

• Hold the changed logic to ≥90% line coverage.
• Keep the key field accessible (labelled, type=password when hidden), surface validation errors to screen readers, and add a short security note to the PR.
• Timeframe: 96 hours.

[Samaro1]

Gm gm boss, I would love to work on this issue. A satisfactory PR will be raised in 8 hours tops