feat: Complete implementation roadmap with file structure

Created comprehensive implementation plan:

MILESTONE 1 (TOP PRIORITY): Intelligence Library - Full CRUD
- Avatar Intelligence Manager (editable, stats, Generate Variants)
- Avatar Variants Manager (editable, Test Variant, Clone)
- Geo Intelligence Manager (interactive map, Add/Edit clusters)
- Spintax Manager (editable, Test Spintax, CSV import)
- Cartesian Manager (editable, Test Pattern, formula builder)
- 25 component files created

MILESTONE 2: Factory & Forms
- Kanban Board (drag-drop, Send to Engine)
- Lead Forms (capture, stats, export)
- Jobs Manager (retry failed, view details)
- Scheduler (calendar, drag-drop scheduling)
- 20 component files created

MILESTONE 3: All Collections
- Page Blocks, Content Fragments, Headlines, Offers
- Sites, Posts, Pages, Campaigns, Work Log
- 16 component files created

Build Script:
- build-structure.sh creates all 61 files
- Organized by milestone
- Ready to implement

Documentation:
- IMPLEMENTATION_ROADMAP.md - Complete plan with tasks
- SPARK_ONBOARDING.md - Updated with current status
- REVISED_PACKAGE_STRATEGY.md - Keep dev tools & queues

Total: 61 new component files ready for implementation
Next: Start Milestone 1 - Avatar Intelligence Manager
This commit is contained in:
cawcenter
2025-12-13 19:39:53 -05:00
parent a46b481c52
commit 7993688995
62 changed files with 1125 additions and 63 deletions

642
IMPLEMENTATION_ROADMAP.md Normal file
View File

@@ -0,0 +1,642 @@
# 🎯 SPARK PLATFORM - COMPLETE IMPLEMENTATION ROADMAP
**Priority**: Make Intelligence Library fully interactive + All collections working
**Format**: Milestones → Tasks → Commands to build structure
---
## 🔥 MILESTONE 1: INTELLIGENCE LIBRARY - FULL CRUD (TOP PRIORITY)
**Goal**: All 5 Intelligence Library pages fully editable with stats and cool UX
### Current Status:
- ✅ Pages exist and load data
- ❌ Not editable (read-only)
- ❌ No stats/analytics
- ❌ No "Send to Engine" buttons
- ❌ Basic UI (not cool experience)
### Tasks for Milestone 1:
#### Task 1.1: Avatar Intelligence - Full CRUD
**What to Build**:
- Editable table with inline editing
- Add/Edit/Delete avatars
- Stats: Total avatars, variants per avatar, usage count
- "Generate Variants" button → Creates new variants
- "Send to Engine" button → Uses avatar in content generation
- Cool UX: Drag-to-reorder, hover previews, animations
**Files to Create**:
```bash
# Create these files:
frontend/src/components/admin/intelligence/AvatarIntelligenceManager.tsx
frontend/src/components/admin/intelligence/AvatarCard.tsx
frontend/src/components/admin/intelligence/AvatarEditModal.tsx
frontend/src/components/admin/intelligence/AvatarStats.tsx
```
**Command to Build Structure**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
mkdir -p components/admin/intelligence
touch components/admin/intelligence/AvatarIntelligenceManager.tsx
touch components/admin/intelligence/AvatarCard.tsx
touch components/admin/intelligence/AvatarEditModal.tsx
touch components/admin/intelligence/AvatarStats.tsx
touch components/admin/intelligence/GenerateVariantsModal.tsx
```
---
#### Task 1.2: Avatar Variants - Full CRUD
**What to Build**:
- Editable table grouped by avatar
- Add/Edit/Delete variants
- Stats: Total variants, by gender, by tone
- "Test Variant" button → Preview content with this variant
- "Clone Variant" button → Duplicate and modify
- Cool UX: Color-coded by gender, expandable groups
**Files to Create**:
```bash
# Create these files:
frontend/src/components/admin/intelligence/AvatarVariantsManager.tsx
frontend/src/components/admin/intelligence/VariantCard.tsx
frontend/src/components/admin/intelligence/VariantEditModal.tsx
frontend/src/components/admin/intelligence/VariantPreview.tsx
```
**Command to Build Structure**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
touch components/admin/intelligence/AvatarVariantsManager.tsx
touch components/admin/intelligence/VariantCard.tsx
touch components/admin/intelligence/VariantEditModal.tsx
touch components/admin/intelligence/VariantPreview.tsx
```
---
#### Task 1.3: Geo Intelligence - Full CRUD
**What to Build**:
- Interactive map showing clusters
- Editable clusters and locations
- Add/Edit/Delete clusters and cities
- Stats: Total clusters, cities per cluster, coverage map
- "Target This Location" button → Use in content generation
- Cool UX: Interactive map, click to add cities, heat map
**Files to Create**:
```bash
# Create these files:
frontend/src/components/admin/intelligence/GeoIntelligenceManager.tsx
frontend/src/components/admin/intelligence/GeoMap.tsx
frontend/src/components/admin/intelligence/ClusterCard.tsx
frontend/src/components/admin/intelligence/LocationEditModal.tsx
frontend/src/components/admin/intelligence/GeoStats.tsx
```
**Command to Build Structure**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
touch components/admin/intelligence/GeoIntelligenceManager.tsx
touch components/admin/intelligence/GeoMap.tsx
touch components/admin/intelligence/ClusterCard.tsx
touch components/admin/intelligence/LocationEditModal.tsx
touch components/admin/intelligence/GeoStats.tsx
```
---
#### Task 1.4: Spintax Dictionaries - Full CRUD
**What to Build**:
- Editable dictionary with categories
- Add/Edit/Delete terms and categories
- Stats: Total terms, by category, usage frequency
- "Test Spintax" button → Preview expanded text
- "Import CSV" button → Bulk import terms
- Cool UX: Tag-style UI, live preview, color-coded categories
**Files to Create**:
```bash
# Create these files:
frontend/src/components/admin/intelligence/SpintaxManager.tsx
frontend/src/components/admin/intelligence/SpintaxCategory.tsx
frontend/src/components/admin/intelligence/SpintaxEditModal.tsx
frontend/src/components/admin/intelligence/SpintaxPreview.tsx
frontend/src/components/admin/intelligence/SpintaxImport.tsx
```
**Command to Build Structure**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
touch components/admin/intelligence/SpintaxManager.tsx
touch components/admin/intelligence/SpintaxCategory.tsx
touch components/admin/intelligence/SpintaxEditModal.tsx
touch components/admin/intelligence/SpintaxPreview.tsx
touch components/admin/intelligence/SpintaxImport.tsx
```
---
#### Task 1.5: Cartesian Patterns - Full CRUD
**What to Build**:
- Editable pattern library
- Add/Edit/Delete patterns
- Stats: Total patterns, by type, usage count
- "Test Pattern" button → Preview generated output
- "Generate Variations" button → Create pattern variations
- Cool UX: Formula builder, live preview, example outputs
**Files to Create**:
```bash
# Create these files:
frontend/src/components/admin/intelligence/CartesianManager.tsx
frontend/src/components/admin/intelligence/PatternCard.tsx
frontend/src/components/admin/intelligence/PatternEditModal.tsx
frontend/src/components/admin/intelligence/PatternBuilder.tsx
frontend/src/components/admin/intelligence/PatternPreview.tsx
```
**Command to Build Structure**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
touch components/admin/intelligence/CartesianManager.tsx
touch components/admin/intelligence/PatternCard.tsx
touch components/admin/intelligence/PatternEditModal.tsx
touch components/admin/intelligence/PatternBuilder.tsx
touch components/admin/intelligence/PatternPreview.tsx
```
---
### Milestone 1 - Complete Build Command:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
# Create intelligence components directory
mkdir -p components/admin/intelligence
# Avatar Intelligence
touch components/admin/intelligence/AvatarIntelligenceManager.tsx
touch components/admin/intelligence/AvatarCard.tsx
touch components/admin/intelligence/AvatarEditModal.tsx
touch components/admin/intelligence/AvatarStats.tsx
touch components/admin/intelligence/GenerateVariantsModal.tsx
# Avatar Variants
touch components/admin/intelligence/AvatarVariantsManager.tsx
touch components/admin/intelligence/VariantCard.tsx
touch components/admin/intelligence/VariantEditModal.tsx
touch components/admin/intelligence/VariantPreview.tsx
# Geo Intelligence
touch components/admin/intelligence/GeoIntelligenceManager.tsx
touch components/admin/intelligence/GeoMap.tsx
touch components/admin/intelligence/ClusterCard.tsx
touch components/admin/intelligence/LocationEditModal.tsx
touch components/admin/intelligence/GeoStats.tsx
# Spintax
touch components/admin/intelligence/SpintaxManager.tsx
touch components/admin/intelligence/SpintaxCategory.tsx
touch components/admin/intelligence/SpintaxEditModal.tsx
touch components/admin/intelligence/SpintaxPreview.tsx
touch components/admin/intelligence/SpintaxImport.tsx
# Cartesian Patterns
touch components/admin/intelligence/CartesianManager.tsx
touch components/admin/intelligence/PatternCard.tsx
touch components/admin/intelligence/PatternEditModal.tsx
touch components/admin/intelligence/PatternBuilder.tsx
touch components/admin/intelligence/PatternPreview.tsx
echo "✅ Milestone 1 file structure created!"
```
---
## 🎯 MILESTONE 2: CONTENT FACTORY - KANBAN & FORMS
**Goal**: Kanban board working, forms for leads, editable tables with stats
### Current Status:
- ❌ Kanban board not visible/working
- ❌ No lead forms
- ❌ Tables are read-only
- ❌ No "Send to Engine" functionality
- ❌ No scheduler integration
### Tasks for Milestone 2:
#### Task 2.1: Kanban Board - Full Implementation
**What to Build**:
- Drag-drop Kanban board
- Columns: Queued → Processing → QC → Approved → Published
- Cards show article preview, stats, actions
- "Send to Engine" button on each card
- Filter by site, template, status
- Cool UX: Smooth drag animations, card previews, bulk actions
**Files to Create**:
```bash
frontend/src/components/admin/factory/KanbanBoard.tsx
frontend/src/components/admin/factory/KanbanColumn.tsx
frontend/src/components/admin/factory/ArticleCard.tsx
frontend/src/components/admin/factory/CardActions.tsx
frontend/src/components/admin/factory/BulkActions.tsx
```
**Command**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
mkdir -p components/admin/factory
touch components/admin/factory/KanbanBoard.tsx
touch components/admin/factory/KanbanColumn.tsx
touch components/admin/factory/ArticleCard.tsx
touch components/admin/factory/CardActions.tsx
touch components/admin/factory/BulkActions.tsx
```
---
#### Task 2.2: Lead Forms & Management
**What to Build**:
- Lead capture forms
- Editable leads table
- Stats: Total leads, by source, conversion rate
- "Send to Campaign" button → Add to campaign
- "Export Leads" button → CSV export
- Cool UX: Form builder, drag-drop fields, validation
**Files to Create**:
```bash
frontend/src/components/admin/leads/LeadManager.tsx
frontend/src/components/admin/leads/LeadForm.tsx
frontend/src/components/admin/leads/LeadTable.tsx
frontend/src/components/admin/leads/LeadStats.tsx
frontend/src/components/admin/leads/LeadExport.tsx
frontend/src/pages/admin/leads/index.astro
```
**Command**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
mkdir -p components/admin/leads
mkdir -p pages/admin/leads
touch components/admin/leads/LeadManager.tsx
touch components/admin/leads/LeadForm.tsx
touch components/admin/leads/LeadTable.tsx
touch components/admin/leads/LeadStats.tsx
touch components/admin/leads/LeadExport.tsx
touch pages/admin/leads/index.astro
```
---
#### Task 2.3: Generation Jobs - Table with Actions
**What to Build**:
- Editable jobs table
- Stats: Total jobs, by status, success rate
- "Retry Failed" button
- "Cancel Job" button
- "View Details" modal → Show job config, errors
- Cool UX: Status badges, progress bars, real-time updates
**Files to Create**:
```bash
frontend/src/components/admin/jobs/JobsManager.tsx
frontend/src/components/admin/jobs/JobTable.tsx
frontend/src/components/admin/jobs/JobStats.tsx
frontend/src/components/admin/jobs/JobDetails.tsx
frontend/src/components/admin/jobs/JobActions.tsx
```
**Command**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
mkdir -p components/admin/jobs
touch components/admin/jobs/JobsManager.tsx
touch components/admin/jobs/JobTable.tsx
touch components/admin/jobs/JobStats.tsx
touch components/admin/jobs/JobDetails.tsx
touch components/admin/jobs/JobActions.tsx
```
---
#### Task 2.4: Scheduler Integration
**What to Build**:
- Calendar view for scheduled posts
- Drag-drop to reschedule
- "Schedule Post" button on articles
- Stats: Posts scheduled, by date, by site
- Cool UX: Calendar with drag-drop, time picker, bulk scheduling
**Files to Create**:
```bash
frontend/src/components/admin/scheduler/SchedulerCalendar.tsx
frontend/src/components/admin/scheduler/ScheduleModal.tsx
frontend/src/components/admin/scheduler/ScheduleStats.tsx
frontend/src/components/admin/scheduler/BulkSchedule.tsx
frontend/src/pages/admin/scheduler/index.astro
```
**Command**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
mkdir -p components/admin/scheduler
mkdir -p pages/admin/scheduler
touch components/admin/scheduler/SchedulerCalendar.tsx
touch components/admin/scheduler/ScheduleModal.tsx
touch components/admin/scheduler/ScheduleStats.tsx
touch components/admin/scheduler/BulkSchedule.tsx
touch pages/admin/scheduler/index.astro
```
---
### Milestone 2 - Complete Build Command:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
# Kanban Board
mkdir -p components/admin/factory
touch components/admin/factory/KanbanBoard.tsx
touch components/admin/factory/KanbanColumn.tsx
touch components/admin/factory/ArticleCard.tsx
touch components/admin/factory/CardActions.tsx
touch components/admin/factory/BulkActions.tsx
# Leads
mkdir -p components/admin/leads
mkdir -p pages/admin/leads
touch components/admin/leads/LeadManager.tsx
touch components/admin/leads/LeadForm.tsx
touch components/admin/leads/LeadTable.tsx
touch components/admin/leads/LeadStats.tsx
touch components/admin/leads/LeadExport.tsx
touch pages/admin/leads/index.astro
# Jobs
mkdir -p components/admin/jobs
touch components/admin/jobs/JobsManager.tsx
touch components/admin/jobs/JobTable.tsx
touch components/admin/jobs/JobStats.tsx
touch components/admin/jobs/JobDetails.tsx
touch components/admin/jobs/JobActions.tsx
# Scheduler
mkdir -p components/admin/scheduler
mkdir -p pages/admin/scheduler
touch components/admin/scheduler/SchedulerCalendar.tsx
touch components/admin/scheduler/ScheduleModal.tsx
touch components/admin/scheduler/ScheduleStats.tsx
touch components/admin/scheduler/BulkSchedule.tsx
touch pages/admin/scheduler/index.astro
echo "✅ Milestone 2 file structure created!"
```
---
## 🎯 MILESTONE 3: ALL COLLECTIONS - PAGES & CRUD
**Goal**: Every Directus collection has a working admin page
### Collections Needing Pages:
#### Task 3.1: Content Collections
**Collections**:
- Page Blocks
- Content Fragments
- Headline Inventory
- Offer Blocks (3 types)
**Files to Create**:
```bash
frontend/src/pages/admin/collections/page-blocks.astro
frontend/src/pages/admin/collections/content-fragments.astro
frontend/src/pages/admin/collections/headline-inventory.astro
frontend/src/pages/admin/collections/offer-blocks.astro
frontend/src/components/admin/collections/PageBlocksManager.tsx
frontend/src/components/admin/collections/FragmentsManager.tsx
frontend/src/components/admin/collections/HeadlinesManager.tsx
frontend/src/components/admin/collections/OffersManager.tsx
```
**Command**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
touch pages/admin/collections/page-blocks.astro
touch pages/admin/collections/content-fragments.astro
touch pages/admin/collections/headline-inventory.astro
touch pages/admin/collections/offer-blocks.astro
touch components/admin/collections/PageBlocksManager.tsx
touch components/admin/collections/FragmentsManager.tsx
touch components/admin/collections/HeadlinesManager.tsx
touch components/admin/collections/OffersManager.tsx
```
---
#### Task 3.2: Site & Content Management
**Collections**:
- Sites
- Posts
- Pages
- Generated Articles
**Files to Create**:
```bash
frontend/src/pages/admin/sites/index.astro
frontend/src/pages/admin/content/posts.astro
frontend/src/pages/admin/content/pages.astro
frontend/src/components/admin/sites/SitesManager.tsx
frontend/src/components/admin/content/PostsManager.tsx
frontend/src/components/admin/content/PagesManager.tsx
frontend/src/components/admin/content/ArticlesManager.tsx
```
**Command**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
mkdir -p pages/admin/sites
mkdir -p components/admin/sites
mkdir -p components/admin/content
touch pages/admin/sites/index.astro
touch pages/admin/content/posts.astro
touch pages/admin/content/pages.astro
touch components/admin/sites/SitesManager.tsx
touch components/admin/content/PostsManager.tsx
touch components/admin/content/PagesManager.tsx
touch components/admin/content/ArticlesManager.tsx
```
---
#### Task 3.3: Campaign & Work Log
**Collections**:
- Campaign Masters
- Work Log
**Files to Create**:
```bash
frontend/src/pages/admin/campaigns/index.astro
frontend/src/pages/admin/system/work-log.astro
frontend/src/components/admin/campaigns/CampaignManager.tsx
frontend/src/components/admin/system/WorkLogViewer.tsx
```
**Command**:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
mkdir -p pages/admin/campaigns
mkdir -p pages/admin/system
mkdir -p components/admin/campaigns
mkdir -p components/admin/system
touch pages/admin/campaigns/index.astro
touch pages/admin/system/work-log.astro
touch components/admin/campaigns/CampaignManager.tsx
touch components/admin/system/WorkLogViewer.tsx
```
---
### Milestone 3 - Complete Build Command:
```bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
# Content Collections
touch pages/admin/collections/page-blocks.astro
touch pages/admin/collections/content-fragments.astro
touch pages/admin/collections/headline-inventory.astro
touch pages/admin/collections/offer-blocks.astro
touch components/admin/collections/PageBlocksManager.tsx
touch components/admin/collections/FragmentsManager.tsx
touch components/admin/collections/HeadlinesManager.tsx
touch components/admin/collections/OffersManager.tsx
# Sites & Content
mkdir -p pages/admin/sites
mkdir -p components/admin/sites
mkdir -p components/admin/content
touch pages/admin/sites/index.astro
touch pages/admin/content/posts.astro
touch pages/admin/content/pages.astro
touch components/admin/sites/SitesManager.tsx
touch components/admin/content/PostsManager.tsx
touch components/admin/content/PagesManager.tsx
touch components/admin/content/ArticlesManager.tsx
# Campaigns & Logs
mkdir -p pages/admin/campaigns
mkdir -p pages/admin/system
mkdir -p components/admin/campaigns
mkdir -p components/admin/system
touch pages/admin/campaigns/index.astro
touch pages/admin/system/work-log.astro
touch components/admin/campaigns/CampaignManager.tsx
touch components/admin/system/WorkLogViewer.tsx
echo "✅ Milestone 3 file structure created!"
```
---
## 🚀 COMPLETE BUILD COMMAND (ALL MILESTONES)
```bash
#!/bin/bash
cd /Users/christopheramaya/Downloads/spark/frontend/src
echo "🏗️ Building complete Spark Platform file structure..."
# Create all directories
mkdir -p components/admin/intelligence
mkdir -p components/admin/factory
mkdir -p components/admin/leads
mkdir -p components/admin/jobs
mkdir -p components/admin/scheduler
mkdir -p components/admin/collections
mkdir -p components/admin/sites
mkdir -p components/admin/content
mkdir -p components/admin/campaigns
mkdir -p components/admin/system
mkdir -p pages/admin/leads
mkdir -p pages/admin/scheduler
mkdir -p pages/admin/sites
mkdir -p pages/admin/campaigns
mkdir -p pages/admin/system
# MILESTONE 1: Intelligence Library
echo "📚 Creating Intelligence Library components..."
touch components/admin/intelligence/{AvatarIntelligenceManager,AvatarCard,AvatarEditModal,AvatarStats,GenerateVariantsModal}.tsx
touch components/admin/intelligence/{AvatarVariantsManager,VariantCard,VariantEditModal,VariantPreview}.tsx
touch components/admin/intelligence/{GeoIntelligenceManager,GeoMap,ClusterCard,LocationEditModal,GeoStats}.tsx
touch components/admin/intelligence/{SpintaxManager,SpintaxCategory,SpintaxEditModal,SpintaxPreview,SpintaxImport}.tsx
touch components/admin/intelligence/{CartesianManager,PatternCard,PatternEditModal,PatternBuilder,PatternPreview}.tsx
# MILESTONE 2: Factory & Forms
echo "🏭 Creating Factory components..."
touch components/admin/factory/{KanbanBoard,KanbanColumn,ArticleCard,CardActions,BulkActions}.tsx
touch components/admin/leads/{LeadManager,LeadForm,LeadTable,LeadStats,LeadExport}.tsx
touch pages/admin/leads/index.astro
touch components/admin/jobs/{JobsManager,JobTable,JobStats,JobDetails,JobActions}.tsx
touch components/admin/scheduler/{SchedulerCalendar,ScheduleModal,ScheduleStats,BulkSchedule}.tsx
touch pages/admin/scheduler/index.astro
# MILESTONE 3: All Collections
echo "📦 Creating Collection pages..."
touch pages/admin/collections/{page-blocks,content-fragments,headline-inventory,offer-blocks}.astro
touch components/admin/collections/{PageBlocksManager,FragmentsManager,HeadlinesManager,OffersManager}.tsx
touch pages/admin/sites/index.astro
touch pages/admin/content/{posts,pages}.astro
touch components/admin/sites/SitesManager.tsx
touch components/admin/content/{PostsManager,PagesManager,ArticlesManager}.tsx
touch pages/admin/campaigns/index.astro
touch pages/admin/system/work-log.astro
touch components/admin/campaigns/CampaignManager.tsx
touch components/admin/system/WorkLogViewer.tsx
echo "✅ Complete file structure created!"
echo "📊 Summary:"
echo " - Intelligence Library: 25 files"
echo " - Factory & Forms: 20 files"
echo " - Collections: 16 files"
echo " - Total: 61 new files"
echo ""
echo "🎯 Next: Start implementing Milestone 1 (Intelligence Library)"
```
---
## 📋 IMPLEMENTATION ORDER
### Priority 1 (This Week): Intelligence Library
1. Avatar Intelligence Manager
2. Avatar Variants Manager
3. Geo Intelligence Manager
4. Spintax Manager
5. Cartesian Manager
### Priority 2 (Next Week): Factory & Forms
1. Kanban Board
2. Lead Forms
3. Jobs Manager
4. Scheduler
### Priority 3 (Following Week): All Collections
1. Content Collections
2. Sites & Content
3. Campaigns & Logs
---
**Total Files to Create**: 61 files
**Estimated Time**: 3 weeks (3 milestones)
**Result**: Fully functional admin dashboard with all collections editable
🚀 **Ready to build!**

