astro-tractstack 2.0.0-rc.64 → 2.0.0-rc.65

package/templates/src/layouts/Layout.astro

@@ -45,41 +45,28 @@ const {
   impressions = [],
 } = Astro.props;
 
-// Get site status from the store
 const isInitialized = !freshInstallStore.get().needsSetup;
-
-// ensure we have brand config!
 const goBackend = import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
 const tenantId =
   Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
 const brandConfig = propBrandConfig || (await getBrandConfig(tenantId));
-
-// Conditionally set asset paths based on initialization status
 const cssBasePath = isInitialized ? '/media/css' : '/styles';
 const fontBasePath = isInitialized ? '/media/fonts' : '/fonts';
 const mainStylesUrl = (() => {
-  const baseUrl = isStoryKeep // || isDev
+  const baseUrl = isStoryKeep
     ? `${cssBasePath}/storykeep.css`
     : `${cssBasePath}/frontend.css`;
-
-  // Only add version for frontend.css (the dynamic one)
   if (!isStoryKeep && brandConfig?.STYLES_VER) {
     return `${baseUrl}?v=${brandConfig.STYLES_VER}`;
   }
-
   return baseUrl;
 })();
 
-// Social media and SEO setup
 const defaultFavIcon = brandConfig.FAVICON || `/brand/favicon.ico`;
 const defaultSocialImageURL = ogImage || brandConfig.OG || `/brand/og.png`;
 const defaultSocialLogoURL = brandConfig.OGLOGO || `/brand/oglogo.png`;
 const defaultSocialTitle =
-  typeof title === `string` && title
-    ? title
-    : typeof brandConfig.OGTITLE === `string`
-      ? brandConfig.OGTITLE
-      : `TractStack dynamic website`;
+  title || brandConfig.OGTITLE || `TractStack dynamic website`;
 const defaultSocialAuthor = brandConfig.OGAUTHOR || `TractStack`;
 const defaultSocialDesc =
   description ||
@@ -93,7 +80,7 @@ const socialLogoFullURL = brandConfig?.SITE_URL
   : `${defaultSocialLogoURL}`;
 const gtagId = brandConfig?.GTAG || false;
 const gtagUrl =
-  typeof gtagId === `string` && gtagId.length > 1
+  gtagId && typeof gtagId === `string` && gtagId.length > 1
     ? `https://www.googletagmanager.com/gtag/js?id=${gtagId}`
     : null;
 const fullCanonicalUrl = brandConfig?.SITE_URL
@@ -207,7 +194,7 @@ const enableBunny = import.meta.env.PUBLIC_ENABLE_BUNNY === 'true';
       )
     }
 
-    <script src="/client/htmx.min.js" is:inline is:persist></script>
+    <script src="/client/htmx.min.js" is:inline></script>
 
     <script
       define:vars={{
@@ -219,43 +206,32 @@ const enableBunny = import.meta.env.PUBLIC_ENABLE_BUNNY === 'true';
       }}
       is:inline
     >
-      function createTractstackConfig() {
-        window.TRACTSTACK_CONFIG = {
-          configured: true,
-          backendUrl: goBackend,
-          tenantId: tenantId,
-          fontBasePath: fontBasePath,
-          storyfragmentId: storyfragmentId,
-          sessionId: sessionId,
-        };
-      }
+      // Capture the initial, server-rendered values from define:vars into top-level constants.
+      // This makes the scope explicit and resolves the linter error.
+      const initialStoryfragmentId = storyfragmentId;
+      const initialSessionId = sessionId;
 
       function updateTractstackConfig() {
-        // Get current values from meta tags
         const storyfragmentMeta = document.querySelector(
           'meta[name="storyfragment-id"]'
         );
         const sessionMeta = document.querySelector('meta[name="session-id"]');
 
-        const currentStoryfragmentId = storyfragmentMeta
-          ? storyfragmentMeta.content
-          : null;
-        const currentSessionId = sessionMeta ? sessionMeta.content : sessionId;
-        if (window.TRACTSTACK_CONFIG && currentStoryfragmentId) {
-          window.TRACTSTACK_CONFIG.storyfragmentId = currentStoryfragmentId;
-          window.TRACTSTACK_CONFIG.sessionId = currentSessionId;
-        } else {
-          createTractstackConfig();
-        }
-      }
-
-      // Check if config exists.
-      // If not, create it. This handles the very first load.
-      if (!window.TRACTSTACK_CONFIG) {
-        createTractstackConfig();
+        window.TRACTSTACK_CONFIG = {
+          configured: true,
+          backendUrl: goBackend,
+          tenantId: tenantId,
+          fontBasePath: fontBasePath,
+          // Use the meta tag if it exists (for subsequent client-side loads),
+          // otherwise fall back to the initial server-rendered value.
+          storyfragmentId: storyfragmentMeta
+            ? storyfragmentMeta.content
+            : initialStoryfragmentId,
+          sessionId: sessionMeta ? sessionMeta.content : initialSessionId,
+        };
       }
 
