Skip to content

feat: per-row copy button and sample code block on API Keys page - #84

Open
gdccyuen wants to merge 1 commit into
Ontos-AI:mainfrom
gdccyuen:feat/gdccyuen/api-keys-copy-and-samples
Open

feat: per-row copy button and sample code block on API Keys page#84
gdccyuen wants to merge 1 commit into
Ontos-AI:mainfrom
gdccyuen:feat/gdccyuen/api-keys-copy-and-samples

Conversation

@gdccyuen

@gdccyuen gdccyuen commented Aug 1, 2026

Copy link
Copy Markdown

What

Improves the API Keys page UX:

  1. Keeps the one-time reveal popup (it remains the only place the full API key is shown — the list endpoint only returns a masked key_prefix, so a full-key row copy is impossible by design)
  2. Adds a per-row Copy button next to each masked key (copies the masked key_prefix for quick reference/identification)
  3. Adds a sample-code block below the API keys table (cURL / Python / Node.js / Go tabs) so users can grab integration snippets without hunting for them

Changes

Shared sample-code util

  • New lib/sample-code.ts: buildCodeByTab, sampleCodeTabConfig, SAMPLE_PDF_URL, SampleCodeTab type — extracted verbatim from the Usage welcome modal
  • app/(dashboard)/usage/_components/usage-welcome-modal.tsx: now imports from lib/sample-code.ts (no behavior change)

API Keys page

  • New app/(dashboard)/api-keys/_components/api-key-sample-code.tsx: tabbed code panel (Python/Node.js/cURL/Go) with syntax highlighting + per-tab Copy button; uses a YOUR_API_KEY placeholder since the page doesn't hold a plaintext key persistently
  • app/(dashboard)/api-keys/_components/api-keys-page.tsx: renders the sample-code block below the keys table
  • app/(dashboard)/api-keys/_components/api-keys-table.tsx: per-row copy button next to the masked key (reuses copyToClipboard + DashboardCopyIcon + toast)

i18n (en/zh)

  • ApiKeys namespace: copyKeyPrefix, codeTitle, codeTabs, copyCode, copyCodeSuccess, copyCodeFailed

Notes

  • The one-time popup (api-key-created-dialog.tsx) is untouched — it remains the only place the full key is ever shown, matching the upstream security model (keys are stored as SHA-256 hashes, full key is unrecoverable after creation)
  • Verified: pnpm type-check, pnpm test (108 passed), pnpm build

- Keep the one-time reveal popup as the only source of the full key
- Add a Copy button next to each masked API key row (copies key_prefix)
- Add a sample-code block below the API keys table with tabs
  (cURL/Python/Node.js/Go) using a YOUR_API_KEY placeholder
- Extract buildCodeByTab into shared lib/sample-code.ts; Usage welcome
  modal now imports it (no behavior change)
- i18n (en/zh): copyKeyPrefix/codeTitle/codeTabs/copyCode* keys
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant