cleanup
This commit is contained in:
alorig
@@ -1,120 +0,0 @@
|
||||
# Stage 3 Implementation Summary
|
||||
|
||||
## ✅ Completed Backend Features
|
||||
|
||||
### 1. Database Schema & Migrations
|
||||
- ✅ Added `entity_type`, `taxonomy`, `cluster_role` fields to Tasks model
|
||||
- ✅ Created migration `0013_stage3_add_task_metadata.py`
|
||||
- ✅ Updated backfill function in `0012_metadata_mapping_tables.py` to populate existing data
|
||||
|
||||
### 2. Pipeline Updates
|
||||
- ✅ **Ideas → Tasks**: Updated `ContentIdeasViewSet.bulk_queue_to_writer()` to inherit `entity_type`, `taxonomy`, `cluster_role` from Ideas
|
||||
- ✅ **PageBlueprint → Tasks**: Updated `PageGenerationService._create_task_from_page()` to set metadata from blueprint
|
||||
- ✅ **Tasks → Content**: Created `MetadataMappingService` to persist cluster/taxonomy mappings when Content is created
|
||||
|
||||
### 3. Validation Services
|
||||
- ✅ Created `ContentValidationService` with:
|
||||
- `validate_task()` - Validates task metadata
|
||||
- `validate_content()` - Validates content metadata
|
||||
- `validate_for_publish()` - Comprehensive pre-publish validation
|
||||
- `ensure_required_attributes()` - Checks required attributes per entity type
|
||||
|
||||
### 4. Linker & Optimizer Enhancements
|
||||
- ✅ **Linker**: Enhanced `CandidateEngine` to:
|
||||
- Prioritize content from same clusters (50 points)
|
||||
- Match by taxonomy (20 points)
|
||||
- Match by entity type (15 points)
|
||||
- Flag cluster/taxonomy matches in results
|
||||
|
||||
- ✅ **Optimizer**: Enhanced `ContentAnalyzer` to:
|
||||
- Calculate metadata completeness score (0-100)
|
||||
- Check cluster/taxonomy mappings
|
||||
- Include metadata score in overall optimization score (15% weight)
|
||||
|
||||
### 5. API Endpoints
|
||||
- ✅ `GET /api/v1/writer/content/{id}/validation/` - Get validation checklist
|
||||
- ✅ `POST /api/v1/writer/content/{id}/validate/` - Re-run validators
|
||||
- ✅ `GET /api/v1/site-builder/blueprints/{id}/progress/` - Cluster-level completion status
|
||||
|
||||
### 6. Management Commands
|
||||
- ✅ Created `audit_site_metadata` command:
|
||||
- Usage: `python manage.py audit_site_metadata --site {id}`
|
||||
- Shows metadata completeness per site
|
||||
- Includes detailed breakdown with `--detailed` flag
|
||||
|
||||
## ⚠️ Frontend Updates (Pending)
|
||||
|
||||
### Writer UI Enhancements
|
||||
- [ ] Add metadata columns to Content list (entity_type, cluster, taxonomy)
|
||||
- [ ] Add validation panel to Content editor showing:
|
||||
- Validation errors
|
||||
- Metadata completeness indicators
|
||||
- Publish button disabled until valid
|
||||
- [ ] Display cluster/taxonomy chips in Content cards
|
||||
- [ ] Add filters for entity_type and validation status
|
||||
|
||||
### Linker UI Enhancements
|
||||
- [ ] Group link suggestions by cluster role (hub → supporting, hub → attribute)
|
||||
- [ ] Show cluster match indicators
|
||||
- [ ] Display context snippets with cluster information
|
||||
|
||||
### Optimizer UI Enhancements
|
||||
- [ ] Add metadata scorecard to optimization dashboard
|
||||
- [ ] Show cluster coverage indicators
|
||||
- [ ] Display taxonomy alignment status
|
||||
- [ ] Add "next action" cards for missing metadata
|
||||
|
||||
## 📋 Next Steps
|
||||
|
||||
1. **Run Migrations**:
|
||||
```bash
|
||||
python manage.py migrate writer 0013_stage3_add_task_metadata
|
||||
python manage.py migrate writer 0012_metadata_mapping_tables # Re-run to backfill
|
||||
```
|
||||
|
||||
2. **Test Backend**:
|
||||
- Test Ideas → Tasks pipeline with metadata inheritance
|
||||
- Test Content validation endpoints
|
||||
- Test Linker/Optimizer with cluster mappings
|
||||
- Run audit command: `python manage.py audit_site_metadata --site 5`
|
||||
|
||||
3. **Frontend Implementation**:
|
||||
- Update Writer Content list to show metadata
|
||||
- Add validation panel to Content editor
|
||||
- Enhance Linker/Optimizer UIs with cluster information
|
||||
|
||||
## 🔧 Files Modified
|
||||
|
||||
### Backend
|
||||
- `backend/igny8_core/business/content/models.py` - Added metadata fields to Tasks
|
||||
- `backend/igny8_core/modules/writer/migrations/0013_stage3_add_task_metadata.py` - New migration
|
||||
- `backend/igny8_core/modules/writer/migrations/0012_metadata_mapping_tables.py` - Updated backfill
|
||||
- `backend/igny8_core/modules/planner/views.py` - Updated Ideas→Tasks pipeline
|
||||
- `backend/igny8_core/business/site_building/services/page_generation_service.py` - Updated PageBlueprint→Tasks
|
||||
- `backend/igny8_core/business/content/services/metadata_mapping_service.py` - New service
|
||||
- `backend/igny8_core/business/content/services/validation_service.py` - New service
|
||||
- `backend/igny8_core/business/linking/services/candidate_engine.py` - Enhanced with cluster matching
|
||||
- `backend/igny8_core/business/optimization/services/analyzer.py` - Enhanced with metadata scoring
|
||||
- `backend/igny8_core/modules/writer/views.py` - Added validation endpoints
|
||||
- `backend/igny8_core/modules/site_builder/views.py` - Added progress endpoint
|
||||
- `backend/igny8_core/modules/writer/management/commands/audit_site_metadata.py` - New command
|
||||
|
||||
## 🎯 Stage 3 Objectives Status
|
||||
|
||||
| Objective | Status |
|
||||
|-----------|--------|
|
||||
| Metadata backfill | ✅ Complete |
|
||||
| Ideas→Tasks pipeline | ✅ Complete |
|
||||
| Tasks→Content pipeline | ✅ Complete |
|
||||
| Validation services | ✅ Complete |
|
||||
| Linker enhancements | ✅ Complete |
|
||||
| Optimizer enhancements | ✅ Complete |
|
||||
| API endpoints | ✅ Complete |
|
||||
| Audit command | ✅ Complete |
|
||||
| Frontend Writer UI | ⚠️ Pending |
|
||||
| Frontend Linker UI | ⚠️ Pending |
|
||||
| Frontend Optimizer UI | ⚠️ Pending |
|
||||
|
||||
**Overall Stage 3 Backend: ~85% Complete**
|
||||
**Overall Stage 3 Frontend: ~0% Complete**
|
||||
|
||||
@@ -1,115 +0,0 @@
|
||||
# Stage 3 Test Results
|
||||
|
||||
## ✅ Migration Tests
|
||||
|
||||
### Migration Execution
|
||||
```bash
|
||||
✅ Migration 0012_metadata_mapping_tables: SUCCESS
|
||||
- Backfill complete:
|
||||
- Tasks entity_type updated: 0
|
||||
- Content entity_type updated: 0
|
||||
- Cluster mappings created: 10
|
||||
- Taxonomy mappings created: 0
|
||||
|
||||
✅ Migration 0013_stage3_add_task_metadata: SUCCESS
|
||||
- Added entity_type, taxonomy, cluster_role fields to Tasks
|
||||
- Added indexes for entity_type and cluster_role
|
||||
```
|
||||
|
||||
## ✅ Backend API Tests
|
||||
|
||||
### 1. Audit Command Test
|
||||
```bash
|
||||
$ python manage.py audit_site_metadata --site 5
|
||||
|
||||
✅ SUCCESS - Results:
|
||||
📋 Tasks Summary:
|
||||
Total Tasks: 11
|
||||
With Cluster: 11/11 (100%)
|
||||
With Entity Type: 11/11 (100%)
|
||||
With Taxonomy: 0/11 (0%)
|
||||
With Cluster Role: 11/11 (100%)
|
||||
|
||||
📄 Content Summary:
|
||||
Total Content: 10
|
||||
With Entity Type: 10/10 (100%)
|
||||
With Cluster Mapping: 10/10 (100%)
|
||||
With Taxonomy Mapping: 0/10 (0%)
|
||||
With Attributes: 0/10 (0%)
|
||||
|
||||
⚠️ Gaps:
|
||||
Tasks missing cluster: 0
|
||||
Tasks missing entity_type: 0
|
||||
Content missing cluster mapping: 0
|
||||
```
|
||||
|
||||
### 2. Validation Service Test
|
||||
```python
|
||||
✅ ContentValidationService.validate_content() - WORKING
|
||||
- Correctly identifies missing cluster mapping
|
||||
- Returns structured error: "Content must be mapped to at least one cluster"
|
||||
```
|
||||
|
||||
### 3. API Endpoints (Ready for Testing)
|
||||
- ✅ `GET /api/v1/writer/content/{id}/validation/` - Endpoint added
|
||||
- ✅ `POST /api/v1/writer/content/{id}/validate/` - Endpoint added
|
||||
- ✅ `GET /api/v1/site-builder/blueprints/{id}/progress/` - Endpoint added
|
||||
|
||||
## ✅ Frontend Browser Tests
|
||||
|
||||
### Pages Loaded Successfully
|
||||
1. ✅ **Dashboard** (`/`) - Loaded successfully
|
||||
2. ✅ **Writer Content** (`/writer/content`) - Loaded successfully
|
||||
- API call: `GET /api/v1/writer/content/?site_id=9&page=1&page_size=10&ordering=-generated_at` - 200 OK
|
||||
3. ✅ **Site Builder** (`/sites/builder`) - Loaded successfully
|
||||
4. ✅ **Blueprints** (`/sites/blueprints`) - Loaded successfully
|
||||
|
||||
### Console Status
|
||||
- ✅ No JavaScript errors
|
||||
- ✅ Vite connected successfully
|
||||
- ✅ All API calls returning 200 status
|
||||
|
||||
## 📊 Data Status
|
||||
|
||||
### Current State
|
||||
- **Tasks**: 11 total, all have clusters and entity_type
|
||||
- **Content**: 10 total, all have entity_type and cluster mappings
|
||||
- **Cluster Mappings**: 10 created successfully
|
||||
- **Taxonomy Mappings**: 0 (expected - no taxonomies assigned yet)
|
||||
|
||||
## 🎯 Stage 3 Backend Status: ✅ COMPLETE
|
||||
|
||||
All backend features are implemented and tested:
|
||||
- ✅ Database migrations applied
|
||||
- ✅ Metadata fields added to Tasks
|
||||
- ✅ Backfill completed (10 cluster mappings created)
|
||||
- ✅ Validation service working
|
||||
- ✅ API endpoints added
|
||||
- ✅ Audit command working
|
||||
- ✅ Linker/Optimizer enhancements complete
|
||||
|
||||
## ⚠️ Frontend Status: Pending
|
||||
|
||||
Frontend UI updates for Stage 3 are not yet implemented:
|
||||
- ⚠️ Writer Content list - metadata columns not added
|
||||
- ⚠️ Validation panel - not added to Content editor
|
||||
- ⚠️ Linker UI - cluster-based suggestions not displayed
|
||||
- ⚠️ Optimizer UI - metadata scorecards not displayed
|
||||
|
||||
## 🔄 Next Steps
|
||||
|
||||
1. **Test API Endpoints** (via browser/Postman):
|
||||
- `GET /api/v1/writer/content/{id}/validation/`
|
||||
- `POST /api/v1/writer/content/{id}/validate/`
|
||||
- `GET /api/v1/site-builder/blueprints/{id}/progress/`
|
||||
|
||||
2. **Create Test Blueprint** to test workflow wizard:
|
||||
- Navigate to `/sites/builder`
|
||||
- Create new blueprint
|
||||
- Test workflow wizard at `/sites/builder/workflow/{blueprintId}`
|
||||
|
||||
3. **Frontend Implementation** (when ready):
|
||||
- Add metadata columns to Content list
|
||||
- Add validation panel to Content editor
|
||||
- Enhance Linker/Optimizer UIs
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
# Planning & Phase Documentation
|
||||
|
||||
The Part 2 planning folder now uses four consolidated docs instead of many phase-specific files. Start here to understand where to look for strategy, workflows, history, and the active roadmap.
|
||||
|
||||
---
|
||||
|
||||
## Consolidated Docs
|
||||
|
||||
| Doc | Description |
|
||||
| --- | --- |
|
||||
| [`planning/01-strategy.md`](planning/01-strategy.md) | Platform context, architecture principles, module overview, security baseline. |
|
||||
| [`planning/02-workflows.md`](planning/02-workflows.md) | End-to-end workflows for Planner, Site Builder, Ideas/Writer, Publishing, and credit usage. |
|
||||
| [`planning/03-phase-reports.md`](planning/03-phase-reports.md) | Historical phase summaries, verification highlights, lessons learned. |
|
||||
| [`planning/04-roadmap.md`](planning/04-roadmap.md) | Current execution roadmap, stages, milestones, dependencies, risks. |
|
||||
|
||||
All former PHASE-*.md files, Igny8-part-2 plan, and implementation plans have been merged into these references (see git history if you need the raw originals).
|
||||
|
||||
---
|
||||
|
||||
## How to Use
|
||||
1. **Align on context** – read `01-strategy.md` to understand the architecture and goals.
|
||||
2. **Review workflows** – `02-workflows.md` explains how Planner → Site Builder → Writer → Publishing connect.
|
||||
3. **Learn from history** – `03-phase-reports.md` documents what’s been completed and verified.
|
||||
4. **Plan execution** – `04-roadmap.md` lists active stages, milestones, and cross-team dependencies.
|
||||
|
||||
---
|
||||
|
||||
## Status Tracking
|
||||
- Keep this README and the four bundle docs updated as milestones shift.
|
||||
- Any new planning artifact should extend one of the consolidated docs rather than creating a new standalone file.
|
||||
|
||||
---
|
||||
|
||||
**Last Updated:** 2025-11-19
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
# IGNY8 Phase 2 Strategy & Architecture
|
||||
|
||||
## Purpose
|
||||
Single reference for the “why” and “what” behind Phase 2, combining the original `ARCHITECTURE_CONTEXT.md` and the strategic sections of `IGNY8-HOLISTIC-ARCHITECTURE-PLAN.md`. Use this doc to align stakeholders before diving into workflows, phases, or roadmap specifics.
|
||||
|
||||
---
|
||||
|
||||
## Executive Summary
|
||||
- IGNY8 is a multi-tenant SaaS for SEO planning and AI content creation. Accounts own sites, sites contain sectors, and all planner/writer activity is scoped to that hierarchy.
|
||||
- The refreshed strategy focuses on a **cluster-first planning engine**, **state-aware site builder**, and **shared metadata across Planner, Writer, Linker, Optimizer, and WordPress sync**.
|
||||
- Platform foundations: Django 5.2 + DRF backend, React 19 frontend, PostgreSQL, Redis, Celery, Dockerized infra with Caddy reverse proxy.
|
||||
|
||||
### Guiding Principles
|
||||
1. **Multi-tenancy everywhere** – automatic account/site/sector scoping in models & viewsets.
|
||||
2. **Configuration-driven UX** – shared templates, centralized API client, environment-configurable AI prompts.
|
||||
3. **Unified AI engine** – all AI calls flow through `AIEngine` via Celery, with credit tracking and progress reporting.
|
||||
4. **Stage-gated workflows** – users move through guided wizards (Planner → Site Builder → Writer → Publish) with clear prerequisites.
|
||||
|
||||
---
|
||||
|
||||
## Architecture Overview
|
||||
### Layers
|
||||
| Layer | Responsibilities |
|
||||
| --- | --- |
|
||||
| **Client Apps** | Main SaaS app (`app.igny8`), marketing site, admin tooling. |
|
||||
| **Reverse Proxy** | Caddy terminates TLS and routes traffic. |
|
||||
| **Application Services** | React frontend (8021), Django backend (8011), Celery worker/beat. |
|
||||
| **Data & Storage** | PostgreSQL, Redis, `/data/app/sites-data` for site deployments. |
|
||||
| **External Integrations** | OpenAI/Runware for AI, WordPress for publishing, future Shopify. |
|
||||
|
||||
### Module Snapshot
|
||||
- **Planner**: Keywords, Clusters, Ideas, clustering AI.
|
||||
- **Writer**: Tasks, Content, Images, AI generation, WordPress publishing.
|
||||
- **Site Builder**: Blueprints, page scaffolding, deployment adapters.
|
||||
- **System/Integration**: Settings, API keys, sync adapters.
|
||||
- **Billing**: Credits, transactions, usage logs.
|
||||
|
||||
---
|
||||
|
||||
## Data Hierarchy & Access
|
||||
```
|
||||
Account → Site → Sector → (Keywords, Clusters, Ideas, Tasks, Content, Images)
|
||||
```
|
||||
- Roles (`developer > owner > admin > editor > viewer > system_bot`) determine automatic access.
|
||||
- Editors/Viewers require explicit `SiteUserAccess`.
|
||||
- Middleware injects `request.account`; viewsets enforce scoping.
|
||||
|
||||
---
|
||||
|
||||
## Key Workflows (High-Level)
|
||||
1. **Account Setup** – create account/site/sector, configure integrations, assign roles.
|
||||
2. **Planner** – import keywords, auto-cluster, attach clusters to site builder.
|
||||
3. **Writer** – turn ideas into tasks, run AI content generation, manage reviews.
|
||||
4. **Publishing** – deploy to IGNY8 renderer or sync to WordPress (future Shopify).
|
||||
|
||||
Detailed mechanics live in `02-workflows.md`.
|
||||
|
||||
---
|
||||
|
||||
## AI Framework Snapshot
|
||||
- Entry point: `run_ai_task(function_name, payload, account_id)`.
|
||||
- Six-phase pipeline (INIT → PREP → AI_CALL → PARSE → SAVE → DONE).
|
||||
- Functions currently: `auto_cluster`, `generate_ideas`, `generate_content`, `generate_image_prompts`, `generate_images`.
|
||||
- Credits deducted post-success; each function declares cost.
|
||||
|
||||
---
|
||||
|
||||
## Security & Ops
|
||||
- JWT auth with 15 min access / 7 day refresh, stored client-side.
|
||||
- Role-based authorization on every request.
|
||||
- Dockerized infra split between `igny8-infra` (Postgres, Redis, Caddy, etc.) and `igny8-app` (backend/frontend/worker).
|
||||
- External services configured per account via Integration Settings.
|
||||
|
||||
---
|
||||
|
||||
## Current Strategic Priorities
|
||||
1. **Cluster-first planning** – enforce keyword clusters before site planning.
|
||||
2. **Taxonomy-aware site builder** – blog/ecommerce/company flows with state-aware wizard.
|
||||
3. **Unified content metadata** – propagate cluster/taxonomy data through writer, linker, optimizer, and publishing.
|
||||
4. **WordPress parity** – treat synced WP sites as first-class citizens without duplicating site data.
|
||||
|
||||
---
|
||||
|
||||
## References
|
||||
- Detailed workflows: `02-workflows.md`
|
||||
- Phase reports & learnings: `03-phase-reports.md`
|
||||
- Execution roadmap: `04-roadmap.md`
|
||||
|
||||
|
||||
@@ -1,127 +0,0 @@
|
||||
# IGNY8 Core Workflows & Systems
|
||||
|
||||
Combines the previous `CONTENT-WORKFLOW-DIAGRAM.md`, sample credit usage notes, and scattered workflow descriptions into a single reference.
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
1. Planner Workflows
|
||||
2. Site Builder (State-Aware Wizard)
|
||||
3. Ideas & Writer Pipeline
|
||||
4. Publishing & Sync
|
||||
5. Credit & Usage Examples
|
||||
|
||||
---
|
||||
|
||||
## 1. Planner Workflows
|
||||
|
||||
### Keyword Intake & Management
|
||||
1. Import keywords via CSV/manual → validate intent, volume, difficulty.
|
||||
2. Keywords inherit account/site/sector context; duplicates prevented via `seed_keyword` + site/sector constraint.
|
||||
3. Filtering/searching available by status, intent, sector, cluster assignment.
|
||||
|
||||
### Auto Clustering
|
||||
```
|
||||
Keyword Selection → POST /planner/keywords/auto-cluster →
|
||||
run_ai_task(auto_cluster) → AI groups keywords →
|
||||
Clusters created + keywords linked → Credits deducted
|
||||
```
|
||||
- Clusters now tagged with `context_type` (`topic`, `attribute`, `service_line`).
|
||||
- Outputs recommendation metadata used by site builder taxonomy step.
|
||||
|
||||
### Cluster Management
|
||||
- Views show per-cluster metrics (keyword count, volume, gap warnings).
|
||||
- Users can assign clusters to site blueprints; gating enforced before sitemap generation.
|
||||
|
||||
---
|
||||
|
||||
## 2. Site Builder Workflow (Self-Guided Wizard)
|
||||
|
||||
| Step | Requirements | Output |
|
||||
| --- | --- | --- |
|
||||
| 1. Business Details | Site + sector selected, site type (blog/ecom/company), hosting target (IGNY8 vs WP). | Draft `SiteBlueprint`, workflow state `business_details`. |
|
||||
| 2. Cluster Assignment | ≥1 planner cluster linked; show coverage metrics. | `SiteBlueprintCluster` rows, state `clusters_ready`. |
|
||||
| 3. Taxonomy Builder | Define/import categories, tags, product attributes, service groups; map to clusters. | `SiteBlueprintTaxonomy` records, state `taxonomies_ready`. |
|
||||
| 4. AI Sitemap | Allowed only when clusters + taxonomies ready; AI generates pages w/ entity types + cluster refs. | `PageBlueprint` records, coverage matrix, state `sitemap_ready`. |
|
||||
| 5. Coverage Validation | Confirm each cluster has hub/supporting pages; unresolved items block progress. | Approval flag, state `ideas_ready`. |
|
||||
| 6. Ideas Hand-off | Selected pages pushed to Planner Ideas with optional guidance prompt. | Idea queue seeded, state `ideas_in_progress`. |
|
||||
|
||||
Frontend enforcement:
|
||||
- Zustand `builderWorkflowStore` tracks step state via `/site-builder/workflow/{id}`.
|
||||
- Next buttons disabled until backend returns `step_status = complete`.
|
||||
- Inline tooltips explain missing prerequisites, with links back to Planner.
|
||||
|
||||
---
|
||||
|
||||
## 3. Ideas & Writer Pipeline
|
||||
|
||||
### Ideas Creation
|
||||
1. Wizard hand-off calls `POST /planner/content-ideas/bulk_from_blueprint`.
|
||||
2. Each idea stores `cluster_id`, `taxonomy_id`, `site_entity_type`, `cluster_role`.
|
||||
3. Ideas appear in Planner UI with badges showing target page type (blog post, product page, service page, taxonomy hub).
|
||||
|
||||
### Task Generation
|
||||
1. `PageGenerationService.generate_all_pages` turns ideas/pages into Writer tasks.
|
||||
2. Tasks carry metadata: `entity_type`, `taxonomy_id`, `cluster_role`, `product_data` (JSON for specs), keywords.
|
||||
|
||||
### AI Content Generation
|
||||
```
|
||||
Task Selection → POST /writer/tasks/generate →
|
||||
run_ai_task(generate_content) → AI produces html/json_blocks →
|
||||
Content saved + linked to tasks → Linker/Optimizer receive metadata
|
||||
```
|
||||
- Content also mapped to clusters/taxonomies via `ContentClusterMap` etc.
|
||||
- Images workflow attaches prompts, usage context (featured, gallery, variant).
|
||||
|
||||
### State Awareness
|
||||
- Writer dashboards show per-site progress bars (e.g., “Cluster Alpha: 2/5 hubs published”).
|
||||
- Editors cannot mark content ready unless required taxonomy/attribute data is filled.
|
||||
|
||||
---
|
||||
|
||||
## 4. Publishing & Sync
|
||||
|
||||
### IGNY8 Hosting
|
||||
1. Deploy action triggers `SitesRendererAdapter`.
|
||||
2. Adapter merges published `Content.json_blocks` into page definitions, writes to `/data/app/sites-data/clients/{site_id}/v{version}`.
|
||||
3. Renderer serves `https://sites.igny8.com/{siteSlug}`; cluster/taxonomy metadata included for internal linking.
|
||||
|
||||
### WordPress Sync
|
||||
1. Integration settings tested via `WordPressAdapter.test_connection`.
|
||||
2. Sync job (`ContentSyncService`) fetches WP taxonomies/posts/products, maps them to IGNY8 schemas via TaxonomyService.
|
||||
3. Publishing back to WP reuses same metadata: categories/tags/attributes auto-created if missing, pages matched by external IDs.
|
||||
4. Workflow enforces cluster assignment for imported content before allowing optimization tasks.
|
||||
|
||||
---
|
||||
|
||||
## 5. Credit & Usage Examples
|
||||
|
||||
| Operation | Trigger | Credit Cost | Notes |
|
||||
| --- | --- | --- | --- |
|
||||
| Auto Cluster | Planner keywords | 1 credit / 30 keywords | Minimum 1 credit per request. |
|
||||
| Idea Generation | Cluster selection | 1 credit / idea | Charged when ideas created. |
|
||||
| Content Generation | Writer tasks | 3 credits / content | Includes HTML + structured blocks. |
|
||||
| Image Generation | Image tasks | 1 credit / image | Prompt extraction included in content gen. |
|
||||
| Re-optimization | Optimizer rerun | 1 credit / rerun | Optional step for existing content. |
|
||||
|
||||
Credits deducted post-success via `CreditService`. Usage logs available under Billing > Usage.
|
||||
|
||||
---
|
||||
|
||||
## Credit-Only Operating Principles
|
||||
- Subscription plans only define credit refills + support tier; every feature stays unlocked.
|
||||
- No per-plan limits (keywords, clusters, tasks, images, sites, users, etc.); credits are the sole limiter.
|
||||
- Actions check credit balance before running; insufficient credits show a blocking warning with CTA to top up.
|
||||
- Frontend should always show remaining credits + estimated cost before execution.
|
||||
- Credits must be purchasable on-demand, with logs + notifications when balances are low.
|
||||
|
||||
These principles come from the former “sample usage limits & credit system” note and govern all future modules.
|
||||
|
||||
---
|
||||
|
||||
## Cross-References
|
||||
- Strategy & architecture context: `01-strategy.md`
|
||||
- Phase-specific learnings & QA logs: `03-phase-reports.md`
|
||||
- Execution roadmap & milestones: `04-roadmap.md`
|
||||
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
# Phase & Verification Reports (Consolidated)
|
||||
|
||||
This document replaces the individual PHASE-*.md files and verification reports. Use it to review historical execution, QA findings, and lessons learned.
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
1. Phase Timeline Overview
|
||||
2. Phase Details
|
||||
- Phases 0–4: Foundation to Linker/Optimizer
|
||||
- Phases 5–7–9: Sites Renderer & UI Integration
|
||||
- Phase 8: Universal Content Types
|
||||
3. Verification & Migration Reports
|
||||
4. Key Lessons & Follow-Ups
|
||||
|
||||
---
|
||||
|
||||
## 1. Phase Timeline Overview
|
||||
|
||||
| Phase | Focus | Status | Highlights |
|
||||
| --- | --- | --- | --- |
|
||||
| 0 | Environment & infra readiness | ✅ Complete | Docker stacks, CI hooks, base monitoring. |
|
||||
| 1 | Core planner foundations | ✅ Complete | Keywords import, clustering MVP, credit accounting. |
|
||||
| 2 | Writer baseline | ✅ Complete | Task pipeline, AI content generation, WordPress adapter stub. |
|
||||
| 3 | Automation & Thinker modules | ✅ Complete | Prompt registry, author profiles, AI config UI. |
|
||||
| 4 | Linker & Optimizer foundations | ✅ Complete | Internal linking prototype, optimization scoring. |
|
||||
| 5 | Site builder migration + renderer sync | ✅ Complete | Blueprint models, renderer integration, deployment flow. |
|
||||
| 6 | UI polish & dashboard alignment | ✅ Complete | Unified design system, navigation updates. |
|
||||
| 7 | Sites preview & publisher UX | ✅ Complete | Blueprint preview, publish states, progress indicators. |
|
||||
| 8 | Universal Content Types (UCT) | ✅ Complete | Entity types, structured blocks, taxonomy groundwork. |
|
||||
| 9 | Final renderer alignment & QA | ✅ Complete | Deployment validation, edge-case fixing. |
|
||||
|
||||
---
|
||||
|
||||
## 2. Phase Details
|
||||
|
||||
### Phases 0–4: Foundation to Linker/Optimizer
|
||||
- **Infra Setup:** Split `igny8-infra` vs `igny8-app`, network hardening, secrets management.
|
||||
- **Planner Enhancements:** CSV import, dedupe logic, clustering UI, integration with billing.
|
||||
- **Writer MVP:** Task creation from ideas, Celery-driven AI content, HTML editor baseline.
|
||||
- **AI Framework:** `AIEngine`, function registry, standardized progress reporting.
|
||||
- **Linker & Optimizer:** Early scoring model, automatic anchor suggestion pipeline, storage for link graphs.
|
||||
|
||||
### Phases 5–7–9: Sites Renderer & UI Integration
|
||||
- **Site Builder Migration:** Blueprint CRUD, page generation, deployment service writing to `/sites-data`.
|
||||
- **Renderer Alignment:** Public site routes, navigation auto-generation, content fallback behavior.
|
||||
- **UI Alignment:** Builder wizard moved into main frontend, state managed via new stores, progress modals.
|
||||
- **Publishing Workflow:** Deploy button gating, deployment logs, error surfacing.
|
||||
|
||||
### Phase 8: Universal Content Types
|
||||
- Introduced `entity_type`, `json_blocks`, `structure_data` on `Content`.
|
||||
- Added mapping tables for clusters/taxonomies (foundation for current architecture).
|
||||
- Updated Writer UI to show entity context; prepared for ecommerce/service content.
|
||||
|
||||
---
|
||||
|
||||
## 3. Verification & Migration Reports
|
||||
|
||||
### Implementation Verification (condensed from `PHASE-IMPLEMENTATION-VERIFICATION-REPORT.md`)
|
||||
- **Database**: Ensured migrations applied for planner, writer, site builder, UCT tables.
|
||||
- **Async Stack**: Verified Redis/Celery worker/beat running; failover mode documented.
|
||||
- **APIs**: Regression-tested planner/writer endpoints, new blueprint actions, publisher endpoints.
|
||||
- **Front-End**: Smoke tests on navigation, wizard steps, planner → writer transitions.
|
||||
|
||||
### Phase 5 Migration Reports
|
||||
- Confirmed blueprint tables, metadata seeds, and renderer outputs after migration.
|
||||
- Validated WordPress adapter still reachable; flagged missing taxonomy sync (addressed in new plan).
|
||||
|
||||
### Final Verification
|
||||
- Deployment smoke test across multiple site types.
|
||||
- Cross-checked credit deductions vs usage logs.
|
||||
- QA sign-off captured with issue follow-ups (see next section).
|
||||
|
||||
---
|
||||
|
||||
## 4. Key Lessons & Follow-Ups
|
||||
1. **State Awareness Needed** – Users struggled with knowing “what’s next”; resolved via new wizard gating plan.
|
||||
2. **Taxonomy Gaps** – Ecommerce/service taxonomies were ad-hoc; led to current blueprint taxonomy initiative.
|
||||
3. **WordPress Sync Depth** – Publishing worked but taxonomy/product sync missing; prioritized in new roadmap.
|
||||
4. **Monitoring** – Need better visibility into AI task queues; future work: add metrics dashboards tied to Celery and credits.
|
||||
|
||||
Outstanding actions now captured in `04-roadmap.md`.
|
||||
|
||||
---
|
||||
|
||||
## References
|
||||
- Strategy context: `01-strategy.md`
|
||||
- Operational workflows: `02-workflows.md`
|
||||
- Execution roadmap & milestones: `04-roadmap.md`
|
||||
|
||||
|
||||
@@ -1,184 +0,0 @@
|
||||
# IGNY8 Phase 2 Roadmap & Implementation Plan
|
||||
|
||||
Consolidates `Igny8-part-2-plan.md` and `IGNY8-IMPLEMENTATION-PLAN.md` into a single execution roadmap.
|
||||
|
||||
---
|
||||
|
||||
## 1. Roadmap Overview
|
||||
|
||||
### Strategic Themes
|
||||
1. **Planner Modernization** – richer clustering, taxonomy seeding, keyword governance.
|
||||
2. **Site Builder Evolution** – guided wizard, taxonomy-aware sitemap generation, blueprint ↔ planner sync.
|
||||
3. **Writer & Optimization Depth** – metadata propagation, product/service support, auto-linking improvements.
|
||||
4. **Publishing & Sync** – IGNY8 deployments + full WordPress parity (taxonomies, products, attributes).
|
||||
|
||||
### Stage Rollout
|
||||
| Stage | Focus | Target Outcome |
|
||||
| --- | --- | --- |
|
||||
| Stage 1 | Data & services foundation | New schema, clustering upgrades, workflow state APIs. |
|
||||
| Stage 2 | Planner + Wizard UX | State-aware wizard, taxonomy builder, planner UI refresh. |
|
||||
| Stage 3 | Writer / Linker / Optimizer | Metadata-aware tasks/content, improved linking & scoring. |
|
||||
| Stage 4 | Publishing & Sync | WordPress taxonomy sync, deployment polish, QA. |
|
||||
|
||||
---
|
||||
|
||||
## 2. Detailed Workstream Breakdown
|
||||
|
||||
### Workstream A – Data & Services
|
||||
- Apply migrations for blueprint clusters/taxonomies, writer mapping tables.
|
||||
- Implement `WorkflowStateService`, validation endpoints, TaxonomyService.
|
||||
- Upgrade clustering prompt/service for multi-dimensional outputs.
|
||||
- Update API serializers to expose entity metadata.
|
||||
|
||||
### Workstream B – Planner & Wizard UX
|
||||
- New planner views for clusters/taxonomies with matrix visualization.
|
||||
- Wizard steps (business, clusters, taxonomy, sitemap, validation, hand-off) with gating logic.
|
||||
- Toasts/tooltips/inline helpers to keep users oriented.
|
||||
- Resume capability (persisted step state).
|
||||
|
||||
### Workstream C – Writer, Linker, Optimizer
|
||||
- Extend ideas/tasks/content editors with cluster/taxonomy context panels.
|
||||
- Enforce validation (no publish without assigned taxonomy/attributes).
|
||||
- Linker suggestions grouped by cluster role; optimizer scoring for coverage.
|
||||
- Progress dashboards per site/cluster.
|
||||
|
||||
### Workstream D – Publishing & Sync
|
||||
- Finish WordPress taxonomy + product attribute sync (bi-directional).
|
||||
- Update deployment adapters to honor new metadata; ensure renderer reads cluster/taxonomy info.
|
||||
- Provide sync dashboards with health indicators, last sync timestamps.
|
||||
- Final regression + staging sign-off.
|
||||
|
||||
---
|
||||
|
||||
## 3. Milestones & Deliverables
|
||||
|
||||
| Milestone | Key Deliverables | Dependencies |
|
||||
| --- | --- | --- |
|
||||
| M1 – Schema Ready | Migrations merged, services deployed, API docs updated. | None. |
|
||||
| M2 – Guided Planner & Wizard | New UI flows live behind feature flag, analytics instrumented. | M1. |
|
||||
| M3 – Metadata-Driven Writer | Writer/linker/optimizer using new relations, validation in place. | M2. |
|
||||
| M4 – Publish & Sync Alpha | WordPress sync parity, deployment QA, release notes. | M3. |
|
||||
|
||||
Each milestone includes QA checklist, documentation update (master-docs + in-app help), and telemetry validation.
|
||||
|
||||
---
|
||||
|
||||
## 4. Dependencies & Risks
|
||||
- **Redis/Celery availability** – AI flows block if infra not running; ensure monitoring.
|
||||
- **Migration coordination** – new tables touched by multiple services; schedule maintenance window.
|
||||
- **WordPress API variance** – taxonomy/product endpoints vary by site; need robust error handling + manual override UI.
|
||||
- **User learning curve** – wizard adds structure; include onboarding tips and inline docs.
|
||||
|
||||
Mitigations described in `02-workflows.md` (UX guardrails) and `03-phase-reports.md` (lessons learned).
|
||||
|
||||
---
|
||||
|
||||
## 5. Communication & Tracking
|
||||
- Maintain status in `part2-dev/README.md` with links to this roadmap.
|
||||
- Sprint boards map tasks back to stage/milestone.
|
||||
- Release notes reference doc IDs here for posterity.
|
||||
|
||||
---
|
||||
|
||||
## References
|
||||
- Strategy context: `01-strategy.md`
|
||||
- Detailed workflows: `02-workflows.md`
|
||||
- Historical reports: `03-phase-reports.md`
|
||||
|
||||
---
|
||||
|
||||
## 6. Stage Implementation Details
|
||||
|
||||
### Stage 1 – Data & Services Foundation
|
||||
**Goal:** Ship all schema + backend building blocks so later stages can focus on UX.
|
||||
|
||||
**Backend**
|
||||
- Migrations for `SiteBlueprintCluster`, `SiteBlueprintTaxonomy`, `WorkflowState`, writer mapping tables.
|
||||
- `WorkflowStateService` with REST endpoints for fetching/updating step status.
|
||||
- `TaxonomyService` (CRUD/import/export) and `ClusteringService` prompt upgrade for multi-dimensional clusters.
|
||||
- API validation hooks (`validate_clusters_attached`, `validate_taxonomies_ready`, etc.) consumed by wizard gating.
|
||||
- Serializer updates exposing entity metadata to frontend.
|
||||
|
||||
**Frontend**
|
||||
- Minimal work (feature flags + API clients) to prepare for new endpoints; no user-facing change yet.
|
||||
|
||||
**Testing/Acceptance**
|
||||
- Migration dry run, rollback verified.
|
||||
- Unit/integration tests for services and validators.
|
||||
- API documentation updated; Postman suite green.
|
||||
|
||||
### Stage 2 – Planner + Wizard UX
|
||||
**Goal:** Deliver the guided, state-aware planning experience.
|
||||
|
||||
**Backend**
|
||||
- Ensure planner endpoints return cluster metrics, taxonomy suggestions, validation errors.
|
||||
- Audit logging for workflow transitions.
|
||||
|
||||
**Frontend**
|
||||
- Implement `builderWorkflowStore` (Zustand) with resume capability, blocking logic, telemetry.
|
||||
- Build wizard steps:
|
||||
1. Business details + hosting detection.
|
||||
2. Cluster assignment (coverage metrics, filters).
|
||||
3. Taxonomy builder (create/import/match clusters).
|
||||
4. AI sitemap review with checklist + edits.
|
||||
5. Coverage validation summary.
|
||||
6. Ideas hand-off with secondary prompt.
|
||||
- Update planner cluster/taxonomy management screens (matrix view, inline warnings).
|
||||
|
||||
**UX Guardrails**
|
||||
- Progress indicator with completion badges.
|
||||
- Disabled buttons explain “what’s missing”.
|
||||
- CTAs back to Planner when prerequisites unmet.
|
||||
|
||||
**Testing/Acceptance**
|
||||
- Manual script for full wizard flow (new IGNY8 site + WP-linked site).
|
||||
- Cypress/e2e coverage for gating + resume behavior.
|
||||
- Telemetry events for step completion firing.
|
||||
|
||||
### Stage 3 – Writer / Linker / Optimizer Enhancements
|
||||
**Goal:** Propagate metadata end-to-end and enforce validation.
|
||||
|
||||
**Backend**
|
||||
- Ensure ideas/tasks/content writer pipeline populates `entity_type`, `taxonomy_id`, `cluster_role`, `product_data`.
|
||||
- Linker/optimizer services consume mapping tables and expose coverage metrics via APIs.
|
||||
- Progress dashboard endpoints (per site/cluster) for frontend widgets.
|
||||
|
||||
**Frontend**
|
||||
- Planner Ideas + Writer Tasks lists show entity/taxonomy chips and warnings.
|
||||
- Writer editor sidebar summarizing target cluster, taxonomy, attribute requirements; validation prompts before publish.
|
||||
- Linker UI grouped by cluster role; Optimizer dashboards show dimension scorecards and “next actions”.
|
||||
- Sites module progress bars summarizing blueprint completion.
|
||||
|
||||
**Testing/Acceptance**
|
||||
- Regression on task/content creation flows.
|
||||
- QA verifies publish blocked when metadata missing.
|
||||
- Performance profiling on linker/optimizer queries with new joins.
|
||||
|
||||
### Stage 4 – Publishing & Sync Integration
|
||||
**Goal:** Achieve parity between IGNY8-hosted and WordPress-hosted sites.
|
||||
|
||||
**Backend**
|
||||
- Complete WordPress taxonomy/product attribute import/export in `ContentSyncService`.
|
||||
- Enhance `SitesRendererAdapter` to include cluster/taxonomy metadata for navigation + internal linking.
|
||||
- Sync health endpoints (last sync, mismatched taxonomies, errors) and deployment logs/rollback hooks.
|
||||
|
||||
**Frontend**
|
||||
- Sync dashboard showing taxonomy parity, cluster coverage, last sync status, manual retry/reconcile actions.
|
||||
- Deployment panel summarizing readiness (clusters covered, content publish state) before enabling deploy.
|
||||
- Notifications/toasts for sync success/failure and deployments.
|
||||
|
||||
**Testing/Acceptance**
|
||||
- End-to-end tests: IGNY8 deployment, WP publish for posts/products/services (blog/ecom/company templates).
|
||||
- Fallback behavior validated (auto-creating missing taxonomies).
|
||||
- Final QA checklist signed off; release notes + training updates distributed.
|
||||
|
||||
---
|
||||
|
||||
## 7. Stage Exit Criteria
|
||||
|
||||
| Stage | Exit Criteria |
|
||||
| --- | --- |
|
||||
| 1 | Migrations live, services stable, existing Planner/Writer flows unaffected, docs updated. |
|
||||
| 2 | Wizard fully usable with telemetry + QA sign-off; planner UIs reflect new taxonomy data. |
|
||||
| 3 | Writer/linker/optimizer using metadata, publishing blocked without required info, dashboards live. |
|
||||
| 4 | WordPress parity achieved, deployments verified, sync dashboards green, release announced. |
|
||||
@@ -1,46 +0,0 @@
|
||||
# Planning Docs Consolidation Plan
|
||||
|
||||
## 1. Inventory & Tags
|
||||
|
||||
| File | Scope | Notes |
|
||||
| --- | --- | --- |
|
||||
| `planning/ARCHITECTURE_CONTEXT.md` | Contextual overview of Part 2 goals, stakeholders, constraints. | High-level reference. |
|
||||
| `planning/CONTENT-WORKFLOW-DIAGRAM.md` | Detailed content lifecycle diagrams + descriptions. | Visual/text workflow. |
|
||||
| `planning/sample-usage-limits-credit-system` | Legacy notes on credit usage examples. | Likely merge into workflows appendix. |
|
||||
| `IGNY8-HOLISTIC-ARCHITECTURE-PLAN.md` | Comprehensive architecture narrative (cross-domain). | Overlaps with strategy sections. |
|
||||
| `IGNY8-IMPLEMENTATION-PLAN.md` | Detailed step-by-step implementation roadmap. | Overlaps with roadmap bundle. |
|
||||
| `Igny8-part-2-plan.md` | Program-level planning doc with milestones. | Should anchor roadmap bundle. |
|
||||
| `PHASE-0-4-FOUNDATION-TO-LINKER-OPTIMIZER.md` | Phase-specific execution report for early phases. | Belongs in phase reports bundle. |
|
||||
| `PHASE-5-7-9-SITES-RENDERER-INTEGRATION-UI.md` | Later phase report (sites renderer, UI). | Phase reports bundle. |
|
||||
| `PHASE-8-UNIVERSAL-CONTENT-TYPES.md` | Focused phase doc on UCT. | Phase reports bundle. |
|
||||
| `PHASE-IMPLEMENTATION-VERIFICATION-REPORT.md` | Consolidated verification results. | Phase reports bundle. |
|
||||
| `PHASE-5-MIGRATION-VERIFICATION-REPORT.md` | Specific verification log. | Phase reports bundle (appendix). |
|
||||
| `PHASE-5-MIGRATION-FINAL-VERIFICATION.md` | Final pass notes. | Combine with verification. |
|
||||
| `README.md` | Folder guidance. | Needs update after consolidation. |
|
||||
|
||||
## 2. Target Bundles
|
||||
|
||||
| Bundle | New File | Contents |
|
||||
| --- | --- | --- |
|
||||
| Strategy & Architecture | `planning/01-strategy.md` | Merge `ARCHITECTURE_CONTEXT.md` + relevant sections from `IGNY8-HOLISTIC-ARCHITECTURE-PLAN.md`. |
|
||||
| Workflows & Systems | `planning/02-workflows.md` | Combine `CONTENT-WORKFLOW-DIAGRAM.md`, sample credit usage appendix, excerpts describing planner/writer/site builder alignment (pull from holistic plan where needed). |
|
||||
| Phase & Verification Reports | `planning/03-phase-reports.md` | Consolidate all PHASE* docs + implementation verification into chronological sections with TOC anchors. |
|
||||
| Roadmap & Implementation | `planning/04-roadmap.md` | Merge `Igny8-part-2-plan.md` + `IGNY8-IMPLEMENTATION-PLAN.md`, highlight milestones/stage gates. |
|
||||
|
||||
## 3. Merge & Cross-Link Plan
|
||||
1. Create the four new bundle files with clear TOCs.
|
||||
2. For each source doc, move content into appropriate section, preserving headings.
|
||||
3. Add cross-links between bundles (e.g., roadmap references strategy section anchors).
|
||||
4. Update `README.md` to describe new structure and point to bundle docs.
|
||||
|
||||
## 4. Cleanup Tasks
|
||||
- Archive or delete superseded source files once content is moved (keep git history).
|
||||
- Update any references in other docs (`master-docs`, repo README, etc.) to point to the new bundle filenames.
|
||||
- Verify diagrams/images still referenced correctly (adjust paths if needed).
|
||||
|
||||
## Next Steps
|
||||
1. Approve bundle structure (or adjust naming).
|
||||
2. Execute merges in order: strategy → workflows → phase reports → roadmap.
|
||||
3. Run lint/format checks on updated markdown.
|
||||
|
||||
|
||||
@@ -1,84 +0,0 @@
|
||||
# Site Deployment Guide
|
||||
|
||||
## How Site Deployment Works
|
||||
|
||||
### Overview
|
||||
When you deploy a site blueprint, the system:
|
||||
1. Builds a site definition (merging Content from Writer into PageBlueprint blocks)
|
||||
2. Writes it to the filesystem at `/data/app/sites-data/clients/{site_id}/v{version}/`
|
||||
3. The Sites Renderer reads from this filesystem to serve the public site
|
||||
|
||||
### Deployment Process
|
||||
|
||||
#### Step 1: Prepare Your Site
|
||||
1. **Generate Structure**: Create site blueprint with pages (has placeholder blocks)
|
||||
2. **Generate Content**: Pages → Tasks → Content (Writer generates real content)
|
||||
3. **Publish Content**: In Content Manager, set Content status to `'publish'` for each page
|
||||
4. **Publish Pages**: In Page Manager, set Page status to `'published'` (for navigation)
|
||||
|
||||
#### Step 2: Deploy the Blueprint
|
||||
**API Endpoint**: `POST /api/v1/publisher/deploy/{blueprint_id}/`
|
||||
|
||||
**What Happens**:
|
||||
- `SitesRendererAdapter.deploy()` is called
|
||||
- For each page, it finds the associated Writer Task
|
||||
- If Content exists and is published, it uses `Content.json_blocks` instead of blueprint placeholders
|
||||
- Builds complete site definition with all pages
|
||||
- Writes to filesystem: `/data/app/sites-data/clients/{site_id}/v{version}/site.json`
|
||||
- Creates deployment record
|
||||
|
||||
#### Step 3: Access Your Site
|
||||
**Public URL**: `https://sites.igny8.com/{siteSlug}`
|
||||
|
||||
**How It Works**:
|
||||
- Sites Renderer loads site definition from filesystem (or API fallback)
|
||||
- Shows navigation menu with all published pages
|
||||
- Home route (`/siteSlug`) shows only home page content
|
||||
- Page routes (`/siteSlug/pageSlug`) show specific page content
|
||||
|
||||
### Navigation Menu
|
||||
|
||||
The navigation menu automatically includes:
|
||||
- **Home** link (always shown)
|
||||
- All pages with status `'published'` or `'ready'` (excluding home)
|
||||
- Pages are sorted by their `order` field
|
||||
|
||||
### Page Routing
|
||||
|
||||
- **Homepage**: `https://sites.igny8.com/{siteSlug}` → Shows home page only
|
||||
- **Individual Pages**: `https://sites.igny8.com/{siteSlug}/{pageSlug}` → Shows that specific page
|
||||
- Example: `https://sites.igny8.com/auto-g8/products`
|
||||
- Example: `https://sites.igny8.com/auto-g8/blog`
|
||||
|
||||
### Content Merging
|
||||
|
||||
When deploying:
|
||||
- **If Content is published**: Uses `Content.json_blocks` (actual written content)
|
||||
- **If Content not published**: Uses `PageBlueprint.blocks_json` (placeholder blocks)
|
||||
- **Content takes precedence**: Published Content always replaces blueprint placeholders
|
||||
|
||||
### Important Notes
|
||||
|
||||
1. **Two Statuses**:
|
||||
- `PageBlueprint.status = 'published'` → Controls page visibility in navigation
|
||||
- `Content.status = 'publish'` → Controls which content is used (real vs placeholder)
|
||||
|
||||
2. **Redeploy Required**: After publishing Content, you must **redeploy** the site for changes to appear
|
||||
|
||||
3. **All Pages Deployed**: The deployment includes ALL pages from the blueprint, but only published pages show in navigation
|
||||
|
||||
4. **Navigation Auto-Generated**: If no explicit navigation is set in blueprint, it auto-generates from published pages
|
||||
|
||||
### Troubleshooting
|
||||
|
||||
**Problem**: Navigation only shows "Home"
|
||||
- **Solution**: Make sure other pages have status `'published'` or `'ready'` in Page Manager
|
||||
|
||||
**Problem**: Pages show placeholder content instead of real content
|
||||
- **Solution**:
|
||||
1. Check Content status is `'publish'` in Content Manager
|
||||
2. Redeploy the site blueprint
|
||||
|
||||
**Problem**: Pages not accessible via URL
|
||||
- **Solution**: Make sure pages have status `'published'` or `'ready'` and the site is deployed
|
||||
|
||||
@@ -1,240 +0,0 @@
|
||||
# Site Builder & AI Functions - Comprehensive Audit Report
|
||||
|
||||
## Executive Summary
|
||||
This audit identifies all requirements, dependencies, and gaps for the Site Builder functionality and related AI generation features. The primary issues are:
|
||||
1. **Database migrations not applied** - Site builder tables don't exist
|
||||
2. **Redis/Celery not running** - AI tasks can't execute asynchronously
|
||||
3. All code components are present and properly configured
|
||||
|
||||
---
|
||||
|
||||
## Requirements Audit Table
|
||||
|
||||
| Category | Component | Requirement | Status | Location/Notes | Action Required |
|
||||
|----------|-----------|-------------|--------|----------------|-----------------|
|
||||
| **Database** | Migrations | `0001_initial.py` - SiteBlueprint, PageBlueprint tables | ✅ EXISTS | `backend/igny8_core/business/site_building/migrations/0001_initial.py` | ❌ **NOT APPLIED** - Run migrations |
|
||||
| **Database** | Migrations | `0002_sitebuilder_metadata.py` - BusinessType, AudienceProfile, BrandPersonality, HeroImageryDirection | ✅ EXISTS | `backend/igny8_core/business/site_building/migrations/0002_sitebuilder_metadata.py` | ❌ **NOT APPLIED** - Run migrations |
|
||||
| **Database** | Table | `igny8_site_blueprints` | ❌ MISSING | Should be created by 0001_initial.py | Run `python manage.py migrate site_building` |
|
||||
| **Database** | Table | `igny8_page_blueprints` | ❌ MISSING | Should be created by 0001_initial.py | Run `python manage.py migrate site_building` |
|
||||
| **Database** | Table | `igny8_site_builder_business_types` | ❌ MISSING | Should be created by 0002_sitebuilder_metadata.py | Run `python manage.py migrate site_building` |
|
||||
| **Database** | Table | `igny8_site_builder_audience_profiles` | ❌ MISSING | Should be created by 0002_sitebuilder_metadata.py | Run `python manage.py migrate site_building` |
|
||||
| **Database** | Table | `igny8_site_builder_brand_personalities` | ❌ MISSING | Should be created by 0002_sitebuilder_metadata.py | Run `python manage.py migrate site_building` |
|
||||
| **Database** | Table | `igny8_site_builder_hero_imagery` | ❌ MISSING | Should be created by 0002_sitebuilder_metadata.py | Run `python manage.py migrate site_building` |
|
||||
| **Database** | Seed Data | Business types, audience profiles, brand personalities, hero imagery | ✅ DEFINED | Migration 0002 includes `seed_site_builder_metadata()` function | Will seed automatically when migration runs |
|
||||
| **App Config** | Django App | `igny8_core.business.site_building.apps.SiteBuildingConfig` | ✅ REGISTERED | `backend/igny8_core/settings.py:55` | No action needed |
|
||||
| **App Config** | Django App | `igny8_core.modules.site_builder.apps.SiteBuilderConfig` | ✅ REGISTERED | `backend/igny8_core/settings.py:59` | No action needed |
|
||||
| **Models** | SiteBlueprint | Model with all fields (name, description, config_json, structure_json, status, hosting_type, version) | ✅ EXISTS | `backend/igny8_core/business/site_building/models.py:10-83` | No action needed |
|
||||
| **Models** | PageBlueprint | Model with all fields (site_blueprint, slug, title, type, blocks_json, status, order) | ✅ EXISTS | `backend/igny8_core/business/site_building/models.py:85-166` | No action needed |
|
||||
| **Models** | BusinessType | Model extending SiteBuilderOption | ✅ EXISTS | `backend/igny8_core/business/site_building/models.py:189-194` | No action needed |
|
||||
| **Models** | AudienceProfile | Model extending SiteBuilderOption | ✅ EXISTS | `backend/igny8_core/business/site_building/models.py:197-202` | No action needed |
|
||||
| **Models** | BrandPersonality | Model extending SiteBuilderOption | ✅ EXISTS | `backend/igny8_core/business/site_building/models.py:205-210` | No action needed |
|
||||
| **Models** | HeroImageryDirection | Model extending SiteBuilderOption | ✅ EXISTS | `backend/igny8_core/business/site_building/models.py:213-218` | No action needed |
|
||||
| **Services** | StructureGenerationService | Service to trigger AI structure generation | ✅ EXISTS | `backend/igny8_core/business/site_building/services/structure_generation_service.py` | No action needed |
|
||||
| **Services** | PageGenerationService | Service to generate page content via Writer | ✅ EXISTS | `backend/igny8_core/business/site_building/services/page_generation_service.py` | No action needed |
|
||||
| **Services** | SiteBuilderFileService | File management service | ✅ EXISTS | `backend/igny8_core/business/site_building/services/file_management_service.py` | No action needed |
|
||||
| **AI Functions** | GenerateSiteStructureFunction | AI function class | ✅ EXISTS | `backend/igny8_core/ai/functions/generate_site_structure.py` | No action needed |
|
||||
| **AI Functions** | Function Registration | `generate_site_structure` registered in registry | ✅ REGISTERED | `backend/igny8_core/ai/registry.py:97-112` | No action needed |
|
||||
| **AI Functions** | AI Task Dispatch | `run_ai_task` Celery task | ✅ EXISTS | `backend/igny8_core/ai/tasks.py:12-147` | No action needed |
|
||||
| **AI Functions** | Prompt Template | `site_structure_generation` prompt | ✅ EXISTS | `backend/igny8_core/ai/prompts.py:242-307` | No action needed |
|
||||
| **AI Functions** | Prompt Mapping | Function name → prompt type mapping | ✅ CONFIGURED | `backend/igny8_core/ai/prompts.py:599` | No action needed |
|
||||
| **API Endpoints** | SiteBlueprintViewSet | CRUD + generate_structure action | ✅ EXISTS | `backend/igny8_core/modules/site_builder/views.py:32-81` | No action needed |
|
||||
| **API Endpoints** | PageBlueprintViewSet | CRUD + generate_content action | ✅ EXISTS | `backend/igny8_core/modules/site_builder/views.py:141-172` | No action needed |
|
||||
| **API Endpoints** | SiteBuilderMetadataView | Metadata endpoint for dropdowns | ✅ EXISTS | `backend/igny8_core/modules/site_builder/views.py:216-250` | ❌ **FAILS** - Needs DB tables |
|
||||
| **API Endpoints** | SiteAssetView | File upload/download | ✅ EXISTS | `backend/igny8_core/modules/site_builder/views.py:175-213` | No action needed |
|
||||
| **API URLs** | Site Builder URLs | `/api/v1/site-builder/` routes | ✅ CONFIGURED | `backend/igny8_core/modules/site_builder/urls.py` | No action needed |
|
||||
| **API URLs** | URL Registration | Included in main urls.py | ✅ REGISTERED | `backend/igny8_core/urls.py:30` | No action needed |
|
||||
| **Billing** | Credit Cost | `site_structure_generation: 50 credits` | ✅ DEFINED | `backend/igny8_core/business/billing/constants.py:13` | No action needed |
|
||||
| **Billing** | Credit Cost | `site_page_generation: 20 credits` | ✅ DEFINED | `backend/igny8_core/business/billing/constants.py:14` | No action needed |
|
||||
| **Billing** | Credit Check | CreditService.check_credits() called | ✅ IMPLEMENTED | `backend/igny8_core/business/site_building/services/structure_generation_service.py:57` | No action needed |
|
||||
| **Celery** | Configuration | Celery app configured | ✅ CONFIGURED | `backend/igny8_core/celery.py` | No action needed |
|
||||
| **Celery** | Settings | CELERY_BROKER_URL, CELERY_RESULT_BACKEND | ✅ CONFIGURED | `backend/igny8_core/settings.py:497-508` | No action needed |
|
||||
| **Celery** | Worker Container | `igny8_celery_worker` in docker-compose | ✅ DEFINED | `docker-compose.app.yml:105-128` | ❌ **NOT RUNNING** - Start container |
|
||||
| **Celery** | Beat Container | `igny8_celery_beat` in docker-compose | ✅ DEFINED | `docker-compose.app.yml:130-153` | ❌ **NOT RUNNING** - Start container |
|
||||
| **Redis** | Configuration | REDIS_HOST, REDIS_PORT env vars | ✅ CONFIGURED | `docker-compose.app.yml:38-39, 115-116, 140-141` | No action needed |
|
||||
| **Redis** | Redis Service | External Redis service | ❌ **NOT ACCESSIBLE** | Expected from infra stack | ❌ **NOT RUNNING** - Start Redis service |
|
||||
| **Dependencies** | Python Packages | celery>=5.3.0 | ✅ IN REQUIREMENTS | `backend/requirements.txt:11` | No action needed |
|
||||
| **Dependencies** | Python Packages | redis | ✅ IN REQUIREMENTS | `backend/requirements.txt:4` | No action needed |
|
||||
| **Dependencies** | Python Packages | Django>=5.2.7 | ✅ IN REQUIREMENTS | `backend/requirements.txt:1` | No action needed |
|
||||
| **Dependencies** | Python Packages | djangorestframework | ✅ IN REQUIREMENTS | `backend/requirements.txt:6` | No action needed |
|
||||
| **Frontend** | API Client | siteBuilderApi functions | ✅ EXISTS | `frontend/src/services/siteBuilder.api.ts` | No action needed |
|
||||
| **Frontend** | Store | useBuilderStore with metadata loading | ✅ EXISTS | `frontend/src/store/builderStore.ts:399-412` | No action needed |
|
||||
| **Logging** | StructureGenerationService | Logging statements | ✅ IMPLEMENTED | `backend/igny8_core/business/site_building/services/structure_generation_service.py:49-53, 98-102` | No action needed |
|
||||
| **Logging** | GenerateSiteStructure | Logging statements | ✅ IMPLEMENTED | `backend/igny8_core/ai/functions/generate_site_structure.py:135` | No action needed |
|
||||
| **Error Handling** | InsufficientCreditsError | Handled in StructureGenerationService | ✅ IMPLEMENTED | `backend/igny8_core/business/site_building/services/structure_generation_service.py:58-61` | No action needed |
|
||||
| **Error Handling** | Celery Fallback | Synchronous execution if Celery unavailable | ✅ IMPLEMENTED | `backend/igny8_core/business/site_building/services/structure_generation_service.py:109-115` | No action needed |
|
||||
|
||||
---
|
||||
|
||||
## Critical Issues Summary
|
||||
|
||||
### 🔴 **CRITICAL - Database Migrations Not Applied**
|
||||
**Impact**: All Site Builder endpoints fail with `ProgrammingError: relation "igny8_site_builder_business_types" does not exist`
|
||||
|
||||
**Root Cause**: Migrations exist but haven't been run on the database
|
||||
|
||||
**Fix Required**:
|
||||
```bash
|
||||
# Step 1: Navigate to app directory
|
||||
cd /data/app/igny8
|
||||
|
||||
# Step 2: Create migrations if model changes exist
|
||||
docker compose -f docker-compose.app.yml -p igny8-app exec igny8_backend python manage.py makemigrations site_building
|
||||
|
||||
# Step 3: Apply migrations
|
||||
docker compose -f docker-compose.app.yml -p igny8-app exec igny8_backend python manage.py migrate site_building
|
||||
|
||||
# Alternative: If backend is in infra stack, use:
|
||||
# cd /data/app
|
||||
# docker compose -f docker-compose.yml -p igny8-infra exec <backend_container_name> python manage.py makemigrations site_building
|
||||
# docker compose -f docker-compose.yml -p igny8-infra exec <backend_container_name> python manage.py migrate site_building
|
||||
```
|
||||
|
||||
**Files Affected**:
|
||||
- `backend/igny8_core/business/site_building/migrations/0001_initial.py`
|
||||
- `backend/igny8_core/business/site_building/migrations/0002_sitebuilder_metadata.py`
|
||||
|
||||
**Tables That Will Be Created**:
|
||||
1. `igny8_site_blueprints`
|
||||
2. `igny8_page_blueprints`
|
||||
3. `igny8_site_builder_business_types`
|
||||
4. `igny8_site_builder_audience_profiles`
|
||||
5. `igny8_site_builder_brand_personalities`
|
||||
6. `igny8_site_builder_hero_imagery`
|
||||
|
||||
---
|
||||
|
||||
### 🔴 **CRITICAL - Redis Not Running**
|
||||
**Impact**: Celery tasks can't be queued, AI generation fails silently or runs synchronously
|
||||
|
||||
**Root Cause**: Redis service is not accessible (Connection refused errors in logs)
|
||||
|
||||
**Fix Required**:
|
||||
1. Ensure Redis service is running in the infra stack
|
||||
2. Verify network connectivity between backend and Redis
|
||||
3. Check Redis is accessible at `redis:6379` from backend container
|
||||
|
||||
**Configuration**:
|
||||
- Expected: `redis://redis:6379/0`
|
||||
- Environment vars: `REDIS_HOST=redis`, `REDIS_PORT=6379`
|
||||
|
||||
---
|
||||
|
||||
### 🔴 **CRITICAL - Celery Worker Not Running**
|
||||
**Impact**: Even if Redis is fixed, AI tasks won't execute because no worker is processing them
|
||||
|
||||
**Root Cause**: `igny8_celery_worker` container is not running
|
||||
|
||||
**Fix Required**:
|
||||
```bash
|
||||
# Navigate to app directory
|
||||
cd /data/app/igny8
|
||||
|
||||
# Start Celery worker
|
||||
docker compose -f docker-compose.app.yml -p igny8-app up -d igny8_celery_worker
|
||||
|
||||
# Verify it's running
|
||||
docker compose -f docker-compose.app.yml -p igny8-app ps igny8_celery_worker
|
||||
```
|
||||
|
||||
**Container Configuration**: `docker-compose.app.yml:105-128`
|
||||
|
||||
**Note**: If backend is in infra stack, Celery worker may also be there. Check which stack contains the backend service.
|
||||
|
||||
---
|
||||
|
||||
### 🟡 **WARNING - Celery Beat Not Running**
|
||||
**Impact**: Periodic tasks (credit replenishment, automation rules) won't run
|
||||
|
||||
**Root Cause**: `igny8_celery_beat` container is not running
|
||||
|
||||
**Fix Required**:
|
||||
```bash
|
||||
# Navigate to app directory
|
||||
cd /data/app/igny8
|
||||
|
||||
# Start Celery beat
|
||||
docker compose -f docker-compose.app.yml -p igny8-app up -d igny8_celery_beat
|
||||
|
||||
# Verify it's running
|
||||
docker compose -f docker-compose.app.yml -p igny8-app ps igny8_celery_beat
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Verification Checklist
|
||||
|
||||
After fixing the critical issues, verify:
|
||||
|
||||
- [ ] Database migrations applied: `python manage.py showmigrations site_building` shows all as `[X]`
|
||||
- [ ] Tables exist: Query `igny8_site_builder_business_types` returns data
|
||||
- [ ] Redis accessible: `redis-cli -h redis ping` returns `PONG`
|
||||
- [ ] Celery worker running: `docker ps | grep celery_worker` shows container
|
||||
- [ ] Celery worker connected: Check logs for "celery@hostname ready"
|
||||
- [ ] Metadata endpoint works: `GET /api/v1/site-builder/metadata/` returns 200 with data
|
||||
- [ ] AI task can be queued: Check logs for `[StructureGenerationService] Queued AI task`
|
||||
- [ ] AI task executes: Check logs for `run_ai_task STARTED: generate_site_structure`
|
||||
|
||||
---
|
||||
|
||||
## Code Quality Assessment
|
||||
|
||||
### ✅ **Strengths**
|
||||
1. **Complete Implementation**: All core components are implemented
|
||||
2. **Proper Separation**: Business logic separated from API layer
|
||||
3. **Error Handling**: Graceful fallbacks for Celery unavailability
|
||||
4. **Credit System**: Properly integrated with billing system
|
||||
5. **Logging**: Comprehensive logging throughout the flow
|
||||
6. **Type Hints**: Good use of type hints in services
|
||||
7. **Documentation**: Models and services have docstrings
|
||||
|
||||
### ⚠️ **Potential Improvements**
|
||||
1. **Migration Dependencies**: Ensure migration dependencies are correct (currently depends on `igny8_core_auth.0014` and `writer.0009`)
|
||||
2. **Error Messages**: Could be more user-friendly in API responses
|
||||
3. **Testing**: Test files exist but may need updates for current implementation
|
||||
4. **Monitoring**: Consider adding metrics for AI task success/failure rates
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. **Immediate**: Run database migrations
|
||||
2. **Immediate**: Start Redis service (if in infra stack)
|
||||
3. **Immediate**: Start Celery worker container
|
||||
4. **Immediate**: Start Celery beat container (optional but recommended)
|
||||
5. **Verification**: Test metadata endpoint
|
||||
6. **Verification**: Test structure generation endpoint
|
||||
7. **Monitoring**: Watch logs for AI task execution
|
||||
|
||||
---
|
||||
|
||||
## Files Reference
|
||||
|
||||
### Core Models
|
||||
- `backend/igny8_core/business/site_building/models.py` - All Site Builder models
|
||||
|
||||
### Services
|
||||
- `backend/igny8_core/business/site_building/services/structure_generation_service.py` - AI structure generation
|
||||
- `backend/igny8_core/business/site_building/services/page_generation_service.py` - Page content generation
|
||||
- `backend/igny8_core/business/site_building/services/file_management_service.py` - File handling
|
||||
|
||||
### AI Functions
|
||||
- `backend/igny8_core/ai/functions/generate_site_structure.py` - AI function implementation
|
||||
- `backend/igny8_core/ai/tasks.py` - Celery task dispatcher
|
||||
- `backend/igny8_core/ai/registry.py` - Function registry
|
||||
|
||||
### API Layer
|
||||
- `backend/igny8_core/modules/site_builder/views.py` - API endpoints
|
||||
- `backend/igny8_core/modules/site_builder/urls.py` - URL routing
|
||||
- `backend/igny8_core/modules/site_builder/serializers.py` - Request/response serialization
|
||||
|
||||
### Configuration
|
||||
- `backend/igny8_core/settings.py` - Django settings
|
||||
- `backend/igny8_core/celery.py` - Celery configuration
|
||||
- `docker-compose.app.yml` - Container definitions
|
||||
- `backend/requirements.txt` - Python dependencies
|
||||
|
||||
---
|
||||
|
||||
**Report Generated**: Based on comprehensive codebase analysis
|
||||
**Status**: All code components present, infrastructure needs attention
|
||||
|
||||
@@ -1,264 +0,0 @@
|
||||
# Site Builder Wizard Integration Plan
|
||||
|
||||
## Overview
|
||||
Integrate the Site Builder wizard directly into the main frontend app (`frontend/src/pages/Sites/Builder/`), using the same UI kit, state stores, and API helpers as the rest of the dashboard. The legacy `sites/src/builder` + `sites/src/renderer` code has been removed, so the only viable implementation path is the unified Sites module.
|
||||
|
||||
## Current State
|
||||
|
||||
### ✅ What's Done
|
||||
- Legacy builder/renderer folders removed from Sites container (no more parallel UI)
|
||||
- Type definitions created in `frontend/src/types/siteBuilder.ts`
|
||||
- API helper created in `frontend/src/services/siteBuilder.api.ts`
|
||||
|
||||
### ⚠️ What's Missing
|
||||
- Builder store not yet created in the main app
|
||||
- Wizard steps/page still placeholder in `frontend/src/pages/Sites/Builder/`
|
||||
- No Tailwind/CX styling hooked into shared UI kit
|
||||
- Routes/menu point to placeholder
|
||||
- Tests/docs still reference old structure
|
||||
- Sites container still contains stale references (needs cleanup after integration)
|
||||
|
||||
## Integration Plan
|
||||
|
||||
### Phase 1: Create API Service Layer ✅
|
||||
**Location**: `frontend/src/services/siteBuilder.api.ts`
|
||||
|
||||
**Tasks**:
|
||||
1. Create `siteBuilderApi` using `fetchAPI` pattern (not axios)
|
||||
2. Functions needed:
|
||||
- `listBlueprints()`
|
||||
- `createBlueprint(payload)`
|
||||
- `generateStructure(blueprintId, payload)`
|
||||
- `listPages(blueprintId)`
|
||||
- `generateAllPages(blueprintId, options)`
|
||||
- `createTasksForPages(blueprintId, pageIds)`
|
||||
|
||||
**API Endpoints** (already exist in backend):
|
||||
- `GET /api/v1/site-builder/blueprints/`
|
||||
- `POST /api/v1/site-builder/blueprints/`
|
||||
- `POST /api/v1/site-builder/blueprints/{id}/generate_structure/`
|
||||
- `GET /api/v1/site-builder/pages/?site_blueprint={id}`
|
||||
- `POST /api/v1/site-builder/blueprints/{id}/generate_all_pages/`
|
||||
- `POST /api/v1/site-builder/blueprints/{id}/create_tasks/`
|
||||
|
||||
### Phase 2: Create Zustand Store ⏳
|
||||
**Location**: `frontend/src/store/builderStore.ts`
|
||||
|
||||
**Tasks**:
|
||||
1. Copy `builderStore.ts` from `sites/src/builder/state/`
|
||||
2. Adapt to use `siteBuilderApi` instead of `builderApi`
|
||||
3. Integrate with `useSiteStore` and `useSectorStore`:
|
||||
- Auto-populate `siteId` from `useSiteStore().activeSite`
|
||||
- Auto-populate `sectorId` from `useSectorStore().activeSector`
|
||||
- Show site/sector selector if not set
|
||||
|
||||
**Store State**:
|
||||
- `form: BuilderFormData` - Wizard form data
|
||||
- `currentStep: number` - Current wizard step (0-3)
|
||||
- `isSubmitting: boolean` - Generation in progress
|
||||
- `activeBlueprint: SiteBlueprint | null` - Latest blueprint
|
||||
- `pages: PageBlueprint[]` - Generated pages
|
||||
- `error: string | null` - Error message
|
||||
|
||||
### Phase 3: Create Type Definitions ✅
|
||||
**Location**: `frontend/src/types/siteBuilder.ts`
|
||||
|
||||
**Tasks**:
|
||||
1. Copy types from `sites/src/builder/types/siteBuilder.ts`
|
||||
2. Ensure compatibility with frontend's existing types
|
||||
|
||||
**Types Needed**:
|
||||
- `HostingType`
|
||||
- `StylePreferences`
|
||||
- `BuilderFormData`
|
||||
- `SiteBlueprint`
|
||||
- `PageBlueprint`
|
||||
- `PageBlock`
|
||||
- `SiteStructure`
|
||||
|
||||
### Phase 4: Create Wizard Step Components ⏳
|
||||
**Location**: `frontend/src/pages/Sites/Builder/steps/`
|
||||
|
||||
**Tasks**:
|
||||
1. Copy step components from `sites/src/builder/pages/wizard/steps/`
|
||||
2. Adapt to use frontend's UI components:
|
||||
- Replace `Card` with `frontend/src/components/ui/card/Card`
|
||||
- Replace custom inputs with Tailwind-styled inputs
|
||||
- Use frontend's `Button` component
|
||||
3. Adapt styles to Tailwind CSS:
|
||||
- Remove `.sb-field`, `.sb-grid`, `.sb-pill` classes
|
||||
- Use Tailwind utility classes instead
|
||||
|
||||
**Step Components**:
|
||||
- `BusinessDetailsStep.tsx` - Site/sector selection, business info
|
||||
- `BriefStep.tsx` - Business brief textarea
|
||||
- `ObjectivesStep.tsx` - Objectives list with add/remove
|
||||
- `StyleStep.tsx` - Style preferences (palette, typography, personality)
|
||||
|
||||
### Phase 5: Create Main Wizard Page ⏳
|
||||
**Location**: `frontend/src/pages/Sites/Builder/Wizard.tsx`
|
||||
|
||||
**Tasks**:
|
||||
1. Copy `WizardPage.tsx` from `sites/src/builder/pages/wizard/`
|
||||
2. Adapt to frontend patterns:
|
||||
- Use `PageMeta` component
|
||||
- Use frontend's `Card` component
|
||||
- Use frontend's `Button` component
|
||||
- Use Tailwind CSS for styling
|
||||
3. Integrate with stores:
|
||||
- Auto-load active site/sector
|
||||
- Show site/sector selector if needed
|
||||
- Navigate to sites list on completion
|
||||
|
||||
**Features**:
|
||||
- 4-step wizard with progress indicators
|
||||
- Step navigation (Back/Next buttons)
|
||||
- Form validation
|
||||
- Blueprint generation on submit
|
||||
- Error handling
|
||||
- Loading states
|
||||
|
||||
### Phase 6: Create Site Definition Store (Optional) ⏳
|
||||
**Location**: `frontend/src/store/siteDefinitionStore.ts`
|
||||
|
||||
**Tasks**:
|
||||
1. Copy `siteDefinitionStore.ts` from `sites/src/builder/state/`
|
||||
2. Use for preview functionality (if needed)
|
||||
|
||||
### Phase 7: Update Routing & Navigation ✅
|
||||
**Location**: `frontend/src/App.tsx`
|
||||
|
||||
**Tasks**:
|
||||
1. Ensure `/sites/builder` route points to new `Wizard.tsx`
|
||||
2. Update navigation to show wizard in Sites section
|
||||
|
||||
### Phase 8: Fix Test File ✅
|
||||
**Location**: `frontend/src/__tests__/sites/BulkGeneration.test.tsx`
|
||||
|
||||
**Tasks**:
|
||||
1. Update import path from `site-builder/src/api/builder.api` to `services/siteBuilder.api`
|
||||
2. Update mock path accordingly
|
||||
|
||||
### Phase 9: Testing ⏳ *(blocked by vitest not installed in dev env)*
|
||||
**Tasks**:
|
||||
1. Test wizard flow:
|
||||
- Site selection
|
||||
- Sector selection
|
||||
- All 4 wizard steps
|
||||
- Blueprint generation
|
||||
- Error handling
|
||||
2. Test integration:
|
||||
- Site/sector auto-population
|
||||
- Navigation
|
||||
- API calls
|
||||
|
||||
### Phase 10: Cleanup ⏳
|
||||
**Tasks**:
|
||||
1. Stop `igny8_site_builder` container
|
||||
2. Remove Docker image
|
||||
3. Remove `/site-builder` folder
|
||||
4. Update documentation
|
||||
|
||||
## File Structure After Integration
|
||||
|
||||
```
|
||||
frontend/src/
|
||||
├── pages/Sites/Builder/
|
||||
│ ├── Wizard.tsx # Main wizard page (UPDATED)
|
||||
│ ├── Preview.tsx # Preview page (keep placeholder for now)
|
||||
│ ├── Blueprints.tsx # Blueprints list (already exists)
|
||||
│ └── steps/ # NEW
|
||||
│ ├── BusinessDetailsStep.tsx
|
||||
│ ├── BriefStep.tsx
|
||||
│ ├── ObjectivesStep.tsx
|
||||
│ └── StyleStep.tsx
|
||||
├── services/
|
||||
│ └── siteBuilder.api.ts # NEW - API service
|
||||
├── store/
|
||||
│ ├── builderStore.ts # NEW - Builder state
|
||||
│ └── siteDefinitionStore.ts # NEW - Site definition state (optional)
|
||||
└── types/
|
||||
└── siteBuilder.ts # NEW - Type definitions
|
||||
```
|
||||
|
||||
## Key Adaptations Needed
|
||||
|
||||
### 1. API Client Pattern
|
||||
**From** (sites container):
|
||||
```typescript
|
||||
import axios from 'axios';
|
||||
const client = axios.create({ baseURL: BASE_PATH });
|
||||
```
|
||||
|
||||
**To** (frontend):
|
||||
```typescript
|
||||
import { fetchAPI } from '../services/api';
|
||||
// Use fetchAPI directly, no axios
|
||||
```
|
||||
|
||||
### 2. Component Library
|
||||
**From** (sites container):
|
||||
```typescript
|
||||
import { Card } from '../../components/common/Card';
|
||||
```
|
||||
|
||||
**To** (frontend):
|
||||
```typescript
|
||||
import { Card } from '../../../components/ui/card/Card';
|
||||
```
|
||||
|
||||
### 3. Styling
|
||||
**From** (sites container):
|
||||
```css
|
||||
.sb-field { ... }
|
||||
.sb-grid { ... }
|
||||
```
|
||||
|
||||
**To** (frontend):
|
||||
```tsx
|
||||
className="flex flex-col gap-2"
|
||||
className="grid grid-cols-2 gap-4"
|
||||
```
|
||||
|
||||
### 4. Store Integration
|
||||
**From** (sites container):
|
||||
```typescript
|
||||
// Manual siteId/sectorId input
|
||||
```
|
||||
|
||||
**To** (frontend):
|
||||
```typescript
|
||||
import { useSiteStore } from '../../../store/siteStore';
|
||||
import { useSectorStore } from '../../../store/sectorStore';
|
||||
// Auto-populate from stores
|
||||
```
|
||||
|
||||
## Implementation Order
|
||||
|
||||
1. ✅ Create types (`types/siteBuilder.ts`)
|
||||
2. ✅ Create API service (`services/siteBuilder.api.ts`)
|
||||
3. ⏳ Create builder store (`store/builderStore.ts`)
|
||||
4. ⏳ Create step components (`pages/Sites/Builder/steps/`)
|
||||
5. ⏳ Create main wizard page (`pages/Sites/Builder/Wizard.tsx`)
|
||||
6. ⏳ Fix test file(s)
|
||||
7. ⏳ Test integration
|
||||
8. ⏳ Cleanup site-builder container/image/docs
|
||||
|
||||
## Success Criteria
|
||||
|
||||
- ✅ Wizard loads in main app at `/sites/builder`
|
||||
- ✅ Site/sector auto-populated from stores
|
||||
- ✅ All 4 steps work correctly
|
||||
- ✅ Blueprint generation works
|
||||
- ✅ Error handling works
|
||||
- ✅ Navigation works
|
||||
- ✅ No references to `site-builder/` folder in code
|
||||
- ✅ Test file updated
|
||||
- ✅ Sites container removed or marked deprecated in compose
|
||||
|
||||
## Notes
|
||||
|
||||
- Sites container will be deprecated once the wizard lives entirely inside the main app.
|
||||
- Only integrate wizard into main frontend app (no parallel codepaths).
|
||||
- Use frontend's existing patterns/components/stores for absolute consistency.
|
||||
|
||||
@@ -1,139 +0,0 @@
|
||||
# Site Builder URLs and File Management
|
||||
|
||||
## Summary of Implementation
|
||||
|
||||
### ✅ Generate Page Content Step
|
||||
|
||||
**Location**: `frontend/src/pages/Sites/Builder/Preview.tsx`
|
||||
|
||||
**Implementation**:
|
||||
- Added "Generate All Pages" button (shown when blueprint status is `'ready'`)
|
||||
- Button triggers `generateAllPages()` from `builderStore`
|
||||
- Shows ProgressModal during generation
|
||||
- Uses existing `PageGenerationService.bulk_generate_pages()` backend function
|
||||
|
||||
**Queue Function**: ✅ **EXISTS**
|
||||
- `PageGenerationService.bulk_generate_pages()` creates Writer Tasks
|
||||
- Tasks are queued via `ContentGenerationService.generate_content()`
|
||||
- Each page blueprint gets a Writer Task with title: `"[Site Builder] {page_title}"`
|
||||
- Tasks are processed by Celery workers
|
||||
|
||||
---
|
||||
|
||||
## URL Standards
|
||||
|
||||
### Public Site URLs (Deployed Sites)
|
||||
|
||||
**Current Implementation** (Placeholder):
|
||||
- Pattern: `https://{site_id}.igny8.com`
|
||||
- Generated by: `SitesRendererAdapter._get_deployment_url()`
|
||||
- Location: `backend/igny8_core/business/publishing/services/adapters/sites_renderer_adapter.py:191`
|
||||
|
||||
**Planned Implementation** (from docs):
|
||||
- Custom domains: `clientdomain.com` → routed via Caddy
|
||||
- Subdomain: `mysite.igny8.com` → routed via Caddy
|
||||
- Marketing site: `igny8.com` → `/igny8-sites/marketing/`
|
||||
|
||||
**Sites Renderer Routes**:
|
||||
- Public routes: `/:siteId/*` (no auth required)
|
||||
- Loads from: `/data/app/sites-data/clients/{site_id}/v{version}/`
|
||||
|
||||
---
|
||||
|
||||
### Admin/Management URLs (Frontend App)
|
||||
|
||||
**Site Management Routes** (from `frontend/src/App.tsx`):
|
||||
- `/sites` - All sites list
|
||||
- `/sites/:id` - Site dashboard
|
||||
- `/sites/:id/content` - Site content list
|
||||
- `/sites/:id/editor` - Site content editor
|
||||
- `/sites/:id/pages` - Page manager
|
||||
- `/sites/:id/pages/new` - Create new page
|
||||
- `/sites/:id/pages/:pageId/edit` - Edit page
|
||||
- `/sites/:id/posts/:postId` - View/edit post
|
||||
- `/sites/:id/posts/:postId/edit` - Edit post
|
||||
- `/sites/:id/preview` - Site preview
|
||||
- `/sites/:id/settings` - Site settings (General, SEO, OG, Schema, Integrations)
|
||||
- `/sites/manage` - Site management dashboard
|
||||
|
||||
**Site Builder Routes**:
|
||||
- `/sites/builder` - Site Builder wizard
|
||||
- `/sites/builder/preview` - Preview blueprint (with Generate All Pages button)
|
||||
- `/sites/blueprints` - Blueprints list
|
||||
|
||||
---
|
||||
|
||||
## File Management
|
||||
|
||||
### File Storage Structure
|
||||
|
||||
**Site Files**:
|
||||
```
|
||||
/data/app/sites-data/
|
||||
└── clients/
|
||||
└── {site_id}/
|
||||
└── v{version}/
|
||||
├── site.json
|
||||
├── pages/
|
||||
│ ├── home.json
|
||||
│ ├── about.json
|
||||
│ └── ...
|
||||
└── assets/ # User-managed files
|
||||
├── images/
|
||||
├── documents/
|
||||
└── media/
|
||||
```
|
||||
|
||||
**Service**: `SiteBuilderFileService`
|
||||
- Location: `backend/igny8_core/business/site_building/services/file_management_service.py`
|
||||
- Base path: `/data/app/sites-data/clients`
|
||||
- Max file size: 10MB per file
|
||||
- Max storage per site: 100MB
|
||||
|
||||
### User Access Rules
|
||||
|
||||
- **Owner/Admin**: Full access to all account sites
|
||||
- **Editor**: Access to granted sites (via SiteUserAccess)
|
||||
- **Viewer**: Read-only access to granted sites
|
||||
- File operations scoped to user's accessible sites only
|
||||
|
||||
### File Manager UI
|
||||
|
||||
**Status**: ⚠️ **NOT YET IMPLEMENTED**
|
||||
|
||||
**Planned** (from Phase 3 docs):
|
||||
- File Browser UI: `site-builder/src/components/files/FileBrowser.tsx`
|
||||
- File Upload API: `modules/site_builder/views.py`
|
||||
- Storage quota check: `infrastructure/storage/file_storage.py`
|
||||
|
||||
**Expected Routes** (not yet in App.tsx):
|
||||
- `/sites/:id/files` - File manager for site assets
|
||||
- `/sites/:id/files/upload` - Upload files
|
||||
- `/sites/:id/files/:fileId` - View/edit file
|
||||
|
||||
---
|
||||
|
||||
## Docker Volumes
|
||||
|
||||
**From `docker-compose.app.yml`**:
|
||||
```yaml
|
||||
igny8_sites:
|
||||
volumes:
|
||||
- /data/app/igny8/sites:/app
|
||||
- /data/app/sites-data:/sites # Site definitions and assets
|
||||
```
|
||||
|
||||
**Environment Variable**:
|
||||
- `SITES_DATA_PATH=/sites` (inside container)
|
||||
- Maps to `/data/app/sites-data` on host
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. ✅ **Generate All Pages button** - Added to Preview page
|
||||
2. ⏳ **File Manager UI** - Needs to be implemented
|
||||
3. ⏳ **Deployment URL generation** - Currently placeholder, needs real domain mapping
|
||||
4. ⏳ **Caddy routing configuration** - For custom domains
|
||||
5. ⏳ **File upload API endpoints** - For user file management
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
# Site Builder Workflow - Explanation & Fix
|
||||
|
||||
## The Problem (FIXED)
|
||||
|
||||
You were experiencing confusion because there were **TWO separate systems** that weren't properly connected:
|
||||
|
||||
1. **Page Blueprint** (`PageBlueprint.blocks_json`) - Contains placeholder/sample blocks from AI structure generation
|
||||
2. **Writer Content** (`Content` model) - Contains actual generated content from Writer tasks
|
||||
|
||||
**The disconnect**: When deploying a site, it only used `PageBlueprint.blocks_json` (placeholders), NOT the actual `Content` from Writer.
|
||||
|
||||
## Current Workflow (How It Works Now)
|
||||
|
||||
### Step 1: Structure Generation
|
||||
- AI generates site structure → Creates `SiteBlueprint` with `PageBlueprint` pages
|
||||
- Each `PageBlueprint` has `blocks_json` with **placeholder/sample blocks**
|
||||
|
||||
### Step 2: Content Generation
|
||||
- Pages are sent to Writer as `Tasks` (title pattern: `[Site Builder] {Page Title}`)
|
||||
- Writer generates actual content → Creates `Content` records
|
||||
- `Content` has `html_content` and `json_blocks` with **real content**
|
||||
|
||||
### Step 3: Publishing Status
|
||||
- **Page Blueprint Status** (`PageBlueprint.status`): Set to `'published'` in Page Manager
|
||||
- Controls if page appears in navigation and is accessible
|
||||
- **Content Status** (`Content.status`): Set to `'publish'` in Content Manager
|
||||
- Controls if actual written content is used (vs placeholders)
|
||||
|
||||
### Step 4: Deployment (FIXED)
|
||||
- When you deploy, `SitesRendererAdapter._build_site_definition()` now:
|
||||
1. For each page, finds the associated Writer Task (by title pattern)
|
||||
2. Finds the Content record for that task
|
||||
3. **If Content exists and status is 'publish'**, uses `Content.json_blocks` instead of `PageBlueprint.blocks_json`
|
||||
4. If Content has `html_content` but no `json_blocks`, converts it to a text block
|
||||
5. Uses the merged/actual content blocks for deployment
|
||||
|
||||
## URLs
|
||||
|
||||
- **Public Site URL**: `https://sites.igny8.com/{siteSlug}`
|
||||
- Shows deployed site with actual content (if Content is published)
|
||||
- Falls back to blueprint placeholders if Content not published
|
||||
- **Individual Pages**: `https://sites.igny8.com/{siteSlug}/{pageSlug}`
|
||||
- Example: `https://sites.igny8.com/auto-g8/products`
|
||||
|
||||
## How To Use It Now
|
||||
|
||||
1. **Generate Structure**: Create site blueprint with pages (has placeholder blocks)
|
||||
2. **Generate Content**: Pages → Tasks → Content (Writer generates real content)
|
||||
3. **Publish Content**: In Content Manager, set Content status to `'publish'`
|
||||
4. **Publish Pages**: In Page Manager, set Page status to `'published'` (for navigation)
|
||||
5. **Deploy Site**: Deploy the blueprint - it will automatically use published Content
|
||||
|
||||
## What Changed
|
||||
|
||||
✅ **Fixed**: `SitesRendererAdapter._build_site_definition()` now merges published Content into PageBlueprint blocks during deployment
|
||||
|
||||
✅ **Result**: When you deploy, the site shows actual written content, not placeholders
|
||||
|
||||
## Important Notes
|
||||
|
||||
- **Two Statuses**: Page status controls visibility, Content status controls which content is used
|
||||
- **Deployment Required**: After publishing Content, you need to **redeploy** the site for changes to appear
|
||||
- **Content Takes Precedence**: If Content is published, it replaces blueprint placeholders
|
||||
- **Fallback**: If Content not published, blueprint placeholders are used
|
||||
|
||||
@@ -1,185 +0,0 @@
|
||||
# Template System - Current State & Plans
|
||||
|
||||
## Current Template Architecture
|
||||
|
||||
### 1. Site-Level Layouts (Implemented)
|
||||
**Location**: `sites/src/utils/layoutRenderer.tsx`
|
||||
|
||||
**Available Layouts**:
|
||||
- `default` - Standard header, content, footer
|
||||
- `minimal` - Clean, minimal design
|
||||
- `magazine` - Editorial, content-focused
|
||||
- `ecommerce` - Product-focused
|
||||
- `portfolio` - Showcase layout
|
||||
- `blog` - Content-first
|
||||
- `corporate` - Business layout
|
||||
|
||||
**How it works**:
|
||||
- Set in `SiteBlueprint.structure_json.layout`
|
||||
- Applied to the entire site
|
||||
- All pages use the same layout
|
||||
|
||||
### 2. Block Templates (Implemented)
|
||||
**Location**: `sites/src/utils/templateEngine.tsx`
|
||||
|
||||
**Available Block Types**:
|
||||
- `hero` - Hero section with title, subtitle, CTA
|
||||
- `text` - Text content block
|
||||
- `features` - Feature grid
|
||||
- `testimonials` - Testimonials section
|
||||
- `services` - Services grid
|
||||
- `stats` - Statistics panel
|
||||
- `cta` - Call to action
|
||||
- `image` - Image block
|
||||
- `video` - Video block
|
||||
- `form` - Contact form
|
||||
- `faq` - FAQ accordion
|
||||
- `quote` - Quote block
|
||||
- `grid` - Grid layout
|
||||
- `card` - Card block
|
||||
- `list` - List block
|
||||
- `accordion` - Accordion block
|
||||
|
||||
**How it works**:
|
||||
- Each page has `blocks_json` array
|
||||
- Each block has `type` and `data`
|
||||
- `renderTemplate()` renders blocks based on type
|
||||
|
||||
### 3. Page Types (Defined, but NO templates yet)
|
||||
**Location**: `backend/igny8_core/business/site_building/models.py`
|
||||
|
||||
**Page Type Choices**:
|
||||
- `home` - Homepage
|
||||
- `about` - About page
|
||||
- `services` - Services page
|
||||
- `products` - Products page
|
||||
- `blog` - Blog page
|
||||
- `contact` - Contact page
|
||||
- `custom` - Custom page
|
||||
|
||||
**Current State**:
|
||||
- Page types are stored but **NOT used for rendering**
|
||||
- All pages render the same way regardless of type
|
||||
- No page-type-specific templates exist
|
||||
|
||||
## Missing: Page-Type Templates
|
||||
|
||||
### What's Missing
|
||||
Currently, there's **NO page-type-specific template system**. All pages render identically:
|
||||
- Home page renders the same as Products page
|
||||
- Blog page renders the same as Contact page
|
||||
- No special handling for different page types
|
||||
|
||||
### Where Page-Type Templates Should Be
|
||||
|
||||
**Proposed Location**: `sites/src/utils/pageTypeRenderer.tsx`
|
||||
|
||||
**Proposed Structure**:
|
||||
```typescript
|
||||
// Page-type specific renderers
|
||||
function renderHomePage(page: PageDefinition, blocks: Block[]): React.ReactElement {
|
||||
// Home-specific template: Hero, features, testimonials, CTA
|
||||
}
|
||||
|
||||
function renderProductsPage(page: PageDefinition, blocks: Block[]): React.ReactElement {
|
||||
// Products-specific template: Product grid, filters, categories
|
||||
}
|
||||
|
||||
function renderBlogPage(page: PageDefinition, blocks: Block[]): React.ReactElement {
|
||||
// Blog-specific template: Post list, sidebar, pagination
|
||||
}
|
||||
|
||||
function renderContactPage(page: PageDefinition, blocks: Block[]): React.ReactElement {
|
||||
// Contact-specific template: Form, map, contact info
|
||||
}
|
||||
```
|
||||
|
||||
### How It Should Work
|
||||
|
||||
1. **In `layoutRenderer.tsx`**: After determining site layout, check page type
|
||||
2. **Route to page-type renderer**: If page type has specific template, use it
|
||||
3. **Fallback to default**: If no page-type template, use default block rendering
|
||||
|
||||
**Example Flow**:
|
||||
```
|
||||
Site Definition → Site Layout (default/minimal/etc.)
|
||||
↓
|
||||
Page Type (home/products/blog/etc.)
|
||||
↓
|
||||
Page-Type Template (if exists) OR Default Block Rendering
|
||||
↓
|
||||
Block Templates (hero/text/features/etc.)
|
||||
```
|
||||
|
||||
## Current Rendering Flow
|
||||
|
||||
```
|
||||
SiteRenderer
|
||||
↓
|
||||
loadSiteDefinition()
|
||||
↓
|
||||
renderLayout(siteDefinition) → Uses site.layout (default/minimal/etc.)
|
||||
↓
|
||||
renderDefaultLayout() → Renders all pages the same way
|
||||
↓
|
||||
renderTemplate(block) → Renders individual blocks
|
||||
```
|
||||
|
||||
## Proposed Enhanced Flow
|
||||
|
||||
```
|
||||
SiteRenderer
|
||||
↓
|
||||
loadSiteDefinition()
|
||||
↓
|
||||
renderLayout(siteDefinition) → Uses site.layout
|
||||
↓
|
||||
For each page:
|
||||
↓
|
||||
Check page.type (home/products/blog/etc.)
|
||||
↓
|
||||
If page-type template exists:
|
||||
→ renderPageTypeTemplate(page)
|
||||
Else:
|
||||
→ renderDefaultPageTemplate(page)
|
||||
↓
|
||||
renderTemplate(block) → Renders blocks
|
||||
```
|
||||
|
||||
## Implementation Plan
|
||||
|
||||
### Phase 1: Create Page-Type Renderers
|
||||
- Create `sites/src/utils/pageTypeRenderer.tsx`
|
||||
- Implement templates for each page type:
|
||||
- `home` - Hero + features + testimonials layout
|
||||
- `products` - Product grid + filters
|
||||
- `blog` - Post list + sidebar
|
||||
- `contact` - Form + map + info
|
||||
- `about` - Team + mission + values
|
||||
- `services` - Service cards + descriptions
|
||||
|
||||
### Phase 2: Integrate with Layout Renderer
|
||||
- Modify `renderDefaultLayout()` to check page type
|
||||
- Route to page-type renderer if template exists
|
||||
- Fallback to current block rendering
|
||||
|
||||
### Phase 3: Make Templates Configurable
|
||||
- Allow templates to be customized per site
|
||||
- Store template preferences in `SiteBlueprint.config_json`
|
||||
- Support custom templates
|
||||
|
||||
## Current Files
|
||||
|
||||
- **Site Layouts**: `sites/src/utils/layoutRenderer.tsx`
|
||||
- **Block Templates**: `sites/src/utils/templateEngine.tsx`
|
||||
- **Page Types**: `backend/igny8_core/business/site_building/models.py` (PageBlueprint.PAGE_TYPE_CHOICES)
|
||||
- **Missing**: Page-type templates (not implemented yet)
|
||||
|
||||
## Summary
|
||||
|
||||
✅ **Implemented**: Site-level layouts, block templates
|
||||
❌ **Missing**: Page-type-specific templates
|
||||
📝 **Planned**: Page-type renderers in `sites/src/utils/pageTypeRenderer.tsx`
|
||||
|
||||
Currently, all pages render the same way. Page types are stored but not used for rendering. To add page-type templates, create a new file `pageTypeRenderer.tsx` and integrate it into the layout renderer.
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
# Stage 2 – Planner & Wizard UX
|
||||
|
||||
## Overview
|
||||
- Feature flag: `USE_SITE_BUILDER_REFACTOR` (must be `true`)
|
||||
- Goal: ship state-aware, guided Site Builder experience and expose cluster/taxonomy readiness to Planner UI
|
||||
- Dependencies: Stage 1 migrations/services already deployed
|
||||
- Entry point: `/sites/builder/workflow/:blueprintId` (protected route)
|
||||
|
||||
---
|
||||
|
||||
## Backend Enhancements
|
||||
|
||||
### New services / endpoints
|
||||
| Component | Description | File |
|
||||
| --- | --- | --- |
|
||||
| `WizardContextService` | Aggregates workflow state, cluster stats, taxonomy summaries, coverage counts | `backend/igny8_core/business/site_building/services/wizard_context_service.py` |
|
||||
| Workflow context API | `GET /api/v1/site-builder/siteblueprint/{id}/workflow/context/` returns `workflow`, `cluster_summary`, `taxonomy_summary`, `coverage`, `next_actions` | `modules/site_builder/views.py` |
|
||||
| Workflow serializer helpers | `SiteBlueprintSerializer` now returns `workflow_state` + `gating_messages` via `WorkflowStateService.serialize_state()` | `modules/site_builder/serializers.py` |
|
||||
|
||||
### Workflow telemetry & logging
|
||||
- `WorkflowStateService` normalizes step metadata (`status`, `code`, `message`, `updated_at`)
|
||||
- Emits structured log events (`wizard_step_updated`, `wizard_blocking_issue`) for future analytics
|
||||
- `serialize_state()` provides consistent payload for API, wizard store, and planner warnings
|
||||
|
||||
---
|
||||
|
||||
## Frontend Implementation
|
||||
|
||||
### API layer
|
||||
- Added interfaces + calls (`fetchSiteBlueprints`, `fetchSiteBlueprintById`, `updateSiteBlueprint`, `fetchWizardContext`, `updateWorkflowStep`)
|
||||
- Located in `frontend/src/services/api.ts`
|
||||
|
||||
### Zustand store
|
||||
| Store | Purpose |
|
||||
| --- | --- |
|
||||
| `useBuilderWorkflowStore` | Tracks `blueprintId`, `currentStep`, `completedSteps`, `blockingIssues`, `workflowState`, `context`, telemetry queue |
|
||||
- Actions: `initialize`, `refreshState`, `goToStep`, `completeStep`, `setBlockingIssue`, `clearBlockingIssue`, `flushTelemetry`, `reset`
|
||||
- Persists last blueprint + step in `builder-workflow-storage` (sessionStorage)
|
||||
|
||||
### Wizard shell & routing
|
||||
- New page: `WorkflowWizard` at `/sites/builder/workflow/:blueprintId`
|
||||
- Lazy-loaded via `App.tsx`
|
||||
- Refreshes context every 10s to keep telemetry/current state accurate
|
||||
- Progress indicator (`WizardProgress`) shows completed/current/blocked steps
|
||||
|
||||
### Step components
|
||||
| Step | Component | Status |
|
||||
| --- | --- | --- |
|
||||
| 1 – Business Details | `steps/BusinessDetailsStep.tsx` | **Functional** (saves blueprint + completes step) |
|
||||
| 2 – Cluster Assignment | `steps/ClusterAssignmentStep.tsx` | Placeholder UI (shows stats, next iteration: attach/detach clusters) |
|
||||
| 3 – Taxonomy Builder | `steps/TaxonomyBuilderStep.tsx` | Placeholder UI (future: taxonomy tree/table + imports) |
|
||||
| 4 – AI Sitemap Review | `steps/SitemapReviewStep.tsx` | Placeholder UI (future: grid w/ grouping + regenerate) |
|
||||
| 5 – Coverage Validation | `steps/CoverageValidationStep.tsx` | Placeholder UI (future: coverage cards + gating logic) |
|
||||
| 6 – Ideas Hand-off | `steps/IdeasHandoffStep.tsx` | Placeholder UI (future: page selection + prompt override) |
|
||||
|
||||
### Planner UX TODOs (next iteration)
|
||||
- Cluster matrix view linking back into wizard
|
||||
- Taxonomy management table with inline edits & imports
|
||||
- Planner dashboard banner if blueprint missing requirements
|
||||
|
||||
---
|
||||
|
||||
## Testing & Verification
|
||||
1. Set `USE_SITE_BUILDER_REFACTOR=true`
|
||||
2. Create or reuse a `SiteBlueprint` and open `/sites/builder/workflow/{id}`
|
||||
3. Confirm payload from `GET /workflow/context/` includes:
|
||||
- `workflow.steps` array with `status`, `code`, `message`
|
||||
- `cluster_summary` (counts + list)
|
||||
- `taxonomy_summary`
|
||||
- `coverage` (pages, statuses)
|
||||
- `next_actions`
|
||||
4. Step 1 (Business Details) should allow update/save → triggers workflow state update
|
||||
5. Steps 2‑6 currently show placeholders + gating alerts (will be wired to new UIs)
|
||||
|
||||
Automated tests pending: once UI solidified, add Cypress flows for each step + Zustand store unit tests.
|
||||
|
||||
---
|
||||
|
||||
## Open Items / Future Work
|
||||
- Build full step experiences (tables, drag/drop mapping, AI sitemap review UI)
|
||||
- Planner cluster matrix & taxonomy management views
|
||||
- Telemetry dispatcher (currently logs to console)
|
||||
- Accessibility polish: keyboard navigation, helper tooltips, context drawer
|
||||
- QA automation + e2e coverage
|
||||
|
||||
---
|
||||
|
||||
*Last updated: 2025-11-19*
|
||||
|
||||
@@ -1,85 +0,0 @@
|
||||
# Stage 3 – Writer / Linker / Optimizer Enhancements
|
||||
|
||||
## Objective
|
||||
Propagate the new metadata (clusters, taxonomies, entity types, attributes) through the planner → writer pipeline, enforce validation before publish, and unlock linker/optimizer capabilities. Stage 3 builds directly on Stage 2’s wizard outputs; all changes stay behind `USE_SITE_BUILDER_REFACTOR` until pilot-ready.
|
||||
|
||||
---
|
||||
|
||||
## Backend Plan
|
||||
|
||||
### 1. Metadata Audit & Backfill
|
||||
| Task | Description | Owner |
|
||||
| --- | --- | --- |
|
||||
| Backfill tables | Implement data migration using the stub added in `writer/migrations/0012_metadata_mapping_tables.py` to populate `ContentClusterMap`, `ContentTaxonomyMap`, `ContentAttributeMap` for legacy content/tasks. | Backend lead |
|
||||
| Entity defaults | Ensure existing Tasks/Content have sensible defaults for `entity_type`, `taxonomy_id`, `cluster_role` (e.g., `blog_post` + `supporting`). | Backend lead |
|
||||
| Audit script | Management command `python manage.py audit_site_metadata --site {id}` summarizing gaps per site. | Backend lead |
|
||||
|
||||
### 2. Pipeline Updates
|
||||
| Stage | Changes |
|
||||
| --- | --- |
|
||||
| Ideas → Tasks | Update Task creation so every task inherits cluster/taxonomy/attribute metadata. Enforce “no cluster, no idea/task” rule. |
|
||||
| Tasks → Content | Adjust `PageGenerationService` / writer Celery tasks to persist mappings into `ContentClusterMap`, `ContentTaxonomyMap`, `ContentAttributeMap`. |
|
||||
| AI Prompts | Update prompts to include cluster role, taxonomy context, product attributes. Leverage Stage 1 metadata fields like `dimension_meta`, `attribute_values`. |
|
||||
| Validation services | Add reusable validators (e.g., `ensure_required_attributes(task)`), returning structured errors for UI. |
|
||||
|
||||
### 3. Linker & Optimizer
|
||||
| Component | Requirements |
|
||||
| --- | --- |
|
||||
| LinkerService | Use mapping tables to suggest hub ↔ supporting ↔ attribute links; include priority score + context snippet. |
|
||||
| OptimizerService | Scorecards factoring cluster coverage, taxonomy alignment, attribute completeness. Provide `/sites/{id}/progress` and `/writer/content/{id}/validation` endpoints. |
|
||||
| Caching/Indexes | Add DB indexes for frequent join patterns (content ↔ cluster_map, taxonomy_map). |
|
||||
|
||||
### 4. API Additions
|
||||
- `GET /api/v1/sites/{id}/progress/` → cluster-level completion + validation flags.
|
||||
- `GET /api/v1/writer/content/{id}/validation/` → aggregated checklist for Writer UI.
|
||||
- `POST /api/v1/writer/content/{id}/validate/` → re-run validators and return actionable errors.
|
||||
|
||||
---
|
||||
|
||||
## Frontend Plan
|
||||
|
||||
### 1. Planner / Ideas / Writer Enhancements
|
||||
| Area | UX Changes |
|
||||
| --- | --- |
|
||||
| Planner Ideas & Writer Tasks lists | Show chips/columns for cluster, taxonomy, entity type, validation status; add filters. |
|
||||
| Writer Editor | Sidebar module summarizing cluster, taxonomy tree, attribute form; validation panel blocking publish until cleared. |
|
||||
| Linker UI | Group internal link suggestions by cluster role; show context snippet + CTA to insert link. |
|
||||
| Optimizer Dashboard | Scorecards per cluster dimension with color coding + “next action” cards. |
|
||||
| Site Progress Widgets | On site overview, show completion bars (hub/supporting/attribute); deep link to problematic clusters/pages. |
|
||||
|
||||
### 2. Validation & Notifications
|
||||
- Inline toasts + optional email when validation fails.
|
||||
- Publish button disabled until validators pass; display error list linking to relevant fields.
|
||||
- Credit reminder banner when user regenerates content/optimization tasks.
|
||||
|
||||
---
|
||||
|
||||
## Testing Strategy
|
||||
| Area | Automated | Manual |
|
||||
| --- | --- | --- |
|
||||
| Pipeline | Unit tests for Task → Content metadata persistence, Prompt builders. | End-to-end: blueprint → ideas → tasks → content. |
|
||||
| Validation | Tests ensuring validators trigger correct errors. | Attempt publish without taxonomy/attributes; confirm UX flow. |
|
||||
| Linker/Optimizer | Service tests for scoring & suggestions. | Performance profiling on large datasets; UX review. |
|
||||
| Progress Widgets | Component tests verifying counts. | Compare UI vs. database for pilot site. |
|
||||
|
||||
---
|
||||
|
||||
## Rollout Checklist
|
||||
1. Deploy Stage 3 backend with feature flag ON in staging.
|
||||
2. Run metadata backfill; verify progress dashboards and validators.
|
||||
3. QA regression: planner → writer flow, linker, optimizer.
|
||||
4. Pilot with internal content team; gather feedback on validation friction.
|
||||
5. Optimize slow queries (indexes/caching) before production rollout.
|
||||
6. Update training docs/videos for writers; enable flag gradually across accounts.
|
||||
|
||||
---
|
||||
|
||||
## Open Questions / Risks
|
||||
- Volume impact when backfilling large content sets? (Plan: chunked migrations + progress logs)
|
||||
- Telemetry volume for validator events? (Plan: aggregate counts; sample per site)
|
||||
- WordPress deploy parity: ensure metadata travels through sync (handled in Stage 4).
|
||||
|
||||
---
|
||||
|
||||
*Last updated: 2025-11-19*
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
# Stage 4 – Publishing & Sync Integration
|
||||
|
||||
## Objective
|
||||
Achieve feature parity between IGNY8-hosted deployments and WordPress sites using the shared metadata model introduced in Stages 1–3. This includes two-way sync for taxonomies/products, deployment readiness checks, and operational tooling.
|
||||
|
||||
---
|
||||
|
||||
## Backend Plan
|
||||
|
||||
### 1. Sync Architecture
|
||||
| Task | Description |
|
||||
| --- | --- |
|
||||
| Audit adapters | Review current WordPress adapter + sync service; confirm endpoints for categories, tags, WooCommerce attributes/products. |
|
||||
| Data mapping | Document mapping between WordPress taxonomies and IGNY8 `SiteBlueprintTaxonomy`, `ContentTaxonomyMap`, `external_reference` fields. |
|
||||
| Sync configs | Extend integration settings to store WordPress/Woo credentials, sync frequency, and site archetype. |
|
||||
|
||||
### 2. Enhancements
|
||||
| Area | Implementation |
|
||||
| --- | --- |
|
||||
| Import | `ContentSyncService` fetches WP taxonomies/products/custom post types -> maps to IGNY8 schema via `TaxonomyService`. Auto-create missing clusters/taxonomies with an `imported` flag. |
|
||||
| Export | `WordPressAdapter` ensures taxonomies exist before publishing posts/products. Pushes product attributes/tags ahead of content. |
|
||||
| Sync Health APIs | `/sites/{id}/sync/status`, `/sites/{id}/sync/run`, returning last sync time, mismatch counts, error logs. |
|
||||
| Deployment | `SitesRendererAdapter` consumes cluster/taxonomy metadata for navigation, breadcrumbs, internal links. Deployment readiness check ensures cluster coverage, content status, validation flags. |
|
||||
| Logging & Monitoring | Structured logs per sync run (duration, items processed, failures). Alerts for repeated sync failures or deployment errors. |
|
||||
|
||||
---
|
||||
|
||||
## Frontend Plan
|
||||
|
||||
### 1. Sync Dashboard
|
||||
| Component | Features |
|
||||
| --- | --- |
|
||||
| Parity indicators | Status icons for taxonomies, products, posts. |
|
||||
| Controls | Manual sync, retry failed items, view logs (with pagination/filtering). |
|
||||
| Detail drawer | Shows mismatched items, suggested fixes, quick links into Planner/Writer. |
|
||||
|
||||
### 2. Deployment Panel
|
||||
| Component | Features |
|
||||
| --- | --- |
|
||||
| Readiness checklist | Displays cluster coverage, content validation, sync status. |
|
||||
| Actions | Deploy and rollback buttons with confirmation modals and logging. |
|
||||
| Notifications | Toasts for success/failure; optional email/webhook integration. |
|
||||
|
||||
### 3. WordPress Connection UI
|
||||
| Task | Description |
|
||||
| --- | --- |
|
||||
| Integration status | Show credential health, last sync time, active site type. |
|
||||
| Troubleshooting | Inline helper text + links to docs/runbook. |
|
||||
|
||||
---
|
||||
|
||||
## Operational Runbooks
|
||||
- Sync troubleshooting steps (auth errors, taxonomy mismatches, WooCommerce throttling).
|
||||
- Rollback procedures for failed deployments.
|
||||
- Escalation path + scripts to force sync, clear queue, or recover failed deploy.
|
||||
|
||||
---
|
||||
|
||||
## Testing Strategy
|
||||
| Area | Automated | Manual |
|
||||
| --- | --- | --- |
|
||||
| Sync logic | Integration tests hitting mocked WP APIs, verifying mapping + retries. | Staging sync from live WP instance; verify taxonomy parity. |
|
||||
| Deployment | Renderer tests using fixture metadata to ensure navigation/internal links. | Deploy IGNY8 site; inspect front-end output, breadcrumbs, menus. |
|
||||
| Dashboards | Component/unit tests for Sync/Deployment panels. | Pilot user testing + UX review. |
|
||||
| Runbooks | N/A | Tabletop exercises for failure scenarios (sync fails, deploy rollback). |
|
||||
|
||||
---
|
||||
|
||||
## Rollout Checklist
|
||||
1. Enable Stage 4 flag in staging; run full import/export tests.
|
||||
2. Pilot with one IGNY8-hosted and one WordPress-hosted site.
|
||||
3. Train support on dashboards/runbooks; ensure alerting configured.
|
||||
4. Announce availability; roll out gradually to accounts with WordPress integrations.
|
||||
5. Monitor logs/alerts during first production syncs; iterate on tooling as needed.
|
||||
|
||||
---
|
||||
|
||||
## Risks & Mitigations
|
||||
| Risk | Mitigation |
|
||||
| --- | --- |
|
||||
| API rate limits (WordPress/WooCommerce) | Backoff + batching, highlight in dashboard. |
|
||||
| Data mismatches (taxonomies/products) | Detailed diff view + retry actions + runbook. |
|
||||
| Deployment failures | Preflight checks + rollback buttons + structured logs. |
|
||||
| Operational overhead | Alerting dashboards + documented on-call runbook. |
|
||||
|
||||
---
|
||||
|
||||
*Last updated: 2025-11-19*
|
||||
|
||||
24
site-builder/.gitignore
vendored
24
site-builder/.gitignore
vendored
@@ -1,24 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -1,18 +0,0 @@
|
||||
# Site Builder Dev Image (Node 22 to satisfy Vite requirements)
|
||||
FROM node:22-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copy package manifests first for better caching
|
||||
COPY package*.json ./
|
||||
|
||||
RUN npm install
|
||||
|
||||
# Copy source (still bind-mounted at runtime, but needed for initial run)
|
||||
COPY . .
|
||||
|
||||
EXPOSE 5175
|
||||
|
||||
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0", "--port", "5175"]
|
||||
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
@@ -1,23 +0,0 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
tseslint.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
},
|
||||
])
|
||||
@@ -1,13 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>site-builder</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
6025
site-builder/package-lock.json
generated
6025
site-builder/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,42 +0,0 @@
|
||||
{
|
||||
"name": "site-builder",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.13.2",
|
||||
"lucide-react": "^0.554.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-hook-form": "^7.66.0",
|
||||
"react-router-dom": "^7.9.6",
|
||||
"zustand": "^5.0.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"@testing-library/react": "^16.2.0",
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@types/node": "^24.10.0",
|
||||
"@types/react": "^19.2.2",
|
||||
"@types/react-dom": "^19.2.2",
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
"@vitejs/plugin-react": "^5.1.0",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.5.0",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.46.3",
|
||||
"vite": "^7.2.2",
|
||||
"vitest": "^2.1.5",
|
||||
"jsdom": "^25.0.1"
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1,330 +0,0 @@
|
||||
.app-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
min-height: 100vh;
|
||||
background: #f5f7fb;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
border-right: 1px solid rgba(15, 23, 42, 0.08);
|
||||
padding: 2rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.app-sidebar .brand span {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-sidebar .brand small {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.app-sidebar nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.app-sidebar a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.app-sidebar a.active {
|
||||
background: #eef2ff;
|
||||
color: #4338ca;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
padding: 2rem 3rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.wizard-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.wizard-progress {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wizard-progress__dot {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #94a3b8;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wizard-progress__dot span {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid currentColor;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.wizard-progress__dot.is-active {
|
||||
color: #4338ca;
|
||||
}
|
||||
|
||||
.wizard-step {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.wizard-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.wizard-actions button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(67, 56, 202, 0.3);
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wizard-actions button.primary {
|
||||
background: #4338ca;
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.wizard-actions button.ghost,
|
||||
.ghost {
|
||||
background: transparent;
|
||||
border-color: rgba(67, 56, 202, 0.35);
|
||||
color: #4338ca;
|
||||
}
|
||||
|
||||
.wizard-actions button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.sb-error {
|
||||
color: #dc2626;
|
||||
margin: 0.5rem 0 0;
|
||||
}
|
||||
|
||||
.sb-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
.sb-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.95rem;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.sb-field input,
|
||||
.sb-field select,
|
||||
.sb-field textarea {
|
||||
border: 1px solid rgba(15, 23, 42, 0.15);
|
||||
border-radius: 10px;
|
||||
padding: 0.65rem 0.85rem;
|
||||
font-size: 0.95rem;
|
||||
font-family: inherit;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.sb-pill-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.sb-pill {
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(67, 56, 202, 0.1);
|
||||
color: #4338ca;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.sb-pill button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sb-objective-input {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.sb-objective-input input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sb-objective-input button {
|
||||
border: none;
|
||||
background: #0f172a;
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 0.65rem 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sb-blueprint-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.status-dot::before {
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.status-ready {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.status-generating {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.status-draft {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.preview-canvas {
|
||||
background: #fff;
|
||||
border-radius: 18px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 8px 26px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.preview-nav {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.preview-nav button {
|
||||
border: 1px solid rgba(15, 23, 42, 0.1);
|
||||
background: #f8fafc;
|
||||
border-radius: 999px;
|
||||
padding: 0.35rem 0.85rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.preview-nav button.is-active {
|
||||
background: #4338ca;
|
||||
color: white;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.preview-hero {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.preview-hero .preview-label {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.08em;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.preview-blocks {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.preview-block {
|
||||
border: 1px dashed rgba(67, 56, 202, 0.2);
|
||||
border-radius: 14px;
|
||||
padding: 1rem;
|
||||
background: rgba(67, 56, 202, 0.04);
|
||||
}
|
||||
|
||||
.sb-blueprint-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.sb-blueprint-list li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.sb-blueprint-list strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sb-blueprint-list span {
|
||||
color: #475569;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.sb-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
import { NavLink, Route, Routes } from 'react-router-dom';
|
||||
import { Wand2, LayoutTemplate, PanelsTopLeft } from 'lucide-react';
|
||||
import { WizardPage } from './pages/wizard/WizardPage';
|
||||
import { PreviewCanvas } from './pages/preview/PreviewCanvas';
|
||||
import { SiteDashboard } from './pages/dashboard/SiteDashboard';
|
||||
import './App.css';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<aside className="app-sidebar">
|
||||
<div className="brand">
|
||||
<span>Site Builder</span>
|
||||
<small>Phase 3 · wizard + preview</small>
|
||||
</div>
|
||||
<nav>
|
||||
<NavLink to="/" end>
|
||||
<Wand2 size={18} />
|
||||
Wizard
|
||||
</NavLink>
|
||||
<NavLink to="/preview">
|
||||
<LayoutTemplate size={18} />
|
||||
Preview
|
||||
</NavLink>
|
||||
<NavLink to="/dashboard">
|
||||
<PanelsTopLeft size={18} />
|
||||
Blueprint history
|
||||
</NavLink>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main className="app-main">
|
||||
<Routes>
|
||||
<Route path="/" element={<WizardPage />} />
|
||||
<Route path="/preview" element={<PreviewCanvas />} />
|
||||
<Route path="/dashboard" element={<SiteDashboard />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,86 +0,0 @@
|
||||
import axios from 'axios';
|
||||
import type {
|
||||
BuilderFormData,
|
||||
PageBlueprint,
|
||||
SiteBlueprint,
|
||||
SiteStructure,
|
||||
} from '../types/siteBuilder';
|
||||
|
||||
const API_ROOT = import.meta.env.VITE_API_URL ?? 'http://localhost:8010/api';
|
||||
const BASE_PATH = `${API_ROOT}/v1/site-builder`;
|
||||
|
||||
const client = axios.create({
|
||||
baseURL: BASE_PATH,
|
||||
withCredentials: true,
|
||||
});
|
||||
|
||||
export interface CreateBlueprintPayload {
|
||||
name: string;
|
||||
description?: string;
|
||||
site_id: number;
|
||||
sector_id: number;
|
||||
hosting_type: BuilderFormData['hostingType'];
|
||||
config_json: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface GenerateStructurePayload {
|
||||
business_brief: string;
|
||||
objectives: string[];
|
||||
style: BuilderFormData['style'];
|
||||
metadata?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export const builderApi = {
|
||||
async getBlueprint(blueprintId: number): Promise<SiteBlueprint> {
|
||||
const res = await client.get(`/blueprints/${blueprintId}/`);
|
||||
return res.data;
|
||||
},
|
||||
async listBlueprints(): Promise<SiteBlueprint[]> {
|
||||
const res = await client.get('/blueprints/');
|
||||
if (Array.isArray(res.data?.results)) {
|
||||
return res.data.results as SiteBlueprint[];
|
||||
}
|
||||
return Array.isArray(res.data) ? res.data : [];
|
||||
},
|
||||
|
||||
async createBlueprint(payload: CreateBlueprintPayload): Promise<SiteBlueprint> {
|
||||
const res = await client.post('/blueprints/', payload);
|
||||
return res.data;
|
||||
},
|
||||
|
||||
async generateStructure(
|
||||
blueprintId: number,
|
||||
payload: GenerateStructurePayload,
|
||||
): Promise<{ task_id?: string; success?: boolean; structure?: SiteStructure }> {
|
||||
const res = await client.post(`/blueprints/${blueprintId}/generate_structure/`, payload);
|
||||
return res.data;
|
||||
},
|
||||
|
||||
async listPages(blueprintId: number): Promise<PageBlueprint[]> {
|
||||
const res = await client.get(`/pages/?site_blueprint=${blueprintId}`);
|
||||
return Array.isArray(res.data?.results) ? res.data.results : res.data;
|
||||
},
|
||||
|
||||
async generateAllPages(
|
||||
blueprintId: number,
|
||||
options?: { pageIds?: number[]; force?: boolean },
|
||||
): Promise<{ success: boolean; pages_queued: number; task_ids: number[]; celery_task_id?: string }> {
|
||||
const res = await client.post(`/blueprints/${blueprintId}/generate_all_pages/`, {
|
||||
page_ids: options?.pageIds,
|
||||
force: options?.force || false,
|
||||
});
|
||||
return res.data?.data || res.data;
|
||||
},
|
||||
|
||||
async createTasksForPages(
|
||||
blueprintId: number,
|
||||
pageIds?: number[],
|
||||
): Promise<{ tasks: unknown[]; count: number }> {
|
||||
const res = await client.post(`/blueprints/${blueprintId}/create_tasks/`, {
|
||||
page_ids: pageIds,
|
||||
});
|
||||
return res.data?.data || res.data;
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const API_ROOT = import.meta.env.VITE_API_URL ?? 'http://localhost:8010/api';
|
||||
|
||||
const client = axios.create({
|
||||
baseURL: API_ROOT,
|
||||
withCredentials: true,
|
||||
});
|
||||
|
||||
export interface TaskProgressResponse {
|
||||
state: 'PENDING' | 'PROGRESS' | 'SUCCESS' | 'FAILURE';
|
||||
meta?: {
|
||||
phase?: string;
|
||||
percentage?: number;
|
||||
message?: string;
|
||||
error?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const systemApi = {
|
||||
async getTaskProgress(taskId: string): Promise<TaskProgressResponse> {
|
||||
const res = await client.get(`/v1/system/settings/task_progress/${taskId}/`);
|
||||
return res.data;
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -1,45 +0,0 @@
|
||||
.sb-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(15, 23, 42, 0.08);
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.sb-card__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.sb-card__title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sb-card__description {
|
||||
color: #475569;
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.sb-card__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.sb-card__footer {
|
||||
border-top: 1px solid rgba(15, 23, 42, 0.06);
|
||||
padding-top: 1rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
import type { PropsWithChildren, ReactNode } from 'react';
|
||||
import './Card.css';
|
||||
|
||||
interface CardProps extends PropsWithChildren {
|
||||
title?: ReactNode;
|
||||
description?: ReactNode;
|
||||
footer?: ReactNode;
|
||||
}
|
||||
|
||||
export function Card({ title, description, footer, children }: CardProps) {
|
||||
return (
|
||||
<section className="sb-card">
|
||||
{(title || description) && (
|
||||
<header className="sb-card__header">
|
||||
{title && <h2 className="sb-card__title">{title}</h2>}
|
||||
{description && <p className="sb-card__description">{description}</p>}
|
||||
</header>
|
||||
)}
|
||||
<div className="sb-card__body">{children}</div>
|
||||
{footer && <footer className="sb-card__footer">{footer}</footer>}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,118 +0,0 @@
|
||||
.progress-modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.progress-modal {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
min-width: 400px;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.progress-modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.progress-modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.progress-modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.progress-modal-close:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.progress-modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.progress-modal-message {
|
||||
margin: 0;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.progress-modal-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.progress-modal-bar-track {
|
||||
height: 8px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-modal-bar-fill {
|
||||
height: 100%;
|
||||
background: #3b82f6;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-modal-bar-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress-modal-spinner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.progress-modal-spinner .spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.progress-modal-task-id {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress-modal-task-id code {
|
||||
background: #f3f4f6;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
import { useEffect } from 'react';
|
||||
import { X, Loader2 } from 'lucide-react';
|
||||
import './ProgressModal.css';
|
||||
|
||||
interface ProgressModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
title: string;
|
||||
message?: string;
|
||||
progress?: {
|
||||
current: number;
|
||||
total: number;
|
||||
};
|
||||
taskId?: string;
|
||||
}
|
||||
|
||||
export function ProgressModal({ isOpen, onClose, title, message, progress, taskId }: ProgressModalProps) {
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
return () => {
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const progressPercent = progress ? Math.round((progress.current / progress.total) * 100) : 0;
|
||||
|
||||
return (
|
||||
<div className="progress-modal-overlay" onClick={onClose}>
|
||||
<div className="progress-modal" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="progress-modal-header">
|
||||
<h3>{title}</h3>
|
||||
<button type="button" className="progress-modal-close" onClick={onClose} aria-label="Close">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="progress-modal-content">
|
||||
{message && <p className="progress-modal-message">{message}</p>}
|
||||
|
||||
{progress && (
|
||||
<div className="progress-modal-bar">
|
||||
<div className="progress-modal-bar-track">
|
||||
<div
|
||||
className="progress-modal-bar-fill"
|
||||
style={{ width: `${progressPercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="progress-modal-bar-text">
|
||||
{progress.current} of {progress.total} pages
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!progress && (
|
||||
<div className="progress-modal-spinner">
|
||||
<Loader2 className="spin" size={24} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{taskId && (
|
||||
<p className="progress-modal-task-id">
|
||||
Task ID: <code>{taskId}</code>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
import './HeroBlock.css';
|
||||
|
||||
interface HeroBlockProps {
|
||||
heading: string;
|
||||
subheading?: string;
|
||||
ctaLabel?: string;
|
||||
secondaryCta?: string;
|
||||
badge?: string;
|
||||
}
|
||||
|
||||
export function HeroBlock({ heading, subheading, ctaLabel, secondaryCta, badge }: HeroBlockProps) {
|
||||
return (
|
||||
<div className="sb-hero-block">
|
||||
{badge && <span className="sb-hero-block__badge">{badge}</span>}
|
||||
<h1>{heading}</h1>
|
||||
{subheading && <p>{subheading}</p>}
|
||||
<div className="sb-hero-block__ctas">
|
||||
{ctaLabel && <button>{ctaLabel}</button>}
|
||||
{secondaryCta && (
|
||||
<button className="ghost" type="button">
|
||||
{secondaryCta}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
.sb-page-canvas {
|
||||
border-radius: 24px;
|
||||
padding: 2.5rem;
|
||||
box-shadow: 0 30px 80px rgba(15, 23, 42, 0.12);
|
||||
border: 1px solid rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.sb-page-canvas__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.25rem;
|
||||
}
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import { palette } from '../theme';
|
||||
import './PageCanvas.css';
|
||||
|
||||
export function PageCanvas({ children }: PropsWithChildren) {
|
||||
return (
|
||||
<article className="sb-page-canvas" style={{ background: palette.background }}>
|
||||
<div className="sb-page-canvas__body">{children}</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
.sb-section {
|
||||
border-radius: 20px;
|
||||
padding: 1.75rem;
|
||||
border: 1px solid rgba(15, 23, 42, 0.07);
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.sb-section--soft {
|
||||
background: #f4f6ff;
|
||||
}
|
||||
|
||||
.sb-section__header h3 {
|
||||
margin: 0.15rem 0;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sb-section__subtitle {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.sb-section__overline {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: #6366f1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sb-section__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
import type { PropsWithChildren, ReactNode } from 'react';
|
||||
import './Section.css';
|
||||
|
||||
interface SectionProps extends PropsWithChildren {
|
||||
overline?: string;
|
||||
title?: ReactNode;
|
||||
subtitle?: ReactNode;
|
||||
background?: 'surface' | 'soft';
|
||||
}
|
||||
|
||||
export function Section({ overline, title, subtitle, background = 'surface', children }: SectionProps) {
|
||||
return (
|
||||
<section className={`sb-section sb-section--${background}`}>
|
||||
{(overline || title || subtitle) && (
|
||||
<header className="sb-section__header">
|
||||
{overline && <p className="sb-section__overline">{overline}</p>}
|
||||
{title && <h3>{title}</h3>}
|
||||
{subtitle && <p className="sb-section__subtitle">{subtitle}</p>}
|
||||
</header>
|
||||
)}
|
||||
<div className="sb-section__content">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
export const palette = {
|
||||
background: '#f8fbff',
|
||||
surface: '#ffffff',
|
||||
accent: '#6366f1',
|
||||
accentSoft: '#eef2ff',
|
||||
text: '#0f172a',
|
||||
textMuted: '#64748b',
|
||||
border: 'rgba(15, 23, 42, 0.08)',
|
||||
};
|
||||
|
||||
export const typography = {
|
||||
title: {
|
||||
fontSize: '2.5rem',
|
||||
fontWeight: 700,
|
||||
lineHeight: 1.1,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: '1.15rem',
|
||||
color: palette.textMuted,
|
||||
lineHeight: 1.5,
|
||||
},
|
||||
label: {
|
||||
fontSize: '0.75rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.08em',
|
||||
color: palette.accent,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,102 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { systemApi, type TaskProgressResponse } from '../api/system.api';
|
||||
|
||||
type TaskStatus = 'idle' | 'pending' | 'processing' | 'completed' | 'error';
|
||||
|
||||
interface UseTaskProgressOptions {
|
||||
onComplete?: () => void;
|
||||
onError?: (message: string) => void;
|
||||
onUpdate?: (meta: TaskProgressResponse['meta']) => void;
|
||||
}
|
||||
|
||||
interface TaskProgressState {
|
||||
status: TaskStatus;
|
||||
percentage: number;
|
||||
message?: string;
|
||||
phase?: string;
|
||||
}
|
||||
|
||||
export function useTaskProgress(taskId: string | null, options: UseTaskProgressOptions = {}) {
|
||||
const { onComplete, onError, onUpdate } = options;
|
||||
const [state, setState] = useState<TaskProgressState>({
|
||||
status: 'idle',
|
||||
percentage: 0,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!taskId) {
|
||||
setState({ status: 'idle', percentage: 0 });
|
||||
return;
|
||||
}
|
||||
|
||||
let isActive = true;
|
||||
let interval: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
const mapResponseToState = (response: TaskProgressResponse): TaskProgressState => {
|
||||
const { state: taskState, meta } = response;
|
||||
const percentage = typeof meta?.percentage === 'number' ? meta.percentage : 0;
|
||||
const message = meta?.message;
|
||||
const phase = meta?.phase;
|
||||
|
||||
if (taskState === 'SUCCESS') {
|
||||
return { status: 'completed', percentage: 100, message: message ?? 'Site structure ready.', phase };
|
||||
}
|
||||
if (taskState === 'FAILURE') {
|
||||
return { status: 'error', percentage, message: meta?.error ?? message ?? 'Task failed.', phase };
|
||||
}
|
||||
if (taskState === 'PROGRESS') {
|
||||
return { status: 'processing', percentage: Math.min(percentage || 10, 95), message, phase };
|
||||
}
|
||||
return { status: 'pending', percentage, message, phase };
|
||||
};
|
||||
|
||||
const poll = async () => {
|
||||
try {
|
||||
const response = await systemApi.getTaskProgress(taskId);
|
||||
|
||||
if (!isActive) return;
|
||||
|
||||
const nextState = mapResponseToState(response);
|
||||
setState(nextState);
|
||||
onUpdate?.(response.meta);
|
||||
|
||||
if (nextState.status === 'completed') {
|
||||
onComplete?.();
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
interval = null;
|
||||
}
|
||||
} else if (nextState.status === 'error') {
|
||||
onError?.(nextState.message ?? 'Task failed');
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
interval = null;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (!isActive) return;
|
||||
const message = error instanceof Error ? error.message : 'Unable to load task progress';
|
||||
setState({ status: 'error', percentage: 0, message });
|
||||
onError?.(message);
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
interval = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
poll();
|
||||
interval = setInterval(poll, 2000);
|
||||
|
||||
return () => {
|
||||
isActive = false;
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
};
|
||||
}, [taskId, onComplete, onError, onUpdate]);
|
||||
|
||||
return state;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
:root {
|
||||
font-family: 'Inter', 'Inter var', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
color: #0f172a;
|
||||
background-color: #f5f7fb;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import './index.css';
|
||||
import App from './App.tsx';
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</StrictMode>,
|
||||
);
|
||||
@@ -1,101 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Loader2, Play } from 'lucide-react';
|
||||
import { builderApi } from '../../api/builder.api';
|
||||
import type { SiteBlueprint } from '../../types/siteBuilder';
|
||||
import { Card } from '../../components/common/Card';
|
||||
import { useBuilderStore } from '../../state/builderStore';
|
||||
import { ProgressModal } from '../../components/common/ProgressModal';
|
||||
|
||||
export function SiteDashboard() {
|
||||
const [blueprints, setBlueprints] = useState<SiteBlueprint[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | undefined>();
|
||||
const { generateAllPages, isGenerating, generationProgress } = useBuilderStore();
|
||||
const [showProgress, setShowProgress] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await builderApi.listBlueprints();
|
||||
setBlueprints(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Unable to load blueprints');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const handleGenerateAll = async (blueprintId: number) => {
|
||||
setShowProgress(true);
|
||||
try {
|
||||
await generateAllPages(blueprintId);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to generate pages');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card title="Blueprint history" description="Every generated structure is stored and can be reopened.">
|
||||
{loading && (
|
||||
<div className="sb-loading">
|
||||
<Loader2 className="spin" size={18} /> Loading blueprints…
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && <p className="sb-error">{error}</p>}
|
||||
|
||||
{!loading && !blueprints.length && (
|
||||
<p className="sb-muted">You haven't generated any sites yet. Launch the wizard to create your first one.</p>
|
||||
)}
|
||||
|
||||
<ul className="sb-blueprint-list">
|
||||
{blueprints.map((bp) => (
|
||||
<li key={bp.id}>
|
||||
<div>
|
||||
<strong>{bp.name}</strong>
|
||||
<span>{bp.description}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
{bp.status === 'ready' && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleGenerateAll(bp.id)}
|
||||
disabled={isGenerating}
|
||||
className="sb-button sb-button--primary"
|
||||
style={{ display: 'flex', alignItems: 'center', gap: '4px', padding: '4px 12px' }}
|
||||
>
|
||||
<Play size={14} />
|
||||
Generate All Pages
|
||||
</button>
|
||||
)}
|
||||
<span className={`status-dot status-${bp.status}`}>{bp.status}</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
|
||||
<ProgressModal
|
||||
isOpen={showProgress}
|
||||
onClose={() => setShowProgress(false)}
|
||||
title="Generating Pages"
|
||||
message={isGenerating ? 'Generating content for all pages...' : 'Generation completed!'}
|
||||
progress={
|
||||
generationProgress
|
||||
? {
|
||||
current: generationProgress.pagesQueued,
|
||||
total: generationProgress.pagesQueued,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
taskId={generationProgress?.celeryTaskId}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,353 +0,0 @@
|
||||
import { useMemo } from 'react';
|
||||
import {
|
||||
FeatureGridBlock,
|
||||
HeroBlock,
|
||||
MarketingTemplate,
|
||||
StatsPanel,
|
||||
type FeatureGridBlockProps,
|
||||
type StatItem,
|
||||
} from '@shared';
|
||||
import { useSiteDefinitionStore } from '../../state/siteDefinitionStore';
|
||||
import { useBuilderStore } from '../../state/builderStore';
|
||||
import type { PageBlock, PageBlueprint, SiteStructure } from '../../types/siteBuilder';
|
||||
|
||||
type StructuredContent = Record<string, unknown> & {
|
||||
items?: unknown[];
|
||||
eyebrow?: string;
|
||||
ctaLabel?: string;
|
||||
supportingCopy?: string;
|
||||
columns?: number;
|
||||
};
|
||||
|
||||
export function PreviewCanvas() {
|
||||
const { structure, pages, selectedSlug, selectPage } = useSiteDefinitionStore();
|
||||
const { selectedPageIds, togglePageSelection, selectAllPages, clearPageSelection, activeBlueprint } =
|
||||
useBuilderStore();
|
||||
|
||||
const page = useMemo(() => {
|
||||
if (structure?.pages?.length) {
|
||||
return structure.pages.find((p) => p.slug === selectedSlug) ?? structure.pages[0];
|
||||
}
|
||||
return pages.find((p) => p.slug === selectedSlug) ?? pages[0];
|
||||
}, [structure, pages, selectedSlug]);
|
||||
|
||||
if (!structure && !pages.length) {
|
||||
return (
|
||||
<div className="preview-placeholder">
|
||||
<p>Generate a blueprint to see live previews of every page.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const navItems = structure?.site?.primary_navigation ?? pages.map((p) => p.slug);
|
||||
const blocks = getBlocks(page);
|
||||
const heroBlock = blocks.find((block) => normalizeType(block.type) === 'hero');
|
||||
const contentBlocks = heroBlock ? blocks.filter((block) => block !== heroBlock) : blocks;
|
||||
|
||||
const heroSection =
|
||||
heroBlock || page
|
||||
? renderBlock(heroBlock ?? buildFallbackHero(page, structure))
|
||||
: null;
|
||||
|
||||
const sectionNodes =
|
||||
contentBlocks.length > 0
|
||||
? contentBlocks.map((block, index) => <div key={`${block.type}-${index}`}>{renderBlock(block)}</div>)
|
||||
: buildFallbackSections(page);
|
||||
|
||||
const sidebar = (
|
||||
<div className="preview-sidebar">
|
||||
<p className="preview-label">Page objective</p>
|
||||
<h4>{page?.objective ?? 'Launch a high-converting page'}</h4>
|
||||
<ul className="preview-sidebar__list">
|
||||
{buildSidebarInsights(page, structure).map((insight) => (
|
||||
<li key={insight.label}>
|
||||
<span>{insight.label}</span>
|
||||
<strong>{insight.value}</strong>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Only show page selection if we have actual PageBlueprint objects with IDs
|
||||
const hasPageBlueprints = pages.length > 0 && pages.every((p) => p.id > 0);
|
||||
|
||||
const allSelected = hasPageBlueprints && pages.length > 0 && selectedPageIds.length === pages.length;
|
||||
const someSelected = hasPageBlueprints && selectedPageIds.length > 0 && selectedPageIds.length < pages.length;
|
||||
|
||||
return (
|
||||
<div className="preview-canvas">
|
||||
<div className="preview-nav">
|
||||
{hasPageBlueprints && activeBlueprint && (
|
||||
<div className="preview-page-selection" style={{ marginBottom: '12px', padding: '8px', background: '#f5f5f5', borderRadius: '4px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allSelected}
|
||||
ref={(input) => {
|
||||
if (input) input.indeterminate = someSelected;
|
||||
}}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
selectAllPages();
|
||||
} else {
|
||||
clearPageSelection();
|
||||
}
|
||||
}}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
<label style={{ cursor: 'pointer', fontSize: '14px', fontWeight: '500' }}>
|
||||
Select pages for bulk generation ({selectedPageIds.length} selected)
|
||||
</label>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
|
||||
{pages.map((p) => {
|
||||
const isSelected = selectedPageIds.includes(p.id);
|
||||
return (
|
||||
<label
|
||||
key={p.id}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '12px',
|
||||
padding: '4px 8px',
|
||||
background: isSelected ? '#e3f2fd' : 'white',
|
||||
border: `1px solid ${isSelected ? '#2196f3' : '#ddd'}`,
|
||||
borderRadius: '4px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={() => togglePageSelection(p.id)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
<span>{p.title || p.slug.replace('-', ' ')}</span>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{navItems?.map((slug) => (
|
||||
<button
|
||||
key={slug}
|
||||
type="button"
|
||||
onClick={() => selectPage(slug)}
|
||||
className={slug === (page?.slug ?? '') ? 'is-active' : ''}
|
||||
>
|
||||
{slug.replace('-', ' ')}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<MarketingTemplate hero={heroSection} sections={sectionNodes} sidebar={sidebar} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getBlocks(
|
||||
page: (SiteStructure['pages'][number] & { blocks_json?: PageBlock[] }) | PageBlueprint | undefined,
|
||||
) {
|
||||
if (!page) return [];
|
||||
const fromStructure = (page as { blocks?: PageBlock[] }).blocks;
|
||||
if (Array.isArray(fromStructure)) return fromStructure;
|
||||
const fromBlueprint = (page as PageBlueprint).blocks_json;
|
||||
return Array.isArray(fromBlueprint) ? fromBlueprint : [];
|
||||
}
|
||||
|
||||
function renderBlock(block?: PageBlock) {
|
||||
if (!block) return null;
|
||||
const type = normalizeType(block.type);
|
||||
const structuredContent = extractStructuredContent(block);
|
||||
const listContent = extractListContent(block, structuredContent);
|
||||
|
||||
if (type === 'hero') {
|
||||
return (
|
||||
<HeroBlock
|
||||
eyebrow={structuredContent.eyebrow as string | undefined}
|
||||
title={block.heading ?? 'Untitled hero'}
|
||||
subtitle={block.subheading ?? (structuredContent.supportingCopy as string | undefined)}
|
||||
ctaLabel={(structuredContent.ctaLabel as string | undefined) ?? undefined}
|
||||
supportingContent={
|
||||
listContent.length > 0 ? (
|
||||
<ul>
|
||||
{listContent.map((item) => (
|
||||
<li key={String(item)}>{String(item)}</li>
|
||||
))}
|
||||
</ul>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'feature-grid' || type === 'features' || type === 'value-props') {
|
||||
const features = toFeatureList(listContent, structuredContent.items);
|
||||
const columns = normalizeColumns(structuredContent.columns, features.length);
|
||||
return <FeatureGridBlock heading={block.heading} features={features} columns={columns} />;
|
||||
}
|
||||
|
||||
if (type === 'stats' || type === 'metrics') {
|
||||
const stats = toStatItems(listContent, structuredContent.items, block);
|
||||
if (!stats.length) return defaultBlock(block);
|
||||
return <StatsPanel heading={block.heading} stats={stats} />;
|
||||
}
|
||||
|
||||
return defaultBlock(block);
|
||||
}
|
||||
|
||||
function defaultBlock(block: PageBlock) {
|
||||
return (
|
||||
<div className="preview-block preview-block--legacy">
|
||||
{block.heading && <h4>{block.heading}</h4>}
|
||||
{block.subheading && <p>{block.subheading}</p>}
|
||||
{Array.isArray(block.content) && (
|
||||
<ul>
|
||||
{block.content.map((item) => (
|
||||
<li key={item}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function normalizeType(type?: string) {
|
||||
return (type ?? '').toLowerCase();
|
||||
}
|
||||
|
||||
function extractStructuredContent(block: PageBlock): StructuredContent {
|
||||
if (Array.isArray(block.content)) {
|
||||
return {};
|
||||
}
|
||||
return (block.content ?? {}) as StructuredContent;
|
||||
}
|
||||
|
||||
function extractListContent(block: PageBlock, structuredContent: StructuredContent): unknown[] {
|
||||
if (Array.isArray(block.content)) {
|
||||
return block.content;
|
||||
}
|
||||
if (Array.isArray(structuredContent.items)) {
|
||||
return structuredContent.items;
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
function toFeatureList(listItems: unknown[], structuredItems?: unknown[]): FeatureGridBlockProps['features'] {
|
||||
const source = structuredItems && Array.isArray(structuredItems) && structuredItems.length > 0 ? structuredItems : listItems;
|
||||
return source.map((item) => {
|
||||
if (typeof item === 'string') {
|
||||
return { title: item };
|
||||
}
|
||||
if (typeof item === 'object' && item) {
|
||||
const record = item as Record<string, unknown>;
|
||||
return {
|
||||
title: String(record.title ?? record.heading ?? 'Feature'),
|
||||
description: record.description ? String(record.description) : undefined,
|
||||
icon: record.icon ? String(record.icon) : undefined,
|
||||
};
|
||||
}
|
||||
return { title: String(item) };
|
||||
});
|
||||
}
|
||||
|
||||
function toStatItems(
|
||||
listItems: unknown[],
|
||||
structuredItems: unknown[] | undefined,
|
||||
block: PageBlock,
|
||||
): StatItem[] {
|
||||
const source = structuredItems && Array.isArray(structuredItems) && structuredItems.length > 0 ? structuredItems : listItems;
|
||||
return source
|
||||
.map((item, index) => {
|
||||
if (typeof item === 'string') {
|
||||
return {
|
||||
label: block.heading ?? `Metric ${index + 1}`,
|
||||
value: item,
|
||||
};
|
||||
}
|
||||
if (typeof item === 'object' && item) {
|
||||
const record = item as Record<string, unknown>;
|
||||
const label = record.label ?? record.title ?? `Metric ${index + 1}`;
|
||||
const value = record.value ?? record.metric ?? record.score;
|
||||
if (!value) return null;
|
||||
return {
|
||||
label: String(label),
|
||||
value: String(value),
|
||||
description: record.description ? String(record.description) : undefined,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.filter((stat): stat is StatItem => Boolean(stat));
|
||||
}
|
||||
|
||||
function normalizeColumns(
|
||||
candidate: StructuredContent['columns'],
|
||||
featureCount: number,
|
||||
): FeatureGridBlockProps['columns'] {
|
||||
const inferred = typeof candidate === 'number' ? candidate : featureCount >= 4 ? 4 : featureCount === 2 ? 2 : 3;
|
||||
if (inferred <= 2) return 2;
|
||||
if (inferred >= 4) return 4;
|
||||
return 3;
|
||||
}
|
||||
|
||||
function buildFallbackHero(
|
||||
page: SiteStructure['pages'][number] | PageBlueprint | undefined,
|
||||
structure: SiteStructure | undefined,
|
||||
): PageBlock {
|
||||
return {
|
||||
type: 'hero',
|
||||
heading: page?.title ?? 'Site Builder preview',
|
||||
subheading: structure?.site?.hero_message ?? 'Preview updates as the AI hydrates your blueprint.',
|
||||
content: Array.isArray(structure?.site?.secondary_navigation) ? structure?.site?.secondary_navigation : [],
|
||||
};
|
||||
}
|
||||
|
||||
function buildFallbackSections(page: SiteStructure['pages'][number] | PageBlueprint | undefined) {
|
||||
return [
|
||||
<FeatureGridBlock
|
||||
key="fallback-features"
|
||||
heading="Generated sections"
|
||||
features={[
|
||||
{ title: 'AI messaging kit', description: 'Structured copy generated for each funnel stage.' },
|
||||
{ title: 'Audience resonance', description: 'Language tuned to your target segment.' },
|
||||
{ title: 'Conversion spine', description: 'CTA hierarchy anchored to your objectives.' },
|
||||
]}
|
||||
/>,
|
||||
<StatsPanel
|
||||
key="fallback-stats"
|
||||
heading="Blueprint signals"
|
||||
stats={[
|
||||
{ label: 'Page type', value: page?.type ?? 'Landing' },
|
||||
{ label: 'Status', value: page?.status ?? 'Draft' },
|
||||
{ label: 'Blocks', value: '0' },
|
||||
]}
|
||||
/>,
|
||||
];
|
||||
}
|
||||
|
||||
function buildSidebarInsights(
|
||||
page: SiteStructure['pages'][number] | PageBlueprint | undefined,
|
||||
structure: SiteStructure | undefined,
|
||||
) {
|
||||
return [
|
||||
{
|
||||
label: 'Primary CTA',
|
||||
value: page?.primary_cta ?? 'Book a demo',
|
||||
},
|
||||
{
|
||||
label: 'Tone',
|
||||
value: structure?.site?.tone ?? 'Confident & clear',
|
||||
},
|
||||
{
|
||||
label: 'Status',
|
||||
value: page?.status ?? 'Draft',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,106 +0,0 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { PreviewCanvas } from '../PreviewCanvas';
|
||||
import { useSiteDefinitionStore } from '../../../state/siteDefinitionStore';
|
||||
|
||||
vi.mock('../../../state/siteDefinitionStore');
|
||||
|
||||
describe('PreviewCanvas', () => {
|
||||
const mockSelectPage = vi.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('shows placeholder when no structure or pages', () => {
|
||||
(useSiteDefinitionStore as any).mockReturnValue({
|
||||
structure: undefined,
|
||||
pages: [],
|
||||
selectedSlug: undefined,
|
||||
selectPage: mockSelectPage,
|
||||
});
|
||||
|
||||
render(<PreviewCanvas />);
|
||||
|
||||
expect(screen.getByText(/generate a blueprint to see live previews/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders pages from structure', () => {
|
||||
const mockStructure = {
|
||||
site: { name: 'Test Site', primary_navigation: ['home', 'about'] },
|
||||
pages: [
|
||||
{ slug: 'home', title: 'Home', type: 'home', blocks: [] },
|
||||
{ slug: 'about', title: 'About', type: 'about', blocks: [] },
|
||||
],
|
||||
};
|
||||
|
||||
(useSiteDefinitionStore as any).mockReturnValue({
|
||||
structure: mockStructure,
|
||||
pages: [],
|
||||
selectedSlug: 'home',
|
||||
selectPage: mockSelectPage,
|
||||
});
|
||||
|
||||
render(<PreviewCanvas />);
|
||||
|
||||
expect(screen.getByText('Home')).toBeInTheDocument();
|
||||
// Check for navigation button specifically (there are multiple "home" elements)
|
||||
const navButtons = screen.getAllByText('home');
|
||||
expect(navButtons.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('renders pages from pages array when structure not available', () => {
|
||||
const mockPages = [
|
||||
{
|
||||
id: 1,
|
||||
site_blueprint: 1,
|
||||
slug: 'services',
|
||||
title: 'Services',
|
||||
type: 'services',
|
||||
status: 'ready',
|
||||
order: 0,
|
||||
blocks_json: [],
|
||||
},
|
||||
];
|
||||
|
||||
(useSiteDefinitionStore as any).mockReturnValue({
|
||||
structure: undefined,
|
||||
pages: mockPages,
|
||||
selectedSlug: 'services',
|
||||
selectPage: mockSelectPage,
|
||||
});
|
||||
|
||||
render(<PreviewCanvas />);
|
||||
|
||||
expect(screen.getByText('Services')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders page blocks when available', () => {
|
||||
const mockStructure = {
|
||||
site: { name: 'Test Site' },
|
||||
pages: [
|
||||
{
|
||||
slug: 'home',
|
||||
title: 'Home',
|
||||
type: 'home',
|
||||
blocks: [
|
||||
{ type: 'hero', heading: 'Welcome', subheading: 'Get started today' },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
(useSiteDefinitionStore as any).mockReturnValue({
|
||||
structure: mockStructure,
|
||||
pages: [],
|
||||
selectedSlug: 'home',
|
||||
selectPage: mockSelectPage,
|
||||
});
|
||||
|
||||
render(<PreviewCanvas />);
|
||||
|
||||
expect(screen.getByText('Welcome')).toBeInTheDocument();
|
||||
expect(screen.getByText('Get started today')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,185 +0,0 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Loader2, PlayCircle, RefreshCw } from 'lucide-react';
|
||||
import { useBuilderStore } from '../../state/builderStore';
|
||||
import { useSiteDefinitionStore } from '../../state/siteDefinitionStore';
|
||||
import { BusinessDetailsStep } from './steps/BusinessDetailsStep';
|
||||
import { BriefStep } from './steps/BriefStep';
|
||||
import { ObjectivesStep } from './steps/ObjectivesStep';
|
||||
import { StyleStep } from './steps/StyleStep';
|
||||
import { Card } from '../../components/common/Card';
|
||||
import { ProgressModal } from '../../components/common/ProgressModal';
|
||||
import { useTaskProgress } from '../../hooks/useTaskProgress';
|
||||
import { builderApi } from '../../api/builder.api';
|
||||
|
||||
const stepTitles = ['Business', 'Brief', 'Objectives', 'Style'];
|
||||
|
||||
export function WizardPage() {
|
||||
const {
|
||||
form,
|
||||
currentStep,
|
||||
setField,
|
||||
updateStyle,
|
||||
addObjective,
|
||||
removeObjective,
|
||||
nextStep,
|
||||
previousStep,
|
||||
setStep,
|
||||
submitWizard,
|
||||
isSubmitting,
|
||||
error,
|
||||
activeBlueprint,
|
||||
refreshPages,
|
||||
structureTaskId,
|
||||
setStructureTaskId,
|
||||
} = useBuilderStore();
|
||||
const structure = useSiteDefinitionStore((state) => state.structure);
|
||||
const setStructure = useSiteDefinitionStore((state) => state.setStructure);
|
||||
const [showProgressModal, setShowProgressModal] = useState(false);
|
||||
const [progressMessage, setProgressMessage] = useState('Initializing Site Builder AI…');
|
||||
|
||||
const syncLatestStructure = useCallback(async () => {
|
||||
if (!activeBlueprint) return;
|
||||
try {
|
||||
const latestBlueprint = await builderApi.getBlueprint(activeBlueprint.id);
|
||||
if (latestBlueprint.structure_json) {
|
||||
setStructure(latestBlueprint.structure_json);
|
||||
}
|
||||
await refreshPages(activeBlueprint.id);
|
||||
} catch (syncError) {
|
||||
const message = syncError instanceof Error ? syncError.message : 'Unable to sync blueprint';
|
||||
useBuilderStore.setState({ error: message });
|
||||
} finally {
|
||||
setStructureTaskId(null);
|
||||
}
|
||||
}, [activeBlueprint, refreshPages, setStructure, setStructureTaskId]);
|
||||
|
||||
const taskProgress = useTaskProgress(structureTaskId, {
|
||||
onUpdate: (meta) => {
|
||||
if (meta?.message) {
|
||||
setProgressMessage(meta.message);
|
||||
}
|
||||
},
|
||||
onComplete: async () => {
|
||||
setProgressMessage('Site structure ready!');
|
||||
await syncLatestStructure();
|
||||
setTimeout(() => setShowProgressModal(false), 500);
|
||||
},
|
||||
onError: (message) => {
|
||||
useBuilderStore.setState({ error: message });
|
||||
setShowProgressModal(false);
|
||||
setStructureTaskId(null);
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (structureTaskId) {
|
||||
setShowProgressModal(true);
|
||||
setProgressMessage('Sending request to Site Builder AI…');
|
||||
}
|
||||
}, [structureTaskId]);
|
||||
|
||||
const stepComponents = useMemo(
|
||||
() => [
|
||||
<BusinessDetailsStep key="business" data={form} onChange={setField} />,
|
||||
<BriefStep key="brief" data={form} onChange={setField} />,
|
||||
<ObjectivesStep key="objectives" data={form} addObjective={addObjective} removeObjective={removeObjective} />,
|
||||
<StyleStep key="style" style={form.style} onChange={updateStyle} />,
|
||||
],
|
||||
[form, setField, addObjective, removeObjective, updateStyle],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="wizard-page">
|
||||
<Card
|
||||
title="Site builder wizard"
|
||||
description="Capture your strategy in four lightweight steps. When you hit “Generate structure” we’ll call the Site Builder AI and hydrate the preview canvas."
|
||||
>
|
||||
<div className="wizard-progress">
|
||||
{stepTitles.map((title, idx) => (
|
||||
<button
|
||||
key={title}
|
||||
type="button"
|
||||
className={`wizard-progress__dot ${idx === currentStep ? 'is-active' : ''}`}
|
||||
onClick={() => setStep(idx)}
|
||||
>
|
||||
<span>{idx + 1}</span>
|
||||
<small>{title}</small>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="wizard-step">{stepComponents[currentStep]}</div>
|
||||
|
||||
<div className="wizard-actions">
|
||||
<button type="button" onClick={previousStep} disabled={currentStep === 0 || isSubmitting}>
|
||||
Back
|
||||
</button>
|
||||
{currentStep < stepComponents.length - 1 ? (
|
||||
<button type="button" className="primary" onClick={nextStep}>
|
||||
Next
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" className="primary" onClick={submitWizard} disabled={isSubmitting}>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="spin" size={18} />
|
||||
Generating…
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PlayCircle size={18} />
|
||||
Generate structure
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && <p className="sb-error">{error}</p>}
|
||||
</Card>
|
||||
|
||||
{activeBlueprint && (
|
||||
<Card
|
||||
title="Latest blueprint"
|
||||
description="Refresh the preview to fetch the latest AI output."
|
||||
footer={
|
||||
<button type="button" className="ghost" onClick={() => refreshPages(activeBlueprint.id)} disabled={isSubmitting}>
|
||||
<RefreshCw size={16} />
|
||||
Sync pages
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<div className="sb-blueprint-meta">
|
||||
<div>
|
||||
<strong>Status</strong>
|
||||
<span className={`status-dot status-${activeBlueprint.status}`}>{activeBlueprint.status}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>Structure</strong>
|
||||
<span>{structure?.pages?.length ?? 0} pages</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
<ProgressModal
|
||||
isOpen={showProgressModal}
|
||||
onClose={() => {
|
||||
if (taskProgress.status === 'processing') {
|
||||
return;
|
||||
}
|
||||
setShowProgressModal(false);
|
||||
setStructureTaskId(null);
|
||||
}}
|
||||
title="Generating site structure"
|
||||
message={progressMessage}
|
||||
progress={{
|
||||
current: Math.round(taskProgress.percentage),
|
||||
total: 100,
|
||||
}}
|
||||
taskId={structureTaskId || undefined}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,187 +0,0 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { WizardPage } from '../WizardPage';
|
||||
import { useBuilderStore } from '../../../state/builderStore';
|
||||
import { useSiteDefinitionStore } from '../../../state/siteDefinitionStore';
|
||||
|
||||
// Mock stores
|
||||
vi.mock('../../../state/builderStore');
|
||||
vi.mock('../../../state/siteDefinitionStore');
|
||||
|
||||
describe('WizardPage', () => {
|
||||
const mockSetField = vi.fn();
|
||||
const mockNextStep = vi.fn();
|
||||
const mockPreviousStep = vi.fn();
|
||||
const mockSetStep = vi.fn();
|
||||
const mockUpdateStyle = vi.fn();
|
||||
const mockAddObjective = vi.fn();
|
||||
const mockRemoveObjective = vi.fn();
|
||||
const mockSubmitWizard = vi.fn();
|
||||
const mockSetStructureTaskId = vi.fn();
|
||||
const mockRefreshPages = vi.fn();
|
||||
const mockSetStructure = vi.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
(useBuilderStore as any).mockReturnValue({
|
||||
form: {
|
||||
siteId: null,
|
||||
sectorId: null,
|
||||
siteName: '',
|
||||
businessType: '',
|
||||
industry: '',
|
||||
targetAudience: '',
|
||||
hostingType: 'igny8_sites',
|
||||
businessBrief: '',
|
||||
objectives: [],
|
||||
style: {},
|
||||
},
|
||||
currentStep: 0,
|
||||
isSubmitting: false,
|
||||
error: undefined,
|
||||
activeBlueprint: undefined,
|
||||
structureTaskId: null,
|
||||
setField: mockSetField,
|
||||
nextStep: mockNextStep,
|
||||
previousStep: mockPreviousStep,
|
||||
setStep: mockSetStep,
|
||||
updateStyle: mockUpdateStyle,
|
||||
addObjective: mockAddObjective,
|
||||
removeObjective: mockRemoveObjective,
|
||||
submitWizard: mockSubmitWizard,
|
||||
refreshPages: mockRefreshPages,
|
||||
setStructureTaskId: mockSetStructureTaskId,
|
||||
});
|
||||
(useSiteDefinitionStore as any).mockImplementation((selector?: (state: any) => any) => {
|
||||
const state = {
|
||||
structure: undefined,
|
||||
setStructure: mockSetStructure,
|
||||
};
|
||||
return selector ? selector(state) : state;
|
||||
});
|
||||
});
|
||||
|
||||
it('renders wizard with step indicators', () => {
|
||||
render(<WizardPage />);
|
||||
|
||||
expect(screen.getByText('Site builder wizard')).toBeInTheDocument();
|
||||
expect(screen.getByText('Business')).toBeInTheDocument();
|
||||
expect(screen.getByText('Brief')).toBeInTheDocument();
|
||||
expect(screen.getByText('Objectives')).toBeInTheDocument();
|
||||
expect(screen.getByText('Style')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('allows navigation between steps', () => {
|
||||
render(<WizardPage />);
|
||||
|
||||
const briefButton = screen.getByText('Brief');
|
||||
fireEvent.click(briefButton);
|
||||
|
||||
expect(mockSetStep).toHaveBeenCalledWith(1);
|
||||
});
|
||||
|
||||
it('disables back button on first step', () => {
|
||||
render(<WizardPage />);
|
||||
|
||||
const backButton = screen.getByText('Back');
|
||||
expect(backButton).toBeDisabled();
|
||||
});
|
||||
|
||||
it('enables back button after first step', () => {
|
||||
(useBuilderStore as any).mockReturnValue({
|
||||
form: {},
|
||||
currentStep: 1,
|
||||
isSubmitting: false,
|
||||
error: undefined,
|
||||
activeBlueprint: undefined,
|
||||
structureTaskId: null,
|
||||
setField: mockSetField,
|
||||
nextStep: mockNextStep,
|
||||
previousStep: mockPreviousStep,
|
||||
setStep: mockSetStep,
|
||||
updateStyle: mockUpdateStyle,
|
||||
addObjective: mockAddObjective,
|
||||
removeObjective: mockRemoveObjective,
|
||||
submitWizard: mockSubmitWizard,
|
||||
refreshPages: mockRefreshPages,
|
||||
setStructureTaskId: mockSetStructureTaskId,
|
||||
});
|
||||
|
||||
render(<WizardPage />);
|
||||
|
||||
const backButton = screen.getByText('Back');
|
||||
expect(backButton).not.toBeDisabled();
|
||||
|
||||
fireEvent.click(backButton);
|
||||
expect(mockPreviousStep).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('shows error message when present', () => {
|
||||
(useBuilderStore as any).mockReturnValue({
|
||||
form: {},
|
||||
currentStep: 0,
|
||||
isSubmitting: false,
|
||||
error: 'Test error message',
|
||||
activeBlueprint: undefined,
|
||||
structureTaskId: null,
|
||||
setField: mockSetField,
|
||||
nextStep: mockNextStep,
|
||||
previousStep: mockPreviousStep,
|
||||
setStep: mockSetStep,
|
||||
updateStyle: mockUpdateStyle,
|
||||
addObjective: mockAddObjective,
|
||||
removeObjective: mockRemoveObjective,
|
||||
submitWizard: mockSubmitWizard,
|
||||
refreshPages: mockRefreshPages,
|
||||
setStructureTaskId: mockSetStructureTaskId,
|
||||
});
|
||||
|
||||
render(<WizardPage />);
|
||||
|
||||
expect(screen.getByText('Test error message')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows loading state when submitting', () => {
|
||||
(useBuilderStore as any).mockReturnValue({
|
||||
form: {
|
||||
siteId: null,
|
||||
sectorId: null,
|
||||
siteName: '',
|
||||
businessType: '',
|
||||
industry: '',
|
||||
targetAudience: '',
|
||||
hostingType: 'igny8_sites',
|
||||
businessBrief: '',
|
||||
objectives: [],
|
||||
style: {
|
||||
palette: 'Vibrant modern palette',
|
||||
typography: 'Sans-serif',
|
||||
personality: 'Confident',
|
||||
heroImagery: 'Real people',
|
||||
},
|
||||
},
|
||||
currentStep: 3,
|
||||
isSubmitting: true,
|
||||
error: undefined,
|
||||
activeBlueprint: undefined,
|
||||
structureTaskId: null,
|
||||
setField: mockSetField,
|
||||
nextStep: mockNextStep,
|
||||
previousStep: mockPreviousStep,
|
||||
setStep: mockSetStep,
|
||||
updateStyle: mockUpdateStyle,
|
||||
addObjective: mockAddObjective,
|
||||
removeObjective: mockRemoveObjective,
|
||||
submitWizard: mockSubmitWizard,
|
||||
refreshPages: mockRefreshPages,
|
||||
setStructureTaskId: mockSetStructureTaskId,
|
||||
});
|
||||
|
||||
render(<WizardPage />);
|
||||
|
||||
// When submitting, button text changes to "Generating…"
|
||||
const submitButton = screen.getByText(/generating/i);
|
||||
expect(submitButton).toBeDisabled();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
import type { BuilderFormData } from '../../../types/siteBuilder';
|
||||
import { Card } from '../../../components/common/Card';
|
||||
|
||||
interface Props {
|
||||
data: BuilderFormData;
|
||||
onChange: <K extends keyof BuilderFormData>(key: K, value: BuilderFormData[K]) => void;
|
||||
}
|
||||
|
||||
export function BriefStep({ data, onChange }: Props) {
|
||||
return (
|
||||
<Card
|
||||
title="Business brief"
|
||||
description="Describe the brand, what it sells, and what makes it unique. The more context we have, the more accurate the structure."
|
||||
>
|
||||
<label className="sb-field">
|
||||
<span>Business brief</span>
|
||||
<textarea
|
||||
rows={8}
|
||||
value={data.businessBrief}
|
||||
placeholder="Acme Robotics builds autonomous fulfillment robots that reduce warehouse picking time by 60%..."
|
||||
onChange={(event) => onChange('businessBrief', event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,94 +0,0 @@
|
||||
import type { BuilderFormData } from '../../../types/siteBuilder';
|
||||
import { Card } from '../../../components/common/Card';
|
||||
|
||||
interface Props {
|
||||
data: BuilderFormData;
|
||||
onChange: <K extends keyof BuilderFormData>(key: K, value: BuilderFormData[K]) => void;
|
||||
}
|
||||
|
||||
export function BusinessDetailsStep({ data, onChange }: Props) {
|
||||
return (
|
||||
<Card
|
||||
title="Business context"
|
||||
description="These details help the AI understand what kind of site we are building."
|
||||
>
|
||||
<div className="sb-grid">
|
||||
<label className="sb-field">
|
||||
<span>Site ID</span>
|
||||
<input
|
||||
type="number"
|
||||
value={data.siteId ?? ''}
|
||||
placeholder="123"
|
||||
onChange={(event) => onChange('siteId', Number(event.target.value) || null)}
|
||||
/>
|
||||
</label>
|
||||
<label className="sb-field">
|
||||
<span>Sector ID</span>
|
||||
<input
|
||||
type="number"
|
||||
value={data.sectorId ?? ''}
|
||||
placeholder="456"
|
||||
onChange={(event) => onChange('sectorId', Number(event.target.value) || null)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label className="sb-field">
|
||||
<span>Site name</span>
|
||||
<input
|
||||
type="text"
|
||||
value={data.siteName}
|
||||
placeholder="Acme Robotics"
|
||||
onChange={(event) => onChange('siteName', event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="sb-grid">
|
||||
<label className="sb-field">
|
||||
<span>Business type</span>
|
||||
<input
|
||||
type="text"
|
||||
value={data.businessType}
|
||||
placeholder="B2B SaaS platform"
|
||||
onChange={(event) => onChange('businessType', event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="sb-field">
|
||||
<span>Industry</span>
|
||||
<input
|
||||
type="text"
|
||||
value={data.industry}
|
||||
placeholder="Supply chain automation"
|
||||
onChange={(event) => onChange('industry', event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label className="sb-field">
|
||||
<span>Target audience</span>
|
||||
<input
|
||||
type="text"
|
||||
value={data.targetAudience}
|
||||
placeholder="Operations leaders at fast-scaling eCommerce brands"
|
||||
onChange={(event) => onChange('targetAudience', event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="sb-field">
|
||||
<span>Hosting preference</span>
|
||||
<select
|
||||
value={data.hostingType}
|
||||
onChange={(event) => onChange('hostingType', event.target.value as BuilderFormData['hostingType'])}
|
||||
>
|
||||
<option value="igny8_sites">IGNY8 Sites</option>
|
||||
<option value="wordpress">WordPress</option>
|
||||
<option value="shopify">Shopify</option>
|
||||
<option value="multi">Multiple destinations</option>
|
||||
</select>
|
||||
</label>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import type { BuilderFormData } from '../../../types/siteBuilder';
|
||||
import { Card } from '../../../components/common/Card';
|
||||
|
||||
interface Props {
|
||||
data: BuilderFormData;
|
||||
addObjective: (value: string) => void;
|
||||
removeObjective: (index: number) => void;
|
||||
}
|
||||
|
||||
export function ObjectivesStep({ data, addObjective, removeObjective }: Props) {
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
const handleAdd = () => {
|
||||
const trimmed = value.trim();
|
||||
if (!trimmed) return;
|
||||
addObjective(trimmed);
|
||||
setValue('');
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
title="Success metrics & flows"
|
||||
description="List the outcomes the site must accomplish. These become top-level navigation items and hero CTAs."
|
||||
>
|
||||
<div className="sb-pill-list">
|
||||
{data.objectives.map((objective, idx) => (
|
||||
<span className="sb-pill" key={`${objective}-${idx}`}>
|
||||
{objective}
|
||||
<button type="button" onClick={() => removeObjective(idx)} aria-label="Remove objective">
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="sb-objective-input">
|
||||
<input
|
||||
type="text"
|
||||
value={value}
|
||||
placeholder="Offer product tour, capture demo requests, educate on ROI…"
|
||||
onChange={(event) => setValue(event.target.value)}
|
||||
/>
|
||||
<button type="button" onClick={handleAdd}>
|
||||
Add objective
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,74 +0,0 @@
|
||||
import type { StylePreferences } from '../../../types/siteBuilder';
|
||||
import { Card } from '../../../components/common/Card';
|
||||
|
||||
interface Props {
|
||||
style: StylePreferences;
|
||||
onChange: (partial: Partial<StylePreferences>) => void;
|
||||
}
|
||||
|
||||
const palettes = [
|
||||
'Minimal monochrome with bright accent',
|
||||
'Rich jewel tones with high contrast',
|
||||
'Soft gradients and glassmorphism',
|
||||
'Playful pastel palette',
|
||||
];
|
||||
|
||||
const typographyOptions = [
|
||||
'Modern sans-serif for headings, serif body text',
|
||||
'Editorial serif across the site',
|
||||
'Geometric sans with tight tracking',
|
||||
'Rounded fonts with friendly tone',
|
||||
];
|
||||
|
||||
export function StyleStep({ style, onChange }: Props) {
|
||||
return (
|
||||
<Card
|
||||
title="Look & Feel"
|
||||
description="Capture the brand personality so the preview canvas can mirror the right tone."
|
||||
>
|
||||
<div className="sb-grid">
|
||||
<label className="sb-field">
|
||||
<span>Palette direction</span>
|
||||
<select value={style.palette} onChange={(event) => onChange({ palette: event.target.value })}>
|
||||
{palettes.map((option) => (
|
||||
<option key={option} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="sb-field">
|
||||
<span>Typography</span>
|
||||
<select value={style.typography} onChange={(event) => onChange({ typography: event.target.value })}>
|
||||
{typographyOptions.map((option) => (
|
||||
<option key={option} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label className="sb-field">
|
||||
<span>Brand personality</span>
|
||||
<textarea
|
||||
rows={3}
|
||||
value={style.personality}
|
||||
onChange={(event) => onChange({ personality: event.target.value })}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="sb-field">
|
||||
<span>Hero imagery direction</span>
|
||||
<textarea
|
||||
rows={3}
|
||||
value={style.heroImagery}
|
||||
onChange={(event) => onChange({ heroImagery: event.target.value })}
|
||||
/>
|
||||
</label>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
import { expect, afterEach } from 'vitest';
|
||||
import { cleanup } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom/vitest';
|
||||
|
||||
// Cleanup after each test
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
import { describe, it, expect, beforeEach } from 'vitest';
|
||||
import { useBuilderStore } from '../builderStore';
|
||||
import type { BuilderFormData } from '../../types/siteBuilder';
|
||||
|
||||
describe('builderStore', () => {
|
||||
beforeEach(() => {
|
||||
useBuilderStore.getState().reset();
|
||||
});
|
||||
|
||||
it('initializes with default form values', () => {
|
||||
const state = useBuilderStore.getState();
|
||||
expect(state.form.siteName).toBe('');
|
||||
expect(state.form.hostingType).toBe('igny8_sites');
|
||||
expect(state.form.objectives).toEqual(['Launch a conversion-focused marketing site']);
|
||||
expect(state.currentStep).toBe(0);
|
||||
});
|
||||
|
||||
it('updates form fields', () => {
|
||||
const { setField } = useBuilderStore.getState();
|
||||
setField('siteName', 'Test Site');
|
||||
setField('businessType', 'SaaS');
|
||||
|
||||
const state = useBuilderStore.getState();
|
||||
expect(state.form.siteName).toBe('Test Site');
|
||||
expect(state.form.businessType).toBe('SaaS');
|
||||
});
|
||||
|
||||
it('navigates steps correctly', () => {
|
||||
const { nextStep, previousStep, setStep } = useBuilderStore.getState();
|
||||
|
||||
expect(useBuilderStore.getState().currentStep).toBe(0);
|
||||
|
||||
nextStep();
|
||||
expect(useBuilderStore.getState().currentStep).toBe(1);
|
||||
|
||||
nextStep();
|
||||
expect(useBuilderStore.getState().currentStep).toBe(2);
|
||||
|
||||
previousStep();
|
||||
expect(useBuilderStore.getState().currentStep).toBe(1);
|
||||
|
||||
setStep(3);
|
||||
expect(useBuilderStore.getState().currentStep).toBe(3);
|
||||
|
||||
// Should not go beyond max step
|
||||
nextStep();
|
||||
expect(useBuilderStore.getState().currentStep).toBe(3);
|
||||
});
|
||||
|
||||
it('manages objectives list', () => {
|
||||
const { addObjective, removeObjective } = useBuilderStore.getState();
|
||||
|
||||
addObjective('Increase brand awareness');
|
||||
expect(useBuilderStore.getState().form.objectives).toContain('Increase brand awareness');
|
||||
|
||||
addObjective('Drive conversions');
|
||||
expect(useBuilderStore.getState().form.objectives.length).toBe(3); // 1 default + 2 added
|
||||
|
||||
removeObjective(0);
|
||||
expect(useBuilderStore.getState().form.objectives.length).toBe(2);
|
||||
expect(useBuilderStore.getState().form.objectives).not.toContain('Launch a conversion-focused marketing site');
|
||||
});
|
||||
|
||||
it('updates style preferences', () => {
|
||||
const { updateStyle } = useBuilderStore.getState();
|
||||
|
||||
updateStyle({ palette: 'Dark mode palette' });
|
||||
expect(useBuilderStore.getState().form.style.palette).toBe('Dark mode palette');
|
||||
|
||||
updateStyle({ personality: 'Professional, trustworthy' });
|
||||
expect(useBuilderStore.getState().form.style.personality).toBe('Professional, trustworthy');
|
||||
expect(useBuilderStore.getState().form.style.palette).toBe('Dark mode palette'); // Previous value preserved
|
||||
});
|
||||
|
||||
it('resets to initial state', () => {
|
||||
const { setField, nextStep, addObjective, reset } = useBuilderStore.getState();
|
||||
|
||||
setField('siteName', 'Modified');
|
||||
nextStep();
|
||||
addObjective('Test objective');
|
||||
|
||||
reset();
|
||||
|
||||
const state = useBuilderStore.getState();
|
||||
expect(state.form.siteName).toBe('');
|
||||
expect(state.currentStep).toBe(0);
|
||||
expect(state.form.objectives).toEqual(['Launch a conversion-focused marketing site']);
|
||||
expect(state.isSubmitting).toBe(false);
|
||||
expect(state.error).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,95 +0,0 @@
|
||||
import { describe, it, expect, beforeEach } from 'vitest';
|
||||
import { useSiteDefinitionStore } from '../siteDefinitionStore';
|
||||
import type { SiteStructure, PageBlueprint } from '../../types/siteBuilder';
|
||||
|
||||
describe('siteDefinitionStore', () => {
|
||||
beforeEach(() => {
|
||||
useSiteDefinitionStore.setState({
|
||||
structure: undefined,
|
||||
pages: [],
|
||||
selectedSlug: undefined,
|
||||
});
|
||||
});
|
||||
|
||||
it('initializes with empty state', () => {
|
||||
const state = useSiteDefinitionStore.getState();
|
||||
expect(state.pages).toEqual([]);
|
||||
expect(state.structure).toBeUndefined();
|
||||
expect(state.selectedSlug).toBeUndefined();
|
||||
});
|
||||
|
||||
it('sets structure and auto-selects first page', () => {
|
||||
const mockStructure: SiteStructure = {
|
||||
site: { name: 'Test Site' },
|
||||
pages: [
|
||||
{ slug: 'home', title: 'Home', type: 'home', blocks: [] },
|
||||
{ slug: 'about', title: 'About', type: 'about', blocks: [] },
|
||||
],
|
||||
};
|
||||
|
||||
useSiteDefinitionStore.getState().setStructure(mockStructure);
|
||||
|
||||
const state = useSiteDefinitionStore.getState();
|
||||
expect(state.structure).toEqual(mockStructure);
|
||||
expect(state.selectedSlug).toBe('home');
|
||||
});
|
||||
|
||||
it('sets pages and auto-selects first page if none selected', () => {
|
||||
const mockPages: PageBlueprint[] = [
|
||||
{
|
||||
id: 1,
|
||||
site_blueprint: 1,
|
||||
slug: 'services',
|
||||
title: 'Services',
|
||||
type: 'services',
|
||||
status: 'ready',
|
||||
order: 0,
|
||||
blocks_json: [],
|
||||
},
|
||||
];
|
||||
|
||||
useSiteDefinitionStore.getState().setPages(mockPages);
|
||||
|
||||
const state = useSiteDefinitionStore.getState();
|
||||
expect(state.pages).toEqual(mockPages);
|
||||
expect(state.selectedSlug).toBe('services');
|
||||
});
|
||||
|
||||
it('preserves selected slug when setting pages if already selected', () => {
|
||||
useSiteDefinitionStore.setState({ selectedSlug: 'about' });
|
||||
|
||||
const mockPages: PageBlueprint[] = [
|
||||
{
|
||||
id: 1,
|
||||
site_blueprint: 1,
|
||||
slug: 'home',
|
||||
title: 'Home',
|
||||
type: 'home',
|
||||
status: 'ready',
|
||||
order: 0,
|
||||
blocks_json: [],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
site_blueprint: 1,
|
||||
slug: 'about',
|
||||
title: 'About',
|
||||
type: 'about',
|
||||
status: 'ready',
|
||||
order: 1,
|
||||
blocks_json: [],
|
||||
},
|
||||
];
|
||||
|
||||
useSiteDefinitionStore.getState().setPages(mockPages);
|
||||
|
||||
const state = useSiteDefinitionStore.getState();
|
||||
expect(state.selectedSlug).toBe('about');
|
||||
});
|
||||
|
||||
it('selects page by slug', () => {
|
||||
useSiteDefinitionStore.getState().selectPage('contact');
|
||||
expect(useSiteDefinitionStore.getState().selectedSlug).toBe('contact');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,227 +0,0 @@
|
||||
import { create } from 'zustand';
|
||||
import { builderApi } from '../api/builder.api';
|
||||
import type {
|
||||
BuilderFormData,
|
||||
PageBlueprint,
|
||||
SiteBlueprint,
|
||||
StylePreferences,
|
||||
} from '../types/siteBuilder';
|
||||
import { useSiteDefinitionStore } from './siteDefinitionStore';
|
||||
|
||||
const defaultStyle: StylePreferences = {
|
||||
palette: 'Vibrant modern palette with rich accent color',
|
||||
typography: 'Sans-serif display for headings, humanist body font',
|
||||
personality: 'Confident, energetic, optimistic',
|
||||
heroImagery: 'Real people interacting with the product/service',
|
||||
};
|
||||
|
||||
const defaultForm: BuilderFormData = {
|
||||
siteId: null,
|
||||
sectorId: null,
|
||||
siteName: '',
|
||||
businessType: '',
|
||||
industry: '',
|
||||
targetAudience: '',
|
||||
hostingType: 'igny8_sites',
|
||||
businessBrief: '',
|
||||
objectives: ['Launch a conversion-focused marketing site'],
|
||||
style: defaultStyle,
|
||||
};
|
||||
|
||||
interface BuilderState {
|
||||
form: BuilderFormData;
|
||||
currentStep: number;
|
||||
isSubmitting: boolean;
|
||||
error?: string;
|
||||
activeBlueprint?: SiteBlueprint;
|
||||
structureTaskId: string | null;
|
||||
pages: PageBlueprint[];
|
||||
selectedPageIds: number[];
|
||||
isGenerating: boolean;
|
||||
generationProgress?: {
|
||||
pagesQueued: number;
|
||||
taskIds: number[];
|
||||
celeryTaskId?: string;
|
||||
};
|
||||
setField: <K extends keyof BuilderFormData>(key: K, value: BuilderFormData[K]) => void;
|
||||
updateStyle: (partial: Partial<StylePreferences>) => void;
|
||||
addObjective: (value: string) => void;
|
||||
removeObjective: (index: number) => void;
|
||||
setStep: (step: number) => void;
|
||||
nextStep: () => void;
|
||||
previousStep: () => void;
|
||||
reset: () => void;
|
||||
submitWizard: () => Promise<void>;
|
||||
setStructureTaskId: (taskId: string | null) => void;
|
||||
refreshPages: (blueprintId: number) => Promise<void>;
|
||||
togglePageSelection: (pageId: number) => void;
|
||||
selectAllPages: () => void;
|
||||
clearPageSelection: () => void;
|
||||
generateAllPages: (blueprintId: number, force?: boolean) => Promise<void>;
|
||||
}
|
||||
|
||||
export const useBuilderStore = create<BuilderState>((set, get) => ({
|
||||
form: defaultForm,
|
||||
currentStep: 0,
|
||||
isSubmitting: false,
|
||||
structureTaskId: null,
|
||||
pages: [],
|
||||
setStructureTaskId: (taskId) => set({ structureTaskId: taskId }),
|
||||
selectedPageIds: [],
|
||||
isGenerating: false,
|
||||
|
||||
setField: (key, value) =>
|
||||
set((state) => ({
|
||||
form: { ...state.form, [key]: value },
|
||||
})),
|
||||
|
||||
updateStyle: (partial) =>
|
||||
set((state) => ({
|
||||
form: { ...state.form, style: { ...state.form.style, ...partial } },
|
||||
})),
|
||||
|
||||
addObjective: (value) =>
|
||||
set((state) => ({
|
||||
form: { ...state.form, objectives: [...state.form.objectives, value] },
|
||||
})),
|
||||
|
||||
removeObjective: (index) =>
|
||||
set((state) => ({
|
||||
form: {
|
||||
...state.form,
|
||||
objectives: state.form.objectives.filter((_, idx) => idx !== index),
|
||||
},
|
||||
})),
|
||||
|
||||
setStep: (step) => set({ currentStep: step }),
|
||||
|
||||
nextStep: () =>
|
||||
set((state) => ({
|
||||
currentStep: Math.min(state.currentStep + 1, 3),
|
||||
})),
|
||||
|
||||
previousStep: () =>
|
||||
set((state) => ({
|
||||
currentStep: Math.max(state.currentStep - 1, 0),
|
||||
})),
|
||||
|
||||
reset: () =>
|
||||
set({
|
||||
form: defaultForm,
|
||||
currentStep: 0,
|
||||
isSubmitting: false,
|
||||
error: undefined,
|
||||
activeBlueprint: undefined,
|
||||
pages: [],
|
||||
}),
|
||||
|
||||
submitWizard: async () => {
|
||||
const { form } = get();
|
||||
if (!form.siteId || !form.sectorId) {
|
||||
set({ error: 'Site and sector are required to generate a blueprint.' });
|
||||
return;
|
||||
}
|
||||
|
||||
set({ isSubmitting: true, error: undefined, structureTaskId: null });
|
||||
try {
|
||||
const payload = {
|
||||
name: form.siteName || `Site Blueprint (${form.industry || 'New'})`,
|
||||
description: `${form.businessType} for ${form.targetAudience}`,
|
||||
site_id: form.siteId,
|
||||
sector_id: form.sectorId,
|
||||
hosting_type: form.hostingType,
|
||||
config_json: {
|
||||
business_type: form.businessType,
|
||||
industry: form.industry,
|
||||
target_audience: form.targetAudience,
|
||||
},
|
||||
};
|
||||
|
||||
const blueprint = await builderApi.createBlueprint(payload);
|
||||
set({ activeBlueprint: blueprint });
|
||||
|
||||
const generation = await builderApi.generateStructure(blueprint.id, {
|
||||
business_brief: form.businessBrief,
|
||||
objectives: form.objectives,
|
||||
style: form.style,
|
||||
metadata: { targetAudience: form.targetAudience },
|
||||
});
|
||||
|
||||
if (generation?.task_id) {
|
||||
set({ structureTaskId: generation.task_id });
|
||||
}
|
||||
|
||||
if (generation?.structure) {
|
||||
useSiteDefinitionStore.getState().setStructure(generation.structure);
|
||||
}
|
||||
|
||||
if (!generation?.task_id) {
|
||||
await get().refreshPages(blueprint.id);
|
||||
}
|
||||
} catch (error) {
|
||||
set({ error: error instanceof Error ? error.message : 'Unexpected error' });
|
||||
} finally {
|
||||
set({ isSubmitting: false });
|
||||
}
|
||||
},
|
||||
|
||||
refreshPages: async (blueprintId: number) => {
|
||||
try {
|
||||
const pages = await builderApi.listPages(blueprintId);
|
||||
set({ pages });
|
||||
useSiteDefinitionStore.getState().setPages(pages);
|
||||
} catch (error) {
|
||||
set({ error: error instanceof Error ? error.message : 'Unable to load pages' });
|
||||
}
|
||||
},
|
||||
|
||||
togglePageSelection: (pageId: number) => {
|
||||
set((state) => {
|
||||
const isSelected = state.selectedPageIds.includes(pageId);
|
||||
return {
|
||||
selectedPageIds: isSelected
|
||||
? state.selectedPageIds.filter((id) => id !== pageId)
|
||||
: [...state.selectedPageIds, pageId],
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
selectAllPages: () => {
|
||||
set((state) => ({
|
||||
selectedPageIds: state.pages.map((p) => p.id),
|
||||
}));
|
||||
},
|
||||
|
||||
clearPageSelection: () => {
|
||||
set({ selectedPageIds: [] });
|
||||
},
|
||||
|
||||
generateAllPages: async (blueprintId: number, force = false) => {
|
||||
const { selectedPageIds } = get();
|
||||
set({ isGenerating: true, error: undefined, generationProgress: undefined });
|
||||
|
||||
try {
|
||||
const result = await builderApi.generateAllPages(blueprintId, {
|
||||
pageIds: selectedPageIds.length > 0 ? selectedPageIds : undefined,
|
||||
force,
|
||||
});
|
||||
|
||||
set({
|
||||
generationProgress: {
|
||||
pagesQueued: result.pages_queued,
|
||||
taskIds: result.task_ids,
|
||||
celeryTaskId: result.celery_task_id,
|
||||
},
|
||||
});
|
||||
|
||||
// Refresh pages to update their status
|
||||
await get().refreshPages(blueprintId);
|
||||
} catch (error) {
|
||||
set({ error: error instanceof Error ? error.message : 'Failed to generate pages' });
|
||||
} finally {
|
||||
set({ isGenerating: false });
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
import { create } from 'zustand';
|
||||
import type { PageBlueprint, SiteStructure } from '../types/siteBuilder';
|
||||
|
||||
interface SiteDefinitionState {
|
||||
structure?: SiteStructure;
|
||||
pages: PageBlueprint[];
|
||||
selectedSlug?: string;
|
||||
setStructure: (structure: SiteStructure) => void;
|
||||
setPages: (pages: PageBlueprint[]) => void;
|
||||
selectPage: (slug: string) => void;
|
||||
}
|
||||
|
||||
export const useSiteDefinitionStore = create<SiteDefinitionState>((set) => ({
|
||||
pages: [],
|
||||
setStructure: (structure) =>
|
||||
set({
|
||||
structure,
|
||||
selectedSlug: structure.pages?.[0]?.slug,
|
||||
}),
|
||||
setPages: (pages) =>
|
||||
set((state) => ({
|
||||
pages,
|
||||
selectedSlug: state.selectedSlug ?? pages[0]?.slug,
|
||||
})),
|
||||
selectPage: (slug) => set({ selectedSlug: slug }),
|
||||
}));
|
||||
|
||||
|
||||
@@ -1,87 +0,0 @@
|
||||
export type HostingType = 'igny8_sites' | 'wordpress' | 'shopify' | 'multi';
|
||||
|
||||
export interface StylePreferences {
|
||||
palette: string;
|
||||
typography: string;
|
||||
personality: string;
|
||||
heroImagery: string;
|
||||
}
|
||||
|
||||
export interface BuilderFormData {
|
||||
siteId: number | null;
|
||||
sectorId: number | null;
|
||||
siteName: string;
|
||||
businessType: string;
|
||||
industry: string;
|
||||
targetAudience: string;
|
||||
hostingType: HostingType;
|
||||
businessBrief: string;
|
||||
objectives: string[];
|
||||
style: StylePreferences;
|
||||
}
|
||||
|
||||
export interface SiteBlueprint {
|
||||
id: number;
|
||||
name: string;
|
||||
description?: string;
|
||||
status: 'draft' | 'generating' | 'ready' | 'deployed';
|
||||
hosting_type: HostingType;
|
||||
config_json: Record<string, unknown>;
|
||||
structure_json: SiteStructure | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface PageBlueprint {
|
||||
id: number;
|
||||
site_blueprint: number;
|
||||
slug: string;
|
||||
title: string;
|
||||
type: string;
|
||||
status: string;
|
||||
order: number;
|
||||
blocks_json: PageBlock[];
|
||||
}
|
||||
|
||||
export interface PageBlock {
|
||||
type: string;
|
||||
heading?: string;
|
||||
subheading?: string;
|
||||
layout?: string;
|
||||
content?: string[] | Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface SiteStructure {
|
||||
site?: {
|
||||
name?: string;
|
||||
primary_navigation?: string[];
|
||||
secondary_navigation?: string[];
|
||||
hero_message?: string;
|
||||
tone?: string;
|
||||
};
|
||||
pages: Array<{
|
||||
slug: string;
|
||||
title: string;
|
||||
type: string;
|
||||
status?: string;
|
||||
objective?: string;
|
||||
primary_cta?: string;
|
||||
blocks?: PageBlock[];
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface ApiListResponse<T> {
|
||||
count?: number;
|
||||
next?: string | null;
|
||||
previous?: string | null;
|
||||
results?: T[];
|
||||
data?: T[] | T;
|
||||
}
|
||||
|
||||
export interface ApiError {
|
||||
message?: string;
|
||||
error?: string;
|
||||
detail?: string;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"types": ["vite/client", "vitest/globals"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@shared/*": ["../frontend/src/components/shared/*"]
|
||||
},
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = path.dirname(__filename);
|
||||
const sharedPathCandidates = [
|
||||
path.resolve(__dirname, '../frontend/src/components/shared'),
|
||||
path.resolve(__dirname, '../../frontend/src/components/shared'),
|
||||
'/frontend/src/components/shared',
|
||||
];
|
||||
const sharedComponentsPath = sharedPathCandidates.find((candidate) => fs.existsSync(candidate)) ?? sharedPathCandidates[0];
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@shared': sharedComponentsPath,
|
||||
},
|
||||
},
|
||||
test: {
|
||||
environment: 'jsdom',
|
||||
setupFiles: './src/setupTests.ts',
|
||||
globals: true,
|
||||
},
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 5175,
|
||||
allowedHosts: ['builder.igny8.com'],
|
||||
fs: {
|
||||
allow: [path.resolve(__dirname, '..'), sharedComponentsPath],
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user