-      // Update on subsequent loads, or set for the first time if script runs after initial setup
+      updateTractstackConfig();
       document.addEventListener('astro:page-load', updateTractstackConfig);
     </script>
   </head>
@@ -307,14 +283,11 @@ const enableBunny = import.meta.env.PUBLIC_ENABLE_BUNNY === 'true';
       }
     </div>
 
-    <script type="module" is:inline is:persist is:raw>
-      import '/client/sse.js';
-      import '/client/belief-events.js';
-      import '/client/analytics-events.js';
-    </script>
+    <script type="module" src="/client/app.js" is:inline is:persist></script>
+
+    <script type="module" src="/client/view.js" is:inline></script>
 
     <script is:inline is:persist>
-      // Navigation loading animation with blur backdrop
       let navProgressInterval = null;
       let navSafetyTimeout = null;
 
@@ -329,24 +302,19 @@ const enableBunny = import.meta.env.PUBLIC_ENABLE_BUNNY === 'true';
           loadingIndicator &&
           loadingBackdrop
         ) {
-          // Clear any existing safety timeout
           if (navSafetyTimeout !== null) {
             clearTimeout(navSafetyTimeout);
             navSafetyTimeout = null;
           }
 
-          // Show and animate backdrop
           loadingBackdrop.style.display = 'block';
-          // Force reflow to ensure display:block is applied before opacity transition
           void loadingBackdrop.offsetHeight;
           loadingBackdrop.style.opacity = '1';
 
-          // Fade out content slightly
           if (content) {
             content.style.opacity = '0.7';
           }
 
-          // Animate progress bar
           loadingIndicator.style.transform = 'scaleX(0)';
           loadingIndicator.style.display = 'block';
 
@@ -362,7 +330,6 @@ const enableBunny = import.meta.env.PUBLIC_ENABLE_BUNNY === 'true';
             loadingIndicator.style.transform = `scaleX(${progress / 100})`;
           }, 20);
 
-          // AUTOMATIC SHUTOFF: Always stop after 10 seconds
           navSafetyTimeout = setTimeout(() => {
             stopNavLoadingAnimation();
           }, 10000);
@@ -374,7 +341,6 @@ const enableBunny = import.meta.env.PUBLIC_ENABLE_BUNNY === 'true';
         const loadingBackdrop = document.getElementById('loading-backdrop');
         const content = document.getElementById('content');
 
