Refactor Site Builder Integration and Update Component Structure

- Removed the separate `igny8_sites` service from Docker Compose, integrating its functionality into the main app.
- Updated the Site Builder components to enhance user experience, including improved loading states and error handling.
- Refactored routing and navigation in the Site Builder Wizard and Preview components for better clarity and usability.
- Adjusted test files to reflect changes in import paths and ensure compatibility with the new structure.

frontend/src/pages/Sites/Builder/Blueprints.tsx

@@ -1,102 +1,144 @@
-/**
- * Site Builder Blueprints
- * Moved from site-builder container to main app
- * TODO: Migrate full implementation from site-builder/src/pages/dashboard/
- */
-import React, { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import PageMeta from '../../../components/common/PageMeta';
-import { Card } from '../../../components/ui/card';
-import Button from '../../../components/ui/button/Button';
-import { useToast } from '../../../components/ui/toast/ToastContainer';
-import { fetchAPI } from '../../../services/api';
-import { FileText, Plus } from 'lucide-react';
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import PageMeta from "../../../components/common/PageMeta";
+import { Card } from "../../../components/ui/card";
+import Button from "../../../components/ui/button/Button";
+import { useToast } from "../../../components/ui/toast/ToastContainer";
+import { FileText, Loader2, Plus } from "lucide-react";
+import { useSiteStore } from "../../../store/siteStore";
+import { useBuilderStore } from "../../../store/builderStore";
+import { siteBuilderApi } from "../../../services/siteBuilder.api";
+import type { SiteBlueprint } from "../../../types/siteBuilder";
 
 export default function SiteBuilderBlueprints() {
   const navigate = useNavigate();
   const toast = useToast();
-  const [blueprints, setBlueprints] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
+  const { activeSite } = useSiteStore();
+  const { loadBlueprint, isLoadingBlueprint, activeBlueprint } =
+    useBuilderStore();
+  const [blueprints, setBlueprints] = useState<SiteBlueprint[]>([]);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-    loadBlueprints();
-  }, []);
+    if (activeSite?.id) {
+      loadBlueprints(activeSite.id);
+    } else {
+      setBlueprints([]);
+    }
+  }, [activeSite?.id]);
 
