@jskit-ai/users-web 0.1.33 → 0.1.34

package/src/client/composables/routeTemplateHelpers.js

@@ -100,11 +100,64 @@ function resolveRouteTemplateLocation(routeTemplate = "", { params = {}, current
   return resolvedPathname;
 }
 
+function extractRouteParamNames(pathTemplate = "") {
+  const normalizedTemplate = String(pathTemplate || "").trim();
+  if (!normalizedTemplate) {
+    return [];
+  }
+
+  const names = [];
+  const seen = new Set();
+  const pattern = /:([A-Za-z][A-Za-z0-9_]*)/g;
+  let match = null;
+  while ((match = pattern.exec(normalizedTemplate)) != null) {
+    const name = String(match[1] || "").trim();
+    if (!name || seen.has(name)) {
+      continue;
+    }
+    seen.add(name);
+    names.push(name);
+  }
+
+  return names;
+}
+
+function resolveRouteParamNamesInOrder(route = null) {
+  const sourceRoute = route && typeof route === "object" ? route : {};
+  const matched = Array.isArray(sourceRoute.matched) ? sourceRoute.matched : [];
+  const names = [];
+  const seen = new Set();
+
+  for (const entry of matched) {
+    const entryPath = String(entry?.path || "").trim();
+    if (!entryPath) {
+      continue;
+    }
+    for (const name of extractRouteParamNames(entryPath)) {
+      if (seen.has(name)) {
+        continue;
+      }
+      seen.add(name);
+      names.push(name);
+    }
+  }
+
+  if (names.length > 0) {
+    return names;
+  }
+
+  return Object.keys(asPlainObject(sourceRoute.params))
+    .map((entry) => String(entry || "").trim())
+    .filter(Boolean);
+}
+
 export {
   normalizeRouteParamName,
   toRouteParamValue,
   resolveRouteParamsSource,
   resolveRoutePathnameSource,
   resolveRouteTemplatePath,
-  resolveRouteTemplateLocation
+  resolveRouteTemplateLocation,
+  extractRouteParamNames,
+  resolveRouteParamNamesInOrder
 };

package/src/client/composables/useAccountSettingsRuntime.js

@@ -202,22 +202,22 @@ function useAccountSettingsRuntime() {
 
   const settingsView = useView({
     ownershipFilter: OWNERSHIP_PUBLIC,
-  apiSuffix: "/settings",
-  queryKeyFactory: () => accountSettingsQueryKey,
-  realtime: {
-    event: "account.settings.changed"
-  },
+    apiSuffix: "/settings",
+    queryKeyFactory: () => accountSettingsQueryKey,
+    realtime: {
+      event: "account.settings.changed"
+    },
     fallbackLoadError: "Unable to load settings.",
     mapLoadedToModel: mapAccountSettingsPayload
   });
 
   const pendingInvitesView = useView({
     ownershipFilter: OWNERSHIP_PUBLIC,
-  apiSuffix: "/bootstrap",
-  queryKeyFactory: () => pendingInvitesQueryKey,
-  realtime: {
-    event: "workspace.invitations.pending.changed"
-  },
+    apiSuffix: "/bootstrap",
+    queryKeyFactory: () => pendingInvitesQueryKey,
+    realtime: {
+      event: "workspace.invitations.pending.changed"
+    },
     fallbackLoadError: "Unable to load invitations.",
     model: pendingInvitesModel,
     mapLoadedToModel: (model, payload = {}) => {
@@ -347,11 +347,11 @@ function useAccountSettingsRuntime() {
     }
   });
 
-  const loadingSettings = computed(() => Boolean(settingsView.isLoading.value));
-  const refreshingSettings = computed(() => Boolean(settingsView.isRefetching.value));
+  const loadingSettings = computed(() => Boolean(settingsView.isLoading));
+  const refreshingSettings = computed(() => Boolean(settingsView.isRefetching));
   const invitesAvailable = computed(() => pendingInvitesModel.workspaceInvitesEnabled === true);
-  const loadingInvites = computed(() => Boolean(pendingInvitesView.isLoading.value));
-  const refreshingInvites = computed(() => Boolean(pendingInvitesView.isRefetching.value));
+  const loadingInvites = computed(() => Boolean(pendingInvitesView.isLoading));
+  const refreshingInvites = computed(() => Boolean(pendingInvitesView.isRefetching));
   const pendingInvites = computed(() => {
     return Array.isArray(pendingInvitesModel.pendingInvites) ? pendingInvitesModel.pendingInvites : [];
   });

package/src/client/composables/useAddEdit.js

@@ -92,11 +92,12 @@ function useAddEdit({
 
   const canView = operationScope.permissionGate("view");
   const canSave = operationScope.permissionGate("save");
+  const queryCanRun = operationScope.queryCanRun(canView);
 
   const endpointResource = useEndpointResource({
     queryKey: operationScope.queryKey,
     path: operationScope.apiPath,
-    enabled: operationScope.queryCanRun(canView),
+    enabled: queryCanRun,
     readMethod,
     writeMethod,
     fallbackLoadError,

package/src/client/composables/useCrudSchemaForm.js

@@ -1,5 +1,5 @@
-import { computed, reactive } from "vue";
-import { useRouter } from "vue-router";
+import { computed, proxyRefs, reactive, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { asPlainObject } from "./scopeHelpers.js";
 import { useAddEdit } from "./useAddEdit.js";
 import {
@@ -7,9 +7,11 @@ import {
   createCrudFormModel,
   buildCrudFormPayload,
   applyCrudPayloadToForm,
+  applyCrudRouteBoundFieldValues,
   resolveCrudFieldErrors,
   parseCrudResourceOperationInput
 } from "./crudSchemaFormHelpers.js";
+import { hasResolvedQueryData } from "./resourceLoadStateHelpers.js";
 
 function normalizeFieldErrorKeys(keys = []) {
   return Array.isArray(keys)
@@ -46,6 +48,7 @@ function useCrudSchemaForm({
   parseInput = null
 } = {}) {
   const router = useRouter();
+  const route = useRoute();
   const normalizedFields = normalizeCrudFormFields(formFields);
   const normalizedAddEditOptions = asPlainObject(addEditOptions);
   const saveSuccessOptions = normalizeSaveSuccessOptions(saveSuccess);
@@ -58,6 +61,19 @@ function useCrudSchemaForm({
     ? asPlainObject(createModel(normalizedFields))
     : createCrudFormModel(normalizedFields);
   const form = hasProvidedModel ? providedModel : reactive(defaultModel);
+
+  function applyRouteBoundValues(target = {}) {
+    return applyCrudRouteBoundFieldValues(normalizedFields, target, route?.params || {});
+  }
+
+  applyRouteBoundValues(form);
+  watch(
+    () => route?.params,
+    () => {
+      applyRouteBoundValues(form);
+    },
+    { deep: true }
+  );
   const parseInputOverride = typeof parseInput === "function"
     ? parseInput
     : (typeof normalizedAddEditOptions.parseInput === "function" ? normalizedAddEditOptions.parseInput : null);
@@ -87,14 +103,15 @@ function useCrudSchemaForm({
   }
 
   function resolveBuildRawPayload(model = {}, context = {}) {
-    if (buildPayloadOverride) {
-      return buildPayloadOverride(model, {
-        ...context,
-        fields: normalizedFields
-      });
-    }
+    const payload = buildPayloadOverride
+      ? buildPayloadOverride(model, {
+          ...context,
+          fields: normalizedFields
+        })
+      : buildCrudFormPayload(normalizedFields, model);
+    applyRouteBoundValues(payload);
 
-    return buildCrudFormPayload(normalizedFields, model);
+    return payload;
   }
 
   const effectiveMapLoadedToModel = mapPayloadToModelOverride
@@ -103,10 +120,12 @@ function useCrudSchemaForm({
           ...context,
           fields: normalizedFields
         });
+        applyRouteBoundValues(model);
       }
     : (shouldApplyDefaultMapPayload
         ? (model = {}, payload = {}) => {
             applyCrudPayloadToForm(normalizedFields, model, payload);
+            applyRouteBoundValues(model);
           }
         : undefined);
 
@@ -162,9 +181,16 @@ function useCrudSchemaForm({
     return resolveCrudFieldErrors(addEdit.fieldErrors, fieldKey);
   }
 
-  const showFormSkeleton = computed(() => Boolean(addEdit.isInitialLoading));
+  const showFormSkeleton = computed(() => {
+    const hasResolvedData = hasResolvedQueryData({
+      query: addEdit?.resource?.query,
+      data: addEdit?.resource?.data
+    });
 
-  return Object.freeze({
+    return Boolean(addEdit.isInitialLoading) && !hasResolvedData;
+  });
+
+  return proxyRefs({
     formFields: normalizedFields,
     fieldErrorKeys,
     form,

package/src/client/composables/useEndpointResource.js

@@ -4,6 +4,7 @@ import { usersWebHttpClient } from "../lib/httpClient.js";
 import { asPlainObject } from "./scopeHelpers.js";
 import { resolveEnabledRef, resolveTextRef } from "./refValueHelpers.js";
 import { toQueryErrorMessage } from "./errorMessageHelpers.js";
+import { hasResolvedQueryData } from "./resourceLoadStateHelpers.js";
 
 function useEndpointResource({
   queryKey,
@@ -66,7 +67,11 @@ function useEndpointResource({
   });
 
   const data = computed(() => query.data.value);
-  const isInitialLoading = computed(() => Boolean(queryEnabled.value && query.isPending.value));
+  const hasResolvedData = computed(() => hasResolvedQueryData({
+    query,
+    data
+  }));
+  const isInitialLoading = computed(() => Boolean(queryEnabled.value && query.isPending.value && !hasResolvedData.value));
   const isFetching = computed(() => Boolean(queryEnabled.value && query.isFetching.value));
   const isRefetching = computed(() => Boolean(isFetching.value && !isInitialLoading.value));
   const isLoading = computed(() => Boolean(isInitialLoading.value || isFetching.value));

package/src/client/composables/useList.js

@@ -1,9 +1,22 @@
-import { computed } from "vue";
+import { computed, onScopeDispose, proxyRefs, ref, watch } from "vue";
+import { appendQueryString } from "@jskit-ai/kernel/shared/support";
+import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
+import { resolveCrudLookupFieldKeys } from "@jskit-ai/kernel/shared/support/crudLookup";
 import { USERS_ROUTE_VISIBILITY_WORKSPACE } from "@jskit-ai/users-core/shared/support/usersVisibility";
 import { useListCore } from "./useListCore.js";
 import { resolveOperationAdapter } from "./operationAdapters.js";
 import { setupOperationErrorReporting } from "./operationUiHelpers.js";
 import { createListUiRuntime } from "./listUiRuntime.js";
+import {
+  normalizeListSearchConfig,
+  matchesLocalSearch
+} from "./listSearchSupport.js";
+import { resolveLookupFieldDisplayValue } from "./crudLookupFieldLabelSupport.js";
+import {
+  resolveRouteParamNamesInOrder,
+  resolveRouteParamsSource,
+  toRouteParamValue
+} from "./routeTemplateHelpers.js";
 
 function useList({
   ownershipFilter = USERS_ROUTE_VISIBILITY_WORKSPACE,
@@ -22,11 +35,45 @@ function useList({
   queryOptions,
   realtime = null,
   adapter = null,
+  resource = null,
   recordIdParam = "recordId",
   recordIdSelector = null,
   viewUrlTemplate = "",
-  editUrlTemplate = ""
+  editUrlTemplate = "",
+  search = null
 } = {}) {
+  const searchConfig = normalizeListSearchConfig(search);
+  const searchQuery = ref(searchConfig.initialQuery);
+  const debouncedSearchQuery = ref(searchConfig.initialQuery);
+  let searchDebounceTimer = null;
+  const isSearchDebouncing = ref(false);
+
+  watch(searchQuery, (value) => {
+    const normalizedValue = normalizeText(value);
+    if (searchDebounceTimer) {
+      clearTimeout(searchDebounceTimer);
+    }
+    if (searchConfig.enabled !== true) {
+      debouncedSearchQuery.value = normalizedValue;
+      isSearchDebouncing.value = false;
+      return;
+    }
+    isSearchDebouncing.value = true;
+    searchDebounceTimer = setTimeout(() => {
+      debouncedSearchQuery.value = normalizedValue;
+      isSearchDebouncing.value = false;
+      searchDebounceTimer = null;
+    }, searchConfig.debounceMs);
+  }, { immediate: true });
+
+  onScopeDispose(() => {
+    if (!searchDebounceTimer) {
+      return;
+    }
+    clearTimeout(searchDebounceTimer);
+    searchDebounceTimer = null;
+  });
+
   const operationAdapter = resolveOperationAdapter(adapter, {
     context: "useList adapter"
   });
@@ -44,10 +91,99 @@ function useList({
     realtime
   });
   const canView = operationScope.permissionGate("view");
+  const parentRouteFilter = computed(() => {
+    const lookupFieldKeys = resolveCrudLookupFieldKeys(resource);
+    if (lookupFieldKeys.length < 1) {
+      return null;
+    }
+
+    const lookupFieldKeySet = new Set(lookupFieldKeys);
+    const sourceRoute = operationScope.routeContext.route;
+    const orderedRouteParamNames = resolveRouteParamNamesInOrder(sourceRoute);
+    if (orderedRouteParamNames.length < 1) {
+      return null;
+    }
+
+    const normalizedRecordIdParam = normalizeText(recordIdParam) || "recordId";
+    const parentParamName = [...orderedRouteParamNames]
+      .reverse()
+      .find((name) => (
+        name !== "workspaceSlug" &&
+        name !== normalizedRecordIdParam &&
+        lookupFieldKeySet.has(name)
+      )) || "";
+    if (!parentParamName) {
+      return null;
+    }
+
+    const routeParams = resolveRouteParamsSource(sourceRoute?.params || {});
+    const parentParamValue = toRouteParamValue(routeParams[parentParamName]);
+    if (!parentParamValue) {
+      return null;
+    }
+
+    return Object.freeze({
+      key: parentParamName,
+      value: parentParamValue
+    });
+  });
+  const activeSearchQuery = computed(() => {
+    if (searchConfig.enabled !== true) {
+      return "";
+    }
+    const normalized = normalizeText(debouncedSearchQuery.value);
+    if (!normalized || normalized.length < searchConfig.minLength) {
+      return "";
+    }
+    return normalized;
+  });
+  const querySearchEnabled = computed(() => searchConfig.enabled === true && searchConfig.mode === "query");
+  const listPath = computed(() => {
+    const basePath = normalizeText(operationScope.apiPath.value);
+    if (!basePath) {
+      return "";
+    }
+
+    const searchParams = new URLSearchParams();
+    if (querySearchEnabled.value) {
+      const queryValue = activeSearchQuery.value;
+      if (queryValue) {
+        searchParams.set(searchConfig.queryParam, queryValue);
+      }
+    }
+
+    const parentFilter = parentRouteFilter.value;
+    if (parentFilter) {
+      searchParams.set(parentFilter.key, parentFilter.value);
+    }
+
+    const serializedSearch = searchParams.toString();
+    if (!serializedSearch) {
+      return basePath;
+    }
+
+    return appendQueryString(basePath, serializedSearch);
+  });
+  const listQueryKey = computed(() => {
+    const sourceQueryKey = operationScope.queryKey.value;
+    const baseQueryKey = Array.isArray(sourceQueryKey)
+      ? [...sourceQueryKey]
+      : sourceQueryKey == null
+        ? []
+        : [sourceQueryKey];
+    const parentFilter = parentRouteFilter.value;
+    if (parentFilter) {
+      baseQueryKey.push("__parent__", parentFilter.key, parentFilter.value);
+    }
+    if (querySearchEnabled.value) {
+      baseQueryKey.push("__search__", searchConfig.queryParam, activeSearchQuery.value);
+    }
+    return baseQueryKey;
+  });
 
   const list = useListCore({
-    queryKey: operationScope.queryKey,
-    path: operationScope.apiPath,
+    queryKey: listQueryKey,
+    path: listPath,
     enabled: operationScope.queryCanRun(canView),
     initialPageParam,
     getNextPageParam,
@@ -56,6 +192,19 @@ function useList({
     queryOptions,
     fallbackLoadError
   });
+  const filteredItems = computed(() => {
+    const sourceItems = Array.isArray(list.items.value) ? list.items.value : [];
+    if (searchConfig.enabled !== true || searchConfig.mode !== "local") {
+      return sourceItems;
+    }
+
+    const queryValue = activeSearchQuery.value;
+    if (!queryValue) {
+      return sourceItems;
+    }
+
+    return sourceItems.filter((item) => matchesLocalSearch(item, queryValue, searchConfig.fields));
+  });
 
   const isInitialLoading = operationScope.isLoading(list.isInitialLoading);
   const isFetching = operationScope.isLoading(list.isFetching);
@@ -63,7 +212,7 @@ function useList({
   const loadError = operationScope.loadError(list.loadError);
   const isLoading = operationScope.isLoading(list.isLoading);
   const listUiRuntime = createListUiRuntime({
-    items: list.items,
+    items: filteredItems,
     isInitialLoading,
     recordIdParam,
     recordIdSelector,
@@ -85,7 +234,7 @@ function useList({
     })
   });
 
-  return Object.freeze({
+  return proxyRefs({
     canView,
     isInitialLoading,
     isFetching,
@@ -95,7 +244,7 @@ function useList({
     hasMore: list.hasMore,
     loadError,
     pages: list.pages,
-    items: list.items,
+    items: filteredItems,
     reload: list.reload,
     loadMore: list.loadMore,
     hasViewUrl: listUiRuntime.hasViewUrl,
@@ -105,7 +254,14 @@ function useList({
     resolveRowKey: listUiRuntime.resolveRowKey,
     resolveParams: listUiRuntime.resolveParams,
     resolveViewUrl: listUiRuntime.resolveViewUrl,
-    resolveEditUrl: listUiRuntime.resolveEditUrl
+    resolveEditUrl: listUiRuntime.resolveEditUrl,
+    resolveFieldDisplay: resolveLookupFieldDisplayValue,
+    searchEnabled: searchConfig.enabled,
+    searchMode: searchConfig.mode,
+    searchQuery,
+    searchLabel: searchConfig.label,
+    searchPlaceholder: searchConfig.placeholder,
+    isSearchDebouncing
   });
 }
 

package/src/client/composables/useRealtimeQueryInvalidation.js

@@ -77,11 +77,30 @@ function useOperationRealtime({
   enabled = true
 } = {}) {
   const source = normalizeRealtimeOptions(realtime);
-  if (!source.event) {
+  const eventList = [];
+  if (Object.hasOwn(source, "event")) {
+    const normalizedEvent = normalizeText(source.event);
+    if (normalizedEvent) {
+      eventList.push(normalizedEvent);
+    }
+  }
+  if (Object.hasOwn(source, "events")) {
+    if (!Array.isArray(source.events)) {
+      throw new TypeError("realtime.events must be an array when configured.");
+    }
+    for (const entry of source.events) {
+      const normalizedEvent = normalizeText(entry);
+      if (!normalizedEvent || eventList.includes(normalizedEvent)) {
+        continue;
+      }
+      eventList.push(normalizedEvent);
+    }
+  }
+
+  if (eventList.length < 1) {
     return null;
   }
 
-  const event = source.event;
   const matches = typeof source.matches === "function" ? source.matches : null;
   const onEvent = typeof source.onEvent === "function" ? source.onEvent : null;
   const resolvedQueryKey = Object.hasOwn(source, "queryKey") ? source.queryKey : queryKey;
@@ -90,12 +109,18 @@ function useOperationRealtime({
     return resolveEnabled(enabled) && resolveEnabled(sourceEnabled);
   });
 
-  return useRealtimeQueryInvalidation({
-    event,
-    enabled: active,
-    matches,
-    queryKey: resolvedQueryKey,
-    onEvent
+  const bindings = eventList.map((event) =>
+    useRealtimeQueryInvalidation({
+      event,
+      enabled: active,
+      matches,
+      queryKey: resolvedQueryKey,
+      onEvent
+    })
+  );
+
+  return Object.freeze({
+    active: computed(() => bindings.some((binding) => Boolean(binding?.active?.value)))
   });
 }
 

package/src/client/composables/useView.js

@@ -1,4 +1,4 @@
-import { computed } from "vue";
+import { computed, proxyRefs } from "vue";
 import { useRoute } from "vue-router";
 import { USERS_ROUTE_VISIBILITY_WORKSPACE } from "@jskit-ai/users-core/shared/support/usersVisibility";
 import { useViewCore } from "./useViewCore.js";
@@ -6,6 +6,7 @@ import { useEndpointResource } from "./useEndpointResource.js";
 import { resolveOperationAdapter } from "./operationAdapters.js";
 import { setupOperationErrorReporting } from "./operationUiHelpers.js";
 import { createViewUiRuntime } from "./viewUiRuntime.js";
+import { resolveLookupFieldDisplayValue } from "./crudLookupFieldLabelSupport.js";
 
 function useView({
   ownershipFilter = USERS_ROUTE_VISIBILITY_WORKSPACE,
@@ -106,12 +107,13 @@ function useView({
     })
   });
 
-  return Object.freeze({
+  return proxyRefs({
     record: view.record,
     recordId: viewUiRuntime.recordId,
     listUrl: viewUiRuntime.listUrl,
     editUrl: viewUiRuntime.editUrl,
     resolveParams: viewUiRuntime.resolveParams,
+    resolveFieldDisplay: resolveLookupFieldDisplayValue,
     canView,
     isLoading,
     isFetching,

package/src/client/composables/useViewCore.js

@@ -31,8 +31,18 @@ function useViewCore({
 
   const data = resource?.data;
   const record = computed(() => (model !== undefined ? model : data?.value));
-  const isLoading = computed(() => Boolean(resource?.query?.isPending?.value));
-  const isFetching = computed(() => Boolean(resource?.query?.isFetching?.value));
+  const isLoading = computed(() => {
+    if (resource?.isInitialLoading?.value !== undefined) {
+      return Boolean(resource.isInitialLoading.value);
+    }
+    return Boolean(resource?.query?.isPending?.value);
+  });
+  const isFetching = computed(() => {
+    if (resource?.isFetching?.value !== undefined) {
+      return Boolean(resource.isFetching.value);
+    }
+    return Boolean(resource?.query?.isFetching?.value);
+  });
   const error = computed(() => resource?.query?.error?.value || null);
 
   const isNotFound = computed(() => {

package/templates/src/components/account/settings/AccountSettingsClientElement.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { normalizeOneOf } from "@jskit-ai/kernel/shared/support/normalize";
 import { useAccountSettingsRuntime } from "@jskit-ai/users-web/client/composables/useAccountSettingsRuntime";
 import AccountSettingsProfileSection from "./AccountSettingsProfileSection.vue";
 import AccountSettingsPreferencesSection from "./AccountSettingsPreferencesSection.vue";
@@ -17,15 +18,11 @@ const sections = Object.freeze([
   { title: "Notifications", value: "notifications" },
   { title: "Invites", value: "invites" }
 ]);
-const sectionValues = new Set(sections.map((section) => section.value));
+const sectionValues = Object.freeze(sections.map((section) => section.value));
 
 function normalizeSection(value) {
   const source = Array.isArray(value) ? value[0] : value;
-  const normalized = String(source || "").trim().toLowerCase();
-  if (!sectionValues.has(normalized)) {
-    return "profile";
-  }
-  return normalized;
+  return normalizeOneOf(source, sectionValues, "profile");
 }
 
 function readRouteSection() {

package/templates/src/composables/useWorkspaceNotFoundState.js

@@ -1,5 +1,6 @@
 import { computed } from "vue";
 import { useRoute } from "vue-router";
+import { normalizeLowerText, normalizeObject } from "@jskit-ai/kernel/shared/support/normalize";
 import { useWebPlacementContext } from "@jskit-ai/shell-web/client/placement";
 
 const STATUS_MESSAGES = {
@@ -8,33 +9,25 @@ const STATUS_MESSAGES = {
   unauthenticated: "You need to sign in to access this workspace.",
   error: "Workspace data could not be loaded right now."
 };
+const DEFAULT_WORKSPACE_UNAVAILABLE_MESSAGE = "Workspace is currently unavailable.";
+const RESOLVED_WORKSPACE_STATUS = "resolved";
 
 function useWorkspaceNotFoundState() {
   const route = useRoute();
   const { context: placementContext } = useWebPlacementContext();
 
-  const routeWorkspaceSlug = computed(() =>
-    String(route?.params?.workspaceSlug || "")
-      .trim()
-      .toLowerCase()
-  );
+  const routeWorkspaceSlug = computed(() => normalizeLowerText(route?.params?.workspaceSlug));
 
   const workspaceBootstrapStatus = computed(() => {
-    const statuses =
-      placementContext.value?.workspaceBootstrapStatuses &&
-      typeof placementContext.value.workspaceBootstrapStatuses === "object"
-        ? placementContext.value.workspaceBootstrapStatuses
-        : {};
-    return String(statuses[routeWorkspaceSlug.value] || "")
-      .trim()
-      .toLowerCase();
+    const statuses = normalizeObject(placementContext.value?.workspaceBootstrapStatuses);
+    return normalizeLowerText(statuses[routeWorkspaceSlug.value]);
   });
 
   const workspaceUnavailable = computed(
-    () => Boolean(workspaceBootstrapStatus.value) && workspaceBootstrapStatus.value !== "resolved"
+    () => Boolean(workspaceBootstrapStatus.value) && workspaceBootstrapStatus.value !== RESOLVED_WORKSPACE_STATUS
   );
   const workspaceUnavailableMessage = computed(
-    () => STATUS_MESSAGES[workspaceBootstrapStatus.value] || "Workspace is currently unavailable."
+    () => STATUS_MESSAGES[workspaceBootstrapStatus.value] || DEFAULT_WORKSPACE_UNAVAILABLE_MESSAGE
   );
 
   return Object.freeze({