-        // Clear safety timeout
         if (navSafetyTimeout !== null) {
           clearTimeout(navSafetyTimeout);
           navSafetyTimeout = null;
@@ -386,21 +352,17 @@ const enableBunny = import.meta.env.PUBLIC_ENABLE_BUNNY === 'true';
           loadingIndicator &&
           loadingBackdrop
         ) {
-          // Clear interval
           if (navProgressInterval !== null) {
             clearInterval(navProgressInterval);
             navProgressInterval = null;
           }
 
-          // Complete progress bar
           loadingIndicator.style.transform = 'scaleX(1)';
 
-          // Restore content opacity
           if (content) {
             content.style.opacity = '1';
           }
 
-          // Hide backdrop
           loadingBackdrop.style.opacity = '0';
 
           setTimeout(() => {
@@ -411,7 +373,6 @@ const enableBunny = import.meta.env.PUBLIC_ENABLE_BUNNY === 'true';
         }
       }
 
-      // Set up navigation loading
       function setupNavigationLoading() {
         document.addEventListener('astro:before-preparation', () => {
           startNavLoadingAnimation();
@@ -426,14 +387,12 @@ const enableBunny = import.meta.env.PUBLIC_ENABLE_BUNNY === 'true';
         });
       }
 
-      // Initialize
       if (document.readyState === 'loading') {
         document.addEventListener('DOMContentLoaded', setupNavigationLoading);
       } else {
         setupNavigationLoading();
       }
 
-      // Re-setup after navigation
       document.addEventListener('astro:page-load', setupNavigationLoading);
     </script>
   </body>

package/templates/src/pages/[...slug].astro

@@ -148,7 +148,7 @@ paneIds.forEach((paneId: string) => {
               }
               hx-get={`/api/v1/fragments/panes/${paneId}`}
               hx-trigger="refresh"
-              hx-swap="innerHTML"
+              hx-swap="innerHTML scroll:none"
             >
               {codeHookTargets[paneId] ? (
                 <div class="relative overflow-hidden">

package/templates/src/pages/context/[...contextSlug].astro

@@ -120,7 +120,7 @@ if (!brandConfig.SITE_INIT) {
       class="context-pane-container"
       hx-get={`/api/v1/fragments/panes/${paneId}`}
       hx-trigger="refresh"
-      hx-swap="innerHTML"
+      hx-swap="innerHTML scroll:none"
     >
       {
         codeHookTarget ? (

package/utils/inject-files.ts

@@ -1317,16 +1317,12 @@ export async function injectTemplateFiles(
       dest: 'public/client/htmx.min.js',
     },
     {
-      src: resolve('../templates/src/client/sse.js'),
-      dest: 'public/client/sse.js',
+      src: resolve('../templates/src/client/view.js'),
+      dest: 'public/client/view.js',
     },
     {
-      src: resolve('../templates/src/client/belief-events.js'),
-      dest: 'public/client/belief-events.js',
-    },
-    {
-      src: resolve('../templates/src/client/analytics-events.js'),
-      dest: 'public/client/analytics-events.js',
+      src: resolve('../templates/src/client/app.js'),
+      dest: 'public/client/app.js',
     },
 
     // StoryKeep Editor (add new section)

package/templates/src/client/analytics-events.js

@@ -1,207 +0,0 @@
-const THRESHOLD_GLOSSED = 7000; // 7 seconds in ms
-const THRESHOLD_READ = 42000; // 42 seconds in ms
-const VERBOSE = false;
-
-const paneViewTimes = new Map();
-let hasTrackedEntered =
-  localStorage.getItem('tractstack_entered_tracked') === 'true';
-let currentStoryfragmentId = null;
-let isPageInitialized = false;
-let globalObserver = null;
-
-function waitForSessionReady() {
-  return new Promise((resolve) => {
-    if (window.TRACTSTACK_CONFIG?.session?.isReady) {
-      resolve();
-    } else {
-      window.addEventListener('tractstack:session-ready', () => resolve(), {
-        once: true,
-      });
-    }
-  });
-}
-
-export async function initAnalyticsTracking(storyfragmentId) {
-  if (isPageInitialized) return;
-  isPageInitialized = true;
-
-  if (VERBOSE)
-    console.log('📊 ANALYTICS: Initializing tracking for page view.');
-  currentStoryfragmentId = storyfragmentId || null;
-  initPaneVisibilityTracking();
-  await waitForSessionReady();
-  trackEnteredEvent();
-  trackPageViewedEvent();
-}
-
-function trackEnteredEvent() {
-  if (!hasTrackedEntered && currentStoryfragmentId) {
-    sendAnalyticsEvent({
-      contentId: currentStoryfragmentId,
-      contentType: 'StoryFragment',
-      eventVerb: 'ENTERED',
-    });
-    hasTrackedEntered = true;
-    localStorage.setItem('tractstack_entered_tracked', 'true');
-  }
-}
-
-function trackPageViewedEvent() {
-  if (currentStoryfragmentId) {
-    // This event is now PURELY for analytics. It no longer triggers
-    // a synchronization workaround on the backend.
-    sendAnalyticsEvent({
-      contentId: currentStoryfragmentId,
-      contentType: 'StoryFragment',
-      eventVerb: 'PAGEVIEWED',
-    });
-  }
-}
-
-function initPaneVisibilityTracking() {
-  if (globalObserver) {
-    globalObserver.disconnect();
-  }
-  globalObserver = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        const paneId = getPaneIdFromElement(entry.target);
-        if (!paneId) return;
-        if (entry.isIntersecting) {
-          if (!paneViewTimes.has(paneId)) {
-            paneViewTimes.set(paneId, Date.now());
-          }
-        } else {
-          const startTime = paneViewTimes.get(paneId);
-          if (startTime) {
-            const duration = Date.now() - startTime;
-            paneViewTimes.delete(paneId);
-            let eventVerb = null;
-            if (duration >= THRESHOLD_READ) eventVerb = 'READ';
-            else if (duration >= THRESHOLD_GLOSSED) eventVerb = 'GLOSSED';
-            if (eventVerb) {
-              sendAnalyticsEvent({
-                contentId: paneId,
-                contentType: 'Pane',
-                eventVerb,
-                duration,
-              });
-            }
-          }
-        }
-      });
-    },
-    { threshold: 0.1, rootMargin: '0px' }
-  );
-  observeAllPanes();
-}
-
-function observeAllPanes() {
-  if (!globalObserver) return;
-  const panes = document.querySelectorAll('[data-pane-id]');
-  panes.forEach((pane) => globalObserver.observe(pane));
-}
-
-function setupLifecycleListeners() {
-  if (window.ANALYTICS_INITIALIZED) return;
-  window.ANALYTICS_INITIALIZED = true;
-
-  if (VERBOSE)
-    console.log(
-      '📊 ANALYTICS: Setting up lifecycle listeners for the first time.'
-    );
-
-  window.addEventListener('beforeunload', () => {
-    flushPendingPaneEvents();
-  });
-
-  document.addEventListener('astro:page-load', () => {
-    isPageInitialized = false;
-    flushPendingPaneEvents();
-    if (window.TRACTSTACK_CONFIG?.storyfragmentId) {
-      initAnalyticsTracking(window.TRACTSTACK_CONFIG.storyfragmentId);
-    }
-  });
-
-  if (document.readyState === 'complete') {
-    if (window.TRACTSTACK_CONFIG?.storyfragmentId) {
-      initAnalyticsTracking(window.TRACTSTACK_CONFIG.storyfragmentId);
-    }
-  } else {
-    document.addEventListener(
-      'DOMContentLoaded',
-      () => {
-        if (window.TRACTSTACK_CONFIG?.storyfragmentId) {
-          initAnalyticsTracking(window.TRACTSTACK_CONFIG.storyfragmentId);
-        }
-      },
-      { once: true }
-    );
-  }
-}
-
-function flushPendingPaneEvents() {
-  if (paneViewTimes.size === 0) return;
-  const flushTime = Date.now();
-  paneViewTimes.forEach((startTime, paneId) => {
-    const duration = flushTime - startTime;
-    let eventVerb = null;
-    if (duration >= THRESHOLD_READ) eventVerb = 'READ';
-    else if (duration >= THRESHOLD_GLOSSED) eventVerb = 'GLOSSED';
-    if (eventVerb) {
-      sendAnalyticsEvent({
-        contentId: paneId,
-        contentType: 'Pane',
-        eventVerb,
-        duration,
-      });
-    }
-  });
-  paneViewTimes.clear();
-}
-
-async function sendAnalyticsEvent(event) {
-  try {
-    const config = window.TRACTSTACK_CONFIG;
-    if (!config || !config.sessionId) return; // Use server-provided session ID
-
-    const sessionId = config.sessionId;
-    const formData = {
-      beliefId: event.contentId,
-      beliefType: event.contentType,
-      beliefValue: event.eventVerb,
-      paneId: '',
-    };
-
-    if (event.duration !== undefined) {
-      formData.duration = event.duration.toString();
-    }
-
-    await fetch(`${config.backendUrl}/api/v1/state`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        'X-Tenant-ID': config.tenantId,
-        'X-TractStack-Session-ID': sessionId,
-        'X-StoryFragment-ID': config.storyfragmentId,
-      },
-      body: new URLSearchParams(formData),
-    });
-  } catch (error) {
-    console.error('❌ API ERROR: Analytics event failed', error, event);
-  }
-}
-
-function getPaneIdFromElement(element) {
-  return element.getAttribute('data-pane-id');
-}
-
-window.initAnalyticsTracking = initAnalyticsTracking;
-
-setupLifecycleListeners();
-
-if (VERBOSE) {
-  console.log(
-    '📊 ANALYTICS: Analytics events module loaded and is persistent.'
-  );
-}

package/templates/src/client/belief-events.js

@@ -1,210 +0,0 @@
-const VERBOSE = false;
-
-function configureHtmx() {
-  if (!window.htmx || window.HTMX_LISTENER_ATTACHED) {
-    return;
-  }
-  window.HTMX_LISTENER_ATTACHED = true;
-
-  if (!window.HTMX_CONFIGURED) {
-    window.htmx.config.selfRequestsOnly = false;
-    window.HTMX_CONFIGURED = true;
-  }
-
-  window.htmx.on(document.body, 'htmx:configRequest', function (evt) {
-    const config = window.TRACTSTACK_CONFIG;
-    if (!config || !config.sessionId) return;
-
-    if (evt.detail.path && evt.detail.path.startsWith('/api/v1/')) {
-      evt.detail.path = config.backendUrl + evt.detail.path;
-    }
-
-    const sessionId = config.sessionId;
-    evt.detail.headers['X-Tenant-ID'] = config.tenantId;
-    evt.detail.headers['X-StoryFragment-ID'] = config.storyfragmentId;
-    if (sessionId) {
-      evt.detail.headers['X-TractStack-Session-ID'] = sessionId;
-    }
-  });
-
-  window.htmx.on(document.body, 'htmx:beforeRequest', async function (evt) {
-    const params = evt.detail.requestConfig.parameters;
-    if (params && params.beliefVerb === 'IDENTIFY_AS') {
-      evt.preventDefault();
-
-      const originalPayload = params;
-      const unsetPayload = {
-        unsetBeliefIds: originalPayload.beliefId,
-        paneId: originalPayload.paneId || '',
-      };
-
-      try {
-        await sendBeliefUpdate(unsetPayload);
-        await sendBeliefUpdate(originalPayload);
-      } catch (error) {
-        if (VERBOSE)
-          console.error('🔴 BELIEF: Two-step identifyAs update failed', error);
-      }
-    }
-  });
-}
-
-const pageBeliefs = {};
-let activeStoryfragmentId = null;
-
-function waitForSessionReady() {
-  return new Promise((resolve) => {
-    if (window.TRACTSTACK_CONFIG?.session?.isReady) {
-      resolve();
-    } else {
-      window.addEventListener('tractstack:session-ready', () => resolve(), {
-        once: true,
-      });
-    }
-  });
-}
-
-function initializeBeliefs() {
-  if (window.BELIEF_INITIALIZED) {
-    return;
-  }
-  window.BELIEF_INITIALIZED = true;
-
-  if (VERBOSE)
-    console.log(
-      '🔧 BELIEF: First-time initialization of belief handlers and HTMX config.'
-    );
-
-  configureHtmx();
-
-  document.addEventListener('change', function (event) {
-    const target = event.target;
-    if (
-      target.matches &&
-      (target.matches('select[data-belief-id]') ||
-        target.matches('input[type="checkbox"][data-belief-id]'))
-    ) {
-      handleBeliefChange(target);
-    }
-  });
-}
-
-async function handleBeliefChange(element) {
-  const beliefId = element.getAttribute('data-belief-id');
-  const beliefType = element.getAttribute('data-belief-type');
-  const paneId = element.getAttribute('data-pane-id');
-
-  if (!beliefId || !beliefType) {
-    if (VERBOSE)
-      console.error('🔴 BELIEF: Missing required attributes on', element.id);
-    return;
-  }
-
-  let beliefValue;
-  if (element.type === 'checkbox') {
-    beliefValue = element.checked ? 'BELIEVES_YES' : 'BELIEVES_NO';
-  } else {
-    beliefValue = element.value;
-  }
-
-  if (VERBOSE)
-    console.log('🔄 BELIEF: Widget changed', {
-      beliefId,
-      beliefType,
-      beliefValue,
-      paneId,
-    });
-
-  trackBeliefState(beliefId, beliefValue);
-
-  await sendBeliefUpdate({
-    beliefId,
-    beliefType,
-    beliefValue,
-    paneId: paneId || '',
-  });
-}
-
-async function sendBeliefUpdate(data) {
-  await waitForSessionReady();
-
-  try {
-    const config = window.TRACTSTACK_CONFIG;
-    if (!config || !config.sessionId) return;
-
-    if (VERBOSE)
-      console.log('🚨 FRONTEND DEBUG: Sending belief update with headers:', {
-        'X-StoryFragment-ID': config.storyfragmentId,
-        beliefData: data,
-        currentSSEContext: 'check sse.ts logs',
-      });
-
-    const sessionId = config.sessionId;
-    const headers = {
-      'Content-Type': 'application/x-www-form-urlencoded',
-      'X-Tenant-ID': config.tenantId,
-      'X-StoryFragment-ID': config.storyfragmentId,
-      'X-TractStack-Session-ID': sessionId,
-    };
-
-    if (VERBOSE)
-      console.log('📡 BELIEF: Session ready, sending update.', { data });
-
-    const response = await fetch(`${config.backendUrl}/api/v1/state`, {
-      method: 'POST',
-      headers: headers,
-      body: new URLSearchParams(data),
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-  } catch (error) {
-    const errorMessage =
-      error instanceof Error ? error.message : 'Unknown error';
-    if (VERBOSE)
-      console.error('🔴 BELIEF: Update failed', {
-        error: errorMessage,
-        beliefId: data.beliefId,
-      });
-  }
-}
-
-function trackBeliefState(beliefId, beliefValue) {
-  if (!activeStoryfragmentId) return;
-
-  if (!pageBeliefs[activeStoryfragmentId]) {
-    pageBeliefs[activeStoryfragmentId] = {};
-  }
-  pageBeliefs[activeStoryfragmentId][beliefId] = beliefValue;
-  if (VERBOSE)
-    console.log(`📝 BELIEF: Tracked state for page ${activeStoryfragmentId}`, {
-      ...pageBeliefs[activeStoryfragmentId],
-    });
-}
-
-function setActiveStoryFragment() {
-  if (window.TRACTSTACK_CONFIG?.storyfragmentId) {
-    activeStoryfragmentId = window.TRACTSTACK_CONFIG.storyfragmentId;
-    if (VERBOSE)
-      console.log(
-        `📖 BELIEF: Active story fragment set to ${activeStoryfragmentId}`
-      );
-
-    if (!pageBeliefs[activeStoryfragmentId]) {
-      pageBeliefs[activeStoryfragmentId] = {};
-    }
-  }
-}
-
-initializeBeliefs();
-
-document.addEventListener('astro:page-load', () => {
-  configureHtmx();
-  setActiveStoryFragment();
-});
-
-document.addEventListener('DOMContentLoaded', setActiveStoryFragment);
-
-if (VERBOSE)
-  console.log('🔧 BELIEF: Belief events module loaded and is persistent.');