igny8/part2-dev/PHASE-5-7-9-SITES-RENDERER-INTEGRATION-UI.md

# PHASES 5-7 & 9: SITES RENDERER, INTEGRATION & UI
**Consolidated Implementation Plan**

**Goal**: Build Sites renderer, multi-destination publishing, comprehensive UI system, and Site Builder enhancements.

**Timeline**: 8.5-11 weeks  
**Priority**: MEDIUM  
**Dependencies**: Phase 0, Phase 1, Phase 3

---

## TABLE OF CONTENTS

1. [Executive Summary](#executive-summary)
2. [Phase 5: Sites Renderer & Bulk Generation](#phase-5-sites-renderer--bulk-generation)
3. [Phase 6: Site Integration & Multi-Destination Publishing](#phase-6-site-integration--multi-destination-publishing)
4. [Phase 7: UI Components & Prompt Management](#phase-7-ui-components--prompt-management)
5. [Cross-Phase Integration](#cross-phase-integration)
6. [Testing & Validation](#testing--validation)
7. [Implementation Checklist](#implementation-checklist)
8. [Success Criteria](#success-criteria)

---

## EXECUTIVE SUMMARY

This document consolidates Phases 5, 6, 7, and 9 into a unified implementation plan:

- **Phase 5**: Sites Renderer for hosting public sites + Bulk page generation from Site Builder
- **Phase 6**: Multi-destination publishing (WordPress, Sites, Shopify) + Site integrations + Enhanced task queuing
- **Phase 7**: Complete UI component library + Prompt management UI + Advanced site management + CMS styling

**Key Exclusions** (Already Implemented):
- ✅ Module Settings UI (implemented in Phase 0)
- ✅ Module Guard component (implemented in Phase 0)
- ✅ Conditional route loading (implemented in Phase 0)
- ✅ Sidebar module filtering (implemented in Phase 0)
- ✅ GenerateSiteStructureFunction (implemented in Phase 3)
- ✅ Single page generation (implemented in Phase 3)
- ✅ File management service (implemented in Phase 3)

---

## PHASE 5: SITES RENDERER & BULK GENERATION

**Timeline**: 2.5-3.5 weeks  
**Dependencies**: Phase 3

### 5.1 Overview

**Objectives**:
- Create Sites renderer container for hosting public sites
- Build publisher service and deployment infrastructure
- Support multiple layout options (7 layout types)
- Enable bulk page content generation from Site Builder
- Deploy sites to public URLs
- Render sites from site definitions

**Key Principles**:
- **Component Reuse**: Use shared component library from Phase 3
- **Multiple Layouts**: Support 7 layout types
- **Public Access**: Sites accessible via public URLs
- **User-Friendly**: "My Websites" or "Published Sites" in UI
- **Bulk Operations**: Generate all pages at once before publishing

### 5.2 Sites Renderer Container

**User-Friendly Name**: "My Websites" or "Published Sites"

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **Create Sites Container** | `docker-compose.app.yml` | None | Add new container for sites renderer |
| **Sites Renderer Frontend** | `sites/src/` | NEW | React app for rendering sites |
| **Site Definition Loader** | `sites/src/loaders/loadSiteDefinition.ts` | NEW | Load site definitions from API |
| **Layout Renderer** | `sites/src/utils/layoutRenderer.ts` | NEW | Render different layouts |
| **Template System** | `sites/src/utils/templateEngine.ts` | NEW | Template rendering system |
| **File Access Integration** | `sites/src/utils/fileAccess.ts` | Phase 3 | Integrate Phase 3's SiteBuilderFileService |
| **Component Import** | `sites/src/components/` | Phase 3 | Import shared components from `frontend/src/components/shared/` |

**Docker Compose Configuration**:
```yaml
# docker-compose.app.yml
igny8_sites:
  build: ./sites
  ports:
    - "8024:5176"
  volumes:
    - /data/app/igny8/sites:/app
    - /data/app/sites-data:/sites
  environment:
    - VITE_API_URL=http://igny8_backend:8010
```

**File Access Integration**:
- Sites Renderer must access site assets from `/data/app/sites-data/clients/{site_id}/v{version}/assets/`
- Use Phase 3's `SiteBuilderFileService` for file access patterns
- Ensure Sites Renderer can load images, documents, and media files

### 5.3 Publisher Service

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **PublisherService** | `business/publishing/services/publisher_service.py` | Phase 1 | Main publishing service |
| **SitesRendererAdapter** | `business/publishing/services/adapters/sites_renderer_adapter.py` | Phase 3 | Adapter for Sites renderer |
| **DeploymentService** | `business/publishing/services/deployment_service.py` | Phase 3 | Deploy sites to renderer |

**PublisherService Structure**:
```python
# business/publishing/services/publisher_service.py
class PublisherService:
    def publish_to_sites(self, site_blueprint):
        """Publish site to Sites renderer"""
        adapter = SitesRendererAdapter()
        return adapter.deploy(site_blueprint)
    
    def get_deployment_status(self, site_blueprint):
        """Get deployment status for a site"""
        return DeploymentService().get_status(site_blueprint)
```

**SitesRendererAdapter**:
- Write site definition to filesystem (`/data/app/sites-data/`)
- Update deployment records
- Handle versioning
- Support rollback

**DeploymentService**:
- Manage deployment lifecycle
- Track deployment versions
- Handle deployment errors
- Support rollback capability

### 5.4 Publishing Models

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **PublishingRecord Model** | `business/publishing/models.py` | Phase 1 | Track content publishing |
| **DeploymentRecord Model** | `business/publishing/models.py` | Phase 3 | Track site deployments |

**PublishingRecord Model**:
```python
class PublishingRecord(SiteSectorBaseModel):
    content = models.ForeignKey(Content, on_delete=models.CASCADE, null=True)
    site_blueprint = models.ForeignKey(SiteBlueprint, on_delete=models.CASCADE, null=True)
    destination = models.CharField(max_length=50)  # 'wordpress', 'sites', 'shopify'
    destination_id = models.CharField(max_length=255)  # External ID
    status = models.CharField(max_length=20)  # 'pending', 'published', 'failed'
    published_at = models.DateTimeField(null=True, blank=True)
    metadata = models.JSONField(default=dict)
```

**DeploymentRecord Model**:
```python
class DeploymentRecord(SiteSectorBaseModel):
    site_blueprint = models.ForeignKey(SiteBlueprint, on_delete=models.CASCADE)
    version = models.IntegerField()
    deployed_version = models.IntegerField()
    status = models.CharField(max_length=20)  # 'deploying', 'deployed', 'failed'
    deployed_at = models.DateTimeField(null=True, blank=True)
    deployment_url = models.URLField(blank=True, null=True)
    metadata = models.JSONField(default=dict)
```

### 5.5 Publisher API

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **Publisher ViewSet** | `modules/publisher/views.py` | PublisherService | API for publishing operations |

**Publisher API Endpoints**:
- `POST /api/v1/publisher/publish/` - Publish content or site
- `GET /api/v1/publisher/status/{id}/` - Get publishing status
- `POST /api/v1/publisher/deploy/{blueprint_id}/` - Deploy site to renderer
- `GET /api/v1/publisher/deployments/` - List deployments

### 5.6 Multiple Layout Options

**Layout Types** (7 total):
- Default (Standard)
- Minimal (Clean, simple)
- Magazine (Editorial, content-focused)
- Ecommerce (Product-focused)
- Portfolio (Showcase)
- Blog (Content-first)
- Corporate (Business)

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **Layout Configuration** | `business/site_building/models.py` | Phase 3 | Store layout selection in SiteBlueprint |
| **Layout Renderer** | `sites/src/utils/layoutRenderer.ts` | Phase 5 | Render different layouts |
| **Layout Components** | `sites/src/components/layouts/` | Phase 3 | Import from shared library |

**Layout Storage**:
- Store `layout_type` in `SiteBlueprint.config_json` or as separate field
- Sites Renderer reads layout type and renders appropriate layout component
- Layout components from Phase 3 shared library

### 5.7 Bulk Page Generation (From Phase 9)

**Purpose**: Enable bulk generation of all pages from a Site Builder blueprint before publishing.

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **Bulk Generate Service** | `business/site_building/services/page_generation_service.py` | Phase 3 | Add `bulk_generate_pages()` method |
| **Task Creation Service** | `business/site_building/services/page_generation_service.py` | Phase 3 | Add `create_tasks_for_pages()` method |
| **Bulk Generate API** | `modules/site_builder/views.py` | PageGenerationService | Add `generate_all_pages` action |
| **Bulk Generate UI** | `site-builder/src/pages/dashboard/SiteDashboard.tsx` | API client | Add "Generate All Pages" button |
| **Page Selection UI** | `site-builder/src/pages/preview/PreviewCanvas.tsx` | State store | Add checkbox selection for pages |
| **Progress Tracking** | `site-builder/src/components/common/ProgressModal.tsx` | Existing | Track bulk generation progress |

**Bulk Generation Service**:
```python
# business/site_building/services/page_generation_service.py
class PageGenerationService:
    def bulk_generate_pages(
        self, 
        site_blueprint: SiteBlueprint,
        page_ids: Optional[List[int]] = None,
        force_regenerate: bool = False
    ) -> dict:
        """
        Generate content for multiple pages in a blueprint.
        
        Similar to how ideas are queued to writer:
        1. Get pages (filtered by page_ids if provided)
        2. Create/update Writer Tasks for each page
        3. Queue content generation for all tasks
        4. Return task IDs for progress tracking
        """
        pages = site_blueprint.pages.all()
        if page_ids:
            pages = pages.filter(id__in=page_ids)
        
        task_ids = []
        for page in pages:
            task = self._ensure_task(page, force_regenerate=force_regenerate)
            task_ids.append(task.id)
            page.status = 'generating'
            page.save(update_fields=['status', 'updated_at'])
        
        account = site_blueprint.account
        result = self.content_service.generate_content(task_ids, account)
        
        return {
            'success': True,
            'pages_queued': len(task_ids),
            'task_ids': task_ids,
            'celery_task_id': result.get('task_id'),
        }
    
    def create_tasks_for_pages(
        self,
        site_blueprint: SiteBlueprint,
        page_ids: Optional[List[int]] = None,
        force_regenerate: bool = False
    ) -> List[Tasks]:
        """
        Create Writer Tasks for blueprint pages without generating content.
        
        Useful for:
        - Previewing what tasks will be created
        - Manual task management
        - Integration with existing Writer UI
        """
        pages = site_blueprint.pages.all()
        if page_ids:
            pages = pages.filter(id__in=page_ids)
        
        tasks = []
        for page in pages:
            task = self._ensure_task(page, force_regenerate=force_regenerate)
            tasks.append(task)
        
        return tasks
```

**Bulk Generation API**:
```python
# modules/site_builder/views.py
class SiteBlueprintViewSet(SiteSectorModelViewSet):
    @action(detail=True, methods=['post'])
    def generate_all_pages(self, request, pk=None):
        """
        Generate content for all pages in blueprint.
        
        Request body:
        {
            "page_ids": [1, 2, 3],  # Optional: specific pages, or all if omitted
            "force": false  # Optional: force regenerate existing content
        }
        """
        blueprint = self.get_object()
        page_ids = request.data.get('page_ids')
        force = request.data.get('force', False)
        
        service = PageGenerationService()
        result = service.bulk_generate_pages(
            blueprint, 
            page_ids=page_ids,
            force_regenerate=force
        )
        return success_response(result, request=request)
    
    @action(detail=True, methods=['post'])
    def create_tasks(self, request, pk=None):
        """Create Writer tasks for pages without generating content"""
        blueprint = self.get_object()
        page_ids = request.data.get('page_ids')
        
        service = PageGenerationService()
        tasks = service.create_tasks_for_pages(blueprint, page_ids=page_ids)
        
        serializer = TasksSerializer(tasks, many=True)
        return success_response({'tasks': serializer.data}, request=request)
```

**Frontend API Client**:
```typescript
// site-builder/src/api/builder.api.ts
export const builderApi = {
  async generateAllPages(
    blueprintId: number,
    options?: { pageIds?: number[]; force?: boolean }
  ): Promise<{ task_id: string; pages_queued: number }> {
    const res = await client.post(
      `/blueprints/${blueprintId}/generate_all_pages/`,
      options || {}
    );
    return res.data;
  },
  
  async createTasksForPages(
    blueprintId: number,
    pageIds?: number[]
  ): Promise<{ tasks: Task[] }> {
    const res = await client.post(
      `/blueprints/${blueprintId}/create_tasks/`,
      { page_ids: pageIds }
    );
    return res.data;
  },
};
```

### 5.8 Phase 5 Testing

**Test Cases**:
- ✅ Sites renderer loads site definitions
- ✅ Blocks render correctly using shared components
- ✅ File access works (images, documents, media)
- ✅ Deployment works end-to-end
- ✅ Sites are accessible publicly
- ✅ Multiple layouts work correctly
- ✅ Bulk page generation works
- ✅ Progress tracking works
- ✅ Task creation works correctly

---

## PHASE 6: SITE INTEGRATION & MULTI-DESTINATION PUBLISHING

**Timeline**: 2.5-3 weeks  
**Dependencies**: Phase 5

### 6.1 Overview

**Objectives**:
- Support multiple site integrations per site
- Multi-destination publishing (WordPress, Sites, Shopify)
- Two-way sync with external platforms
- Site management UI (Core CMS features)
- Publishing settings UI
- Enhanced blueprint-to-writer task integration

**Key Principles**:
- **Multiple Integrations**: One site can have multiple integrations
- **Adapter Pattern**: Platform-specific adapters for publishing
- **Two-Way Sync**: Sync content both ways
- **User-Friendly**: "Site Manager" or "Content Manager" in UI

### 6.2 Site Integration Models

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **SiteIntegration Model** | `business/integration/models.py` | Phase 1 | Store integration configs |

**SiteIntegration Model**:
```python
# business/integration/models.py
class SiteIntegration(SiteSectorBaseModel):
    site = models.ForeignKey(Site, on_delete=models.CASCADE)
    platform = models.CharField(max_length=50)  # 'wordpress', 'shopify', 'custom'
    platform_type = models.CharField(max_length=50)  # 'cms', 'ecommerce', 'custom_api'
    config_json = models.JSONField(default=dict)
    credentials = models.EncryptedField()  # Encrypted API keys
    is_active = models.BooleanField(default=True)
    sync_enabled = models.BooleanField(default=False)
    last_sync_at = models.DateTimeField(null=True, blank=True)
    sync_status = models.CharField(max_length=20)  # 'success', 'failed', 'pending'
    
    class Meta:
        db_table = 'igny8_site_integrations'
        unique_together = [['site', 'platform']]
```

### 6.3 Integration Service

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **IntegrationService** | `business/integration/services/integration_service.py` | Phase 1 | Manage integrations |
| **SyncService** | `business/integration/services/sync_service.py` | Phase 1 | Handle two-way sync |
| **ContentSyncService** | `business/integration/services/content_sync_service.py` | Phase 1 | Sync content from external platforms |

**IntegrationService**:
- CRUD operations for SiteIntegration
- Integration validation
- Credential management (encrypted)
- Connection testing

**SyncService**:
- Two-way sync logic
- Sync status tracking
- Error handling
- Sync logging

**ContentSyncService**:
- Sync content from WordPress
- Sync content from Shopify
- Sync content from custom APIs
- Import content with source tracking

### 6.4 Publishing Adapters

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **BaseAdapter** | `business/publishing/services/adapters/base_adapter.py` | Phase 5 | Base adapter interface |
| **WordPressAdapter** | `business/publishing/services/adapters/wordpress_adapter.py` | EXISTING (refactor) | WordPress publishing |
| **SitesRendererAdapter** | `business/publishing/services/adapters/sites_renderer_adapter.py` | Phase 5 | IGNY8 Sites deployment |
| **ShopifyAdapter** | `business/publishing/services/adapters/shopify_adapter.py` | Phase 5 (future) | Shopify publishing |

**BaseAdapter Interface**:
```python
# business/publishing/services/adapters/base_adapter.py
class BaseAdapter(ABC):
    @abstractmethod
    def publish(self, content, destination_config):
        """Publish content to destination"""
        pass
    
    @abstractmethod
    def test_connection(self, config):
        """Test connection to destination"""
        pass
    
    @abstractmethod
    def get_status(self, published_id):
        """Get publishing status"""
        pass
```

**WordPressAdapter Refactor**:
- Refactor existing WordPress publishing to use BaseAdapter
- Preserve all existing functionality
- Add adapter interface compliance
- Test backward compatibility

### 6.5 Multi-Destination Publishing

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **Extend PublisherService** | `business/publishing/services/publisher_service.py` | Phase 5 | Support multiple destinations |
| **Update PublishingRecord** | `business/publishing/models.py` | Phase 5 | Track multiple destinations |

**Multi-Destination Publishing**:
```python
# business/publishing/services/publisher_service.py
class PublisherService:
    def publish(self, content, destinations):
        """
        Publish content to multiple destinations.
        
        Args:
            content: Content or SiteBlueprint to publish
            destinations: List of destination configs
        
        Returns:
            List of publishing results
        """
        results = []
        for destination in destinations:
            adapter = self.get_adapter(destination['platform'])
            result = adapter.publish(content, destination)
            results.append(result)
        return results
    
    def get_adapter(self, platform):
        """Get adapter for platform"""
        adapters = {
            'wordpress': WordPressAdapter(),
            'sites': SitesRendererAdapter(),
            'shopify': ShopifyAdapter(),
        }
        return adapters.get(platform)
```

**PublishingRecord Updates**:
- Support multiple destinations per content
- Track status per destination
- Store destination-specific metadata

### 6.6 Site Model Extensions

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **Add site_type field** | `core/auth/models.py` | None | Track site type |
| **Add hosting_type field** | `core/auth/models.py` | None | Track hosting type |
| **Add integrations relationship** | `core/auth/models.py` | Phase 6.2 | Link to SiteIntegration |

**Site Model Extensions**:
```python
# core/auth/models.py
class Site(SiteSectorBaseModel):
    # Existing fields...
    
    # NEW fields
    site_type = models.CharField(
        max_length=50,
        choices=[
            ('marketing', 'Marketing Site'),
            ('ecommerce', 'Ecommerce Site'),
            ('blog', 'Blog'),
            ('portfolio', 'Portfolio'),
            ('corporate', 'Corporate'),
        ],
        default='marketing'
    )
    
    hosting_type = models.CharField(
        max_length=50,
        choices=[
            ('igny8_sites', 'IGNY8 Sites'),
            ('wordpress', 'WordPress'),
            ('shopify', 'Shopify'),
            ('multi', 'Multi-Destination'),
        ],
        default='igny8_sites'
    )
```

### 6.7 Integration API

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **Integration ViewSet** | `modules/integration/views.py` | IntegrationService | CRUD for integrations |
| **Integration URLs** | `modules/integration/urls.py` | None | Register integration routes |

**Integration API Endpoints**:
- `GET /api/v1/integration/integrations/` - List integrations
- `POST /api/v1/integration/integrations/` - Create integration
- `GET /api/v1/integration/integrations/{id}/` - Get integration
- `PUT /api/v1/integration/integrations/{id}/` - Update integration
- `DELETE /api/v1/integration/integrations/{id}/` - Delete integration
- `POST /api/v1/integration/integrations/{id}/test/` - Test connection
- `POST /api/v1/integration/integrations/{id}/sync/` - Trigger sync

### 6.8 Integration UI (Update Existing)

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **Update Integration Settings** | `frontend/src/pages/Settings/Integration.tsx` | EXISTING (update) | Add SiteIntegration support |
| **Multi-Platform Support** | `frontend/src/components/integration/PlatformSelector.tsx` | NEW | Platform selector |
| **Integration Status** | `frontend/src/components/integration/IntegrationStatus.tsx` | NEW | Show integration status |

**Integration UI Features**:
- Show multiple integrations per site
- Add WordPress, Shopify, Custom API options
- Two-way sync toggle
- Connection testing
- Sync status display
- Last sync timestamp

### 6.9 Publishing Settings UI

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **Publishing Settings Page** | `frontend/src/pages/Settings/Publishing.tsx` | NEW | Publishing configuration |
| **Destination Management** | `frontend/src/pages/Settings/Publishing.tsx` | Phase 6 | Manage publishing destinations |
| **Publishing Rules** | `frontend/src/components/publishing/PublishingRules.tsx` | NEW | Publishing rules configuration |
| **Auto-Publish Settings** | `frontend/src/components/publishing/AutoPublishSettings.tsx` | NEW | Auto-publish configuration |

**Publishing Settings Features**:
- Configure default publishing destinations
- Set up publishing rules (auto-publish, manual, scheduled)
- Manage destination priorities
- Configure auto-publish triggers

### 6.10 Site Management UI (Core CMS)

**User-Friendly Name**: "Site Manager" or "Content Manager"

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **Site Management Dashboard** | `frontend/src/pages/Sites/Manage.tsx` | NEW | Site management overview |
| **Site Content Editor** | `frontend/src/pages/Sites/Editor.tsx` | NEW | Edit site content |
| **Post Editor** | `frontend/src/pages/Sites/PostEditor.tsx` | NEW | Edit posts |
| **Page Manager** | `frontend/src/pages/Sites/PageManager.tsx` | NEW | Manage pages |
| **Site Settings** | `frontend/src/pages/Sites/Settings.tsx` | NEW | Site settings |

**Site Management Features** (Core):
- View all pages/posts for a site
- Add new pages
- Remove pages
- Edit page content
- Manage page order
- Change page templates
- Update site settings
- Basic site preview

### 6.11 Enhanced Task Integration (From Phase 9)

**Purpose**: Better integration between Site Builder tasks and Writer UI.

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **Show Site Builder Tasks** | `frontend/src/pages/Writer/Content.tsx` | Existing | Filter tasks with "[Site Builder]" prefix |
| **Link to Blueprint** | `frontend/src/pages/Writer/Content.tsx` | API | Add link to source blueprint |
| **Bulk Actions** | `frontend/src/pages/Writer/Content.tsx` | Existing | Include Site Builder tasks in bulk actions |

**Task Identification**:
- Tasks created from Site Builder have title prefix: `"[Site Builder] {page_title}"`
- Can filter Writer tasks by this prefix
- Can link back to source PageBlueprint via task description

**Writer UI Enhancements**:
- Filter by source (Site Builder, Ideas, Manual)
- Show source blueprint link
- Include in bulk operations
- Show page type and site name

### 6.12 Phase 6 Testing

**Test Cases**:
- ✅ Site integrations work correctly
- ✅ Multi-destination publishing works
- ✅ WordPress sync works (when plugin connected)
- ✅ Two-way sync functions properly
- ✅ Site management UI works (core features)
- ✅ Publishing settings work
- ✅ Task integration works
- ✅ Adapter pattern works correctly

---

## PHASE 7: UI COMPONENTS & PROMPT MANAGEMENT

**Timeline**: 3.5-4.5 weeks  
**Dependencies**: Phase 0, Phase 3, Phase 5

### 7.1 Overview

**Objectives**:
- Complete global component library
- Add prompt management UI for Site Builder
- Build advanced site management UI
- Create layout and template system
- Implement CMS styling system

**Key Principles**:
- **No Duplication**: All components shared across apps
- **TypeScript**: All components use TypeScript
- **Accessibility**: All components accessible (ARIA)
- **Responsive**: All components responsive

### 7.2 Global Component Library

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **Component Library Structure** | `frontend/src/components/shared/` | Phase 3 | Complete component library |
| **Block Components** | `frontend/src/components/shared/blocks/` | Phase 3 | All block components |
| **Layout Components** | `frontend/src/components/shared/layouts/` | Phase 3 | All layout components |
| **Template Components** | `frontend/src/components/shared/templates/` | Phase 3 | All template components |
| **Component Documentation** | `frontend/src/components/shared/README.md` | None | Document all components |
| **Component Storybook** | `frontend/.storybook/` | Optional | Component documentation |
| **Component Tests** | `frontend/src/components/shared/**/*.test.tsx` | None | Test all components |

**Component Standards**:
- All components use TypeScript
- All components have props interfaces
- All components are responsive
- All components support dark mode
- All components are accessible (ARIA)
- No duplicate components

**Block Components to Complete**:
- HeroBlock
- FeatureGridBlock
- StatsPanel
- ServicesBlock
- ProductsBlock
- TestimonialsBlock
- ContactFormBlock
- CTABlock
- ImageGalleryBlock
- VideoBlock
- TextBlock
- QuoteBlock

**Layout Components to Complete** (7 total):
- DefaultLayout
- MinimalLayout
- MagazineLayout
- EcommerceLayout
- PortfolioLayout
- BlogLayout
- CorporateLayout

**Template Components to Complete**:
- BlogTemplate
- BusinessTemplate
- PortfolioTemplate
- EcommerceTemplate
- LandingTemplate
- MarketingTemplate

### 7.3 Prompt Management UI (From Phase 9)

**Purpose**: Add Site Builder prompt to Thinker `/prompts` interface.

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **Add prompt type to backend** | `modules/system/models.py` | Existing | Add `'site_structure_generation'` to PROMPT_TYPE_CHOICES |
| **Create migration** | `modules/system/migrations/XXXX_add_site_structure_prompt_type.py` | Existing | Add new choice to PROMPT_TYPE_CHOICES |
| **Add prompt type to frontend** | `frontend/src/pages/Thinker/Prompts.tsx` | Existing | Add site_structure_generation to PROMPT_TYPES array |
| **Add Site Builder section** | `frontend/src/pages/Thinker/Prompts.tsx` | Existing | Add "Site Builder" section to Prompts page |
| **Add prompt editor** | `frontend/src/pages/Thinker/Prompts.tsx` | Existing | Add prompt editor for site structure generation |

**Backend Model Update**:
```python
# modules/system/models.py
class AIPrompt(AccountBaseModel):
    PROMPT_TYPE_CHOICES = [
        ('clustering', 'Clustering'),
        ('ideas', 'Ideas Generation'),
        ('content_generation', 'Content Generation'),
        ('image_prompt_extraction', 'Image Prompt Extraction'),
        ('image_prompt_template', 'Image Prompt Template'),
        ('negative_prompt', 'Negative Prompt'),
        ('site_structure_generation', 'Site Structure Generation'),  # NEW
    ]
```

**Frontend Prompt Type Config**:
```typescript
// frontend/src/pages/Thinker/Prompts.tsx
const PROMPT_TYPES = [
  // ... existing prompts
  {
    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',
  },
];
```

**Prompt UI Section**:
```typescript
{/* Site Builder Prompts Section */}
<div className="mb-8">
  <div className="mb-4">
    <h2 className="text-xl font-semibold text-gray-800 dark:text-white">
      Site Builder
    </h2>
    <p className="text-sm text-gray-600 dark:text-gray-400">
      Configure prompts for AI-powered site structure generation
    </p>
  </div>
  
  {/* Site Structure Generation Prompt */}
  <PromptEditor
    promptType="site_structure_generation"
    label="Site Structure Generation Prompt"
    description="Generate complete site structure (pages, blocks, navigation) from business brief"
    variables={[
      '[IGNY8_BUSINESS_BRIEF]',
      '[IGNY8_OBJECTIVES]',
      '[IGNY8_STYLE]',
      '[IGNY8_SITE_INFO]'
    ]}
  />
</div>
```

### 7.4 Site Management UI (Advanced Features)

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **Site List View** | `frontend/src/pages/Sites/List.tsx` | NEW | List all sites with filters |
| **Site Dashboard** | `frontend/src/pages/Sites/Dashboard.tsx` | NEW | Site overview with stats |
| **Site Content Manager** | `frontend/src/pages/Sites/Content.tsx` | NEW | Manage site content (posts/pages list) |
| **Post Editor** | `frontend/src/pages/Sites/PostEditor.tsx` | NEW | Full-featured post editor |
| **Page Manager** | `frontend/src/pages/Sites/Pages.tsx` | NEW | Advanced page management |
| **Site Settings** | `frontend/src/pages/Sites/Settings.tsx` | NEW | Advanced site settings + SEO |
| **Site Preview** | `frontend/src/pages/Sites/Preview.tsx` | NEW | Live site preview |

**Site Management Features** (Advanced):
- Site list with filters (type, status, integration)
- Site dashboard with statistics
- Content manager with search and filters
- Full-featured post/page editor
- Advanced page management (drag-drop reorder, bulk actions)
- SEO settings (meta tags, Open Graph, schema)
- Live site preview with iframe
- Site analytics integration

### 7.5 Layout & Template System

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **Layout Selector** | `frontend/src/components/sites/LayoutSelector.tsx` | NEW | Select layout |
| **Template Library** | `frontend/src/components/sites/TemplateLibrary.tsx` | NEW | Template library |
| **Layout Preview** | `frontend/src/components/sites/LayoutPreview.tsx` | NEW | Preview layouts |
| **Template Customizer** | `frontend/src/components/sites/TemplateCustomizer.tsx` | NEW | Customize templates |
| **Style Editor** | `frontend/src/components/sites/StyleEditor.tsx` | NEW | Edit styles |

**Layout Options** (7 total):
- Default Layout
- Minimal Layout
- Magazine Layout
- Ecommerce Layout
- Portfolio Layout
- Blog Layout
- Corporate Layout

**Template System**:
- Pre-built templates
- Custom templates
- Template customization
- Style presets
- Color schemes
- Typography options

### 7.6 CMS Styling System

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **CMS Theme System** | `frontend/src/styles/cms/` | NEW | Theme system |
| **Style Presets** | `frontend/src/styles/cms/presets.ts` | NEW | Style presets |
| **Color Schemes** | `frontend/src/styles/cms/colors.ts` | NEW | Color schemes |
| **Typography System** | `frontend/src/styles/cms/typography.ts` | NEW | Typography system |
| **Component Styles** | `frontend/src/styles/cms/components.ts` | NEW | Component styles |

**CMS Features**:
- Theme customization
- Color palette management
- Typography settings
- Component styling
- Responsive breakpoints
- Dark/light mode

### 7.7 Module Enhancements (Optional)

**Note**: Module Settings UI is already implemented in Phase 0. These are optional enhancements.

| Task | File | Dependencies | Implementation |
|------|------|--------------|----------------|
| **Module Dependencies Check** | `frontend/src/components/settings/ModuleDependencies.tsx` | NEW | Show module dependencies |
| **Module Usage Statistics** | `frontend/src/components/settings/ModuleStats.tsx` | NEW | Show module usage stats |
| **Module Configuration UI** | `frontend/src/components/settings/ModuleConfig.tsx` | NEW | Per-module configuration |

**Module Enhancement Features** (Optional):
- Module dependencies check (warnings when disabling dependent modules)
- Module usage statistics (show usage per module)
- Module-specific configuration UI (per-module settings)

### 7.8 Phase 7 Testing

**Test Cases**:
- ✅ All components render correctly
- ✅ Component library is complete
- ✅ Prompt management UI works
- ✅ Site management works end-to-end (advanced features)
- ✅ Layout system works
- ✅ Template system works
- ✅ CMS styling system works
- ✅ No duplicate components
- ✅ All components are accessible
- ✅ All components are responsive

---

## CROSS-PHASE INTEGRATION

### Service Dependencies

**Phase 5 Uses**:
- Phase 3: Shared components, file management, SiteBlueprint/PageBlueprint models
- Phase 1: ContentGenerationService (for bulk generation)
- Phase 0: CreditService (for credit checks)

**Phase 6 Uses**:
- Phase 5: PublisherService, SitesRendererAdapter, DeploymentService
- Phase 3: SiteBlueprint models
- Phase 1: ContentGenerationService, ContentSyncService
- Phase 0: CreditService

**Phase 7 Uses**:
- Phase 3: Shared component library (completes it)
- Phase 5: Sites Renderer (for preview)
- Phase 6: Site Management (enhances it)
- Phase 0: Module Settings backend (adds UI enhancements)

### Workflow Integration

**Complete Site Workflow**:
1. User creates site blueprint via Site Builder (Phase 3)
2. User generates all pages via bulk generation (Phase 5)
3. Content generated via Writer (Phase 1)
4. Site deployed to Sites Renderer (Phase 5)
5. Site published to multiple destinations (Phase 6)
6. Site managed via Site Management UI (Phase 6 & 7)
7. Prompts managed via Thinker UI (Phase 7)

**Content Publishing Workflow**:
1. Content generated in Writer (Phase 1)
2. Content optimized via Optimizer (Phase 4)
3. Content published to multiple destinations (Phase 6)
4. Publishing tracked in PublishingRecord (Phase 5 & 6)

---

## TESTING & VALIDATION

### Phase 5 Testing

**Sites Renderer Tests**:
- ✅ Sites renderer loads site definitions
- ✅ Blocks render correctly using shared components
- ✅ File access works (images, documents, media)
- ✅ Deployment works end-to-end
- ✅ Sites are accessible publicly
- ✅ Multiple layouts work correctly

**Bulk Generation Tests**:
- ✅ Bulk page generation works
- ✅ Progress tracking works
- ✅ Task creation works correctly
- ✅ Selected pages can be generated
- ✅ Force regenerate works

### Phase 6 Testing

**Integration Tests**:
- ✅ Site integrations work correctly
- ✅ Multi-destination publishing works
- ✅ WordPress sync works (when plugin connected)
- ✅ Two-way sync functions properly
- ✅ Adapter pattern works correctly

**Site Management Tests**:
- ✅ Site management UI works (core features)
- ✅ Publishing settings work
- ✅ Task integration works
- ✅ Content sync works

### Phase 7 Testing

**Component Library Tests**:
- ✅ All components render correctly
- ✅ Component library is complete
- ✅ No duplicate components
- ✅ All components are accessible
- ✅ All components are responsive

**UI Tests**:
- ✅ Prompt management UI works
- ✅ Site management works end-to-end (advanced features)
- ✅ Layout system works
- ✅ Template system works
- ✅ CMS styling system works

---

## IMPLEMENTATION CHECKLIST

### Phase 5: Sites Renderer & Bulk Generation

#### Backend Tasks
- [ ] Create PublisherService
- [ ] Create SitesRendererAdapter
- [ ] Create DeploymentService
- [ ] Create PublishingRecord model
- [ ] Create DeploymentRecord model
- [ ] Create Publisher ViewSet
- [ ] Add bulk_generate_pages() to PageGenerationService
- [ ] Add create_tasks_for_pages() to PageGenerationService
- [ ] Add generate_all_pages action to SiteBlueprintViewSet
- [ ] Add create_tasks action to SiteBlueprintViewSet
- [ ] Database migrations

#### Frontend Tasks
- [ ] Create Sites container in docker-compose
- [ ] Create sites renderer frontend
- [ ] Create site definition loader
- [ ] Create layout renderer
- [ ] Create template system
- [ ] Import shared components
- [ ] Integrate file access
- [ ] Add "Generate All Pages" button to Site Builder
- [ ] Add page selection UI
- [ ] Add progress tracking
- [ ] Add bulk generation API methods

### Phase 6: Site Integration & Multi-Destination Publishing

#### Backend Tasks
- [ ] Create SiteIntegration model
- [ ] Create IntegrationService
- [ ] Create SyncService
- [ ] Create ContentSyncService
- [ ] Create BaseAdapter
- [ ] Refactor WordPressAdapter
- [ ] Create SitesRendererAdapter (if not done in Phase 5)
- [ ] Create ShopifyAdapter (skeleton)
- [ ] Extend PublisherService for multi-destination
- [ ] Extend Site model (site_type, hosting_type)
- [ ] Create Integration ViewSet
- [ ] Database migrations

#### Frontend Tasks
- [ ] Update Integration Settings page
- [ ] Create Publishing Settings page
- [ ] Create Site Management Dashboard (core)
- [ ] Create Site Content Editor (core)
- [ ] Create Page Manager (core)
- [ ] Create Site Settings (core)
- [ ] Create PlatformSelector component
- [ ] Create IntegrationStatus component
- [ ] Create PublishingRules component
- [ ] Update Writer UI for Site Builder tasks

### Phase 7: UI Components & Prompt Management

#### Backend Tasks
- [ ] Add site_structure_generation to AIPrompt.PROMPT_TYPE_CHOICES
- [ ] Create migration for new prompt type

#### Frontend Tasks
- [ ] Complete component library (blocks, layouts, templates)
- [ ] Add site_structure_generation to PROMPT_TYPES
- [ ] Add "Site Builder" section to Prompts page
- [ ] Add prompt editor for site structure generation
- [ ] Create Site List View
- [ ] Create Site Dashboard (advanced)
- [ ] Create Site Content Manager (advanced)
- [ ] Create Post Editor (advanced)
- [ ] Create Page Manager (advanced)
- [ ] Create Site Settings (advanced + SEO)
- [ ] Create Site Preview
- [ ] Create Layout Selector
- [ ] Create Template Library
- [ ] Create Layout Preview
- [ ] Create Template Customizer
- [ ] Create Style Editor
- [ ] Create CMS Theme System
- [ ] Create Style Presets
- [ ] Create Color Schemes
- [ ] Create Typography System
- [ ] Create Component Styles
- [ ] Write component tests
- [ ] Write component documentation

---

## SUCCESS CRITERIA

### Phase 5 Success Criteria
- ✅ Sites renderer loads site definitions
- ✅ Blocks render correctly using shared components
- ✅ File access works
- ✅ Deployment works end-to-end
- ✅ Sites are accessible publicly
- ✅ Multiple layouts supported
- ✅ Bulk page generation works
- ✅ Progress tracking works

### Phase 6 Success Criteria
- ✅ Site integrations work correctly
- ✅ Multi-destination publishing works
- ✅ WordPress sync works
- ✅ Two-way sync functions properly
- ✅ Site management UI works (core features)
- ✅ Publishing settings work
- ✅ Task integration works

### Phase 7 Success Criteria
- ✅ All components render correctly
- ✅ Component library is complete
- ✅ Prompt management UI works
- ✅ Site management works end-to-end (advanced features)
- ✅ Layout system works
- ✅ Template system works
- ✅ CMS styling system works
- ✅ No duplicate components
- ✅ All components are accessible and responsive

---

## TIMELINE SUMMARY

| Phase | Duration | Key Deliverables |
|-------|----------|------------------|
| **Phase 5** | 2.5-3.5 weeks | Sites renderer, bulk generation |
| **Phase 6** | 2.5-3 weeks | Multi-destination publishing, integrations |
| **Phase 7** | 3.5-4.5 weeks | Component library, prompt UI, advanced site management |
| **Total** | 8.5-11 weeks | Complete Sites Renderer, Publishing, and UI system |

---

## RISK ASSESSMENT

| Risk | Level | Mitigation |
|------|-------|------------|
| **Component library incompatibility** | MEDIUM | Early integration testing in Phase 5 |
| **File management access issues** | LOW | Use Phase 3's proven file service |
| **WordPress adapter refactor breaking existing** | MEDIUM | Comprehensive backward compatibility testing |
| **Bulk generation overloads system** | MEDIUM | Rate limiting, queue management |
| **Multi-destination publishing complexity** | MEDIUM | Adapter pattern, comprehensive testing |
| **CMS styling system complexity** | LOW | Incremental implementation, component-based |

---

## RELATED PHASES

- **Phase 0**: Credit system, Module Settings (backend)
- **Phase 1**: Service layer (ContentGenerationService, etc.)
- **Phase 3**: Site Builder foundation, shared components, file management
- **Phase 4**: Linker & Optimizer (content optimization)

---

**END OF PHASES 5-7 & 9 CONSOLIDATED DOCUMENT**