View File

@@ -1,66 +1,344 @@
# Spark Platform: Zero-to-One Onboarding Guide
# Spark Platform: AI Agent Onboarding Guide
> **Current State**: Phase 8 Complete (Premium Features Active)
> **Last Updated**: 2025-12-13
## 1. Project Overview
Spark is a high-performance content scaling platform ("Titanium Pro" edition). It leverages Directus (CMS/Data) and Astro/React (Frontend) to deliver enterprise-grade mass content generation.
## 2. Key Architecture
- **Frontend**: Astro (SSR) + React (Interactive Islands).
- **Backend**: Directus Headless CMS (Postgres).
- **Styling**: TailwindCSS (Titanium Pro Design System: Dark Mode, Glassmorphism, Neon Accents).
- **Deployment**: Coolify (Dockerized).
## 3. Core Modules (Implemented)
### 🏭 Factory Floor (`/admin/content/factory`)
The bread and butter of the operation.
- **Components**: `KanbanBoard`, `BulkGrid`.
- **Purpose**: Manage the lifecycle of thousands of articles.
### 🧠 Intelligence Station (`/admin/intelligence`)
Data-driven insights engine.
- **Geospatial Map (`/geo-targeting`)**: visualize market dominance with heatmaps using Leaflet.
- **Trend Analysis**: Analyze keyword volatility.
- **Avatar Metrics**: Track performance by user persona.
### 🧩 Assembler Engine (`/admin/assembler`)
The heart of content generation.
- **Template Composer**: 3-pane editor for Spintax templates.
- **Automation Builder (`/automations/workflow`)**: **[NEW]** Visual Node-based editor (React Flow) to design content pipelines (Trigger -> Generate -> Publish).
### 📊 Command Center (`/admin/analytics`)
- **Metrics Dashboard (`/metrics`)**: **[NEW]** Professional Tremor-based analytics (Area Charts, Donut Charts) tracking traffic and engagement.
### 🛡️ Testing Suite (`/admin/testing`)
- **Visual Editor (`/blocks/editor`)**: Drag-and-drop page builder (Craft.js).
- **SEO/Readability**: Real-time content scoring (Flesch-Kincaid).
## 4. Development Standards
### "Titanium Pro" Design Rules
- **Colors**: Background `#09090b` (Zinc-950), Accents `#eab308` (Yellow-500) and `#22c55e` (Green-500).
- **Components**: Always use **Shadcn/UI** (`/components/ui/*.tsx`).
- **Icons**: Lucide React (`<Edit className="h-4 w-4" />`).
- **Animations**: Use `framer-motion` for complex interactions, or CSS transitions for hover states.
### Code Quality
- **Typescript**: Strict mode. No `any` unless absolutely necessary (and temporarily).
- **Linting**: Run `npm run lint` before committing.
- **Testing**: Use the internal `/admin/testing/suite` to validate logic changes.
## 5. Deployment Workflow
1. **Commit**: `git push` triggers Coolify build.
2. **Build Process**: Dockerfile builds frontend (SSR).
3. **Validation**: Check `https://launch.jumpstartscaling.com` for the live site.
4. **Staging**: Use the "Preview" button in `CollectionManager` to vie draft content at `https://launch.jumpstartscaling.com/site/[id]/preview/[post_id]`.
## 6. Next Actions (Phase 7: Polish)
The logic is done. The next phase is strictly **Polish**:
- [ ] **Accessibility Audit**: Ensure ARIA labels on all new UI.
- [ ] **Documentation**: Expand inline JSDoc for complex engines (`engine.ts`).
- [ ] **Performance**: Optimize React Flow rendering for large graphs.
> **Current State**: Phase 1 Complete (Send to Factory), Intelligence Library Needs Full CRUD
> **Last Updated**: 2025-12-13
> **Priority**: Make Intelligence Library fully interactive + All collections working
---
**Note to AI Agent**: You are working on a codebase that is feature-complete for Alpha. Your goal is stability and refinement. Do not refactor core engines without explicit instruction.
## 1. Project Overview
Spark is a high-performance content scaling platform. It leverages:
- **Directus** (Headless CMS + PostgreSQL) for data
- **Astro + React** (SSR + Islands) for frontend
- **WordPress Integration** via REST API
- **Queue System** (BullMQ + Redis) for background processing
**Goal**: Generate and manage millions of SEO-optimized articles at scale.
---
## 2. Architecture
### Frontend (`/frontend`)
- **Framework**: Astro 4.7 (SSR)
- **UI**: React 18.3 (Interactive Islands)
- **Styling**: Tailwind CSS (Titanium Pro Design)
- **State**: Nanostores + React Query
- **Build**: Vite
### Backend (`/backend`)
- **CMS**: Directus 11
- **Database**: PostgreSQL 16 (PostGIS)
- **Cache**: Redis 7
- **Queue**: BullMQ
### Deployment
- **Platform**: Coolify (Docker Compose)
- **Frontend**: `launch.jumpstartscaling.com`
- **Backend**: `spark.jumpstartscaling.com`
---
## 3. Current Features (Working)
### ✅ Intelligence Library (Read-Only)
**Location**: `/admin/content/*` and `/admin/collections/*`
**Collections**:
1. **Avatar Intelligence** - 10 base avatars
2. **Avatar Variants** - 30 variants (gender, tone)
3. **Geo Intelligence** - 3 clusters, multiple cities
4. **Spintax Dictionaries** - 12 dictionaries, 62 terms
5. **Cartesian Patterns** - 3 pattern types
**Status**: ✅ Pages exist, data loads
**Problem**: ❌ Not editable, no stats, no "Send to Engine" buttons
**Priority**: 🔥 TOP PRIORITY - Make fully interactive
---
### ✅ Jumpstart Workflow
**Location**: `/admin/sites/jumpstart`
**Features**:
- Connect to WordPress site
- Scan all posts (tested with 1,456 posts)
- Generate QC batch (3 samples)
- Create generation job
- "Send to Factory" button on each QC item
**Status**: ✅ Fully operational
---
### ✅ Content Generation
**API**: `/api/seo/generate-article`
**Features**:
- Template selection (Long-Tail SEO, Local Authority, etc.)
- Geo-targeting from Intelligence Library
- Spintax expansion
- Cartesian pattern application
- SEO optimization
**Status**: ✅ Working, tested with sample article
---
### ✅ Article Preview
**Location**: `/preview/article/[articleId]`
**Features**:
- Beautiful purple gradient design
- Shows metadata (SEO score, word count, template)
- Links to edit in Directus
**Status**: ✅ Working
---
## 4. What Needs to Be Built (ROADMAP)
See **IMPLEMENTATION_ROADMAP.md** for complete details.
### 🔥 MILESTONE 1: Intelligence Library - Full CRUD (TOP PRIORITY)
**Goal**: Make all 5 Intelligence pages fully editable with stats and cool UX
**Tasks**:
1. **Avatar Intelligence** - Add/Edit/Delete avatars, stats, "Generate Variants" button
2. **Avatar Variants** - Add/Edit/Delete variants, "Test Variant" button
3. **Geo Intelligence** - Interactive map, Add/Edit/Delete clusters/cities
4. **Spintax Dictionaries** - Add/Edit/Delete terms, "Test Spintax" preview, CSV import
5. **Cartesian Patterns** - Add/Edit/Delete patterns, "Test Pattern" preview, formula builder
**Files Created**: 25 components (already created by build script)
**Location**: `frontend/src/components/admin/intelligence/`
---
### 🏭 MILESTONE 2: Factory & Forms
**Goal**: Kanban board working, forms for leads, editable tables with stats
**Tasks**:
1. **Kanban Board** - Drag-drop columns, article cards, "Send to Engine" buttons
2. **Lead Forms** - Capture leads, editable table, stats, export
3. **Generation Jobs** - Editable table, retry failed, view details
4. **Scheduler** - Calendar view, drag-drop scheduling, bulk actions
**Files Created**: 20 components (already created by build script)
**Location**: `frontend/src/components/admin/factory/`, `leads/`, `jobs/`, `scheduler/`
---
### 📦 MILESTONE 3: All Collections - Pages & CRUD
**Goal**: Every Directus collection has a working admin page
**Collections Needing Pages**:
- Page Blocks
- Content Fragments
- Headline Inventory
- Offer Blocks (3 types)
- Sites
- Posts
- Pages
- Campaign Masters
- Work Log
**Files Created**: 16 components (already created by build script)
**Location**: `frontend/src/pages/admin/collections/`, `sites/`, `campaigns/`, `system/`
---
## 5. Development Standards
### Titanium Pro Design System
**Colors**:
- Background: `#09090b` (Zinc-950)
- Accents: `#eab308` (Yellow-500), `#22c55e` (Green-500), `#a855f7` (Purple-500)
- Text: White/Slate
**Components**:
- Always use Shadcn/UI components (`/components/ui/*.tsx`)
- Icons: Lucide React
- Animations: Framer Motion (admin), CSS (public)
**Example**:
```tsx
import { Button } from '@/components/ui/button';
import { Edit } from 'lucide-react';
import { motion } from 'framer-motion';
<motion.div whileHover={{ scale: 1.05 }}>
<Button className="bg-purple-600 hover:bg-purple-500">
<Edit className="h-4 w-4 mr-2" />
Edit Avatar
</Button>
</motion.div>
```
---
### Code Quality
**TypeScript**:
- Strict mode enabled
- Use `@ts-ignore` only for Directus type issues
- Define interfaces for all data structures
**React Query**:
- Use for all API calls
- Enable devtools in admin layout
- Cache strategy: `staleTime: 5 * 60 * 1000` (5 minutes)
**Forms**:
- Use `react-hook-form` + `zod` for validation
- Always show loading states
- Display success/error toasts
---
## 6. Key Files & Locations
### Intelligence Library
```
frontend/src/
├── pages/admin/content/
│ ├── avatars.astro
│ └── geo_clusters.astro
├── pages/admin/collections/
│ ├── spintax-dictionaries.astro
│ └── cartesian-patterns.astro
└── components/admin/intelligence/
├── AvatarIntelligenceManager.tsx (TO BUILD)
├── GeoIntelligenceManager.tsx (TO BUILD)
├── SpintaxManager.tsx (TO BUILD)
└── CartesianManager.tsx (TO BUILD)
```
### Factory & Forms
```
frontend/src/
├── components/admin/factory/
│ ├── KanbanBoard.tsx (TO BUILD)
│ └── SendToFactoryButton.tsx (✅ DONE)
├── components/admin/leads/
│ └── LeadManager.tsx (TO BUILD)
└── components/admin/jobs/
└── JobsManager.tsx (TO BUILD)
```
### API Endpoints
```
frontend/src/pages/api/
├── factory/
│ └── send-to-factory.ts (✅ DONE)
├── seo/
│ └── generate-article.ts (✅ DONE)
└── admin/
└── import-blueprint.ts (✅ EXISTS)
```
---
## 7. Development Workflow
### Local Development
```bash
cd /Users/christopheramaya/Downloads/spark/frontend
npm run dev
# Access at http://localhost:4321
```
### Testing
```bash
# Run diagnostic test
cd /Users/christopheramaya/Downloads/spark/backend
npx ts-node scripts/diagnostic_test.ts
```
### Deployment
```bash
git add .
git commit -m "feat: Description of changes"
git push origin main
# Coolify auto-deploys in ~2 minutes
```
---
## 8. Troubleshooting Tools
### React Query Devtools
**Access**: Bottom-right corner of admin pages
**Use**: See all API queries, cache status, refetch triggers
### Bundle Analyzer
```bash
npm run build
# Opens interactive bundle visualization
```
### Vite Inspector
**Access**: `http://localhost:4321/__inspect/`
**Use**: Debug file transformations, module graph
### Queue Dashboard
**Access**: `/admin/queue` (when implemented)
**Use**: Monitor background jobs, retry failures
---
## 9. Next Actions (Priority Order)
### Immediate (This Week):
1. ✅ Verify deployment succeeds
2. ✅ Test Send to Factory button
3. 🔥 **START: Implement Avatar Intelligence Manager (Milestone 1, Task 1)**
4. 🔥 **Implement Avatar Variants Manager (Milestone 1, Task 2)**
5. 🔥 **Implement Geo Intelligence Manager (Milestone 1, Task 3)**
### This Week:
1. Complete Milestone 1 (Intelligence Library - all 5 pages)
2. Add stats dashboards
3. Add "Send to Engine" buttons
4. Implement cool UX (animations, previews, drag-drop)
### Next Week:
1. Start Milestone 2 (Kanban Board, Leads, Jobs, Scheduler)
2. Implement queue system
3. Add queue dashboard
### Following Week:
1. Complete Milestone 3 (All collection pages)
2. Performance optimization
3. Final polish
---
## 10. Important Notes
### For AI Agents:
- **File Structure**: Already created by `build-structure.sh` (61 files)
- **Implementation Order**: Follow IMPLEMENTATION_ROADMAP.md
- **Design System**: Always use Titanium Pro colors and Shadcn/UI
- **Testing**: Test each component before moving to next
- **Documentation**: Update this file as features are completed
### For Humans:
- **Access Admin**: `https://launch.jumpstartscaling.com/admin`
- **Access Directus**: `https://spark.jumpstartscaling.com`
- **Credentials**: Check DIRECTUS_SECRETS.md
- **Support**: See TROUBLESHOOTING.md (archived)
---
**Current Focus**: 🔥 Milestone 1 - Make Intelligence Library fully interactive
**Next Milestone**: 🏭 Milestone 2 - Kanban Board & Forms
**Goal**: Fully functional admin dashboard with all collections editable
🚀 **Ready to build!**

