@makolabs/ripple 1.7.6 → 1.7.11

package/dist/funcs/user-management.remote.d.ts

@@ -27,6 +27,7 @@ export declare const verifyToken: import("@sveltejs/kit").RemoteCommand<{
     valid: boolean;
     scopes?: string[];
     sub?: string;
+    client_id?: string;
     error?: string;
     token?: string;
 }>>;

package/dist/funcs/user-management.remote.js

@@ -1,8 +1,32 @@
 import { query, command } from '$app/server';
 import { getRequestEvent } from '$app/server';
 import { env } from '$env/dynamic/private';
-const CLIENT_ID = env.CLIENT_ID || 'sharkfin';
+import { building } from '$app/environment';
+const CLIENT_ID = env.CLIENT_ID;
 const ORGANIZATION_ID = env.ALLOWED_ORG_ID;
+if (!CLIENT_ID && !building) {
+    throw new Error('CLIENT_ID environment variable is required');
+}
+if (!ORGANIZATION_ID && !building) {
+    throw new Error('ALLOWED_ORG_ID environment variable is required');
+}
+const isTraceLevel = () => env.LOG_LEVEL?.toLowerCase() === 'trace';
+const log = {
+    trace: (tag, ...args) => {
+        if (isTraceLevel())
+            console.debug(`[TRACE][${tag}]`, ...args);
+    },
+    info: (tag, ...args) => {
+        if (isTraceLevel())
+            console.log(`[${tag}]`, ...args);
+    },
+    warn: (tag, ...args) => {
+        console.warn(`[${tag}]`, ...args);
+    },
+    error: (tag, ...args) => {
+        console.error(`[${tag}]`, ...args);
+    }
+};
 function handleClerkError(error, defaultMessage) {
     if (error && typeof error === 'object' && 'status' in error && 'details' in error) {
         const enrichedError = new Error('message' in error && typeof error.message === 'string' ? error.message : 'Unknown error');
@@ -20,9 +44,17 @@ async function makeClerkRequest(endpoint, options = {}) {
     }
     const method = options.method || 'GET';
     const url = `https://api.clerk.com/v1${endpoint}`;
-    console.log(`[Clerk API] ${method} ${url}`);
+    log.info('Clerk API', `${method} ${url}`);
+    if (options.body)
+        log.info('Clerk API', `Payload: ${options.body}`);
+    log.trace('Clerk API', 'Request headers:', {
+        Authorization: 'Bearer [REDACTED]',
+        'Content-Type': 'application/json',
+        ...options.headers
+    });
     if (options.body)
-        console.log(`[Clerk API] Payload: ${options.body}`);
+        log.trace('Clerk API', 'Parsed payload:', JSON.parse(options.body));
+    const start = performance.now();
     const response = await fetch(url, {
         ...options,
         headers: {
@@ -31,10 +63,12 @@ async function makeClerkRequest(endpoint, options = {}) {
             ...options.headers
         }
     });
+    const elapsed = (performance.now() - start).toFixed(2);
     if (!response.ok) {
         const errorText = await response.text();
-        console.error(`[Clerk API] Response: ${response.status} ${response.statusText}`);
-        console.error(`[Clerk API] Body: ${errorText}`);
+        log.error('Clerk API', `Response: ${response.status} ${response.statusText} (${elapsed}ms)`);
+        log.error('Clerk API', `Body: ${errorText}`);
+        log.trace('Clerk API', 'Response headers:', Object.fromEntries(response.headers.entries()));
         let errorDetails;
         try {
             errorDetails = JSON.parse(errorText);
@@ -48,8 +82,10 @@ async function makeClerkRequest(endpoint, options = {}) {
         throw error;
     }
     const data = await response.json();
-    console.log(`[Clerk API] Response: ${response.status} ${response.statusText}`);
-    console.log(`[Clerk API] Body: ${JSON.stringify(data).slice(0, 500)}`);
+    log.info('Clerk API', `Response: ${response.status} ${response.statusText} (${elapsed}ms)`);
+    log.info('Clerk API', `Body: ${JSON.stringify(data).slice(0, 500)}`);
+    log.trace('Clerk API', 'Full response body:', data);
+    log.trace('Clerk API', 'Response headers:', Object.fromEntries(response.headers.entries()));
     // Ensure all data is serializable by converting to plain objects
     return JSON.parse(JSON.stringify(data));
 }
@@ -66,9 +102,17 @@ async function makeAdminRequest(endpoint, options = {}) {
     }
     const method = options.method || 'GET';
     const url = `${PRIVATE_BASE_AUTH_URL}${endpoint}`;
-    console.log(`[Admin API] ${method} ${url}`);
+    log.info('Admin API', `${method} ${url}`);
+    if (options.body)
+        log.info('Admin API', `Payload: ${options.body}`);
+    log.trace('Admin API', 'Request headers:', {
+        'X-Admin-API-Key': '[REDACTED]',
+        'Content-Type': 'application/json',
+        ...options.headers
+    });
     if (options.body)
-        console.log(`[Admin API] Payload: ${options.body}`);
+        log.trace('Admin API', 'Parsed payload:', JSON.parse(options.body));
+    const start = performance.now();
     const response = await fetch(url, {
         ...options,
         headers: {
@@ -77,15 +121,19 @@ async function makeAdminRequest(endpoint, options = {}) {
             ...options.headers
         }
     });
+    const elapsed = (performance.now() - start).toFixed(2);
     if (!response.ok) {
         const errorText = await response.text();
-        console.error(`[Admin API] Response: ${response.status} ${response.statusText}`);
-        console.error(`[Admin API] Body: ${errorText}`);
+        log.error('Admin API', `Response: ${response.status} ${response.statusText} (${elapsed}ms)`);
+        log.error('Admin API', `Body: ${errorText}`);
+        log.trace('Admin API', 'Response headers:', Object.fromEntries(response.headers.entries()));
         throw new Error(`Admin API request failed: ${response.status} ${response.statusText} - ${errorText}`);
     }
     const data = await response.json();
-    console.log(`[Admin API] Response: ${response.status} ${response.statusText}`);
-    console.log(`[Admin API] Body: ${JSON.stringify(data).slice(0, 500)}`);
+    log.info('Admin API', `Response: ${response.status} ${response.statusText} (${elapsed}ms)`);
+    log.info('Admin API', `Body: ${JSON.stringify(data).slice(0, 500)}`);
+    log.trace('Admin API', 'Full response body:', data);
+    log.trace('Admin API', 'Response headers:', Object.fromEntries(response.headers.entries()));
     // Ensure all data is serializable by converting to plain objects
     return JSON.parse(JSON.stringify(data));
 }
@@ -96,9 +144,14 @@ async function makeAuthRequest(endpoint, options = {}) {
     }
     const method = options.method || 'GET';
     const url = `${PRIVATE_BASE_AUTH_URL}${endpoint}`;
-    console.log(`[Auth API] ${method} ${url}`);
+    log.info('Auth API', `${method} ${url}`);
     if (options.body)
-        console.log(`[Auth API] Payload: ${options.body}`);
+        log.info('Auth API', `Payload: ${options.body}`);
+    log.trace('Auth API', 'Request headers:', {
+        'Content-Type': 'application/json',
+        ...options.headers
+    });
+    const start = performance.now();
     const response = await fetch(url, {
         ...options,
         headers: {
@@ -106,6 +159,7 @@ async function makeAuthRequest(endpoint, options = {}) {
             ...options.headers
         }
     });
+    const elapsed = (performance.now() - start).toFixed(2);
     const text = await response.text();
     let data;
     try {
@@ -115,8 +169,10 @@ async function makeAuthRequest(endpoint, options = {}) {
         // Not JSON, treat as plain text error (e.g., "404 page not found")
         data = { error: text, message: text };
     }
-    console.log(`[Auth API] Response: ${response.status} ${response.statusText}`);
-    console.log(`[Auth API] Body: ${JSON.stringify(data).slice(0, 500)}`);
+    log.info('Auth API', `Response: ${response.status} ${response.statusText} (${elapsed}ms)`);
+    log.info('Auth API', `Body: ${JSON.stringify(data).slice(0, 500)}`);
+    log.trace('Auth API', 'Full response body:', data);
+    log.trace('Auth API', 'Response headers:', Object.fromEntries(response.headers.entries()));
     return {
         ok: response.ok,
         status: response.status,
@@ -124,6 +180,7 @@ async function makeAuthRequest(endpoint, options = {}) {
     };
 }
 async function verifyApiKeyToken(apiKey) {
+    log.trace('verifyApiKeyToken', 'Called with apiKey:', apiKey.slice(0, 8) + '...[REDACTED]');
     try {
         const result = await makeAuthRequest('/auth/token', {
             method: 'POST',
@@ -131,37 +188,43 @@ async function verifyApiKeyToken(apiKey) {
                 'X-API-Key': apiKey
             }
         });
+        log.trace('verifyApiKeyToken', 'Token exchange result ok:', result.ok);
         if (result.ok && result.data?.data?.access_token) {
             const token = result.data.data.access_token;
+            log.trace('verifyApiKeyToken', 'Got access_token, verifying...');
             const verifyResult = await makeAuthRequest('/auth/verify', {
                 method: 'GET',
                 headers: {
                     Authorization: `Bearer ${token}`
                 }
             });
+            log.trace('verifyApiKeyToken', 'Verify result ok:', verifyResult.ok, 'data:', verifyResult.data);
             if (verifyResult.ok && verifyResult.data?.data) {
                 // The API returns "scope" (singular) as a space-separated string, not "scopes" array
                 const scopeString = verifyResult.data.data.scope;
                 const scopes = scopeString ? scopeString.split(' ').filter(Boolean) : [];
                 const sub = verifyResult.data.data.sub;
+                const client_id = verifyResult.data.data.client_id;
+                log.trace('verifyApiKeyToken', 'Verified. sub:', sub, 'scopes:', scopes, 'client_id:', client_id);
                 return {
                     valid: true,
                     scopes: scopes,
-                    sub: sub
+                    sub: sub,
+                    client_id: client_id
                 };
             }
         }
         const errorMsg = result.data?.message ||
             result.data?.error ||
             `API key verification failed with status ${result.status}`;
-        console.warn('[verifyApiKeyToken] Verification failed:', errorMsg);
+        log.warn('verifyApiKeyToken', 'Verification failed:', errorMsg);
         return {
             valid: false,
             error: errorMsg
         };
     }
     catch (error) {
-        console.error('[verifyApiKeyToken] Exception during verification:', error);
+        log.error('verifyApiKeyToken', 'Exception during verification:', error);
         return {
             valid: false,
             error: error instanceof Error ? error.message : 'Unknown error during verification'
@@ -169,10 +232,12 @@ async function verifyApiKeyToken(apiKey) {
     }
 }
 async function createUserPermissions(email, permissions, clientId = CLIENT_ID) {
+    log.trace('createUserPermissions', 'email:', email, 'permissions:', permissions, 'clientId:', clientId);
     if (permissions.length === 0) {
+        log.trace('createUserPermissions', 'No permissions to create, returning null');
         return null;
     }
-    return await makeAdminRequest('/admin/keys', {
+    const result = await makeAdminRequest('/admin/keys', {
         method: 'POST',
         body: JSON.stringify({
             client_id: clientId,
@@ -180,8 +245,11 @@ async function createUserPermissions(email, permissions, clientId = CLIENT_ID) {
             scopes: permissions
         })
     });
+    log.trace('createUserPermissions', 'Result:', result);
+    return result;
 }
 export const getUsers = query('unchecked', async (options) => {
+    log.trace('getUsers', 'Called with options:', options);
     try {
         const limit = options.pageSize;
         const offset = (options.page - 1) * options.pageSize;
@@ -200,12 +268,14 @@ export const getUsers = query('unchecked', async (options) => {
         });
         if (options.query)
             params.append('query', options.query);
+        log.trace('getUsers', 'Query params:', params.toString());
         const [usersData, countData] = await Promise.all([
             makeClerkRequest(`/users?${params}`),
             makeClerkRequest(`/users/count?${params}`)
         ]);
         // Extract users array - Clerk API returns { data: [...] } or array directly
         const users = Array.isArray(usersData) ? usersData : usersData?.data || [];
+        log.trace('getUsers', 'Fetched', users.length, 'users, total count:', countData);
         // Ensure all data is serializable by converting to plain objects
         const serializedUsers = JSON.parse(JSON.stringify(users));
         const serializedCountData = JSON.parse(JSON.stringify(countData));
@@ -216,11 +286,12 @@ export const getUsers = query('unchecked', async (options) => {
         }));
     }
     catch (error) {
-        console.error('[getUsers] Error:', error);
+        log.error('getUsers', 'Error:', error);
         throw new Error(`Failed to fetch users: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
 });
 export const createUser = command('unchecked', async (userData) => {
+    log.trace('createUser', 'Called with userData:', { ...userData, private_metadata: '[REDACTED]' });
     const emailAddress = userData.email_addresses?.[0]?.email_address || '';
     if (!emailAddress) {
         throw new Error('Email address is required');
@@ -234,13 +305,16 @@ export const createUser = command('unchecked', async (userData) => {
             ...(userDataOnly.username && { username: userDataOnly.username }),
             ...(userDataOnly.private_metadata && { private_metadata: userDataOnly.private_metadata })
         };
+        log.trace('createUser', 'Creating Clerk user with data:', clerkUserData);
         let result = await makeClerkRequest('/users', {
             method: 'POST',
             body: JSON.stringify(clerkUserData)
         });
         // Ensure result is serializable
         result = JSON.parse(JSON.stringify(result));
+        log.trace('createUser', 'Clerk user created, id:', result.id);
         if (ORGANIZATION_ID) {
+            log.trace('createUser', 'Adding user to org:', ORGANIZATION_ID);
             try {
                 await makeClerkRequest(`/organizations/${ORGANIZATION_ID}/memberships`, {
                     method: 'POST',
@@ -249,24 +323,29 @@ export const createUser = command('unchecked', async (userData) => {
                         role: 'org:member'
                     })
                 });
+                log.trace('createUser', 'User added to org successfully');
             }
             catch (orgError) {
-                console.error('[createUser] Failed to add user to organization:', orgError);
+                log.error('createUser', 'Failed to add user to organization:', orgError);
+                log.trace('createUser', 'Rolling back: deleting user', result.id);
                 try {
                     await makeClerkRequest(`/users/${result.id}`, {
                         method: 'DELETE'
                     });
+                    log.trace('createUser', 'Rollback delete successful');
                 }
                 catch (deleteError) {
-                    console.error('[createUser] Failed to delete user after org membership failure:', deleteError);
+                    log.error('createUser', 'Failed to delete user after org membership failure:', deleteError);
                 }
                 throw new Error(`Failed to add user to organization. User creation rolled back. Error: ${orgError instanceof Error ? orgError.message : String(orgError)}`);
             }
         }
         if (permissions && permissions.length > 0) {
+            log.trace('createUser', 'Assigning permissions:', permissions);
             try {
                 const adminKeyResult = await createUserPermissions(emailAddress, permissions);
                 const apiKey = adminKeyResult?.data?.key;
+                log.trace('createUser', 'Admin key created, has key:', !!apiKey);
                 if (adminKeyResult && apiKey) {
                     const updatedUser = await makeClerkRequest(`/users/${result.id}`, {
                         method: 'PATCH',
@@ -284,22 +363,27 @@ export const createUser = command('unchecked', async (userData) => {
                 result.permissionsAssigned = permissions;
             }
             catch (permissionError) {
-                console.error('[createUser] Failed to assign permissions:', permissionError);
+                log.error('createUser', 'Failed to assign permissions:', permissionError);
                 result.warning = 'User created but permissions assignment failed';
                 result.permissionError =
                     permissionError instanceof Error ? permissionError.message : String(permissionError);
             }
         }
+        log.trace('createUser', 'Final result:', {
+            id: result.id,
+            permissionsAssigned: result.permissionsAssigned
+        });
         // Final serialization check before returning
         return JSON.parse(JSON.stringify(result));
     }
     catch (error) {
-        console.error('[createUser] Error:', error);
+        log.error('createUser', 'Error:', error);
         handleClerkError(error, 'Failed to create user');
     }
 });
 export const updateUser = command('unchecked', async (options) => {
     const { userId, userData } = options;
+    log.trace('updateUser', 'Called for userId:', userId, 'fields:', Object.keys(userData));
     try {
         const updateData = {};
         if (userData.first_name !== undefined)
@@ -312,6 +396,7 @@ export const updateUser = command('unchecked', async (options) => {
         if (userData.private_metadata !== undefined) {
             updateData.private_metadata = userData.private_metadata;
         }
+        log.trace('updateUser', 'Update payload:', updateData);
         let result = await makeClerkRequest(`/users/${userId}`, {
             method: 'PATCH',
             body: JSON.stringify(updateData)
@@ -319,79 +404,95 @@ export const updateUser = command('unchecked', async (options) => {
         // Ensure result is serializable
         result = JSON.parse(JSON.stringify(result));
         if (userData.permissions !== undefined) {
+            log.trace('updateUser', 'Updating permissions:', userData.permissions);
             try {
                 await updateUserPermissions({ userId, permissions: userData.permissions });
             }
             catch (permError) {
-                console.error('[updateUser] Failed to update permissions:', permError);
+                log.error('updateUser', 'Failed to update permissions:', permError);
             }
         }
+        log.trace('updateUser', 'Done, result id:', result.id);
         // Final serialization check before returning
         return JSON.parse(JSON.stringify(result));
     }
     catch (error) {
-        console.error('[updateUser] Error:', error);
+        log.error('updateUser', 'Error:', error);
         handleClerkError(error, 'Failed to update user');
     }
 });
 export const deleteUser = command('unchecked', async (userId) => {
+    log.trace('deleteUser', 'Called for userId:', userId);
     try {
         await makeClerkRequest(`/users/${userId}`, {
             method: 'DELETE'
         });
+        log.trace('deleteUser', 'Deleted successfully');
     }
     catch (error) {
-        console.error('[deleteUser] Error:', error);
+        log.error('deleteUser', 'Error:', error);
         throw new Error(`Failed to delete user: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
 });
 export const deleteUsers = command('unchecked', async (userIds) => {
+    log.trace('deleteUsers', 'Called for userIds:', userIds);
     try {
         await Promise.all(userIds.map((userId) => makeClerkRequest(`/users/${userId}`, {
             method: 'DELETE'
         })));
+        log.trace('deleteUsers', 'All', userIds.length, 'users deleted successfully');
     }
     catch (error) {
-        console.error('[deleteUsers] Error:', error);
+        log.error('deleteUsers', 'Error:', error);
         throw new Error(`Failed to delete users: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
 });
 async function fetchUserPermissions(email) {
+    log.trace('fetchUserPermissions', 'Called for email:', email);
     try {
         const userData = await makeAdminRequest(`/admin/keys?client_id=${CLIENT_ID}&sub=${encodeURIComponent(email)}`);
+        log.trace('fetchUserPermissions', 'Raw keys data:', userData);
         if (userData?.data?.data && Array.isArray(userData.data.data)) {
             userData.data.data = userData.data.data.filter((key) => key.status === 'active');
+            log.trace('fetchUserPermissions', 'Active keys count:', userData.data.data.length);
         }
         if (userData?.data?.data && Array.isArray(userData.data.data)) {
             // Deduplicate permissions by using a Set
             const allPermissions = userData.data.data.flatMap((key) => key.scopes || []);
             const dedupedPermissions = Array.from(new Set(allPermissions));
+            log.trace('fetchUserPermissions', 'Deduped permissions:', dedupedPermissions);
             return dedupedPermissions;
         }
         else if (userData?.scopes) {
             const permissions = Array.isArray(userData.scopes) ? userData.scopes : [userData.scopes];
+            log.trace('fetchUserPermissions', 'Permissions from scopes field:', permissions);
             return permissions;
         }
+        log.trace('fetchUserPermissions', 'No permissions found, returning []');
         return [];
     }
     catch (error) {
-        console.error('[fetchUserPermissions] Error fetching user permissions:', error);
+        log.error('fetchUserPermissions', 'Error fetching user permissions:', error);
+        log.trace('fetchUserPermissions', 'Falling back to full keys search');
         try {
             const allKeysData = await makeAdminRequest('/admin/keys');
             const userKey = allKeysData.data.data.find((key) => key.sub === email && key.client_id === CLIENT_ID && key.status === 'active');
             if (userKey) {
                 const permissions = Array.isArray(userKey.scopes) ? userKey.scopes : [userKey.scopes];
+                log.trace('fetchUserPermissions', 'Found via fallback:', permissions);
                 return permissions;
             }
+            log.trace('fetchUserPermissions', 'No key found in fallback search');
             return [];
         }
         catch (searchError) {
-            console.error('[fetchUserPermissions] Error searching for user by sub:', searchError);
+            log.error('fetchUserPermissions', 'Error searching for user by sub:', searchError);
             throw new Error('Failed to fetch user permissions');
         }
     }
 }
 export const getUserPermissions = query('unchecked', async (userId) => {
+    log.trace('getUserPermissions', 'Called for userId:', userId);
     try {
         // Fetch user from Clerk to get email
         const user = await makeClerkRequest(`/users/${userId}`);
@@ -399,12 +500,14 @@ export const getUserPermissions = query('unchecked', async (userId) => {
         if (!email) {
             throw new Error('User has no email address');
         }
+        log.trace('getUserPermissions', 'Resolved email:', email);
         const permissions = await fetchUserPermissions(email);
+        log.trace('getUserPermissions', 'Returning permissions:', permissions);
         // Ensure permissions array is serializable
         return JSON.parse(JSON.stringify(permissions));
     }
     catch (error) {
-        console.error('[getUserPermissions] Error:', error);
+        log.error('getUserPermissions', 'Error:', error);
         throw new Error(`Failed to fetch user permissions: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
 });
@@ -419,6 +522,7 @@ async function refreshTokenIfSelfUpdate(userId) {
             return;
         const currentUser = getAuth();
         const isSelfUpdate = currentUser?.userId === userId;
+        log.trace('refreshTokenIfSelfUpdate', 'isSelfUpdate:', isSelfUpdate);
         if (isSelfUpdate) {
             try {
                 // Try to dynamically import token manager - this is app-specific
@@ -431,6 +535,7 @@ async function refreshTokenIfSelfUpdate(userId) {
                     tokenManager.clearTokenCookies(event.cookies);
                     const newToken = await tokenManager.getAccessToken(event.cookies, event, true);
                     tokenManager.setClientAccessibleToken(event.cookies, newToken);
+                    log.trace('refreshTokenIfSelfUpdate', 'Token refreshed successfully');
                 }
             }
             catch {
@@ -444,6 +549,7 @@ async function refreshTokenIfSelfUpdate(userId) {
 }
 export const updateUserPermissions = command('unchecked', async (options) => {
     const { userId, permissions } = options;
+    log.trace('updateUserPermissions', 'Called for userId:', userId, 'permissions:', permissions);
     try {
         // Validate permissions - require at least one permission scope
         if (permissions.length === 0) {
@@ -455,11 +561,14 @@ export const updateUserPermissions = command('unchecked', async (options) => {
         if (!email) {
             throw new Error('User has no email address');
         }
+        log.trace('updateUserPermissions', 'Resolved email:', email);
         // Fetch user's active keys
         const allKeysData = await makeAdminRequest(`/admin/keys?client_id=${CLIENT_ID}&sub=${encodeURIComponent(email)}`);
         const userKeys = (allKeysData?.data?.data || []).filter((key) => key.status === 'active');
+        log.trace('updateUserPermissions', 'Active keys count:', userKeys.length);
         if (userKeys.length === 0) {
             // No active key exists, create new one
+            log.trace('updateUserPermissions', 'No active key, creating new one');
             const newKeyResult = await createUserPermissions(email, permissions);
             const newApiKey = newKeyResult?.data?.key;
             if (newApiKey) {
@@ -472,11 +581,13 @@ export const updateUserPermissions = command('unchecked', async (options) => {
                         }
                     })
                 });
+                log.trace('updateUserPermissions', 'New key stored in Clerk metadata');
             }
         }
         else {
             // Use PUT to update existing key (per Mako Auth API spec)
             const keyId = userKeys[0].id;
+            log.trace('updateUserPermissions', 'Updating existing key:', keyId);
             // Get the API key string before updating
             const keyData = await makeAdminRequest(`/admin/keys/${keyId}`);
             const apiKeyString = keyData?.data?.key;
@@ -486,45 +597,52 @@ export const updateUserPermissions = command('unchecked', async (options) => {
                     scopes: permissions
                 })
             });
+            log.trace('updateUserPermissions', 'Key updated, verifying token...');
             // Verify the token has updated scopes
             if (apiKeyString) {
                 try {
                     const verification = await verifyApiKeyToken(apiKeyString);
-                    console.log('[updateUserPermissions] Key verification:', verification);
+                    log.info('updateUserPermissions', 'Key verification:', verification);
                     if (verification.valid) {
                         // Check if the scopes match what we expect
                         // Note: permissions.length > 0 is guaranteed by validation above
                         const scopesMatch = permissions.length > 0 &&
                             permissions.every((perm) => verification.scopes?.includes(perm));
                         if (!scopesMatch) {
-                            console.warn('[updateUserPermissions] Scopes mismatch. Expected:', permissions, 'Got:', verification.scopes);
+                            log.warn('updateUserPermissions', 'Scopes mismatch. Expected:', permissions, 'Got:', verification.scopes);
+                        }
+                        else {
+                            log.trace('updateUserPermissions', 'Scopes match confirmed');
                         }
                     }
                     else {
-                        console.warn('[updateUserPermissions] Token verification failed:', verification.error);
+                        log.warn('updateUserPermissions', 'Token verification failed:', verification.error);
                     }
                 }
                 catch (verifyError) {
-                    console.warn('[updateUserPermissions] Could not verify token:', verifyError);
+                    log.warn('updateUserPermissions', 'Could not verify token:', verifyError);
                 }
             }
             // Clean up any extra keys (there should only be one)
             if (userKeys.length > 1) {
+                log.trace('updateUserPermissions', 'Cleaning up', userKeys.length - 1, 'extra keys');
                 await Promise.all(userKeys.slice(1).map((key) => makeAdminRequest(`/admin/keys/${key.id}`, {
                     method: 'DELETE'
                 }).catch((err) => {
-                    console.warn(`[updateUserPermissions] Failed to delete extra key ${key.id}:`, err);
+                    log.warn('updateUserPermissions', `Failed to delete extra key ${key.id}:`, err);
                 })));
             }
         }
         await refreshTokenIfSelfUpdate(userId);
+        log.trace('updateUserPermissions', 'Done');
     }
     catch (error) {
-        console.error('[updateUserPermissions] Error:', error);
+        log.error('updateUserPermissions', 'Error:', error);
         throw new Error(`Failed to update user permissions: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
 });
 export const generateApiKey = command('unchecked', async (options) => {
+    log.trace('generateApiKey', 'Called with userId:', options.userId, 'permissions:', options.permissions, 'revokeOld:', options.revokeOld);
     try {
         // No default permissions - require explicit permissions to be passed
         if (options.permissions.length === 0) {
@@ -536,9 +654,11 @@ export const generateApiKey = command('unchecked', async (options) => {
         if (!email) {
             throw new Error('User has no email address');
         }
+        log.trace('generateApiKey', 'Resolved email:', email);
         // Check if user has existing active key
         const allKeysData = await makeAdminRequest(`/admin/keys?client_id=${CLIENT_ID}&sub=${encodeURIComponent(email)}`);
         const userKeys = (allKeysData?.data?.data || []).filter((key) => key.status === 'active');
+        log.trace('generateApiKey', 'Existing active keys:', userKeys.length);
         let newApiKey;
         let wasRotated = false;
         let oldApiKey;
@@ -547,8 +667,10 @@ export const generateApiKey = command('unchecked', async (options) => {
         if (userKeys.length > 0 && options.revokeOld) {
             // Use rotate endpoint (per Mako Auth API spec)
             const keyId = userKeys[0].id;
+            log.trace('generateApiKey', 'Rotating key:', keyId);
             // Get the old API key from Clerk's private_metadata
             oldApiKey = currentUser?.private_metadata?.mako_api_key;
+            log.trace('generateApiKey', 'Old key exists in metadata:', !!oldApiKey);
             const rotateResult = await makeAdminRequest(`/admin/keys/${keyId}/rotate`, {
                 method: 'POST',
                 body: JSON.stringify({
@@ -561,43 +683,48 @@ export const generateApiKey = command('unchecked', async (options) => {
             if (!newApiKey) {
                 throw new Error('Failed to rotate API key - no key in response');
             }
+            log.trace('generateApiKey', 'Rotation successful, new key obtained');
             // Verify old key is revoked
             if (oldApiKey) {
                 try {
                     const oldKeyVerification = await verifyApiKeyToken(oldApiKey);
-                    console.log('[generateApiKey] Old key verification:', oldKeyVerification.valid ? 'Still valid ⚠️' : 'Revoked ✓');
+                    log.info('generateApiKey', 'Old key verification:', oldKeyVerification.valid ? 'Still valid (unexpected)' : 'Revoked (expected)');
                     if (oldKeyVerification.valid) {
-                        console.warn('[generateApiKey] Old API key still valid after rotation');
+                        log.warn('generateApiKey', 'Old API key still valid after rotation');
                     }
                 }
                 catch (verifyError) {
-                    console.warn('[generateApiKey] Could not verify old key revocation:', verifyError);
+                    log.warn('generateApiKey', 'Could not verify old key revocation:', verifyError);
                 }
             }
             // Verify new key works with correct scopes
             try {
                 const newKeyVerification = await verifyApiKeyToken(newApiKey);
-                console.log('[generateApiKey] New key verification:', newKeyVerification);
+                log.info('generateApiKey', 'New key verification:', newKeyVerification);
                 if (newKeyVerification.valid) {
                     // Check if the scopes match what we expect
                     const scopesMatch = options.permissions.every((perm) => newKeyVerification.scopes?.includes(perm));
                     if (!scopesMatch) {
-                        console.warn('[generateApiKey] Scopes mismatch. Expected:', options.permissions, 'Got:', newKeyVerification.scopes);
+                        log.warn('generateApiKey', 'Scopes mismatch. Expected:', options.permissions, 'Got:', newKeyVerification.scopes);
                         verificationWarning = `New API key scopes do not match expected permissions. Expected: ${options.permissions.join(', ')}, Got: ${newKeyVerification.scopes?.join(', ') || 'none'}`;
                     }
+                    else {
+                        log.trace('generateApiKey', 'New key scopes verified successfully');
+                    }
                 }
                 else {
-                    console.warn('[generateApiKey] New key verification failed:', newKeyVerification.error);
+                    log.warn('generateApiKey', 'New key verification failed:', newKeyVerification.error);
                     verificationWarning = `New API key failed verification - ${newKeyVerification.error || 'Unknown error'}`;
                 }
             }
             catch (verifyError) {
-                console.warn('[generateApiKey] Could not verify new key:', verifyError);
+                log.warn('generateApiKey', 'Could not verify new key:', verifyError);
                 verificationWarning = `Could not verify new API key - ${verifyError instanceof Error ? verifyError.message : 'Unknown error'}`;
             }
         }
         else {
             // Create new key if none exists or revokeOld is false
+            log.trace('generateApiKey', 'Creating new key (no rotation)');
             const createData = await createUserPermissions(email, options.permissions);
             if (!createData) {
                 throw new Error('Failed to create admin key');
@@ -606,6 +733,7 @@ export const generateApiKey = command('unchecked', async (options) => {
             if (!newApiKey) {
                 throw new Error('Failed to generate API key - no key in response');
             }
+            log.trace('generateApiKey', 'New key created');
         }
         // Update Clerk profile with new key
         try {
@@ -623,11 +751,12 @@ export const generateApiKey = command('unchecked', async (options) => {
                         }
                     })
                 });
+                log.trace('generateApiKey', 'Clerk metadata updated with new key');
             }
         }
         catch (clerkError) {
-            console.error('[generateApiKey] Failed to update Clerk profile:', clerkError);
-            console.warn('[generateApiKey] Key generated but could not update Clerk profile');
+            log.error('generateApiKey', 'Failed to update Clerk profile:', clerkError);
+            log.warn('generateApiKey', 'Key generated but could not update Clerk profile');
         }
         const result = {
             success: true,
@@ -635,18 +764,20 @@ export const generateApiKey = command('unchecked', async (options) => {
             message: wasRotated ? 'API key rotated successfully' : 'API key generated successfully',
             verificationWarning
         };
+        log.trace('generateApiKey', 'Done, wasRotated:', wasRotated);
         return JSON.parse(JSON.stringify(result));
     }
     catch (error) {
-        console.error('[generateApiKey] Error:', error);
+        log.error('generateApiKey', 'Error:', error);
         throw new Error(`Failed to generate API key: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
 });
 export const verifyToken = command('unchecked', async (options) => {
+    log.trace('verifyToken', 'Called');
     try {
         const result = await verifyApiKeyToken(options.apiKey);
-        console.log('[verifyToken] Current scopes:', result.scopes);
-        console.log('[verifyToken] Sub:', result.sub);
+        log.info('verifyToken', 'Current scopes:', result.scopes);
+        log.info('verifyToken', 'Sub:', result.sub);
         // Also return the issued token for debugging
         if (result.valid) {
             try {
@@ -660,26 +791,30 @@ export const verifyToken = command('unchecked', async (options) => {
                     valid: result.valid,
                     scopes: result.scopes,
                     sub: result.sub,
+                    client_id: result.client_id,
                     token: tokenResult.data?.data?.access_token
                 };
+                log.trace('verifyToken', 'Returning valid result with token');
                 // Ensure result is serializable
                 return JSON.parse(JSON.stringify(finalResult));
             }
             catch (tokenError) {
-                console.warn('[verifyToken] Could not fetch token:', tokenError);
+                log.warn('verifyToken', 'Could not fetch token:', tokenError);
                 // Return result without token
                 return JSON.parse(JSON.stringify({
                     valid: result.valid,
                     scopes: result.scopes,
-                    sub: result.sub
+                    sub: result.sub,
+                    client_id: result.client_id
                 }));
             }
         }
+        log.trace('verifyToken', 'Returning invalid result');
         // Ensure result is serializable
         return JSON.parse(JSON.stringify(result));
     }
     catch (error) {
-        console.error('[verifyToken] Error:', error);
+        log.error('verifyToken', 'Error:', error);
         const errorResult = {
             valid: false,
             error: error instanceof Error ? error.message : 'Unknown error during verification'

package/dist/index.d.ts

@@ -989,6 +989,7 @@ export interface UserModalProps {
     user?: User | null;
     roles?: Role[];
     adapter?: UserManagementAdapter;
+    loadingPermissions?: boolean;
     onSave: (user: User, mode: 'create' | 'edit') => void | Promise<void>;
     onClose?: () => void;
     class?: ClassValue;

package/dist/layout/table/Table.svelte

@@ -327,35 +327,41 @@
 
 						<tbody class={tbodyClasses}>
 							{#if loading}
-								<tr>
-									<td
-										colspan={selectable ? columns.length + 1 : columns.length}
-										class={cn(tdClasses, 'py-8 text-center')}
-									>
-										<div class="flex justify-center">
-											<svg
-												class="text-default-500 h-6 w-6 animate-spin"
-												xmlns="http://www.w3.org/2000/svg"
-												fill="none"
-												viewBox="0 0 24 24"
-											>
-												<circle
-													class="opacity-25"
-													cx="12"
-													cy="12"
-													r="10"
-													stroke="currentColor"
-													stroke-width="4"
-												></circle>
-												<path
-													class="opacity-75"
-													fill="currentColor"
-													d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-												></path>
-											</svg>
-										</div>
-									</td>
-								</tr>
+								{#each Array.from({ length: Math.min(internalPageSize, 5) }, (__, i) => i) as rowIdx (rowIdx)}
+									<tr class={cn(trClass, rowIdx % 2 === 1 && striped ? 'bg-default-50' : '')}>
+										{#if selectable}
+											<td class={cn(tdClasses, 'text-center')}>
+												<div class="bg-default-200 mx-auto h-4 w-4 animate-pulse rounded"></div>
+											</td>
+										{/if}
+										{#each columns as column, colIdx (column.key)}
+											<td class={cn(tdClasses, column.class)}>
+												{#if colIdx === 0}
+													<div class="flex items-center gap-3">
+														<div
+															class="bg-default-200 h-8 w-8 shrink-0 animate-pulse rounded-full"
+														></div>
+														<div class="flex-1 space-y-2">
+															<div class="bg-default-200 h-3.5 w-28 animate-pulse rounded"></div>
+															<div class="bg-default-100 h-3 w-20 animate-pulse rounded"></div>
+														</div>
+													</div>
+												{:else if colIdx === columns.length - 1}
+													<div class="flex items-center justify-end gap-2">
+														<div class="bg-default-200 h-5 w-5 animate-pulse rounded"></div>
+														<div class="bg-default-200 h-5 w-5 animate-pulse rounded"></div>
+														<div class="bg-default-200 h-5 w-5 animate-pulse rounded"></div>
+													</div>
+												{:else}
+													<div
+														class="bg-default-200 h-3.5 animate-pulse rounded"
+														style="width: {60 + ((rowIdx * 17 + colIdx * 31) % 40)}%"
+													></div>
+												{/if}
+											</td>
+										{/each}
+									</tr>
+								{/each}
 							{:else if getPaginatedData().length === 0}
 								<tr>
 									<td
@@ -555,35 +561,41 @@
 
 				<tbody class={tbodyClasses}>
 					{#if loading}
-						<tr>
-							<td
-								colspan={selectable ? columns.length + 1 : columns.length}
-								class={cn(tdClasses, 'py-8 text-center')}
-							>
-								<div class="flex justify-center">
-									<svg
-										class="text-default-500 h-6 w-6 animate-spin"
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-									>
-										<circle
-											class="opacity-25"
-											cx="12"
-											cy="12"
-											r="10"
-											stroke="currentColor"
-											stroke-width="4"
-										></circle>
-										<path
-											class="opacity-75"
-											fill="currentColor"
-											d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-										></path>
-									</svg>
-								</div>
-							</td>
-						</tr>
+						{#each Array.from({ length: Math.min(internalPageSize, 5) }, (__, i) => i) as rowIdx (rowIdx)}
+							<tr class={cn(trClass, rowIdx % 2 === 1 && striped ? 'bg-default-50' : '')}>
+								{#if selectable}
+									<td class={cn(tdClasses, 'text-center')}>
+										<div class="bg-default-200 mx-auto h-4 w-4 animate-pulse rounded"></div>
+									</td>
+								{/if}
+								{#each columns as column, colIdx (column.key)}
+									<td class={cn(tdClasses, column.class)}>
+										{#if colIdx === 0}
+											<div class="flex items-center gap-3">
+												<div
+													class="bg-default-200 h-8 w-8 shrink-0 animate-pulse rounded-full"
+												></div>
+												<div class="flex-1 space-y-2">
+													<div class="bg-default-200 h-3.5 w-28 animate-pulse rounded"></div>
+													<div class="bg-default-100 h-3 w-20 animate-pulse rounded"></div>
+												</div>
+											</div>
+										{:else if colIdx === columns.length - 1}
+											<div class="flex items-center justify-end gap-2">
+												<div class="bg-default-200 h-5 w-5 animate-pulse rounded"></div>
+												<div class="bg-default-200 h-5 w-5 animate-pulse rounded"></div>
+												<div class="bg-default-200 h-5 w-5 animate-pulse rounded"></div>
+											</div>
+										{:else}
+											<div
+												class="bg-default-200 h-3.5 animate-pulse rounded"
+												style="width: {60 + ((rowIdx * 17 + colIdx * 31) % 40)}%"
+											></div>
+										{/if}
+									</td>
+								{/each}
+							</tr>
+						{/each}
 					{:else if getPaginatedData().length === 0}
 						<tr>
 							<td

package/dist/user-management/UserManagement.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { toast } from 'svelte-sonner';
 	import { PageHeader, Button, cn } from '../index.js';
 	import UserTable from './UserTable.svelte';
 	import UserModal from './UserModal.svelte';
@@ -17,7 +18,7 @@
 	// Internal state
 	let users = $state<User[]>([]);
 	let totalUsers = $state(0);
-	let loading = $state(false);
+	let loading = $state(true);
 	let currentPage = $state(1);
 	let pageSize = $state(10);
 	let sortBy = $state<string | null>(null);
@@ -29,6 +30,7 @@
 	let showEditCreateModal = $state(false);
 	let showViewModal = $state(false);
 	let selectedUser = $state<User | null>(null);
+	let loadingPermissions = $state(false);
 
 	// Bulk action states
 	let selectedUsers = new SvelteSet<string>();
@@ -52,6 +54,7 @@
 			totalUsers = result.totalUsers;
 		} catch (error) {
 			console.error('Error loading users:', error);
+			toast.error('Failed to load users');
 		} finally {
 			loading = false;
 		}
@@ -88,6 +91,7 @@
 		showViewModal = true;
 		// Fetch fresh permissions for the user
 		if (user.id) {
+			loadingPermissions = true;
 			try {
 				const permissions = await adapter.getUserPermissions(user.id);
 				selectedUser = {
@@ -96,6 +100,9 @@
 				};
 			} catch (error) {
 				console.error('Error fetching user permissions:', error);
+				toast.error('Failed to load user permissions');
+			} finally {
+				loadingPermissions = false;
 			}
 		}
 	}
@@ -105,6 +112,7 @@
 		showEditCreateModal = true;
 		// Fetch fresh permissions for the user
 		if (user.id) {
+			loadingPermissions = true;
 			try {
 				const permissions = await adapter.getUserPermissions(user.id);
 				selectedUser = {
@@ -113,6 +121,9 @@
 				};
 			} catch (error) {
 				console.error('Error fetching user permissions:', error);
+				toast.error('Failed to load user permissions');
+			} finally {
+				loadingPermissions = false;
 			}
 		}
 	}
@@ -129,6 +140,17 @@
 		}
 	}
 
+	// Sync any changes made to selectedUser (e.g. API key regeneration) back into the users array
+	function handleModalClose() {
+		if (selectedUser) {
+			const idx = users.findIndex((u) => u.id === selectedUser!.id);
+			if (idx !== -1) {
+				users[idx] = { ...selectedUser };
+			}
+		}
+		selectedUser = null;
+	}
+
 	// Save handlers
 	async function handleUserSave(user: User, mode: 'create' | 'edit') {
 		try {
@@ -143,6 +165,7 @@
 			await refreshUsersQuery();
 		} catch (error) {
 			console.error('Error saving user:', error);
+			toast.error(mode === 'create' ? 'Failed to create user' : 'Failed to update user');
 			// Reload on error to restore correct state
 			await loadUsers();
 			throw error;
@@ -175,6 +198,7 @@
 			await refreshUsersQuery();
 		} catch (error) {
 			console.error('Error deleting user:', error);
+			toast.error('Failed to delete user');
 			// Reload on error to restore correct state
 			await loadUsers();
 			throw error;
@@ -217,6 +241,7 @@
 				await refreshUsersQuery();
 			} catch (error) {
 				console.error('Error deleting users:', error);
+				toast.error('Failed to delete users');
 				// Reload on error to restore correct state
 				await loadUsers();
 				throw error;
@@ -296,7 +321,7 @@
 		bind:user={selectedUser}
 		{permissions}
 		onEdit={handleEditFromView}
-		onClose={() => (selectedUser = null)}
+		onClose={handleModalClose}
 	/>
 
 	<!-- User Edit/Create Modal -->
@@ -305,7 +330,8 @@
 		bind:user={selectedUser}
 		{roles}
 		{adapter}
+		{loadingPermissions}
 		onSave={handleUserSave}
-		onClose={() => (selectedUser = null)}
+		onClose={handleModalClose}
 	/>
 </div>

package/dist/user-management/UserModal.svelte

@@ -17,6 +17,7 @@
 		user = $bindable(),
 		roles = [],
 		adapter,
+		loadingPermissions = false,
 		onSave,
 		onClose,
 		class: className
@@ -36,6 +37,7 @@
 		valid?: boolean;
 		scopes?: string[];
 		sub?: string;
+		client_id?: string;
 		error?: string;
 	} | null>(null);
 	let initialRole = $state<string>('');
@@ -490,6 +492,11 @@
 												Sub: {tokenVerification.sub}
 											</p>
 										{/if}
+										{#if tokenVerification.client_id}
+											<p class="text-success-700 mt-1 text-xs">
+												Client ID: {tokenVerification.client_id}
+											</p>
+										{/if}
 										{#if tokenVerification.scopes && tokenVerification.scopes.length > 0}
 											<p class="text-success-700 mt-1 text-xs">
 												Scopes: {tokenVerification.scopes.join(', ')}
@@ -583,7 +590,24 @@
 			{/if}
 
 			<!-- Permission Preview -->
-			{#if formData.permissions && formData.permissions.length > 0}
+			{#if loadingPermissions && mode === 'edit'}
+				<div>
+					<div class="bg-default-200 mb-2 h-4 w-32 animate-pulse rounded"></div>
+					<div class="bg-default-50 rounded-lg p-3">
+						<div class="space-y-3">
+							{#each [0, 1, 2] as i (i)}
+								<div class="flex items-center gap-2">
+									<div class="bg-default-200 h-1.5 w-1.5 shrink-0 animate-pulse rounded-full"></div>
+									<div
+										class="bg-default-200 h-3.5 animate-pulse rounded"
+										style="width: {50 + i * 20}%"
+									></div>
+								</div>
+							{/each}
+						</div>
+					</div>
+				</div>
+			{:else if formData.permissions && formData.permissions.length > 0}
 				<div>
 					<h4 class="text-default-700 mb-2 text-sm font-medium">
 						Permissions ({formData.permissions.length})

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "1.7.6",
+	"version": "1.7.11",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {
@@ -23,14 +23,6 @@
 		"test:e2e:debug": "playwright test --debug",
 		"test:e2e:report": "playwright show-report",
 		"test": "npm run test:unit -- --run",
-		"pub:minor": "git add . && git commit -m \"chore: prepare for publish minor\" && npm version minor && git push --follow-tags && npm publish",
-		"pub:patch": "git add . && git commit -m \"chore: prepare for publish patch\" && npm version patch && git push --follow-tags && npm publish",
-		"pub:prelish": "git add . && git commit -m \"chore: prepare for publish premajor\" && npm version premajor && git push --follow-tags && npm publish",
-		"pub:major": "git add . && git commit -m \"chore: prepare for publish major\" && npm version major && git push --follow-tags && npm publish",
-		"pub:preminor": "git add . && git commit -m \"chore: prepare for publish preminor\" && npm version preminor && git push --follow-tags && npm publish",
-		"pub:prepatch": "git add . && git commit -m \"chore: prepare for publish prepatch\" && npm version prepatch && git push --follow-tags && npm publish",
-		"pub:prerelease": "git add . && git commit -m \"chore: prepare for publish prerelease\" && npm version prerelease && git push --follow-tags && npm publish",
-		"pub:from-git": "git add . && git commit -m \"chore: prepare for publish from-git\" && npm version from-git && git push --follow-tags && npm publish",
 		"storybook": "storybook dev -p 6006",
 		"build-storybook": "storybook build"
 	},