@vc-shell/framework 1.2.2 → 1.2.3-beta.0

package/core/composables/index.ts

@@ -21,3 +21,5 @@ export * from "./useSettingsMenu";
 export * from "./useToolbar";
 export * from "./useDynamicProperties";
 export * from "./useBlade";
+// useBladeSelection and useAiAgent are now part of the ai-agent plugin
+// export * from "./core/plugins/ai-agent";

package/core/composables/useAssets/index.ts

@@ -1,6 +1,12 @@
-import { Ref, computed, ref, ComputedRef } from "vue";
+import { computed, ref, ComputedRef } from "vue";
 import * as _ from "lodash-es";
 import { ICommonAsset } from "../../types";
+import { createLogger } from "../../utilities";
+
+const logger = createLogger("use-assets");
+
+/** Maximum number of concurrent uploads */
+const MAX_CONCURRENT_UPLOADS = 4;
 
 export interface IUseAssets {
   upload: (files: FileList, uploadPath: string, startingSortOrder?: number) => Promise<ICommonAsset[]>;
@@ -9,6 +15,60 @@ export interface IUseAssets {
   loading: ComputedRef<boolean>;
 }
 
+/**
+ * Uploads a single file and returns the asset
+ */
+async function uploadSingleFile(
+  file: File,
+  uploadPath: string,
+  index: number,
+  startingSortOrder?: number,
+): Promise<ICommonAsset | null> {
+  const formData = new FormData();
+  formData.append("file", file);
+
+  const result = await fetch(`/api/assets?folderUrl=/${uploadPath}`, {
+    method: "POST",
+    body: formData,
+  });
+
+  const response = await result.json();
+
+  if (response?.length) {
+    const uploadedFile = response[0];
+    uploadedFile.createdDate = new Date();
+    uploadedFile.sortOrder = startingSortOrder !== undefined && startingSortOrder >= 0 ? startingSortOrder + index + 1 : 0;
+    uploadedFile.url = uploadedFile.url ? decodeURI(uploadedFile.url) : "";
+
+    if ("size" in uploadedFile) {
+      uploadedFile.size = file.size;
+    }
+
+    return uploadedFile;
+  }
+
+  return null;
+}
+
+/**
+ * Processes items in batches with concurrency limit
+ */
+async function processBatched<T, R>(
+  items: T[],
+  processor: (item: T, index: number) => Promise<R>,
+  concurrency: number,
+): Promise<R[]> {
+  const results: R[] = [];
+
+  for (let i = 0; i < items.length; i += concurrency) {
+    const batch = items.slice(i, i + concurrency);
+    const batchResults = await Promise.all(batch.map((item, batchIndex) => processor(item, i + batchIndex)));
+    results.push(...batchResults);
+  }
+
+  return results;
+}
+
 export function useAssets(): IUseAssets {
   const loading = ref(false);
 
@@ -16,35 +76,19 @@ export function useAssets(): IUseAssets {
     try {
       loading.value = true;
 
-      const uploadedAssets: Ref<ICommonAsset[]> = ref([]);
-      for (let i = 0; i < files.length; i++) {
-        const formData = new FormData();
-        formData.append("file", files[i]);
-
-        const result = await fetch(`/api/assets?folderUrl=/${uploadPath}`, {
-          method: "POST",
-          body: formData,
-        });
-
-        const response = await result.json();
+      const fileArray = Array.from(files);
 
-        if (response?.length) {
-          const file = response[0];
-          file.createdDate = new Date();
-          file.sortOrder = startingSortOrder !== undefined && startingSortOrder >= 0 ? startingSortOrder + i + 1 : 0;
-          file.url = file.url ? decodeURI(file.url) : "";
-
-          if ("size" in file) {
-            file.size = files[i].size;
-          }
-
-          uploadedAssets.value.push(file);
-        }
-      }
+      // Upload files in parallel batches
+      const uploadResults = await processBatched(
+        fileArray,
+        (file, index) => uploadSingleFile(file, uploadPath, index, startingSortOrder),
+        MAX_CONCURRENT_UPLOADS,
+      );
 
-      return uploadedAssets.value;
+      // Filter out null results and return successful uploads
+      return uploadResults.filter((asset): asset is ICommonAsset => asset !== null);
     } catch (error) {
-      console.error(error);
+      logger.error("Upload failed:", error);
       throw error;
     } finally {
       loading.value = false;
@@ -63,7 +107,7 @@ export function useAssets(): IUseAssets {
 
       return updatedAssetArr;
     } catch (error) {
-      console.error(error);
+      logger.error("Remove failed:", error);
       throw error;
     } finally {
       loading.value = false;

package/core/composables/useAsync/index.ts

@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { readonly, ref } from "vue";
 import { HasLoading } from "../useLoading";
+import { createLogger } from "../../utilities";
+
+const logger = createLogger("use-async");
 
 export type AsyncAction<Payload = void, Result = void> = (payload?: Payload, ...rest: any[]) => Promise<Result>;
 
@@ -18,7 +21,7 @@ export function useAsync<Payload = void, Result = void>(
     try {
       return await innerAction(payload, ...rest);
     } catch (e) {
-      console.error(e);
+      logger.error("Async action failed:", e);
       throw e;
     } finally {
       loading.value = false;

package/core/composables/useBladeRegistry/index.ts

@@ -1,5 +1,8 @@
 import { App, inject, shallowRef, computed, ComputedRef, readonly as vueReadonly } from "vue";
 import { BladeInstanceConstructor } from "../../../shared/components/blade-navigation/types";
+import { createLogger } from "../../utilities";
+
+const logger = createLogger("blade-registry");
 
 /**
  * Interface for blade registration data
@@ -81,16 +84,14 @@ export function createBladeRegistry(app: App): IBladeRegistryInstance {
     const newMap = new Map(registeredBladesInternal.value);
 
     if (newMap.has(name)) {
-      console.warn(`BladeRegistry: Blade '${name}' is already registered. It will be overwritten.`);
+      logger.warn(`Blade '${name}' is already registered. It will be overwritten.`);
     }
 
     // Register component globally if not already registered or different
     const existingGlobalComponent = app.component(name);
     if (!existingGlobalComponent || existingGlobalComponent !== registrationData.component) {
       if (existingGlobalComponent && existingGlobalComponent !== registrationData.component) {
-        console.warn(
-          `BladeRegistry: Global component '${name}' already exists and is different. Overwriting with new blade component.`,
-        );
+        logger.warn(`Global component '${name}' already exists and is different. Overwriting with new blade component.`);
       }
       app.component(name, registrationData.component);
     }
@@ -137,7 +138,7 @@ export function createBladeRegistry(app: App): IBladeRegistryInstance {
         return globalComponent;
       }
     } catch (error) {
-      console.warn(`BladeRegistry: Error accessing global component '${name}':`, error);
+      logger.warn(`Error accessing global component '${name}':`, error);
     }
 
     return undefined;

package/core/composables/useBreadcrumbs/index.ts

@@ -1,6 +1,9 @@
 import { Breadcrumbs } from "./../../../ui/types/index";
 import { ComputedRef, computed, reactive, toValue } from "vue";
 import * as _ from "lodash-es";
+import { createLogger } from "../../utilities";
+
+const logger = createLogger("use-breadcrumbs");
 
 interface HistoryRecord {
   records: Breadcrumbs[];
@@ -45,7 +48,7 @@ export function useBreadcrumbs() {
               removeNext(id);
             }
           } catch (e) {
-            console.error(e);
+            logger.error("Breadcrumb click handler failed:", e);
           }
         }
       },

package/core/composables/useErrorHandler/index.ts

@@ -2,6 +2,9 @@ import { onErrorCaptured, getCurrentInstance, ref, Ref, nextTick } from "vue";
 import { useAppInsights } from "..";
 import { useUserManagement } from "../useUserManagement";
 import { DisplayableError, parseError } from "../../utilities/error";
+import { createLogger } from "../../utilities";
+
+const logger = createLogger("use-error-handler");
 
 interface IUseErrorHandler {
   error: Ref<DisplayableError | null>;
@@ -51,7 +54,7 @@ export function useErrorHandler(capture?: boolean): IUseErrorHandler {
       });
     }
 
-    console.error("Captured Error:", capturedError.originalError);
+    logger.error("Captured Error:", capturedError.originalError);
 
     if (instance) {
       instance.emit("error", capturedError);

package/core/composables/useFunctions/debounce.ts

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export default function debounce(func: (...args: any[]) => void, delay: number): (...args: unknown[]) => void {
-  console.debug(`[@vc-shell/framework#useFunctions:debounce] - Entry point`);
   let timer: number | null = null;
 
   return function (...args: unknown[]): void {

package/core/composables/useFunctions/delay.ts

@@ -1,4 +1,3 @@
 export default function delay(func: (...args: unknown[]) => void, delay = 0): void {
-  console.debug(`[@vc-shell/framework#useFunctions:delay] - Entry point`);
   setTimeout(func, delay);
 }

package/core/composables/useFunctions/index.ts

@@ -11,7 +11,6 @@ interface IUseFunctions {
 }
 
 export function useFunctions(): IUseFunctions {
-  console.debug("useFunctions entry point");
   return {
     debounce,
     delay,

package/core/composables/useFunctions/once.ts

@@ -1,7 +1,6 @@
 const resultsMap = new WeakMap();
 
 export default function once(func: (...args: unknown[]) => void): (...args: unknown[]) => unknown {
-  console.debug(`[@vc-shell/framework#useFunctions:once] - Entry point`);
   return function (...args: unknown[]): unknown {
     if (!resultsMap.has(func)) {
       const result = func(...args);

package/core/composables/useFunctions/sleep.ts

@@ -1,4 +1,3 @@
 export default function sleep(ms: number): Promise<void> {
-  console.debug(`[@vc-shell/framework#useFunctions:sleep] - Entry point`);
   return new Promise((resolve) => setTimeout(resolve, ms));
 }

package/core/composables/useFunctions/throttle.ts

@@ -1,5 +1,4 @@
 export default function throttle(func: (...args: unknown[]) => void, delay: number): (...args: unknown[]) => void {
-  console.debug(`[@vc-shell/framework#useFunctions:throttle] - Entry point`);
   let wasThrottled = false;
 
   return function (...args: unknown[]): void {

package/core/composables/useGlobalSearch/index.ts

@@ -2,17 +2,17 @@ import { inject, provide } from "vue";
 import { GlobalSearchKey } from "../../../injection-keys";
 import { GlobalSearchState, createGlobalSearchService } from "../../services/global-search-service";
 
-export function provideGlobalSearch() {
+export function provideGlobalSearch(): GlobalSearchState {
   const state = createGlobalSearchService();
   provide(GlobalSearchKey, state);
   return state;
 }
 
-export function useGlobalSearch() {
+export function useGlobalSearch(): GlobalSearchState {
   const state = inject<GlobalSearchState>(GlobalSearchKey);
 
   if (!state) {
-    throw new Error("useGlobalSearch must be used within a component that has called createGlobalSearch");
+    throw new Error("useGlobalSearch must be used within a component that has called provideGlobalSearch");
   }
 
   return state;

package/core/composables/useMenuService/index.ts

@@ -1,6 +1,9 @@
 import { provide, inject, getCurrentInstance } from "vue";
 import { MenuService, createMenuService, addMenuItem } from "../../services/menu-service";
 import { MenuServiceKey } from "../../../injection-keys";
+import { createLogger, InjectionError } from "../../utilities";
+
+const logger = createLogger("use-menu-service");
 
 export function provideMenuService(): MenuService {
   const service = createMenuService();
@@ -11,8 +14,8 @@ export function provideMenuService(): MenuService {
 export function useMenuService(): MenuService {
   const service = inject(MenuServiceKey);
   if (!service) {
-    console.error("Menu service not found in current context. Injection chain:", getCurrentInstance());
-    throw new Error("MenuService not provided");
+    logger.error("Menu service not found in current context. Injection chain:", getCurrentInstance());
+    throw new InjectionError("MenuService");
   }
   return service;
 }

package/core/composables/useNotifications/index.ts

@@ -1,6 +1,9 @@
 import { PushNotification, PushNotificationClient } from "./../../api/platform";
 import { computed, ComputedRef, ref, onUnmounted } from "vue";
 import * as _ from "lodash-es";
+import { createLogger } from "../../utilities";
+
+const logger = createLogger("use-notifications");
 
 const notificationsClient = new PushNotificationClient();
 
@@ -64,7 +67,7 @@ export function useNotifications(notifyType?: string | string[]): INotifications
         notifications.value = <PushNotification[]>JSON.parse(response).notifyEvents ?? [];
       });
     } catch (e) {
-      console.error(e);
+      logger.error("loadFromHistory failed:", e);
       throw e;
     }
   }
@@ -121,7 +124,7 @@ export function useNotifications(notifyType?: string | string[]): INotifications
       });
       await notificationsClient.markAllAsRead();
     } catch (e) {
-      console.error(e);
+      logger.error("markAllAsRead failed:", e);
       throw e;
     }
   }

package/core/composables/useTheme/index.ts

@@ -3,6 +3,9 @@ import { computed, watchEffect, ref, type Ref } from "vue";
 import { useI18n } from "vue-i18n";
 import * as _ from "lodash-es";
 import { i18n } from "../../plugins/i18n";
+import { createLogger } from "../../utilities";
+
+const logger = createLogger("use-theme");
 
 export interface ThemeDefinition {
   key: string;
@@ -82,7 +85,7 @@ export const useTheme = (): IUseTheme => {
     if (themeKeys.value.includes(themeKey)) {
       state.value = themeKey;
     } else {
-      console.warn(`[useTheme] Attempted to set an unregistered theme: ${themeKey}`);
+      logger.warn(`Attempted to set an unregistered theme: ${themeKey}`);
     }
   }
 

package/core/composables/useUser/index.ts

@@ -15,6 +15,18 @@ import {
 import { RequestPasswordResult } from "./../../types";
 import { createSharedComposable } from "@vueuse/core";
 import { useExternalProvider } from "../../../shared/components/sign-in/useExternalProvider";
+import { createLogger } from "../../utilities";
+
+export interface TokenData {
+  token: string | null;
+  access_token: string | null;
+  refresh_token: string | null;
+  expires_at: number | null;
+}
+
+const AUTH_STORAGE_KEY = "vc_auth_data";
+
+const logger = createLogger("use-user");
 
 // Interface for the full internal API provided by _createInternalUserLogic
 export interface IUserInternalAPI {
@@ -30,6 +42,7 @@ export interface IUserInternalAPI {
   requestPasswordReset: (loginOrEmail: string) => Promise<RequestPasswordResult>;
   changeUserPassword: (oldPassword: string, newPassword: string) => Promise<SecurityResult | undefined>;
   getLoginType: () => Promise<LoginType[]>;
+  getAccessToken: () => Promise<string | null>;
   isAuthenticated: ComputedRef<boolean>;
 }
 
@@ -40,12 +53,89 @@ export interface IAppUserAPI {
   isAdministrator: ComputedRef<boolean | undefined>;
   loadUser: () => Promise<UserDetail>;
   signOut: () => Promise<void>;
+  getAccessToken: () => Promise<string | null>;
 }
 
 const user: Ref<UserDetail | undefined> = ref();
 
+function readAuthData(): TokenData | null {
+  try {
+    const stored = localStorage.getItem(AUTH_STORAGE_KEY);
+    if (stored) {
+      return JSON.parse(stored) as TokenData;
+    }
+  } catch (e) {
+    logger.error("Failed to read auth data from storage:", e);
+  }
+  return null;
+}
+
+function storeAuthData(data: TokenData): void {
+  try {
+    logger.debug("storeAuthData - Saving:", data);
+    localStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify(data));
+    logger.debug("storeAuthData - Saved successfully");
+  } catch (e) {
+    logger.error("Failed to store auth data:", e);
+  }
+}
+
+function clearAuthData(): void {
+  try {
+    localStorage.removeItem(AUTH_STORAGE_KEY);
+  } catch (e) {
+    logger.error("Failed to clear auth data:", e);
+  }
+}
+
+// Direct fetch to /connect/token endpoint
+async function fetchToken(params: Record<string, string>): Promise<TokenData | null> {
+  try {
+    const body = new URLSearchParams(params).toString();
+
+    const response = await fetch("/connect/token", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body,
+    });
+
+    if (!response.ok) {
+      const errorBody = await response.text();
+      logger.error("fetchToken - HTTP error:", response.status, response.statusText, errorBody);
+      return null;
+    }
+
+    const data = await response.json();
+    logger.debug("fetchToken - Response:", data);
+
+    const accessToken = data.access_token;
+    const refreshToken = data.refresh_token;
+    const expiresIn = data.expires_in;
+
+    if (data.error || !accessToken) {
+      logger.error("fetchToken - Error:", data.error_description || data.error || "No access token");
+      return null;
+    }
+
+    const expiresAt = expiresIn ? Date.now() + expiresIn * 1000 : null;
+
+    return {
+      token: accessToken,
+      access_token: accessToken,
+      refresh_token: refreshToken ?? null,
+      expires_at: expiresAt,
+    };
+  } catch (e) {
+    logger.error("fetchToken - Exception:", e);
+    return null;
+  }
+}
+
 export function _createInternalUserLogic(): IUserInternalAPI {
   const loading: Ref<boolean> = ref(false);
+  const authData: Ref<TokenData | null> = ref(null);
 
   const { storage: externalSignInStorage, signOut: externalSignOut } = useExternalProvider();
 
@@ -83,25 +173,40 @@ export function _createInternalUserLogic(): IUserInternalAPI {
     username: string,
     password: string,
   ): Promise<SignInResult | { succeeded: boolean; error?: any; status?: number }> {
-    console.debug(`[@vc-shell/framework#_createInternalUserLogic:signIn] - Entry point`);
+    logger.debug("signIn - Entry point");
     try {
       loading.value = true;
+
+      // First do the standard login to set cookies/session
       const result = await securityClient.login(new LoginRequest({ userName: username, password }));
-      return await securityClient
-        .getCurrentUser()
-        .then((res) => {
-          if (res) {
-            user.value = res;
-            return result;
-          }
-          throw { succeeded: false };
-        })
-        .catch((e) => {
-          throw e;
-        });
+      logger.debug("signIn - Cookie login completed:", result);
+
+      // Then get OAuth token for API calls (direct fetch, bypasses API client)
+      // Request offline_access scope to get refresh_token for automatic token renewal
+      logger.debug("signIn - Requesting token...");
+      const tokenData = await fetchToken({
+        grant_type: "password",
+        username,
+        password,
+        scope: "offline_access",
+      });
+
+      if (tokenData) {
+        authData.value = tokenData;
+        storeAuthData(authData.value);
+        logger.debug("signIn - Token saved:", authData.value);
+      }
+
+      // Load current user info
+      const userInfo = await securityClient.getCurrentUser();
+      if (userInfo) {
+        user.value = userInfo;
+        return result;
+      }
+
+      throw { succeeded: false };
     } catch (e: any) {
-      //TODO: log error
-      console.log(e);
+      logger.error("signIn failed:", e);
       return { succeeded: false, error: e.message, status: e.status };
     } finally {
       loading.value = false;
@@ -109,10 +214,14 @@ export function _createInternalUserLogic(): IUserInternalAPI {
   }
 
   async function signOut(): Promise<void> {
-    console.debug(`[@vc-shell/framework#_createInternalUserLogic:signOut] - Entry point`);
+    logger.debug("signOut - Entry point");
 
     user.value = undefined;
 
+    // Clear stored auth data
+    clearAuthData();
+    authData.value = null;
+
     if (externalSignInStorage.value?.providerType) {
       await externalSignOut(externalSignInStorage.value.providerType);
     } else {
@@ -121,14 +230,15 @@ export function _createInternalUserLogic(): IUserInternalAPI {
   }
 
   async function loadUser(): Promise<UserDetail> {
-    console.debug(`[@vc-shell/framework#_createInternalUserLogic:loadUser] - Entry point`);
+    logger.debug("loadUser - Entry point");
 
     try {
       loading.value = true;
       user.value = await securityClient.getCurrentUser();
-      console.log("[_createInternalUserLogic]: an user details has been loaded", user.value);
+      await getAccessToken();
+      logger.debug("User details loaded:", user.value);
     } catch (e: any) {
-      console.error(e);
+      logger.error("loadUser failed:", e);
     } finally {
       loading.value = false;
     }
@@ -174,13 +284,70 @@ export function _createInternalUserLogic(): IUserInternalAPI {
     try {
       result = await securityClient.getLoginTypes();
     } catch (e) {
-      console.error(e);
+      logger.error("getLoginType failed:", e);
       throw e;
     }
 
     return result;
   }
 
+  // Buffer time in ms - refresh token this much before actual expiration
+  const TOKEN_REFRESH_BUFFER_MS = 60 * 1000; // 60 seconds
+
+  async function getAccessToken(): Promise<string | null> {
+    logger.debug("getAccessToken - Entry point");
+
+    // Load auth data from storage if not yet loaded
+    if (!authData.value) {
+      authData.value = readAuthData();
+    }
+
+    // No auth data available
+    if (!authData.value) {
+      logger.debug("getAccessToken - No auth data available");
+      return null;
+    }
+
+    // Check if token is expired or about to expire (with buffer)
+    const now = Date.now();
+    const expiresAt = authData.value.expires_at;
+    const shouldRefresh = expiresAt ? now >= expiresAt - TOKEN_REFRESH_BUFFER_MS : false;
+
+    logger.debug("getAccessToken - Token status:", {
+      hasToken: !!authData.value.access_token,
+      expiresAt: expiresAt ? new Date(expiresAt).toISOString() : "not set",
+      now: new Date(now).toISOString(),
+      shouldRefresh,
+      hasRefreshToken: !!authData.value.refresh_token,
+    });
+
+    if (shouldRefresh && authData.value.refresh_token) {
+      logger.debug("getAccessToken - Token expired or expiring soon, attempting refresh");
+
+      const tokenData = await fetchToken({
+        grant_type: "refresh_token",
+        refresh_token: authData.value.refresh_token,
+        scope: "offline_access",
+      });
+
+      if (tokenData) {
+        // Keep old refresh_token if new one not provided
+        tokenData.refresh_token = tokenData.refresh_token ?? authData.value.refresh_token;
+        authData.value = tokenData;
+        storeAuthData(authData.value);
+        logger.debug("getAccessToken - Token refreshed successfully, new expiry:", {
+          expiresAt: tokenData.expires_at ? new Date(tokenData.expires_at).toISOString() : "not set",
+        });
+      } else {
+        // Refresh failed - log error but return existing token (it might still work)
+        // Don't clear auth data - let the API call fail naturally if token is truly invalid
+        logger.warn("getAccessToken - Failed to refresh token, returning existing token");
+      }
+    }
+
+    return authData.value?.access_token ?? authData.value?.token ?? null;
+  }
+
   return {
     user: computed(() => user.value),
     loading: computed(() => loading.value),
@@ -195,6 +362,7 @@ export function _createInternalUserLogic(): IUserInternalAPI {
     requestPasswordReset,
     changeUserPassword,
     getLoginType,
+    getAccessToken,
   };
 }
 
@@ -207,5 +375,6 @@ export const useUser = createSharedComposable((): IAppUserAPI => {
     isAdministrator: internals.isAdministrator,
     loadUser: internals.loadUser,
     signOut: internals.signOut,
+    getAccessToken: internals.getAccessToken,
   };
 });