API Keys: Display existing keys + copy to clipboard #32

New issue

Closed

opened 2026-03-30 10:34:40 +00:00 by mahmoud · 1 comment

mahmoud commented

2026-03-30 10:34:40 +00:00

Owner

Problem

Existing configured keys are not displayed on the API Keys page
There is no way to copy a key to clipboard

Expected Behavior

List all existing keys with masked value (e.g. sk-...xxxx)
Each key row has a Copy to clipboard button
Optionally show key metadata: created date, last used

Acceptance Criteria

Existing keys are listed on page load
Copy to clipboard button works on each key
Masked key value shown by default with option to reveal

## Problem - Existing configured keys are not displayed on the API Keys page - There is no way to copy a key to clipboard ## Expected Behavior - List all existing keys with masked value (e.g. `sk-...xxxx`) - Each key row has a **Copy to clipboard** button - Optionally show key metadata: created date, last used ## Acceptance Criteria - [x] Existing keys are listed on page load - [x] Copy to clipboard button works on each key - [x] Masked key value shown by default with option to reveal

mahmoud referenced this issue

2026-03-30 10:39:14 +00:00

Polish & ship-ready UI — full product overhaul #30

mahmoud commented

2026-03-30 12:44:23 +00:00

Author

Owner

Implementation Spec for Issue #32

Objective

Display all existing API keys on the API Keys tab with masked values, add a "Copy to clipboard" button for each key, and add a "Reveal/Hide" toggle so the admin can see the full key value when needed.

Requirements

Existing API keys are listed on page load when the API Keys tab is activated
Each key row shows: masked key value, name, created date, enabled/disabled status, and action buttons
Each key row has a Copy button that copies the full (unmasked) key to the clipboard
Each key row has a Reveal/Hide toggle that shows/hides the full key value inline
The apikeys.list RPC returns both masked_key and key (full) fields
Fix pre-existing bug: disableApiKey() passes masked key instead of full key

Files to Modify

File	Change
`crates/hero_aibroker_ui/src/api/mod.rs`	Update `handle_apikeys_list` to return both `key` (full) and `masked_key`
`crates/hero_aibroker_ui/templates/index.html`	Rewrite API Keys tab: add copy button, reveal toggle, fix disable, show metadata
`crates/hero_aibroker_ui/templates/components/api_docs.html`	Update API docs to document new response shape

Implementation Plan

Step 1: Update `apikeys.list` RPC to return full key data

Files: api/mod.rs

Return both key (full) and masked_key in JSON response
Dependencies: none

Step 2: Update API Keys tab HTML and JavaScript

Files: templates/index.html

Add Copy button with clipboard API
Add Reveal/Hide toggle
Fix disable to use full key
Show created date and status badges
Dependencies: Step 1

Step 3: Update API Docs template

Files: templates/components/api_docs.html

Document new masked_key field in apikeys.list response
Dependencies: Step 1

Acceptance Criteria

Existing keys listed on page load
Copy to clipboard works on each key
Masked key shown by default with reveal toggle
Disable button uses correct (full) key
Created date shown for each key

Notes

Admin auth middleware protects the endpoint — returning full keys to authenticated admins is acceptable
Pre-existing bug: disableApiKey() currently passes masked key (will be fixed)
No database schema changes needed

## Implementation Spec for Issue #32 ### Objective Display all existing API keys on the API Keys tab with masked values, add a "Copy to clipboard" button for each key, and add a "Reveal/Hide" toggle so the admin can see the full key value when needed. ### Requirements - Existing API keys are listed on page load when the API Keys tab is activated - Each key row shows: masked key value, name, created date, enabled/disabled status, and action buttons - Each key row has a **Copy** button that copies the full (unmasked) key to the clipboard - Each key row has a **Reveal/Hide** toggle that shows/hides the full key value inline - The `apikeys.list` RPC returns both `masked_key` and `key` (full) fields - Fix pre-existing bug: `disableApiKey()` passes masked key instead of full key ### Files to Modify | File | Change | |------|--------| | `crates/hero_aibroker_ui/src/api/mod.rs` | Update `handle_apikeys_list` to return both `key` (full) and `masked_key` | | `crates/hero_aibroker_ui/templates/index.html` | Rewrite API Keys tab: add copy button, reveal toggle, fix disable, show metadata | | `crates/hero_aibroker_ui/templates/components/api_docs.html` | Update API docs to document new response shape | ### Implementation Plan #### Step 1: Update `apikeys.list` RPC to return full key data Files: `api/mod.rs` - Return both `key` (full) and `masked_key` in JSON response - Dependencies: none #### Step 2: Update API Keys tab HTML and JavaScript Files: `templates/index.html` - Add Copy button with clipboard API - Add Reveal/Hide toggle - Fix disable to use full key - Show created date and status badges - Dependencies: Step 1 #### Step 3: Update API Docs template Files: `templates/components/api_docs.html` - Document new `masked_key` field in `apikeys.list` response - Dependencies: Step 1 ### Acceptance Criteria - [ ] Existing keys listed on page load - [ ] Copy to clipboard works on each key - [ ] Masked key shown by default with reveal toggle - [ ] Disable button uses correct (full) key - [ ] Created date shown for each key ### Notes - Admin auth middleware protects the endpoint — returning full keys to authenticated admins is acceptable - Pre-existing bug: `disableApiKey()` currently passes masked key (will be fixed) - No database schema changes needed

mahmoud self-assigned this

2026-03-30 12:45:13 +00:00

mahmoud added this to the ACTIVE project

2026-03-30 12:45:16 +00:00

mahmoud added this to the now milestone

2026-03-30 12:45:18 +00:00

mahmoud referenced this issue from a commit

2026-03-30 13:34:12 +00:00

feat(ui): display existing API keys with copy and reveal toggle

mahmoud closed this issue

2026-03-31 18:03:07 +00:00