@kennofizet/apphub-frontend 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennofizet/apphub-frontend",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "App Hub Vue 3 UI — Windows-style desktop shell and modular apps (App Store default).",
   "main": "./src/index.js",
   "module": "./src/index.js",

package/src/composables/useAppHubHostApi.js

@@ -1,11 +1,18 @@
-import { getCurrentInstance } from 'vue'
-import { getAppHubStore } from '../moduleStore.js'
+import { getCurrentInstance, inject } from 'vue'
+import { APPHUB_MODULE_STORE_KEY, getAppHubStore } from '../moduleStore.js'
 
 export function resolveRootApp(instance = getCurrentInstance()) {
   if (!instance) return null
   return instance.appContext?.app ?? instance.app ?? null
 }
 
+/** Resolve module store — inject first (always same instance), then WeakMap by Vue app. */
+export function useAppHubModuleStore() {
+  const fromInject = inject(APPHUB_MODULE_STORE_KEY, null)
+  if (fromInject) return fromInject
+  return getAppHubStore(resolveRootApp())
+}
+
 export function getHostApiForApp(app) {
   return getAppHubStore(app)?.facade ?? null
 }
@@ -20,5 +27,9 @@ export function isBackendReadyForApp(app) {
  * so publisher app code cannot access grantBridgeScope or internal docs.
  */
 export function useAppHubHostApi() {
-  return getHostApiForApp(resolveRootApp())
+  return useAppHubModuleStore()?.facade ?? null
+}
+
+export function isBackendReadyFromStore(store) {
+  return !!(store?.credentials?.backendUrl && store?.credentials?.token)
 }

package/src/index.js

@@ -8,7 +8,7 @@ import { APPHUB_ZONE_CONTEXT_KEY } from './composables/useAppHubZoneContext.js'
 import { createAppStoreState, provideAppStore } from './modules/app-store/index.js'
 import { AppHubDesktop } from './modules/desktop/index.js'
 import { AppHubRunner } from './modules/runner/index.js'
-import { getAppHubStore, registerAppHubStore } from './moduleStore.js'
+import { getAppHubStore, registerAppHubStore, APPHUB_MODULE_STORE_KEY } from './moduleStore.js'
 import {
   createWindowManagerState,
   provideWindowManager,
@@ -24,6 +24,11 @@ import {
   loadBootstrapCache,
   saveBootstrapCache,
 } from './utils/bootstrapCache.js'
+import {
+  apphubDebug,
+  describeHostApi,
+  describeStore,
+} from './utils/apphubDebug.js'
 
 const bootstrapInflight = new WeakMap()
 
@@ -136,6 +141,7 @@ function applyBootstrapOrigins(store, bootstrapResponse, { fromCache = false } =
   reconcileOriginSafety(store)
   store.options.originBootstrapLoading = false
   applyOriginSafety(store.options)
+  apphubDebug('bootstrap', 'applyBootstrapOrigins done', describeStore(store))
 }
 
 function applyCachedBootstrapIfAny(store) {
@@ -150,12 +156,24 @@ async function fetchBootstrapSession(store) {
   if (promise) return promise
 
   promise = (async () => {
+    apphubDebug('bootstrap', 'fetchBootstrapSession start', describeStore(store))
     syncApi(store)
-    if (!store.facade?.bootstrap) return
+    if (!store.facade?.bootstrap) {
+      apphubDebug('bootstrap', 'fetchBootstrapSession abort — no bootstrap fn', describeStore(store))
+      return
+    }
 
     const res = await store.facade.bootstrap()
+    apphubDebug('bootstrap', 'fetchBootstrapSession bootstrap response', {
+      ...describeStore(store),
+      hasResponse: !!res,
+    })
     if (res) applyBootstrapOrigins(store, res)
-  })().catch(() => {
+  })().catch((err) => {
+    apphubDebug('bootstrap', 'fetchBootstrapSession failed', {
+      ...describeStore(store),
+      error: err?.message ?? String(err),
+    })
     store.options.originBootstrapLoading = false
     if (!store.options.serverOriginsResolved) {
       reconcileOriginSafety(store)
@@ -170,6 +188,11 @@ async function fetchBootstrapSession(store) {
 
 function startBootstrapSession(store) {
   const { backendUrl, token } = store.credentials
+  apphubDebug('bootstrap', 'startBootstrapSession', {
+    ...describeStore(store),
+    hasBackendUrl: !!backendUrl,
+    hasToken: !!token,
+  })
   if (!backendUrl || !token) {
     store.options.originBootstrapLoading = false
     reconcileOriginSafety(store)
@@ -180,11 +203,15 @@ function startBootstrapSession(store) {
   applyOriginSafety(store.options)
 
   const hadCache = applyCachedBootstrapIfAny(store)
+  apphubDebug('bootstrap', 'startBootstrapSession after cache', {
+    hadCache,
+    ...describeStore(store),
+  })
   if (!hadCache && !store.options.originBlocked) {
     store.options.originBootstrapLoading = true
     store.options.originBlocked = false
     applyOriginSafety(store.options)
-    disableModuleServices(store)
+    disableModuleServices(store, 'startBootstrapSession:no-cache')
   }
 
   return fetchBootstrapSession(store)
@@ -195,21 +222,30 @@ function reconcileOriginSafety(store) {
   const wasLoading = store.options.originBootstrapLoading === true
   applyOriginSafety(store.options)
 
+  let action = 'noop'
   if (store.options.originBootstrapLoading) {
-    disableModuleServices(store)
-    return
-  }
-
-  if (store.options.originBlocked && !wasBlocked) {
-    disableModuleServices(store)
+    disableModuleServices(store, 'reconcileOriginSafety:loading')
+    action = 'disable:loading'
+  } else if (store.options.originBlocked && !wasBlocked) {
+    disableModuleServices(store, 'reconcileOriginSafety:blocked')
+    action = 'disable:blocked'
   } else if (!store.options.originBlocked && (wasBlocked || wasLoading)) {
     enableModuleApi(store)
+    action = 'enable'
   }
+
+  apphubDebug('origin', 'reconcileOriginSafety', {
+    wasLoading,
+    wasBlocked,
+    action,
+    ...describeStore(store),
+  })
 }
 
-function disableModuleServices(store) {
+function disableModuleServices(store, reason = 'unknown') {
   store.facade.setImpl(null)
   store.coreApi = null
+  apphubDebug('api', 'disableModuleServices', { reason, ...describeStore(store) })
 }
 
 /** Window manager + app store — required even when origin is blocked (AppHubDesktop setup). */
@@ -221,6 +257,7 @@ function ensureModuleInfrastructure(vueApp, store) {
 function enableModuleApi(store) {
   syncApi(store)
   syncZoneContext(store)
+  apphubDebug('api', 'enableModuleApi', describeStore(store))
 }
 
 function enableModuleServices(vueApp, store) {
@@ -300,6 +337,14 @@ function applyModuleOptions(store, options = {}) {
     enforceDevFriendlyOrigins: nextPublic.enforceDevFriendlyOrigins,
   })
   applyOriginSafety(store.options, options)
+  const branch = !store.credentials.backendUrl || !store.credentials.token
+    ? 'no-credentials'
+    : (credsUnchanged ? 'creds-unchanged' : 'start-bootstrap')
+  apphubDebug('install', 'applyModuleOptions', {
+    branch,
+    credsUnchanged,
+    ...describeStore(store),
+  })
   if (store.credentials.backendUrl && store.credentials.token) {
     if (credsUnchanged) {
       reconcileOriginSafety(store)
@@ -320,6 +365,10 @@ function syncApi(store) {
       })
     : null
   facade.setImpl(api)
+  apphubDebug('api', 'syncApi', {
+    implSet: api != null,
+    ...describeStore(store),
+  })
 }
 
 function syncCoreApi(store) {
@@ -368,12 +417,25 @@ export function installAppHubModule(vueApp, options = {}) {
 
   if (store) {
     vueApp.provide('apphubHostApp', vueApp)
+    vueApp.provide(APPHUB_MODULE_STORE_KEY, store)
+    apphubDebug('install', 'installAppHubModule re-install', {
+      appUid: vueApp._uid ?? null,
+      hasToken: !!(options.token),
+      theme: options.theme,
+      language: options.language,
+    })
     applyModuleOptions(store, options)
     ensureModuleInfrastructure(vueApp, store)
     reconcileOriginSafety(store)
     return store.facade
   }
 
+  apphubDebug('install', 'installAppHubModule first install', {
+    appUid: vueApp._uid ?? null,
+    hasToken: !!(options.token),
+    backendUrl: options.backendUrl ? '(set)' : '(empty)',
+  })
+
   const facade = createApiFacade()
   const moduleOptions = reactive(buildPublicOptions(options))
   applyOriginSafety(moduleOptions, options)
@@ -393,6 +455,7 @@ export function installAppHubModule(vueApp, options = {}) {
 
   vueApp.provide('apphubOptions', moduleOptions)
   vueApp.provide('apphubHostApp', vueApp)
+  vueApp.provide(APPHUB_MODULE_STORE_KEY, store)
   vueApp.component('AppHubDesktop', AppHubDesktop)
   vueApp.component('AppHubRunner', AppHubRunner)
 
@@ -407,7 +470,7 @@ export function isAppHubModuleInstalled(vueApp) {
   return vueApp != null && getAppHubStore(vueApp) != null
 }
 
-export { useAppHubHostApi } from './composables/useAppHubHostApi.js'
+export { useAppHubHostApi, useAppHubModuleStore } from './composables/useAppHubHostApi.js'
 export { useAppHubZoneContext } from './composables/useAppHubZoneContext.js'
 export { createAppHubApi } from './api/index.js'
 export { createCoreApi } from './api/coreApi.js'

package/src/moduleStore.js

@@ -1,5 +1,18 @@
-/** Private per-Vue-app store — not exposed via provide/inject. */
-const installedApps = new WeakMap()
+/** Internal inject key — package components only; not part of public host API. */
+export const APPHUB_MODULE_STORE_KEY = Symbol('apphubModuleStore')
+
+const REGISTRY_KEY = '__kennofizet_apphub_installed_apps__'
+
+/** Shared WeakMap — Vite may load this module twice (host bundle vs SFC chunks). */
+function getInstalledAppsRegistry() {
+  const root = typeof globalThis !== 'undefined' ? globalThis : global
+  if (!root[REGISTRY_KEY]) {
+    root[REGISTRY_KEY] = new WeakMap()
+  }
+  return root[REGISTRY_KEY]
+}
+
+const installedApps = getInstalledAppsRegistry()
 
 export function registerAppHubStore(app, store) {
   installedApps.set(app, store)

package/src/modules/app-store/components/AppHubAppStoreApp.vue

@@ -97,11 +97,11 @@
 </template>
 
 <script setup>
-import { computed, getCurrentInstance, inject, onMounted, ref, watch } from 'vue'
+import { computed, inject, onMounted, ref, watch } from 'vue'
 import {
-  getHostApiForApp,
-  isBackendReadyForApp,
-  resolveRootApp,
+  isBackendReadyFromStore,
+  useAppHubHostApi,
+  useAppHubModuleStore,
 } from '../../../composables/useAppHubHostApi.js'
 import { useAppHubZoneContext } from '../../../composables/useAppHubZoneContext.js'
 import { t } from '../../../i18n/index.js'
@@ -109,6 +109,7 @@ import { resolveLang } from '../../../i18n/resolveLang.js'
 import { CATALOG_MODE_STORE } from '../constants/catalogModes.js'
 import { useCatalogInfiniteScroll } from '../composables/useCatalogInfiniteScroll.js'
 import { useAppStore } from '../composables/useAppStore.js'
+import { apphubDebug, describeHostApi } from '../../../utils/apphubDebug.js'
 import AppHubAppStoreCard from './AppHubAppStoreCard.vue'
 import AppHubAppStoreSettingsPanel from './AppHubAppStoreSettingsPanel.vue'
 
@@ -122,7 +123,9 @@ const props = defineProps({
 const settingsOpen = ref(false)
 const appStore = useAppStore()
 const catalog = appStore.catalogs.store
-const rootApp = inject('apphubHostApp', null) ?? resolveRootApp(getCurrentInstance())
+const hubStore = useAppHubModuleStore()
+const hostApi = useAppHubHostApi()
+const rootApp = inject('apphubHostApp', null)
 const zone = useAppHubZoneContext()
 const moduleOptions = inject('apphubOptions', {})
 const lang = computed(() => resolveLang(moduleOptions?.language, 'vi'))
@@ -152,19 +155,29 @@ const labels = computed(() => ({
 
 function hostApiOptions() {
   return {
-    backendReady: isBackendReadyForApp(rootApp),
+    backendReady: isBackendReadyFromStore(hubStore),
     mode: CATALOG_MODE_STORE,
   }
 }
 
-async function reloadCatalog() {
-  if (!rootApp) return
-  await appStore.loadCatalog(getHostApiForApp(rootApp), hostApiOptions())
+async function reloadCatalog(source = 'manual') {
+  const api = hostApi
+  const opts = hostApiOptions()
+  apphubDebug('app-store', 'reloadCatalog', {
+    source,
+    storeFromInject: !!hubStore,
+    ...describeHostApi(api),
+    backendReady: opts.backendReady,
+    originBootstrapLoading: moduleOptions?.originBootstrapLoading,
+    originBlocked: moduleOptions?.originBlocked,
+    catalogLoaded: catalog.loaded,
+    catalogError: catalog.error,
+  })
+  await appStore.loadCatalog(api, opts)
 }
 
 async function loadMore() {
-  if (!rootApp) return
-  await appStore.loadMoreCatalog(getHostApiForApp(rootApp), CATALOG_MODE_STORE, hostApiOptions())
+  await appStore.loadMoreCatalog(hostApi, CATALOG_MODE_STORE, hostApiOptions())
 }
 
 const { rootRef: scrollRoot, sentinelRef: scrollSentinel } = useCatalogInfiniteScroll({
@@ -191,21 +204,28 @@ async function onUninstall(app) {
 }
 
 onMounted(() => {
-  if (!catalog.loaded) reloadCatalog()
+  if (!catalog.loaded) reloadCatalog('onMounted')
 })
 
 watch(
   () => moduleOptions?.hasToken,
   (hasToken) => {
-    if (hasToken && !catalog.loaded) reloadCatalog()
+    if (hasToken && !catalog.loaded) reloadCatalog('watch:hasToken')
   },
 )
 
 watch(
   () => moduleOptions?.originBootstrapLoading,
   (loading, wasLoading) => {
+    apphubDebug('app-store', 'watch originBootstrapLoading', {
+      loading,
+      wasLoading,
+      originBlocked: moduleOptions?.originBlocked,
+      catalogLoaded: catalog.loaded,
+      catalogError: catalog.error,
+    })
     if (wasLoading && !loading && !moduleOptions?.originBlocked) {
-      if (!catalog.loaded || catalog.error === 'no_api') reloadCatalog()
+      if (!catalog.loaded || catalog.error === 'no_api') reloadCatalog('watch:bootstrap-done')
     }
   },
 )
@@ -213,7 +233,7 @@ watch(
 watch(
   () => [zone?.state?.selectedZoneId, zone?.state?.viewAllZones],
   () => {
-    if (moduleOptions?.hasToken) reloadCatalog()
+    if (moduleOptions?.hasToken) reloadCatalog('watch:zone')
   },
 )
 </script>

package/src/modules/app-store/components/AppHubDraftStoreApp.vue

@@ -62,11 +62,11 @@
 </template>
 
 <script setup>
-import { computed, getCurrentInstance, inject, onMounted, reactive, ref, watch } from 'vue'
+import { computed, inject, onMounted, reactive, ref, watch } from 'vue'
 import {
-  getHostApiForApp,
-  isBackendReadyForApp,
-  resolveRootApp,
+  isBackendReadyFromStore,
+  useAppHubHostApi,
+  useAppHubModuleStore,
 } from '../../../composables/useAppHubHostApi.js'
 import { useAppHubZoneContext } from '../../../composables/useAppHubZoneContext.js'
 import { t } from '../../../i18n/index.js'
@@ -83,7 +83,9 @@ const props = defineProps({
 
 const appStore = useAppStore()
 const catalog = appStore.catalogs.draft
-const rootApp = inject('apphubHostApp', null) ?? resolveRootApp(getCurrentInstance())
+const hubStore = useAppHubModuleStore()
+const hostApi = useAppHubHostApi()
+const rootApp = inject('apphubHostApp', null)
 const zone = useAppHubZoneContext()
 const moduleOptions = inject('apphubOptions', {})
 const lang = computed(() => resolveLang(moduleOptions?.language, 'vi'))
@@ -119,19 +121,17 @@ const labels = computed(() => ({
 
 function hostApiOptions() {
   return {
-    backendReady: isBackendReadyForApp(rootApp),
+    backendReady: isBackendReadyFromStore(hubStore),
     mode: CATALOG_MODE_DRAFT,
   }
 }
 
 async function reloadCatalog() {
-  if (!rootApp) return
-  await appStore.loadCatalog(getHostApiForApp(rootApp), hostApiOptions())
+  await appStore.loadCatalog(hostApi, hostApiOptions())
 }
 
 async function loadMore() {
-  if (!rootApp) return
-  await appStore.loadMoreCatalog(getHostApiForApp(rootApp), CATALOG_MODE_DRAFT, hostApiOptions())
+  await appStore.loadMoreCatalog(hostApi, CATALOG_MODE_DRAFT, hostApiOptions())
 }
 
 const { rootRef: scrollRoot, sentinelRef: scrollSentinel } = useCatalogInfiniteScroll({
@@ -150,7 +150,7 @@ async function onUninstall(app) {
 }
 
 async function onPing(app) {
-  const api = getHostApiForApp(rootApp)
+  const api = hostApi
   if (!api?.ping || !app?.slug) return
   pingingSlug.value = app.slug
   delete pingResults[app.slug]

package/src/modules/app-store/composables/useAppStore.js

@@ -1,6 +1,7 @@
 import { computed, inject, reactive } from 'vue'
 import { CATALOG_MODE_DRAFT, CATALOG_MODE_STORE } from '../constants/catalogModes.js'
 import { normalizeCatalogList } from '../utils/normalizeCatalogApp.js'
+import { apphubDebug, describeHostApi } from '../../../utils/apphubDebug.js'
 
 const APP_STORE_KEY = 'apphubAppStore'
 
@@ -28,6 +29,12 @@ function filterItems(items, search) {
   )
 }
 
+function hostApiReady(hostApi) {
+  if (!hostApi?.apps) return false
+  if (typeof hostApi.hasImpl === 'function') return hostApi.hasImpl()
+  return true
+}
+
 /**
  * Independent App Store module — separate catalog buckets per mode (store / draft).
  */
@@ -102,7 +109,20 @@ export function createAppStoreState(options = {}) {
     const append = options.append === true
     const backendReady = options.backendReady !== false
 
-    if (!backendReady || !hostApi?.apps) {
+    apphubDebug('catalog', 'loadCatalog called', {
+      mode,
+      append,
+      backendReady,
+      ...describeHostApi(hostApi),
+    })
+
+    if (!backendReady || !hostApiReady(hostApi)) {
+      apphubDebug('catalog', 'loadCatalog → no_api (not ready)', {
+        mode,
+        append,
+        backendReady,
+        ...describeHostApi(hostApi),
+      })
       if (!append) {
         bucket.items = []
         bucket.error = 'no_api'
@@ -131,8 +151,16 @@ export function createAppStoreState(options = {}) {
       }
 
       const res = await hostApi.apps(params)
+      apphubDebug('catalog', 'loadCatalog apps() response', {
+        mode,
+        append,
+        ...describeHostApi(hostApi),
+        resUndefined: res === undefined,
+        resNull: res === null,
+      })
       if (res === undefined || res === null) {
         if (!append) {
+          apphubDebug('catalog', 'loadCatalog → no_api (undefined response)', { mode })
           bucket.items = []
           bucket.error = 'no_api'
           bucket.loaded = false

package/src/utils/apphubDebug.js

@@ -0,0 +1,47 @@
+/** Temporary diagnostics — filter console with `[apphub:debug]`. Disable: localStorage.setItem('apphub:debug','0') */
+export function isAppHubDebugEnabled() {
+  try {
+    if (typeof localStorage !== 'undefined' && localStorage.getItem('apphub:debug') === '0') {
+      return false
+    }
+    if (typeof window !== 'undefined' && window.__APPHUB_DEBUG__ === false) {
+      return false
+    }
+  } catch {
+    /* ignore */
+  }
+  return true
+}
+
+export function apphubDebug(scope, message, data) {
+  if (!isAppHubDebugEnabled()) return
+  const payload = data !== undefined ? { ts: Date.now(), ...data } : { ts: Date.now() }
+  console.info(`[apphub:debug] ${scope}: ${message}`, payload)
+}
+
+export function describeHostApi(hostApi) {
+  if (!hostApi) return { hostApi: null }
+  return {
+    hasImpl: typeof hostApi.hasImpl === 'function' ? hostApi.hasImpl() : null,
+    hasAppsFn: typeof hostApi.apps === 'function',
+  }
+}
+
+export function describeStore(store) {
+  if (!store) return { store: null }
+  return {
+    hasImpl: store.facade?.hasImpl?.() ?? null,
+    originBootstrapLoading: store.options?.originBootstrapLoading ?? null,
+    originBlocked: store.options?.originBlocked ?? null,
+    originBlockReason: store.options?.originBlockReason ?? null,
+    hasToken: store.options?.hasToken ?? null,
+    backendUrl: store.credentials?.backendUrl ? '(set)' : '(empty)',
+    token: store.credentials?.token ? `(len ${store.credentials.token.length})` : '(empty)',
+    serverOriginsResolved: store.options?.serverOriginsResolved ?? null,
+  }
+}
+
+export function describeApp(app) {
+  if (!app) return { app: null }
+  return { appUid: app._uid ?? null }
+}