feat: add masked key to api keys table (#345)

* Add masked key to API keys table
* Tighten up spacing for columns

| Before | After |
| ------- | ------- |
| <img width="2330" height="742" alt="CleanShot 2026-05-27 at 13 21
49@2x"
src="https://github.com/user-attachments/assets/e6bff72d-d021-4fe8-a7a1-89c84300b2ac"
/> | <img width="1728" height="728" alt="CleanShot 2026-05-27 at 13 41
03@2x"
src="https://github.com/user-attachments/assets/4318f07c-24ef-4a61-990d-3c5506cf76ff"
/> |

Author: drankou

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

@@ -16,7 +16,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/ui/primitives/tooltip'
-import { getLastUsedLabel } from './api-keys-utils'
+import { formatMaskedApiKey, getLastUsedLabel } from './api-keys-utils'
 
 const tableCellClassName = 'py-3 text-left [tr:first-child>&]:pt-1.5'
 
@@ -33,6 +33,7 @@ export const ApiKeysTableRow = ({ apiKey, onDelete }: ApiKeysTableRowProps) => {
     ? (formatDate(new Date(apiKey.createdAt), 'MMM d, yyyy') ?? '—')
     : '—'
 
+  const maskedKey = formatMaskedApiKey(apiKey)
   const lastUsedAt = apiKey.lastUsed
   const lastUsedLabel = getLastUsedLabel(apiKey)
   const isCliKey = apiKey.name === CLI_GENERATED_KEY_NAME
@@ -58,6 +59,11 @@ export const ApiKeysTableRow = ({ apiKey, onDelete }: ApiKeysTableRowProps) => {
           </span>
         </div>
       </TableCell>
+      <TableCell className={tableCellClassName}>
+        <span className="text-fg-tertiary truncate font-mono text-sm tabular-nums">
+          {maskedKey}
+        </span>
+      </TableCell>
       <TableCell className={tableCellClassName}>
         <IdBadge
           id={apiKey.id}
@@ -79,14 +85,12 @@ export const ApiKeysTableRow = ({ apiKey, onDelete }: ApiKeysTableRowProps) => {
           lastUsedLabel
         )}
       </TableCell>
-      <TableCell
-        className={cn(tableCellClassName, 'pl-3 pr-0 text-sm text-fg-tertiary')}
-      >
-        <div className="flex items-center gap-6 justify-between">
+      <TableCell className={cn(tableCellClassName, 'text-sm text-fg-tertiary')}>
+        <div className="flex items-center gap-3">
           <span className="block w-[92px] shrink-0 whitespace-nowrap">
             {addedDate}
           </span>
-          <div className="flex items-center gap-6">
+          <div className="flex items-center gap-3">
             {isCliKey ? (
               <Tooltip>
                 <TooltipTrigger asChild>

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

@@ -46,14 +46,16 @@ export const ApiKeysTable: FC<ApiKeysTableProps> = ({
       />
       <Table className={cn('w-full table-fixed', className)}>
         <colgroup>
-          <col className="min-w-[260px] lg:w-[48%]" />
-          <col className="w-[132px] lg:w-[16%]" />
-          <col className="w-[96px] lg:w-[12%]" />
-          <col className="w-[180px] lg:w-[24%]" />
+          <col className="min-w-[220px]" />
+          <col className="w-[150px]" />
+          <col className="w-[135px]" />
+          <col className="w-[106px]" />
+          <col className="w-[168px]" />
         </colgroup>
         <TableHeader className="border-b-0">
           <TableRow className="hover:bg-transparent">
             <ApiKeysTableHead>LABEL</ApiKeysTableHead>
+            <ApiKeysTableHead>KEY</ApiKeysTableHead>
             <ApiKeysTableHead>ID</ApiKeysTableHead>
             <ApiKeysTableHead>LAST USED</ApiKeysTableHead>
             <ApiKeysTableHead>ADDED</ApiKeysTableHead>
@@ -68,9 +70,9 @@ export const ApiKeysTable: FC<ApiKeysTableProps> = ({
           )}
         >
           {isLoading ? (
-            <TableLoadingState colSpan={4} label="Loading API keys" />
+            <TableLoadingState colSpan={5} label="Loading API keys" />
           ) : apiKeys.length === 0 ? (
-            <TableEmptyState colSpan={4}>
+            <TableEmptyState colSpan={5}>
               <KeyIcon
                 aria-hidden
                 className={cn(

src/features/dashboard/settings/keys/api-keys-utils.ts

@@ -8,6 +8,12 @@ const getMaskedIdSearchString = (apiKey: TeamAPIKey): string => {
   return `${prefix}${maskedValuePrefix}...${maskedValueSuffix}`.toLowerCase()
 }
 
+/** Visual masked key for the KEY column; e.g. `"e2b_1f••••6ba3"`. */
+const formatMaskedApiKey = (apiKey: TeamAPIKey): string => {
+  const { prefix, maskedValuePrefix, maskedValueSuffix } = apiKey.mask
+  return `${prefix}${maskedValuePrefix}••••${maskedValueSuffix}`.toLowerCase()
+}
+
 /** Returns true when the key name or masked id contains the trimmed query (case-insensitive). */
 const matchesApiKeySearch = (apiKey: TeamAPIKey, query: string): boolean => {
   const q = query.trim().toLowerCase()
@@ -29,4 +35,9 @@ const getLastUsedLabel = (apiKey: TeamAPIKey): string => {
   return 'Never'
 }
 
-export { getLastUsedLabel, getMaskedIdSearchString, matchesApiKeySearch }
+export {
+  formatMaskedApiKey,
+  getLastUsedLabel,
+  getMaskedIdSearchString,
+  matchesApiKeySearch,
+}

src/features/dashboard/shared/id-badge.tsx

@@ -36,7 +36,7 @@ export const IdBadge = ({
 
   return (
     <Badge className="bg-bg-highlight text-fg-tertiary h-[18px] gap-[3px] px-1 align-middle prose-label-numeric">
-      <span className="tracking-wider">{displayId}</span>
+      <span className="tracking-wider font-mono">{displayId}</span>
       <Button
         type="button"
         variant="quaternary"