-  const loadBlueprints = async () => {
+  const loadBlueprints = async (siteId: number) => {
     try {
       setLoading(true);
-      const data = await fetchAPI('/v1/site-builder/blueprints/');
-      if (data?.results) {
-        setBlueprints(data.results);
-      } else if (Array.isArray(data)) {
-        setBlueprints(data);
-      }
+      const results = await siteBuilderApi.listBlueprints(siteId);
+      setBlueprints(results);
     } catch (error: any) {
-      toast.error(`Failed to load blueprints: ${error.message}`);
+      toast.error(error?.message || "Failed to load blueprints");
     } finally {
       setLoading(false);
     }
   };
 
+  const handleOpenPreview = async (blueprintId: number) => {
+    try {
+      await loadBlueprint(blueprintId);
+      toast.success("Loaded blueprint preview");
+      navigate("/sites/builder/preview");
+    } catch (error: any) {
+      toast.error(error?.message || "Unable to open blueprint");
+    }
+  };
+
   return (
-    <div className="p-6">
+    <div className="space-y-6 p-6">
       <PageMeta title="Blueprints - IGNY8" />
-      <div className="mb-6 flex justify-between items-center">
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+          <p className="text-xs uppercase tracking-wider text-gray-500 dark:text-white/50">
+            Sites / Blueprints
+          </p>
+          <h1 className="text-3xl font-semibold text-gray-900 dark:text-white">
             Blueprints
           </h1>
-          <p className="text-gray-600 dark:text-gray-400 mt-1">
-            View and manage all site blueprints
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Review and preview structures generated for your active site.
           </p>
         </div>
-        <Button onClick={() => navigate('/sites/builder')} variant="primary">
-          <Plus className="w-4 h-4 mr-2" />
-          Create Blueprint
+        <Button
+          onClick={() => navigate("/sites/builder")}
+          variant="solid"
+          tone="brand"
+          startIcon={<Plus className="h-4 w-4" />}
+        >
+          Create blueprint
         </Button>
       </div>
 
-      {loading ? (
-        <div className="flex items-center justify-center h-64">
-          <div className="text-gray-500">Loading blueprints...</div>
+      {!activeSite ? (
+        <Card className="p-8 text-center">
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Select a site using the header switcher to view its blueprints.
+          </p>
+        </Card>
+      ) : loading ? (
+        <div className="flex h-64 items-center justify-center text-gray-500 dark:text-gray-400">
+          <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+          Loading blueprints…
         </div>
       ) : blueprints.length === 0 ? (
         <Card className="p-12 text-center">
-          <FileText className="w-16 h-16 mx-auto mb-4 text-gray-400" />
-          <p className="text-gray-600 dark:text-gray-400 mb-4">
-            No blueprints created yet
+          <FileText className="mx-auto mb-4 h-16 w-16 text-gray-400" />
+          <p className="mb-4 text-gray-600 dark:text-gray-400">
+            No blueprints created yet for {activeSite.name}.
           </p>
-          <Button onClick={() => navigate('/sites/builder')} variant="primary">
-            Create Your First Blueprint
+          <Button onClick={() => navigate("/sites/builder")} variant="solid" tone="brand">
+            Launch Site Builder
           </Button>
         </Card>
       ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
           {blueprints.map((blueprint) => (
-            <Card key={blueprint.id} className="p-4 hover:shadow-lg transition-shadow">
-              <div className="space-y-3">
-                <div>
-                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-                    {blueprint.name}
-                  </h3>
-                  {blueprint.description && (
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
-                      {blueprint.description}
-                    </p>
+            <Card key={blueprint.id} className="space-y-4 p-5">
+              <div>
+                <p className="text-xs uppercase tracking-wider text-gray-500 dark:text-white/50">
+                  Blueprint #{blueprint.id}
+                </p>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                  {blueprint.name}
+                </h3>
+                {blueprint.description && (
+                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                    {blueprint.description}
+                  </p>
+                )}
+              </div>
+              <div className="flex items-center justify-between rounded-2xl bg-gray-50 px-4 py-3 text-sm font-semibold text-gray-700 dark:bg-white/[0.04] dark:text-white/80">
+                <span>Status</span>
+                <span className="capitalize">{blueprint.status}</span>
+              </div>
+              <div className="flex flex-col gap-2">
+                <Button
+                  variant="outline"
+                  tone="brand"
+                  disabled={isLoadingBlueprint}
+                  onClick={() => handleOpenPreview(blueprint.id)}
+                >
+                  {isLoadingBlueprint && activeBlueprint?.id === blueprint.id ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Loading…
+                    </>
+                  ) : (
+                    "Open preview"
                   )}
-                </div>
-                <div className="flex items-center justify-between pt-3 border-t border-gray-200 dark:border-gray-700">
-                  <div className="text-xs text-gray-600 dark:text-gray-400">
-                    Status: {blueprint.status}
-                  </div>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => navigate(`/sites/${blueprint.site}/editor`)}
-                  >
-                    View
-                  </Button>
-                </div>
+                </Button>
+                <Button
+                  variant="ghost"
+                  tone="neutral"
+                  onClick={() => navigate(`/sites/${blueprint.site}/editor`)}
+                >
+                  Open in editor
+                </Button>
               </div>
             </Card>
           ))}

frontend/src/pages/Sites/Builder/Preview.tsx

@@ -1,43 +1,162 @@
-/**
- * Site Builder Preview
- * Moved from site-builder container to main app
- * TODO: Migrate full implementation from site-builder/src/pages/preview/
- */
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import PageMeta from '../../../components/common/PageMeta';
-import { Card } from '../../../components/ui/card';
-import Button from '../../../components/ui/button/Button';
-import { Eye } from 'lucide-react';
+import { useMemo } from "react";
+import { useNavigate } from "react-router-dom";
+import PageMeta from "../../../components/common/PageMeta";
+import {
+  Card,
+  CardDescription,
+  CardTitle,
+} from "../../../components/ui/card";
+import Button from "../../../components/ui/button/Button";
+import Alert from "../../../components/ui/alert/Alert";
+import { useBuilderStore } from "../../../store/builderStore";
+import { useSiteDefinitionStore } from "../../../store/siteDefinitionStore";
+import { Eye } from "lucide-react";
 
 export default function SiteBuilderPreview() {
   const navigate = useNavigate();
+  const { activeBlueprint, pages } = useBuilderStore();
+  const { structure, selectedSlug, selectPage } = useSiteDefinitionStore();
+
+  const selectedPageDefinition = useMemo(() => {
+    return structure?.pages?.find((page) => page.slug === selectedSlug);
+  }, [structure, selectedSlug]);
+
+  if (!activeBlueprint) {
+    return (
+      <div className="space-y-6 p-6">
+        <PageMeta title="Site Preview - IGNY8" />
+        <Card className="p-12 text-center">
+          <Eye className="mx-auto mb-4 h-16 w-16 text-gray-400" />
+          <p className="text-gray-600 dark:text-gray-400">
+            Run the Site Builder wizard or open a blueprint to preview it.
+          </p>
+          <Button
+            className="mt-6"
+            variant="solid"
+            tone="brand"
+            onClick={() => navigate("/sites/builder")}
+          >
+            Back to wizard
+          </Button>
+        </Card>
+      </div>
+    );
+  }
 
   return (
-    <div className="p-6">
+    <div className="space-y-6 p-6">
       <PageMeta title="Site Preview - IGNY8" />
-      <div className="mb-6">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
-          Site Preview
-        </h1>
-        <p className="text-gray-600 dark:text-gray-400 mt-1">
-          Preview your site during building
-        </p>
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div>
+          <p className="text-xs uppercase tracking-wider text-gray-500 dark:text-white/50">
+            Sites / Preview
+          </p>
+          <h1 className="text-3xl font-semibold text-gray-900 dark:text-white">
+            {activeBlueprint.name}
+          </h1>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Inspect the generated structure before publishing or deploying.
+          </p>
+        </div>
+        <Button variant="outline" onClick={() => navigate("/sites/builder")}>
+          Back to wizard
+        </Button>
       </div>
 
-      <Card className="p-12 text-center">
-        <Eye className="w-16 h-16 mx-auto mb-4 text-gray-400" />
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-          Site Preview
-        </h2>
-        <p className="text-gray-600 dark:text-gray-400 mb-6">
-          The Site Builder preview is being integrated into the main app.
-          Full implementation coming soon.
-        </p>
-        <Button onClick={() => navigate('/sites/builder')} variant="outline">
-          Back to Builder
-        </Button>
-      </Card>
+      <Alert
+        variant="info"
+        title="Preview snapshot"
+        message="This preview uses the latest blueprint data. Re-run the wizard to generate a new version."
+      />
+
+      <div className="grid gap-6 lg:grid-cols-[280px,1fr]">
+        <Card variant="panel" padding="lg">
+          <CardTitle>Pages</CardTitle>
+          <CardDescription>Choose a page to inspect its blocks.</CardDescription>
+          <div className="mt-4 space-y-2">
+            {pages.length === 0 && (
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                No pages yet. Run the wizard to generate structure.
+              </p>
+            )}
+            {pages.map((page) => (
+              <button
+                key={page.id}
+                type="button"
+                onClick={() => selectPage(page.slug)}
+                className={`w-full rounded-2xl border px-4 py-3 text-left ${
+                  selectedSlug === page.slug
+                    ? "border-brand-300 bg-brand-50 text-brand-700 dark:border-brand-500/40 dark:bg-brand-500/10 dark:text-brand-50"
+                    : "border-gray-200 bg-white text-gray-700 hover:border-brand-100 hover:bg-brand-50/60 dark:border-white/10 dark:bg-white/[0.02] dark:text-white/80"
+                }`}
+              >
+                <div className="text-sm font-semibold">{page.title}</div>
+                <div className="text-xs capitalize text-gray-500 dark:text-gray-400">
+                  {page.status}
+                </div>
+              </button>
+            ))}
+          </div>
+        </Card>
+
+        <Card variant="surface" padding="lg">
+          {selectedPageDefinition ? (
+            <div className="space-y-4">
+              <div>
+                <p className="text-xs uppercase tracking-wider text-gray-500 dark:text-white/50">
+                  Page
+                </p>
+                <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">
+                  {selectedPageDefinition.title}
+                </h2>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  {selectedPageDefinition.objective ||
+                    "No objective provided"}
+                </p>
+              </div>
+              <div className="space-y-3">
+                {selectedPageDefinition.blocks?.map((block, index) => (
+                  <div
+                    key={`${block.type}-${index}`}
+                    className="rounded-2xl border border-gray-100 bg-gray-50/80 p-4 dark:border-white/10 dark:bg-white/[0.03]"
+                  >
+                    <p className="text-xs uppercase tracking-wider text-gray-500 dark:text-white/40">
+                      Block {index + 1}
+                    </p>
+                    <p className="text-lg font-semibold text-gray-900 dark:text-white">
+                      {block.type.replace(/_/g, " ")}
+                    </p>
+                    {Array.isArray(block.content) ? (
+                      <ul className="mt-2 list-disc space-y-1 pl-4 text-sm text-gray-600 dark:text-gray-300">
+                        {block.content.map((line, idx) => (
+                          <li key={idx}>{line}</li>
+                        ))}
+                      </ul>
+                    ) : block.content ? (
+                      <pre className="mt-2 rounded-lg bg-white/70 p-3 text-xs text-gray-600 dark:bg-white/[0.05] dark:text-gray-300">
+                        {JSON.stringify(block.content, null, 2)}
+                      </pre>
+                    ) : (
+                      <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+                        No content provided
+                      </p>
+                    )}
+                  </div>
+                ))}
+                {!selectedPageDefinition.blocks?.length && (
+                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                    This page has no block definitions yet.
+                  </p>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="text-center text-gray-500 dark:text-gray-400">
+              Select a page to see its details.
+            </div>
+          )}
+        </Card>
+      </div>
     </div>
   );
 }

frontend/src/pages/Sites/Builder/Wizard.tsx

@@ -214,15 +214,30 @@ export default function SiteBuilderWizard() {
                   <span>Pages generated</span>
                   <span>{pages.length}</span>
                 </div>
-                <Button
-                  variant="outline"
-                  tone="brand"
-                  fullWidth
-                  startIcon={<RefreshCw size={16} />}
-                  onClick={() => refreshPages(activeBlueprint.id)}
-                >
-                  Sync pages
-                </Button>
+                <div className="flex flex-col gap-3 sm:flex-row">
+                  <Button
+                    variant="outline"
+                    tone="brand"
+                    fullWidth
+                    startIcon={<RefreshCw size={16} />}
+                    onClick={() => refreshPages(activeBlueprint.id)}
+                  >
+                    Sync pages
+                  </Button>
+                  <Button
+                    variant="soft"
+                    tone="brand"
+                    fullWidth
+                    disabled={isGenerating}
+                    onClick={() =>
+                      loadBlueprint(activeBlueprint.id).then(() =>
+                        navigate("/sites/builder/preview"),
+                      )
+                    }
+                  >
+                    Open preview
+                  </Button>
+                </div>
               </div>
             ) : (
               <div className="mt-4 rounded-2xl border border-dashed border-gray-200 bg-gray-50/60 p-6 text-center text-sm text-gray-500 dark:border-white/10 dark:bg-white/[0.03] dark:text-white/60">