@raclettejs/core 0.1.19 → 0.1.21

package/services/frontend/src/core/lib/httpClient.ts

@@ -13,6 +13,7 @@ const axiosClient = axios.create({
     "Accept-Version": "*",
   },
   validateStatus: (status) => status >= 200 && status < 300,
+  withCredentials: true, // Required for CORS with credentials
 })
 
 // Fetch client configuration
@@ -370,6 +371,23 @@ const unsetHttpToken = () => {
   delete fetchClient.defaults.headers.common.Authorization
 }
 
+const WORK_SESSION_HEADER = "x-work-session-id"
+
+/**
+ * Set work session ID for unauthenticated shared sessions.
+ * When set, all API requests will include this header so backend can allow access via authenticatedOrWorksession.
+ * @param sessionId - Work session UUID or null to clear
+ */
+const setWorkSessionId = (sessionId: string | null) => {
+  if (sessionId) {
+    axiosClient.defaults.headers.common[WORK_SESSION_HEADER] = sessionId
+    fetchClient.defaults.headers.common[WORK_SESSION_HEADER] = sessionId
+  } else {
+    delete axiosClient.defaults.headers.common[WORK_SESSION_HEADER]
+    delete fetchClient.defaults.headers.common[WORK_SESSION_HEADER]
+  }
+}
+
 // Main export object with both clients
 const httpClient: {
   axios: typeof axiosClient
@@ -386,6 +404,7 @@ export {
   apiHealthcheck,
   setHttpToken,
   unsetHttpToken,
+  setWorkSessionId,
   configureHttpInterceptors,
   DEFAULT_TIMEOUT,
 }

package/services/frontend/src/core/main.ts

@@ -6,6 +6,7 @@ import {
   configureHttpInterceptors,
   apiHealthcheck,
   setHttpToken,
+  setWorkSessionId,
 } from "@racletteCore/lib/httpClient"
 
 import { chadsayFE } from "@racletteCore"
@@ -66,13 +67,22 @@ const initPluginRegistration = async () => {
   }
 }
 const createRacletteApp = async (
-  options = { requireAuth: true },
+  options: { requireAuth?: boolean; sessionId?: string } = {
+    requireAuth: true,
+  },
 ): Promise<CreateAppResponse> => {
   setupHttpClient()
+  if (options.sessionId) {
+    setWorkSessionId(options.sessionId)
+  } else {
+    setWorkSessionId(null)
+  }
 
   let user: User | null = null
   await configService.init()
-  if (options.requireAuth) {
+
+  // If sessionId is provided, skip authentication
+  if (options.requireAuth && !options.sessionId) {
     const { authenticated, error, user: _user, code } = await checkAuthStatus()
 
     if (!authenticated) {
@@ -88,7 +98,7 @@ const createRacletteApp = async (
     user = _user!
   }
 
-  await setupDependencies()
+  await setupDependencies(options.sessionId)
 
   store.dispatch({ type: "user/set", payload: user })
 
@@ -98,11 +108,11 @@ const createRacletteApp = async (
   return new Promise<CreateAppResponse>(async (resolve, reject) => {
     eventbus.on("ui/setupProject", (spaceId: string) => {
       resolve({
-        authenticated: true,
+        authenticated: !!user || !!options.sessionId,
         setupComplete: true,
         spaceId,
       })
-      console.log(chadsayFE("Raclette is up and running!"))
+      console.log(chadsayFE("racletteJS is up and running!"))
     })
     await awaitTime(2000)
     reject("timeouted")
@@ -182,7 +192,7 @@ const generateLoginCallback =
         return {
           success: false,
           // TODO: Constants would be nice here
-          error: new Error("Invalid response: Token not found"),
+          error: "Invalid response: Token not found",
           message: "Authentication failed: Invalid server response",
         }
       }
@@ -201,7 +211,7 @@ const generateLoginCallback =
 
       return {
         success: false,
-        error,
+        error: errorMessage,
         message: errorMessage,
       }
     }
@@ -210,7 +220,7 @@ const generateLoginCallback =
 const getCookie = (name: string): string | null => {
   const match = document.cookie.match(new RegExp("(^| )" + name + "=([^;]+)"))
 
-  return match ? match[2] : null
+  return match && match[2] ? match[2] : null
 }
 
 const checkAuthStatus = async (): Promise<{
@@ -246,7 +256,7 @@ const checkAuthStatus = async (): Promise<{
   }
 }
 
-const setupDependencies = async () => {
+const setupDependencies = async (sessionId?: string) => {
   registerStoreEffects(store)
 
   // api client - remaining config
@@ -254,7 +264,7 @@ const setupDependencies = async () => {
   apiHealthcheck(store)
 
   // socket
-  socket = createSocket(SOCKET_URL, appSessionId)
+  socket = createSocket(SOCKET_URL, appSessionId, { sessionId })
 
   registerSocketEvents(socket, store, eventbus)
   // listen to eventbus and send messages to the socket server

package/services/frontend/src/core/setup/socket.ts

@@ -9,10 +9,10 @@ import log from "@racletteCore/lib/logger"
  * createSocket returns an instance of a custom SocketClient
  * @param {string} host - our socket endpoint
  * @param {string} appSessionId - The id for the current application - server session
- * @param {object} opts - socket.io options
+ * @param {object} opts - socket.io options (can include sessionId for work sessions)
  */
 
-const createSocket = (host, appSessionId, opts = {}) => {
+const createSocket = (host, appSessionId, opts: { sessionId?: string } = {}) => {
   log.socket("createSocket", { host, appSessionId, opts })
   const token = getUserToken()
   const defaults = {
@@ -22,7 +22,8 @@ const createSocket = (host, appSessionId, opts = {}) => {
     transports: ["polling", "websocket"],
     withCredentials: true,
     auth: {
-      token: token,
+      ...(token ? { token } : {}),
+      ...(opts.sessionId ? { sessionId: opts.sessionId } : {}),
     },
     extraHeaders: {
       "app-session-id": appSessionId,

package/services/frontend/src/core/setup/socketClient.ts

@@ -5,6 +5,28 @@
 import log from "@racletteCore/lib/logger"
 import { getUserToken } from "./sessionHandler"
 import configService from "@racletteCore/lib/configService"
+import { validate } from "uuid"
+
+/**
+ * Extract sessionId from URL if present
+ * Supports racletteJS route format: /:workSession/id={uuid}
+ */
+const extractSessionIdFromUrl = (): string | null => {
+  const path = window.location.pathname + (window.location.hash || "")
+  // Match /:workSession/id={uuid} pattern
+  const workSessionMatch = path.match(/\/:workSession\/id=([^/&#]+)/)
+
+  if (workSessionMatch && workSessionMatch[1]) {
+    const sessionId = workSessionMatch[1]
+    // Validate UUID format
+    if (validate(sessionId)) {
+      return sessionId
+    }
+  }
+
+  return null
+}
+
 const registerSocketClient = ($socket, $eventbus) => {
   $eventbus.on("socket/join/room", (roomId?: string) => {
     const { requireAuthentication } = configService.getConfig()?.global ?? {
@@ -12,16 +34,22 @@ const registerSocketClient = ($socket, $eventbus) => {
     }
 
     let token: string | null = null
+    const sessionId = extractSessionIdFromUrl()
+
+    // Check if we're in a work session context (sessionId in URL indicates work session)
+    const isWorkSession = !!sessionId
 
     if (requireAuthentication) {
       token = getUserToken()
 
-      if (!token) {
-        return log.socket("emitJoin", "no token")
+      // For work sessions, we don't need a token - the sessionId is used for authentication
+      // The sessionId was already sent during socket handshake in the auth object
+      if (!token && !isWorkSession) {
+        return log.socket("emitJoin", "no token and not a work session")
       }
     }
 
-    log.socket("emitJoin", { roomId, token })
+    log.socket("emitJoin", { roomId, token, sessionId, isWorkSession })
     $socket.emit("join", { roomId, token })
   })
 

package/services/frontend/src/core/setup/socketEvents.ts

@@ -12,6 +12,29 @@ import { setupSpace } from "@racletteCore/lib/projectDataHelper"
 import { handleServerItem } from "@racletteCore/lib/data/dataApi"
 import * as userNotifier from "@racletteCore/lib/userNotifier"
 import type { ProjectConfiguration } from "../store/types"
+import { validate } from "uuid"
+import { setHttpToken, setWorkSessionId } from "@racletteCore/lib/httpClient"
+
+/**
+ * Extract sessionId from URL if present
+ * Supports racletteJS route format: /:workSession/id={uuid}
+ */
+const extractSessionIdFromUrl = (): string | null => {
+  const path = window.location.pathname + (window.location.hash || "")
+  // Match /:workSession/id={uuid} pattern
+  const workSessionMatch = path.match(/\/:workSession\/id=([^/&#]+)/)
+
+  if (workSessionMatch && workSessionMatch[1]) {
+    const sessionId = workSessionMatch[1]
+    // Validate UUID format
+    if (validate(sessionId)) {
+      return sessionId
+    }
+  }
+
+  return null
+}
+
 const registerSocketEvents = ($socket, $store, $eventbus) => {
   /**
    * connect
@@ -171,24 +194,85 @@ const registerSocketEvents = ($socket, $store, $eventbus) => {
 
   /**
    * on joinConfirmation this means that we entered a new project with a new scope!
+   * For work sessions, the payload structure is different: { session, composition }
    */
   $socket.on(
     "joinConfirmation",
     (payload: {
-      project: { _id: string; account: string }
-      projectConfig: ProjectConfiguration
-      compositions: Composition[]
-      interactionLinks: InteractionLink[]
+      project?: { _id: string; account: string }
+      projectConfig?: ProjectConfiguration
+      compositions?: Composition[]
+      interactionLinks?: InteractionLink[]
+      token?: string // Work session JWT token
     }) => {
-      const { project, projectConfig, compositions, interactionLinks } = payload
+      const { project, projectConfig, compositions, interactionLinks, token } = payload
+
+      // Check if this is a work session (no project but has compositions/interactionLinks)
+      const isWorkSession = !project && compositions && compositions.length > 0
+
+      if (isWorkSession) {
+        // Work session: use session ID as room identifier
+        const sessionId = extractSessionIdFromUrl() || "work_session"
+        const resolveId = "join_session_" + sessionId
+
+        log.socket("onJoinConfirmation", "Work session join", payload)
+
+        // If token is provided, use it for authentication (replaces x-work-session-id header)
+        if (token) {
+          setHttpToken(token)
+          // Clear the x-work-session-id header since we're using token now
+          setWorkSessionId(null)
+          log.socket("onJoinConfirmation", "Work session token set", { hasToken: !!token })
+        }
+
+        $eventbus.once("store_actionResolved_" + resolveId, async (action) => {
+          $store.dispatch({
+            type: "ui/update",
+            payload: { loading: true },
+          })
+
+          // Use the same setupSpace function as logged-in users
+          // This ensures all normal processing happens (landing page detection, etc.)
+          await setupSpace(compositions || [], interactionLinks || [], projectConfig || {})
 
-      const roomId = project._id
+          // Don't navigate - let the default composition loading logic handle it
+          // The URL stays as /:workSession/id={uuid} and the router will match
+          // the composition from the store based on the default logic
+
+          // Enable fullscreen mode (hide nav bars) for work sessions
+          $store.dispatch({
+            type: "ui/update",
+            payload: {
+              availableInterfaces: [], // Hide all UI interfaces for fullscreen
+              navigationOpen: false,
+            },
+          })
+
+          $store.dispatch({
+            type: "ui/update",
+            payload: { loading: false },
+          })
+
+          $eventbus.emit("ui/setupProject", sessionId)
+        })
+
+        // Reset store states for work session
+        $store.dispatch({
+          type: "projectInit",
+          resolveId,
+        })
+
+        return
+      }
+
+      // Regular project join confirmation (existing flow)
+      const roomId = project?._id
 
       if (!project) {
         log.socket("onJoinConfirmation", "no Room")
-
         return
       }
+
       log.socket("onJoinConfirmation", payload)
 
       const resolveId = "join_" + roomId
@@ -204,7 +288,7 @@ const registerSocketEvents = ($socket, $store, $eventbus) => {
           type: "ui/update",
           payload: { loading: true },
         })
-        await setupSpace(compositions, interactionLinks, projectConfig)
+        await setupSpace(compositions || [], interactionLinks || [], projectConfig || {})
 
         $eventbus.emit("ui/setupProject", roomId)
       })

package/services/frontend/src/core/store/index.ts

@@ -37,6 +37,7 @@ import {
 import {
   compositionsReducers,
   compositionsEffects,
+  compositionsSelectors,
 } from "./reducers/compositions"
 import backendReducers from "./reducers/backend"
 import { queriesEffects, queriesReducers } from "./reducers/queries"
@@ -51,7 +52,7 @@ const extensions =
     ? [
         new LoggerExtension(),
         new ReduxDevtoolsExtension({
-          name: "Raclette",
+          name: "racletteJS",
           trace: true,
           traceLimit: 25,
         }),
@@ -129,6 +130,9 @@ const createStore = (eventbus, appSessionId: string): RacletteStore => {
     appSessionId,
     hasChanges: (oldVal: string, newVal: string): boolean =>
       JSON.stringify(oldVal) !== JSON.stringify(newVal),
+    selectors: {
+      compositions: compositionsSelectors,
+    },
     getState: (params: string | any[] | StoreHelperGetState = {}): object => {
       // Default values
       let stateKey = ""

package/services/frontend/src/core/store/reducers/compositions/index.ts

@@ -11,7 +11,7 @@ import type { WidgetBase } from "../../types"
 import { v4 as uuidv4 } from "uuid"
 import { $store } from "@racletteCore"
 import log from "@racletteCore/lib/logger"
-
+import * as compositionsSelectors from "./selectors"
 const reducerMap = {
   init: () => applicationState.pages,
   projectInit: reducer.projectInit,
@@ -82,4 +82,4 @@ const compositionsEffects = (store) => {
 }
 const compositionsReducers = reducerFromMap(reducerMap)
 
-export { compositionsEffects, compositionsReducers }
+export { compositionsEffects, compositionsReducers, compositionsSelectors }

package/services/frontend/src/core/store/reducers/interactionLinks/index.ts

@@ -6,7 +6,7 @@ import reducerFromMap from "@racletteCore/lib/reducerFromMap"
 import { applicationState } from "@racletteCore/store/state"
 import interactionLinksEffects from "./effects"
 const reducerMap = {
-  init: () => applicationState.pages,
+  init: () => applicationState.interactionLinks,
   projectInit: reducer.projectInit,
   "interactionLinks/add": reducer.interactionLinksAdd,
   "interactionLinks/set": reducer.interactionLinksSet,

package/services/frontend/src/core/store/reducers/widgets/reducers.ts

@@ -3,9 +3,8 @@ import { applicationState, storePatterns } from "@racletteCore/store/state"
 
 const cleanWidgetState = (widget) => {
   const cleanWidget = clone(widget)
-
   delete cleanWidget.type
-
+  // TODO implement empty state attribute deletion here, using removeEmpty
   return cleanWidget
 }
 

package/services/frontend/src/core/store/types/index.ts

@@ -90,7 +90,6 @@ export type NotificationsState = {
   history: []
   items: { [key: string]: Notification }
 }
-
 export type ApplicationState = {
   widgets: {
     [key: string]: WidgetBase

package/services/frontend/src/core/types/PluginRegistrar.ts

@@ -12,6 +12,8 @@ import type {
   PluginApi,
 } from "@racletteOrchestrator"
 import type { DefineComponent } from "vue"
+import type { UIState, RouteState, WidgetBase } from "@racletteCore/store/types"
+import type { Query } from "@racletteCore/store/reducers/queries/reducers"
 export type BroadcastChannelDefinition = {
   channel: string
   channelKey: string
@@ -77,12 +79,12 @@ export type PluginFrontendDefinition = {
 type StorePayloadObject = Record<string, any>
 
 export type PluginStoreApi = {
-  getUiState<T = any>(): T
-  setUiState: (payload: StorePayloadObject) => void
-  getWidgetState<T = any>(widgetId: string): T
-  updateWidgetState: (payload: StorePayloadObject, widgetId: string) => void
-  setWidgetState: (payload: StorePayloadObject, widgetId: string) => void
-  getQueryState<T = any>(actionId: actionId): T
+  getUiState(): UIState
+  setUiState: (payload: Partial<UIState>) => void
+  getWidgetState(widgetId: string): WidgetBase | Record<string, never>
+  updateWidgetState: (payload: Partial<WidgetBase>, widgetId: string) => void
+  setWidgetState: (payload: Partial<WidgetBase>, widgetId: string) => void
+  getQueryState(actionId: actionId): Query | Record<string, never>
   getQueryData<T = any>(actionId: actionId): T
   get<T = any>(pathArray: string[], filter: Record<string, any>): T
 }

package/services/frontend/src/core/types/Store.ts

@@ -13,5 +13,6 @@ export type StoreHelperGetState = {
 export type RacletteStore = ReduxStore & {
   hasChanges: (oldVal: string, newVal: string) => boolean
   getState: (params: string | any[] | StoreHelperGetState) => any
+  selectors: Record<string, any>
   appSessionId?: String
 }

package/services/frontend/src/orchestrator/components/composition/WidgetsLayoutLoader.vue

@@ -87,11 +87,20 @@
 <script setup lang="ts">
 import type { Composition } from "@shared/types/core/Composition.types"
 import type { WidgetBase } from "@racletteCore/store/types"
-import { watch, ref, h, computed, type Component } from "vue"
+import {
+  watch,
+  ref,
+  h,
+  computed,
+  onUnmounted,
+  nextTick,
+  type Component,
+} from "vue"
 import { widgetLoader } from "@racletteOrchestrator/helpers/widgetLoader"
 import { useDisplay } from "vuetify"
 import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
 import useRouteState from "@racletteOrchestrator/composables/useRouteState"
+import { createWidgetLifecycleManager } from "@racletteOrchestrator/composables/useWidgetLifecycle"
 
 const props = withDefaults(
   defineProps<{
@@ -104,6 +113,7 @@ const props = withDefaults(
     maxHeight: 0,
   },
 )
+
 const { compositionSlots } = useRouteState()
 
 const currentRouteConfig = computed(() =>
@@ -156,12 +166,18 @@ const gridKey = ref(0)
 
 // Calculate max height per widget based on grid layout
 const maxWidgetHeight = computed(() => {
-  // Always set max height to the calculated available screen height (with buffer)
-  // Later we should determine a max value based on other widgets in each row, so this value will be different across rows and columns
-
   return Math.min(props.maxHeight, 2400)
 })
 
+// Calculate total number of widgets
+const totalWidgets = computed(() => {
+  return props.widgetsLayout.reduce((sum, column) => sum + column.length, 0)
+})
+
+// Widget lifecycle manager
+const lifecycleManager = ref(createWidgetLifecycleManager(totalWidgets.value))
+
+// Widget component cache
 const widgetComponentCache = new Map<string, Component>()
 
 const getSlotWidget = (widget: WidgetBase) => {
@@ -169,11 +185,45 @@ const getSlotWidget = (widget: WidgetBase) => {
 
   if (!widgetComponentCache.has(cacheKey)) {
     try {
-      const component = widgetLoader(widget)
-      widgetComponentCache.set(cacheKey, component)
+      const originalComponent = widgetLoader(widget)
+
+      // Wrap the component to inject lifecycle hooks
+      const wrappedComponent = {
+        name: `${originalComponent.name || "Widget"}Wrapper`,
+        setup(props, context) {
+          const { onAllWidgetsReady, onWidgetRendered, onWidgetUnmounted } =
+            lifecycleManager.value.createLifecycleHooks(widget.uuid)
+
+          onUnmounted(() => {
+            onWidgetUnmounted()
+          })
+
+          // Pass lifecycle hook to the component as a prop
+          const enhancedProps = {
+            ...props,
+            onAllWidgetsReady,
+            ref: (el: any) => {
+              if (el) {
+                // Element is mounted, observe it
+                nextTick(() => {
+                  // Get the actual DOM element
+                  const element = el.$el || el
+                  if (element instanceof HTMLElement) {
+                    onWidgetRendered(element)
+                  }
+                })
+              }
+            },
+          }
+
+          return () => h(originalComponent, enhancedProps, context.slots)
+        },
+      }
+
+      widgetComponentCache.set(cacheKey, wrappedComponent)
     } catch (error) {
       console.error("🚨 Error creating widget component:", error)
-      // cache error component too
+      // Cache error component too
       widgetComponentCache.set(cacheKey, {
         name: "ComponentCreationError",
         setup() {
@@ -195,10 +245,20 @@ const getGridCols = (rowLength) => (mdAndDown.value ? 12 : 12 / rowLength)
 
 const getSlotCols = (slot) => (mdAndDown.value ? 12 : slot.column)
 
-// Watch for changes in widgetsLayout to trigger transition
+// Watch for changes in widgetsLayout to trigger transition and reset lifecycle
 watch(
   () => props.widgetsLayout,
   () => {
+    // Reset lifecycle manager
+    lifecycleManager.value.reset()
+
+    // Clear component cache to force re-wrapping with new lifecycle manager
+    widgetComponentCache.clear()
+
+    // Create new lifecycle manager with updated widget count
+    lifecycleManager.value = createWidgetLifecycleManager(totalWidgets.value)
+
+    // Trigger grid transition
     gridKey.value++
   },
   { deep: true },

package/services/frontend/src/orchestrator/components/menu/UserMenu.vue

@@ -38,7 +38,7 @@
         </template>
         <v-list-item-title>{{ $t("core.toggle_theme") }}</v-list-item-title>
       </v-list-item>
-      <v-list-item v-if="isDecember()" @click="eggMe('xmas')">
+      <v-list-item v-if="isWinter()" @click="toggleSnow">
         <template #prepend>
           <v-icon>mdi-snowflake</v-icon>
         </template>
@@ -145,13 +145,20 @@ const { getCompositionLinkForSlotName } = useRouteState()
 
 const userLanguage = useLocalStorage<string>("user-language", null)
 const userTheme = useLocalStorage<string>("user-theme", null)
+const showSnow = useLocalStorage<boolean>("show-snow", true)
 const { state: pageNavigation } = usePageNavigation()
 
 const isOpen = ref(false)
 const canRefresh = ref(true)
 
 const requireAuthentication = configService.getRequireAuthentication()
-const isDecember = () => new Date().getMonth() === 11
+const isWinter = () => {
+  const month = new Date().getMonth()
+  if (month === 11 || month === 0) {
+    return true
+  }
+  return false
+}
 const currentPageRoute = getCompositionLinkForSlotName(DEFAULT_SLOT_NAME)
 
 const activeRouteName = computed(() => {
@@ -214,11 +221,16 @@ const openEgg = () =>
     isOpen.value = false
     eggMe("asteroids")
   })
-
+const toggleSnow = () => {
+  showSnow.value = !showSnow.value
+  eggMe("xmas")
+}
 onMounted(async () => {
-  if (isDecember()) {
+  if (isWinter()) {
     await awaitTime(600)
-    eggMe("xmas")
+    if (showSnow.value) {
+      eggMe("xmas")
+    }
   }
 })
 </script>

package/services/frontend/src/orchestrator/components/welcomeScreen/AdminWelcomeScreen.vue

@@ -112,7 +112,7 @@ const configurations = computed(() => [
 // Methods
 const handleWorkbenchClick = () => {
   // Navigate to workbench or emit event
-  console.log("Navigate to Raclette Workbench")
+  console.log("Navigate to racletteJS Workbench")
   // router.push('/workbench') // Uncomment when route is available
 }
 </script>

package/services/frontend/src/orchestrator/composables/index.ts

@@ -3,3 +3,4 @@ export * from "./useRouteState"
 export * from "./useCurrentComposition"
 export * from "./useWidgets"
 export * from "./useInteractionLinks"
+export * from "./useWidgetLifecycle"

package/services/frontend/src/orchestrator/composables/usePluginApi.ts

@@ -169,7 +169,6 @@ export const usePluginApi = (
         }
         return getResult()
       },
-
       getQueryState: (actionId) => {
         if (!actionId) return {}
         const getResult = () => {
@@ -185,7 +184,6 @@ export const usePluginApi = (
         console.error("not implemented yet")
       },
       get: (pathArray, filter) => {
-        const cacheString = createStableHash({ pathArray, filter })
         const getResult = () => {
           const { state } = getState(pathArray, filter)
           return state
@@ -206,7 +204,6 @@ export const usePluginApi = (
           payload,
         })
       },
-
       updateWidgetState: (
         payload: object,
         widgetId: string = getWidgetId(),