phase 6 ,7,9

frontend/src/pages/Sites/Dashboard.tsx

@@ -0,0 +1,304 @@
+/**
+ * Site Dashboard (Advanced)
+ * Phase 7: UI Components & Prompt Management
+ * Site overview with statistics and analytics
+ */
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { 
+  EyeIcon, 
+  FileTextIcon, 
+  PlugIcon, 
+  TrendingUpIcon,
+  CalendarIcon,
+  GlobeIcon
+} from 'lucide-react';
+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';
+
+interface Site {
+  id: number;
+  name: string;
+  slug: string;
+  site_type: string;
+  hosting_type: string;
+  status: string;
+  is_active: boolean;
+  created_at: string;
+  updated_at: string;
+  domain?: string;
+}
+
+interface SiteStats {
+  total_pages: number;
+  published_pages: number;
+  draft_pages: number;
+  total_content: number;
+  published_content: number;
+  integrations_count: number;
+  deployments_count: number;
+  last_deployment?: string;
+  views_count?: number;
+  visitors_count?: number;
+}
+
+export default function SiteDashboard() {
+  const { siteId } = useParams<{ siteId: string }>();
+  const navigate = useNavigate();
+  const toast = useToast();
+  const [site, setSite] = useState<Site | null>(null);
+  const [stats, setStats] = useState<SiteStats | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (siteId) {
+      loadSiteData();
+    }
+  }, [siteId]);
+
+  const loadSiteData = async () => {
+    try {
+      setLoading(true);
+      const [siteData, statsData] = await Promise.all([
+        fetchAPI(`/v1/auth/sites/${siteId}/`),
+        fetchSiteStats(),
+      ]);
+      
+      if (siteData) {
+        setSite(siteData);
+      }
+      
+      if (statsData) {
+        setStats(statsData);
+      }
+    } catch (error: any) {
+      toast.error(`Failed to load site data: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchSiteStats = async (): Promise<SiteStats | null> => {
+    try {
+      // TODO: Create backend endpoint for site stats
+      // For now, return mock data structure
+      return {
+        total_pages: 0,
+        published_pages: 0,
+        draft_pages: 0,
+        total_content: 0,
+        published_content: 0,
+        integrations_count: 0,
+        deployments_count: 0,
+      };
+    } catch (error) {
+      console.error('Error fetching site stats:', error);
+      return null;
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <PageMeta title="Site Dashboard" />
+        <div className="flex items-center justify-center h-64">
+          <div className="text-gray-500">Loading site dashboard...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!site) {
+    return (
+      <div className="p-6">
+        <PageMeta title="Site Not Found" />
+        <Card className="p-12 text-center">
+          <p className="text-gray-600 dark:text-gray-400 mb-4">Site not found</p>
+          <Button onClick={() => navigate('/sites')} variant="outline">
+            Back to Sites
+          </Button>
+        </Card>
+      </div>
+    );
+  }
+
+  const statCards = [
+    {
+      label: 'Total Pages',
+      value: stats?.total_pages || 0,
+      icon: <FileTextIcon className="w-5 h-5" />,
+      color: 'blue',
+      link: `/sites/${siteId}/pages`,
+    },
+    {
+      label: 'Published Pages',
+      value: stats?.published_pages || 0,
+      icon: <GlobeIcon className="w-5 h-5" />,
+      color: 'green',
+      link: `/sites/${siteId}/pages?status=published`,
+    },
+    {
+      label: 'Draft Pages',
+      value: stats?.draft_pages || 0,
+      icon: <FileTextIcon className="w-5 h-5" />,
+      color: 'amber',
+      link: `/sites/${siteId}/pages?status=draft`,
+    },
+    {
+      label: 'Integrations',
+      value: stats?.integrations_count || 0,
+      icon: <PlugIcon className="w-5 h-5" />,
+      color: 'purple',
+      link: `/sites/${siteId}/integrations`,
+    },
+    {
+      label: 'Deployments',
+      value: stats?.deployments_count || 0,
+      icon: <TrendingUpIcon className="w-5 h-5" />,
+      color: 'teal',
+      link: `/sites/${siteId}/deployments`,
+    },
+    {
+      label: 'Total Content',
+      value: stats?.total_content || 0,
+      icon: <FileTextIcon className="w-5 h-5" />,
+      color: 'indigo',
+      link: `/sites/${siteId}/content`,
+    },
+  ];
+
+  return (
+    <div className="p-6">
+      <PageMeta title={`${site.name} - Dashboard`} />
+      
+      {/* Header */}
+      <div className="mb-6 flex justify-between items-start">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+            {site.name}
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">
+            {site.slug} • {site.site_type} • {site.hosting_type}
+          </p>
+          {site.domain && (
+            <p className="text-sm text-gray-500 dark:text-gray-500 mt-1">
+              <GlobeIcon className="w-4 h-4 inline mr-1" />
+              {site.domain}
+            </p>
+          )}
+        </div>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            onClick={() => navigate(`/sites/${siteId}/preview`)}
+          >
+            <EyeIcon className="w-4 h-4 mr-2" />
+            Preview
+          </Button>
+          <Button
+            variant="primary"
+            onClick={() => navigate(`/sites/${siteId}/settings`)}
+          >
+            Settings
+          </Button>
+        </div>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
+        {statCards.map((stat, index) => (
+          <Card
+            key={index}
+            className="p-4 hover:shadow-lg transition-shadow cursor-pointer"
+            onClick={() => stat.link && navigate(stat.link)}
+          >
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-600 dark:text-gray-400 mb-1">
+                  {stat.label}
+                </p>
+                <p className="text-2xl font-bold text-gray-900 dark:text-white">
+                  {stat.value}
+                </p>
+              </div>
+              <div className={`text-${stat.color}-500`}>
+                {stat.icon}
+              </div>
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      {/* Quick Actions */}
+      <Card className="p-6 mb-6">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+          Quick Actions
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
+          <Button
+            variant="outline"
+            onClick={() => navigate(`/sites/${siteId}/pages`)}
+            className="justify-start"
+          >
+            <FileTextIcon className="w-4 h-4 mr-2" />
+            Manage Pages
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => navigate(`/sites/${siteId}/content`)}
+            className="justify-start"
+          >
+            <FileTextIcon className="w-4 h-4 mr-2" />
+            Manage Content
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => navigate(`/sites/${siteId}/integrations`)}
+            className="justify-start"
+          >
+            <PlugIcon className="w-4 h-4 mr-2" />
+            Manage Integrations
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => navigate(`/sites/${siteId}/deploy`)}
+            className="justify-start"
+          >
+            <TrendingUpIcon className="w-4 h-4 mr-2" />
+            Deploy Site
+          </Button>
+        </div>
+      </Card>
+
+      {/* Recent Activity */}
+      <Card className="p-6">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+          Recent Activity
+        </h2>
+        <div className="space-y-3">
+          {stats?.last_deployment ? (
+            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+              <CalendarIcon className="w-5 h-5 text-gray-400" />
+              <div>
+                <p className="text-sm font-medium text-gray-900 dark:text-white">
+                  Last Deployment
+                </p>
+                <p className="text-xs text-gray-600 dark:text-gray-400">
+                  {new Date(stats.last_deployment).toLocaleString()}
+                </p>
+              </div>
+            </div>
+          ) : (
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              No recent activity
+            </p>
+          )}
+        </div>
+      </Card>
+    </div>
+  );
+}
+

frontend/src/pages/Sites/List.tsx

@@ -0,0 +1,405 @@
+/**
+ * Site List View
+ * Phase 7: UI Components & Prompt Management
+ * Advanced site list with filters and search
+ */
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { PlusIcon, EditIcon, SettingsIcon, EyeIcon, TrashIcon, FilterIcon, SearchIcon } from 'lucide-react';
+import PageMeta from '../../components/common/PageMeta';
+import { Card } from '../../components/ui/card';
+import Button from '../../components/ui/button/Button';
+import SelectDropdown from '../../components/form/SelectDropdown';
+import { useToast } from '../../components/ui/toast/ToastContainer';
+import { fetchAPI } from '../../services/api';
+
+interface Site {
+  id: number;
+  name: string;
+  slug: string;
+  site_type: string;
+  hosting_type: string;
+  status: string;
+  is_active: boolean;
+  created_at: string;
+  updated_at: string;
+  page_count?: number;
+  integration_count?: number;
+}
+
+export default function SiteList() {
+  const navigate = useNavigate();
+  const toast = useToast();
+  const [sites, setSites] = useState<Site[]>([]);
+  const [filteredSites, setFilteredSites] = useState<Site[]>([]);
+  const [loading, setLoading] = useState(true);
+  
+  // Filters
+  const [searchTerm, setSearchTerm] = useState('');
+  const [siteTypeFilter, setSiteTypeFilter] = useState('');
+  const [hostingTypeFilter, setHostingTypeFilter] = useState('');
+  const [statusFilter, setStatusFilter] = useState('');
+  const [integrationFilter, setIntegrationFilter] = useState('');
+
+  useEffect(() => {
+    loadSites();
+  }, []);
+
+  useEffect(() => {
+    applyFilters();
+  }, [sites, searchTerm, siteTypeFilter, hostingTypeFilter, statusFilter, integrationFilter]);
+
+  const loadSites = async () => {
+    try {
+      setLoading(true);
+      const data = await fetchAPI('/v1/auth/sites/');
+      if (data && Array.isArray(data)) {
+        setSites(data);
+      }
+    } catch (error: any) {
+      toast.error(`Failed to load sites: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const applyFilters = () => {
+    let filtered = [...sites];
+
+    // Search filter
+    if (searchTerm) {
+      filtered = filtered.filter(
+        (site) =>
+          site.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          site.slug.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+
+    // Site type filter
+    if (siteTypeFilter) {
+      filtered = filtered.filter((site) => site.site_type === siteTypeFilter);
+    }
+
+    // Hosting type filter
+    if (hostingTypeFilter) {
+      filtered = filtered.filter((site) => site.hosting_type === hostingTypeFilter);
+    }
+
+    // Status filter
+    if (statusFilter) {
+      if (statusFilter === 'active') {
+        filtered = filtered.filter((site) => site.is_active);
+      } else if (statusFilter === 'inactive') {
+        filtered = filtered.filter((site) => !site.is_active);
+      } else {
+        filtered = filtered.filter((site) => site.status === statusFilter);
+      }
+    }
+
+    // Integration filter (has integrations or not)
+    if (integrationFilter === 'has_integrations') {
+      filtered = filtered.filter((site) => (site.integration_count || 0) > 0);
+    } else if (integrationFilter === 'no_integrations') {
+      filtered = filtered.filter((site) => (site.integration_count || 0) === 0);
+    }
+
+    setFilteredSites(filtered);
+  };
+
+  const handleCreateSite = () => {
+    navigate('/site-builder');
+  };
+
+  const handleEdit = (siteId: number) => {
+    navigate(`/sites/${siteId}/edit`);
+  };
+
+  const handleSettings = (siteId: number) => {
+    navigate(`/sites/${siteId}/settings`);
+  };
+
+  const handleView = (siteId: number) => {
+    navigate(`/sites/${siteId}`);
+  };
+
+  const handleDelete = async (siteId: number) => {
+    if (!confirm('Are you sure you want to delete this site?')) return;
+
+    try {
+      await fetchAPI(`/v1/auth/sites/${siteId}/`, {
+        method: 'DELETE',
+      });
+      toast.success('Site deleted successfully');
+      loadSites();
+    } catch (error: any) {
+      toast.error(`Failed to delete site: ${error.message}`);
+    }
+  };
+
+  const clearFilters = () => {
+    setSearchTerm('');
+    setSiteTypeFilter('');
+    setHostingTypeFilter('');
+    setStatusFilter('');
+    setIntegrationFilter('');
+  };
+
+  const SITE_TYPES = [
+    { value: '', label: 'All Types' },
+    { value: 'marketing', label: 'Marketing' },
+    { value: 'ecommerce', label: 'Ecommerce' },
+    { value: 'blog', label: 'Blog' },
+    { value: 'portfolio', label: 'Portfolio' },
+    { value: 'corporate', label: 'Corporate' },
+  ];
+
+  const HOSTING_TYPES = [
+    { value: '', label: 'All Hosting' },
+    { value: 'igny8_sites', label: 'IGNY8 Sites' },
+    { value: 'wordpress', label: 'WordPress' },
+    { value: 'shopify', label: 'Shopify' },
+    { value: 'multi', label: 'Multi-Destination' },
+  ];
+
+  const STATUS_OPTIONS = [
+    { value: '', label: 'All Status' },
+    { value: 'active', label: 'Active' },
+    { value: 'inactive', label: 'Inactive' },
+    { value: 'active', label: 'Active Status' },
+    { value: 'inactive', label: 'Inactive Status' },
+    { value: 'suspended', label: 'Suspended' },
+  ];
+
+  const INTEGRATION_OPTIONS = [
+    { value: '', label: 'All Sites' },
+    { value: 'has_integrations', label: 'Has Integrations' },
+    { value: 'no_integrations', label: 'No Integrations' },
+  ];
+
+  const hasActiveFilters = searchTerm || siteTypeFilter || hostingTypeFilter || statusFilter || integrationFilter;
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <PageMeta title="Site List" />
+        <div className="flex items-center justify-center h-64">
+          <div className="text-gray-500">Loading sites...</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <PageMeta title="Site List - IGNY8" />
+      
+      <div className="mb-6 flex justify-between items-center">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+            Site List
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">
+            View and manage all your sites with advanced filtering
+          </p>
+        </div>
+        <Button onClick={handleCreateSite} variant="primary">
+          <PlusIcon className="w-4 h-4 mr-2" />
+          Create New Site
+        </Button>
+      </div>
+
+      {/* Filters */}
+      <Card className="p-4 mb-6">
+        <div className="flex items-center gap-2 mb-4">
+          <FilterIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+            Filters
+          </h2>
+          {hasActiveFilters && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={clearFilters}
+              className="ml-auto"
+            >
+              Clear Filters
+            </Button>
+          )}
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
+          {/* Search */}
+          <div className="lg:col-span-2">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Search
+            </label>
+            <div className="relative">
+              <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+              <input
+                type="text"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                placeholder="Search sites..."
+                className="w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
+              />
+            </div>
+          </div>
+
+          {/* Site Type */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Site Type
+            </label>
+            <SelectDropdown
+              options={SITE_TYPES}
+              value={siteTypeFilter}
+              onChange={(e) => setSiteTypeFilter(e.target.value)}
+            />
+          </div>
+
+          {/* Hosting Type */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Hosting
+            </label>
+            <SelectDropdown
+              options={HOSTING_TYPES}
+              value={hostingTypeFilter}
+              onChange={(e) => setHostingTypeFilter(e.target.value)}
+            />
+          </div>
+
+          {/* Status */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Status
+            </label>
+            <SelectDropdown
+              options={STATUS_OPTIONS}
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+            />
+          </div>
+        </div>
+
+        <div className="mt-4">
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            Integrations
+          </label>
+          <SelectDropdown
+            options={INTEGRATION_OPTIONS}
+            value={integrationFilter}
+            onChange={(e) => setIntegrationFilter(e.target.value)}
+          />
+        </div>
+      </Card>
+
+      {/* Results Count */}
+      <div className="mb-4 text-sm text-gray-600 dark:text-gray-400">
+        Showing {filteredSites.length} of {sites.length} sites
+        {hasActiveFilters && ' (filtered)'}
+      </div>
+
+      {/* Sites List */}
+      {filteredSites.length === 0 ? (
+        <Card className="p-12 text-center">
+          <p className="text-gray-600 dark:text-gray-400 mb-4">
+            {hasActiveFilters ? 'No sites match your filters' : 'No sites created yet'}
+          </p>
+          {hasActiveFilters ? (
+            <Button onClick={clearFilters} variant="outline">
+              Clear Filters
+            </Button>
+          ) : (
+            <Button onClick={handleCreateSite} variant="primary">
+              Create Your First Site
+            </Button>
+          )}
+        </Card>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {filteredSites.map((site) => (
+            <Card key={site.id} className="p-4 hover:shadow-lg transition-shadow">
+              <div className="space-y-3">
+                <div className="flex justify-between items-start">
+                  <div className="flex-1">
+                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                      {site.name}
+                    </h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      {site.slug}
+                    </p>
+                  </div>
+                  <span
+                    className={`px-2 py-1 text-xs rounded ${
+                      site.is_active
+                        ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
+                        : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'
+                    }`}
+                  >
+                    {site.is_active ? 'Active' : 'Inactive'}
+                  </span>
+                </div>
+
+                <div className="flex flex-wrap gap-2 text-xs">
+                  <span className="px-2 py-1 bg-blue-100 text-blue-800 dark:bg-blue-900 dark:bg-blue-200 rounded capitalize">
+                    {site.site_type}
+                  </span>
+                  <span className="px-2 py-1 bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200 rounded capitalize">
+                    {site.hosting_type}
+                  </span>
+                  {site.integration_count && site.integration_count > 0 && (
+                    <span className="px-2 py-1 bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200 rounded">
+                      {site.integration_count} integration{site.integration_count > 1 ? 's' : ''}
+                    </span>
+                  )}
+                </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">
+                    {site.page_count || 0} pages
+                  </div>
+                  <div className="flex gap-2">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleView(site.id)}
+                      title="View"
+                    >
+                      <EyeIcon className="w-4 h-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleEdit(site.id)}
+                      title="Edit"
+                    >
+                      <EditIcon className="w-4 h-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleSettings(site.id)}
+                      title="Settings"
+                    >
+                      <SettingsIcon className="w-4 h-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleDelete(site.id)}
+                      title="Delete"
+                    >
+                      <TrashIcon className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+

frontend/src/pages/Thinker/Prompts.tsx

@@ -57,6 +57,13 @@ const PROMPT_TYPES = [
     icon: '🚫',
     color: 'red',
   },
+  {
+    key: 'site_structure_generation',
+    label: 'Site Structure Generation',
+    description: 'Generate site structure from business brief. Use [IGNY8_BUSINESS_BRIEF], [IGNY8_OBJECTIVES], [IGNY8_STYLE], and [IGNY8_SITE_INFO] to inject data.',
+    icon: '🏗️',
+    color: 'teal',
+  },
 ];
 
 export default function Prompts() {
@@ -426,6 +433,87 @@ export default function Prompts() {
             })}
           </div>
         </div>
+
+        {/* Site Builder Prompts Section */}
+        <div className="mb-8">
+          <div className="mb-4">
+            <h2 className="text-xl font-semibold text-gray-800 dark:text-white mb-1">
+              Site Builder
+            </h2>
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              Configure AI prompt templates for site structure generation
+            </p>
+          </div>
+
+          {/* Site Structure Generation Prompt */}
+          <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
+            {PROMPT_TYPES.filter(t => t.key === 'site_structure_generation').map((type) => {
+              const prompt = prompts[type.key] || {
+                prompt_type: type.key,
+                prompt_type_display: type.label,
+                prompt_value: '',
+                default_prompt: '',
+                is_active: true,
+              };
+
+              return (
+                <div key={type.key}>
+                  <div className="p-5 border-b border-gray-200 dark:border-gray-800">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        <span className="text-2xl">{type.icon}</span>
+                        <div>
+                          <h3 className="text-lg font-semibold text-gray-800 dark:text-white">
+                            {type.label}
+                          </h3>
+                          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                            {type.description}
+                          </p>
+                          <div className="mt-2 text-xs text-gray-500 dark:text-gray-500">
+                            <p className="font-semibold mb-1">Available Variables:</p>
+                            <ul className="list-disc list-inside space-y-1">
+                              <li><code className="bg-gray-100 dark:bg-gray-800 px-1 rounded">[IGNY8_BUSINESS_BRIEF]</code> - Business description and context</li>
+                              <li><code className="bg-gray-100 dark:bg-gray-800 px-1 rounded">[IGNY8_OBJECTIVES]</code> - Site objectives and goals</li>
+                              <li><code className="bg-gray-100 dark:bg-gray-800 px-1 rounded">[IGNY8_STYLE]</code> - Design style preferences</li>
+                              <li><code className="bg-gray-100 dark:bg-gray-800 px-1 rounded">[IGNY8_SITE_INFO]</code> - Site type and requirements</li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="p-5">
+                    <TextArea
+                      value={prompt.prompt_value || ''}
+                      onChange={(value) => handlePromptChange(type.key, value)}
+                      rows={15}
+                      placeholder="Enter prompt template for site structure generation..."
+                      className="font-mono-custom text-sm"
+                    />
+                    <div className="flex gap-3 mt-4">
+                      <Button
+                        onClick={() => handleSave(type.key)}
+                        disabled={saving[type.key]}
+                        className="flex-1"
+                        variant="solid"
+                        color="primary"
+                      >
+                        {saving[type.key] ? 'Saving...' : 'Save Prompt'}
+                      </Button>
+                      <Button
+                        onClick={() => handleReset(type.key)}
+                        disabled={saving[type.key]}
+                        variant="outline"
+                      >
+                        Reset to Default
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
       </div>
     </>
   );