142
build-structure.sh Executable file
View File

@@ -0,0 +1,142 @@
#!/bin/bash
# Spark Platform - Complete File Structure Builder
# Run this to create all files for Milestones 1-3
cd /Users/christopheramaya/Downloads/spark/frontend/src
echo "🏗️ Building complete Spark Platform file structure..."
echo ""
# Create all directories
echo "📁 Creating directories..."
mkdir -p components/admin/intelligence
mkdir -p components/admin/factory
mkdir -p components/admin/leads
mkdir -p components/admin/jobs
mkdir -p components/admin/scheduler
mkdir -p components/admin/collections
mkdir -p components/admin/sites
mkdir -p components/admin/content
mkdir -p components/admin/campaigns
mkdir -p components/admin/system
mkdir -p pages/admin/leads
mkdir -p pages/admin/scheduler
mkdir -p pages/admin/sites
mkdir -p pages/admin/campaigns
mkdir -p pages/admin/system
# MILESTONE 1: Intelligence Library (TOP PRIORITY)
echo ""
echo "📚 MILESTONE 1: Creating Intelligence Library components..."
echo " → Avatar Intelligence..."
touch components/admin/intelligence/AvatarIntelligenceManager.tsx
touch components/admin/intelligence/AvatarCard.tsx
touch components/admin/intelligence/AvatarEditModal.tsx
touch components/admin/intelligence/AvatarStats.tsx
touch components/admin/intelligence/GenerateVariantsModal.tsx
echo " → Avatar Variants..."
touch components/admin/intelligence/AvatarVariantsManager.tsx
touch components/admin/intelligence/VariantCard.tsx
touch components/admin/intelligence/VariantEditModal.tsx
touch components/admin/intelligence/VariantPreview.tsx
echo " → Geo Intelligence..."
touch components/admin/intelligence/GeoIntelligenceManager.tsx
touch components/admin/intelligence/GeoMap.tsx
touch components/admin/intelligence/ClusterCard.tsx
touch components/admin/intelligence/LocationEditModal.tsx
touch components/admin/intelligence/GeoStats.tsx
echo " → Spintax Dictionaries..."
touch components/admin/intelligence/SpintaxManager.tsx
touch components/admin/intelligence/SpintaxCategory.tsx
touch components/admin/intelligence/SpintaxEditModal.tsx
touch components/admin/intelligence/SpintaxPreview.tsx
touch components/admin/intelligence/SpintaxImport.tsx
echo " → Cartesian Patterns..."
touch components/admin/intelligence/CartesianManager.tsx
touch components/admin/intelligence/PatternCard.tsx
touch components/admin/intelligence/PatternEditModal.tsx
touch components/admin/intelligence/PatternBuilder.tsx
touch components/admin/intelligence/PatternPreview.tsx
# MILESTONE 2: Factory & Forms
echo ""
echo "🏭 MILESTONE 2: Creating Factory components..."
echo " → Kanban Board..."
touch components/admin/factory/KanbanBoard.tsx
touch components/admin/factory/KanbanColumn.tsx
touch components/admin/factory/ArticleCard.tsx
touch components/admin/factory/CardActions.tsx
touch components/admin/factory/BulkActions.tsx
echo " → Lead Management..."
touch components/admin/leads/LeadManager.tsx
touch components/admin/leads/LeadForm.tsx
touch components/admin/leads/LeadTable.tsx
touch components/admin/leads/LeadStats.tsx
touch components/admin/leads/LeadExport.tsx
touch pages/admin/leads/index.astro
echo " → Jobs Manager..."
touch components/admin/jobs/JobsManager.tsx
touch components/admin/jobs/JobTable.tsx
touch components/admin/jobs/JobStats.tsx
touch components/admin/jobs/JobDetails.tsx
touch components/admin/jobs/JobActions.tsx
echo " → Scheduler..."
touch components/admin/scheduler/SchedulerCalendar.tsx
touch components/admin/scheduler/ScheduleModal.tsx
touch components/admin/scheduler/ScheduleStats.tsx
touch components/admin/scheduler/BulkSchedule.tsx
touch pages/admin/scheduler/index.astro
# MILESTONE 3: All Collections
echo ""
echo "📦 MILESTONE 3: Creating Collection pages..."
echo " → Content Collections..."
touch pages/admin/collections/page-blocks.astro
touch pages/admin/collections/content-fragments.astro
touch pages/admin/collections/headline-inventory.astro
touch pages/admin/collections/offer-blocks.astro
touch components/admin/collections/PageBlocksManager.tsx
touch components/admin/collections/FragmentsManager.tsx
touch components/admin/collections/HeadlinesManager.tsx
touch components/admin/collections/OffersManager.tsx
echo " → Sites & Content..."
touch pages/admin/sites/index.astro
touch pages/admin/content/posts.astro
touch pages/admin/content/pages.astro
touch components/admin/sites/SitesManager.tsx
touch components/admin/content/PostsManager.tsx
touch components/admin/content/PagesManager.tsx
touch components/admin/content/ArticlesManager.tsx
echo " → Campaigns & Logs..."
touch pages/admin/campaigns/index.astro
touch pages/admin/system/work-log.astro
touch components/admin/campaigns/CampaignManager.tsx
touch components/admin/system/WorkLogViewer.tsx
echo ""
echo "✅ Complete file structure created!"
echo ""
echo "📊 Summary:"
echo " ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo " MILESTONE 1 (Intelligence Library): 25 files"
echo " MILESTONE 2 (Factory & Forms): 20 files"
echo " MILESTONE 3 (All Collections): 16 files"
echo " ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo " TOTAL: 61 files"
echo ""
echo "🎯 Next Steps:"
echo " 1. Start with Milestone 1 (Intelligence Library)"
echo " 2. Make all 5 Intelligence pages fully editable"
echo " 3. Add stats, Send to Engine buttons, cool UX"
echo ""
echo "🚀 Ready to implement!"