astro-tractstack 2.1.3 → 2.2.0

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

@@ -11,6 +11,7 @@ import {
 import { PaneAddMode, type StoryFragmentNode } from '@/types/compositorTypes';
 import type { FullContentMapItem } from '@/types/tractstack';
 import { TractStackAPI } from '@/utils/api';
+import { usePaneFragments } from '@/hooks/usePaneFragments';
 
 interface AddPaneReUsePanelProps {
   nodeId: string;
@@ -21,8 +22,6 @@ interface AddPaneReUsePanelProps {
 interface PreviewItem {
   ctx: NodesContext;
   snapshot?: SnapshotData;
-  htmlFragment?: string;
-  fragmentError?: string;
   pane: FullContentMapItem;
   index: number;
 }
@@ -43,9 +42,7 @@ const AddPaneReUsePanel = ({
   const [availablePanes, setAvailablePanes] = useState<FullContentMapItem[]>(
     []
   );
-  const [fragmentsLoaded, setFragmentsLoaded] = useState(false);
   const [currentPage, setCurrentPage] = useState(0);
-  const [renderedPages, setRenderedPages] = useState<Set<number>>(new Set([0]));
 
   useEffect(() => {
     const ctx = getCtx();
@@ -67,7 +64,6 @@ const AddPaneReUsePanel = ({
     setAvailablePanes(unusedPanes);
   }, [nodeId]);
 
-  // Create collection for Ark UI Combobox
   const collection = useMemo(() => {
     const filteredPanes =
       query === ''
@@ -85,7 +81,6 @@ const AddPaneReUsePanel = ({
     });
   }, [availablePanes, query]);
 
-  // Create previews from filtered panes
   useEffect(() => {
     const filteredPanes =
       query === ''
@@ -100,14 +95,10 @@ const AddPaneReUsePanel = ({
       ctx: new NodesContext(),
       pane,
       index,
-      htmlFragment: undefined,
-      fragmentError: undefined,
     }));
 
     setPreviews(newPreviews);
     setCurrentPage(0);
-    setRenderedPages(new Set([0]));
-    setFragmentsLoaded(false);
   }, [availablePanes, query]);
 
   const totalPages = Math.ceil(previews.length / ITEMS_PER_PAGE);
@@ -115,8 +106,6 @@ const AddPaneReUsePanel = ({
   const handlePageChange = (newPage: number) => {
     if (newPage >= 0 && newPage < totalPages) {
       setCurrentPage(newPage);
-      setRenderedPages((prev) => new Set([...prev, newPage]));
-      setFragmentsLoaded(false);
     }
   };
 
@@ -125,66 +114,15 @@ const AddPaneReUsePanel = ({
     return previews.slice(startIndex, startIndex + ITEMS_PER_PAGE);
   }, [previews, currentPage]);
 
-  // Fetch fragments for visible panes
-  useEffect(() => {
-    if (visiblePreviews.length === 0 || fragmentsLoaded) return;
-
-    const fetchFragments = async () => {
-      try {
-        const paneIds = visiblePreviews.map((preview) => preview.pane.id);
-        const api = new TractStackAPI(tenantId);
-
-        const response = await api.post('/api/v1/fragments/panes', { paneIds });
-
-        if (!response.success) {
-          throw new Error(response.error || `Fragment API failed`);
-        }
-
-        const data = response.data;
-
-        setPreviews((prevPreviews) => {
-          const updated = [...prevPreviews];
-          visiblePreviews.forEach((visiblePreview) => {
-            const globalIndex = prevPreviews.findIndex(
-              (p) => p.pane.id === visiblePreview.pane.id
-            );
-            if (globalIndex !== -1) {
-              updated[globalIndex] = {
-                ...updated[globalIndex],
-                htmlFragment: data.fragments?.[visiblePreview.pane.id] || '',
-                fragmentError:
-                  data.errors?.[visiblePreview.pane.id] || undefined,
-              };
-            }
-          });
-          return updated;
-        });
-
-        setFragmentsLoaded(true);
-      } catch (error) {
-        console.error('Failed to fetch fragments:', error);
-        setPreviews((prevPreviews) => {
-          const updated = [...prevPreviews];
-          visiblePreviews.forEach((visiblePreview) => {
-            const globalIndex = prevPreviews.findIndex(
-              (p) => p.pane.id === visiblePreview.pane.id
-            );
-            if (globalIndex !== -1) {
-              updated[globalIndex] = {
-                ...updated[globalIndex],
-                fragmentError:
-                  error instanceof Error ? error.message : 'Unknown error',
-              };
-            }
-          });
-          return updated;
-        });
-        setFragmentsLoaded(true);
-      }
-    };
-
-    fetchFragments();
-  }, [visiblePreviews, fragmentsLoaded]);
+  const visiblePaneIds = useMemo(
+    () => visiblePreviews.map((p) => p.pane.id),
+    [visiblePreviews]
+  );
+  const {
+    fragments,
+    errors,
+    isLoading: fragmentsLoading,
+  } = usePaneFragments(visiblePaneIds);
 
   const handleSnapshotComplete = (id: string, snapshot: SnapshotData) => {
     const paneId = id.replace('reuse-', '');
@@ -215,7 +153,6 @@ const AddPaneReUsePanel = ({
       const templateData = response.data;
       const ctx = getCtx();
 
-      // Find storyfragment
       const storyfragmentId = ctx.getClosestNodeTypeFromId(
         nodeId,
         'StoryFragment'
@@ -231,7 +168,6 @@ const AddPaneReUsePanel = ({
         throw new Error('No storyfragment found');
       }
 
-      // Set pane parentId
       templateData.paneNode.parentId = storyfragmentId;
 
       let specificIdx = -1;
@@ -260,7 +196,6 @@ const AddPaneReUsePanel = ({
       }
       storyFragmentNode.isChanged = true;
 
-      // Add nodes using exact same pattern as addTemplatePane
       ctx.addNode(templateData.paneNode);
       ctx.linkChildToParent(
         templateData.paneNode.id,
@@ -276,7 +211,6 @@ const AddPaneReUsePanel = ({
     }
   };
 
-  // CSS to properly style the combobox items with hover and selection
   const comboboxItemStyles = `
     .pane-item[data-highlighted] {
       background-color: #0891b2; /* bg-cyan-600 */
@@ -354,25 +288,24 @@ const AddPaneReUsePanel = ({
                 ...(!preview.snapshot ? { minHeight: '75px' } : {}),
               }}
             >
-              {renderedPages.has(currentPage) && !fragmentsLoaded && (
+              {fragmentsLoading && !fragments[preview.pane.id] && (
                 <div className="flex h-24 items-center justify-center">
                   <div className="text-gray-500">Loading...</div>
                 </div>
               )}
 
-              {fragmentsLoaded && preview.fragmentError && (
+              {errors[preview.pane.id] && (
                 <div className="flex h-24 items-center justify-center">
                   <div className="text-red-500">Preview error</div>
                 </div>
               )}
 
-              {fragmentsLoaded &&
-                preview.htmlFragment &&
+              {fragments[preview.pane.id] &&
                 !preview.snapshot &&
-                !preview.fragmentError && (
+                !errors[preview.pane.id] && (
                   <PaneSnapshotGenerator
                     id={`reuse-${preview.pane.id}`}
-                    htmlString={preview.htmlFragment}
+                    htmlString={fragments[preview.pane.id]}
                     onComplete={handleSnapshotComplete}
                     onError={(id, error) =>
                       console.error(`Snapshot error for ${id}:`, error)

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

@@ -6,11 +6,14 @@ import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import SparklesIcon from '@heroicons/react/24/outline/SparklesIcon';
 import { getCtx } from '@/stores/nodes';
 import { selectionStore } from '@/stores/selection';
+import { renderedPreviews } from '@/stores/previews';
 import { sandboxTokenStore } from '@/stores/storykeep';
 import { AiDesignStep, type AiDesignConfig } from './steps/AiDesignStep';
+import { AiRefineDesignStep } from './steps/AiRefineDesignStep';
 import prompts from '@/constants/prompts.json';
 import { TractStackAPI } from '@/utils/api';
 import { parseAiPane } from '@/utils/compositor/aiPaneParser';
+import type { PaneNode, TemplatePane } from '@/types/compositorTypes';
 
 const callAskLemurAPI = async (
   prompt: string,
@@ -29,7 +32,7 @@ const callAskLemurAPI = async (
     input_text: context,
     final_model: '',
     temperature: 0.5,
-    max_tokens: 2000,
+    max_tokens: 6000,
   };
 
   let resultData: any;
@@ -82,22 +85,34 @@ export const AiRestylePaneModal = ({
 }: AiRestylePaneModalProps) => {
   const ctx = getCtx();
   const { isAiRestyleModalOpen, paneToRestyleId } = useStore(selectionStore);
+  const previews = useStore(renderedPreviews);
 
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [additionalNotes, setAdditionalNotes] = useState('');
   const [aiDesignConfig, setAiDesignConfig] = useState<AiDesignConfig>({
     harmony: 'Analogous',
     baseColor: '',
     accentColor: '',
     theme: 'Light',
-    additionalNotes: '',
   });
 
+  const node = paneToRestyleId
+    ? (ctx.allNodes.get().get(paneToRestyleId) as PaneNode)
+    : null;
+  const isCreative = !!node?.htmlAst;
+
   const handleClose = () => {
     if (loading) return;
     selectionStore.setKey('isAiRestyleModalOpen', false);
     selectionStore.setKey('paneToRestyleId', null);
     setError(null);
+    setAdditionalNotes('');
+  };
+
+  const handleCreativeUpdate = (template: TemplatePane) => {
+    if (!paneToRestyleId) return;
+    ctx.applyShellToPane(paneToRestyleId, template);
   };
 
   const handleGenerate = async () => {
@@ -124,8 +139,7 @@ export const AiRestylePaneModal = ({
         designInput += ` Base around **${aiDesignConfig.baseColor}**.`;
       if (aiDesignConfig.accentColor)
         designInput += ` Accent with **${aiDesignConfig.accentColor}**.`;
-      if (aiDesignConfig.additionalNotes)
-        designInput += ` Notes: "${aiDesignConfig.additionalNotes}"`;
+      if (additionalNotes) designInput += ` Notes: "${additionalNotes}"`;
 
       const shellPromptKey = promptConfig.prompts.shell as keyof typeof prompts;
       const shellPromptDetails = prompts[shellPromptKey] as any;
@@ -168,11 +182,11 @@ export const AiRestylePaneModal = ({
     >
       <Dialog.Backdrop className="fixed inset-0 z-103 bg-black bg-opacity-75" />
       <Dialog.Positioner className="fixed inset-0 z-104 flex items-center justify-center p-4">
-        <Dialog.Content className="flex max-w-2xl flex-col rounded-lg bg-white shadow-2xl">
+        <Dialog.Content className="flex w-full max-w-7xl flex-col rounded-lg bg-white shadow-2xl">
           <div className="flex items-center justify-between border-b p-4">
             <h3 className="flex items-center gap-2 text-lg font-bold">
               <SparklesIcon className="h-5 w-5 text-purple-600" />
-              Re-Color Pane
+              {isCreative ? 'Refine Creative Pane' : 'Re-Color Pane'}
             </h3>
             <button
               onClick={handleClose}
@@ -183,49 +197,85 @@ export const AiRestylePaneModal = ({
             </button>
           </div>
 
-          <form className="p-6" onSubmit={(e) => e.preventDefault()}>
-            <div className={loading ? 'pointer-events-none opacity-50' : ''}>
-              <AiDesignStep
-                designConfig={aiDesignConfig}
-                onDesignConfigChange={setAiDesignConfig}
+          {isCreative ? (
+            <div className="overflow-y-auto" style={{ maxHeight: `80vh` }}>
+              <AiRefineDesignStep
+                onBack={handleClose}
+                onSuccess={handleClose}
+                onUpdatePane={handleCreativeUpdate}
+                isSandboxMode={isSandboxMode}
+                initialHtml={
+                  paneToRestyleId ? previews[paneToRestyleId] || '' : ''
+                }
+                initialCss={node?.htmlAst?.css || ''}
               />
             </div>
+          ) : (
+            <form className="p-6" onSubmit={(e) => e.preventDefault()}>
+              <div className={loading ? 'pointer-events-none opacity-50' : ''}>
+                <AiDesignStep
+                  designConfig={aiDesignConfig}
+                  onDesignConfigChange={setAiDesignConfig}
+                />
 
-            {error && (
-              <div className="mt-4 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
-                {error}
+                <div className="mt-6">
+                  <label
+                    htmlFor="restyle-notes"
+                    className="block text-base font-bold text-gray-800"
+                  >
+                    Additional Design Notes (Optional)
+                  </label>
+                  <p className="mb-2 mt-1 text-sm text-gray-500">
+                    Add specific requests like "use rounded corners", "add
+                    subtle texture".
+                  </p>
+                  <textarea
+                    id="restyle-notes"
+                    value={additionalNotes}
+                    onChange={(e) => setAdditionalNotes(e.target.value)}
+                    placeholder="Enter additional notes..."
+                    rows={3}
+                    className="block w-full rounded-md border-gray-300 p-2 text-sm shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+                  />
+                </div>
               </div>
-            )}
-
-            <div className="mt-8 flex justify-end gap-3">
-              <button
-                type="button"
-                onClick={handleClose}
-                disabled={loading}
-                className="rounded-lg px-4 py-2 font-bold text-gray-600 hover:bg-gray-100 disabled:opacity-50"
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                onClick={handleGenerate}
-                disabled={loading}
-                className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-purple-600 to-indigo-600 px-6 py-2 font-bold text-white shadow transition-all hover:from-purple-500 hover:to-indigo-500 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-75"
-              >
-                {loading ? (
-                  <>
-                    <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-                    Generating...
-                  </>
-                ) : (
-                  <>
-                    <SparklesIcon className="h-5 w-5" />
-                    Apply Re-Color
-                  </>
-                )}
-              </button>
-            </div>
-          </form>
+
+              {error && (
+                <div className="mt-4 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+                  {error}
+                </div>
+              )}
+
+              <div className="mt-8 flex justify-end gap-3">
+                <button
+                  type="button"
+                  onClick={handleClose}
+                  disabled={loading}
+                  className="rounded-lg px-4 py-2 font-bold text-gray-600 hover:bg-gray-100 disabled:opacity-50"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  onClick={handleGenerate}
+                  disabled={loading}
+                  className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-purple-600 to-indigo-600 px-6 py-2 font-bold text-white shadow transition-all hover:from-purple-500 hover:to-indigo-500 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-75"
+                >
+                  {loading ? (
+                    <>
+                      <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                      Generating...
+                    </>
+                  ) : (
+                    <>
+                      <SparklesIcon className="h-5 w-5" />
+                      Apply Re-Color
+                    </>
+                  )}
+                </button>
+              </div>
+            </form>
+          )}
         </Dialog.Content>
       </Dialog.Positioner>
     </Dialog.Root>