Add useApiTokens hook and refactor token UI

Introduce a shared useApiTokens hook to centralize API token CRUD and UI state (fetch, create, delete, copy, formatting). Refactor ApiTab and ApiTokensSection to consume the hook and remove duplicated logic. Add getInstanceUrl utility for client origin used in curl examples. Include an id alias in TokenPayload and add id into generated JWTs across auth routes and providers; update tests accordingly. Improve auth middleware typing and add debug logging around lastUsedAt updates. Add admin logging when creating a token with a role that differs from the target user's role.

src/app/api/admin/api-tokens/route.ts

@@ -123,6 +123,16 @@ export async function POST(request: NextRequest) {
         // Determine token role (defaults to target user's role)
         const tokenRole = role || targetUser.role;
 
+        // Log when admin explicitly overrides role to differ from user's actual role
+        if (role && role !== targetUser.role) {
+          logger.warn('Admin creating token with role different from user actual role', {
+            tokenRole: role,
+            userActualRole: targetUser.role,
+            targetUser: targetUser.plexUsername,
+            createdBy: req.user!.username,
+          });
+        }
+
         // Generate the token
         const { fullToken, tokenHash, tokenPrefix } = generateApiToken();
 

src/app/api/auth/admin/login/route.ts

@@ -92,6 +92,7 @@ export async function POST(request: NextRequest) {
     // Generate JWT tokens
     const accessToken = generateAccessToken({
       sub: user.id,
+      id: user.id,
       plexId: user.plexId,
       username: user.plexUsername,
       role: user.role,

src/app/api/auth/plex/callback/route.ts

@@ -239,6 +239,7 @@ export async function GET(request: NextRequest) {
     // Generate JWT tokens
     const accessToken = generateAccessToken({
       sub: user.id,
+      id: user.id,
       plexId: user.plexId,
       username: user.plexUsername,
       role: user.role,

src/app/api/auth/plex/switch-profile/route.ts

@@ -167,6 +167,7 @@ export async function POST(request: NextRequest) {
     // Generate JWT tokens
     const accessToken = generateAccessToken({
       sub: user.id,
+      id: user.id,
       plexId: user.plexId,
       username: user.plexUsername,
       role: user.role,

src/app/api/auth/refresh/route.ts

@@ -60,6 +60,7 @@ export async function POST(request: NextRequest) {
     // Generate new access token
     const accessToken = generateAccessToken({
       sub: user.id,
+      id: user.id,
       plexId: user.plexId,
       username: user.plexUsername,
       role: user.role,

src/app/api/setup/complete/route.ts

@@ -163,6 +163,7 @@ export async function POST(request: NextRequest) {
       // Generate JWT tokens for auto-login
       accessToken = generateAccessToken({
         sub: adminUser.id,
+        id: adminUser.id,
         plexId: adminUser.plexId,
         username: adminUser.plexUsername,
         role: adminUser.role,