@@ -258,10 +258,10 @@ function populateApiKeyDropdown() {
258258 select . innerHTML =
259259 '<option value="">All API Keys</option>' +
260260 state . apiKeyList
261- . map (
262- ( k ) =>
263- `<option value="${ k . key_hash } ">${ k . name } (${ k . key_prefix } ...)</option>` ,
264- )
261+ . map ( ( k ) => {
262+ const envIndicator = k . source === "environment" ? " [ENV]" : "" ;
263+ return `<option value="${ k . key_hash } ">${ k . name } ${ envIndicator } (${ k . key_prefix } ...)</option>` ;
264+ } )
265265 . join ( "" ) ;
266266}
267267
@@ -642,25 +642,20 @@ function renderKeysTable() {
642642
643643 if ( state . keys . length === 0 ) {
644644 tbody . innerHTML =
645- '<tr><td colspan="7" style="text-align: center; color: var(--text-muted); padding: 3rem;">No managed API keys found.</td></tr>' ;
645+ '<tr><td colspan="7" style="text-align: center; color: var(--text-muted); padding: 3rem;">No API keys found.</td></tr>' ;
646646 return ;
647647 }
648648
649649 tbody . innerHTML = state . keys
650- . map (
651- ( key ) => `
652- <tr>
653- <td>${ key . name || "Unnamed" } </td>
654- <td><code>${ key . key_prefix || "---" } ...</code></td>
655- <td>
656- <span class="badge ${ key . enabled ? "badge-success" : "badge-danger" } ">
657- ${ key . enabled ? "Active" : "Disabled" }
658- </span>
659- </td>
660- <td>${ new Date ( key . created_at ) . toLocaleDateString ( ) } </td>
661- <td>${ key . usage_count || 0 } </td>
662- <td>${ formatRateLimits ( key . rate_limits ) } </td>
663- <td class="actions-cell">
650+ . map ( ( key ) => {
651+ const isEnvKey = key . source === "environment" ;
652+ const statusBadge = isEnvKey
653+ ? '<span class="badge badge-warning">Environment</span>'
654+ : `<span class="badge ${ key . enabled ? "badge-success" : "badge-danger" } ">${ key . enabled ? "Active" : "Disabled" } </span>` ;
655+
656+ const actionsHtml = isEnvKey
657+ ? '<span class="text-muted" style="font-size: 0.75rem;">Read-only</span>'
658+ : `
664659 <button class="btn btn-sm" data-action="edit-key" data-hash="${ key . key_hash } " title="Edit">
665660 <i data-lucide="edit-2" style="width: 14px;"></i>
666661 </button>
@@ -669,11 +664,19 @@ function renderKeysTable() {
669664 </button>
670665 <button class="btn btn-sm btn-danger" data-action="revoke-key" data-hash="${ key . key_hash } " title="Revoke">
671666 <i data-lucide="trash-2" style="width: 14px;"></i>
672- </button>
673- </td>
674- </tr>
675- ` ,
676- )
667+ </button>` ;
668+
669+ return `
670+ <tr${ isEnvKey ? ' style="background: rgba(251, 191, 36, 0.05);"' : "" } >
671+ <td>${ key . name || "Unnamed" } </td>
672+ <td><code>${ key . key_prefix || "---" } ...</code></td>
673+ <td>${ statusBadge } </td>
674+ <td>${ new Date ( key . created_at ) . toLocaleDateString ( ) } </td>
675+ <td>${ key . usage_count || 0 } </td>
676+ <td>${ formatRateLimits ( key . rate_limits ) } </td>
677+ <td class="actions-cell">${ actionsHtml } </td>
678+ </tr>` ;
679+ } )
677680 . join ( "" ) ;
678681
679682 initLucide ( ) ;
0 commit comments