astro-tractstack 2.0.17 → 2.0.19

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

@@ -3,6 +3,8 @@ import { useState, useCallback } from 'react';
 import DocumentPlusIcon from '@heroicons/react/24/outline/DocumentPlusIcon';
 import SparklesIcon from '@heroicons/react/24/outline/SparklesIcon';
 import SwatchIcon from '@heroicons/react/24/outline/SwatchIcon';
+import SquaresPlusIcon from '@heroicons/react/24/outline/SquaresPlusIcon';
+import DocumentIcon from '@heroicons/react/24/outline/DocumentIcon';
 import { NodesContext, getCtx } from '@/stores/nodes';
 import { cloneDeep } from '@/utils/helpers';
 import { hasAssemblyAIStore } from '@/stores/storykeep';
@@ -25,6 +27,7 @@ type Step =
   | 'initial'
   | 'copyInput'
   | 'designLibrary'
+  | 'layoutChoice'
   | 'aiDesign'
   | 'loading'
   | 'error'
@@ -32,6 +35,8 @@ type Step =
 
 type InitialChoice = 'library' | 'ai' | 'blank';
 type CopyMode = 'prompt' | 'raw';
+type LayoutChoice = 'standard' | 'grid';
+type ColumnPresetKey = 'left' | 'right';
 
 interface GenerationResponse {
   success: boolean;
@@ -135,10 +140,25 @@ const AddPaneNewPanel = ({
   const [initialChoice, setInitialChoice] = useState<InitialChoice | null>(
     null
   );
+  const [layoutChoice, setLayoutChoice] = useState<LayoutChoice>('standard');
   const [error, setError] = useState<string | null>(null);
+
   const [copyMode, setCopyMode] = useState<CopyMode>('prompt');
   const [promptValue, setPromptValue] = useState('');
   const [copyValue, setCopyValue] = useState('');
+
+  const [overallPrompt, setOverallPrompt] = useState(
+    prompts.aiPaneCopyPrompt_2cols.presets.heroDefault.default
+  );
+  const [copyModeCol1, setCopyModeCol1] = useState<CopyMode>('prompt');
+  const [promptValueCol1, setPromptValueCol1] = useState('');
+  const [copyValueCol1, setCopyValueCol1] = useState('');
+  const [copyModeCol2, setCopyModeCol2] = useState<CopyMode>('prompt');
+  const [promptValueCol2, setPromptValueCol2] = useState('');
+  const [copyValueCol2, setCopyValueCol2] = useState('');
+
+  const [selectedLibraryEntry, setSelectedLibraryEntry] =
+    useState<DesignLibraryEntry | null>(null);
   const [aiDesignConfig, setAiDesignConfig] = useState<AiDesignConfig>({
     harmony: 'Analogous',
     baseColor: '',
@@ -153,27 +173,36 @@ const AddPaneNewPanel = ({
 
     if (choice === 'blank') {
       handleBlankSlate();
-    } else {
-      setStep('copyInput');
+    } else if (choice === 'library') {
+      setStep('designLibrary');
+    } else if (choice === 'ai') {
+      setStep('layoutChoice');
     }
   };
 
+  const handleLayoutChoice = (choice: LayoutChoice) => {
+    setLayoutChoice(choice);
+    setStep('aiDesign');
+  };
+
   const handleBack = () => {
     setError(null);
     if (step === 'copyInput') {
-      setStep('initial');
+      if (initialChoice === 'library') {
+        setStep('designLibrary');
+      } else if (initialChoice === 'ai') {
+        setStep('aiDesign');
+      } else {
+        setStep('initial');
+      }
+    } else if (step === 'aiDesign') {
+      setStep('layoutChoice');
     } else if (step === 'directInject') {
       setStep('aiDesign');
-    } else if (step === 'designLibrary' || step === 'aiDesign' || 'error') {
-      setStep('copyInput');
-    }
-  };
-
-  const handleCopyContinue = () => {
-    if (initialChoice === 'library') {
-      setStep('designLibrary');
-    } else if (initialChoice === 'ai') {
-      setStep('aiDesign');
+    } else if (step === 'layoutChoice') {
+      setStep('initial');
+    } else if (step === 'designLibrary' || step === 'error') {
+      setStep('initial');
     }
   };
 
@@ -182,7 +211,7 @@ const AddPaneNewPanel = ({
       id: '',
       nodeType: 'Pane',
       parentId: '',
-      title: 'New Pane',
+      title: '',
       slug: '',
       isDecorative: false,
       markdown: {
@@ -199,130 +228,25 @@ const AddPaneNewPanel = ({
     handleApplyTemplate(blankTemplate);
   };
 
-  const handleDesignLibrarySelect = async (entry: DesignLibraryEntry) => {
-    if (copyMode === 'raw') {
-      const liveTemplate = convertStorageToLiveTemplate(
-        mergeCopyIntoTemplate(entry.template, [])
-      );
-      if (liveTemplate.markdown) {
-        liveTemplate.markdown.markdownBody = copyValue;
-      }
-      handleApplyTemplate(liveTemplate);
-      return;
-    }
-
-    if (copyMode === 'prompt') {
-      setError(null);
-      setStep('loading');
-      try {
-        const liveTemplate = convertStorageToLiveTemplate(entry.template);
-        if (!liveTemplate.markdown) {
-          throw new Error(
-            'The selected design library item is not compatible with this workflow as it has no markdown section.'
-          );
-        }
-
-        const shellJson = convertTemplateToAIShell(liveTemplate);
-        if (!shellJson || shellJson === '{}') {
-          throw new Error(
-            'Could not generate a valid AI shell from this design.'
-          );
-        }
-
-        const copyPromptDetails = prompts.aiPaneCopyPrompt;
-        const layout = 'Text Only';
-        const formattedCopyPrompt = copyPromptDetails.user_template
-          .replace('{{COPY_INPUT}}', promptValue)
-          .replace(
-            '{{DESIGN_INPUT}}',
-            "N/A - Use the provided Shell JSON's design."
-          )
-          .replace('{{LAYOUT_TYPE}}', layout)
-          .replace('{{SHELL_JSON}}', shellJson);
-
-        const copyResult = await callAskLemurAPI(
-          formattedCopyPrompt,
-          copyPromptDetails.system || '',
-          false,
-          isSandboxMode
-        );
-
-        const newNodes = parseAiCopyHtml(copyResult, liveTemplate.markdown.id);
-
-        const finalPane = cloneDeep(liveTemplate);
-
-        finalPane.markdown!.nodes = newNodes;
-
-        handleApplyTemplate(finalPane);
-      } catch (err: any) {
-        setError(err.message || 'Failed to generate AI copy for this design.');
-        setStep('error');
-      }
-    }
+  const handleDesignLibrarySelect = (entry: DesignLibraryEntry) => {
+    setSelectedLibraryEntry(entry);
+    setStep('copyInput');
   };
 
-  const handleAiDesignGenerate = useCallback(async () => {
-    setError(null);
-    setStep('loading');
-
-    let designInput = `Generate a design using a **${aiDesignConfig.harmony.toLowerCase()}** color scheme with a **${aiDesignConfig.theme.toLowerCase()}** theme.`;
-    if (aiDesignConfig.baseColor)
-      designInput += ` Base the colors around **${aiDesignConfig.baseColor}**.`;
-    if (aiDesignConfig.accentColor)
-      designInput += ` Use **${aiDesignConfig.accentColor}** as an accent color.`;
-    if (aiDesignConfig.additionalNotes)
-      designInput += ` Refine with these notes: "${aiDesignConfig.additionalNotes}"`;
-
-    try {
-      const shellPromptDetails = prompts.aiPaneShellPrompt;
-      const copyPromptDetails = prompts.aiPaneCopyPrompt;
-      const layout = 'Text Only';
-
-      const formattedShellPrompt = shellPromptDetails.user_template
-        .replace('{{DESIGN_INPUT}}', designInput)
-        .replace('{{LAYOUT_TYPE}}', layout);
-
-      const shellResult = await callAskLemurAPI(
-        formattedShellPrompt,
-        shellPromptDetails.system || '',
-        true,
-        isSandboxMode
-      );
-
-      const copyInputContent = copyMode === 'prompt' ? promptValue : copyValue;
-      const formattedCopyPrompt = copyPromptDetails.user_template
-        .replace('{{COPY_INPUT}}', copyInputContent)
-        .replace('{{DESIGN_INPUT}}', designInput)
-        .replace('{{LAYOUT_TYPE}}', layout)
-        .replace('{{SHELL_JSON}}', shellResult);
-
-      const copyResult = await callAskLemurAPI(
-        formattedCopyPrompt,
-        copyPromptDetails.system || '',
-        false,
-        isSandboxMode
-      );
-
-      const finalPane = parseAiPane(shellResult, copyResult, layout);
-      handleApplyTemplate(finalPane);
-    } catch (err: any) {
-      setError(err.message || 'Failed to generate AI pane.');
-      setStep('error');
-    }
-  }, [aiDesignConfig, copyMode, promptValue, copyValue, isSandboxMode]);
+  const handleAiDesignContinue = () => {
+    setStep('copyInput');
+  };
 
-  const handleApplyTemplate = async (template: TemplatePane) => {
-    console.log(template);
+  const handleApplyTemplate = async (template: any) => {
     if (!ctx) return;
     try {
       const insertTemplate = cloneDeep(template);
-      insertTemplate.title = insertTemplate.title || 'New Pane';
-      insertTemplate.slug = insertTemplate.slug || '';
-
       const ownerId =
         isStoryFragment || isContextPane
           ? nodeId
           : ctx.getClosestNodeTypeFromId(nodeId, 'StoryFragment');
+      insertTemplate.title = '';
+      insertTemplate.slug = '';
 
       if (isContextPane) {
         insertTemplate.isContextPane = true;
@@ -352,6 +276,199 @@ const AddPaneNewPanel = ({
     }
   };
 
+  const handleFinalGenerate = useCallback(async () => {
+    setError(null);
+    setStep('loading');
+
+    try {
+      if (initialChoice === 'library') {
+        if (!selectedLibraryEntry) {
+          throw new Error('No design library item was selected.');
+        }
+
+        if (copyMode === 'raw') {
+          const liveTemplate = convertStorageToLiveTemplate(
+            mergeCopyIntoTemplate(selectedLibraryEntry.template, [])
+          );
+          if (liveTemplate.markdown) {
+            liveTemplate.markdown.markdownBody = copyValue;
+          }
+          handleApplyTemplate(liveTemplate);
+          return;
+        }
+
+        if (copyMode === 'prompt') {
+          const liveTemplate = convertStorageToLiveTemplate(
+            selectedLibraryEntry.template
+          );
+          if (!liveTemplate.markdown) {
+            throw new Error(
+              'The selected design library item is not compatible with this workflow as it has no markdown section.'
+            );
+          }
+
+          const shellJson = convertTemplateToAIShell(liveTemplate);
+          if (!shellJson || shellJson === '{}') {
+            throw new Error(
+              'Could not generate a valid AI shell from this design.'
+            );
+          }
+
+          const copyPromptDetails = prompts.aiPaneCopyPrompt;
+          const layout = 'Text Only';
+          const formattedCopyPrompt = copyPromptDetails.user_template
+            .replace('{{COPY_INPUT}}', promptValue)
+            .replace(
+              '{{DESIGN_INPUT}}',
+              "N/A - Use the provided Shell JSON's design."
+            )
+            .replace('{{LAYOUT_TYPE}}', layout)
+            .replace('{{SHELL_JSON}}', shellJson);
+
+          const copyResult = await callAskLemurAPI(
+            formattedCopyPrompt,
+            copyPromptDetails.system || '',
+            false,
+            isSandboxMode
+          );
+
+          const newNodes = parseAiCopyHtml(
+            copyResult,
+            liveTemplate.markdown.id
+          );
+          const finalPane = cloneDeep(liveTemplate);
+          finalPane.markdown!.nodes = newNodes;
+          handleApplyTemplate(finalPane);
+        }
+      } else if (initialChoice === 'ai') {
+        let designInput = `Generate a design using a **${aiDesignConfig.harmony.toLowerCase()}** color scheme with a **${aiDesignConfig.theme.toLowerCase()}** theme.`;
+        if (aiDesignConfig.baseColor)
+          designInput += ` Base the colors around **${aiDesignConfig.baseColor}**.`;
+        if (aiDesignConfig.accentColor)
+          designInput += ` Use **${aiDesignConfig.accentColor}** as an accent color.`;
+        if (aiDesignConfig.additionalNotes)
+          designInput += ` Refine with these notes: "${aiDesignConfig.additionalNotes}"`;
+
+        const layout = 'Text Only';
+
+        if (layoutChoice === 'standard') {
+          const shellPromptDetails = prompts.aiPaneShellPrompt;
+          const formattedShellPrompt = shellPromptDetails.user_template
+            .replace('{{DESIGN_INPUT}}', designInput)
+            .replace('{{LAYOUT_TYPE}}', layout);
+
+          const shellResult = await callAskLemurAPI(
+            formattedShellPrompt,
+            shellPromptDetails.system || '',
+            true,
+            isSandboxMode
+          );
+
+          const copyPromptDetails = prompts.aiPaneCopyPrompt;
+          const copyInputContent =
+            copyMode === 'prompt' ? promptValue : copyValue;
+          const formattedCopyPrompt = copyPromptDetails.user_template
+            .replace('{{COPY_INPUT}}', copyInputContent)
+            .replace('{{DESIGN_INPUT}}', designInput)
+            .replace('{{LAYOUT_TYPE}}', layout)
+            .replace('{{SHELL_JSON}}', shellResult);
+
+          const copyResult = await callAskLemurAPI(
+            formattedCopyPrompt,
+            copyPromptDetails.system || '',
+            false,
+            isSandboxMode
+          );
+          const finalPane = parseAiPane(shellResult, copyResult, layout);
+          handleApplyTemplate(finalPane);
+        } else if (layoutChoice === 'grid') {
+          const shellPromptDetails = prompts.aiPaneShellPrompt_2cols;
+          const formattedShellPrompt = shellPromptDetails.user_template
+            .replace('{{COPY_INPUT}}', overallPrompt)
+            .replace('{{DESIGN_INPUT}}', designInput);
+
+          const shellResult = await callAskLemurAPI(
+            formattedShellPrompt,
+            shellPromptDetails.system || '',
+            true,
+            isSandboxMode
+          );
+
+          const copyPromptDetails = prompts.aiPaneCopyPrompt_2cols;
+          const preset = copyPromptDetails.presets.heroDefault;
+          const copyResults: string[] = [];
+
+          const promptsToRun: {
+            prompt: string;
+            copy: string;
+            mode: CopyMode;
+            presetKey: ColumnPresetKey;
+          }[] = [
+            {
+              prompt: promptValueCol1,
+              copy: copyValueCol1,
+              mode: copyModeCol1,
+              presetKey: 'left',
+            },
+            {
+              prompt: promptValueCol2,
+              copy: copyValueCol2,
+              mode: copyModeCol2,
+              presetKey: 'right',
+            },
+          ];
+
+          for (const item of promptsToRun) {
+            if (item.mode === 'raw') {
+              copyResults.push(item.copy);
+              continue;
+            }
+
+            const columnPreset = preset[item.presetKey];
+            const formattedCopyPrompt = copyPromptDetails.user_template
+              .replace('{{SHELL_JSON}}', shellResult)
+              .replace('{{COPY_INPUT}}', overallPrompt)
+              .replace('{{COLUMN_PROMPT}}', item.prompt)
+              .replace('{{DESIGN_INPUT}}', designInput)
+              .replace('{{LAYOUT_TYPE}}', layout)
+              .replace('{{COLUMN_EXAMPLE}}', columnPreset.example);
+
+            const copyResult = await callAskLemurAPI(
+              formattedCopyPrompt,
+              copyPromptDetails.system || '',
+              false,
+              isSandboxMode
+            );
+            copyResults.push(copyResult);
+          }
+
+          const finalPane = parseAiPane(shellResult, copyResults, layout);
+          handleApplyTemplate(finalPane);
+        }
+      }
+    } catch (err: any) {
+      setError(err.message || 'Failed to generate AI pane.');
+      setStep('error');
+    }
+  }, [
+    aiDesignConfig,
+    copyMode,
+    promptValue,
+    copyValue,
+    overallPrompt,
+    copyModeCol1,
+    promptValueCol1,
+    copyValueCol1,
+    copyModeCol2,
+    promptValueCol2,
+    copyValueCol2,
+    isSandboxMode,
+    initialChoice,
+    layoutChoice,
+    selectedLibraryEntry,
+    handleApplyTemplate,
+  ]);
+
   const renderInitialStep = () => (
     <div className="p-4">
       <h3 className="font-action mb-4 text-center text-xl font-bold text-gray-800">
@@ -394,51 +511,156 @@ const AddPaneNewPanel = ({
     </div>
   );
 
-  const renderContentStep = () => (
-    <div className="space-y-4 p-4">
-      <CopyInputStep
-        copyMode={copyMode}
-        onCopyModeChange={setCopyMode}
-        promptValue={promptValue}
-        onPromptValueChange={setPromptValue}
-        copyValue={copyValue}
-        onCopyValueChange={setCopyValue}
-        defaultPrompt={
-          first
-            ? prompts.aiPaneCopyPrompt.heroDefault
-            : prompts.aiPaneCopyPrompt.contentDefault
-        }
-      />
-      <div className="flex justify-between">
+  const renderLayoutChoiceStep = () => (
+    <div className="p-4">
+      <h3 className="font-action mb-4 text-center text-xl font-bold text-gray-800">
+        Choose a Layout Structure
+      </h3>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         <button
-          onClick={handleBack}
-          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"
+          onClick={() => handleLayoutChoice('standard')}
+          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"
         >
-          ← Back
+          <DocumentIcon className="h-10 w-10 text-gray-500 transition-colors group-hover:text-cyan-600" />
+          <h4 className="font-bold text-gray-800">Standard Layout</h4>
+          <p className="text-sm text-gray-600">
+            A single, continuous column of content.
+          </p>
         </button>
         <button
-          onClick={handleCopyContinue}
-          disabled={
-            copyMode === 'prompt' ? !promptValue.trim() : !copyValue.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"
+          onClick={() => handleLayoutChoice('grid')}
+          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"
         >
-          Continue →
+          <SquaresPlusIcon className="h-10 w-10 text-gray-500 transition-colors group-hover:text-cyan-600" />
+          <h4 className="font-bold text-gray-800">2-Column Grid</h4>
+          <p className="text-sm text-gray-600">
+            Side-by-side content that stacks on mobile.
+          </p>
         </button>
       </div>
-      {initialChoice === `ai` && !isSandboxMode && (
-        <div className="mt-6 text-center text-sm text-gray-600">
-          ADVANCED:{' '}
+      <div className="mt-6 flex justify-center">
+        <button
+          onClick={handleBack}
+          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>
+      </div>
+    </div>
+  );
+
+  const renderContentStep = () => {
+    if (layoutChoice === 'grid') {
+      const isGenerateDisabled =
+        (copyModeCol1 === 'prompt' && !promptValueCol1.trim()) ||
+        (copyModeCol1 === 'raw' && !copyValueCol1.trim()) ||
+        (copyModeCol2 === 'prompt' && !promptValueCol2.trim()) ||
+        (copyModeCol2 === 'raw' && !copyValueCol2.trim()) ||
+        !overallPrompt.trim();
+
+      return (
+        <div className="space-y-4 p-4">
+          <div>
+            <h4 className="mb-2 block text-sm font-bold text-gray-700">
+              Overall Component Brief
+            </h4>
+            <textarea
+              value={overallPrompt}
+              onChange={(e) => setOverallPrompt(e.target.value)}
+              placeholder="e.g., A compelling hero section for a website about Tract Stack..."
+              rows={3}
+              className="block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+            />
+          </div>
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+            <div>
+              <h4 className="mb-2 block text-sm font-bold text-gray-700">
+                Left Column Content
+              </h4>
+              <CopyInputStep
+                copyMode={copyModeCol1}
+                onCopyModeChange={setCopyModeCol1}
+                promptValue={promptValueCol1}
+                onPromptValueChange={setPromptValueCol1}
+                copyValue={copyValueCol1}
+                onCopyValueChange={setCopyValueCol1}
+                defaultPrompt={
+                  prompts.aiPaneCopyPrompt_2cols.presets.heroDefault.left.prompt
+                }
+              />
+            </div>
+            <div>
+              <h4 className="mb-2 block text-sm font-bold text-gray-700">
+                Right Column Content
+              </h4>
+              <CopyInputStep
+                copyMode={copyModeCol2}
+                onCopyModeChange={setCopyModeCol2}
+                promptValue={promptValueCol2}
+                onPromptValueChange={setPromptValueCol2}
+                copyValue={copyValueCol2}
+                onCopyValueChange={setCopyValueCol2}
+                defaultPrompt={
+                  prompts.aiPaneCopyPrompt_2cols.presets.heroDefault.right
+                    .prompt
+                }
+              />
+            </div>
+          </div>
+          <div className="flex justify-between">
+            <button
+              onClick={handleBack}
+              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={handleFinalGenerate}
+              disabled={isGenerateDisabled}
+              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"
+            >
+              ✨ Generate Pane
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="space-y-4 p-4">
+        <CopyInputStep
+          copyMode={copyMode}
+          onCopyModeChange={setCopyMode}
+          promptValue={promptValue}
+          onPromptValueChange={setPromptValue}
+          copyValue={copyValue}
+          onCopyValueChange={setCopyValue}
+          defaultPrompt={
+            first
+              ? prompts.aiPaneCopyPrompt.heroDefault
+              : prompts.aiPaneCopyPrompt.contentDefault
+          }
+        />
+        <div className="flex justify-between">
           <button
-            onClick={() => setStep('directInject')}
-            className="font-bold text-cyan-700 underline hover:text-cyan-900 focus:outline-none"
+            onClick={handleBack}
+            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"
           >
-            Direct Inject
+            ← Back
+          </button>
+          <button
+            onClick={handleFinalGenerate}
+            disabled={
+              copyMode === 'prompt' ? !promptValue.trim() : !copyValue.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"
+          >
+            ✨ Generate Pane
           </button>
         </div>
-      )}
-    </div>
-  );
+      </div>
+    );
+  };
 
   const renderDesignLibraryStep = () => (
     <div className="space-y-4 p-4">
@@ -447,7 +669,7 @@ const AddPaneNewPanel = ({
           onClick={handleBack}
           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 to Content
+          ← Back to Choice
         </button>
       </div>
       <DesignLibraryStep
@@ -472,12 +694,23 @@ const AddPaneNewPanel = ({
           ← Back
         </button>
         <button
-          onClick={handleAiDesignGenerate}
+          onClick={handleAiDesignContinue}
           className="rounded-md bg-cyan-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-cyan-700"
         >
-          ✨ Generate with AI
+          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>
   );
 
@@ -486,7 +719,7 @@ const AddPaneNewPanel = ({
   );
 
   const renderLoading = () => (
-    <div className="flex min-h-[300px] flex-col items-center justify-center space-y-4 p-6">
+    <div className="flex min-h-80 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>
       <p className="text-sm text-gray-600">Generating AI Pane...</p>
       <p className="text-xs text-gray-500">This may take a moment.</p>
@@ -510,6 +743,8 @@ const AddPaneNewPanel = ({
     switch (step) {
       case 'initial':
         return renderInitialStep();
+      case 'layoutChoice':
+        return renderLayoutChoiceStep();
       case 'copyInput':
         return renderContentStep();
       case 'designLibrary':
@@ -550,7 +785,7 @@ const AddPaneNewPanel = ({
           </>
         )}
       </div>
-      <div className="min-h-[400px] rounded-md border bg-gray-50">
+      <div className="min-h-96 rounded-md border bg-gray-50">
         {renderStep()}
       </div>
     </div>