feat(keys): disambiguate KEY vs ID on the keys table

The masked KEY column (e2b-dev#345) sits next to a copyable ID, so the only
copyable token on the list reads as a key-shaped value the agent grabs.
Make the distinction explicit in persistent, agent-readable DOM text:

- Always-visible description now states the full secret is shown once and
  the ID is an identifier, not the secret — and points to Create & copy key.
- KEY/ID column headers get help tooltips spelling out the difference.
- Masked KEY value carries a title; ID copy aria-label and toast now say
  it's the identifier, not the secret API key.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: caffeinum

src/features/dashboard/settings/keys/api-keys-page-content.tsx

@@ -113,7 +113,9 @@ export const ApiKeysPageContent = () => {
         <div className="text-fg-tertiary flex flex-col gap-1 text-sm lg:flex-row lg:items-start lg:justify-between">
           <p className="max-w-[520px] leading-[17px] tracking-[-0.16px]">
             These keys authenticate API requests from your team&apos;s
-            applications.
+            applications. The full secret is shown only once, when a key is
+            created — the ID column is an identifier, not the secret key. To get
+            a working key, use Create &amp; copy key.
           </p>
           <Suspense fallback={<Skeleton className="h-4 w-24 border-0" />}>
             <ApiKeysTotalLabel query={query} />

src/features/dashboard/settings/keys/api-keys-table-row.tsx

@@ -41,7 +41,7 @@ export const ApiKeysTableRow = ({ apiKey, onDelete }: ApiKeysTableRowProps) => {
 
   const handleIdCopied = () => {
     posthog.capture('copied API key id')
-    toast(defaultSuccessToast('ID copied to clipboard'))
+    toast(defaultSuccessToast('Key ID copied — this is not the secret key'))
   }
 
   return (
@@ -60,14 +60,17 @@ export const ApiKeysTableRow = ({ apiKey, onDelete }: ApiKeysTableRowProps) => {
         </div>
       </TableCell>
       <TableCell className={tableCellClassName}>
-        <span className="text-fg-tertiary truncate font-mono text-sm tabular-nums">
+        <span
+          className="text-fg-tertiary truncate font-mono text-sm tabular-nums"
+          title="Masked preview — the full secret key is shown only once, when the key is created"
+        >
           {maskedKey}
         </span>
       </TableCell>
       <TableCell className={tableCellClassName}>
         <IdBadge
           id={apiKey.id}
-          copyAriaLabel="Copy full API key ID"
+          copyAriaLabel="Copy key ID — an identifier, not the secret API key"
           onCopied={handleIdCopied}
         />
       </TableCell>

src/features/dashboard/settings/keys/api-keys-table.tsx

@@ -3,6 +3,7 @@
 import { type FC, type ReactNode, useState } from 'react'
 import type { TeamAPIKey } from '@/core/modules/keys/models'
 import { cn } from '@/lib/utils'
+import HelpTooltip from '@/ui/help-tooltip'
 import { KeyIcon } from '@/ui/primitives/icons'
 import {
   Table,
@@ -16,9 +17,22 @@ import {
 import { ApiKeysTableRow } from './api-keys-table-row'
 import { DeleteApiKeyDialog } from './delete-api-key-dialog'
 
-const ApiKeysTableHead = ({ children }: { children: ReactNode }) => (
+const ApiKeysTableHead = ({
+  children,
+  tooltip,
+}: {
+  children: ReactNode
+  tooltip?: ReactNode
+}) => (
   <TableHead className="h-auto pt-0 pb-2 align-top text-fg-tertiary font-sans! normal-case!">
-    {children}
+    {tooltip ? (
+      <span className="inline-flex items-center gap-1">
+        {children}
+        <HelpTooltip classNames={{ icon: 'size-3' }}>{tooltip}</HelpTooltip>
+      </span>
+    ) : (
+      children
+    )}
   </TableHead>
 )
 
@@ -55,8 +69,12 @@ export const ApiKeysTable: FC<ApiKeysTableProps> = ({
         <TableHeader className="border-b-0">
           <TableRow className="hover:bg-transparent">
             <ApiKeysTableHead>LABEL</ApiKeysTableHead>
-            <ApiKeysTableHead>KEY</ApiKeysTableHead>
-            <ApiKeysTableHead>ID</ApiKeysTableHead>
+            <ApiKeysTableHead tooltip="A masked preview for recognition. The full secret key is shown only once, when the key is created.">
+              KEY
+            </ApiKeysTableHead>
+            <ApiKeysTableHead tooltip="An identifier for this key — not the secret used to authenticate API requests. To get a working key, create a new one.">
+              ID
+            </ApiKeysTableHead>
             <ApiKeysTableHead>LAST USED</ApiKeysTableHead>
             <ApiKeysTableHead>ADDED</ApiKeysTableHead>
           </TableRow>