refactor: introduce dedicated identifier types for improved clarity and type safety

frontend/src/settings/sections/ApiTokensSection.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { ChangeEvent, FormEvent } from 'react';
-
-type Identifier = string | number;
+import type { Identifier } from '../../types/identifiers';
 
 interface ApiTokenEntry {
   id?: Identifier;
@@ -125,21 +124,21 @@ const ApiTokensSection = ({
   const capabilitySelectionOptions = useMemo<CapabilitySelectionOption[]>(() => (
     Array.isArray(capabilities)
       ? capabilities.map((capability) => {
-          const capabilityText = `${capability ?? ''}`;
-          if (!capabilityText.includes(':')) {
-            return { value: capability, label: capabilityText };
-          }
-          const [namespace, action] = capabilityText.split(':');
-          if (!namespace || !action) {
-            return { value: capability, label: capabilityText };
-          }
-          const formattedNamespace = `${namespace.charAt(0).toUpperCase()}${namespace.slice(1)}`;
-          const formattedAction = action.replace(/_/g, ' ');
-          return {
-            value: capability,
-            label: `${formattedNamespace}: ${formattedAction}`,
-          };
-        })
+        const capabilityText = `${capability ?? ''}`;
+        if (!capabilityText.includes(':')) {
+          return { value: capability, label: capabilityText };
+        }
+        const [namespace, action] = capabilityText.split(':');
+        if (!namespace || !action) {
+          return { value: capability, label: capabilityText };
+        }
+        const formattedNamespace = `${namespace.charAt(0).toUpperCase()}${namespace.slice(1)}`;
+        const formattedAction = action.replace(/_/g, ' ');
+        return {
+          value: capability,
+          label: `${formattedNamespace}: ${formattedAction}`,
+        };
+      })
       : []
   ), [capabilities]);
 

frontend/src/settings/sections/CapabilitySetsSection.tsx

@@ -8,10 +8,7 @@ import React, {
 import type { SettingsSectionConfig } from '../SettingsModal';
 import { IconX } from '../../ui/icons';
 import CapabilityDropdown, { CapabilityDropdownOption } from '../components/CapabilityDropdown';
-
-
-type CapabilityValue = string | number;
-type CapabilitySetId = string | number;
+import type { CapabilitySetId, CapabilityValue } from '../../types/identifiers';
 
 interface CapabilitySet {
   id: CapabilitySetId;

frontend/src/settings/sections/PasskeysSection.tsx

@@ -18,10 +18,10 @@ interface PasskeysSectionProps {
   passkeysSupported?: boolean | null;
   passkeysLoading?: boolean;
   registeringPasskey?: boolean;
-  revokingPasskeyId?: string | number | null;
+  revokingPasskeyId?: string | null;
   onRefreshPasskeys?: () => void | Promise<void>;
   onRegisterPasskey?: (args: { nickname?: string }) => Promise<RegisterPasskeyResult | undefined>;
-  onRevokePasskey?: (id: string | number, reason?: string) => Promise<void>;
+  onRevokePasskey?: (id: string, reason?: string) => Promise<void>;
 }
 
 const PasskeysSection = ({