@vc-shell/framework 1.2.4-beta.4 → 1.2.4-beta.6

package/core/composables/useWebVitals/index.ts

@@ -0,0 +1,40 @@
+import { onFCP, onLCP, onCLS, onINP, onTTFB } from "web-vitals";
+import type { Metric } from "web-vitals";
+
+export interface IWebVitalsMetric {
+  name: string;
+  value: number;
+  rating: "good" | "needs-improvement" | "poor";
+}
+
+export type WebVitalsCallback = (metric: IWebVitalsMetric) => void;
+
+/**
+ * Registers Core Web Vitals observers (FCP, LCP, CLS, INP, TTFB).
+ * Call once per app session, typically after app.mount().
+ *
+ * @param callback - Optional custom handler. Defaults to console.warn in dev mode.
+ */
+export function useWebVitals(callback?: WebVitalsCallback): void {
+  const defaultCallback: WebVitalsCallback = (metric) => {
+    if (import.meta.env.DEV) {
+      const unit = metric.name === "CLS" ? "" : "ms";
+      const value = metric.name === "CLS" ? metric.value.toFixed(4) : Math.round(metric.value);
+      console.warn(`[web-vitals] ${metric.name}: ${value}${unit} (${metric.rating})`);
+    }
+  };
+
+  const handler = (metric: Metric) => {
+    (callback ?? defaultCallback)({
+      name: metric.name,
+      value: metric.value,
+      rating: metric.rating,
+    });
+  };
+
+  onFCP(handler);
+  onLCP(handler);
+  onCLS(handler);
+  onINP(handler);
+  onTTFB(handler);
+}

package/core/interceptors/index.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Router } from "vue-router";
 import { useUserManagement } from "@core/composables/useUserManagement";
-import { notification } from "@shared";
+import { notification } from "@shared/components/notifications/core/notification";
 import { createLogger } from "@core/utilities";
 
 const logger = createLogger("interceptors");
