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

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

@@ -50,6 +50,13 @@ interface InteractiveDisclosureWidgetProps {
 
 const generateId = (): string => Math.random().toString(36).substring(2, 9);
 
+const quoteIfNecessary = (command: string, value: string): string => {
+  if (command === 'identifyAs' && value.includes(' ')) {
+    return `"${value}"`;
+  }
+  return value;
+};
+
 const IconSelector = ({
   value,
   onChange,
@@ -136,7 +143,9 @@ const DisclosureItemEditor = ({
 }) => {
   return (
     <div
-      className={`space-y-4 rounded-lg border bg-white p-4 shadow-sm transition-opacity ${item.isDisabled ? 'border-gray-100 opacity-40' : 'border-gray-200'}`}
+      className={`space-y-4 rounded-lg border bg-white p-4 shadow-sm transition-opacity ${
+        item.isDisabled ? 'border-gray-100 opacity-40' : 'border-gray-200'
+      }`}
     >
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
@@ -168,7 +177,9 @@ const DisclosureItemEditor = ({
         <button
           type="button"
           onClick={onToggle}
-          className={`rounded p-1 hover:bg-gray-100 ${item.isDisabled ? 'text-blue-600' : 'text-red-600'}`}
+          className={`rounded p-1 hover:bg-gray-100 ${
+            item.isDisabled ? 'text-blue-600' : 'text-red-600'
+          }`}
         >
           {item.isDisabled ? (
             <ArrowUturnLeftIcon className="h-4 w-4" />
@@ -274,7 +285,6 @@ export default function InteractiveDisclosureWidget({
 
         const actionCommand =
           currentBelief.scale === 'custom' ? 'identifyAs' : 'declare';
-
         const finalDisclosures: DisclosureItem[] = loadedDisclosures.map(
           (loadedItem) => {
             const isFromScale = scaleKeys.some(
@@ -285,13 +295,12 @@ export default function InteractiveDisclosureWidget({
               id: generateId(),
               isCustom: !isFromScale,
               actionLisp: isFromScale
-                ? `(${actionCommand} ${beliefTag} ${loadedItem.beliefValue})`
+                ? `(${actionCommand} ${beliefTag} ${quoteIfNecessary(actionCommand, loadedItem.beliefValue)})`
                 : loadedItem.actionLisp,
               isDisabled: false,
             };
           }
         );
-
         scaleKeys.forEach(({ slug, name }) => {
           if (!finalDisclosures.some((d) => d.beliefValue === slug)) {
             finalDisclosures.push({
@@ -300,13 +309,12 @@ export default function InteractiveDisclosureWidget({
               title: name,
               description: '',
               icon: 'app',
-              actionLisp: `(${actionCommand} ${beliefTag} ${slug})`,
+              actionLisp: `(${actionCommand} ${beliefTag} ${quoteIfNecessary(actionCommand, slug)})`,
               isCustom: false,
               isDisabled: true,
             });
           }
         });
-
         setDisclosures(finalDisclosures);
       } catch (e) {
         console.error('Error parsing disclosure payload:', e);
@@ -345,7 +353,6 @@ export default function InteractiveDisclosureWidget({
     const disclosuresToStore: StoredDisclosureItem[] = disclosures
       .filter((d) => !d.isDisabled)
       .map(({ id, isCustom, isDisabled, ...rest }) => rest);
-
     const payload = { styles: widgetStyles, disclosures: disclosuresToStore };
     onUpdate([selectedBeliefTag, JSON.stringify(payload)]);
   };
@@ -369,7 +376,7 @@ export default function InteractiveDisclosureWidget({
         title: name,
         description: '',
         icon: 'app',
-        actionLisp: `(${actionCommand} ${tag} ${slug})`,
+        actionLisp: `(${actionCommand} ${tag} ${quoteIfNecessary(actionCommand, slug)})`,
         isCustom: false,
         isDisabled: false,
       }));
@@ -407,8 +414,10 @@ export default function InteractiveDisclosureWidget({
     setDisclosures(
       disclosures.map((d) => (d.id === id ? { ...d, ...updates } : d))
     );
+
   const updateWidgetStyles = (updates: Partial<WidgetStyles>) =>
     setWidgetStyles((prev) => ({ ...prev, ...updates }));
+
   const toggleDisclosure = (id: string) =>
     setDisclosures(
       disclosures.map((d) =>

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

@@ -80,10 +80,27 @@ export default function ActionBuilderField({
 
   const handleParamChange = (newParams: string) => {
     setParams(newParams);
-    if (newParams && newParams.trim() !== '' && newParams.trim() !== '()') {
-      onChange(`(${command} ${newParams})`);
-    } else {
+    const trimmedParams = newParams.trim();
+
+    if (!trimmedParams || trimmedParams === '()') {
       onChange('');
+      return;
+    }
+
+    if (command === 'identifyAs') {
+      const firstSpaceIndex = trimmedParams.indexOf(' ');
+      if (firstSpaceIndex === -1) {
+        // Handle case with only beliefId and no value
+        onChange(`(${command} ${trimmedParams})`);
+      } else {
+        const beliefId = trimmedParams.substring(0, firstSpaceIndex);
+        const value = trimmedParams.substring(firstSpaceIndex + 1);
+        const finalValue = value.includes(' ') ? `"${value}"` : value;
+        onChange(`(${command} ${beliefId} ${finalValue})`);
+      }
+    } else {
+      // Original behavior for all other commands
+      onChange(`(${command} ${trimmedParams})`);
     }
   };
 

package/templates/src/components/storykeep/controls/content/BeliefForm.tsx

@@ -37,16 +37,14 @@ export default function BeliefForm({
   onClose,
 }: BeliefFormProps) {
   const [customValue, setCustomValue] = useState('');
+  const [customValueError, setCustomValueError] = useState<string | null>(null);
 
-  // Subscribe to orphan analysis store
   const orphanState = useStore(orphanAnalysisStore);
 
-  // Load orphan analysis on component mount
   useEffect(() => {
     loadOrphanAnalysis();
   }, []);
 
-  // Get usage information for this belief
   const getBeliefUsage = (): string[] => {
     if (!belief?.id || !orphanState.data || !orphanState.data.beliefs) {
       return [];
@@ -54,7 +52,6 @@ export default function BeliefForm({
     return orphanState.data.beliefs[belief.id] || [];
   };
 
-  // Check if belief is in use
   const isBeliefInUse = (): boolean => {
     if (isCreate || !belief?.id) return false;
     return getBeliefUsage().length > 0;
@@ -63,7 +60,6 @@ export default function BeliefForm({
   const beliefInUse = isBeliefInUse();
   const usageCount = getBeliefUsage().length;
 
-  // Initialize form state
   const initialState: BeliefNodeState = belief
     ? convertToLocalState(belief)
     : {
@@ -85,7 +81,6 @@ export default function BeliefForm({
           data
         );
 
-        // Call success callback after save (original pattern)
         setTimeout(() => {
           onClose?.(true);
         }, 1000);
@@ -102,23 +97,30 @@ export default function BeliefForm({
     },
   });
 
-  const handleAddCustomValue = () => {
-    if (!customValue.trim()) return;
+  const handleCustomValueChange = (value: string) => {
+    setCustomValue(value);
+    const valueRegex = /^[a-zA-Z]([a-zA-Z0-9?!]| (?=[a-zA-Z0-9?!]))*$/;
+    if (value && !valueRegex.test(value)) {
+      setCustomValueError(
+        'Must start with a letter. No double or trailing spaces.'
+      );
+    } else {
+      setCustomValueError(null);
+    }
+  };
 
+  const handleAddCustomValue = () => {
+    if (!customValue.trim() || customValueError) return;
     const newState = addCustomValue(formState.state, customValue);
     formState.updateField('customValues', newState.customValues);
     setCustomValue('');
   };
 
   const handleRemoveCustomValue = (index: number) => {
-    // Check if this is a newly added value (not saved yet)
     const currentValue = formState.state.customValues[index];
     const originalValues = formState.originalState.customValues || [];
     const isNewValue = !originalValues.includes(currentValue);
 
-    // Allow removal if:
-    // 1. Belief is not in use, OR
-    // 2. This is a new value that hasn't been saved yet
     if (!beliefInUse || isNewValue) {
       const newState = removeCustomValue(formState.state, index);
       formState.updateField('customValues', newState.customValues);
@@ -188,7 +190,6 @@ export default function BeliefForm({
 
   return (
     <div className="space-y-8">
-      {/* Header */}
       <div className="border-b border-gray-200 pb-4">
         <h2 className="text-2xl font-bold text-gray-900">
           {isCreate ? 'Create Belief' : 'Edit Belief'}
@@ -200,10 +201,8 @@ export default function BeliefForm({
         </p>
       </div>
 
-      {/* Usage Warning */}
       {renderUsageWarning()}
 
-      {/* Info Box */}
       <div className="rounded-md bg-blue-50 p-4">
         <div className="text-sm text-blue-700">
           <p className="font-bold">What are Beliefs?</p>
@@ -225,7 +224,6 @@ export default function BeliefForm({
         </div>
       </div>
 
-      {/* Basic Fields */}
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
         <StringInput
           value={formState.state.title}
@@ -254,7 +252,6 @@ export default function BeliefForm({
         </div>
       </div>
 
-      {/* Scale Selection */}
       <div className="space-y-4">
         <div className="relative">
           <EnumSelect
@@ -276,7 +273,6 @@ export default function BeliefForm({
         {renderScalePreview()}
       </div>
 
-      {/* Custom Values Section */}
       {formState.state.scale === 'custom' && (
         <div className="space-y-4">
           <div>
@@ -286,31 +282,41 @@ export default function BeliefForm({
             </p>
           </div>
 
-          {/* Add Custom Value */}
           <div className="flex gap-2">
             <div className="flex-1">
-              <div className="flex-1">
-                <input
-                  type="text"
-                  value={customValue}
-                  onChange={(e) => setCustomValue(e.target.value)}
-                  onKeyDown={handleKeyDown}
-                  placeholder="Enter custom value"
-                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-cyan-600 sm:text-sm sm:leading-6"
-                />
-              </div>
+              <input
+                type="text"
+                value={customValue}
+                onChange={(e) => handleCustomValueChange(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="Enter custom value"
+                className={`block w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6 ${
+                  customValueError
+                    ? 'ring-red-500 focus:ring-red-600'
+                    : 'ring-gray-300 focus:ring-cyan-600'
+                }`}
+              />
             </div>
             <button
               type="button"
               onClick={handleAddCustomValue}
-              disabled={!customValue.trim()}
+              disabled={!customValue.trim() || !!customValueError}
               className="inline-flex items-center rounded-md bg-cyan-600 px-3 py-2 text-sm font-bold text-white shadow-sm hover:bg-cyan-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600 disabled:cursor-not-allowed disabled:opacity-50"
             >
               <PlusIcon className="h-4 w-4" />
             </button>
           </div>
 
-          {/* Custom Values List */}
+          {customValueError && (
+            <p className="mt-1 text-sm text-red-600">{customValueError}</p>
+          )}
+
+          {formState.errors.customValues && (
+            <p className="text-sm text-red-600">
+              {formState.errors.customValues}
+            </p>
+          )}
+
           {formState.state.customValues.length > 0 && (
             <div className="space-y-2">
               {formState.state.customValues.map((value, index) => {
@@ -355,7 +361,6 @@ export default function BeliefForm({
         </div>
       )}
 
-      {/* Save/Cancel Bar */}
       <UnsavedChangesBar
         formState={formState}
         message="You have unsaved belief changes"
@@ -363,7 +368,6 @@ export default function BeliefForm({
         cancelLabel="Discard Changes"
       />
 
-      {/* Cancel Navigation Button */}
       <div className="flex justify-start">
         <button
           type="button"

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 ? (