astro-tractstack 2.0.41 → 2.0.43

package/templates/src/components/edit/storyfragment/StoryFragmentPanel_menu.tsx

@@ -39,20 +39,20 @@ const StoryFragmentMenuPanel = ({
   const [selectedMenu, setSelectedMenu] = useState<MenuNode | null>(null);
   const [showMenuEditor, setShowMenuEditor] = useState(false);
   const [contentMap, setContentMap] = useState<FullContentMapItem[]>([]);
+  const tenantId =
+    window.TRACTSTACK_CONFIG?.tenantId ||
+    import.meta.env.PUBLIC_TENANTID ||
+    'default';
 
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const api = new TractStackAPI();
+        const api = new TractStackAPI(tenantId);
 
         // Get current content map first if we haven't already
         if (!contentMap) {
           const currentContentMap = await api.getContentMapWithTimestamp();
           if (currentContentMap.success && currentContentMap.data) {
-            const tenantId =
-              window.TRACTSTACK_CONFIG?.tenantId ||
-              import.meta.env.PUBLIC_TENANTID ||
-              'default';
             fullContentMapStore.set(tenantId, currentContentMap.data);
             setContentMap(currentContentMap.data.data);
           }
@@ -240,8 +240,6 @@ const StoryFragmentMenuPanel = ({
                           setShowMenuEditor(false);
                           if (saved) {
                             try {
-                              const tenantId =
-                                import.meta.env.PUBLIC_TENANTID || 'default';
                               const refreshedContentMap =
                                 await getFullContentMap(tenantId);
                               setContentMap(refreshedContentMap);

package/templates/src/components/edit/widgets/BeliefWidget.tsx

@@ -14,6 +14,10 @@ export default function BeliefWidget({ node, onUpdate }: BeliefWidgetProps) {
   const [currentScaleType, setCurrentScaleType] = useState<string>('');
   const [currentPrompt, setCurrentPrompt] = useState<string>('');
   const [isInitialized, setIsInitialized] = useState(false);
+  const tenantId =
+    window.TRACTSTACK_CONFIG?.tenantId ||
+    import.meta.env.PUBLIC_TENANTID ||
+    'default';
 
   // Get parameter metadata from the widgetMeta constant
   const widgetInfo = widgetMeta.belief;
@@ -43,7 +47,6 @@ export default function BeliefWidget({ node, onUpdate }: BeliefWidgetProps) {
       try {
         const goBackend =
           import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
-        const tenantId = import.meta.env.PUBLIC_TENANTID || 'default';
 
         // Step 1: Get all belief IDs
         const idsResponse = await fetch(`${goBackend}/api/v1/nodes/beliefs`, {

package/templates/src/components/edit/widgets/IdentifyAsWidget.tsx

@@ -16,6 +16,10 @@ export default function IdentifyAsWidget({
   const [selectedBeliefTag, setSelectedBeliefTag] = useState<string>('');
   const [targetValues, setTargetValues] = useState<string[]>([]);
   const [currentPrompt, setCurrentPrompt] = useState<string>('');
+  const tenantId =
+    window.TRACTSTACK_CONFIG?.tenantId ||
+    import.meta.env.PUBLIC_TENANTID ||
+    'default';
 
   // Sync state with node.codeHookParams
   useEffect(() => {
@@ -54,7 +58,7 @@ export default function IdentifyAsWidget({
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const api = new TractStackAPI();
+        const api = new TractStackAPI(tenantId);
 
         // Step 1: Get all belief IDs
         const idsResponse = await api.get('/api/v1/nodes/beliefs');

package/templates/src/components/edit/widgets/InteractiveDisclosureWidget.tsx

@@ -253,6 +253,10 @@ export default function InteractiveDisclosureWidget({
   node,
   onUpdate,
 }: InteractiveDisclosureWidgetProps) {
+  const tenantId =
+    window.TRACTSTACK_CONFIG?.tenantId ||
+    import.meta.env.PUBLIC_TENANTID ||
+    'default';
   const [mode, setMode] = useState<'belief' | 'open'>('belief');
   const [beliefs, setBeliefs] = useState<BeliefNode[]>([]);
   const [selectedBeliefTag, setSelectedBeliefTag] = useState<string>('');
@@ -367,7 +371,7 @@ export default function InteractiveDisclosureWidget({
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const api = new TractStackAPI();
+        const api = new TractStackAPI(tenantId);
         const {
           data: { beliefIds },
         } = await api.get('/api/v1/nodes/beliefs');

package/templates/src/components/edit/widgets/ToggleWidget.tsx

@@ -14,6 +14,10 @@ export default function ToggleWidget({ node, onUpdate }: ToggleWidgetProps) {
   const [currentPrompt, setCurrentPrompt] = useState<string>('');
   const [currentScale, setCurrentScale] = useState<string>('');
   const [isInitialized, setIsInitialized] = useState(false);
+  const tenantId =
+    window.TRACTSTACK_CONFIG?.tenantId ||
+    import.meta.env.PUBLIC_TENANTID ||
+    'default';
 
   const widgetInfo = widgetMeta.toggle;
 
@@ -38,7 +42,6 @@ export default function ToggleWidget({ node, onUpdate }: ToggleWidgetProps) {
       try {
         const goBackend =
           import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
-        const tenantId = import.meta.env.PUBLIC_TENANTID || 'default';
 
         const idsResponse = await fetch(`${goBackend}/api/v1/nodes/beliefs`, {
           headers: {

package/templates/src/components/fields/BackgroundImage.tsx

@@ -42,13 +42,16 @@ const BackgroundImage = ({ paneId, onUpdate }: BackgroundImageProps) => {
     desktop: false,
   });
   const [localAltDescription, setLocalAltDescription] = useState<string>('');
+  const tenantId =
+    window.TRACTSTACK_CONFIG?.tenantId ||
+    import.meta.env.PUBLIC_TENANTID ||
+    'default';
 
   useEffect(() => {
     const loadFiles = async () => {
       try {
         const goBackend =
           import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
-        const tenantId = import.meta.env.PUBLIC_TENANTID || 'default';
 
         // First, get all file IDs
         const idsResponse = await fetch(`${goBackend}/api/v1/nodes/files`, {

package/templates/src/components/fields/ImageUpload.tsx

@@ -48,6 +48,10 @@ export const ImageUpload = ({
   const fileInputRef = useRef<HTMLInputElement>(null);
   const comboboxRef = useRef<HTMLDivElement>(null);
   const { openAbove, maxHeight } = useDropdownDirection(comboboxRef);
+  const tenantId =
+    window.TRACTSTACK_CONFIG?.tenantId ||
+    import.meta.env.PUBLIC_TENANTID ||
+    'default';
 
   // Find the current image node
   const currentImageNode = nodeId
@@ -61,7 +65,6 @@ export const ImageUpload = ({
       try {
         const goBackend =
           import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
-        const tenantId = import.meta.env.PUBLIC_TENANTID || 'default';
 
         // First, get all file IDs
         const idsResponse = await fetch(`${goBackend}/api/v1/nodes/files`, {

package/templates/src/components/form/ActionBuilderField.tsx

@@ -46,11 +46,15 @@ export default function ActionBuilderField({
   const [command, setCommand] = useState<ActionCommand>('goto');
   const [params, setParams] = useState('');
   const [beliefs, setBeliefs] = useState<BeliefNode[]>([]);
+  const tenantId =
+    window.TRACTSTACK_CONFIG?.tenantId ||
+    import.meta.env.PUBLIC_TENANTID ||
+    'default';
 
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const api = new TractStackAPI();
+        const api = new TractStackAPI(tenantId);
         const {
           data: { beliefIds },
         } = await api.get('/api/v1/nodes/beliefs');

package/templates/src/components/storykeep/Dashboard_Analytics.tsx

@@ -178,14 +178,16 @@ export default function StoryKeepDashboard_Analytics({
       setIsDownloading(true);
 
       const config = window.TRACTSTACK_CONFIG;
+      const backendUrl =
+        import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
       const response = await fetch(
-        `${config?.backendUrl || ''}/api/v1/admin/leads/download`,
+        `${backendUrl}/api/v1/admin/leads/download`,
         {
           method: 'GET',
           headers: {
             'X-Tenant-ID': config?.tenantId || 'default',
           },
-          credentials: 'include', // Include cookies for auth
+          credentials: 'include',
         }
       );
 

package/templates/src/components/storykeep/state/BrandingWrapper.tsx

@@ -1,7 +1,9 @@
 import { useState } from 'react';
 import StoryKeepDashboard from '../Dashboard';
 import StoryKeepDashboard_Branding from '../Dashboard_Branding';
+import HydrateWizard from '../widgets/HydrateWizard';
 import type { FullContentMapItem, BrandConfig } from '@/types/tractstack';
+import type { LoadData } from '@/types/compositorTypes';
 
 interface BrandingPageWrapperProps {
   fullContentMap: FullContentMapItem[];
@@ -9,6 +11,7 @@ interface BrandingPageWrapperProps {
   role: string | null;
   initializing: boolean;
   initialBrandConfig: BrandConfig;
+  initialSuitcase?: LoadData | null;
 }
 
 export default function BrandingPageWrapper({
@@ -17,11 +20,20 @@ export default function BrandingPageWrapper({
   role,
   initializing,
   initialBrandConfig,
+  initialSuitcase,
 }: BrandingPageWrapperProps) {
-  // Manage shared brandConfig state at this level
   const [brandConfig, setBrandConfig] =
     useState<BrandConfig>(initialBrandConfig);
 
+  if (initialBrandConfig.HAS_HYDRATION_TOKEN && initialSuitcase) {
+    return (
+      <HydrateWizard
+        initialSuitcase={initialSuitcase}
+        fullContentMap={fullContentMap}
+      />
+    );
+  }
+
   return (
     <>
       <StoryKeepDashboard

package/templates/src/components/storykeep/widgets/HydrateWizard.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState, useRef } from 'react';
+import { prepareHydrationContext } from '@/utils/api/setupHelpers';
+import SaveModal from '@/components/edit/state/SaveModal';
+import type { FullContentMapItem } from '@/types/tractstack';
+import type { LoadData } from '@/types/compositorTypes';
+
+interface Props {
+  initialSuitcase: LoadData;
+  fullContentMap: FullContentMapItem[];
+}
+
+export default function HydrateWizard({
+  initialSuitcase,
+  fullContentMap,
+}: Props) {
+  const [status, setStatus] = useState<'preparing' | 'ready' | 'error'>(
+    'preparing'
+  );
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const hasInitialized = useRef(false);
+
+  useEffect(() => {
+    if (hasInitialized.current) return;
+    hasInitialized.current = true;
+
+    const timer = setTimeout(() => {
+      try {
+        prepareHydrationContext(initialSuitcase, fullContentMap);
+        setStatus('ready');
+      } catch (err) {
+        console.error('Hydration preparation failed:', err);
+        setErrorMessage(err instanceof Error ? err.message : String(err));
+        setStatus('error');
+      }
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (status === 'error') {
+    return (
+      <div className="mx-auto max-w-2xl p-6 text-center">
+        <div className="rounded-lg bg-white p-12 shadow-lg">
+          <h2 className="text-xl font-bold text-red-600">Setup Failed</h2>
+          <p className="mt-2 text-gray-600">{errorMessage}</p>
+          <div className="mt-6">
+            <a
+              href="/storykeep"
+              className="rounded bg-gray-200 px-4 py-2 text-gray-800 hover:bg-gray-300"
+            >
+              Return to Dashboard
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (status === 'ready') {
+    return (
+      <SaveModal
+        show={true}
+        slug="hello"
+        isContext={false}
+        onClose={() => {}}
+        hydrate={true}
+      />
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-2xl p-6 text-center">
+      <div className="rounded-lg bg-white p-12 shadow-lg">
+        <div className="mb-4 flex h-16 justify-center">
+          <div className="h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-cyan-600"></div>
+        </div>
+        <h2 className="text-2xl font-bold text-gray-900">
+          Preparing installation...
+        </h2>
+        <p className="mt-2 text-gray-600">Unpacking suitcase content</p>
+      </div>
+    </div>
+  );
+}

package/templates/src/components/storykeep/widgets/{SetupWizard.tsx → InitWizard.tsx}

@@ -9,7 +9,7 @@ import {
   initializeSystem,
 } from '@/utils/api/setupHelpers';
 
-export default function SetupWizard() {
+export default function InitWizard() {
   const formState = useFormState({
     initialData: initialSetupState,
     validator: validateSetup,
@@ -17,8 +17,9 @@ export default function SetupWizard() {
     onSave: async (data) => {
       try {
         await initializeSystem(data);
-        // Hard redirect to break out of any potential state/cache issues
-        window.location.href = '/storykeep';
+        setTimeout(() => {
+          window.location.href = '/storykeep';
+        }, 1000);
         return data;
       } catch (error) {
         console.error('Installation failed:', error);

package/templates/src/components/widgets/Impression.tsx

@@ -47,8 +47,10 @@ const Impression = ({ payload, currentPage, config }: ImpressionProps) => {
           beliefValue: 'CLICKED',
           paneId: payload.parentId || '',
         };
+        const backendUrl =
+          import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
 
-        await fetch(`${tractStackConfig.backendUrl}/api/v1/state`, {
+        await fetch(`${backendUrl}/api/v1/state`, {
           method: 'POST',
           headers: {
             'Content-Type': 'application/x-www-form-urlencoded',

package/templates/src/hooks/useSearch.ts

@@ -31,20 +31,22 @@ export function useSearch(): UseSearchReturn {
   const [suggestions, setSuggestions] = useState<DiscoverySuggestion[]>([]);
   const [isDiscovering, setIsDiscovering] = useState(false);
   const [discoverError, setDiscoverError] = useState<string | null>(null);
+  const tenantId =
+    (typeof window !== 'undefined' && window.TRACTSTACK_CONFIG?.tenantId) ||
+    import.meta.env.PUBLIC_TENANTID ||
+    'default';
 
-  // Retrieve state
   const [searchResults, setSearchResults] = useState<CategorizedResults | null>(
     null
   );
   const [isRetrieving, setIsRetrieving] = useState(false);
   const [retrieveError, setRetrieveError] = useState<string | null>(null);
 
-  // --- REVISED STATE FOR SEARCH LOGIC ---
   const searchTimerRef = useRef<NodeJS.Timeout>();
   const lastExecutionTimeRef = useRef<number>(0);
   const pendingQueryRef = useRef<string | null>(null);
   const inflightQueryRef = useRef<string | null>(null);
-  const api = useMemo(() => new TractStackAPI(), []);
+  const api = useMemo(() => new TractStackAPI(tenantId), []);
 
   const performDiscovery = useCallback(
     async (query: string) => {

package/templates/src/layouts/Layout.astro

@@ -228,33 +228,11 @@ const enableBunny = import.meta.env.PUBLIC_ENABLE_BUNNY === 'true';
         );
         const sessionMeta = document.querySelector('meta[name="session-id"]');
 
-        // Dynamic Backend URL Fix:
-        // If we are on a subdomain (sandbox.domain.com), force the API call to match
-        // (sandbox.domain.com:10000) so cookies are sent correctly.
-        let dynamicBackendUrl = goBackend;
-        try {
-          const currentHost = window.location.hostname;
-          const backendUrlObj = new URL(goBackend);
-
-          // If the hostnames differ (e.g. sandbox.site.com vs site.com), align them
-          if (currentHost !== backendUrlObj.hostname) {
-            backendUrlObj.hostname = currentHost;
-            dynamicBackendUrl = backendUrlObj.toString().replace(/\/$/, '');
-          }
-        } catch (e) {
-          console.warn(
-            'TractStack: Failed to construct dynamic backend URL',
-            e
-          );
-        }
-
         window.TRACTSTACK_CONFIG = {
           configured: true,
-          backendUrl: dynamicBackendUrl,
+          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,

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

@@ -213,7 +213,6 @@ for (const [key, value] of Astro.url.searchParams) {
     }
     <div class="pointer-events-auto max-h-full">
       <SettingsPanel
-        config={brandConfig}
         availableCodeHooks={Object.keys(codeHookComponents)}
         client:only="react"
       />

package/templates/src/pages/api/auth/decode.ts

@@ -1,12 +1,10 @@
 import type { APIRoute } from '@/types/astro';
 
-export const GET: APIRoute = async ({ request }) => {
+export const GET: APIRoute = async ({ request, locals }) => {
   const goBackend =
     import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
   const tenantId =
-    request.headers.get('X-Tenant-ID') ||
-    import.meta.env.PUBLIC_TENANTID ||
-    'default';
+    locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
 
   try {
     // Get Authorization header from frontend

package/templates/src/pages/api/auth/login.ts

@@ -1,6 +1,9 @@
 import type { APIRoute } from '@/types/astro';
 
-export const POST: APIRoute = async ({ request }) => {
+export const POST: APIRoute = async ({ request, locals }) => {
+  const tenantId =
+    locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+
   try {
     // Parse request body
     const body = await request.json();
@@ -17,10 +20,6 @@ export const POST: APIRoute = async ({ request }) => {
     }
 
     // Get tenant info from environment
-    const tenantId =
-      request.headers.get('X-Tenant-ID') ||
-      import.meta.env.PUBLIC_TENANTID ||
-      'default';
     const backendUrl =
       import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
 

package/templates/src/pages/api/auth/logout.ts

@@ -2,14 +2,29 @@ import type { APIRoute } from '@/types/astro';
 
 export const POST: APIRoute = async ({ cookies }) => {
   try {
-    // Clear admin and editor auth cookies
-    cookies.delete('admin_auth', {
-      path: '/',
-    });
+    const goBackend =
+      import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+    let rootDomain: string | undefined;
 
-    cookies.delete('editor_auth', {
-      path: '/',
-    });
+    try {
+      const url = new URL(goBackend);
+      // Only set domain for non-localhost to preserve local dev behavior
+      if (url.hostname !== 'localhost' && url.hostname !== '127.0.0.1') {
+        rootDomain = url.hostname;
+      }
+    } catch (e) {
+      console.warn('Logout: Failed to parse backend URL for cookie domain', e);
+    }
+
+    // Determine the options ONCE to prevent overwriting
+    const cookieOptions: any = { path: '/' };
+    if (rootDomain) {
+      cookieOptions.domain = rootDomain;
+    }
+
+    // Execute deletion with the single, correct configuration
+    cookies.delete('admin_auth', cookieOptions);
+    cookies.delete('editor_auth', cookieOptions);
 
     return new Response(
       JSON.stringify({

package/templates/src/pages/api/auth/profile.ts

@@ -1,6 +1,6 @@
 import type { APIRoute } from '@/types/astro';
 
-export const POST: APIRoute = async ({ request }) => {
+export const POST: APIRoute = async ({ request, locals }) => {
   const GO_BACKEND =
     import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
 
@@ -11,13 +11,15 @@ export const POST: APIRoute = async ({ request }) => {
     // Create abort controller for request timeout
     const controller = new AbortController();
     const timeoutId = setTimeout(() => controller.abort(), 10000); // 10s timeout
+    const tenantId =
+      locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
 
     try {
       const response = await fetch(`${GO_BACKEND}/api/v1/auth/profile`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          'X-Tenant-ID': import.meta.env.PUBLIC_TENANTID || 'default',
+          'X-Tenant-ID': tenantId,
           ...(request.headers.get('Authorization') && {
             Authorization: request.headers.get('Authorization')!,
           }),

package/templates/src/pages/api/sandbox.ts

@@ -1,13 +1,11 @@
 import type { APIRoute } from '@/types/astro';
 
-export const POST: APIRoute = async ({ request }) => {
+export const POST: APIRoute = async ({ request, locals }) => {
+  const tenantId =
+    locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
   const goBackend =
     import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
   const sharedSecret = import.meta.env.PRIVATE_SANDBOX_SECRET;
-  const tenantId =
-    request.headers.get('X-Tenant-ID') ||
-    import.meta.env.PUBLIC_TENANTID ||
-    'default';
 
   if (!sharedSecret || sharedSecret === 'false' || sharedSecret === 'true') {
     return new Response(

package/templates/src/pages/api/tailwind.ts

@@ -3,18 +3,15 @@ import { createTailwindcss } from '@mhsdesign/jit-browser-tailwindcss';
 import fs from 'node:fs/promises';
 import path from 'node:path';
 
-export const POST: APIRoute = async ({ request }) => {
+export const POST: APIRoute = async ({ request, locals }) => {
+  const tenantId =
+    locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+  const goBackend =
+    import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
   try {
     const { dirtyPaneIds, dirtyClasses } = await request.json();
 
-    const tenantId =
-      request.headers.get('X-Tenant-ID') ||
-      import.meta.env.PUBLIC_TENANTID ||
-      'default';
-
-    const goBackend =
-      import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
-
     // Forward authentication cookies to the backend
     const cookieHeader = request.headers.get('cookie') || '';
 

package/templates/src/pages/storykeep/branding.astro

@@ -6,6 +6,7 @@ import { requireAdminOrEditor, isAuthenticated, isAdmin } from '@/utils/auth';
 import { getFullContentMap } from '@/stores/analytics';
 import { getBrandConfig } from '@/utils/api/brandConfig';
 import { preHealthCheck } from '@/utils/backend';
+import type { LoadData } from '@/types/compositorTypes';
 
 const tenantId =
   Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
@@ -23,10 +24,25 @@ if (authCheck) {
 const userIsAuthenticated = isAuthenticated(Astro);
 const userIsAdmin = isAdmin(Astro);
 const role = userIsAdmin ? `admin` : userIsAuthenticated ? `editor` : null;
-
 const brandConfig = await getBrandConfig(tenantId);
 const initializing = !brandConfig.SITE_INIT;
 
+let initialSuitcase: LoadData | null = null;
+if (initializing) {
+  const goBackend =
+    import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+  try {
+    const response = await fetch(`${goBackend}/api/v1/setup/suitcase`, {
+      headers: { 'X-Tenant-Id': tenantId },
+    });
+    if (response.ok) {
+      initialSuitcase = await response.json();
+    }
+  } catch (e) {
+    console.warn('[Branding] Failed to probe suitcase:', e);
+  }
+}
+
 const title = 'Branding | StoryKeep';
 
 let fullContentMap;
@@ -52,6 +68,7 @@ try {
         role={role}
         initializing={initializing}
         initialBrandConfig={brandConfig}
+        initialSuitcase={initialSuitcase}
       />
     </div>
   </main>