@@ -49,24 +49,81 @@ export function registerInterceptors(router: Router) {
         }
       });
     } else {
-      const response = await originalFetch(...args);
+      const [resource, init] = args;
 
-      /**
-       * If the response is unauthorized, logout the user
-       */
-      if (response.status === 401) {
-        //logout user
-        if (isAuthenticated.value) {
-          signOut().then(() => {
-            redirect(router);
-            notification.error(
-              "Access Denied: Your session has expired or you do not have the necessary permissions.\nPlease log in again or contact the administrator for assistance.",
-            );
-          });
+      function isApiRequest(input: RequestInfo | URL): boolean {
+        const raw = typeof input === "string"
+          ? input
+          : input instanceof Request
+            ? input.url
+            : input.toString();
+
+        try {
+          const url = new URL(raw, window.location.origin);
+          return url.origin === window.location.origin && url.pathname.startsWith("/api/");
+        } catch {
+          return false;
         }
       }
 
-      return response;
+      // Scope hardening only to platform API calls
+      if (!isApiRequest(resource)) {
+        return originalFetch(...args);
+      }
+
+      if (!navigator.onLine) {
+        logger.warn("Request blocked: browser is offline", resource);
+        return Promise.reject(new Error("Network unavailable. Please check your connection."));
+      }
+
+      // Always enforce timeout, but preserve external cancellation semantics
+      const controller = new AbortController();
+      let didTimeout = false;
+      const timeoutId = setTimeout(() => {
+        didTimeout = true;
+        controller.abort();
+      }, 30000);
+
+      const externalSignal = init?.signal;
+      const abortFromExternal = () => controller.abort();
+      if (externalSignal?.aborted) {
+        abortFromExternal();
+      } else if (externalSignal) {
+        externalSignal.addEventListener("abort", abortFromExternal, { once: true });
+      }
+
+      try {
+        const response = await originalFetch(resource, {
+          ...(init || {}),
+          signal: controller.signal,
+        });
+
+        /**
+         * If the response is unauthorized, logout the user
+         */
+        if (response.status === 401) {
+          if (isAuthenticated.value) {
+            signOut().then(() => {
+              redirect(router);
+              notification.error(
+                "Access Denied: Your session has expired or you do not have the necessary permissions.\nPlease log in again or contact the administrator for assistance.",
+              );
+            });
+          }
+        }
+
+        return response;
+      } catch (e) {
+        if (didTimeout) {
+          throw new Error("Request timed out. Please try again.");
+        }
+        throw e;
+      } finally {
+        clearTimeout(timeoutId);
+        if (externalSignal) {
+          externalSignal.removeEventListener("abort", abortFromExternal);
+        }
+      }
     }
   };
 

package/core/plugins/ai-agent/components/_internal/VcAiAgentHeader.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "@ui/components";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
 import VcVirtoOzLogo from "@core/plugins/ai-agent/components/_internal/VcVirtoOzLogo.vue";
 
 defineProps<{

package/core/plugins/ai-agent/components/_internal/VcAiAgentIframe.vue

@@ -24,7 +24,7 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, watch } from "vue";
-import { VcIcon } from "@ui/components";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
 import VcAiAgentLoader from "@core/plugins/ai-agent/components/_internal/VcAiAgentLoader.vue";
 
 const props = defineProps<{

package/core/plugins/global-error-handler/index.ts

@@ -0,0 +1,81 @@
+import type { App } from "vue";
+import { notification } from "@shared/components/notifications/core/notification";
+import { parseError } from "@core/utilities/error";
+import { createLogger } from "@core/utilities";
+
+const logger = createLogger("global-error-handler");
+
+function errorKey(err: unknown): string {
+  if (err instanceof Error) return `${err.name}:${err.message}`;
+  return String(err);
+}
+
+const recentErrors = new Map<string, number>();
+const DEDUP_WINDOW_MS = 3000;
+type WindowWithVcGlobalHandlers = Window & { __VC_GLOBAL_ERROR_HANDLERS_INSTALLED__?: boolean };
+
+function isDuplicate(err: unknown): boolean {
+  const key = errorKey(err);
+  const now = Date.now();
+  const last = recentErrors.get(key);
+  if (last && now - last < DEDUP_WINDOW_MS) return true;
+  recentErrors.set(key, now);
+  if (recentErrors.size > 50) {
+    for (const [k, t] of recentErrors) {
+      if (now - t > DEDUP_WINDOW_MS) recentErrors.delete(k);
+    }
+  }
+  return false;
+}
+
+export function setupGlobalErrorHandlers(app: App): void {
+  // 1. Vue component errors — chain to existing handler
+  const existingHandler = app.config.errorHandler;
+  app.config.errorHandler = (err, instance, info) => {
+    logger.error("Unhandled Vue error:", err, "\nInfo:", info);
+    if (!isDuplicate(err)) {
+      const parsed = parseError(err);
+      notification.error(parsed.message, {
+        timeout: 8000,
+        notificationId: `global-vue-${errorKey(err)}`,
+      });
+    }
+    existingHandler?.(err, instance, info);
+  };
+
+  if (typeof window === "undefined") return;
+  const win = window as WindowWithVcGlobalHandlers;
+
+  // Idempotency guard: prevent duplicated listeners when framework is installed multiple times
+  if (win.__VC_GLOBAL_ERROR_HANDLERS_INSTALLED__) return;
+  win.__VC_GLOBAL_ERROR_HANDLERS_INSTALLED__ = true;
+
+  const onUnhandledRejection = (event: PromiseRejectionEvent) => {
+    logger.error("Unhandled rejection:", event.reason);
+    if (!isDuplicate(event.reason)) {
+      const parsed = parseError(event.reason);
+      notification.error(parsed.message, {
+        timeout: 8000,
+        notificationId: `global-rejection-${errorKey(event.reason)}`,
+      });
+    }
+  };
+
+  // 2. Unhandled promise rejections
+  window.addEventListener("unhandledrejection", onUnhandledRejection);
+
+  const onWindowError = (event: ErrorEvent) => {
+    if (!event.error) return;
+    logger.error("Uncaught error:", event.error);
+    if (!isDuplicate(event.error)) {
+      const parsed = parseError(event.error);
+      notification.error(parsed.message, {
+        timeout: 8000,
+        notificationId: `global-error-${errorKey(event.error)}`,
+      });
+    }
+  };
+
+  // 3. Uncaught JS errors
+  window.addEventListener("error", onWindowError);
+}

package/core/plugins/index.ts

@@ -1,4 +1,3 @@
-export * from "@core/plugins/moment";
 export * from "@core/plugins/i18n";
 export * from "@core/plugins/validation";
 export * from "@core/plugins/modularity";

package/core/plugins/modularity/index.ts

@@ -1,9 +1,10 @@
 import { App, Component, inject, resolveComponent } from "vue";
 import { i18n } from "@core/plugins/i18n";
 import { Router } from "vue-router";
-import { BladeInstanceConstructor } from "@shared/components/blade-navigation/types";
+import type { BladeInstanceConstructor } from "@shared/components/blade-navigation/types";
 import { kebabToPascal, createLogger } from "@core/utilities";
-import { addMenuItem, useMenuService, useNotifications } from "@core/composables";
+import { addMenuItem, useMenuService } from "@core/composables/useMenuService";
+import { useNotifications } from "@core/composables/useNotifications";
 import * as _ from "lodash-es";
 import { notification } from "@shared/components/notifications/core";
 import { BladeRegistryKey, IBladeRegistrationData, IBladeRegistryInstance } from "@core/composables/useBladeRegistry";

package/core/plugins/modularity/loader.ts

@@ -1,6 +1,6 @@
-import { App, Plugin } from "vue";
+import { App, Plugin, ref } from "vue";
 import { Router } from "vue-router";
-import { DynamicModulesKey } from "@framework/injection-keys";
+import { DynamicModulesKey, ModulesReadyKey, ModulesLoadErrorKey } from "@framework/injection-keys";
 import * as semver from "semver";
 import { notification } from "@shared/components/notifications/core";
 import { createLogger } from "@core/utilities";
@@ -271,7 +271,15 @@ export function useDynamicModules(
   const loadedModules = new Set<string>();
   const loadedModulesWithVersions = new Map<string, string>();
 
+  // Progressive loading state — provided before mount so descendants can inject during setup
+  const modulesReady = ref(false);
+  const modulesLoadError = ref(false);
+  app.provide(ModulesReadyKey, modulesReady);
+  app.provide(ModulesLoadErrorKey, modulesLoadError);
+
   async function load() {
+    performance.mark("vc:modules-start");
+    let loadFailed = false;
     try {
       const shouldForceFreshAssets = finalConfig.forceFreshAssets !== false;
       const requestTimestamp = Date.now().toString();
@@ -595,6 +603,7 @@ export function useDynamicModules(
       }
     } catch (error) {
       logger.error("Failed to load modules:", error);
+      loadFailed = true;
     }
 
     app.config.globalProperties.$dynamicModules = {
@@ -602,6 +611,17 @@ export function useDynamicModules(
       ...window.VcShellDynamicModules,
     };
     app.provide(DynamicModulesKey, app.config.globalProperties.$dynamicModules);
+    performance.mark("vc:modules-done");
+
+    // Signal completion to the component tree
+    modulesReady.value = true;
+    if (loadFailed) {
+      modulesLoadError.value = true;
+    } else {
+      // Re-resolve the current route now that module routes/blades are registered
+      router.replace(router.currentRoute.value.fullPath);
+    }
+    performance.mark("vc:modules-installed");
   }
 
   return {

package/core/plugins/permissions/index.ts

@@ -1,4 +1,4 @@
-import { usePermissions } from "@core/composables";
+import { usePermissions } from "@core/composables/usePermissions";
 import { App } from "vue";
 
 export const permissions = {

package/core/plugins/signalR/index.ts

@@ -11,6 +11,10 @@ const logger = createLogger("signalR");
 const { addNotification } = useNotifications();
 const currentCreator = ref<string | undefined>();
 
+let mountComplete = false;
+let pendingStart = false;
+let _startFn: (() => void) | null = null;
+
 export const updateSignalRCreatorSymbol: InjectionKey<(creator: string | undefined) => void> =
   Symbol("updateSignalRCreator");
 
@@ -48,6 +52,10 @@ export const signalR = {
         .build();
 
     const start = () => {
+      if (!mountComplete) {
+        pendingStart = true;
+        return;
+      }
       connection
         .start()
         .then(() => {
@@ -60,6 +68,8 @@ export const signalR = {
         });
     };
 
+    _startFn = start;
+
     async function stop() {
       await connection.stop();
     }
@@ -91,6 +101,7 @@ export const signalR = {
           start();
         } else {
           reconnect = false;
+          pendingStart = false; // Cancel any pending deferred start
           await stop();
         }
       },
@@ -105,3 +116,11 @@ export const signalR = {
     });
   },
 };
+
+export function notifyMountComplete(): void {
+  mountComplete = true;
+  if (pendingStart && _startFn) {
+    pendingStart = false;
+    _startFn();
+  }
+}

package/core/services/app-bar-mobile-buttons-service.ts

@@ -9,6 +9,7 @@ export interface AppBarButtonContent {
   order?: number;
   onClose?: () => void;
   isVisible?: MaybeRef<boolean> | ComputedRef<boolean>;
+  badge?: MaybeRef<boolean> | ComputedRef<boolean>;
 }
 
 export interface IAppBarMobileButtonsService {

package/core/services/menu-service.test.ts

@@ -115,4 +115,197 @@ describe("menu-service", () => {
     menuServiceBus.dispose(service);
     expect(menuServiceBus.instanceCount).toBe(0);
   });
+
+  describe("identity and deduplication", () => {
+    it("removeMenuItem matches finalized item from menuItems.value against raw storage", async () => {
+      // This is the critical scenario: user gets item from menuItems.value
+      // (which has been through finalizeMenuItems) and passes it to removeMenuItem.
+      // Must work even though finalized item may have extra fields.
+      const { createMenuService } = await loadMenuServiceModule();
+      const service = createMenuService();
+
+      service.addMenuItem({ title: "A", priority: 1, url: "/a" } as any);
+      service.addMenuItem({ title: "B", priority: 2, url: "/b" } as any);
+
+      const firstItem = service.menuItems.value[0];
+      service.removeMenuItem(firstItem);
+
+      expect(service.menuItems.value).toHaveLength(1);
+      expect(service.menuItems.value[0].title).toBe("B");
+    });
+
+    it("removeMenuItem matches by id when both items have explicit id", async () => {
+      const { createMenuService } = await loadMenuServiceModule();
+      const service = createMenuService();
+
+      service.addMenuItem({ title: "A", priority: 1, id: 10, url: "/a" } as any);
+      service.addMenuItem({ title: "B", priority: 2, id: 20, url: "/b" } as any);
+
+      service.removeMenuItem({ id: 10 } as any);
+
+      expect(service.menuItems.value).toHaveLength(1);
+      expect(service.menuItems.value[0].title).toBe("B");
+    });
+
+    it("removeMenuItem matches by url when both items have url (no routeId)", async () => {
+      const { createMenuService } = await loadMenuServiceModule();
+      const service = createMenuService();
+
+      service.addMenuItem({ title: "Orders", priority: 1, url: "/orders" } as any);
+      service.addMenuItem({ title: "Products", priority: 2, url: "/products" } as any);
+
+      service.removeMenuItem({ url: "/orders" } as any);
+
+      expect(service.menuItems.value).toHaveLength(1);
+      expect(service.menuItems.value[0].title).toBe("Products");
+    });
+
+    it("removeMenuItem matches by routeId", async () => {
+      const { createMenuService } = await loadMenuServiceModule();
+      const service = createMenuService();
+
+      service.addMenuItem({ title: "Orders", priority: 1, url: "/orders", routeId: "Orders" } as any);
+      service.addMenuItem({ title: "Products", priority: 2, url: "/products", routeId: "Products" } as any);
+
+      service.removeMenuItem({ routeId: "Orders" } as any);
+
+      expect(service.menuItems.value).toHaveLength(1);
+      expect(service.menuItems.value[0].title).toBe("Products");
+    });
+
+    it("group children with identical routeId+url are deduplicated (last wins)", async () => {
+      const { createMenuService } = await loadMenuServiceModule();
+      const service = createMenuService();
+
+      service.addMenuItem({
+        title: "Users", priority: 1, url: "/users", routeId: "Users",
+        groupConfig: { id: "admin", title: "Admin", icon: "fas fa-shield" },
+      } as any);
+      service.addMenuItem({
+        title: "Users Updated", priority: 1, url: "/users", routeId: "Users",
+        groupConfig: { id: "admin", title: "Admin" },
+      } as any);
+
+      expect(service.menuItems.value).toHaveLength(1);
+      expect(service.menuItems.value[0].children).toHaveLength(1);
+      expect(service.menuItems.value[0].children![0].title).toBe("Users Updated");
+    });
+
+    it("identity is symmetric — determined by highest-priority field on each item independently", async () => {
+      const { createMenuService } = await loadMenuServiceModule();
+      const service = createMenuService();
+
+      service.addMenuItem({ title: "Page", priority: 1, url: "/page", routeId: "PageRoute" } as any);
+
+      // Removing by url alone won't match — stored item's identity is route:PageRoute, not url:/page
+      service.removeMenuItem({ url: "/page" } as any);
+      expect(service.menuItems.value).toHaveLength(1); // still there
+
+      // Removing by routeId matches
+      service.removeMenuItem({ routeId: "PageRoute" } as any);
+      expect(service.menuItems.value).toHaveLength(0);
+    });
+
+    it("finalized items without explicit id have id undefined", async () => {
+      // Documents the auto-id removal. External consumers of menuItems.value
+      // should use routeId/url/title as fallback identifiers.
+      const { createMenuService } = await loadMenuServiceModule();
+      const service = createMenuService();
+
+      service.addMenuItem({ title: "Orders", priority: 1, url: "/orders", routeId: "Orders" } as any);
+
+      const item = service.menuItems.value[0];
+      expect(item.id).toBeUndefined();
+      expect(item.routeId).toBe("Orders");
+      expect(item.url).toBe("/orders");
+      expect(item.title).toBe("Orders");
+    });
+
+    it("groupConfig updates group properties on second registration", async () => {
+      const { createMenuService } = await loadMenuServiceModule();
+      const service = createMenuService();
+
+      service.addMenuItem({
+        title: "Item A", priority: 1, url: "/a", routeId: "A",
+        groupConfig: { id: "grp", title: "Old Title", icon: "old-icon", priority: 10 },
+      } as any);
+      service.addMenuItem({
+        title: "Item B", priority: 2, url: "/b", routeId: "B",
+        groupConfig: { id: "grp", title: "New Title", icon: "new-icon", priority: 5 },
+      } as any);
+
+      const group = service.menuItems.value[0];
+      expect(group.title).toBe("New Title");
+      expect(group.groupIcon).toBe("new-icon");
+      expect(group.priority).toBe(5);
+      expect(group.children).toHaveLength(2);
+    });
+
+    it("standalone items with same routeId but different url are deduplicated (last wins)", async () => {
+      const { createMenuService } = await loadMenuServiceModule();
+      const service = createMenuService();
+
+      service.addMenuItem({ title: "V1", priority: 1, url: "/old-path", routeId: "Orders" } as any);
+      service.addMenuItem({ title: "V2", priority: 2, url: "/new-path", routeId: "Orders" } as any);
+
+      // routeId is highest-priority identity field on both items
+      expect(service.menuItems.value).toHaveLength(1);
+      expect(service.menuItems.value[0].title).toBe("V2");
+      expect(service.menuItems.value[0].url).toBe("/new-path");
+    });
+
+    it("standalone items with same url but different routeId coexist", async () => {
+      const { createMenuService } = await loadMenuServiceModule();
+      const service = createMenuService();
+
+      service.addMenuItem({ title: "PageA", priority: 1, url: "/shared", routeId: "RouteA" } as any);
+      service.addMenuItem({ title: "PageB", priority: 2, url: "/shared", routeId: "RouteB" } as any);
+
+      // routeId is compared before url when both routeId are present
+      expect(service.menuItems.value).toHaveLength(2);
+    });
+  });
+
+  describe("removeRegisteredMenuItem", () => {
+    it("cleans bus store so replay does not resurrect item", async () => {
+      const { addMenuItem, removeRegisteredMenuItem, createMenuService } = await loadMenuServiceModule();
+
+      addMenuItem({ title: "Temp", priority: 1, url: "/temp" } as any);
+      removeRegisteredMenuItem({ url: "/temp" } as any);
+
+      const service = createMenuService();
+      expect(service.menuItems.value).toHaveLength(0);
+    });
+
+    it("propagates removal to live service instances", async () => {
+      const { addMenuItem, removeRegisteredMenuItem, createMenuService } = await loadMenuServiceModule();
+
+      addMenuItem({ title: "Live", priority: 1, url: "/live", routeId: "Live" } as any);
+      const service = createMenuService();
+      expect(service.menuItems.value).toHaveLength(1);
+
+      removeRegisteredMenuItem({ routeId: "Live" } as any);
+      expect(service.menuItems.value).toHaveLength(0);
+    });
+
+    it("removes grouped item from bus store without affecting siblings", async () => {
+      const { addMenuItem, removeRegisteredMenuItem, createMenuService } = await loadMenuServiceModule();
+
+      addMenuItem({
+        title: "Users", priority: 1, url: "/users", routeId: "Users",
+        groupConfig: { id: "admin", title: "Admin", icon: "fas fa-shield" },
+      } as any);
+      addMenuItem({
+        title: "Roles", priority: 2, url: "/roles", routeId: "Roles",
+        groupConfig: { id: "admin", title: "Admin" },
+      } as any);
+
+      removeRegisteredMenuItem({ routeId: "Users" } as any);
+
+      const service = createMenuService();
+      expect(service.menuItems.value).toHaveLength(1);
+      expect(service.menuItems.value[0].children).toHaveLength(1);
+      expect(service.menuItems.value[0].children![0].title).toBe("Roles");
+    });
+  });
 });