astro-tractstack 2.0.15 → 2.0.17

package/templates/src/components/edit/pane/AddPanePanel_new.tsx

@@ -10,7 +10,6 @@ import prompts from '@/constants/prompts.json';
 import type { BrandConfig, DesignLibraryEntry } from '@/types/tractstack';
 import { PaneAddMode, type TemplatePane } from '@/types/compositorTypes';
 import { useStore } from '@nanostores/react';
-
 import { CopyInputStep } from './steps/CopyInputStep';
 import { DesignLibraryStep } from './steps/DesignLibraryStep';
 import { AiDesignStep, type AiDesignConfig } from './steps/AiDesignStep';
@@ -20,20 +19,20 @@ import {
   mergeCopyIntoTemplate,
   convertTemplateToAIShell,
 } from '@/utils/compositor/designLibraryHelper';
+import { DirectInjectStep } from './steps/DirectInjectStep';
 
-// --- Types for Workflow State ---
 type Step =
   | 'initial'
   | 'copyInput'
   | 'designLibrary'
   | 'aiDesign'
   | 'loading'
-  | 'error';
+  | 'error'
+  | 'directInject';
 
 type InitialChoice = 'library' | 'ai' | 'blank';
 type CopyMode = 'prompt' | 'raw';
 
-// --- API Call Helper ---
 interface GenerationResponse {
   success: boolean;
   data?: { response: string | object };
@@ -43,7 +42,8 @@ interface GenerationResponse {
 const callAskLemurAPI = async (
   prompt: string,
   context: string,
-  expectJson: boolean
+  expectJson: boolean,
+  isSandboxMode: boolean
 ): Promise<string> => {
   const goBackend =
     import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
@@ -56,12 +56,22 @@ const callAskLemurAPI = async (
     max_tokens: 2000,
   };
 
-  const response = await fetch(`${goBackend}/api/v1/aai/askLemur`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenantId },
-    credentials: 'include',
-    body: JSON.stringify(requestBody),
-  });
+  let response: Response;
+  if (isSandboxMode) {
+    response = await fetch(`/api/sandbox`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenantId },
+      credentials: 'include',
+      body: JSON.stringify({ action: 'askLemur', payload: requestBody }),
+    });
+  } else {
+    response = await fetch(`${goBackend}/api/v1/aai/askLemur`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenantId },
+      credentials: 'include',
+      body: JSON.stringify(requestBody),
+    });
+  }
 
   if (!response.ok) {
     const errorText = await response.text();
@@ -98,7 +108,6 @@ const callAskLemurAPI = async (
   throw new Error('Unexpected response format received from API.');
 };
 
-// --- Main Component ---
 interface AddPaneNewPanelProps {
   nodeId: string;
   first: boolean;
@@ -107,6 +116,7 @@ interface AddPaneNewPanelProps {
   isStoryFragment?: boolean;
   isContextPane?: boolean;
   config?: BrandConfig;
+  isSandboxMode?: boolean;
 }
 
 const AddPaneNewPanel = ({
@@ -117,23 +127,18 @@ const AddPaneNewPanel = ({
   isStoryFragment = false,
   isContextPane = false,
   config,
+  isSandboxMode = false,
 }: AddPaneNewPanelProps) => {
   const ctx = providedCtx || getCtx();
   const hasAssemblyAI = useStore(hasAssemblyAIStore);
-
-  // --- State Machine and Data Stores ---
   const [step, setStep] = useState<Step>('initial');
   const [initialChoice, setInitialChoice] = useState<InitialChoice | null>(
     null
   );
   const [error, setError] = useState<string | null>(null);
-
-  // State for CopyInputStep
-  const [copyMode, setCopyMode] = useState<CopyMode>('raw');
+  const [copyMode, setCopyMode] = useState<CopyMode>('prompt');
   const [promptValue, setPromptValue] = useState('');
   const [copyValue, setCopyValue] = useState('');
-
-  // State for AiDesignStep
   const [aiDesignConfig, setAiDesignConfig] = useState<AiDesignConfig>({
     harmony: 'Analogous',
     baseColor: '',
@@ -142,8 +147,6 @@ const AddPaneNewPanel = ({
     additionalNotes: '',
   });
 
-  // --- Handlers & Logic ---
-
   const handleInitialChoice = (choice: InitialChoice) => {
     setInitialChoice(choice);
     setError(null);
@@ -159,6 +162,8 @@ const AddPaneNewPanel = ({
     setError(null);
     if (step === 'copyInput') {
       setStep('initial');
+    } else if (step === 'directInject') {
+      setStep('aiDesign');
     } else if (step === 'designLibrary' || step === 'aiDesign' || 'error') {
       setStep('copyInput');
     }
@@ -174,18 +179,18 @@ const AddPaneNewPanel = ({
 
   const handleBlankSlate = () => {
     const blankTemplate: TemplatePane = {
-      id: '', // ctx will assign
+      id: '',
       nodeType: 'Pane',
-      parentId: '', // ctx will assign
+      parentId: '',
       title: 'New Pane',
       slug: '',
       isDecorative: false,
       markdown: {
-        id: '', // ctx will assign
+        id: '',
         nodeType: 'Markdown',
-        parentId: '', // ctx will assign
+        parentId: '',
         type: 'markdown',
-        markdownId: '', // ctx will assign
+        markdownId: '',
         defaultClasses: {},
         parentClasses: [],
         nodes: [],
@@ -195,10 +200,9 @@ const AddPaneNewPanel = ({
   };
 
   const handleDesignLibrarySelect = async (entry: DesignLibraryEntry) => {
-    // This flow is for "Design Library + Provide Copy"
     if (copyMode === 'raw') {
       const liveTemplate = convertStorageToLiveTemplate(
-        mergeCopyIntoTemplate(entry.template, []) // Start with blank copy
+        mergeCopyIntoTemplate(entry.template, [])
       );
       if (liveTemplate.markdown) {
         liveTemplate.markdown.markdownBody = copyValue;
@@ -207,12 +211,10 @@ const AddPaneNewPanel = ({
       return;
     }
 
-    // This flow is for "Design Library + Write a Prompt" (Hybrid AI)
     if (copyMode === 'prompt') {
       setError(null);
       setStep('loading');
       try {
-        // 1. Get the full, rich template from the library
         const liveTemplate = convertStorageToLiveTemplate(entry.template);
         if (!liveTemplate.markdown) {
           throw new Error(
@@ -220,7 +222,6 @@ const AddPaneNewPanel = ({
           );
         }
 
-        // 2. Create the simplified shell for the AI
         const shellJson = convertTemplateToAIShell(liveTemplate);
         if (!shellJson || shellJson === '{}') {
           throw new Error(
@@ -228,7 +229,6 @@ const AddPaneNewPanel = ({
           );
         }
 
-        // 3. Get the AI to write copy based on the shell and prompt
         const copyPromptDetails = prompts.aiPaneCopyPrompt;
         const layout = 'Text Only';
         const formattedCopyPrompt = copyPromptDetails.user_template
@@ -243,19 +243,16 @@ const AddPaneNewPanel = ({
         const copyResult = await callAskLemurAPI(
           formattedCopyPrompt,
           copyPromptDetails.system || '',
-          false
+          false,
+          isSandboxMode
         );
 
-        // 4. Parse ONLY the AI-generated HTML into content nodes
         const newNodes = parseAiCopyHtml(copyResult, liveTemplate.markdown.id);
 
-        // 5. Create the final pane by cloning the original rich template
         const finalPane = cloneDeep(liveTemplate);
 
-        // 6. Inject the new AI content, preserving the original rich design
         finalPane.markdown!.nodes = newNodes;
 
-        // 7. Apply the complete, correctly merged pane
         handleApplyTemplate(finalPane);
       } catch (err: any) {
         setError(err.message || 'Failed to generate AI copy for this design.');
@@ -279,7 +276,7 @@ const AddPaneNewPanel = ({
     try {
       const shellPromptDetails = prompts.aiPaneShellPrompt;
       const copyPromptDetails = prompts.aiPaneCopyPrompt;
-      const layout = 'Text Only'; // Hardcoded for this simplified AI path
+      const layout = 'Text Only';
 
       const formattedShellPrompt = shellPromptDetails.user_template
         .replace('{{DESIGN_INPUT}}', designInput)
@@ -288,7 +285,8 @@ const AddPaneNewPanel = ({
       const shellResult = await callAskLemurAPI(
         formattedShellPrompt,
         shellPromptDetails.system || '',
-        true
+        true,
+        isSandboxMode
       );
 
       const copyInputContent = copyMode === 'prompt' ? promptValue : copyValue;
@@ -301,7 +299,8 @@ const AddPaneNewPanel = ({
       const copyResult = await callAskLemurAPI(
         formattedCopyPrompt,
         copyPromptDetails.system || '',
-        false
+        false,
+        isSandboxMode
       );
 
       const finalPane = parseAiPane(shellResult, copyResult, layout);
@@ -310,9 +309,10 @@ const AddPaneNewPanel = ({
       setError(err.message || 'Failed to generate AI pane.');
       setStep('error');
     }
-  }, [aiDesignConfig, copyMode, promptValue, copyValue]);
+  }, [aiDesignConfig, copyMode, promptValue, copyValue, isSandboxMode]);
 
   const handleApplyTemplate = async (template: TemplatePane) => {
+    console.log(template);
     if (!ctx) return;
     try {
       const insertTemplate = cloneDeep(template);
@@ -352,8 +352,6 @@ const AddPaneNewPanel = ({
     }
   };
 
-  // --- Render Logic ---
-
   const renderInitialStep = () => (
     <div className="p-4">
       <h3 className="font-action mb-4 text-center text-xl font-bold text-gray-800">
@@ -365,7 +363,7 @@ const AddPaneNewPanel = ({
           className="group flex flex-col items-center space-y-3 rounded-lg border bg-white p-6 text-center shadow-sm transition-all hover:border-cyan-600 hover:shadow-lg"
         >
           <SwatchIcon className="h-10 w-10 text-gray-500 transition-colors group-hover:text-cyan-600" />
-          <h4 className="font-semibold text-gray-800">Use Design Library</h4>
+          <h4 className="font-bold text-gray-800">Use Design Library</h4>
           <p className="text-sm text-gray-600">
             Start with a pre-made design and add your own content.
           </p>
@@ -376,7 +374,7 @@ const AddPaneNewPanel = ({
             className="group flex flex-col items-center space-y-3 rounded-lg border bg-white p-6 text-center shadow-sm transition-all hover:border-cyan-600 hover:shadow-lg"
           >
             <SparklesIcon className="h-10 w-10 text-gray-500 transition-colors group-hover:text-cyan-600" />
-            <h4 className="font-semibold text-gray-800">Design with AI</h4>
+            <h4 className="font-bold text-gray-800">Design with AI</h4>
             <p className="text-sm text-gray-600">
               Let AI generate a complete design and copy from your prompt.
             </p>
@@ -387,7 +385,7 @@ const AddPaneNewPanel = ({
           className="group flex flex-col items-center space-y-3 rounded-lg border bg-white p-6 text-center shadow-sm transition-all hover:border-cyan-600 hover:shadow-lg"
         >
           <DocumentPlusIcon className="h-10 w-10 text-gray-500 transition-colors group-hover:text-cyan-600" />
-          <h4 className="font-semibold text-gray-800">Blank Slate</h4>
+          <h4 className="font-bold text-gray-800">Blank Slate</h4>
           <p className="text-sm text-gray-600">
             Add a simple, empty pane to build from scratch.
           </p>
@@ -428,6 +426,17 @@ const AddPaneNewPanel = ({
           Continue →
         </button>
       </div>
+      {initialChoice === `ai` && !isSandboxMode && (
+        <div className="mt-6 text-center text-sm text-gray-600">
+          ADVANCED:{' '}
+          <button
+            onClick={() => setStep('directInject')}
+            className="font-bold text-cyan-700 underline hover:text-cyan-900 focus:outline-none"
+          >
+            Direct Inject
+          </button>
+        </div>
+      )}
     </div>
   );
 
@@ -472,6 +481,10 @@ const AddPaneNewPanel = ({
     </div>
   );
 
+  const renderDirectInjectStep = () => (
+    <DirectInjectStep onBack={handleBack} onCreatePane={handleApplyTemplate} />
+  );
+
   const renderLoading = () => (
     <div className="flex min-h-[300px] flex-col items-center justify-center space-y-4 p-6">
       <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-cyan-600"></div>
@@ -505,6 +518,8 @@ const AddPaneNewPanel = ({
         return renderAiDesignStep();
       case 'loading':
         return renderLoading();
+      case 'directInject':
+        return renderDirectInjectStep();
       case 'error':
         return renderError();
       default:

package/templates/src/components/edit/pane/steps/DirectInjectStep.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { parseAiPane } from '@/utils/compositor/aiPaneParser';
+import type { TemplatePane } from '@/types/compositorTypes';
+
+interface DirectInjectStepProps {
+  onBack: () => void;
+  onCreatePane: (template: TemplatePane) => void;
+}
+
+export const DirectInjectStep = ({
+  onBack,
+  onCreatePane,
+}: DirectInjectStepProps) => {
+  const [shellJson, setShellJson] = useState('');
+  const [copyHtml, setCopyHtml] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const handleCreate = () => {
+    setError(null);
+    if (!shellJson.trim() || !copyHtml.trim()) {
+      setError('Both Shell JSON and Inner HTML must be provided.');
+      return;
+    }
+
+    try {
+      const finalPane = parseAiPane(shellJson, copyHtml, 'DirectInject');
+      onCreatePane(finalPane);
+    } catch (err: any) {
+      console.error('Direct Inject Error:', err);
+      setError(
+        `Failed to parse inputs: ${err.message || 'Unknown error'}. Check console.`
+      );
+    }
+  };
+
+  return (
+    <div className="space-y-6 p-4">
+      <div className="space-y-4">
+        <div>
+          <label
+            htmlFor="shellJson"
+            className="block text-sm font-bold text-gray-700"
+          >
+            Shell JSON
+          </label>
+          <textarea
+            id="shellJson"
+            rows={10}
+            value={shellJson}
+            onChange={(e) => setShellJson(e.target.value)}
+            className="mt-1 block w-full rounded-md border-gray-300 p-2 font-mono text-sm shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+            placeholder={`{ "bgColour": "#ffffff", "parentClasses": [...], "defaultClasses": {...} }`}
+          />
+        </div>
+        <div>
+          <label
+            htmlFor="copyHtml"
+            className="block text-sm font-bold text-gray-700"
+          >
+            Inner HTML
+          </label>
+          <textarea
+            id="copyHtml"
+            rows={10}
+            value={copyHtml}
+            onChange={(e) => setCopyHtml(e.target.value)}
+            className="mt-1 block w-full rounded-md border-gray-300 p-2 font-mono text-sm shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+            placeholder={`<h2 class="...">...</h2>\n<p class="...">...</p>`}
+          />
+        </div>
+      </div>
+
+      {error && (
+        <div className="rounded-md bg-red-50 p-4">
+          <p className="text-sm font-bold text-red-800">{error}</p>
+        </div>
+      )}
+
+      <div className="flex justify-between">
+        <button
+          onClick={onBack}
+          className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-700 shadow-sm hover:bg-gray-50"
+        >
+          ← Back
+        </button>
+        <button
+          onClick={handleCreate}
+          disabled={!shellJson.trim() || !copyHtml.trim()}
+          className="rounded-md bg-cyan-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-cyan-700 disabled:cursor-not-allowed disabled:bg-gray-400"
+        >
+          Create Pane
+        </button>
+      </div>
+    </div>
+  );
+};

package/templates/src/components/edit/panels/StyleImagePanel.tsx

@@ -25,14 +25,7 @@ const StyleImagePanel = ({
   parentNode,
 }: StyleImagePanelProps) => {
   const [altDescription, setAltDescription] = useState(node.alt || '');
-  if (
-    !node?.tagName ||
-    !containerNode?.tagName ||
-    !outerContainerNode?.tagName ||
-    !isMarkdownPaneFragmentNode(parentNode)
-  ) {
-    return null;
-  }
+
   const imgDefaultClasses = parentNode.defaultClasses?.[node.tagName];
   const imgOverrideClasses = node.overrideClasses;
   const containerDefaultClasses =
@@ -303,6 +296,15 @@ const StyleImagePanel = ({
     ctx.modifyNodes([{ ...imgNode, isChanged: true }]);
   };
 
+  if (
+    !node?.tagName ||
+    !containerNode?.tagName ||
+    !outerContainerNode?.tagName ||
+    !isMarkdownPaneFragmentNode(parentNode)
+  ) {
+    return null;
+  }
+
   return (
     <div className="space-y-8">
       <div className="space-y-4">

package/templates/src/components/edit/state/SaveModal.tsx

@@ -45,6 +45,7 @@ interface SaveModalProps {
   slug: string;
   isContext: boolean;
   onClose: () => void;
+  isSandboxMode?: boolean;
 }
 
 const PROGRESS_PHASES = {
@@ -61,11 +62,47 @@ const INDETERMINATE_STAGES: SaveStage[] = [
   'UPDATING_HOME_PAGE',
 ];
 
+const SandboxUpgradeNotice = ({ onClose }: { onClose: () => void }) => (
+  <Dialog.Root open={true} onOpenChange={() => onClose()} modal={true}>
+    <Portal>
+      <Dialog.Backdrop className="fixed inset-0 z-[9005] bg-black bg-opacity-75" />
+      <Dialog.Positioner className="fixed inset-0 z-[9005] flex items-center justify-center p-4">
+        <Dialog.Content className="w-full max-w-md overflow-hidden rounded-lg bg-white shadow-xl">
+          <div className="p-6 text-center">
+            <Dialog.Title className="text-xl font-bold text-gray-900">
+              Save Your Work
+            </Dialog.Title>
+            <Dialog.Description className="mt-2 text-gray-600">
+              To save your changes and get a shareable link, please sign up for
+              a full account.
+            </Dialog.Description>
+            <div className="mt-6 flex justify-center gap-3">
+              <a
+                href="/sandbox/register"
+                className="bg-myblue hover:bg-myorange rounded-md px-4 py-2 font-bold text-white"
+              >
+                Sign Up Now
+              </a>
+              <button
+                onClick={onClose}
+                className="rounded-md bg-gray-200 px-4 py-2 text-gray-800 hover:bg-gray-300"
+              >
+                Keep Editing
+              </button>
+            </div>
+          </div>
+        </Dialog.Content>
+      </Dialog.Positioner>
+    </Portal>
+  </Dialog.Root>
+);
+
 export default function SaveModal({
   show,
   slug,
   isContext,
   onClose,
+  isSandboxMode = false,
 }: SaveModalProps) {
   const [stage, setStage] = useState<SaveStage>('PREPARING');
   const [progress, setProgress] = useState(0);
@@ -871,6 +908,10 @@ export default function SaveModal({
     }
   })();
 
+  if (isSandboxMode) {
+    return show ? <SandboxUpgradeNotice onClose={onClose} /> : null;
+  }
+
   return (
     <Dialog.Root
       open={show}

package/templates/src/constants.ts

@@ -18,6 +18,7 @@ export const reservedSlugs = [
   `404`,
   `transcribe`,
   `sitemap`,
+  `sandbox`,
   `robots`,
   `llm`,
 ];

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

@@ -0,0 +1,86 @@
+import type { APIRoute } from '@/types/astro';
+
+export const POST: APIRoute = async ({ request }) => {
+  console.log(1);
+  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';
+  console.log(goBackend);
+  console.log(sharedSecret);
+  console.log(tenantId);
+
+  if (!sharedSecret || sharedSecret === 'false' || sharedSecret === 'true') {
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: 'Sandbox feature is not configured on the server.',
+      }),
+      { status: 501, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
+
+  const profileCookie = request.headers
+    .get('cookie')
+    ?.includes('tractstack_profile');
+  if (!profileCookie) {
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: 'Forbidden: Missing sandbox profile.',
+      }),
+      { status: 403, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
+  console.log(profileCookie);
+
+  try {
+    const body = await request.json();
+    const { action, payload } = body;
+    console.log(action, payload);
+
+    if (action !== 'askLemur') {
+      return new Response(
+        JSON.stringify({ success: false, error: 'Invalid action.' }),
+        { status: 400, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+
+    const backendResponse = await fetch(`${goBackend}/api/v1/aai/askLemur`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Tenant-ID': tenantId,
+        Authorization: `Bearer ${sharedSecret}`,
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (!backendResponse.ok) {
+      const errorText = await backendResponse.text();
+      return new Response(errorText, {
+        status: backendResponse.status,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+
+    const data = await backendResponse.json();
+    return new Response(JSON.stringify(data), {
+      status: 200,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  } catch (error) {
+    const errorMessage =
+      error instanceof Error ? error.message : 'An unknown error occurred.';
+    return new Response(
+      JSON.stringify({ success: false, error: errorMessage }),
+      {
+        status: 500,
+        headers: { 'Content-Type': 'application/json' },
+      }
+    );
+  }
+};