feat: Mission 27 — Automation Builder v2 + Template Catalog Foundation

- Visual canvas editor (ReactFlow @xyflow/react v12) with TriggerNode, ActionNode, NodePalette, NodeConfigPanel
- FlowDraft model: per-flow mutable builder graph, separate from immutable FlowVersion
- Builder v2 endpoints: GET/PUT draft, validate, publish, simulate, rollback, versions
- builder_translator.py: validate_graph, translate, simulate — 21 unit tests passing
- AutomationTemplate + AutomationTemplateVersion with admin CRUD + workspace clone
- GET/POST /templates/ workspace catalog; POST /templates/:slug/clone
- Admin: GET/POST /admin/templates, versions, publish endpoints
- Alembic migration g7h8i9j0k1l2 + merge migration 2163b9b16da8 (M20+M27)
- Frontend: automations-api.ts, templates-api.ts; admin/templates pages
- All 57 tests passing

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/alembic/versions/2163b9b16da8_merge_m20_m27_heads.py

@@ -0,0 +1,28 @@
+"""merge_m20_m27_heads
+
+Revision ID: 2163b9b16da8
+Revises: f6g7h8i9j0k1, g7h8i9j0k1l2
+Create Date: 2026-02-28 09:08:59.083592
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision: str = '2163b9b16da8'
+down_revision: Union[str, Sequence[str], None] = ('f6g7h8i9j0k1', 'g7h8i9j0k1l2')
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    """Upgrade schema."""
+    pass
+
+
+def downgrade() -> None:
+    """Downgrade schema."""
+    pass

backend/alembic/versions/g7h8i9j0k1l2_mission_27_builder_v2.py

@@ -0,0 +1,152 @@
+"""Mission 27 — Automation Builder v2 + Template Catalog Foundation
+
+Revision ID: g7h8i9j0k1l2
+Revises: e5f6g7h8i9j0
+Create Date: 2026-02-28
+
+Adds:
+- flow.published_version_id (FK to flowversion, use_alter=True circular ref)
+- flowdraft table (one per flow, editable builder graph)
+- automationtemplate table (global admin-managed templates)
+- automationtemplateversion table (immutable template snapshots)
+"""
+from alembic import op
+import sqlalchemy as sa
+
+# revision identifiers, used by Alembic.
+revision = "g7h8i9j0k1l2"
+down_revision = "e5f6g7h8i9j0"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    bind = op.get_bind()
+    is_sqlite = bind.dialect.name == "sqlite"
+
+    # 1. Add published_version_id to flow table
+    op.add_column(
+        "flow",
+        sa.Column("published_version_id", sa.Uuid(), nullable=True)
+    )
+    op.create_index("ix_flow_published_version_id", "flow", ["published_version_id"])
+    # SQLite does not support ALTER TABLE ADD CONSTRAINT — skip FK for SQLite
+    if not is_sqlite:
+        op.create_foreign_key(
+            "fk_flow_published_version_id",
+            "flow", "flowversion",
+            ["published_version_id"], ["id"],
+            use_alter=True
+        )
+
+    # 2. Backfill published_version_id for existing flows that have published versions
+    op.execute("""
+        UPDATE flow
+        SET published_version_id = (
+            SELECT fv.id FROM flowversion fv
+            WHERE fv.flow_id = flow.id
+              AND fv.is_published = TRUE
+            ORDER BY fv.version_number DESC
+            LIMIT 1
+        )
+        WHERE EXISTS (
+            SELECT 1 FROM flowversion fv2
+            WHERE fv2.flow_id = flow.id
+              AND fv2.is_published = TRUE
+        )
+    """)
+
+    # 3. Create flowdraft table
+    op.create_table(
+        "flowdraft",
+        sa.Column("id", sa.Uuid(), nullable=False),
+        sa.Column("created_at", sa.DateTime(), nullable=False),
+        sa.Column("updated_at", sa.DateTime(), nullable=False),
+        sa.Column("workspace_id", sa.Uuid(), nullable=False),
+        sa.Column("flow_id", sa.Uuid(), nullable=False),
+        sa.Column("builder_graph_json", sa.JSON(), nullable=False),
+        sa.Column("updated_by_user_id", sa.Uuid(), nullable=True),
+        sa.Column("last_validation_errors", sa.JSON(), nullable=True),
+        sa.ForeignKeyConstraint(["flow_id"], ["flow.id"]),
+        sa.PrimaryKeyConstraint("id"),
+        sa.UniqueConstraint("flow_id", name="uq_flowdraft_flow_id"),
+    )
+    op.create_index("ix_flowdraft_workspace_id", "flowdraft", ["workspace_id"])
+    op.create_index("idx_flowdraft_ws_updated", "flowdraft", ["workspace_id", "updated_at"])
+
+    # 4. Create automationtemplate table
+    op.create_table(
+        "automationtemplate",
+        sa.Column("id", sa.Uuid(), nullable=False),
+        sa.Column("created_at", sa.DateTime(), nullable=False),
+        sa.Column("updated_at", sa.DateTime(), nullable=False),
+        sa.Column("slug", sa.String(), nullable=False),
+        sa.Column("name", sa.String(), nullable=False),
+        sa.Column("description", sa.String(), nullable=True),
+        sa.Column("category", sa.String(), nullable=False),
+        sa.Column("industry_tags", sa.JSON(), nullable=False),
+        sa.Column("platforms", sa.JSON(), nullable=False),
+        sa.Column("required_integrations", sa.JSON(), nullable=False),
+        sa.Column("is_featured", sa.Boolean(), nullable=False),
+        sa.Column("is_active", sa.Boolean(), nullable=False),
+        sa.Column("created_by_admin_id", sa.Uuid(), nullable=True),
+        sa.PrimaryKeyConstraint("id"),
+        sa.UniqueConstraint("slug", name="uq_automationtemplate_slug"),
+    )
+    op.create_index("ix_automationtemplate_slug", "automationtemplate", ["slug"], unique=True)
+    op.create_index("ix_automationtemplate_name", "automationtemplate", ["name"])
+    op.create_index("ix_automationtemplate_category", "automationtemplate", ["category"])
+    op.create_index("ix_automationtemplate_is_featured", "automationtemplate", ["is_featured"])
+    op.create_index("ix_automationtemplate_is_active", "automationtemplate", ["is_active"])
+    op.create_index("idx_template_active_featured", "automationtemplate", ["is_active", "is_featured"])
+
+    # 5. Create automationtemplateversion table
+    op.create_table(
+        "automationtemplateversion",
+        sa.Column("id", sa.Uuid(), nullable=False),
+        sa.Column("created_at", sa.DateTime(), nullable=False),
+        sa.Column("updated_at", sa.DateTime(), nullable=False),
+        sa.Column("template_id", sa.Uuid(), nullable=False),
+        sa.Column("version_number", sa.Integer(), nullable=False),
+        sa.Column("builder_graph_json", sa.JSON(), nullable=False),
+        sa.Column("translated_definition_json", sa.JSON(), nullable=True),
+        sa.Column("changelog", sa.String(), nullable=True),
+        sa.Column("created_by_admin_id", sa.Uuid(), nullable=True),
+        sa.Column("is_published", sa.Boolean(), nullable=False),
+        sa.Column("published_at", sa.DateTime(), nullable=True),
+        sa.ForeignKeyConstraint(["template_id"], ["automationtemplate.id"]),
+        sa.PrimaryKeyConstraint("id"),
+    )
+    op.create_index("ix_automationtemplateversion_template_id", "automationtemplateversion", ["template_id"])
+    op.create_index("ix_automationtemplateversion_is_published", "automationtemplateversion", ["is_published"])
+    op.create_index("idx_atv_template_ver", "automationtemplateversion", ["template_id", "version_number"])
+    op.create_index("idx_atv_template_published", "automationtemplateversion", ["template_id", "is_published"])
+
+
+def downgrade() -> None:
+    bind = op.get_bind()
+    is_sqlite = bind.dialect.name == "sqlite"
+
+    # Reverse order
+    op.drop_index("idx_atv_template_published", table_name="automationtemplateversion")
+    op.drop_index("idx_atv_template_ver", table_name="automationtemplateversion")
+    op.drop_index("ix_automationtemplateversion_is_published", table_name="automationtemplateversion")
+    op.drop_index("ix_automationtemplateversion_template_id", table_name="automationtemplateversion")
+    op.drop_table("automationtemplateversion")
+
+    op.drop_index("idx_template_active_featured", table_name="automationtemplate")
+    op.drop_index("ix_automationtemplate_is_active", table_name="automationtemplate")
+    op.drop_index("ix_automationtemplate_is_featured", table_name="automationtemplate")
+    op.drop_index("ix_automationtemplate_category", table_name="automationtemplate")
+    op.drop_index("ix_automationtemplate_name", table_name="automationtemplate")
+    op.drop_index("ix_automationtemplate_slug", table_name="automationtemplate")
+    op.drop_table("automationtemplate")
+
+    op.drop_index("idx_flowdraft_ws_updated", table_name="flowdraft")
+    op.drop_index("ix_flowdraft_workspace_id", table_name="flowdraft")
+    op.drop_table("flowdraft")
+
+    if not is_sqlite:
+        op.drop_constraint("fk_flow_published_version_id", "flow", type_="foreignkey")
+    op.drop_index("ix_flow_published_version_id", table_name="flow")
+    op.drop_column("flow", "published_version_id")

backend/app/api/v1/admin.py

@@ -5,7 +5,7 @@ from sqlmodel import select, func
 from pydantic import BaseModel
 import platform
 
-from datetime import timedelta
+from datetime import datetime, timedelta
 from uuid import UUID
 
 from app.core.db import get_db
@@ -27,7 +27,9 @@ from app.models.models import (
     AgencyAccount, AgencyMember, AgencyStatus, WorkspaceOwnership,
     RuntimeEventLog,
     QualificationConfig,
+    AutomationTemplate, AutomationTemplateVersion,
 )
+from app.domain.builder_translator import validate_graph, translate
 from app.schemas.envelope import ResponseEnvelope, wrap_data, wrap_error
 from app.core.modules import module_cache, ALL_MODULES, MODULE_ADMIN_PORTAL
 from app.core.audit import log_admin_action
@@ -1795,3 +1797,296 @@ async def reset_workspace_qualification(
         "qualification_questions": config.qualification_questions,
         "qualification_statuses": config.qualification_statuses,
     })
+
+
+# ─── Template Catalog Admin Endpoints (Mission 27) ────────────────────────────
+
+class CreateTemplatePayload(BaseModel):
+    slug: str
+    name: str
+    description: Optional[str] = None
+    category: str = "general"
+    industry_tags: List[str] = []
+    platforms: List[str] = []
+    required_integrations: List[str] = []
+    is_featured: bool = False
+
+
+class PatchTemplatePayload(BaseModel):
+    name: Optional[str] = None
+    description: Optional[str] = None
+    category: Optional[str] = None
+    is_featured: Optional[bool] = None
+    is_active: Optional[bool] = None
+    industry_tags: Optional[List[str]] = None
+    platforms: Optional[List[str]] = None
+    required_integrations: Optional[List[str]] = None
+
+
+class CreateTemplateVersionPayload(BaseModel):
+    builder_graph_json: Dict[str, Any]
+    changelog: Optional[str] = None
+
+
+@router.get("/templates", response_model=ResponseEnvelope[dict])
+async def admin_list_templates(
+    db: AsyncSession = Depends(get_db),
+    admin_user: User = Depends(require_superadmin),
+    skip: int = Query(0, ge=0),
+    limit: int = Query(50, ge=1, le=100),
+) -> Any:
+    """List all automation templates (admin view, includes inactive)."""
+    count_res = await db.execute(select(func.count(AutomationTemplate.id)))
+    total = count_res.scalar_one() or 0
+
+    result = await db.execute(
+        select(AutomationTemplate)
+        .order_by(AutomationTemplate.created_at.desc())
+        .offset(skip).limit(limit)
+    )
+    templates = result.scalars().all()
+
+    return wrap_data({
+        "items": [
+            {
+                "id": str(t.id),
+                "slug": t.slug,
+                "name": t.name,
+                "description": t.description,
+                "category": t.category,
+                "industry_tags": t.industry_tags or [],
+                "platforms": t.platforms or [],
+                "required_integrations": t.required_integrations or [],
+                "is_featured": t.is_featured,
+                "is_active": t.is_active,
+                "created_at": t.created_at.isoformat(),
+            }
+            for t in templates
+        ],
+        "total": total,
+    })
+
+
+@router.post("/templates", response_model=ResponseEnvelope[dict])
+async def admin_create_template(
+    payload: CreateTemplatePayload,
+    request: Request,
+    db: AsyncSession = Depends(get_db),
+    admin_user: User = Depends(require_superadmin),
+) -> Any:
+    """Create a new automation template."""
+    # Check slug uniqueness
+    existing = await db.execute(
+        select(AutomationTemplate).where(AutomationTemplate.slug == payload.slug)
+    )
+    if existing.scalars().first():
+        return wrap_error(f"Template with slug '{payload.slug}' already exists")
+
+    now = datetime.utcnow()
+    template = AutomationTemplate(
+        slug=payload.slug,
+        name=payload.name,
+        description=payload.description,
+        category=payload.category,
+        industry_tags=payload.industry_tags,
+        platforms=payload.platforms,
+        required_integrations=payload.required_integrations,
+        is_featured=payload.is_featured,
+        is_active=True,
+        created_by_admin_id=admin_user.id,
+        created_at=now,
+        updated_at=now,
+    )
+    db.add(template)
+    await audit_event(
+        db, action="template_create", entity_type="automation_template",
+        entity_id=payload.slug, actor_user_id=admin_user.id,
+        actor_type="admin", outcome="success", request=request,
+        metadata={"name": payload.name},
+    )
+    await db.commit()
+    await db.refresh(template)
+
+    return wrap_data({"id": str(template.id), "slug": template.slug, "name": template.name})
+
+
+@router.patch("/templates/{template_id}", response_model=ResponseEnvelope[dict])
+async def admin_patch_template(
+    template_id: UUID,
+    payload: PatchTemplatePayload,
+    request: Request,
+    db: AsyncSession = Depends(get_db),
+    admin_user: User = Depends(require_superadmin),
+) -> Any:
+    """Update template metadata."""
+    template = await db.get(AutomationTemplate, template_id)
+    if not template:
+        return wrap_error("Template not found")
+
+    if payload.name is not None:
+        template.name = payload.name
+    if payload.description is not None:
+        template.description = payload.description
+    if payload.category is not None:
+        template.category = payload.category
+    if payload.is_featured is not None:
+        template.is_featured = payload.is_featured
+    if payload.is_active is not None:
+        template.is_active = payload.is_active
+    if payload.industry_tags is not None:
+        template.industry_tags = payload.industry_tags
+    if payload.platforms is not None:
+        template.platforms = payload.platforms
+    if payload.required_integrations is not None:
+        template.required_integrations = payload.required_integrations
+
+    template.updated_at = datetime.utcnow()
+    db.add(template)
+
+    await audit_event(
+        db, action="template_update", entity_type="automation_template",
+        entity_id=str(template_id), actor_user_id=admin_user.id,
+        actor_type="admin", outcome="success", request=request,
+    )
+    await db.commit()
+    return wrap_data({"id": str(template.id), "updated": True})
+
+
+@router.post("/templates/{template_id}/versions", response_model=ResponseEnvelope[dict])
+async def admin_create_template_version(
+    template_id: UUID,
+    payload: CreateTemplateVersionPayload,
+    request: Request,
+    db: AsyncSession = Depends(get_db),
+    admin_user: User = Depends(require_superadmin),
+) -> Any:
+    """Create a new draft version for a template (validates the graph)."""
+    template = await db.get(AutomationTemplate, template_id)
+    if not template:
+        return wrap_error("Template not found")
+
+    # Validate the graph
+    errors = validate_graph(payload.builder_graph_json)
+    if errors:
+        return wrap_data({"valid": False, "errors": errors})
+
+    # Translate to runtime contract for audit/preview
+    try:
+        translated = translate(payload.builder_graph_json)
+    except Exception as e:
+        translated = None
+
+    # Get next version number
+    version_result = await db.execute(
+        select(func.max(AutomationTemplateVersion.version_number))
+        .where(AutomationTemplateVersion.template_id == template_id)
+    )
+    max_ver = version_result.scalar() or 0
+    new_ver_num = max_ver + 1
+
+    now = datetime.utcnow()
+    version = AutomationTemplateVersion(
+        template_id=template_id,
+        version_number=new_ver_num,
+        builder_graph_json=payload.builder_graph_json,
+        translated_definition_json=translated,
+        changelog=payload.changelog,
+        created_by_admin_id=admin_user.id,
+        is_published=False,
+        created_at=now,
+        updated_at=now,
+    )
+    db.add(version)
+
+    await audit_event(
+        db, action="template_version_create", entity_type="automation_template_version",
+        entity_id=str(template_id), actor_user_id=admin_user.id,
+        actor_type="admin", outcome="success", request=request,
+        metadata={"version_number": new_ver_num},
+    )
+    await db.commit()
+    await db.refresh(version)
+
+    return wrap_data({
+        "valid": True,
+        "id": str(version.id),
+        "version_number": version.version_number,
+    })
+
+
+@router.post("/templates/{template_id}/publish", response_model=ResponseEnvelope[dict])
+async def admin_publish_template(
+    template_id: UUID,
+    request: Request,
+    db: AsyncSession = Depends(get_db),
+    admin_user: User = Depends(require_superadmin),
+) -> Any:
+    """Publish the latest draft version of a template."""
+    template = await db.get(AutomationTemplate, template_id)
+    if not template:
+        return wrap_error("Template not found")
+
+    # Get latest unpublished version
+    result = await db.execute(
+        select(AutomationTemplateVersion)
+        .where(
+            AutomationTemplateVersion.template_id == template_id,
+            AutomationTemplateVersion.is_published == False,
+        )
+        .order_by(AutomationTemplateVersion.version_number.desc())
+        .limit(1)
+    )
+    version = result.scalars().first()
+    if not version:
+        return wrap_error("No unpublished version found to publish")
+
+    now = datetime.utcnow()
+    version.is_published = True
+    version.published_at = now
+    version.updated_at = now
+    db.add(version)
+
+    await audit_event(
+        db, action="template_publish", entity_type="automation_template_version",
+        entity_id=str(template_id), actor_user_id=admin_user.id,
+        actor_type="admin", outcome="success", request=request,
+        metadata={"version_number": version.version_number},
+    )
+    await db.commit()
+
+    return wrap_data({
+        "published": True,
+        "version_number": version.version_number,
+        "published_at": now.isoformat(),
+    })
+
+
+@router.get("/templates/{template_id}/versions", response_model=ResponseEnvelope[list])
+async def admin_list_template_versions(
+    template_id: UUID,
+    db: AsyncSession = Depends(get_db),
+    admin_user: User = Depends(require_superadmin),
+) -> Any:
+    """List all versions for a template."""
+    template = await db.get(AutomationTemplate, template_id)
+    if not template:
+        return wrap_error("Template not found")
+
+    result = await db.execute(
+        select(AutomationTemplateVersion)
+        .where(AutomationTemplateVersion.template_id == template_id)
+        .order_by(AutomationTemplateVersion.version_number.desc())
+    )
+    versions = result.scalars().all()
+
+    return wrap_data([
+        {
+            "id": str(v.id),
+            "version_number": v.version_number,
+            "changelog": v.changelog,
+            "is_published": v.is_published,
+            "published_at": v.published_at.isoformat() if v.published_at else None,
+            "created_at": v.created_at.isoformat(),
+        }
+        for v in versions
+    ])

backend/app/api/v1/automations.py

@@ -1,24 +1,32 @@
 from typing import List, Optional, Dict, Any
 from uuid import UUID
 import uuid
+from datetime import datetime
 from fastapi import APIRouter, Depends, HTTPException, Request
 from sqlalchemy.ext.asyncio import AsyncSession
-from sqlmodel import select
+from sqlmodel import select, func
 from pydantic import BaseModel
 
 from app.core.db import get_db
 from app.api import deps
-from app.models.models import Flow, FlowVersion, FlowStatus, User, Workspace
-from app.api.v1.auth import login # Keeping this if needed, or just remove if unused
+from app.models.models import (
+    Flow, FlowVersion, FlowDraft, FlowStatus, User, Workspace,
+    RuntimeEventLog,
+)
 from app.schemas.envelope import ResponseEnvelope, wrap_data, wrap_error
 from app.core.catalog_registry import VALID_NODE_TYPES, VALID_TRIGGER_TYPES
 from app.services.entitlements import require_entitlement
 from app.services.audit_service import audit_event
+from app.domain.builder_translator import validate_graph, translate, simulate
 
 router = APIRouter()
 
+# ---------------------------------------------------------------------------
+# Request schemas
+# ---------------------------------------------------------------------------
+
 class BuilderStep(BaseModel):
-    type: str # AI_REPLY, SEND_MESSAGE, HUMAN_HANDOVER, TAG_CONTACT
+    type: str  # AI_REPLY, SEND_MESSAGE, HUMAN_HANDOVER, TAG_CONTACT
     config: Dict[str, Any]
 
 class BuilderTrigger(BaseModel):
@@ -33,14 +41,83 @@ class BuilderPayload(BaseModel):
     steps: List[BuilderStep]
     publish: bool = False
 
+class CreateFlowPayload(BaseModel):
+    name: str
+    description: Optional[str] = ""
+
+class UpdateFlowPayload(BaseModel):
+    name: Optional[str] = None
+    description: Optional[str] = None
+
+class SaveDraftPayload(BaseModel):
+    builder_graph_json: Dict[str, Any]
+
+class SimulatePayload(BaseModel):
+    mock_payload: Optional[Dict[str, Any]] = None
+
+# ---------------------------------------------------------------------------
+# GET /automations — list
+# ---------------------------------------------------------------------------
+
 @router.get("", dependencies=[Depends(require_entitlement("automations"))])
 async def list_flows(
     db: AsyncSession = Depends(get_db),
-    current_user: User = Depends(deps.get_current_user)
+    workspace: Workspace = Depends(deps.get_active_workspace),
+    current_user: User = Depends(deps.get_current_user),
 ):
     """List all flows for the workspace."""
-    result = await db.execute(select(Flow))
-    return wrap_data(result.scalars().all())
+    result = await db.execute(
+        select(Flow).where(Flow.workspace_id == workspace.id)
+        .order_by(Flow.updated_at.desc())
+    )
+    flows = result.scalars().all()
+    return wrap_data([
+        {
+            "id": str(f.id),
+            "name": f.name,
+            "description": f.description,
+            "status": f.status,
+            "published_version_id": str(f.published_version_id) if f.published_version_id else None,
+            "created_at": f.created_at.isoformat(),
+            "updated_at": f.updated_at.isoformat(),
+        }
+        for f in flows
+    ])
+
+# ---------------------------------------------------------------------------
+# POST /automations — create blank flow (canvas-first approach)
+# ---------------------------------------------------------------------------
+
+@router.post("", dependencies=[Depends(require_entitlement("automations", increment=True))])
+async def create_flow(
+    payload: CreateFlowPayload,
+    request: Request,
+    db: AsyncSession = Depends(get_db),
+    workspace: Workspace = Depends(deps.get_active_workspace),
+    current_user: User = Depends(deps.get_current_user),
+):
+    """Create a blank flow. Returns flow_id for redirect to canvas editor."""
+    flow = Flow(
+        name=payload.name,
+        description=payload.description,
+        workspace_id=workspace.id,
+        status=FlowStatus.DRAFT,
+    )
+    db.add(flow)
+    await db.flush()
+
+    await audit_event(
+        db, action="automation_create", entity_type="flow",
+        entity_id=str(flow.id), actor_user_id=current_user.id,
+        outcome="success", workspace_id=workspace.id, request=request,
+        metadata={"flow_name": payload.name, "method": "blank"},
+    )
+    await db.commit()
+    return wrap_data({"flow_id": str(flow.id)})
+
+# ---------------------------------------------------------------------------
+# POST /automations/from-builder — PRESERVED (wizard-based, backward compat)
+# ---------------------------------------------------------------------------
 
 @router.post("/from-builder", dependencies=[Depends(require_entitlement("automations", increment=True))])
 async def create_from_builder(
@@ -50,63 +127,51 @@ async def create_from_builder(
     workspace: Workspace = Depends(deps.get_active_workspace),
     current_user: User = Depends(deps.get_current_user),
 ):
-    """Translate wizard payload to runtime JSON and save flow."""
-    # Validate step and trigger types against catalog registry
+    """Translate wizard payload to runtime JSON and save flow. Preserved for backward compatibility."""
     for step in payload.steps:
         if step.type not in VALID_NODE_TYPES:
             return wrap_error(f"Invalid step type: {step.type}")
     if payload.trigger.type not in VALID_TRIGGER_TYPES:
         return wrap_error(f"Invalid trigger type: {payload.trigger.type}")
 
-    # 1. Translation Logic
     nodes = []
     edges = []
-    
-    # Trigger Node
+
     trigger_id = str(uuid.uuid4())
     nodes.append({
         "id": trigger_id,
         "type": "TRIGGER",
         "config": payload.trigger.model_dump()
     })
-    
+
     prev_node_id = trigger_id
-    
-    # Action Nodes
+
     for step in payload.steps:
         node_id = str(uuid.uuid4())
         config = step.config.copy()
-        
-        # Default AI config hardening (Mission 5.3)
+
         if step.type == "AI_REPLY":
             if "goal" not in config or not config["goal"]:
                 config["goal"] = "General assisting"
             if "tasks" not in config or not config["tasks"]:
                 config["tasks"] = ["Help the user with their inquiry"]
-            
             config["use_workspace_prompt"] = True
-        
-        nodes.append({
-            "id": node_id,
-            "type": step.type,
-            "config": config
-        })
-        
-        # Sequentially link
+
+        nodes.append({"id": node_id, "type": step.type, "config": config})
         edges.append({
             "id": str(uuid.uuid4()),
             "source_node_id": prev_node_id,
             "target_node_id": node_id
         })
         prev_node_id = node_id
-        
+
     definition = {
+        "start_node_id": trigger_id,
         "nodes": nodes,
         "edges": edges,
         "ignore_outbound_webhooks": True
     }
-    
-    # 2. Save Flow
+
     flow = Flow(
         name=payload.name,
         description=payload.description,
@@ -115,8 +180,7 @@ async def create_from_builder(
     )
     db.add(flow)
     await db.flush()
-    
-    # 3. Create Version
+
     version = FlowVersion(
         flow_id=flow.id,
         version_number=1,
@@ -124,6 +188,12 @@ async def create_from_builder(
         is_published=payload.publish
     )
     db.add(version)
+    await db.flush()
+
+    if payload.publish:
+        flow.published_version_id = version.id
+        db.add(flow)
+
     await audit_event(
         db, action="automation_create", entity_type="flow",
         entity_id=str(flow.id), actor_user_id=current_user.id,
@@ -134,17 +204,22 @@ async def create_from_builder(
 
     return wrap_data({"flow_id": str(flow.id), "version": 1})
 
+# ---------------------------------------------------------------------------
+# GET /automations/{flow_id}
+# ---------------------------------------------------------------------------
+
 @router.get("/{flow_id}")
 async def get_flow(
     flow_id: UUID,
     db: AsyncSession = Depends(get_db),
-    current_user: User = Depends(deps.get_current_user)
+    workspace: Workspace = Depends(deps.get_active_workspace),
+    current_user: User = Depends(deps.get_current_user),
 ):
-    """Get flow along with its summary definition."""
+    """Get flow details."""
     flow = await db.get(Flow, flow_id)
-    if not flow:
+    if not flow or flow.workspace_id != workspace.id:
         return wrap_error("Flow not found")
-    
+
     result = await db.execute(
         select(FlowVersion)
         .where(FlowVersion.flow_id == flow_id)
@@ -152,48 +227,432 @@ async def get_flow(
         .limit(1)
     )
     version = result.scalars().first()
-    
+
     return wrap_data({
-        "id": flow.id,
+        "id": str(flow.id),
         "name": flow.name,
         "description": flow.description,
         "status": flow.status,
-        "definition": version.definition_json if version else None
+        "published_version_id": str(flow.published_version_id) if flow.published_version_id else None,
+        "created_at": flow.created_at.isoformat(),
+        "updated_at": flow.updated_at.isoformat(),
+        "definition": version.definition_json if version else None,
+        "version_number": version.version_number if version else None,
+    })
+
+# ---------------------------------------------------------------------------
+# PATCH /automations/{flow_id}
+# ---------------------------------------------------------------------------
+
+@router.patch("/{flow_id}")
+async def update_flow(
+    flow_id: UUID,
+    payload: UpdateFlowPayload,
+    db: AsyncSession = Depends(get_db),
+    workspace: Workspace = Depends(deps.get_active_workspace),
+    current_user: User = Depends(deps.get_current_user),
+):
+    """Update flow metadata (name, description)."""
+    flow = await db.get(Flow, flow_id)
+    if not flow or flow.workspace_id != workspace.id:
+        return wrap_error("Flow not found")
+
+    if payload.name is not None:
+        flow.name = payload.name
+    if payload.description is not None:
+        flow.description = payload.description
+    flow.updated_at = datetime.utcnow()
+    db.add(flow)
+    await db.commit()
+    return wrap_data({"id": str(flow.id), "name": flow.name})
+
+# ---------------------------------------------------------------------------
+# DELETE /automations/{flow_id}
+# ---------------------------------------------------------------------------
+
+@router.delete("/{flow_id}")
+async def delete_flow(
+    flow_id: UUID,
+    request: Request,
+    db: AsyncSession = Depends(get_db),
+    workspace: Workspace = Depends(deps.get_active_workspace),
+    current_user: User = Depends(deps.get_current_user),
+):
+    """Delete a flow and its draft."""
+    flow = await db.get(Flow, flow_id)
+    if not flow or flow.workspace_id != workspace.id:
+        return wrap_error("Flow not found")
+
+    draft_result = await db.execute(
+        select(FlowDraft).where(FlowDraft.flow_id == flow_id)
+    )
+    draft = draft_result.scalars().first()
+    if draft:
+        await db.delete(draft)
+
+    await audit_event(
+        db, action="automation_delete", entity_type="flow",
+        entity_id=str(flow.id), actor_user_id=current_user.id,
+        outcome="success", workspace_id=workspace.id, request=request,
+        metadata={"flow_name": flow.name},
+    )
+    await db.delete(flow)
+    await db.commit()
+    return wrap_data({"deleted": True})
+
+# ---------------------------------------------------------------------------
+# GET /automations/{flow_id}/draft
+# ---------------------------------------------------------------------------
+
+@router.get("/{flow_id}/draft")
+async def get_draft(
+    flow_id: UUID,
+    db: AsyncSession = Depends(get_db),
+    workspace: Workspace = Depends(deps.get_active_workspace),
+    current_user: User = Depends(deps.get_current_user),
+):
+    """Get the editable draft for a flow. Returns null if no draft exists."""
+    flow = await db.get(Flow, flow_id)
+    if not flow or flow.workspace_id != workspace.id:
+        return wrap_error("Flow not found")
+
+    result = await db.execute(
+        select(FlowDraft).where(FlowDraft.flow_id == flow_id)
+    )
+    draft = result.scalars().first()
+
+    if not draft:
+        return wrap_data({
+            "builder_graph_json": None,
+            "last_validation_errors": None,
+            "updated_at": None,
+        })
+
+    return wrap_data({
+        "builder_graph_json": draft.builder_graph_json,
+        "last_validation_errors": draft.last_validation_errors,
+        "updated_at": draft.updated_at.isoformat(),
+    })
+
+# ---------------------------------------------------------------------------
+# PUT /automations/{flow_id}/draft — autosave
+# ---------------------------------------------------------------------------
+
+@router.put("/{flow_id}/draft")
+async def save_draft(
+    flow_id: UUID,
+    payload: SaveDraftPayload,
+    db: AsyncSession = Depends(get_db),
+    workspace: Workspace = Depends(deps.get_active_workspace),
+    current_user: User = Depends(deps.get_current_user),
+):
+    """Save (upsert) the builder graph draft. Called by autosave."""
+    flow = await db.get(Flow, flow_id)
+    if not flow or flow.workspace_id != workspace.id:
+        return wrap_error("Flow not found")
+
+    result = await db.execute(
+        select(FlowDraft).where(FlowDraft.flow_id == flow_id)
+    )
+    draft = result.scalars().first()
+    now = datetime.utcnow()
+
+    if draft:
+        draft.builder_graph_json = payload.builder_graph_json
+        draft.updated_by_user_id = current_user.id
+        draft.updated_at = now
+        db.add(draft)
+    else:
+        draft = FlowDraft(
+            workspace_id=workspace.id,
+            flow_id=flow_id,
+            builder_graph_json=payload.builder_graph_json,
+            updated_by_user_id=current_user.id,
+            updated_at=now,
+        )
+        db.add(draft)
+
+    await db.commit()
+    return wrap_data({"saved": True, "updated_at": now.isoformat()})
+
+# ---------------------------------------------------------------------------
+# POST /automations/{flow_id}/draft/validate
+# ---------------------------------------------------------------------------
+
+@router.post("/{flow_id}/draft/validate")
+async def validate_draft(
+    flow_id: UUID,
+    db: AsyncSession = Depends(get_db),
+    workspace: Workspace = Depends(deps.get_active_workspace),
+    current_user: User = Depends(deps.get_current_user),
+):
+    """Validate the current draft. Returns structured errors per node/field."""
+    flow = await db.get(Flow, flow_id)
+    if not flow or flow.workspace_id != workspace.id:
+        return wrap_error("Flow not found")
+
+    result = await db.execute(
+        select(FlowDraft).where(FlowDraft.flow_id == flow_id)
+    )
+    draft = result.scalars().first()
+    if not draft:
+        return wrap_error("No draft found. Save a draft first.")
+
+    errors = validate_graph(draft.builder_graph_json)
+    draft.last_validation_errors = {"errors": errors, "validated_at": datetime.utcnow().isoformat()}
+    draft.updated_at = datetime.utcnow()
+    db.add(draft)
+    await db.commit()
+
+    return wrap_data({
+        "valid": len(errors) == 0,
+        "errors": errors,
     })
 
+# ---------------------------------------------------------------------------
+# POST /automations/{flow_id}/publish — REPLACED with draft-based approach
+# ---------------------------------------------------------------------------
+
 @router.post("/{flow_id}/publish")
 async def publish_flow(
     flow_id: UUID,
     request: Request,
     db: AsyncSession = Depends(get_db),
+    workspace: Workspace = Depends(deps.get_active_workspace),
     current_user: User = Depends(deps.get_current_user),
 ):
-    """Publish a flow version."""
+    """
+    Validate draft → translate to runtime definition_json → create immutable FlowVersion.
+    Sets flow.published_version_id to the new version.
+    """
     flow = await db.get(Flow, flow_id)
-    if not flow:
+    if not flow or flow.workspace_id != workspace.id:
         return wrap_error("Flow not found")
-    
+
+    result = await db.execute(
+        select(FlowDraft).where(FlowDraft.flow_id == flow_id)
+    )
+    draft = result.scalars().first()
+    if not draft:
+        return wrap_error("No draft found. Build your automation in the canvas editor first.")
+
+    # Validate
+    errors = validate_graph(draft.builder_graph_json)
+    if errors:
+        draft.last_validation_errors = {"errors": errors, "validated_at": datetime.utcnow().isoformat()}
+        db.add(draft)
+        await db.commit()
+        return wrap_data({
+            "success": False,
+            "published": False,
+            "errors": errors,
+        })
+
+    # Translate to runtime contract
+    definition_json = translate(draft.builder_graph_json)
+
+    # Get next version number
+    version_result = await db.execute(
+        select(func.max(FlowVersion.version_number))
+        .where(FlowVersion.flow_id == flow_id)
+    )
+    max_version = version_result.scalar() or 0
+    new_version_number = max_version + 1
+
+    now = datetime.utcnow()
+    new_version = FlowVersion(
+        flow_id=flow_id,
+        version_number=new_version_number,
+        definition_json=definition_json,
+        is_published=True,
+        created_at=now,
+        updated_at=now,
+    )
+    db.add(new_version)
+    await db.flush()
+
+    # Update flow
+    flow.published_version_id = new_version.id
+    flow.status = FlowStatus.PUBLISHED
+    flow.updated_at = now
+    db.add(flow)
+
+    # Clear validation errors from draft
+    draft.last_validation_errors = None
+    draft.updated_at = now
+    db.add(draft)
+
+    await audit_event(
+        db, action="automation_publish", entity_type="flow",
+        entity_id=str(flow.id), actor_user_id=current_user.id,
+        outcome="success", workspace_id=workspace.id, request=request,
+        metadata={"version_number": new_version_number},
+    )
+    await db.commit()
+
+    return wrap_data({
+        "success": True,
+        "published": True,
+        "version_id": str(new_version.id),
+        "version_number": new_version_number,
+        "published_at": now.isoformat(),
+        "status": "published",
+    })
+
+# ---------------------------------------------------------------------------
+# GET /automations/{flow_id}/versions
+# ---------------------------------------------------------------------------
+
+@router.get("/{flow_id}/versions")
+async def list_versions(
+    flow_id: UUID,
+    db: AsyncSession = Depends(get_db),
+    workspace: Workspace = Depends(deps.get_active_workspace),
+    current_user: User = Depends(deps.get_current_user),
+):
+    """List all published versions for a flow, newest first."""
+    flow = await db.get(Flow, flow_id)
+    if not flow or flow.workspace_id != workspace.id:
+        return wrap_error("Flow not found")
+
     result = await db.execute(
         select(FlowVersion)
         .where(FlowVersion.flow_id == flow_id)
         .order_by(FlowVersion.version_number.desc())
-        .limit(1)
     )
-    last_version = result.scalars().first()
-    
-    if not last_version:
-        return wrap_error("No version found to publish")
-        
-    last_version.is_published = True
+    versions = result.scalars().all()
+
+    return wrap_data([
+        {
+            "id": str(v.id),
+            "version_number": v.version_number,
+            "is_published": v.is_published,
+            "is_active": (str(v.id) == str(flow.published_version_id)) if flow.published_version_id else False,
+            "created_at": v.created_at.isoformat(),
+        }
+        for v in versions
+    ])
+
+# ---------------------------------------------------------------------------
+# POST /automations/{flow_id}/rollback/{version_id}
+# ---------------------------------------------------------------------------
+
+@router.post("/{flow_id}/rollback/{version_id}")
+async def rollback_version(
+    flow_id: UUID,
+    version_id: UUID,
+    request: Request,
+    db: AsyncSession = Depends(get_db),
+    workspace: Workspace = Depends(deps.get_active_workspace),
+    current_user: User = Depends(deps.get_current_user),
+):
+    """
+    Create a new FlowVersion identical to version_id and make it the active version.
+    Safe rollback — does NOT delete history.
+    """
+    flow = await db.get(Flow, flow_id)
+    if not flow or flow.workspace_id != workspace.id:
+        return wrap_error("Flow not found")
+
+    source_version = await db.get(FlowVersion, version_id)
+    if not source_version or source_version.flow_id != flow_id:
+        return wrap_error("Version not found")
+
+    # Get next version number
+    version_result = await db.execute(
+        select(func.max(FlowVersion.version_number))
+        .where(FlowVersion.flow_id == flow_id)
+    )
+    max_version = version_result.scalar() or 0
+    new_version_number = max_version + 1
+
+    now = datetime.utcnow()
+    new_version = FlowVersion(
+        flow_id=flow_id,
+        version_number=new_version_number,
+        definition_json=source_version.definition_json,
+        is_published=True,
+        created_at=now,
+        updated_at=now,
+    )
+    db.add(new_version)
+    await db.flush()
+
+    flow.published_version_id = new_version.id
     flow.status = FlowStatus.PUBLISHED
-    
-    db.add(last_version)
+    flow.updated_at = now
     db.add(flow)
+
     await audit_event(
-        db, action="automation_publish", entity_type="flow",
+        db, action="automation_rollback", entity_type="flow",
         entity_id=str(flow.id), actor_user_id=current_user.id,
-        outcome="success", workspace_id=flow.workspace_id, request=request,
+        outcome="success", workspace_id=workspace.id, request=request,
+        metadata={
+            "rolled_back_to_version": source_version.version_number,
+            "new_version_number": new_version_number,
+        },
     )
     await db.commit()
 
-    return wrap_data({"status": "published"})
+    return wrap_data({
+        "new_version_id": str(new_version.id),
+        "new_version_number": new_version_number,
+        "rolled_back_to": source_version.version_number,
+    })
+
+# ---------------------------------------------------------------------------
+# POST /automations/{flow_id}/simulate
+# ---------------------------------------------------------------------------
+
+@router.post("/{flow_id}/simulate")
+async def simulate_flow(
+    flow_id: UUID,
+    payload: SimulatePayload,
+    db: AsyncSession = Depends(get_db),
+    workspace: Workspace = Depends(deps.get_active_workspace),
+    current_user: User = Depends(deps.get_current_user),
+):
+    """
+    Dry-run the automation against a mock payload.
+    Returns step-by-step preview. No messages sent, no provider calls.
+    """
+    flow = await db.get(Flow, flow_id)
+    if not flow or flow.workspace_id != workspace.id:
+        return wrap_error("Flow not found")
+
+    result = await db.execute(
+        select(FlowDraft).where(FlowDraft.flow_id == flow_id)
+    )
+    draft = result.scalars().first()
+    if not draft:
+        return wrap_error("No draft found. Build your automation first.")
+
+    # Validate first
+    errors = validate_graph(draft.builder_graph_json)
+    if errors:
+        return wrap_data({
+            "valid": False,
+            "errors": errors,
+            "steps": [],
+        })
+
+    # Run simulation (pure in-memory, no side effects)
+    preview = simulate(draft.builder_graph_json, payload.mock_payload)
+
+    # Log simulate event (non-blocking)
+    try:
+        event = RuntimeEventLog(
+            workspace_id=workspace.id,
+            event_type="simulate.run",
+            source="simulate",
+            related_ids={"flow_id": str(flow_id)},
+            actor_user_id=current_user.id,
+            payload={"steps_count": len(preview.get("steps", []))},
+            outcome="success",
+        )
+        db.add(event)
+        await db.commit()
+    except Exception:
+        pass
+
+    return wrap_data({"valid": True, **preview})

backend/app/api/v1/templates.py

@@ -0,0 +1,229 @@
+"""
+Template Catalog API — Mission 27
+
+Workspace-facing endpoints for browsing and cloning automation templates.
+Admin-facing endpoints are in admin.py.
+"""
+from typing import List, Optional, Dict, Any
+from uuid import UUID
+from datetime import datetime
+from fastapi import APIRouter, Depends, Query
+from sqlalchemy.ext.asyncio import AsyncSession
+from sqlmodel import select
+from pydantic import BaseModel
+
+from app.core.db import get_db
+from app.api import deps
+from app.models.models import (
+    AutomationTemplate, AutomationTemplateVersion,
+    Flow, FlowDraft, FlowStatus,
+    Workspace, User, RuntimeEventLog,
+)
+from app.schemas.envelope import wrap_data, wrap_error
+from app.services.entitlements import require_entitlement
+
+router = APIRouter()
+
+
+class CloneTemplatePayload(BaseModel):
+    name: Optional[str] = None  # Defaults to template name if not provided
+
+
+# ---------------------------------------------------------------------------
+# GET /templates — browse the catalog
+# ---------------------------------------------------------------------------
+
+@router.get("", dependencies=[Depends(require_entitlement("automations"))])
+async def list_templates(
+    db: AsyncSession = Depends(get_db),
+    workspace: Workspace = Depends(deps.get_active_workspace),
+    current_user: User = Depends(deps.get_current_user),
+    category: Optional[str] = Query(None),
+    platform: Optional[str] = Query(None),
+    featured: Optional[bool] = Query(None),
+    skip: int = Query(0, ge=0),
+    limit: int = Query(50, ge=1, le=100),
+):
+    """List all active templates with optional filters."""
+    query = select(AutomationTemplate).where(AutomationTemplate.is_active == True)
+
+    if category:
+        query = query.where(AutomationTemplate.category == category)
+    if featured is not None:
+        query = query.where(AutomationTemplate.is_featured == featured)
+
+    query = query.order_by(
+        AutomationTemplate.is_featured.desc(),
+        AutomationTemplate.name.asc()
+    ).offset(skip).limit(limit)
+
+    result = await db.execute(query)
+    templates = result.scalars().all()
+
+    # Platform filter is done in Python since platforms is a JSON array
+    if platform:
+        templates = [t for t in templates if platform in (t.platforms or [])]
+
+    return wrap_data([
+        {
+            "id": str(t.id),
+            "slug": t.slug,
+            "name": t.name,
+            "description": t.description,
+            "category": t.category,
+            "industry_tags": t.industry_tags or [],
+            "platforms": t.platforms or [],
+            "required_integrations": t.required_integrations or [],
+            "is_featured": t.is_featured,
+        }
+        for t in templates
+    ])
+
+
+# ---------------------------------------------------------------------------
+# GET /templates/{slug} — template detail with latest published version
+# ---------------------------------------------------------------------------
+
+@router.get("/{slug}", dependencies=[Depends(require_entitlement("automations"))])
+async def get_template(
+    slug: str,
+    db: AsyncSession = Depends(get_db),
+    workspace: Workspace = Depends(deps.get_active_workspace),
+    current_user: User = Depends(deps.get_current_user),
+):
+    """Get template detail including latest published version."""
+    result = await db.execute(
+        select(AutomationTemplate)
+        .where(AutomationTemplate.slug == slug, AutomationTemplate.is_active == True)
+    )
+    template = result.scalars().first()
+    if not template:
+        return wrap_error("Template not found")
+
+    # Latest published version
+    version_result = await db.execute(
+        select(AutomationTemplateVersion)
+        .where(
+            AutomationTemplateVersion.template_id == template.id,
+            AutomationTemplateVersion.is_published == True,
+        )
+        .order_by(AutomationTemplateVersion.version_number.desc())
+        .limit(1)
+    )
+    latest_version = version_result.scalars().first()
+
+    return wrap_data({
+        "id": str(template.id),
+        "slug": template.slug,
+        "name": template.name,
+        "description": template.description,
+        "category": template.category,
+        "industry_tags": template.industry_tags or [],
+        "platforms": template.platforms or [],
+        "required_integrations": template.required_integrations or [],
+        "is_featured": template.is_featured,
+        "latest_version": {
+            "id": str(latest_version.id),
+            "version_number": latest_version.version_number,
+            "builder_graph_json": latest_version.builder_graph_json,
+            "changelog": latest_version.changelog,
+            "published_at": latest_version.published_at.isoformat() if latest_version.published_at else None,
+        } if latest_version else None,
+    })
+
+
+# ---------------------------------------------------------------------------
+# POST /templates/{slug}/clone — clone template into workspace
+# ---------------------------------------------------------------------------
+
+@router.post(
+    "/{slug}/clone",
+    dependencies=[Depends(require_entitlement("automations", increment=True))],
+)
+async def clone_template(
+    slug: str,
+    payload: CloneTemplatePayload,
+    db: AsyncSession = Depends(get_db),
+    workspace: Workspace = Depends(deps.get_active_workspace),
+    current_user: User = Depends(deps.get_current_user),
+):
+    """
+    Clone a template into the current workspace as a new Flow + FlowDraft.
+    Redirects to canvas builder at /automations/{flow_id}.
+    """
+    # Load template
+    result = await db.execute(
+        select(AutomationTemplate)
+        .where(AutomationTemplate.slug == slug, AutomationTemplate.is_active == True)
+    )
+    template = result.scalars().first()
+    if not template:
+        return wrap_error("Template not found")
+
+    # Load latest published version
+    version_result = await db.execute(
+        select(AutomationTemplateVersion)
+        .where(
+            AutomationTemplateVersion.template_id == template.id,
+            AutomationTemplateVersion.is_published == True,
+        )
+        .order_by(AutomationTemplateVersion.version_number.desc())
+        .limit(1)
+    )
+    latest_version = version_result.scalars().first()
+    if not latest_version:
+        return wrap_error("Template has no published version yet. Check back later.")
+
+    # Create new flow in workspace
+    flow_name = (payload.name or "").strip() or template.name
+    now = datetime.utcnow()
+
+    flow = Flow(
+        name=flow_name,
+        description=template.description,
+        workspace_id=workspace.id,
+        status=FlowStatus.DRAFT,
+        created_at=now,
+        updated_at=now,
+    )
+    db.add(flow)
+    await db.flush()
+
+    # Create draft from template builder_graph_json
+    draft = FlowDraft(
+        workspace_id=workspace.id,
+        flow_id=flow.id,
+        builder_graph_json=latest_version.builder_graph_json,
+        updated_by_user_id=current_user.id,
+        created_at=now,
+        updated_at=now,
+    )
+    db.add(draft)
+
+    # Log the clone event
+    try:
+        event = RuntimeEventLog(
+            workspace_id=workspace.id,
+            event_type="template.clone",
+            source="templates",
+            related_ids={
+                "template_id": str(template.id),
+                "template_slug": slug,
+                "flow_id": str(flow.id),
+            },
+            actor_user_id=current_user.id,
+            outcome="success",
+        )
+        db.add(event)
+    except Exception:
+        pass
+
+    await db.commit()
+
+    return wrap_data({
+        "flow_id": str(flow.id),
+        "flow_name": flow_name,
+        "redirect_path": f"/automations/{flow.id}",
+        "template_slug": slug,
+        "required_integrations": template.required_integrations or [],
+    })

backend/app/core/catalog_registry.py

@@ -54,28 +54,54 @@ AUTOMATION_NODE_TYPES: List[Dict[str, Any]] = [
         "label": "AI Reply",
         "description": "Generate AI-powered response using workspace prompt config.",
         "icon_hint": "bot",
+        "runtime_supported": True,
     },
     {
         "key": "SEND_MESSAGE",
         "label": "Send Message",
         "description": "Send a message via the connected platform.",
         "icon_hint": "send",
+        "runtime_supported": True,
     },
     {
         "key": "HUMAN_HANDOVER",
         "label": "Human Handover",
         "description": "Transfer conversation to a human agent.",
         "icon_hint": "user",
+        "runtime_supported": True,
     },
     {
         "key": "TAG_CONTACT",
         "label": "Tag Contact",
         "description": "Apply a tag to the contact for segmentation.",
         "icon_hint": "tag",
+        "runtime_supported": True,
+    },
+    {
+        "key": "ZOHO_UPSERT_LEAD",
+        "label": "Zoho: Upsert Lead",
+        "description": "Sync contact as a lead in Zoho CRM.",
+        "icon_hint": "database",
+        "runtime_supported": True,
+    },
+    {
+        "key": "CONDITION",
+        "label": "Condition (Branch)",
+        "description": "Branch the flow based on a condition. (Coming soon — cannot publish yet)",
+        "icon_hint": "git-branch",
+        "runtime_supported": False,
+    },
+    {
+        "key": "WAIT_DELAY",
+        "label": "Wait / Delay",
+        "description": "Pause the flow for a set duration. (Coming soon — cannot publish yet)",
+        "icon_hint": "clock",
+        "runtime_supported": False,
     },
 ]
 
-VALID_NODE_TYPES = {n["key"] for n in AUTOMATION_NODE_TYPES}
+# Node types supported by the runtime engine (subset of builder palette)
+VALID_NODE_TYPES = {n["key"] for n in AUTOMATION_NODE_TYPES if n.get("runtime_supported", True)}
 
 
 # ── Automation Trigger Types ─────────────────────────────────────────

backend/app/domain/builder_translator.py

@@ -0,0 +1,316 @@
+"""
+Builder Translator — Mission 27
+
+Converts builder_graph_json (React Flow native format) into the runtime
+definition_json contract, validates graphs before publish, and simulates
+traversal without side effects.
+
+Builder graph format (stored in FlowDraft.builder_graph_json):
+{
+    "nodes": [
+        {"id": "trigger-1", "type": "triggerNode", "position": {"x": 250, "y": 50},
+         "data": {"nodeType": "MESSAGE_INBOUND", "platform": "whatsapp", "config": {}}},
+        {"id": "node-2", "type": "actionNode", "position": {"x": 250, "y": 220},
+         "data": {"nodeType": "AI_REPLY", "config": {"goal": "Help user", "tasks": []}}}
+    ],
+    "edges": [{"id": "e1", "source": "trigger-1", "target": "node-2"}]
+}
+
+Runtime definition_json format (stored in FlowVersion.definition_json):
+{
+    "start_node_id": "trigger-1",
+    "nodes": [{"id": "...", "type": "TRIGGER", "config": {...}}, ...],
+    "edges": [{"id": "...", "source_node_id": "...", "target_node_id": "...", "source_handle": null}]
+}
+"""
+from __future__ import annotations
+
+import logging
+from typing import Any
+
+logger = logging.getLogger(__name__)
+
+# Trigger node types that map to runtime TRIGGER node type
+TRIGGER_NODE_TYPES = {"MESSAGE_INBOUND", "LEAD_AD_SUBMIT"}
+
+# Node types supported by the runtime engine
+RUNTIME_SUPPORTED_NODE_TYPES = {
+    "AI_REPLY", "SEND_MESSAGE", "HUMAN_HANDOVER",
+    "TAG_CONTACT", "ZOHO_UPSERT_LEAD",
+}
+
+# Builder-only node types (visual palette only; blocked from publishing)
+BUILDER_ONLY_NODE_TYPES = {"CONDITION", "WAIT_DELAY"}
+
+
+def validate_graph(builder_graph: dict[str, Any]) -> list[dict[str, Any]]:
+    """
+    Validate a builder_graph_json.
+    Returns a list of validation errors: [{node_id, field, message}].
+    Empty list means valid.
+    """
+    errors: list[dict[str, Any]] = []
+    nodes: list[dict] = builder_graph.get("nodes", [])
+    edges: list[dict] = builder_graph.get("edges", [])
+
+    if not nodes:
+        errors.append({"node_id": None, "field": "graph", "message": "Flow must have at least one node."})
+        return errors
+
+    # Identify trigger nodes
+    trigger_nodes = [n for n in nodes if _get_node_type(n) in TRIGGER_NODE_TYPES]
+    action_nodes = [n for n in nodes if _get_node_type(n) not in TRIGGER_NODE_TYPES]
+
+    # Must have exactly one trigger
+    if len(trigger_nodes) == 0:
+        errors.append({
+            "node_id": None,
+            "field": "trigger",
+            "message": "Flow must have exactly one trigger node (e.g. WhatsApp Message, Meta Lead Ads)."
+        })
+    elif len(trigger_nodes) > 1:
+        for tn in trigger_nodes[1:]:
+            errors.append({
+                "node_id": tn.get("id"),
+                "field": "trigger",
+                "message": "Flow can only have one trigger node."
+            })
+
+    # Check builder-only (unsupported runtime) node types
+    for node in nodes:
+        nt = _get_node_type(node)
+        if nt in BUILDER_ONLY_NODE_TYPES:
+            errors.append({
+                "node_id": node.get("id"),
+                "field": "type",
+                "message": f"Node type '{nt}' is not yet supported by the runtime engine — cannot publish. Remove it or replace it with a supported action."
+            })
+
+    # Build reachability set from trigger (BFS/DFS)
+    if trigger_nodes:
+        trigger_id = trigger_nodes[0].get("id")
+        reachable = _reachable_nodes(trigger_id, edges)
+        for node in action_nodes:
+            nid = node.get("id")
+            if nid not in reachable:
+                errors.append({
+                    "node_id": nid,
+                    "field": "connection",
+                    "message": "This node is not connected to the trigger. Every node must be reachable from the trigger."
+                })
+
+    # Trigger must have at least one outgoing edge
+    if trigger_nodes:
+        trigger_id = trigger_nodes[0].get("id")
+        outgoing = [e for e in edges if e.get("source") == trigger_id]
+        if not outgoing and action_nodes:
+            errors.append({
+                "node_id": trigger_id,
+                "field": "edges",
+                "message": "Trigger node has no outgoing connections. Connect it to at least one action."
+            })
+
+    # Per-type config validation
+    for node in nodes:
+        nt = _get_node_type(node)
+        config = node.get("data", {}).get("config", {})
+        nid = node.get("id")
+
+        if nt == "AI_REPLY":
+            goal = (config.get("goal") or "").strip()
+            if not goal:
+                errors.append({
+                    "node_id": nid,
+                    "field": "config.goal",
+                    "message": "AI Reply node requires a 'Goal' — describe what the AI should accomplish."
+                })
+
+        elif nt == "SEND_MESSAGE":
+            content = (config.get("content") or "").strip()
+            if not content:
+                errors.append({
+                    "node_id": nid,
+                    "field": "config.content",
+                    "message": "Send Message node requires message content."
+                })
+
+        elif nt == "TAG_CONTACT":
+            tag = (config.get("tag") or "").strip()
+            if not tag:
+                errors.append({
+                    "node_id": nid,
+                    "field": "config.tag",
+                    "message": "Tag Contact node requires a tag name."
+                })
+
+    return errors
+
+
+def translate(builder_graph: dict[str, Any]) -> dict[str, Any]:
+    """
+    Translate builder_graph_json to runtime definition_json.
+    Must only be called after validate_graph() returns an empty list.
+    Returns the definition_json ready for FlowVersion.definition_json.
+    """
+    nodes_in = builder_graph.get("nodes", [])
+    edges_in = builder_graph.get("edges", [])
+
+    runtime_nodes = []
+    start_node_id: str | None = None
+
+    for node in nodes_in:
+        nid = node.get("id")
+        node_type = _get_node_type(node)
+        data = node.get("data", {})
+        config = data.get("config", {})
+
+        if node_type in TRIGGER_NODE_TYPES:
+            # Trigger node → runtime TRIGGER type
+            runtime_nodes.append({
+                "id": nid,
+                "type": "TRIGGER",
+                "config": {
+                    "trigger_type": node_type,
+                    "platform": data.get("platform", config.get("platform", "whatsapp")),
+                    "keywords": data.get("keywords", config.get("keywords", [])),
+                },
+            })
+            start_node_id = nid
+        else:
+            # Action node → preserve type and config
+            runtime_nodes.append({
+                "id": nid,
+                "type": node_type,
+                "config": config,
+            })
+
+    runtime_edges = []
+    for edge in edges_in:
+        runtime_edges.append({
+            "id": edge.get("id"),
+            "source_node_id": edge.get("source"),
+            "target_node_id": edge.get("target"),
+            "source_handle": edge.get("sourceHandle"),
+        })
+
+    return {
+        "start_node_id": start_node_id,
+        "nodes": runtime_nodes,
+        "edges": runtime_edges,
+    }
+
+
+def simulate(
+    builder_graph: dict[str, Any],
+    mock_payload: dict[str, Any] | None = None,
+) -> dict[str, Any]:
+    """
+    Dry-run traversal of builder_graph without any DB access or dispatch.
+    Returns a preview of what each node would do.
+    No Message rows, no provider adapter calls, no side effects.
+    """
+    nodes_in = builder_graph.get("nodes", [])
+    edges_in = builder_graph.get("edges", [])
+
+    node_map = {n.get("id"): n for n in nodes_in}
+    edge_map: dict[str, list[str]] = {}
+    for edge in edges_in:
+        src = edge.get("source")
+        if src not in edge_map:
+            edge_map[src] = []
+        edge_map[src].append(edge.get("target"))
+
+    # Find trigger node
+    trigger_nodes = [n for n in nodes_in if _get_node_type(n) in TRIGGER_NODE_TYPES]
+    if not trigger_nodes:
+        return {
+            "steps": [],
+            "dispatch_blocked": True,
+            "message": "No trigger node found. Add a trigger to simulate the flow.",
+        }
+
+    steps = []
+    current_id: str | None = trigger_nodes[0].get("id")
+    visited: set[str] = set()
+
+    while current_id and current_id not in visited:
+        visited.add(current_id)
+        node = node_map.get(current_id)
+        if not node:
+            break
+
+        node_type = _get_node_type(node)
+        config = node.get("data", {}).get("config", {})
+
+        step: dict[str, Any] = {
+            "node_id": current_id,
+            "node_type": node_type,
+            "dispatch_blocked": True,
+        }
+
+        if node_type in TRIGGER_NODE_TYPES:
+            step["description"] = f"Trigger: {node_type}"
+            if mock_payload:
+                step["mock_payload"] = mock_payload
+        elif node_type == "AI_REPLY":
+            step["description"] = "AI Reply — would generate a response using your workspace prompt configuration."
+            step["goal"] = config.get("goal", "(no goal set)")
+            step["would_dispatch"] = False
+        elif node_type == "SEND_MESSAGE":
+            content = config.get("content", "")
+            step["description"] = "Send Message — would send the following message."
+            step["would_send"] = content
+            step["would_dispatch"] = False
+        elif node_type == "HUMAN_HANDOVER":
+            msg = config.get("announcement", "A team member will contact you.")
+            step["description"] = "Human Handover — would transfer conversation to a human agent."
+            step["announcement"] = msg
+            step["would_dispatch"] = False
+        elif node_type == "TAG_CONTACT":
+            step["description"] = f"Tag Contact — would apply tag '{config.get('tag', '')}' to the contact."
+        elif node_type == "ZOHO_UPSERT_LEAD":
+            step["description"] = "Zoho CRM — would upsert the contact as a lead in Zoho CRM."
+        elif node_type in BUILDER_ONLY_NODE_TYPES:
+            step["description"] = f"{node_type} — not yet supported by runtime. This node would be skipped."
+            step["warning"] = "Builder-only node type"
+        else:
+            step["description"] = f"Unknown node type: {node_type}"
+
+        steps.append(step)
+
+        next_nodes = edge_map.get(current_id, [])
+        current_id = next_nodes[0] if next_nodes else None
+
+    return {
+        "steps": steps,
+        "dispatch_blocked": True,
+        "message": f"Simulation complete. {len(steps)} step(s) previewed. No messages were sent.",
+    }
+
+
+def _get_node_type(node: dict) -> str:
+    """Extract the business logic node type from a builder node."""
+    data = node.get("data", {})
+    return data.get("nodeType", "")
+
+
+def _reachable_nodes(start_id: str, edges: list[dict]) -> set[str]:
+    """BFS to find all node IDs reachable from start_id via edges."""
+    edge_map: dict[str, list[str]] = {}
+    for edge in edges:
+        src = edge.get("source")
+        if src not in edge_map:
+            edge_map[src] = []
+        tgt = edge.get("target")
+        if tgt:
+            edge_map[src].append(tgt)
+
+    visited: set[str] = set()
+    queue = [start_id]
+    while queue:
+        node_id = queue.pop(0)
+        if node_id in visited:
+            continue
+        visited.add(node_id)
+        queue.extend(edge_map.get(node_id, []))
+    return visited

backend/app/models/models.py

@@ -133,7 +133,9 @@ class Flow(WorkspaceScopedModel, table=True):
     name: str = Field(index=True)
     description: Optional[str] = None
     status: FlowStatus = Field(default=FlowStatus.DRAFT)
-    
+    # Points to the active published FlowVersion; FK constraint added by Alembic migration
+    published_version_id: Optional[UUID] = Field(default=None, index=True)
+
     # Relationships
     nodes: List["FlowNode"] = Relationship(back_populates="flow")
     edges: List["FlowEdge"] = Relationship(back_populates="flow")
@@ -525,3 +527,60 @@ class SystemSettings(BaseIDModel, table=True):
     settings_json: Dict[str, Any] = Field(sa_column=Column(JSON))
     version: int = Field(default=1)
     updated_by_user_id: Optional[UUID] = Field(default=None, foreign_key="user.id")
+
+
+# --- Builder v2: Draft Storage (Mission 27) ---
+
+class FlowDraft(BaseIDModel, table=True):
+    """Editable builder graph for a flow. One draft per flow. Not used by runtime."""
+    workspace_id: UUID = Field(index=True)
+    flow_id: UUID = Field(foreign_key="flow.id")
+    builder_graph_json: Dict[str, Any] = Field(sa_column=Column(JSON))
+    updated_by_user_id: Optional[UUID] = Field(default=None)
+    last_validation_errors: Optional[Dict[str, Any]] = Field(
+        default=None, sa_column=Column(JSON, nullable=True)
+    )
+
+    __table_args__ = (
+        UniqueConstraint("flow_id", name="uq_flowdraft_flow_id"),
+        Index("idx_flowdraft_ws_updated", "workspace_id", "updated_at"),
+    )
+
+
+# --- Template Catalog (Mission 27) ---
+
+class AutomationTemplate(BaseIDModel, table=True):
+    """Global, admin-managed automation template. Workspace users can browse and clone."""
+    slug: str = Field(unique=True, index=True)
+    name: str = Field(index=True)
+    description: Optional[str] = None
+    category: str = Field(default="general", index=True)
+    industry_tags: List[str] = Field(default_factory=list, sa_column=Column(JSON))
+    platforms: List[str] = Field(default_factory=list, sa_column=Column(JSON))
+    required_integrations: List[str] = Field(default_factory=list, sa_column=Column(JSON))
+    is_featured: bool = Field(default=False, index=True)
+    is_active: bool = Field(default=True, index=True)
+    created_by_admin_id: Optional[UUID] = Field(default=None)
+
+    __table_args__ = (
+        Index("idx_template_active_featured", "is_active", "is_featured"),
+    )
+
+
+class AutomationTemplateVersion(BaseIDModel, table=True):
+    """Immutable snapshot of a template version. Published versions are cloneable."""
+    template_id: UUID = Field(foreign_key="automationtemplate.id", index=True)
+    version_number: int
+    builder_graph_json: Dict[str, Any] = Field(sa_column=Column(JSON))
+    translated_definition_json: Optional[Dict[str, Any]] = Field(
+        default=None, sa_column=Column(JSON, nullable=True)
+    )
+    changelog: Optional[str] = None
+    created_by_admin_id: Optional[UUID] = Field(default=None)
+    is_published: bool = Field(default=False, index=True)
+    published_at: Optional[datetime] = Field(default=None)
+
+    __table_args__ = (
+        Index("idx_atv_template_ver", "template_id", "version_number"),
+        Index("idx_atv_template_published", "template_id", "is_published"),
+    )

backend/app/workers/tasks.py

@@ -155,18 +155,34 @@ def process_webhook_event(event_id: str):
                     )
                     session.add(inbound_msg)
 
-                # 3. Find Matching Published Flow
-                flow_query = select(FlowVersion).join(Flow).where(
+                # 3. Find Matching Published Flow (prefer published_version_id pointer)
+                flow_version = None
+                flow_query = select(Flow).where(
                     Flow.workspace_id == event.workspace_id,
-                    FlowVersion.is_published == True
-                ).order_by(FlowVersion.created_at.desc())
+                    Flow.status == "published",
+                    Flow.published_version_id != None,  # noqa: E711
+                ).limit(1)
+                flow_result = (await session.execute(flow_query)).scalars().first()
+                if flow_result and flow_result.published_version_id:
+                    flow_version = await session.get(FlowVersion, flow_result.published_version_id)
 
-                flow_version = (await session.execute(flow_query)).scalars().first()
+                # Fallback: legacy flows published before Mission 27 (published_version_id not set)
+                if not flow_version:
+                    legacy_query = select(FlowVersion).join(Flow).where(
+                        Flow.workspace_id == event.workspace_id,
+                        FlowVersion.is_published == True
+                    ).order_by(FlowVersion.created_at.desc())
+                    flow_version = (await session.execute(legacy_query)).scalars().first()
 
                 if flow_version:
                     # 4. Create Execution Instance
                     nodes = flow_version.definition_json.get("nodes", [])
-                    start_node = next((n for n in nodes if n.get("type") == "TRIGGER"), None)
+                    # Use start_node_id if available (Mission 27 format), else find TRIGGER node
+                    start_node_id = flow_version.definition_json.get("start_node_id")
+                    if start_node_id:
+                        start_node = next((n for n in nodes if n.get("id") == start_node_id), None)
+                    else:
+                        start_node = next((n for n in nodes if n.get("type") == "TRIGGER"), None)
                     if not start_node and nodes:
                         start_node = nodes[0]
 

backend/main.py

@@ -4,7 +4,7 @@ from fastapi.middleware.cors import CORSMiddleware
 from sqlmodel import SQLModel
 from app.core.config import settings
 from app.core.db import engine
-from app.api.v1 import auth, workspaces, health, prompt_config, test_chat, integrations, webhooks, automations, knowledge, analytics
+from app.api.v1 import auth, workspaces, health, prompt_config, test_chat, integrations, webhooks, automations, knowledge, analytics, templates
 from app.core.seed import seed_modules, seed_plans, seed_system_settings
 from app.api.v1.dispatch import router as dispatch_router
 from app.api.v1.inbox import router as inbox_router
@@ -147,6 +147,7 @@ app.include_router(test_chat.router, prefix=f"{settings.API_V1_STR}/test-chat",
 app.include_router(integrations.router, prefix=f"{settings.API_V1_STR}/integrations", tags=["integrations"])
 app.include_router(webhooks.router, prefix=f"{settings.API_V1_STR}/webhooks", tags=["webhooks"])
 app.include_router(automations.router, prefix=f"{settings.API_V1_STR}/automations", tags=["automations"])
+app.include_router(templates.router, prefix=f"{settings.API_V1_STR}/templates", tags=["templates"])
 app.include_router(knowledge.router, prefix=f"{settings.API_V1_STR}/knowledge", tags=["knowledge"])
 app.include_router(dispatch_router, prefix=f"{settings.API_V1_STR}/dispatch", tags=["dispatch"])
 app.include_router(inbox_router, prefix=f"{settings.API_V1_STR}/inbox", tags=["inbox"])

backend/tests/test_automation.py

@@ -1,41 +1,484 @@
+"""
+Integration tests for the automation endpoints (Mission 27 — Builder v2).
+
+Tests cover:
+- Backward compatibility of /from-builder
+- Blank flow creation
+- Draft get/save/validate
+- Publish (validation gate, FlowVersion creation, published_version_id)
+- Version listing with is_active flag
+- Rollback (creates new version = old snapshot)
+- Simulate (dry-run, no dispatch)
+"""
 import pytest
 from httpx import AsyncClient
 
+# ---------------------------------------------------------------------------
+# Helpers
+# ---------------------------------------------------------------------------
+
+VALID_BUILDER_GRAPH = {
+    "nodes": [
+        {
+            "id": "trigger-1",
+            "type": "triggerNode",
+            "position": {"x": 250, "y": 50},
+            "data": {"nodeType": "MESSAGE_INBOUND", "platform": "whatsapp", "config": {}},
+        },
+        {
+            "id": "node-1",
+            "type": "actionNode",
+            "position": {"x": 250, "y": 220},
+            "data": {"nodeType": "AI_REPLY", "config": {"goal": "Help the user", "tasks": []}},
+        },
+    ],
+    "edges": [{"id": "e1", "source": "trigger-1", "target": "node-1"}],
+}
+
+INVALID_BUILDER_GRAPH = {
+    "nodes": [
+        {
+            "id": "trigger-1",
+            "type": "triggerNode",
+            "position": {"x": 250, "y": 50},
+            "data": {"nodeType": "MESSAGE_INBOUND", "platform": "whatsapp", "config": {}},
+        },
+        {
+            "id": "node-1",
+            "type": "actionNode",
+            "position": {"x": 250, "y": 220},
+            "data": {"nodeType": "AI_REPLY", "config": {"goal": ""}},  # missing goal
+        },
+    ],
+    "edges": [{"id": "e1", "source": "trigger-1", "target": "node-1"}],
+}
+
+
 async def get_auth_headers(client: AsyncClient, email: str) -> dict:
     pwd = "password123"
-    await client.post("/api/v1/auth/signup", json={"email": email, "password": pwd, "full_name": "Inbox Test"})
+    await client.post("/api/v1/auth/signup", json={"email": email, "password": pwd, "full_name": "Auto Test"})
     login_res = await client.post("/api/v1/auth/login", data={"username": email, "password": pwd})
     token = login_res.json()["data"]["access_token"]
-    
     ws_res = await client.get("/api/v1/workspaces", headers={"Authorization": f"Bearer {token}"})
     ws_id = ws_res.json()["data"][0]["id"]
     return {"Authorization": f"Bearer {token}", "X-Workspace-ID": ws_id}
 
+
+async def create_blank_flow(client: AsyncClient, headers: dict, name: str = "Test Flow") -> str:
+    """Helper: create blank flow, return flow_id."""
+    res = await client.post("/api/v1/automations", json={"name": name}, headers=headers)
+    assert res.status_code == 200, f"Create flow failed: {res.text}"
+    return res.json()["data"]["flow_id"]
+
+
+async def save_draft(client: AsyncClient, headers: dict, flow_id: str, graph: dict) -> None:
+    """Helper: save draft."""
+    res = await client.put(
+        f"/api/v1/automations/{flow_id}/draft",
+        json={"builder_graph_json": graph},
+        headers=headers,
+    )
+    assert res.status_code == 200, f"Save draft failed: {res.text}"
+
+
+# ---------------------------------------------------------------------------
+# Backward Compatibility
+# ---------------------------------------------------------------------------
+
 @pytest.mark.asyncio
-async def test_automation_publish(async_client: AsyncClient):
-    headers = await get_auth_headers(async_client, "auto_test@example.com")
-    
-    # Must use /from-builder 
-    flow_payload = {
-        "name": "Test Flow",
-        "description": "Integration test flow",
-        "steps": [], 
+async def test_from_builder_backward_compat(async_client: AsyncClient):
+    """POST /from-builder with publish=True still works (backward compat)."""
+    headers = await get_auth_headers(async_client, "compat_test@example.com")
+
+    payload = {
+        "name": "Compat Flow",
+        "description": "Backward compat test",
+        "steps": [],
         "trigger": {"type": "MESSAGE_INBOUND", "platform": "WHATSAPP", "keywords": []},
-        "publish": False
+        "publish": True,
     }
-    start_res = await async_client.post("/api/v1/automations/from-builder", json=flow_payload, headers=headers)
-    assert start_res.status_code == 200, f"Create Failed: {start_res.text}"
-    flow_data = start_res.json()["data"]
-    flow_id = flow_data["flow_id"]
-    
-    # 2. Publish
-    pub_payload = {
-        "definition": {"nodes": [], "edges": []},
-        "system_prompt": "You are a test bot",
-        "commit_message": "Initial publish"
+    res = await async_client.post("/api/v1/automations/from-builder", json=payload, headers=headers)
+    assert res.status_code == 200, f"from-builder failed: {res.text}"
+    data = res.json()["data"]
+    assert "flow_id" in data
+    assert data["version"] == 1
+
+
+# ---------------------------------------------------------------------------
+# Flow Creation
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_create_blank_flow(async_client: AsyncClient):
+    """POST /automations creates a blank DRAFT flow and returns flow_id."""
+    headers = await get_auth_headers(async_client, "blank_flow@example.com")
+    res = await async_client.post("/api/v1/automations", json={"name": "My Canvas Flow"}, headers=headers)
+    assert res.status_code == 200
+    assert "flow_id" in res.json()["data"]
+
+
+# ---------------------------------------------------------------------------
+# Draft — Get / Save
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_get_draft_empty(async_client: AsyncClient):
+    """GET /draft on a new flow returns builder_graph_json=null."""
+    headers = await get_auth_headers(async_client, "draft_empty@example.com")
+    flow_id = await create_blank_flow(async_client, headers)
+
+    res = await async_client.get(f"/api/v1/automations/{flow_id}/draft", headers=headers)
+    assert res.status_code == 200
+    data = res.json()["data"]
+    assert data["builder_graph_json"] is None
+    assert data["last_validation_errors"] is None
+
+
+@pytest.mark.asyncio
+async def test_put_and_get_draft(async_client: AsyncClient):
+    """PUT draft then GET returns the same builder_graph_json."""
+    headers = await get_auth_headers(async_client, "draft_save@example.com")
+    flow_id = await create_blank_flow(async_client, headers)
+
+    await save_draft(async_client, headers, flow_id, VALID_BUILDER_GRAPH)
+
+    res = await async_client.get(f"/api/v1/automations/{flow_id}/draft", headers=headers)
+    assert res.status_code == 200
+    data = res.json()["data"]
+    assert data["builder_graph_json"] is not None
+    assert len(data["builder_graph_json"]["nodes"]) == 2
+    assert data["updated_at"] is not None
+
+
+@pytest.mark.asyncio
+async def test_put_draft_twice_upserts(async_client: AsyncClient):
+    """Saving draft twice updates in-place (no duplicate rows)."""
+    headers = await get_auth_headers(async_client, "draft_upsert@example.com")
+    flow_id = await create_blank_flow(async_client, headers)
+
+    await save_draft(async_client, headers, flow_id, VALID_BUILDER_GRAPH)
+
+    updated_graph = dict(VALID_BUILDER_GRAPH)
+    updated_graph["nodes"] = [VALID_BUILDER_GRAPH["nodes"][0]]  # only trigger
+    updated_graph["edges"] = []
+    await save_draft(async_client, headers, flow_id, updated_graph)
+
+    res = await async_client.get(f"/api/v1/automations/{flow_id}/draft", headers=headers)
+    draft = res.json()["data"]["builder_graph_json"]
+    assert len(draft["nodes"]) == 1  # reflects second save
+
+
+# ---------------------------------------------------------------------------
+# Draft — Validate
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_validate_draft_no_draft_returns_error(async_client: AsyncClient):
+    """Validate without a saved draft returns error message."""
+    headers = await get_auth_headers(async_client, "validate_nodraft@example.com")
+    flow_id = await create_blank_flow(async_client, headers)
+
+    res = await async_client.post(f"/api/v1/automations/{flow_id}/draft/validate", headers=headers)
+    assert res.status_code == 200
+    assert res.json()["success"] is False
+
+
+@pytest.mark.asyncio
+async def test_validate_draft_invalid(async_client: AsyncClient):
+    """Validate draft with missing AI_REPLY goal returns structured errors."""
+    headers = await get_auth_headers(async_client, "validate_invalid@example.com")
+    flow_id = await create_blank_flow(async_client, headers)
+    await save_draft(async_client, headers, flow_id, INVALID_BUILDER_GRAPH)
+
+    res = await async_client.post(f"/api/v1/automations/{flow_id}/draft/validate", headers=headers)
+    assert res.status_code == 200
+    body = res.json()
+    assert body["success"] is True  # request succeeded, validation failed
+    data = body["data"]
+    assert data["valid"] is False
+    assert len(data["errors"]) >= 1
+    assert any(e["node_id"] == "node-1" for e in data["errors"])
+
+
+@pytest.mark.asyncio
+async def test_validate_draft_valid(async_client: AsyncClient):
+    """Validate draft with correct graph returns valid=True and no errors."""
+    headers = await get_auth_headers(async_client, "validate_valid@example.com")
+    flow_id = await create_blank_flow(async_client, headers)
+    await save_draft(async_client, headers, flow_id, VALID_BUILDER_GRAPH)
+
+    res = await async_client.post(f"/api/v1/automations/{flow_id}/draft/validate", headers=headers)
+    assert res.status_code == 200
+    data = res.json()["data"]
+    assert data["valid"] is True
+    assert data["errors"] == []
+
+
+# ---------------------------------------------------------------------------
+# Publish
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_publish_without_draft_fails(async_client: AsyncClient):
+    """Publish without a draft returns an error (not 500)."""
+    headers = await get_auth_headers(async_client, "publish_nodraft@example.com")
+    flow_id = await create_blank_flow(async_client, headers)
+
+    res = await async_client.post(f"/api/v1/automations/{flow_id}/publish", headers=headers)
+    assert res.status_code == 200
+    assert res.json()["success"] is False
+
+
+@pytest.mark.asyncio
+async def test_publish_invalid_draft_blocked(async_client: AsyncClient):
+    """Publish with invalid draft does NOT create a FlowVersion. Returns errors."""
+    headers = await get_auth_headers(async_client, "publish_invalid@example.com")
+    flow_id = await create_blank_flow(async_client, headers)
+    await save_draft(async_client, headers, flow_id, INVALID_BUILDER_GRAPH)
+
+    res = await async_client.post(f"/api/v1/automations/{flow_id}/publish", headers=headers)
+    assert res.status_code == 200
+    data = res.json()["data"]
+    assert data["success"] is False
+    assert data["published"] is False
+    assert len(data["errors"]) >= 1
+
+
+@pytest.mark.asyncio
+async def test_publish_valid_creates_flow_version(async_client: AsyncClient):
+    """
+    Valid draft publish:
+    - Creates FlowVersion
+    - Sets flow.published_version_id
+    - Returns success=True + version_number
+    - Flow status becomes PUBLISHED
+    """
+    headers = await get_auth_headers(async_client, "publish_valid@example.com")
+    flow_id = await create_blank_flow(async_client, headers)
+    await save_draft(async_client, headers, flow_id, VALID_BUILDER_GRAPH)
+
+    res = await async_client.post(f"/api/v1/automations/{flow_id}/publish", headers=headers)
+    assert res.status_code == 200
+    data = res.json()["data"]
+    assert data["success"] is True
+    assert data["published"] is True
+    assert data["version_number"] == 1
+    assert data["version_id"] is not None
+    assert data["published_at"] is not None
+
+    # Flow should now be PUBLISHED
+    flow_res = await async_client.get(f"/api/v1/automations/{flow_id}", headers=headers)
+    flow = flow_res.json()["data"]
+    assert flow["status"] == "published"
+    assert flow["published_version_id"] is not None
+
+
+@pytest.mark.asyncio
+async def test_publish_increments_version_number(async_client: AsyncClient):
+    """Publishing twice produces version 1 then version 2."""
+    headers = await get_auth_headers(async_client, "publish_v2@example.com")
+    flow_id = await create_blank_flow(async_client, headers)
+    await save_draft(async_client, headers, flow_id, VALID_BUILDER_GRAPH)
+
+    res1 = await async_client.post(f"/api/v1/automations/{flow_id}/publish", headers=headers)
+    assert res1.json()["data"]["version_number"] == 1
+
+    # Save draft again and publish
+    await save_draft(async_client, headers, flow_id, VALID_BUILDER_GRAPH)
+    res2 = await async_client.post(f"/api/v1/automations/{flow_id}/publish", headers=headers)
+    assert res2.json()["data"]["version_number"] == 2
+
+
+# ---------------------------------------------------------------------------
+# Versions
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_versions_list(async_client: AsyncClient):
+    """GET /versions returns all versions, newest first, with is_active flag."""
+    headers = await get_auth_headers(async_client, "versions_list@example.com")
+    flow_id = await create_blank_flow(async_client, headers)
+    await save_draft(async_client, headers, flow_id, VALID_BUILDER_GRAPH)
+
+    # Publish v1
+    await async_client.post(f"/api/v1/automations/{flow_id}/publish", headers=headers)
+    # Publish v2
+    await save_draft(async_client, headers, flow_id, VALID_BUILDER_GRAPH)
+    await async_client.post(f"/api/v1/automations/{flow_id}/publish", headers=headers)
+
+    res = await async_client.get(f"/api/v1/automations/{flow_id}/versions", headers=headers)
+    assert res.status_code == 200
+    versions = res.json()["data"]
+    assert len(versions) == 2
+
+    # Newest (v2) should be first and is_active
+    assert versions[0]["version_number"] == 2
+    assert versions[0]["is_active"] is True
+
+    # v1 is not active
+    assert versions[1]["version_number"] == 1
+    assert versions[1]["is_active"] is False
+
+
+# ---------------------------------------------------------------------------
+# Rollback
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_rollback_creates_new_version(async_client: AsyncClient):
+    """
+    Rollback to v1 creates v3 (new snapshot) with same definition as v1.
+    flow.published_version_id points to v3.
+    """
+    headers = await get_auth_headers(async_client, "rollback@example.com")
+    flow_id = await create_blank_flow(async_client, headers)
+    await save_draft(async_client, headers, flow_id, VALID_BUILDER_GRAPH)
+
+    # Publish v1
+    pub1 = await async_client.post(f"/api/v1/automations/{flow_id}/publish", headers=headers)
+    v1_id = pub1.json()["data"]["version_id"]
+
+    # Publish v2
+    await save_draft(async_client, headers, flow_id, VALID_BUILDER_GRAPH)
+    await async_client.post(f"/api/v1/automations/{flow_id}/publish", headers=headers)
+
+    # Rollback to v1
+    rb_res = await async_client.post(
+        f"/api/v1/automations/{flow_id}/rollback/{v1_id}", headers=headers
+    )
+    assert rb_res.status_code == 200
+    rb_data = rb_res.json()["data"]
+    assert rb_data["new_version_number"] == 3
+    assert rb_data["rolled_back_to"] == 1
+
+    # Confirm versions list shows 3 items and v3 is active
+    ver_res = await async_client.get(f"/api/v1/automations/{flow_id}/versions", headers=headers)
+    versions = ver_res.json()["data"]
+    assert len(versions) == 3
+    assert versions[0]["is_active"] is True
+    assert versions[0]["version_number"] == 3
+
+
+# ---------------------------------------------------------------------------
+# Simulate
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_simulate_no_draft_returns_error(async_client: AsyncClient):
+    """Simulate without a draft returns an error response."""
+    headers = await get_auth_headers(async_client, "sim_nodraft@example.com")
+    flow_id = await create_blank_flow(async_client, headers)
+
+    res = await async_client.post(f"/api/v1/automations/{flow_id}/simulate", json={}, headers=headers)
+    assert res.status_code == 200
+    assert res.json()["success"] is False
+
+
+@pytest.mark.asyncio
+async def test_simulate_invalid_draft_returns_errors(async_client: AsyncClient):
+    """Simulate with invalid draft returns validation errors, not steps."""
+    headers = await get_auth_headers(async_client, "sim_invalid@example.com")
+    flow_id = await create_blank_flow(async_client, headers)
+    await save_draft(async_client, headers, flow_id, INVALID_BUILDER_GRAPH)
+
+    res = await async_client.post(f"/api/v1/automations/{flow_id}/simulate", json={}, headers=headers)
+    assert res.status_code == 200
+    data = res.json()["data"]
+    assert data["valid"] is False
+    assert len(data["errors"]) >= 1
+    assert data["steps"] == []
+
+
+@pytest.mark.asyncio
+async def test_simulate_no_dispatch(async_client: AsyncClient):
+    """
+    Simulate with valid draft:
+    - Returns steps array (≥1 step)
+    - dispatch_blocked is True on result
+    - No messages actually sent
+    """
+    headers = await get_auth_headers(async_client, "sim_valid@example.com")
+    flow_id = await create_blank_flow(async_client, headers)
+    await save_draft(async_client, headers, flow_id, VALID_BUILDER_GRAPH)
+
+    res = await async_client.post(
+        f"/api/v1/automations/{flow_id}/simulate",
+        json={"mock_payload": {"content": "Hello!", "sender": "+1234567890"}},
+        headers=headers,
+    )
+    assert res.status_code == 200
+    data = res.json()["data"]
+    assert data["valid"] is True
+    assert len(data["steps"]) >= 1
+    assert data["dispatch_blocked"] is True
+    # All steps must have dispatch_blocked=True (no real messages)
+    for step in data["steps"]:
+        if "would_dispatch" in step:
+            assert step["would_dispatch"] is False
+
+
+@pytest.mark.asyncio
+async def test_simulate_send_message_shows_content(async_client: AsyncClient):
+    """Simulate SEND_MESSAGE step exposes would_send field."""
+    headers = await get_auth_headers(async_client, "sim_send@example.com")
+    flow_id = await create_blank_flow(async_client, headers)
+
+    graph = {
+        "nodes": [
+            {
+                "id": "trigger-1",
+                "type": "triggerNode",
+                "position": {"x": 250, "y": 50},
+                "data": {"nodeType": "MESSAGE_INBOUND", "platform": "whatsapp", "config": {}},
+            },
+            {
+                "id": "node-1",
+                "type": "actionNode",
+                "position": {"x": 250, "y": 220},
+                "data": {"nodeType": "SEND_MESSAGE", "config": {"content": "Welcome to our service!"}},
+            },
+        ],
+        "edges": [{"id": "e1", "source": "trigger-1", "target": "node-1"}],
     }
-    
-    pub_res = await async_client.post(f"/api/v1/automations/{flow_id}/publish", json=pub_payload, headers=headers)
-    assert pub_res.status_code == 200, f"Publish Failed: {pub_res.text}"
-    version_data = pub_res.json()["data"]
-    assert version_data["status"] == "published"
+    await save_draft(async_client, headers, flow_id, graph)
+
+    res = await async_client.post(f"/api/v1/automations/{flow_id}/simulate", json={}, headers=headers)
+    assert res.status_code == 200
+    data = res.json()["data"]
+    assert data["valid"] is True
+    send_step = next(s for s in data["steps"] if s["node_type"] == "SEND_MESSAGE")
+    assert send_step["would_send"] == "Welcome to our service!"
+
+
+# ---------------------------------------------------------------------------
+# Miscellaneous
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_update_flow_name(async_client: AsyncClient):
+    """PATCH /automations/{id} updates the flow name."""
+    headers = await get_auth_headers(async_client, "update_name@example.com")
+    flow_id = await create_blank_flow(async_client, headers, "Original Name")
+
+    res = await async_client.patch(
+        f"/api/v1/automations/{flow_id}",
+        json={"name": "Updated Name"},
+        headers=headers,
+    )
+    assert res.status_code == 200
+    assert res.json()["data"]["name"] == "Updated Name"
+
+
+@pytest.mark.asyncio
+async def test_delete_flow(async_client: AsyncClient):
+    """DELETE /automations/{id} removes the flow."""
+    headers = await get_auth_headers(async_client, "delete_flow@example.com")
+    flow_id = await create_blank_flow(async_client, headers, "To Be Deleted")
+
+    res = await async_client.delete(f"/api/v1/automations/{flow_id}", headers=headers)
+    assert res.status_code == 200
+    assert res.json()["data"]["deleted"] is True
+
+    # Flow should no longer be found
+    get_res = await async_client.get(f"/api/v1/automations/{flow_id}", headers=headers)
+    assert get_res.json()["success"] is False

backend/tests/test_builder_translator.py

@@ -0,0 +1,331 @@
+"""
+Unit tests for the builder translator (Mission 27).
+No DB required — pure logic tests.
+"""
+import pytest
+from app.domain.builder_translator import validate_graph, translate, simulate
+
+# ---------------------------------------------------------------------------
+# Helpers
+# ---------------------------------------------------------------------------
+
+def make_trigger_node(node_id="trigger-1", node_type="MESSAGE_INBOUND", platform="whatsapp"):
+    return {
+        "id": node_id,
+        "type": "triggerNode",
+        "position": {"x": 250, "y": 50},
+        "data": {"nodeType": node_type, "platform": platform, "config": {}},
+    }
+
+def make_action_node(node_id, node_type, config=None):
+    return {
+        "id": node_id,
+        "type": "actionNode",
+        "position": {"x": 250, "y": 220},
+        "data": {"nodeType": node_type, "config": config or {}},
+    }
+
+def make_edge(edge_id, source, target):
+    return {"id": edge_id, "source": source, "target": target}
+
+def make_valid_graph():
+    return {
+        "nodes": [
+            make_trigger_node(),
+            make_action_node("node-1", "AI_REPLY", {"goal": "Help user", "tasks": []}),
+        ],
+        "edges": [make_edge("e1", "trigger-1", "node-1")],
+    }
+
+
+# ---------------------------------------------------------------------------
+# validate_graph tests
+# ---------------------------------------------------------------------------
+
+def test_validate_graph_valid():
+    """A well-formed graph with a trigger and a valid AI_REPLY should pass."""
+    errors = validate_graph(make_valid_graph())
+    assert errors == []
+
+
+def test_validate_graph_no_nodes():
+    """Empty graph should return an error."""
+    errors = validate_graph({"nodes": [], "edges": []})
+    assert len(errors) == 1
+    assert "node" in errors[0]["message"].lower()
+
+
+def test_validate_graph_no_trigger():
+    """Graph without a trigger node should return an error."""
+    graph = {
+        "nodes": [make_action_node("node-1", "AI_REPLY", {"goal": "test"})],
+        "edges": [],
+    }
+    errors = validate_graph(graph)
+    assert any("trigger" in e["message"].lower() for e in errors)
+
+
+def test_validate_graph_multiple_triggers():
+    """Graph with two trigger nodes should return an error for the second."""
+    graph = {
+        "nodes": [
+            make_trigger_node("trigger-1"),
+            make_trigger_node("trigger-2"),
+            make_action_node("node-1", "SEND_MESSAGE", {"content": "Hello"}),
+        ],
+        "edges": [
+            make_edge("e1", "trigger-1", "node-1"),
+            make_edge("e2", "trigger-2", "node-1"),
+        ],
+    }
+    errors = validate_graph(graph)
+    assert any("one trigger" in e["message"].lower() for e in errors)
+
+
+def test_validate_graph_ai_reply_missing_goal():
+    """AI_REPLY node without goal should return a field-specific error."""
+    graph = {
+        "nodes": [
+            make_trigger_node(),
+            make_action_node("node-1", "AI_REPLY", {"goal": ""}),
+        ],
+        "edges": [make_edge("e1", "trigger-1", "node-1")],
+    }
+    errors = validate_graph(graph)
+    assert any(e["node_id"] == "node-1" and "goal" in e["field"] for e in errors)
+
+
+def test_validate_graph_send_message_missing_content():
+    """SEND_MESSAGE without content should return an error."""
+    graph = {
+        "nodes": [
+            make_trigger_node(),
+            make_action_node("node-1", "SEND_MESSAGE", {"content": ""}),
+        ],
+        "edges": [make_edge("e1", "trigger-1", "node-1")],
+    }
+    errors = validate_graph(graph)
+    assert any(e["node_id"] == "node-1" and "content" in e["field"] for e in errors)
+
+
+def test_validate_graph_tag_contact_missing_tag():
+    """TAG_CONTACT without tag should return an error."""
+    graph = {
+        "nodes": [
+            make_trigger_node(),
+            make_action_node("node-1", "TAG_CONTACT", {"tag": ""}),
+        ],
+        "edges": [make_edge("e1", "trigger-1", "node-1")],
+    }
+    errors = validate_graph(graph)
+    assert any(e["node_id"] == "node-1" for e in errors)
+
+
+def test_validate_graph_condition_node_blocked():
+    """CONDITION node should be blocked from publish with a clear message."""
+    graph = {
+        "nodes": [
+            make_trigger_node(),
+            make_action_node("node-1", "CONDITION", {}),
+        ],
+        "edges": [make_edge("e1", "trigger-1", "node-1")],
+    }
+    errors = validate_graph(graph)
+    assert any(e["node_id"] == "node-1" and "not yet supported" in e["message"] for e in errors)
+
+
+def test_validate_graph_wait_delay_blocked():
+    """WAIT_DELAY node should be blocked from publish."""
+    graph = {
+        "nodes": [
+            make_trigger_node(),
+            make_action_node("node-1", "WAIT_DELAY", {}),
+        ],
+        "edges": [make_edge("e1", "trigger-1", "node-1")],
+    }
+    errors = validate_graph(graph)
+    assert any(e["node_id"] == "node-1" and "not yet supported" in e["message"] for e in errors)
+
+
+def test_validate_graph_disconnected_node():
+    """Action node not connected to trigger should return a reachability error."""
+    graph = {
+        "nodes": [
+            make_trigger_node(),
+            make_action_node("node-1", "AI_REPLY", {"goal": "test"}),
+            make_action_node("orphan", "SEND_MESSAGE", {"content": "Hello"}),
+        ],
+        "edges": [make_edge("e1", "trigger-1", "node-1")],
+        # "orphan" is not connected
+    }
+    errors = validate_graph(graph)
+    assert any(e["node_id"] == "orphan" and "not connected" in e["message"] for e in errors)
+
+
+def test_validate_graph_lead_ad_submit_trigger():
+    """LEAD_AD_SUBMIT trigger type should be valid."""
+    graph = {
+        "nodes": [
+            make_trigger_node("t1", "LEAD_AD_SUBMIT", "meta"),
+            make_action_node("node-1", "AI_REPLY", {"goal": "Qualify lead"}),
+        ],
+        "edges": [make_edge("e1", "t1", "node-1")],
+    }
+    errors = validate_graph(graph)
+    assert errors == []
+
+
+# ---------------------------------------------------------------------------
+# translate tests
+# ---------------------------------------------------------------------------
+
+def test_translate_produces_valid_contract():
+    """translate() should produce a valid runtime definition_json."""
+    graph = make_valid_graph()
+    definition = translate(graph)
+
+    assert "nodes" in definition
+    assert "edges" in definition
+    assert "start_node_id" in definition
+    assert definition["start_node_id"] == "trigger-1"
+
+    # Trigger node
+    trigger = next(n for n in definition["nodes"] if n["type"] == "TRIGGER")
+    assert trigger["id"] == "trigger-1"
+    assert trigger["config"]["trigger_type"] == "MESSAGE_INBOUND"
+    assert trigger["config"]["platform"] == "whatsapp"
+
+    # Action node
+    action = next(n for n in definition["nodes"] if n["type"] == "AI_REPLY")
+    assert action["config"]["goal"] == "Help user"
+
+    # Edge
+    assert len(definition["edges"]) == 1
+    edge = definition["edges"][0]
+    assert edge["source_node_id"] == "trigger-1"
+    assert edge["target_node_id"] == "node-1"
+
+
+def test_translate_sets_start_node_id():
+    """start_node_id in output should match the trigger node id."""
+    graph = {
+        "nodes": [
+            make_trigger_node("my-trigger"),
+            make_action_node("step-1", "SEND_MESSAGE", {"content": "Hello"}),
+        ],
+        "edges": [make_edge("e1", "my-trigger", "step-1")],
+    }
+    definition = translate(graph)
+    assert definition["start_node_id"] == "my-trigger"
+
+
+def test_translate_edge_format():
+    """Edges in runtime format should use source_node_id and target_node_id."""
+    graph = make_valid_graph()
+    definition = translate(graph)
+    edge = definition["edges"][0]
+    assert "source_node_id" in edge
+    assert "target_node_id" in edge
+    assert "source" not in edge  # React Flow format stripped
+
+
+def test_translate_multiple_nodes():
+    """Multiple action nodes should all be translated correctly."""
+    graph = {
+        "nodes": [
+            make_trigger_node(),
+            make_action_node("n1", "AI_REPLY", {"goal": "Greet"}),
+            make_action_node("n2", "ZOHO_UPSERT_LEAD", {}),
+            make_action_node("n3", "HUMAN_HANDOVER", {}),
+        ],
+        "edges": [
+            make_edge("e1", "trigger-1", "n1"),
+            make_edge("e2", "n1", "n2"),
+            make_edge("e3", "n2", "n3"),
+        ],
+    }
+    definition = translate(graph)
+    assert len(definition["nodes"]) == 4
+    assert len(definition["edges"]) == 3
+    types = {n["type"] for n in definition["nodes"]}
+    assert "TRIGGER" in types
+    assert "AI_REPLY" in types
+    assert "ZOHO_UPSERT_LEAD" in types
+
+
+# ---------------------------------------------------------------------------
+# simulate tests
+# ---------------------------------------------------------------------------
+
+def test_simulate_returns_steps():
+    """simulate() should return a steps array for a valid graph."""
+    graph = make_valid_graph()
+    result = simulate(graph)
+    assert "steps" in result
+    assert len(result["steps"]) >= 1
+    assert result["dispatch_blocked"] is True
+
+
+def test_simulate_no_dispatch_side_effects():
+    """simulate() should explicitly mark dispatch as blocked."""
+    graph = make_valid_graph()
+    result = simulate(graph)
+    assert result["dispatch_blocked"] is True
+    # All steps with dispatch info should have it blocked
+    for step in result["steps"]:
+        if "would_dispatch" in step:
+            assert step["would_dispatch"] is False
+
+
+def test_simulate_empty_graph():
+    """simulate() with no trigger should return empty steps with message."""
+    graph = {"nodes": [], "edges": []}
+    result = simulate(graph)
+    assert result["steps"] == []
+    assert "No trigger" in result["message"]
+
+
+def test_simulate_with_mock_payload():
+    """simulate() should include mock payload in trigger step."""
+    graph = make_valid_graph()
+    mock = {"content": "Hello!", "sender": "+1234567890"}
+    result = simulate(graph, mock_payload=mock)
+    trigger_step = next(
+        (s for s in result["steps"] if s["node_type"] in ("MESSAGE_INBOUND", "LEAD_AD_SUBMIT")),
+        None
+    )
+    if trigger_step:
+        assert "mock_payload" in trigger_step
+
+
+def test_simulate_send_message_shows_content():
+    """Simulate should show SEND_MESSAGE content in would_send field."""
+    graph = {
+        "nodes": [
+            make_trigger_node(),
+            make_action_node("n1", "SEND_MESSAGE", {"content": "Welcome!"}),
+        ],
+        "edges": [make_edge("e1", "trigger-1", "n1")],
+    }
+    result = simulate(graph)
+    send_step = next(s for s in result["steps"] if s["node_type"] == "SEND_MESSAGE")
+    assert send_step["would_send"] == "Welcome!"
+
+
+def test_simulate_multiple_steps_in_order():
+    """Simulate traversal should follow edges in order."""
+    graph = {
+        "nodes": [
+            make_trigger_node(),
+            make_action_node("n1", "AI_REPLY", {"goal": "Greet"}),
+            make_action_node("n2", "TAG_CONTACT", {"tag": "interested"}),
+        ],
+        "edges": [
+            make_edge("e1", "trigger-1", "n1"),
+            make_edge("e2", "n1", "n2"),
+        ],
+    }
+    result = simulate(graph)
+    node_types = [s["node_type"] for s in result["steps"]]
+    # Trigger comes first, then AI_REPLY, then TAG_CONTACT
+    assert node_types.index("AI_REPLY") < node_types.index("TAG_CONTACT")

backend/tests/test_templates.py

@@ -0,0 +1,536 @@
+"""
+Integration tests for the Template Catalog (Mission 27).
+
+Covers:
+- Admin: create/patch/list templates and versions, publish
+- Workspace: list, get, clone templates
+- Edge cases: duplicate slug, invalid graph, no published version
+"""
+import pytest
+from httpx import AsyncClient
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from app.core.security import get_password_hash
+from app.models.models import User
+
+# ---------------------------------------------------------------------------
+# Shared graph fixture
+# ---------------------------------------------------------------------------
+
+VALID_BUILDER_GRAPH = {
+    "nodes": [
+        {
+            "id": "trigger-1",
+            "type": "triggerNode",
+            "position": {"x": 250, "y": 50},
+            "data": {"nodeType": "MESSAGE_INBOUND", "platform": "whatsapp", "config": {}},
+        },
+        {
+            "id": "node-1",
+            "type": "actionNode",
+            "position": {"x": 250, "y": 220},
+            "data": {
+                "nodeType": "AI_REPLY",
+                "config": {"goal": "Welcome and qualify the lead", "tasks": []},
+            },
+        },
+    ],
+    "edges": [{"id": "e1", "source": "trigger-1", "target": "node-1"}],
+}
+
+INVALID_BUILDER_GRAPH = {
+    "nodes": [
+        {
+            "id": "trigger-1",
+            "type": "triggerNode",
+            "position": {"x": 250, "y": 50},
+            "data": {"nodeType": "MESSAGE_INBOUND", "platform": "whatsapp", "config": {}},
+        },
+        {
+            "id": "node-1",
+            "type": "actionNode",
+            "position": {"x": 250, "y": 220},
+            "data": {"nodeType": "AI_REPLY", "config": {"goal": ""}},  # missing goal → invalid
+        },
+    ],
+    "edges": [{"id": "e1", "source": "trigger-1", "target": "node-1"}],
+}
+
+# ---------------------------------------------------------------------------
+# Auth Helpers
+# ---------------------------------------------------------------------------
+
+async def get_admin_headers(client: AsyncClient, db_session: AsyncSession, suffix: str) -> dict:
+    """Create a superadmin user directly in DB and return auth headers."""
+    email = f"tmpl_admin_{suffix}@leadpilot.io"
+    admin = User(
+        email=email,
+        hashed_password=get_password_hash("Admin1234!"),
+        full_name=f"Template Admin {suffix}",
+        is_active=True,
+        is_superuser=True,
+    )
+    db_session.add(admin)
+    await db_session.flush()
+
+    r = await client.post(
+        "/api/v1/auth/login",
+        data={"username": email, "password": "Admin1234!"},
+        headers={"content-type": "application/x-www-form-urlencoded"},
+    )
+    token = r.json()["data"]["access_token"]
+    return {"Authorization": f"Bearer {token}"}
+
+
+async def get_ws_headers(client: AsyncClient, suffix: str) -> dict:
+    """Create a regular workspace user and return auth + workspace headers."""
+    email = f"tmpl_ws_{suffix}@example.com"
+    pwd = "password123"
+    await client.post("/api/v1/auth/signup", json={"email": email, "password": pwd, "full_name": "WS User"})
+    r = await client.post("/api/v1/auth/login", data={"username": email, "password": pwd})
+    token = r.json()["data"]["access_token"]
+    ws_res = await client.get("/api/v1/workspaces", headers={"Authorization": f"Bearer {token}"})
+    ws_id = ws_res.json()["data"][0]["id"]
+    return {"Authorization": f"Bearer {token}", "X-Workspace-ID": ws_id}
+
+
+async def create_published_template(
+    client: AsyncClient, db_session: AsyncSession, slug: str, suffix: str
+) -> tuple[str, dict]:
+    """
+    Helper: create a template + published version via admin endpoints.
+    Returns (template_id, admin_headers).
+    """
+    admin_headers = await get_admin_headers(client, db_session, suffix)
+
+    # Create template
+    res = await client.post(
+        "/api/v1/admin/templates",
+        json={
+            "slug": slug,
+            "name": f"Template {slug}",
+            "description": "Test template",
+            "category": "lead_generation",
+            "platforms": ["whatsapp"],
+        },
+        headers=admin_headers,
+    )
+    assert res.status_code == 200, f"Create template failed: {res.text}"
+    template_id = res.json()["data"]["id"]
+
+    # Create version
+    res = await client.post(
+        f"/api/v1/admin/templates/{template_id}/versions",
+        json={"builder_graph_json": VALID_BUILDER_GRAPH, "changelog": "Initial version"},
+        headers=admin_headers,
+    )
+    assert res.status_code == 200, f"Create version failed: {res.text}"
+
+    # Publish version
+    res = await client.post(
+        f"/api/v1/admin/templates/{template_id}/publish",
+        headers=admin_headers,
+    )
+    assert res.status_code == 200, f"Publish failed: {res.text}"
+
+    return template_id, admin_headers
+
+
+# ---------------------------------------------------------------------------
+# Admin — Template CRUD
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_admin_create_template(async_client: AsyncClient, db_session: AsyncSession):
+    """Admin can create a new template. Returns id + slug."""
+    headers = await get_admin_headers(async_client, db_session, "create")
+
+    res = await async_client.post(
+        "/api/v1/admin/templates",
+        json={
+            "slug": "welcome-bot",
+            "name": "Welcome Bot",
+            "description": "Greet new leads automatically.",
+            "category": "lead_generation",
+            "platforms": ["whatsapp"],
+            "is_featured": True,
+        },
+        headers=headers,
+    )
+    assert res.status_code == 200
+    data = res.json()["data"]
+    assert data["slug"] == "welcome-bot"
+    assert "id" in data
+
+
+@pytest.mark.asyncio
+async def test_admin_create_template_duplicate_slug_fails(
+    async_client: AsyncClient, db_session: AsyncSession
+):
+    """Creating two templates with the same slug returns an error."""
+    headers = await get_admin_headers(async_client, db_session, "dup")
+
+    payload = {"slug": "dup-slug", "name": "First"}
+    await async_client.post("/api/v1/admin/templates", json=payload, headers=headers)
+
+    res = await async_client.post("/api/v1/admin/templates", json=payload, headers=headers)
+    assert res.status_code == 200
+    assert res.json()["success"] is False
+    assert "already exists" in res.json()["error"]
+
+
+@pytest.mark.asyncio
+async def test_admin_patch_template(async_client: AsyncClient, db_session: AsyncSession):
+    """Admin can patch template name and featured flag."""
+    headers = await get_admin_headers(async_client, db_session, "patch")
+
+    create_res = await async_client.post(
+        "/api/v1/admin/templates",
+        json={"slug": "patch-test", "name": "Original Name"},
+        headers=headers,
+    )
+    template_id = create_res.json()["data"]["id"]
+
+    res = await async_client.patch(
+        f"/api/v1/admin/templates/{template_id}",
+        json={"name": "Updated Name", "is_featured": True},
+        headers=headers,
+    )
+    assert res.status_code == 200
+    assert res.json()["data"]["updated"] is True
+
+
+@pytest.mark.asyncio
+async def test_admin_list_templates_includes_inactive(
+    async_client: AsyncClient, db_session: AsyncSession
+):
+    """Admin template list includes both active and inactive templates."""
+    headers = await get_admin_headers(async_client, db_session, "listall")
+
+    # Create one and deactivate
+    res = await async_client.post(
+        "/api/v1/admin/templates",
+        json={"slug": "inactive-one", "name": "Inactive"},
+        headers=headers,
+    )
+    template_id = res.json()["data"]["id"]
+    await async_client.patch(
+        f"/api/v1/admin/templates/{template_id}",
+        json={"is_active": False},
+        headers=headers,
+    )
+
+    list_res = await async_client.get("/api/v1/admin/templates", headers=headers)
+    assert list_res.status_code == 200
+    items = list_res.json()["data"]["items"]
+    # The deactivated template should be in the list
+    found = any(i["slug"] == "inactive-one" for i in items)
+    assert found, "Admin list should include inactive templates"
+
+
+# ---------------------------------------------------------------------------
+# Admin — Template Versions
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_admin_create_template_version(async_client: AsyncClient, db_session: AsyncSession):
+    """Admin can create a new draft version. Returns version_id + version_number."""
+    headers = await get_admin_headers(async_client, db_session, "ver_create")
+
+    create_res = await async_client.post(
+        "/api/v1/admin/templates",
+        json={"slug": "ver-create-test", "name": "Version Create Test"},
+        headers=headers,
+    )
+    template_id = create_res.json()["data"]["id"]
+
+    res = await async_client.post(
+        f"/api/v1/admin/templates/{template_id}/versions",
+        json={"builder_graph_json": VALID_BUILDER_GRAPH, "changelog": "v1 initial"},
+        headers=headers,
+    )
+    assert res.status_code == 200
+    data = res.json()["data"]
+    assert data["valid"] is True
+    assert data["version_number"] == 1
+    assert "id" in data
+
+
+@pytest.mark.asyncio
+async def test_admin_create_version_invalid_graph_returns_errors(
+    async_client: AsyncClient, db_session: AsyncSession
+):
+    """Creating a version with an invalid graph returns validation errors, not 500."""
+    headers = await get_admin_headers(async_client, db_session, "ver_invalid")
+
+    create_res = await async_client.post(
+        "/api/v1/admin/templates",
+        json={"slug": "ver-invalid-test", "name": "Invalid Version Test"},
+        headers=headers,
+    )
+    template_id = create_res.json()["data"]["id"]
+
+    res = await async_client.post(
+        f"/api/v1/admin/templates/{template_id}/versions",
+        json={"builder_graph_json": INVALID_BUILDER_GRAPH},
+        headers=headers,
+    )
+    assert res.status_code == 200
+    data = res.json()["data"]
+    assert data["valid"] is False
+    assert len(data["errors"]) >= 1
+
+
+@pytest.mark.asyncio
+async def test_admin_publish_template_version(
+    async_client: AsyncClient, db_session: AsyncSession
+):
+    """
+    After creating a version, publish marks it is_published=True.
+    Response includes version_number + published_at.
+    """
+    headers = await get_admin_headers(async_client, db_session, "pub_ver")
+
+    res = await async_client.post(
+        "/api/v1/admin/templates",
+        json={"slug": "pub-ver-test", "name": "Pub Ver Test"},
+        headers=headers,
+    )
+    template_id = res.json()["data"]["id"]
+
+    await async_client.post(
+        f"/api/v1/admin/templates/{template_id}/versions",
+        json={"builder_graph_json": VALID_BUILDER_GRAPH},
+        headers=headers,
+    )
+
+    pub_res = await async_client.post(
+        f"/api/v1/admin/templates/{template_id}/publish",
+        headers=headers,
+    )
+    assert pub_res.status_code == 200
+    data = pub_res.json()["data"]
+    assert data["published"] is True
+    assert data["version_number"] == 1
+    assert data["published_at"] is not None
+
+
+@pytest.mark.asyncio
+async def test_admin_publish_no_unpublished_version_fails(
+    async_client: AsyncClient, db_session: AsyncSession
+):
+    """Publishing when all versions are already published returns an error."""
+    template_id, headers = await create_published_template(
+        async_client, db_session, "already-pub", "alreadypub"
+    )
+
+    # Try to publish again — no more unpublished versions
+    res = await async_client.post(
+        f"/api/v1/admin/templates/{template_id}/publish",
+        headers=headers,
+    )
+    assert res.status_code == 200
+    assert res.json()["success"] is False
+
+
+@pytest.mark.asyncio
+async def test_admin_list_template_versions(
+    async_client: AsyncClient, db_session: AsyncSession
+):
+    """Admin can list all versions for a template."""
+    headers = await get_admin_headers(async_client, db_session, "list_ver")
+
+    res = await async_client.post(
+        "/api/v1/admin/templates",
+        json={"slug": "list-ver-test", "name": "List Ver Test"},
+        headers=headers,
+    )
+    template_id = res.json()["data"]["id"]
+
+    # Create two versions
+    await async_client.post(
+        f"/api/v1/admin/templates/{template_id}/versions",
+        json={"builder_graph_json": VALID_BUILDER_GRAPH, "changelog": "v1"},
+        headers=headers,
+    )
+    await async_client.post(
+        f"/api/v1/admin/templates/{template_id}/publish",
+        headers=headers,
+    )
+    await async_client.post(
+        f"/api/v1/admin/templates/{template_id}/versions",
+        json={"builder_graph_json": VALID_BUILDER_GRAPH, "changelog": "v2"},
+        headers=headers,
+    )
+
+    ver_res = await async_client.get(
+        f"/api/v1/admin/templates/{template_id}/versions",
+        headers=headers,
+    )
+    assert ver_res.status_code == 200
+    versions = ver_res.json()["data"]
+    assert len(versions) == 2
+    # Newest first
+    assert versions[0]["version_number"] == 2
+    assert versions[1]["version_number"] == 1
+    assert versions[1]["is_published"] is True
+
+
+# ---------------------------------------------------------------------------
+# Workspace — Template Catalog Browsing
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_workspace_list_templates(
+    async_client: AsyncClient, db_session: AsyncSession
+):
+    """Workspace users only see active templates with published versions."""
+    # Create and publish a template via admin
+    await create_published_template(async_client, db_session, "ws-list-t1", "wslist1")
+
+    # Create an inactive template
+    admin_headers = await get_admin_headers(async_client, db_session, "wslist_inactive")
+    res = await async_client.post(
+        "/api/v1/admin/templates",
+        json={"slug": "ws-inactive-t", "name": "Inactive Template"},
+        headers=admin_headers,
+    )
+    template_id = res.json()["data"]["id"]
+    await async_client.patch(
+        f"/api/v1/admin/templates/{template_id}",
+        json={"is_active": False},
+        headers=admin_headers,
+    )
+
+    ws_headers = await get_ws_headers(async_client, "wslist")
+    list_res = await async_client.get("/api/v1/templates", headers=ws_headers)
+    assert list_res.status_code == 200
+    templates = list_res.json()["data"]
+
+    # All returned templates must be active
+    for t in templates:
+        assert t["slug"] != "ws-inactive-t", "Inactive template should not appear"
+
+
+@pytest.mark.asyncio
+async def test_workspace_get_template_detail(
+    async_client: AsyncClient, db_session: AsyncSession
+):
+    """GET /templates/{slug} returns full detail including latest_version."""
+    await create_published_template(async_client, db_session, "ws-detail-t", "wsdetail")
+
+    ws_headers = await get_ws_headers(async_client, "wsdetail_user")
+    res = await async_client.get("/api/v1/templates/ws-detail-t", headers=ws_headers)
+    assert res.status_code == 200
+    data = res.json()["data"]
+    assert data["slug"] == "ws-detail-t"
+    assert data["latest_version"] is not None
+    assert data["latest_version"]["builder_graph_json"] is not None
+    assert data["latest_version"]["version_number"] == 1
+
+
+@pytest.mark.asyncio
+async def test_workspace_get_template_not_found(async_client: AsyncClient, db_session: AsyncSession):
+    """GET /templates/{slug} for non-existent slug returns error."""
+    ws_headers = await get_ws_headers(async_client, "wsnotfound")
+    res = await async_client.get("/api/v1/templates/does-not-exist", headers=ws_headers)
+    assert res.status_code == 200
+    assert res.json()["success"] is False
+
+
+# ---------------------------------------------------------------------------
+# Workspace — Clone Template
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_workspace_clone_template(
+    async_client: AsyncClient, db_session: AsyncSession
+):
+    """
+    POST /templates/{slug}/clone:
+    - Creates a Flow (DRAFT) in the workspace
+    - Creates a FlowDraft with builder_graph_json from the template version
+    - Returns flow_id + redirect_path
+    """
+    await create_published_template(async_client, db_session, "ws-clone-t", "wsclone")
+
+    ws_headers = await get_ws_headers(async_client, "wsclone_user")
+    res = await async_client.post(
+        "/api/v1/templates/ws-clone-t/clone",
+        json={"name": "My Cloned Flow"},
+        headers=ws_headers,
+    )
+    assert res.status_code == 200
+    data = res.json()["data"]
+    assert "flow_id" in data
+    assert data["redirect_path"] == f"/automations/{data['flow_id']}"
+    assert data["template_slug"] == "ws-clone-t"
+
+    # Verify draft was created with the template graph
+    flow_id = data["flow_id"]
+    draft_res = await async_client.get(
+        f"/api/v1/automations/{flow_id}/draft",
+        headers=ws_headers,
+    )
+    assert draft_res.status_code == 200
+    draft = draft_res.json()["data"]
+    assert draft["builder_graph_json"] is not None
+    assert len(draft["builder_graph_json"]["nodes"]) == 2  # trigger + AI_REPLY
+
+
+@pytest.mark.asyncio
+async def test_workspace_clone_template_default_name(
+    async_client: AsyncClient, db_session: AsyncSession
+):
+    """Clone without a name defaults to the template name."""
+    await create_published_template(async_client, db_session, "ws-noname-t", "wsnoname")
+
+    ws_headers = await get_ws_headers(async_client, "wsnoname_user")
+    res = await async_client.post(
+        "/api/v1/templates/ws-noname-t/clone",
+        json={},  # no name provided
+        headers=ws_headers,
+    )
+    assert res.status_code == 200
+    data = res.json()["data"]
+    assert data["flow_name"] == "Template ws-noname-t"
+
+
+@pytest.mark.asyncio
+async def test_workspace_clone_no_published_version_fails(
+    async_client: AsyncClient, db_session: AsyncSession
+):
+    """Clone a template that exists but has no published version returns an error."""
+    admin_headers = await get_admin_headers(async_client, db_session, "nopubver")
+
+    # Create template WITHOUT publishing a version
+    await async_client.post(
+        "/api/v1/admin/templates",
+        json={"slug": "no-pub-version", "name": "No Published Version"},
+        headers=admin_headers,
+    )
+
+    ws_headers = await get_ws_headers(async_client, "nopub_user")
+    res = await async_client.post(
+        "/api/v1/templates/no-pub-version/clone",
+        json={},
+        headers=ws_headers,
+    )
+    assert res.status_code == 200
+    assert res.json()["success"] is False
+    assert "no published version" in res.json()["error"].lower()
+
+
+@pytest.mark.asyncio
+async def test_workspace_clone_nonexistent_template_fails(
+    async_client: AsyncClient, db_session: AsyncSession
+):
+    """Clone a template that doesn't exist returns an error."""
+    ws_headers = await get_ws_headers(async_client, "clone_missing")
+    res = await async_client.post(
+        "/api/v1/templates/absolutely-does-not-exist/clone",
+        json={},
+        headers=ws_headers,
+    )
+    assert res.status_code == 200
+    assert res.json()["success"] is False

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@xyflow/react": "^12.10.1",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
         "lucide-react": "^0.574.0",
@@ -1530,6 +1531,55 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1565,7 +1615,7 @@
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -2134,6 +2184,38 @@
         "win32"
       ]
     },
+    "node_modules/@xyflow/react": {
+      "version": "12.10.1",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.10.1.tgz",
+      "integrity": "sha512-5eSWtIK/+rkldOuFbOOz44CRgQRjtS9v5nufk77DV+XBnfCGL9HAQ8PG00o2ZYKqkEU/Ak6wrKC95Tu+2zuK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@xyflow/system": "0.0.75",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.75",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.75.tgz",
+      "integrity": "sha512-iXs+AGFLi8w/VlAoc/iSxk+CxfT6o64Uw/k0CKASOPqjqz6E0rb5jFZgJtXGZCpfQI6OQpu5EnumP5fGxQheaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -2593,6 +2675,12 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/classcat": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
+      "license": "MIT"
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2661,9 +2749,115 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -6478,6 +6672,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -6636,6 +6839,34 @@
       "peerDependencies": {
         "zod": "^3.25.0 || ^4.0.0"
       }
+    },
+    "node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
     }
   }
 }

frontend/package.json

@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@xyflow/react": "^12.10.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.574.0",

frontend/src/app/(admin)/admin/templates/[id]/page.tsx

@@ -0,0 +1,356 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useParams } from "next/navigation";
+import Link from "next/link";
+import {
+    ArrowLeft,
+    Loader2,
+    Plus,
+    CheckCircle2,
+    AlertTriangle,
+    Rocket,
+    Star,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+    patchAdminTemplate,
+    createTemplateVersion,
+    publishTemplateVersion,
+    getTemplateVersions,
+    type AdminTemplateItem,
+    type AdminTemplateVersionItem,
+} from "@/lib/admin-api";
+import { getAdminTemplates } from "@/lib/admin-api";
+
+function SectionCard({ title, children }: { title: string; children: React.ReactNode }) {
+    return (
+        <div className="rounded-xl border border-border bg-card p-5 space-y-4 shadow-sm">
+            <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">{title}</h2>
+            {children}
+        </div>
+    );
+}
+
+export default function AdminTemplateDetailPage() {
+    const params = useParams();
+    const templateId = params.id as string;
+
+    const [template, setTemplate] = useState<AdminTemplateItem | null>(null);
+    const [versions, setVersions] = useState<AdminTemplateVersionItem[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [publishing, setPublishing] = useState(false);
+    const [creatingVersion, setCreatingVersion] = useState(false);
+    const [feedback, setFeedback] = useState<{ type: "success" | "error"; message: string } | null>(null);
+
+    // Editable fields
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+    const [isFeatured, setIsFeatured] = useState(false);
+    const [isActive, setIsActive] = useState(true);
+
+    // Version creation
+    const [graphJson, setGraphJson] = useState("");
+    const [changelog, setChangelog] = useState("");
+    const [versionErrors, setVersionErrors] = useState<any[]>([]);
+
+    const loadTemplate = async () => {
+        const res = await getAdminTemplates();
+        if (res.success && res.data) {
+            const found = res.data.items.find((t) => t.id === templateId);
+            if (found) {
+                setTemplate(found);
+                setName(found.name);
+                setDescription(found.description ?? "");
+                setIsFeatured(found.is_featured);
+                setIsActive(found.is_active);
+            }
+        }
+    };
+
+    const loadVersions = async () => {
+        const res = await getTemplateVersions(templateId);
+        if (res.success && res.data) setVersions(res.data);
+    };
+
+    useEffect(() => {
+        Promise.all([loadTemplate(), loadVersions()]).then(() => setLoading(false));
+    }, [templateId]);
+
+    const showFeedback = (type: "success" | "error", message: string) => {
+        setFeedback({ type, message });
+        setTimeout(() => setFeedback(null), 4000);
+    };
+
+    const handleSave = async () => {
+        setSaving(true);
+        const res = await patchAdminTemplate(templateId, {
+            name,
+            description,
+            is_featured: isFeatured,
+            is_active: isActive,
+        });
+        if (res.success) {
+            showFeedback("success", "Template updated.");
+            loadTemplate();
+        } else {
+            showFeedback("error", res.error ?? "Failed to save.");
+        }
+        setSaving(false);
+    };
+
+    const handleCreateVersion = async () => {
+        setCreatingVersion(true);
+        setVersionErrors([]);
+        let parsed: Record<string, any>;
+        try {
+            parsed = JSON.parse(graphJson);
+        } catch {
+            showFeedback("error", "Invalid JSON in builder graph.");
+            setCreatingVersion(false);
+            return;
+        }
+        const res = await createTemplateVersion(templateId, {
+            builder_graph_json: parsed,
+            changelog,
+        });
+        if (res.success && res.data) {
+            if (res.data.valid) {
+                showFeedback("success", `Version ${res.data.version_number} created.`);
+                setGraphJson("");
+                setChangelog("");
+                loadVersions();
+            } else {
+                setVersionErrors(res.data.errors ?? []);
+                showFeedback("error", "Graph has validation errors — version not saved.");
+            }
+        } else {
+            showFeedback("error", res.error ?? "Failed to create version.");
+        }
+        setCreatingVersion(false);
+    };
+
+    const handlePublish = async () => {
+        setPublishing(true);
+        const res = await publishTemplateVersion(templateId);
+        if (res.success && res.data) {
+            showFeedback("success", `Version ${res.data.version_number} published.`);
+            loadVersions();
+        } else {
+            showFeedback("error", res.error ?? "Nothing to publish (all versions already published).");
+        }
+        setPublishing(false);
+    };
+
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center h-64">
+                <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
+            </div>
+        );
+    }
+
+    if (!template) {
+        return (
+            <div className="p-8">
+                <p className="text-muted-foreground">Template not found.</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="p-8 max-w-5xl mx-auto space-y-8">
+            {/* Back */}
+            <Link
+                href="/admin/templates"
+                className="flex items-center gap-2 text-muted-foreground hover:text-foreground text-sm w-fit"
+            >
+                <ArrowLeft className="w-4 h-4" />
+                Back to Templates
+            </Link>
+
+            {/* Feedback banner */}
+            {feedback && (
+                <div
+                    className={cn(
+                        "flex items-center gap-2 p-3 rounded-xl border text-sm",
+                        feedback.type === "success"
+                            ? "bg-teal-50 dark:bg-teal-950/30 border-teal-200 dark:border-teal-800 text-teal-700 dark:text-teal-300"
+                            : "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800 text-red-700 dark:text-red-300"
+                    )}
+                >
+                    {feedback.type === "success" ? (
+                        <CheckCircle2 className="w-4 h-4 shrink-0" />
+                    ) : (
+                        <AlertTriangle className="w-4 h-4 shrink-0" />
+                    )}
+                    {feedback.message}
+                </div>
+            )}
+
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                {/* Left: Metadata */}
+                <div className="lg:col-span-1 space-y-4">
+                    <SectionCard title="Template Info">
+                        <div className="space-y-1">
+                            <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                                Slug
+                            </label>
+                            <p className="text-sm font-mono text-foreground">{template.slug}</p>
+                        </div>
+
+                        {[
+                            { label: "Name", value: name, set: setName },
+                        ].map(({ label, value, set }) => (
+                            <div key={label} className="space-y-1">
+                                <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                                    {label}
+                                </label>
+                                <input
+                                    className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
+                                    value={value}
+                                    onChange={(e) => set(e.target.value)}
+                                />
+                            </div>
+                        ))}
+
+                        <div className="space-y-1">
+                            <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                                Description
+                            </label>
+                            <textarea
+                                className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-teal-500 min-h-[70px]"
+                                value={description}
+                                onChange={(e) => setDescription(e.target.value)}
+                            />
+                        </div>
+
+                        <div className="flex items-center gap-4 pt-1">
+                            <label className="flex items-center gap-2 text-sm cursor-pointer">
+                                <input
+                                    type="checkbox"
+                                    checked={isFeatured}
+                                    onChange={(e) => setIsFeatured(e.target.checked)}
+                                    className="accent-teal-600"
+                                />
+                                <Star className="w-3.5 h-3.5 text-amber-500 fill-current" />
+                                Featured
+                            </label>
+                            <label className="flex items-center gap-2 text-sm cursor-pointer">
+                                <input
+                                    type="checkbox"
+                                    checked={isActive}
+                                    onChange={(e) => setIsActive(e.target.checked)}
+                                    className="accent-teal-600"
+                                />
+                                Active
+                            </label>
+                        </div>
+
+                        <button
+                            onClick={handleSave}
+                            disabled={saving}
+                            className="w-full flex items-center justify-center gap-2 py-2 rounded-lg bg-teal-600 hover:bg-teal-700 text-white text-sm font-medium disabled:opacity-50 transition-colors"
+                        >
+                            {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
+                            Save Changes
+                        </button>
+                    </SectionCard>
+                </div>
+
+                {/* Right: Versions */}
+                <div className="lg:col-span-2 space-y-4">
+                    <SectionCard title="Versions">
+                        {/* Publish latest */}
+                        <button
+                            onClick={handlePublish}
+                            disabled={publishing}
+                            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-teal-600 hover:bg-teal-700 text-white text-sm font-medium disabled:opacity-50 transition-colors"
+                        >
+                            {publishing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Rocket className="w-4 h-4" />}
+                            Publish Latest Draft
+                        </button>
+
+                        {versions.length === 0 ? (
+                            <p className="text-sm text-muted-foreground">No versions yet.</p>
+                        ) : (
+                            <div className="rounded-lg border border-border divide-y divide-border overflow-hidden">
+                                {versions.map((v) => (
+                                    <div key={v.id} className="flex items-center justify-between px-4 py-3">
+                                        <div>
+                                            <p className="text-sm font-medium">v{v.version_number}</p>
+                                            {v.changelog && (
+                                                <p className="text-xs text-muted-foreground">{v.changelog}</p>
+                                            )}
+                                        </div>
+                                        <div className="flex items-center gap-2">
+                                            {v.is_published ? (
+                                                <span className="text-xs font-semibold px-2 py-0.5 rounded-full bg-teal-100 dark:bg-teal-900 text-teal-700 dark:text-teal-300 uppercase tracking-wide">
+                                                    Published
+                                                </span>
+                                            ) : (
+                                                <span className="text-xs font-semibold px-2 py-0.5 rounded-full bg-muted text-muted-foreground uppercase tracking-wide">
+                                                    Draft
+                                                </span>
+                                            )}
+                                            <span className="text-xs text-muted-foreground">
+                                                {new Date(v.created_at).toLocaleDateString()}
+                                            </span>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </SectionCard>
+
+                    <SectionCard title="Create New Version">
+                        <div className="space-y-3">
+                            <div className="space-y-1">
+                                <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                                    Builder Graph JSON
+                                </label>
+                                <textarea
+                                    className="w-full rounded-lg border border-border bg-background px-3 py-2 text-xs font-mono resize-y focus:outline-none focus:ring-2 focus:ring-teal-500 min-h-[200px]"
+                                    placeholder='{"nodes": [...], "edges": [...]}'
+                                    value={graphJson}
+                                    onChange={(e) => setGraphJson(e.target.value)}
+                                />
+                            </div>
+
+                            {versionErrors.length > 0 && (
+                                <div className="space-y-1 p-3 rounded-lg border border-red-200 bg-red-50 dark:bg-red-950/20 text-xs text-red-700 dark:text-red-300">
+                                    <p className="font-semibold">Validation errors:</p>
+                                    {versionErrors.map((e: any, i: number) => (
+                                        <p key={i}>{e.node_id}: {e.message}</p>
+                                    ))}
+                                </div>
+                            )}
+
+                            <div className="space-y-1">
+                                <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                                    Changelog (optional)
+                                </label>
+                                <input
+                                    className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
+                                    placeholder="What changed in this version..."
+                                    value={changelog}
+                                    onChange={(e) => setChangelog(e.target.value)}
+                                />
+                            </div>
+
+                            <button
+                                onClick={handleCreateVersion}
+                                disabled={creatingVersion || !graphJson.trim()}
+                                className="flex items-center gap-2 px-4 py-2 rounded-lg border border-border hover:border-teal-400 text-sm font-medium text-foreground disabled:opacity-50 transition-colors"
+                            >
+                                {creatingVersion ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
+                                Create Draft Version
+                            </button>
+                        </div>
+                    </SectionCard>
+                </div>
+            </div>
+        </div>
+    );
+}

frontend/src/app/(admin)/admin/templates/page.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { Plus, Loader2, Star, CheckCircle2, XCircle, LayoutTemplate } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+    getAdminTemplates,
+    createAdminTemplate,
+    type AdminTemplateItem,
+} from "@/lib/admin-api";
+
+function StatusBadge({ active }: { active: boolean }) {
+    return (
+        <span
+            className={cn(
+                "inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-full uppercase tracking-wide",
+                active
+                    ? "bg-teal-100 dark:bg-teal-900 text-teal-700 dark:text-teal-300"
+                    : "bg-muted text-muted-foreground"
+            )}
+        >
+            {active ? <CheckCircle2 className="w-3 h-3" /> : <XCircle className="w-3 h-3" />}
+            {active ? "Active" : "Inactive"}
+        </span>
+    );
+}
+
+export default function AdminTemplatesPage() {
+    const [templates, setTemplates] = useState<AdminTemplateItem[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [showCreate, setShowCreate] = useState(false);
+    const [creating, setCreating] = useState(false);
+
+    // Create form state
+    const [slug, setSlug] = useState("");
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+    const [category, setCategory] = useState("general");
+    const [platforms, setPlatforms] = useState("");
+    const [createError, setCreateError] = useState("");
+
+    const load = () => {
+        setLoading(true);
+        getAdminTemplates().then((res) => {
+            if (res.success && res.data) setTemplates(res.data.items);
+            setLoading(false);
+        });
+    };
+
+    useEffect(() => { load(); }, []);
+
+    const handleCreate = async () => {
+        setCreating(true);
+        setCreateError("");
+        const res = await createAdminTemplate({
+            slug,
+            name,
+            description,
+            category,
+            platforms: platforms.split(",").map((p) => p.trim()).filter(Boolean),
+        });
+        if (res.success) {
+            setShowCreate(false);
+            setSlug(""); setName(""); setDescription(""); setCategory("general"); setPlatforms("");
+            load();
+        } else {
+            setCreateError(res.error ?? "Failed to create template.");
+        }
+        setCreating(false);
+    };
+
+    return (
+        <div className="p-8 max-w-6xl mx-auto space-y-8">
+            {/* Header */}
+            <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                    <LayoutTemplate className="w-6 h-6 text-teal-600" />
+                    <div>
+                        <h1 className="text-2xl font-bold">Templates</h1>
+                        <p className="text-sm text-muted-foreground">Manage the automation template catalog.</p>
+                    </div>
+                </div>
+                <button
+                    onClick={() => setShowCreate(true)}
+                    className="flex items-center gap-2 bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg font-medium transition-colors shadow-sm"
+                >
+                    <Plus className="w-4 h-4" />
+                    New Template
+                </button>
+            </div>
+
+            {/* Create modal */}
+            {showCreate && (
+                <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+                    <div className="bg-background rounded-2xl border border-border shadow-xl w-full max-w-md p-6 space-y-4">
+                        <h2 className="text-lg font-bold">Create Template</h2>
+
+                        {[
+                            { label: "Slug", value: slug, set: setSlug, placeholder: "welcome-bot", required: true },
+                            { label: "Name", value: name, set: setName, placeholder: "Welcome Bot", required: true },
+                        ].map(({ label, value, set, placeholder, required }) => (
+                            <div key={label} className="space-y-1">
+                                <label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                                    {label}{required && <span className="text-red-500 ml-0.5">*</span>}
+                                </label>
+                                <input
+                                    className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
+                                    placeholder={placeholder}
+                                    value={value}
+                                    onChange={(e) => set(e.target.value)}
+                                />
+                            </div>
+                        ))}
+
+                        <div className="space-y-1">
+                            <label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                                Description
+                            </label>
+                            <textarea
+                                className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-teal-500 min-h-[60px]"
+                                placeholder="Describe what this template does..."
+                                value={description}
+                                onChange={(e) => setDescription(e.target.value)}
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-3">
+                            <div className="space-y-1">
+                                <label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                                    Category
+                                </label>
+                                <select
+                                    className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
+                                    value={category}
+                                    onChange={(e) => setCategory(e.target.value)}
+                                >
+                                    {["general", "lead_generation", "customer_support", "sales", "onboarding"].map((c) => (
+                                        <option key={c} value={c}>{c}</option>
+                                    ))}
+                                </select>
+                            </div>
+                            <div className="space-y-1">
+                                <label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                                    Platforms (comma-sep)
+                                </label>
+                                <input
+                                    className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
+                                    placeholder="whatsapp, meta"
+                                    value={platforms}
+                                    onChange={(e) => setPlatforms(e.target.value)}
+                                />
+                            </div>
+                        </div>
+
+                        {createError && (
+                            <p className="text-xs text-red-600">{createError}</p>
+                        )}
+
+                        <div className="flex gap-2 pt-2">
+                            <button
+                                onClick={() => { setShowCreate(false); setCreateError(""); }}
+                                className="flex-1 py-2 rounded-lg border border-border text-sm font-medium hover:bg-muted transition-colors"
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                onClick={handleCreate}
+                                disabled={creating || !slug || !name}
+                                className="flex-1 flex items-center justify-center gap-2 py-2 rounded-lg bg-teal-600 hover:bg-teal-700 text-white text-sm font-medium disabled:opacity-50 transition-colors"
+                            >
+                                {creating ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
+                                Create
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Templates table */}
+            {loading ? (
+                <div className="flex items-center justify-center py-20">
+                    <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
+                </div>
+            ) : templates.length === 0 ? (
+                <div className="text-center py-20 border-2 border-dashed border-border rounded-2xl text-muted-foreground">
+                    No templates yet. Create one to get started.
+                </div>
+            ) : (
+                <div className="rounded-xl border border-border overflow-hidden">
+                    <table className="w-full text-sm">
+                        <thead className="bg-muted/50 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                            <tr>
+                                <th className="px-4 py-3 text-left">Name</th>
+                                <th className="px-4 py-3 text-left">Slug</th>
+                                <th className="px-4 py-3 text-left">Category</th>
+                                <th className="px-4 py-3 text-left">Status</th>
+                                <th className="px-4 py-3 text-left">Featured</th>
+                                <th className="px-4 py-3 text-left">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-border">
+                            {templates.map((t) => (
+                                <tr key={t.id} className="hover:bg-muted/30 transition-colors">
+                                    <td className="px-4 py-3 font-medium">{t.name}</td>
+                                    <td className="px-4 py-3 font-mono text-xs text-muted-foreground">{t.slug}</td>
+                                    <td className="px-4 py-3 text-muted-foreground">{t.category}</td>
+                                    <td className="px-4 py-3"><StatusBadge active={t.is_active} /></td>
+                                    <td className="px-4 py-3">
+                                        {t.is_featured && <Star className="w-4 h-4 text-amber-500 fill-current" />}
+                                    </td>
+                                    <td className="px-4 py-3">
+                                        <Link
+                                            href={`/admin/templates/${t.id}`}
+                                            className="text-teal-600 hover:text-teal-700 font-medium"
+                                        >
+                                            Manage →
+                                        </Link>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+        </div>
+    );
+}

frontend/src/app/(dashboard)/automations/[id]/NodeConfigPanel.tsx

@@ -0,0 +1,323 @@
+"use client";
+
+import { Bot, Send, User, Tag, Database, GitBranch, Clock, Info, X } from "lucide-react";
+import type { BuilderNode } from "@/lib/automations-api";
+import { cn } from "@/lib/utils";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+interface LabeledFieldProps {
+    label: string;
+    required?: boolean;
+    children: React.ReactNode;
+}
+
+function LabeledField({ label, required, children }: LabeledFieldProps) {
+    return (
+        <div className="space-y-1.5">
+            <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                {label}
+                {required && <span className="text-red-500 ml-1">*</span>}
+            </label>
+            {children}
+        </div>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Per-type config forms
+// ---------------------------------------------------------------------------
+
+function AiReplyConfig({
+    config,
+    onChange,
+}: {
+    config: Record<string, any>;
+    onChange: (updated: Record<string, any>) => void;
+}) {
+    const tasks: string[] = Array.isArray(config.tasks) ? config.tasks : [];
+
+    const addTask = () => onChange({ ...config, tasks: [...tasks, ""] });
+    const removeTask = (i: number) =>
+        onChange({ ...config, tasks: tasks.filter((_, idx) => idx !== i) });
+    const updateTask = (i: number, val: string) =>
+        onChange({ ...config, tasks: tasks.map((t, idx) => (idx === i ? val : t)) });
+
+    return (
+        <div className="space-y-4">
+            <LabeledField label="Goal" required>
+                <textarea
+                    className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-teal-500 min-h-[80px]"
+                    placeholder="e.g. Greet the user and collect contact info"
+                    value={config.goal ?? ""}
+                    onChange={(e) => onChange({ ...config, goal: e.target.value })}
+                />
+            </LabeledField>
+
+            <LabeledField label="Tasks (optional)">
+                <div className="space-y-2">
+                    {tasks.map((task, i) => (
+                        <div key={i} className="flex gap-2">
+                            <input
+                                className="flex-1 rounded-lg border border-border bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
+                                placeholder={`Task ${i + 1}`}
+                                value={task}
+                                onChange={(e) => updateTask(i, e.target.value)}
+                            />
+                            <button
+                                onClick={() => removeTask(i)}
+                                className="p-1.5 rounded-md text-muted-foreground hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950 transition-colors"
+                            >
+                                <X className="w-3.5 h-3.5" />
+                            </button>
+                        </div>
+                    ))}
+                    <button
+                        onClick={addTask}
+                        className="text-xs text-teal-600 hover:text-teal-700 font-medium"
+                    >
+                        + Add task
+                    </button>
+                </div>
+            </LabeledField>
+
+            <LabeledField label="Extra Instructions (optional)">
+                <textarea
+                    className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-teal-500 min-h-[60px]"
+                    placeholder="Any additional context for the AI..."
+                    value={config.extra_instructions ?? ""}
+                    onChange={(e) => onChange({ ...config, extra_instructions: e.target.value })}
+                />
+            </LabeledField>
+        </div>
+    );
+}
+
+function SendMessageConfig({
+    config,
+    onChange,
+}: {
+    config: Record<string, any>;
+    onChange: (updated: Record<string, any>) => void;
+}) {
+    return (
+        <LabeledField label="Message Content" required>
+            <textarea
+                className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-teal-500 min-h-[120px]"
+                placeholder="Enter the message to send..."
+                value={config.content ?? ""}
+                onChange={(e) => onChange({ ...config, content: e.target.value })}
+            />
+        </LabeledField>
+    );
+}
+
+function HumanHandoverConfig({
+    config,
+    onChange,
+}: {
+    config: Record<string, any>;
+    onChange: (updated: Record<string, any>) => void;
+}) {
+    return (
+        <LabeledField label="Announcement Message (optional)">
+            <input
+                className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
+                placeholder="e.g. Transferring you to a human agent..."
+                value={config.message ?? ""}
+                onChange={(e) => onChange({ ...config, message: e.target.value })}
+            />
+        </LabeledField>
+    );
+}
+
+function TagContactConfig({
+    config,
+    onChange,
+}: {
+    config: Record<string, any>;
+    onChange: (updated: Record<string, any>) => void;
+}) {
+    return (
+        <LabeledField label="Tag" required>
+            <input
+                className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
+                placeholder="e.g. qualified, interested, vip"
+                value={config.tag ?? ""}
+                onChange={(e) => onChange({ ...config, tag: e.target.value })}
+            />
+        </LabeledField>
+    );
+}
+
+function ZohoUpsertConfig() {
+    return (
+        <div className="flex items-start gap-2 p-3 rounded-lg bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-800 text-sm text-amber-800 dark:text-amber-300">
+            <Info className="w-4 h-4 shrink-0 mt-0.5" />
+            <p>
+                Contact data will be synced to your connected Zoho CRM using the workspace lead
+                mapping. Ensure Zoho integration is configured in Settings.
+            </p>
+        </div>
+    );
+}
+
+function ComingSoonConfig({ nodeType }: { nodeType: string }) {
+    return (
+        <div className="flex items-start gap-2 p-3 rounded-lg bg-gray-50 dark:bg-gray-900/40 border border-border text-sm text-muted-foreground">
+            <Info className="w-4 h-4 shrink-0 mt-0.5" />
+            <p>
+                <strong>{nodeType}</strong> is coming soon and cannot be used in published
+                automations yet. You can add it to the canvas for planning purposes.
+            </p>
+        </div>
+    );
+}
+
+function TriggerConfig({
+    config,
+    onChange,
+}: {
+    config: Record<string, any>;
+    onChange: (updated: Record<string, any>) => void;
+}) {
+    return (
+        <LabeledField label="Keywords (optional)">
+            <input
+                className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
+                placeholder="hello, start, hi (comma-separated)"
+                value={(config.keywords ?? []).join(", ")}
+                onChange={(e) => {
+                    const kw = e.target.value
+                        .split(",")
+                        .map((k) => k.trim())
+                        .filter(Boolean);
+                    onChange({ ...config, keywords: kw });
+                }}
+            />
+            <p className="text-xs text-muted-foreground">
+                Leave empty to trigger on any inbound message.
+            </p>
+        </LabeledField>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// NodeConfigPanel
+// ---------------------------------------------------------------------------
+
+interface NodeConfigPanelProps {
+    node: BuilderNode | null;
+    onClose: () => void;
+    onUpdateConfig: (nodeId: string, config: Record<string, any>) => void;
+}
+
+const NODE_TYPE_ICONS: Record<string, React.ReactNode> = {
+    AI_REPLY: <Bot className="w-4 h-4" />,
+    SEND_MESSAGE: <Send className="w-4 h-4" />,
+    HUMAN_HANDOVER: <User className="w-4 h-4" />,
+    TAG_CONTACT: <Tag className="w-4 h-4" />,
+    ZOHO_UPSERT_LEAD: <Database className="w-4 h-4" />,
+    CONDITION: <GitBranch className="w-4 h-4" />,
+    WAIT_DELAY: <Clock className="w-4 h-4" />,
+    MESSAGE_INBOUND: <Bot className="w-4 h-4" />,
+    LEAD_AD_SUBMIT: <Bot className="w-4 h-4" />,
+};
+
+const NODE_TYPE_LABELS: Record<string, string> = {
+    AI_REPLY: "AI Reply",
+    SEND_MESSAGE: "Send Message",
+    HUMAN_HANDOVER: "Human Handover",
+    TAG_CONTACT: "Tag Contact",
+    ZOHO_UPSERT_LEAD: "Zoho: Upsert Lead",
+    CONDITION: "Condition",
+    WAIT_DELAY: "Wait / Delay",
+    MESSAGE_INBOUND: "Inbound Message",
+    LEAD_AD_SUBMIT: "Lead Ad Submission",
+};
+
+export default function NodeConfigPanel({ node, onClose, onUpdateConfig }: NodeConfigPanelProps) {
+    if (!node) {
+        return (
+            <div className="w-72 flex flex-col border-l border-border bg-background/80 items-center justify-center text-center px-6">
+                <div className="p-3 rounded-full bg-muted mb-3">
+                    <Info className="w-6 h-6 text-muted-foreground" />
+                </div>
+                <p className="text-sm font-medium text-muted-foreground">
+                    Select a node to configure it
+                </p>
+            </div>
+        );
+    }
+
+    const nodeType = node.data.nodeType;
+    const config = node.data.config ?? {};
+    const isTrigger = node.type === "triggerNode";
+
+    const handleChange = (updated: Record<string, any>) => {
+        onUpdateConfig(node.id, updated);
+    };
+
+    return (
+        <div className="w-72 flex flex-col border-l border-border bg-background overflow-y-auto">
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+                <div className="flex items-center gap-2">
+                    <span className="text-muted-foreground">
+                        {NODE_TYPE_ICONS[nodeType] ?? <Bot className="w-4 h-4" />}
+                    </span>
+                    <span className="text-sm font-semibold">
+                        {NODE_TYPE_LABELS[nodeType] ?? nodeType}
+                    </span>
+                    {isTrigger && (
+                        <span className="text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded bg-teal-100 dark:bg-teal-900 text-teal-600">
+                            Trigger
+                        </span>
+                    )}
+                </div>
+                <button
+                    onClick={onClose}
+                    className="p-1 rounded-md hover:bg-muted transition-colors text-muted-foreground"
+                >
+                    <X className="w-4 h-4" />
+                </button>
+            </div>
+
+            {/* Config body */}
+            <div className="px-4 py-4 flex-1 space-y-4">
+                {nodeType === "AI_REPLY" && (
+                    <AiReplyConfig config={config} onChange={handleChange} />
+                )}
+                {nodeType === "SEND_MESSAGE" && (
+                    <SendMessageConfig config={config} onChange={handleChange} />
+                )}
+                {nodeType === "HUMAN_HANDOVER" && (
+                    <HumanHandoverConfig config={config} onChange={handleChange} />
+                )}
+                {nodeType === "TAG_CONTACT" && (
+                    <TagContactConfig config={config} onChange={handleChange} />
+                )}
+                {nodeType === "ZOHO_UPSERT_LEAD" && <ZohoUpsertConfig />}
+                {(nodeType === "CONDITION" || nodeType === "WAIT_DELAY") && (
+                    <ComingSoonConfig nodeType={NODE_TYPE_LABELS[nodeType] ?? nodeType} />
+                )}
+                {isTrigger && (nodeType === "MESSAGE_INBOUND") && (
+                    <TriggerConfig config={config} onChange={handleChange} />
+                )}
+                {isTrigger && nodeType === "LEAD_AD_SUBMIT" && (
+                    <div className="text-sm text-muted-foreground">
+                        Triggered automatically when a Meta Lead Ad form is submitted. No
+                        configuration required.
+                    </div>
+                )}
+            </div>
+
+            {/* Node ID (debug) */}
+            <div className="px-4 py-2 border-t border-border">
+                <p className="text-[10px] text-muted-foreground/50 font-mono truncate">id: {node.id}</p>
+            </div>
+        </div>
+    );
+}

frontend/src/app/(dashboard)/automations/[id]/NodePalette.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { useCatalog, type CatalogEntry } from "@/lib/catalog";
+import { Zap, Bot, Send, User, Tag, Database, GitBranch, Clock, GripVertical } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// ---------------------------------------------------------------------------
+// Icon map for catalog entries
+// ---------------------------------------------------------------------------
+
+const ICON_MAP: Record<string, React.ReactNode> = {
+    bot: <Bot className="w-4 h-4" />,
+    send: <Send className="w-4 h-4" />,
+    user: <User className="w-4 h-4" />,
+    tag: <Tag className="w-4 h-4" />,
+    database: <Database className="w-4 h-4" />,
+    "git-branch": <GitBranch className="w-4 h-4" />,
+    clock: <Clock className="w-4 h-4" />,
+    message: <Zap className="w-4 h-4" />,
+    zap: <Zap className="w-4 h-4" />,
+};
+
+// ---------------------------------------------------------------------------
+// DraggablePaletteItem
+// ---------------------------------------------------------------------------
+
+interface PaletteItemProps {
+    nodeType: string;
+    label: string;
+    iconHint: string;
+    comingSoon?: boolean;
+    isTrigger?: boolean;
+    hasTrigger?: boolean;
+}
+
+function PaletteItem({
+    nodeType,
+    label,
+    iconHint,
+    comingSoon,
+    isTrigger,
+    hasTrigger,
+}: PaletteItemProps) {
+    const icon = ICON_MAP[iconHint] ?? <Bot className="w-4 h-4" />;
+    const disabled = isTrigger && hasTrigger;
+
+    const onDragStart = (e: React.DragEvent) => {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData(
+            "application/reactflow-node",
+            JSON.stringify({ nodeType, isTrigger })
+        );
+    };
+
+    return (
+        <div
+            draggable={!disabled}
+            onDragStart={onDragStart}
+            className={cn(
+                "flex items-center gap-2.5 px-3 py-2 rounded-lg border transition-colors cursor-grab active:cursor-grabbing select-none",
+                disabled
+                    ? "opacity-40 cursor-not-allowed border-border bg-card"
+                    : "border-border bg-card hover:border-teal-400 hover:bg-teal-50 dark:hover:bg-teal-950/40"
+            )}
+        >
+            <GripVertical className="w-3 h-3 text-muted-foreground/50 shrink-0" />
+            <span className="text-foreground/70">{icon}</span>
+            <span className="text-sm font-medium text-foreground flex-1 truncate">{label}</span>
+            {comingSoon && (
+                <span className="text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-500 shrink-0">
+                    Soon
+                </span>
+            )}
+            {disabled && (
+                <span className="text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded bg-teal-100 dark:bg-teal-900 text-teal-600 shrink-0">
+                    Added
+                </span>
+            )}
+        </div>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// NodePalette
+// ---------------------------------------------------------------------------
+
+interface NodePaletteProps {
+    hasTrigger: boolean;
+}
+
+export default function NodePalette({ hasTrigger }: NodePaletteProps) {
+    const { data: nodeTypes } = useCatalog<CatalogEntry[]>("automation-node-types");
+    const { data: triggerTypes } = useCatalog<CatalogEntry[]>("automation-trigger-types");
+
+    return (
+        <div className="w-64 flex flex-col border-r border-border bg-background/80 overflow-y-auto">
+            <div className="px-4 py-3 border-b border-border">
+                <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                    Node Palette
+                </p>
+                <p className="text-xs text-muted-foreground mt-0.5">Drag nodes onto the canvas</p>
+            </div>
+
+            {/* Triggers */}
+            <div className="px-3 py-3 space-y-1.5">
+                <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground px-1 mb-2">
+                    Triggers
+                </p>
+                {triggerTypes?.map((t) => (
+                    <PaletteItem
+                        key={t.key}
+                        nodeType={t.key}
+                        label={t.label}
+                        iconHint={t.icon_hint ?? "zap"}
+                        isTrigger
+                        hasTrigger={hasTrigger}
+                    />
+                )) ?? (
+                    <div className="space-y-1.5">
+                        <PaletteItem
+                            nodeType="MESSAGE_INBOUND"
+                            label="Inbound Message"
+                            iconHint="message"
+                            isTrigger
+                            hasTrigger={hasTrigger}
+                        />
+                        <PaletteItem
+                            nodeType="LEAD_AD_SUBMIT"
+                            label="Lead Ad Submission"
+                            iconHint="zap"
+                            isTrigger
+                            hasTrigger={hasTrigger}
+                        />
+                    </div>
+                )}
+            </div>
+
+            {/* Divider */}
+            <div className="mx-3 border-t border-border" />
+
+            {/* Action Nodes */}
+            <div className="px-3 py-3 space-y-1.5">
+                <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground px-1 mb-2">
+                    Actions
+                </p>
+                {nodeTypes?.map((n) => (
+                    <PaletteItem
+                        key={n.key}
+                        nodeType={n.key}
+                        label={n.label}
+                        iconHint={n.icon_hint ?? "bot"}
+                        comingSoon={n.runtime_supported === false}
+                    />
+                )) ?? (
+                    <div className="space-y-1.5">
+                        {[
+                            { key: "AI_REPLY", label: "AI Reply", iconHint: "bot" },
+                            { key: "SEND_MESSAGE", label: "Send Message", iconHint: "send" },
+                            { key: "HUMAN_HANDOVER", label: "Human Handover", iconHint: "user" },
+                            { key: "TAG_CONTACT", label: "Tag Contact", iconHint: "tag" },
+                            { key: "ZOHO_UPSERT_LEAD", label: "Zoho: Upsert Lead", iconHint: "database" },
+                            { key: "CONDITION", label: "Condition", iconHint: "git-branch", comingSoon: true },
+                            { key: "WAIT_DELAY", label: "Wait / Delay", iconHint: "clock", comingSoon: true },
+                        ].map((n) => (
+                            <PaletteItem
+                                key={n.key}
+                                nodeType={n.key}
+                                label={n.label}
+                                iconHint={n.iconHint}
+                                comingSoon={"comingSoon" in n ? n.comingSoon : false}
+                            />
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

frontend/src/app/(dashboard)/automations/[id]/nodes/ActionNode.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import { memo } from "react";
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+import {
+    Bot,
+    Send,
+    User,
+    Tag,
+    Database,
+    GitBranch,
+    Clock,
+    X,
+    AlertCircle,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// ---------------------------------------------------------------------------
+// Node type metadata
+// ---------------------------------------------------------------------------
+
+interface NodeMeta {
+    label: string;
+    icon: React.ReactNode;
+    colorClass: string; // Tailwind border + header color
+    summary: (config: Record<string, any>) => string | null;
+    comingSoon?: boolean;
+}
+
+const NODE_META: Record<string, NodeMeta> = {
+    AI_REPLY: {
+        label: "AI Reply",
+        icon: <Bot className="w-4 h-4" />,
+        colorClass: "border-violet-400",
+        summary: (c) => c.goal ? `Goal: ${String(c.goal).substring(0, 40)}` : null,
+    },
+    SEND_MESSAGE: {
+        label: "Send Message",
+        icon: <Send className="w-4 h-4" />,
+        colorClass: "border-blue-400",
+        summary: (c) => c.content ? `"${String(c.content).substring(0, 40)}"` : null,
+    },
+    HUMAN_HANDOVER: {
+        label: "Human Handover",
+        icon: <User className="w-4 h-4" />,
+        colorClass: "border-orange-400",
+        summary: () => "Route to human agent",
+    },
+    TAG_CONTACT: {
+        label: "Tag Contact",
+        icon: <Tag className="w-4 h-4" />,
+        colorClass: "border-pink-400",
+        summary: (c) => c.tag ? `Tag: ${c.tag}` : null,
+    },
+    ZOHO_UPSERT_LEAD: {
+        label: "Zoho: Upsert Lead",
+        icon: <Database className="w-4 h-4" />,
+        colorClass: "border-amber-400",
+        summary: () => "Sync to Zoho CRM",
+    },
+    CONDITION: {
+        label: "Condition",
+        icon: <GitBranch className="w-4 h-4" />,
+        colorClass: "border-gray-400",
+        summary: () => "Branch logic",
+        comingSoon: true,
+    },
+    WAIT_DELAY: {
+        label: "Wait / Delay",
+        icon: <Clock className="w-4 h-4" />,
+        colorClass: "border-gray-400",
+        summary: () => "Pause flow",
+        comingSoon: true,
+    },
+};
+
+const FALLBACK_META: NodeMeta = {
+    label: "Action",
+    icon: <Bot className="w-4 h-4" />,
+    colorClass: "border-gray-400",
+    summary: () => null,
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+interface ActionNodeData {
+    nodeType: string;
+    config: Record<string, any>;
+    hasError?: boolean;
+    onDelete?: (id: string) => void;
+    [key: string]: unknown;
+}
+
+function ActionNode({ id, data, selected }: NodeProps) {
+    const nodeType = (data as ActionNodeData).nodeType;
+    const config = (data as ActionNodeData).config ?? {};
+    const hasError = (data as ActionNodeData).hasError ?? false;
+    const onDelete = (data as ActionNodeData).onDelete;
+
+    const meta = NODE_META[nodeType] ?? FALLBACK_META;
+    const summaryText = meta.summary(config);
+
+    return (
+        <div
+            className={cn(
+                "relative group w-56 rounded-xl border-2 bg-card shadow-md transition-all",
+                hasError ? "border-red-500 shadow-red-100" : meta.colorClass,
+                selected ? "shadow-lg" : "",
+                "hover:shadow-lg"
+            )}
+        >
+            {/* Input handle */}
+            <Handle
+                type="target"
+                position={Position.Top}
+                className="!w-3 !h-3 !bg-foreground !border-2 !border-white"
+            />
+
+            {/* Delete button — appears on hover */}
+            {onDelete && (
+                <button
+                    onClick={() => onDelete(id)}
+                    className="absolute -top-2 -right-2 hidden group-hover:flex items-center justify-center w-5 h-5 rounded-full bg-red-500 text-white shadow-sm hover:bg-red-600 transition-colors z-10"
+                    title="Remove node"
+                >
+                    <X className="w-3 h-3" />
+                </button>
+            )}
+
+            {/* Body */}
+            <div className="px-3 py-3 space-y-1.5">
+                <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+                        {meta.icon}
+                        <span>{meta.label}</span>
+                    </div>
+                    {meta.comingSoon && (
+                        <span className="text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-500 shrink-0">
+                            Soon
+                        </span>
+                    )}
+                </div>
+
+                {summaryText && (
+                    <p className="text-xs text-muted-foreground truncate pl-6">{summaryText}</p>
+                )}
+
+                {hasError && (
+                    <div className="flex items-center gap-1 text-xs text-red-600">
+                        <AlertCircle className="w-3 h-3 shrink-0" />
+                        <span>Configuration required</span>
+                    </div>
+                )}
+            </div>
+
+            {/* Output handle */}
+            <Handle
+                type="source"
+                position={Position.Bottom}
+                className="!w-3 !h-3 !bg-foreground !border-2 !border-white"
+            />
+        </div>
+    );
+}
+
+export default memo(ActionNode);

frontend/src/app/(dashboard)/automations/[id]/nodes/TriggerNode.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { memo } from "react";
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+import { Zap, MessageSquare, MousePointerClick } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const TRIGGER_ICONS: Record<string, React.ReactNode> = {
+    MESSAGE_INBOUND: <MessageSquare className="w-4 h-4" />,
+    LEAD_AD_SUBMIT: <MousePointerClick className="w-4 h-4" />,
+};
+
+const TRIGGER_LABELS: Record<string, string> = {
+    MESSAGE_INBOUND: "Inbound Message",
+    LEAD_AD_SUBMIT: "Lead Ad Submission",
+};
+
+const PLATFORM_LABELS: Record<string, string> = {
+    whatsapp: "WhatsApp",
+    meta: "Meta (Messenger / IG)",
+};
+
+function TriggerNode({ data, selected }: NodeProps) {
+    const nodeType = data.nodeType as string;
+    const platform = data.platform as string | undefined;
+
+    return (
+        <div
+            className={cn(
+                "relative w-56 rounded-xl border-2 bg-card shadow-md transition-shadow",
+                selected ? "border-teal-500 shadow-teal-200" : "border-teal-400",
+                "hover:shadow-lg"
+            )}
+        >
+            {/* Header */}
+            <div className="flex items-center gap-2 px-3 py-2 bg-teal-50 dark:bg-teal-950 rounded-t-xl border-b border-teal-200 dark:border-teal-800">
+                <div className="p-1 rounded-md bg-teal-600 text-white">
+                    <Zap className="w-3 h-3" />
+                </div>
+                <span className="text-xs font-semibold uppercase tracking-wide text-teal-700 dark:text-teal-300">
+                    Trigger
+                </span>
+            </div>
+
+            {/* Body */}
+            <div className="px-3 py-3 space-y-1">
+                <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+                    {TRIGGER_ICONS[nodeType] ?? <Zap className="w-4 h-4" />}
+                    <span>{TRIGGER_LABELS[nodeType] ?? nodeType}</span>
+                </div>
+                {platform && (
+                    <p className="text-xs text-muted-foreground pl-6">
+                        {PLATFORM_LABELS[platform] ?? platform}
+                    </p>
+                )}
+            </div>
+
+            {/* Output handle */}
+            <Handle
+                type="source"
+                position={Position.Bottom}
+                className="!w-3 !h-3 !bg-teal-500 !border-2 !border-white"
+            />
+        </div>
+    );
+}
+
+export default memo(TriggerNode);

frontend/src/app/(dashboard)/automations/[id]/page.tsx

@@ -1,222 +1,850 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { useParams, useRouter } from "next/navigation";
+import ReactFlow, {
+    Background,
+    Controls,
+    MiniMap,
+    addEdge,
+    useNodesState,
+    useEdgesState,
+    type Node,
+    type Edge,
+    type OnConnect,
+    type NodeTypes,
+    BackgroundVariant,
+    ReactFlowProvider,
+    useReactFlow,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+
 import {
-    Zap,
     ArrowLeft,
-    Save,
-    Send,
-    Rocket,
-    Settings2,
-    FileJson,
     CheckCircle2,
-    Loader2
+    AlertTriangle,
+    Loader2,
+    Play,
+    Rocket,
+    RotateCcw,
+    ChevronDown,
+    X,
+    Save,
+    Clock,
 } from "lucide-react";
 import Link from "next/link";
-import { useParams } from "next/navigation";
 import { cn } from "@/lib/utils";
+import {
+    getDraft,
+    saveDraft,
+    validateDraft,
+    publishDraft,
+    getVersions,
+    rollbackToVersion,
+    simulate,
+    getFlow,
+    type BuilderGraph,
+    type BuilderNode,
+    type BuilderEdge,
+    type ValidationError,
+    type FlowVersion,
+    type SimulateStep,
+} from "@/lib/automations-api";
 
-export default function FlowDetailPage() {
-    const params = useParams();
-    const id = params.id as string;
-    const [flow, setFlow] = useState<any>(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [showAdvanced, setShowAdvanced] = useState(false);
-    const [isPublishing, setIsPublishing] = useState(false);
-    const [status, setStatus] = useState<string>("");
+import TriggerNode from "./nodes/TriggerNode";
+import ActionNode from "./nodes/ActionNode";
+import NodePalette from "./NodePalette";
+import NodeConfigPanel from "./NodeConfigPanel";
 
-    useEffect(() => {
-        const fetchFlow = async () => {
-            try {
-                const res = await fetch(`/api/v1/automations/${id}`, {
-                    headers: { 'X-Workspace-ID': 'dummy' } // In real app, get from context
-                });
-                const json = await res.json();
-                if (json.success) setFlow(json.data);
-            } catch (err) {
-                console.error("Failed to fetch flow", err);
-            } finally {
-                setIsLoading(false);
-            }
-        };
-        if (id) fetchFlow();
-    }, [id]);
+// ---------------------------------------------------------------------------
+// React Flow node types registration
+// ---------------------------------------------------------------------------
+
+const nodeTypes: NodeTypes = {
+    triggerNode: TriggerNode,
+    actionNode: ActionNode,
+};
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function builderNodesToRF(
+    builderNodes: BuilderNode[],
+    errorNodeIds: Set<string>,
+    onDelete: (id: string) => void
+): Node[] {
+    return builderNodes.map((n) => ({
+        id: n.id,
+        type: n.type,
+        position: n.position,
+        data: {
+            ...n.data,
+            hasError: errorNodeIds.has(n.id),
+            onDelete: n.type === "actionNode" ? onDelete : undefined,
+        },
+    }));
+}
+
+function rfNodesToBuilder(rfNodes: Node[]): BuilderNode[] {
+    return rfNodes.map((n) => ({
+        id: n.id,
+        type: n.type as "triggerNode" | "actionNode",
+        position: n.position,
+        data: {
+            nodeType: n.data.nodeType as string,
+            platform: n.data.platform as string | undefined,
+            config: (n.data.config as Record<string, any>) ?? {},
+        },
+    }));
+}
+
+function rfEdgesToBuilder(rfEdges: Edge[]): BuilderEdge[] {
+    return rfEdges.map((e) => ({
+        id: e.id,
+        source: e.source,
+        target: e.target,
+        sourceHandle: e.sourceHandle ?? undefined,
+    }));
+}
+
+function generateNodeId(): string {
+    return `node-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+}
+
+// ---------------------------------------------------------------------------
+// Save status badge
+// ---------------------------------------------------------------------------
+
+type SaveStatus = "idle" | "saving" | "saved" | "error";
+
+function SaveBadge({ status }: { status: SaveStatus }) {
+    if (status === "idle") return null;
+    return (
+        <div
+            className={cn(
+                "flex items-center gap-1.5 text-xs font-medium px-2 py-1 rounded-full",
+                status === "saving" && "text-muted-foreground bg-muted",
+                status === "saved" && "text-teal-700 bg-teal-100 dark:bg-teal-950 dark:text-teal-300",
+                status === "error" && "text-red-700 bg-red-100 dark:bg-red-950 dark:text-red-300"
+            )}
+        >
+            {status === "saving" && <Loader2 className="w-3 h-3 animate-spin" />}
+            {status === "saved" && <CheckCircle2 className="w-3 h-3" />}
+            {status === "error" && <AlertTriangle className="w-3 h-3" />}
+            {status === "saving" ? "Saving…" : status === "saved" ? "Saved" : "Save failed"}
+        </div>
+    );
+}
 
-    const handlePublish = async () => {
-        setIsPublishing(true);
+// ---------------------------------------------------------------------------
+// Simulate Drawer
+// ---------------------------------------------------------------------------
+
+function SimulateDrawer({
+    flowId,
+    onClose,
+}: {
+    flowId: string;
+    onClose: () => void;
+}) {
+    const [mockPayload, setMockPayload] = useState('{"content": "Hello", "sender": "+1234567890"}');
+    const [result, setResult] = useState<{
+        valid: boolean;
+        steps: SimulateStep[];
+        dispatch_blocked: boolean;
+        message: string;
+        errors?: ValidationError[];
+    } | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [payloadError, setPayloadError] = useState("");
+
+    const run = async () => {
+        setLoading(true);
+        setPayloadError("");
+        let parsed: Record<string, any> | undefined;
         try {
-            const res = await fetch(`/api/v1/automations/${id}/publish`, { method: 'POST' });
-            const json = await res.json();
-            if (json.success) setStatus("published");
-        } catch (err) {
-            console.error("Publish failed", err);
-        } finally {
-            setIsPublishing(false);
+            parsed = JSON.parse(mockPayload);
+        } catch {
+            setPayloadError("Invalid JSON — fix the payload above.");
+            setLoading(false);
+            return;
         }
+        const res = await simulate(flowId, parsed);
+        if (res.success && res.data) setResult(res.data);
+        setLoading(false);
     };
 
-    if (isLoading) return (
-        <div className="flex items-center justify-center h-screen">
-            <Loader2 className="w-8 h-8 animate-spin text-teal-600" />
+    return (
+        <div className="absolute right-0 top-0 h-full w-96 bg-background border-l border-border shadow-xl z-30 flex flex-col">
+            <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+                <div className="flex items-center gap-2">
+                    <Play className="w-4 h-4 text-teal-600" />
+                    <span className="text-sm font-semibold">Simulate</span>
+                </div>
+                <button onClick={onClose} className="p-1 rounded hover:bg-muted text-muted-foreground">
+                    <X className="w-4 h-4" />
+                </button>
+            </div>
+
+            <div className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
+                <div className="space-y-2">
+                    <label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                        Mock Trigger Payload (JSON)
+                    </label>
+                    <textarea
+                        className="w-full rounded-lg border border-border bg-background px-3 py-2 text-xs font-mono resize-none focus:outline-none focus:ring-2 focus:ring-teal-500 min-h-[100px]"
+                        value={mockPayload}
+                        onChange={(e) => setMockPayload(e.target.value)}
+                    />
+                    {payloadError && <p className="text-xs text-red-500">{payloadError}</p>}
+                </div>
+
+                <button
+                    onClick={run}
+                    disabled={loading}
+                    className="w-full flex items-center justify-center gap-2 bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
+                >
+                    {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Play className="w-4 h-4" />}
+                    Run Simulation
+                </button>
+
+                {result && (
+                    <div className="space-y-3">
+                        {!result.valid && result.errors && (
+                            <div className="p-3 rounded-lg border border-red-200 bg-red-50 dark:bg-red-950/20 text-sm text-red-700 dark:text-red-300 space-y-1">
+                                <p className="font-semibold">Validation errors:</p>
+                                {result.errors.map((e, i) => (
+                                    <p key={i} className="text-xs">{e.node_id}: {e.message}</p>
+                                ))}
+                            </div>
+                        )}
+                        {result.valid && (
+                            <>
+                                <div className="flex items-center gap-2 text-xs text-teal-700 dark:text-teal-300 font-medium">
+                                    <CheckCircle2 className="w-3.5 h-3.5" />
+                                    No real messages sent — simulation mode
+                                </div>
+                                <div className="space-y-2">
+                                    {result.steps.map((step, i) => (
+                                        <div
+                                            key={i}
+                                            className="p-3 rounded-lg border border-border bg-card text-xs space-y-1"
+                                        >
+                                            <div className="flex items-center justify-between">
+                                                <span className="font-semibold text-foreground">
+                                                    {i + 1}. {step.node_type}
+                                                </span>
+                                                <span className="text-muted-foreground text-[10px] bg-muted px-1.5 py-0.5 rounded-full">
+                                                    blocked
+                                                </span>
+                                            </div>
+                                            <p className="text-muted-foreground">{step.description}</p>
+                                            {step.would_send && (
+                                                <p className="text-foreground italic">
+                                                    Would send: &ldquo;{step.would_send}&rdquo;
+                                                </p>
+                                            )}
+                                        </div>
+                                    ))}
+                                </div>
+                                <p className="text-xs text-muted-foreground">{result.message}</p>
+                            </>
+                        )}
+                    </div>
+                )}
+            </div>
         </div>
     );
+}
 
-    if (!flow) return <div className="p-8 text-center text-red-500 font-medium">Flow not found.</div>;
+// ---------------------------------------------------------------------------
+// Versions Dropdown
+// ---------------------------------------------------------------------------
 
-    const definition = flow.definition || {};
-    const nodes = definition.nodes || [];
-    const triggerNode = nodes.find((n: any) => n.type === 'TRIGGER');
-    const actionNodes = nodes.filter((n: any) => n.type !== 'TRIGGER');
+function VersionsDropdown({
+    flowId,
+    onRollback,
+}: {
+    flowId: string;
+    onRollback: (newVersionNumber: number) => void;
+}) {
+    const [open, setOpen] = useState(false);
+    const [versions, setVersions] = useState<FlowVersion[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [rolling, setRolling] = useState<string | null>(null);
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!open) return;
+        setLoading(true);
+        getVersions(flowId).then((res) => {
+            if (res.success && res.data) setVersions(res.data);
+            setLoading(false);
+        });
+    }, [open, flowId]);
+
+    useEffect(() => {
+        const handler = (e: MouseEvent) => {
+            if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, []);
+
+    const handleRollback = async (v: FlowVersion) => {
+        setRolling(v.id);
+        const res = await rollbackToVersion(flowId, v.id);
+        if (res.success && res.data) {
+            onRollback(res.data.new_version_number);
+        }
+        setRolling(null);
+        setOpen(false);
+    };
 
     return (
-        <div className="h-full flex flex-col bg-slate-50/50">
-            {/* Detail Header */}
-            <header className="bg-white border-b border-border p-4 sticky top-0 z-10 shadow-sm">
-                <div className="max-w-7xl mx-auto flex items-center justify-between">
-                    <div className="flex items-center gap-4">
-                        <Link
-                            href="/automations"
-                            className="p-2 hover:bg-slate-100 rounded-lg text-slate-500 transition-colors"
-                        >
-                            <ArrowLeft className="w-5 h-5" />
-                        </Link>
-                        <div>
-                            <div className="flex items-center gap-2">
-                                <h1 className="text-xl font-bold text-slate-900">{flow.name}</h1>
-                                <span className={cn(
-                                    "text-[10px] uppercase px-1.5 py-0.5 rounded-md font-bold",
-                                    flow.status === "published" || status === "published"
-                                        ? "bg-teal-100 text-teal-700"
-                                        : "bg-slate-200 text-slate-600"
-                                )}>
-                                    {status === "published" ? "published" : flow.status}
-                                </span>
-                            </div>
-                            <p className="text-sm text-muted-foreground">ID: {id}</p>
-                        </div>
-                    </div>
+        <div className="relative" ref={ref}>
+            <button
+                onClick={() => setOpen((o) => !o)}
+                className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border hover:border-teal-400 text-sm font-medium text-foreground transition-colors"
+            >
+                <Clock className="w-4 h-4" />
+                Versions
+                <ChevronDown className={cn("w-3.5 h-3.5 transition-transform", open && "rotate-180")} />
+            </button>
 
-                    <div className="flex items-center gap-3">
-                        <button className="flex items-center gap-2 px-4 py-2 text-slate-600 font-medium hover:bg-slate-100 rounded-lg transition-colors">
-                            <Save className="w-4 h-4" />
-                            Save Draft
-                        </button>
-                        <button
-                            onClick={handlePublish}
-                            disabled={isPublishing || flow.status === "published" || status === "published"}
-                            className={cn(
-                                "flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all shadow-sm",
-                                (flow.status === "published" || status === "published")
-                                    ? "bg-slate-100 text-slate-400 cursor-not-allowed"
-                                    : "bg-teal-600 hover:bg-teal-700 text-white"
-                            )}
-                        >
-                            {isPublishing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Rocket className="w-4 h-4" />}
-                            {(flow.status === "published" || status === "published") ? "Published" : "Publish Flow"}
-                        </button>
+            {open && (
+                <div className="absolute right-0 top-10 z-20 w-72 rounded-xl border border-border bg-background shadow-xl overflow-hidden">
+                    <div className="px-3 py-2.5 border-b border-border text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                        Published Versions
                     </div>
-                </div>
-            </header>
-
-            {/* Main Content Areas */}
-            <main className="flex-1 p-8 max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-3 gap-8">
-                {/* Summary View */}
-                <div className="lg:col-span-2 space-y-6">
-                    <div className="space-y-4">
-                        <h2 className="text-lg font-bold text-slate-800 flex items-center gap-2">
-                            <Zap className="w-5 h-5 text-teal-600" />
-                            Automation Summary
-                        </h2>
-
-                        {/* Trigger Card */}
-                        <div className="bg-white border border-border rounded-2xl p-6 shadow-sm ring-1 ring-teal-500/5">
-                            <div className="text-xs font-bold text-teal-600 uppercase tracking-widest mb-3">Trigger Event</div>
-                            <div className="flex items-center gap-4">
-                                <div className="p-3 bg-teal-50 rounded-xl text-teal-600">
-                                    <Zap className="w-6 h-6 fill-current" />
-                                </div>
-                                <div>
-                                    <h3 className="font-bold text-slate-900">{triggerNode?.config?.type?.replace('_', ' ') || 'Incoming Message'}</h3>
-                                    <p className="text-sm text-muted-foreground">Provider: {triggerNode?.config?.platform?.toUpperCase()}</p>
-                                </div>
-                            </div>
+                    {loading ? (
+                        <div className="flex items-center justify-center p-4">
+                            <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
                         </div>
-
-                        {/* Steps List */}
-                        <div className="space-y-3">
-                            <div className="text-xs font-bold text-slate-400 uppercase tracking-widest pl-1">Actions & Steps</div>
-                            {actionNodes.map((node: any, idx: number) => (
-                                <div key={node.id} className="bg-white border border-border rounded-2xl p-5 shadow-sm flex items-center gap-4 relative">
-                                    <div className="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center text-xs font-bold text-slate-500 border border-border">
-                                        {idx + 1}
-                                    </div>
-                                    <div className="flex-1">
-                                        <div className="font-bold text-slate-700 flex items-center gap-2 capitalize">
-                                            {node.type.replace('_', ' ').toLowerCase()}
-                                        </div>
-                                        <p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">
-                                            {node.type === 'AI_REPLY' ? 'Generates an AI response using Prompt Studio.' :
-                                                node.type === 'SEND_MESSAGE' ? (node.config?.text || 'Standard message intent.') :
-                                                    node.type === 'HUMAN_HANDOVER' ? 'Notifies a team member for takeover.' : 'Processes contact update.'}
-                                        </p>
+                    ) : versions.length === 0 ? (
+                        <div className="px-4 py-3 text-sm text-muted-foreground">
+                            No published versions yet.
+                        </div>
+                    ) : (
+                        <div className="max-h-60 overflow-y-auto divide-y divide-border">
+                            {versions.map((v) => (
+                                <div
+                                    key={v.id}
+                                    className="flex items-center justify-between px-3 py-2.5 hover:bg-muted/50"
+                                >
+                                    <div className="flex items-center gap-2">
+                                        <span className="text-sm font-medium">v{v.version_number}</span>
+                                        {v.is_active && (
+                                            <span className="text-[10px] bg-teal-100 dark:bg-teal-900 text-teal-600 dark:text-teal-300 px-1.5 py-0.5 rounded-full font-semibold uppercase tracking-wide">
+                                                Live
+                                            </span>
+                                        )}
+                                        <span className="text-xs text-muted-foreground">
+                                            {new Date(v.created_at).toLocaleDateString()}
+                                        </span>
                                     </div>
-                                    <button className="p-2 text-slate-300 hover:text-teal-600 transition-colors">
-                                        <Settings2 className="w-4 h-4" />
-                                    </button>
+                                    {!v.is_active && (
+                                        <button
+                                            onClick={() => handleRollback(v)}
+                                            disabled={rolling === v.id}
+                                            className="flex items-center gap-1 text-xs text-teal-600 hover:text-teal-700 font-medium disabled:opacity-50"
+                                        >
+                                            {rolling === v.id ? (
+                                                <Loader2 className="w-3 h-3 animate-spin" />
+                                            ) : (
+                                                <RotateCcw className="w-3 h-3" />
+                                            )}
+                                            Rollback
+                                        </button>
+                                    )}
                                 </div>
                             ))}
                         </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
 
-                        {/* Advanced Collapsible */}
-                        <div className="pt-4">
-                            <button
-                                onClick={() => setShowAdvanced(!showAdvanced)}
-                                className="text-sm text-slate-400 font-medium flex items-center gap-2 hover:text-slate-600 transition-colors"
-                            >
-                                <Settings2 className={cn("w-4 h-4 transition-transform", showAdvanced && "rotate-90")} />
-                                {showAdvanced ? "Hide Advanced Definition" : "View Advanced Definition (JSON)"}
-                            </button>
-
-                            {showAdvanced && (
-                                <div className="mt-4 bg-slate-900 rounded-2xl p-6 overflow-x-auto border border-slate-800 animate-in fade-in slide-in-from-top-4">
-                                    <pre className="text-xs font-mono text-teal-400">
-                                        {JSON.stringify(definition, null, 2)}
-                                    </pre>
-                                </div>
-                            )}
-                        </div>
+// ---------------------------------------------------------------------------
+// Main Canvas Editor (inner, needs ReactFlowProvider context)
+// ---------------------------------------------------------------------------
+
+function CanvasEditor({ flowId }: { flowId: string }) {
+    const router = useRouter();
+    const { screenToFlowPosition } = useReactFlow();
+
+    // Flow metadata
+    const [flowName, setFlowName] = useState("Loading…");
+
+    // React Flow state
+    const [rfNodes, setRfNodes, onNodesChange] = useNodesState([]);
+    const [rfEdges, setRfEdges, onEdgesChange] = useEdgesState([]);
+
+    // UI state
+    const [selectedNode, setSelectedNode] = useState<BuilderNode | null>(null);
+    const [saveStatus, setSaveStatus] = useState<SaveStatus>("idle");
+    const [validating, setValidating] = useState(false);
+    const [publishing, setPublishing] = useState(false);
+    const [errors, setErrors] = useState<ValidationError[]>([]);
+    const [publishResult, setPublishResult] = useState<{
+        success: boolean;
+        version_number?: number;
+        message?: string;
+    } | null>(null);
+    const [showSimulate, setShowSimulate] = useState(false);
+    const [loading, setLoading] = useState(true);
+
+    // Error node IDs set
+    const errorNodeIds = useMemo(
+        () => new Set(errors.map((e) => e.node_id)),
+        [errors]
+    );
+
+    // Does the canvas already have a trigger?
+    const hasTrigger = useMemo(
+        () => rfNodes.some((n) => n.type === "triggerNode"),
+        [rfNodes]
+    );
+
+    // ---------------------------------------------------------------------------
+    // Delete node handler
+    // ---------------------------------------------------------------------------
+
+    const handleDeleteNode = useCallback((nodeId: string) => {
+        setRfNodes((nds) => nds.filter((n) => n.id !== nodeId));
+        setRfEdges((eds) => eds.filter((e) => e.source !== nodeId && e.target !== nodeId));
+        setSelectedNode((prev) => (prev?.id === nodeId ? null : prev));
+    }, [setRfNodes, setRfEdges]);
+
+    // ---------------------------------------------------------------------------
+    // Load draft on mount
+    // ---------------------------------------------------------------------------
+
+    useEffect(() => {
+        let active = true;
+        async function load() {
+            const [flowRes, draftRes] = await Promise.all([
+                getFlow(flowId),
+                getDraft(flowId),
+            ]);
+
+            if (!active) return;
+
+            if (flowRes.success && flowRes.data) {
+                setFlowName(flowRes.data.name);
+            }
+
+            if (draftRes.success && draftRes.data?.builder_graph_json) {
+                const graph = draftRes.data.builder_graph_json;
+                const nodes = builderNodesToRF(graph.nodes, new Set(), handleDeleteNode);
+                setRfNodes(nodes);
+                setRfEdges(graph.edges as Edge[]);
+                // Restore validation errors if any
+                const errs = draftRes.data.last_validation_errors?.errors ?? [];
+                setErrors(errs);
+            }
+            setLoading(false);
+        }
+        load();
+        return () => { active = false; };
+    }, [flowId, setRfNodes, setRfEdges, handleDeleteNode]);
+
+    // ---------------------------------------------------------------------------
+    // Autosave (debounced)
+    // ---------------------------------------------------------------------------
+
+    const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const triggerAutosave = useCallback(
+        (nodes: Node[], edges: Edge[]) => {
+            if (saveTimer.current) clearTimeout(saveTimer.current);
+            setSaveStatus("saving");
+            saveTimer.current = setTimeout(async () => {
+                const graph: BuilderGraph = {
+                    nodes: rfNodesToBuilder(nodes),
+                    edges: rfEdgesToBuilder(edges),
+                };
+                const res = await saveDraft(flowId, graph);
+                setSaveStatus(res.success ? "saved" : "error");
+                // Reset to idle after 3s
+                setTimeout(() => setSaveStatus("idle"), 3000);
+            }, 2000);
+        },
+        [flowId]
+    );
+
+    const handleNodesChange: typeof onNodesChange = useCallback(
+        (changes) => {
+            onNodesChange(changes);
+            setRfNodes((nds) => {
+                triggerAutosave(nds, rfEdges);
+                return nds;
+            });
+        },
+        [onNodesChange, setRfNodes, triggerAutosave, rfEdges]
+    );
+
+    const handleEdgesChange: typeof onEdgesChange = useCallback(
+        (changes) => {
+            onEdgesChange(changes);
+            setRfEdges((eds) => {
+                triggerAutosave(rfNodes, eds);
+                return eds;
+            });
+        },
+        [onEdgesChange, setRfEdges, triggerAutosave, rfNodes]
+    );
+
+    // ---------------------------------------------------------------------------
+    // Connect handler
+    // ---------------------------------------------------------------------------
+
+    const onConnect: OnConnect = useCallback(
+        (connection) => {
+            const newEdges = addEdge({ ...connection, id: `e-${Date.now()}` }, rfEdges);
+            setRfEdges(newEdges);
+            triggerAutosave(rfNodes, newEdges);
+        },
+        [rfEdges, setRfEdges, rfNodes, triggerAutosave]
+    );
+
+    // ---------------------------------------------------------------------------
+    // Drop handler (from palette)
+    // ---------------------------------------------------------------------------
+
+    const onDrop: OnDrop = useCallback(
+        (event) => {
+            event.preventDefault();
+            const raw = event.dataTransfer.getData("application/reactflow-node");
+            if (!raw) return;
+            let parsed: { nodeType: string; isTrigger: boolean };
+            try { parsed = JSON.parse(raw); } catch { return; }
+
+            if (parsed.isTrigger && hasTrigger) return; // Only one trigger
+
+            const position = screenToFlowPosition({ x: event.clientX, y: event.clientY });
+
+            const newNode: Node = {
+                id: generateNodeId(),
+                type: parsed.isTrigger ? "triggerNode" : "actionNode",
+                position,
+                data: {
+                    nodeType: parsed.nodeType,
+                    platform: parsed.isTrigger ? "whatsapp" : undefined,
+                    config: {},
+                    onDelete: !parsed.isTrigger ? handleDeleteNode : undefined,
+                },
+            };
+
+            setRfNodes((nds) => {
+                const updated = [...nds, newNode];
+                triggerAutosave(updated, rfEdges);
+                return updated;
+            });
+        },
+        [hasTrigger, screenToFlowPosition, handleDeleteNode, setRfNodes, rfEdges, triggerAutosave]
+    );
+
+    const onDragOver = useCallback((event: React.DragEvent) => {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "move";
+    }, []);
+
+    // ---------------------------------------------------------------------------
+    // Node selection
+    // ---------------------------------------------------------------------------
+
+    const onNodeClick = useCallback(
+        (_: React.MouseEvent, node: Node) => {
+            setSelectedNode({
+                id: node.id,
+                type: node.type as "triggerNode" | "actionNode",
+                position: node.position,
+                data: {
+                    nodeType: node.data.nodeType as string,
+                    platform: node.data.platform as string | undefined,
+                    config: (node.data.config as Record<string, any>) ?? {},
+                },
+            });
+        },
+        []
+    );
+
+    const onPaneClick = useCallback(() => setSelectedNode(null), []);
+
+    // ---------------------------------------------------------------------------
+    // Update node config (from config panel)
+    // ---------------------------------------------------------------------------
+
+    const handleUpdateConfig = useCallback(
+        (nodeId: string, config: Record<string, any>) => {
+            setRfNodes((nds) => {
+                const updated = nds.map((n) =>
+                    n.id === nodeId ? { ...n, data: { ...n.data, config } } : n
+                );
+                triggerAutosave(updated, rfEdges);
+                return updated;
+            });
+            setSelectedNode((prev) =>
+                prev?.id === nodeId ? { ...prev, data: { ...prev.data, config } } : prev
+            );
+        },
+        [setRfNodes, rfEdges, triggerAutosave]
+    );
+
+    // ---------------------------------------------------------------------------
+    // Validate
+    // ---------------------------------------------------------------------------
+
+    const handleValidate = useCallback(async () => {
+        setValidating(true);
+        setPublishResult(null);
+        // First save latest state
+        const graph: BuilderGraph = {
+            nodes: rfNodesToBuilder(rfNodes),
+            edges: rfEdgesToBuilder(rfEdges),
+        };
+        await saveDraft(flowId, graph);
+        const res = await validateDraft(flowId);
+        setValidating(false);
+        if (res.success && res.data) {
+            setErrors(res.data.errors);
+            // Update node error state
+            const errorSet = new Set(res.data.errors.map((e) => e.node_id));
+            setRfNodes((nds) =>
+                nds.map((n) => ({ ...n, data: { ...n.data, hasError: errorSet.has(n.id) } }))
+            );
+        }
+    }, [flowId, rfNodes, rfEdges, setRfNodes]);
+
+    // ---------------------------------------------------------------------------
+    // Publish
+    // ---------------------------------------------------------------------------
+
+    const handlePublish = useCallback(async () => {
+        setPublishing(true);
+        setPublishResult(null);
+        // Save first
+        const graph: BuilderGraph = {
+            nodes: rfNodesToBuilder(rfNodes),
+            edges: rfEdgesToBuilder(rfEdges),
+        };
+        await saveDraft(flowId, graph);
+        const res = await publishDraft(flowId);
+        setPublishing(false);
+        if (res.success && res.data) {
+            if (res.data.success && res.data.published) {
+                setErrors([]);
+                setRfNodes((nds) =>
+                    nds.map((n) => ({ ...n, data: { ...n.data, hasError: false } }))
+                );
+                setPublishResult({
+                    success: true,
+                    version_number: res.data.version_number,
+                    message: `Published as v${res.data.version_number}`,
+                });
+            } else {
+                setErrors(res.data.errors ?? []);
+                const errorSet = new Set((res.data.errors ?? []).map((e) => e.node_id));
+                setRfNodes((nds) =>
+                    nds.map((n) => ({ ...n, data: { ...n.data, hasError: errorSet.has(n.id) } }))
+                );
+                setPublishResult({
+                    success: false,
+                    message: `${res.data.errors?.length ?? 0} error(s) must be fixed before publishing.`,
+                });
+            }
+        }
+    }, [flowId, rfNodes, rfEdges, setRfNodes]);
+
+    // ---------------------------------------------------------------------------
+    // Render
+    // ---------------------------------------------------------------------------
+
+    if (loading) {
+        return (
+            <div className="flex h-full items-center justify-center">
+                <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col h-full">
+            {/* ── Top Bar ── */}
+            <div className="flex items-center justify-between px-4 py-2.5 border-b border-border bg-background z-10 shrink-0">
+                <div className="flex items-center gap-3">
+                    <Link
+                        href="/automations"
+                        className="p-1.5 rounded-lg hover:bg-muted text-muted-foreground transition-colors"
+                    >
+                        <ArrowLeft className="w-4 h-4" />
+                    </Link>
+                    <div>
+                        <h1 className="text-sm font-semibold text-foreground leading-tight">{flowName}</h1>
+                        <p className="text-xs text-muted-foreground">Canvas Editor</p>
                     </div>
+                    <SaveBadge status={saveStatus} />
                 </div>
 
-                {/* Sidebar Info */}
-                <div className="space-y-6">
-                    <div className="bg-white border border-border rounded-2xl p-6 shadow-sm space-y-4">
-                        <h2 className="font-semibold text-slate-900 border-b pb-2">Flow Stats</h2>
-                        <div className="space-y-3 px-1">
-                            <div className="flex justify-between items-center text-sm">
-                                <span className="text-muted-foreground">Created</span>
-                                <span className="font-medium">Today</span>
-                            </div>
-                            <div className="flex justify-between items-center text-sm">
-                                <span className="text-muted-foreground">Version</span>
-                                <span className="font-medium bg-slate-100 px-1.5 py-0.5 rounded text-[10px]">v1.0</span>
-                            </div>
-                            <div className="flex justify-between items-center text-sm">
-                                <span className="text-muted-foreground">Total Steps</span>
-                                <span className="font-medium">{actionNodes.length + 1}</span>
-                            </div>
-                        </div>
-                    </div>
+                <div className="flex items-center gap-2">
+                    {/* Validate */}
+                    <button
+                        onClick={handleValidate}
+                        disabled={validating}
+                        className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border hover:border-teal-400 text-sm font-medium text-foreground transition-colors disabled:opacity-50"
+                    >
+                        {validating ? (
+                            <Loader2 className="w-4 h-4 animate-spin" />
+                        ) : (
+                            <CheckCircle2 className="w-4 h-4" />
+                        )}
+                        Validate
+                    </button>
 
-                    <div className="bg-white border border-border rounded-2xl p-6 shadow-sm space-y-4">
-                        <h2 className="font-semibold text-slate-900 border-b pb-2">Recent Logs</h2>
-                        <div className="flex flex-col items-center justify-center pt-4 text-center">
-                            <Zap className="w-8 h-8 text-teal-400 mb-2 opacity-30" />
-                            <p className="text-sm text-muted-foreground italic">No recent executions recorded.</p>
-                        </div>
+                    {/* Simulate */}
+                    <button
+                        onClick={() => setShowSimulate((s) => !s)}
+                        className={cn(
+                            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg border text-sm font-medium transition-colors",
+                            showSimulate
+                                ? "border-teal-500 bg-teal-50 dark:bg-teal-950 text-teal-700 dark:text-teal-300"
+                                : "border-border hover:border-teal-400 text-foreground"
+                        )}
+                    >
+                        <Play className="w-4 h-4" />
+                        Simulate
+                    </button>
+
+                    {/* Versions */}
+                    <VersionsDropdown
+                        flowId={flowId}
+                        onRollback={(vn) =>
+                            setPublishResult({ success: true, message: `Rolled back — now on v${vn}` })
+                        }
+                    />
+
+                    {/* Publish */}
+                    <button
+                        onClick={handlePublish}
+                        disabled={publishing}
+                        className="flex items-center gap-1.5 px-4 py-1.5 rounded-lg bg-teal-600 hover:bg-teal-700 text-white text-sm font-medium transition-colors disabled:opacity-50 shadow-sm"
+                    >
+                        {publishing ? (
+                            <Loader2 className="w-4 h-4 animate-spin" />
+                        ) : (
+                            <Rocket className="w-4 h-4" />
+                        )}
+                        Publish
+                    </button>
+                </div>
+            </div>
+
+            {/* ── Publish / Error Banner ── */}
+            {(publishResult || errors.length > 0) && (
+                <div
+                    className={cn(
+                        "px-4 py-2.5 text-sm border-b flex items-start gap-2 shrink-0",
+                        publishResult?.success
+                            ? "bg-teal-50 dark:bg-teal-950/30 border-teal-200 dark:border-teal-800 text-teal-700 dark:text-teal-300"
+                            : "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800 text-red-700 dark:text-red-300"
+                    )}
+                >
+                    {publishResult?.success ? (
+                        <CheckCircle2 className="w-4 h-4 shrink-0 mt-0.5" />
+                    ) : (
+                        <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5" />
+                    )}
+                    <div className="flex-1 space-y-0.5">
+                        {publishResult?.message && <p className="font-medium">{publishResult.message}</p>}
+                        {errors.length > 0 && !publishResult && (
+                            <p className="font-medium">{errors.length} validation issue(s) found</p>
+                        )}
+                        {errors.length > 0 && (
+                            <ul className="text-xs space-y-0.5 mt-1">
+                                {errors.slice(0, 5).map((e, i) => (
+                                    <li key={i}>
+                                        <span className="font-mono">{e.node_id}</span>: {e.message}
+                                    </li>
+                                ))}
+                            </ul>
+                        )}
                     </div>
+                    <button
+                        onClick={() => { setPublishResult(null); setErrors([]); }}
+                        className="p-0.5 hover:opacity-70"
+                    >
+                        <X className="w-3.5 h-3.5" />
+                    </button>
                 </div>
-            </main>
+            )}
+
+            {/* ── Three-Panel Layout ── */}
+            <div className="flex flex-1 overflow-hidden relative">
+                {/* Left: Palette */}
+                <NodePalette hasTrigger={hasTrigger} />
+
+                {/* Center: Canvas */}
+                <div className="flex-1 h-full" onDragOver={onDragOver}>
+                    <ReactFlow
+                        nodes={rfNodes.map((n) => ({
+                            ...n,
+                            data: {
+                                ...n.data,
+                                hasError: errorNodeIds.has(n.id),
+                                onDelete: n.type === "actionNode" ? handleDeleteNode : undefined,
+                            },
+                        }))}
+                        edges={rfEdges}
+                        onNodesChange={handleNodesChange}
+                        onEdgesChange={handleEdgesChange}
+                        onConnect={onConnect}
+                        onDrop={onDrop}
+                        onDragOver={onDragOver}
+                        onNodeClick={onNodeClick}
+                        onPaneClick={onPaneClick}
+                        nodeTypes={nodeTypes}
+                        fitView
+                        deleteKeyCode="Delete"
+                        className="bg-[#fafafa] dark:bg-[#0a0a0a]"
+                    >
+                        <Background variant={BackgroundVariant.Dots} gap={16} size={1} />
+                        <Controls />
+                        <MiniMap nodeStrokeWidth={3} />
+                    </ReactFlow>
+                </div>
+
+                {/* Right: Config Panel or Simulate Drawer */}
+                {showSimulate ? (
+                    <SimulateDrawer flowId={flowId} onClose={() => setShowSimulate(false)} />
+                ) : (
+                    <NodeConfigPanel
+                        node={selectedNode}
+                        onClose={() => setSelectedNode(null)}
+                        onUpdateConfig={handleUpdateConfig}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Page wrapper (provides ReactFlow context)
+// ---------------------------------------------------------------------------
+
+export default function FlowDetailPage() {
+    const params = useParams();
+    const flowId = params.id as string;
+
+    return (
+        <div className="h-screen flex flex-col overflow-hidden">
+            <ReactFlowProvider>
+                <CanvasEditor flowId={flowId} />
+            </ReactFlowProvider>
         </div>
     );
 }

frontend/src/app/(dashboard)/automations/page.tsx

@@ -4,16 +4,15 @@ import { useState, useEffect } from "react";
 import {
     Zap,
     Plus,
-    Play,
-    Pause,
-    MoreHorizontal,
     ChevronRight,
     Loader2,
-    FileCode
+    LayoutTemplate,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api";
+import { createFlow } from "@/lib/automations-api";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 
 interface Flow {
     id: string;
@@ -24,8 +23,10 @@ interface Flow {
 }
 
 export default function AutomationsPage() {
+    const router = useRouter();
     const [flows, setFlows] = useState<Flow[]>([]);
     const [isLoading, setIsLoading] = useState(true);
+    const [creating, setCreating] = useState(false);
 
     // Fetch flows from backend
     useEffect(() => {
@@ -39,6 +40,15 @@ export default function AutomationsPage() {
         fetchFlows();
     }, []);
 
+    const handleCreateBlank = async () => {
+        setCreating(true);
+        const res = await createFlow("Untitled Automation");
+        if (res.success && res.data) {
+            router.push(`/automations/${res.data.flow_id}`);
+        }
+        setCreating(false);
+    };
+
     return (
         <div className="p-8 max-w-7xl mx-auto space-y-8">
             {/* Header */}
@@ -49,13 +59,23 @@ export default function AutomationsPage() {
                         Build and manage your AI-driven workflows.
                     </p>
                 </div>
-                <Link
-                    href="/automations/new"
-                    className="flex items-center gap-2 bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg font-medium transition-colors shadow-sm"
-                >
-                    <Plus className="w-4 h-4" />
-                    Create Flow
-                </Link>
+                <div className="flex items-center gap-2">
+                    <Link
+                        href="/templates"
+                        className="flex items-center gap-2 border border-border hover:border-teal-400 text-foreground px-4 py-2 rounded-lg font-medium transition-colors"
+                    >
+                        <LayoutTemplate className="w-4 h-4" />
+                        Templates
+                    </Link>
+                    <button
+                        onClick={handleCreateBlank}
+                        disabled={creating}
+                        className="flex items-center gap-2 bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg font-medium transition-colors shadow-sm disabled:opacity-50"
+                    >
+                        {creating ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
+                        Create Blank
+                    </button>
+                </div>
             </div>
 
             {/* Stats/Badges Placeholder */}
@@ -88,9 +108,9 @@ export default function AutomationsPage() {
                             <h3 className="font-semibold text-lg">No automations yet</h3>
                             <p className="text-muted-foreground">Get started by creating your first AI workflow.</p>
                         </div>
-                        <button className="text-teal-600 font-medium hover:underline">
-                            View templates
-                        </button>
+                        <Link href="/templates" className="text-teal-600 font-medium hover:underline">
+                            Browse templates
+                        </Link>
                     </div>
                 ) : (
                     <div className="grid gap-3">

frontend/src/app/(dashboard)/templates/[slug]/page.tsx

@@ -0,0 +1,289 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useParams, useRouter } from "next/navigation";
+import Link from "next/link";
+import {
+    ArrowLeft,
+    Loader2,
+    Zap,
+    MessageSquare,
+    MousePointerClick,
+    Bot,
+    Send,
+    User,
+    Tag,
+    Database,
+    GitBranch,
+    Clock,
+    AlertCircle,
+    CheckCircle2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { getTemplate, cloneTemplate, type TemplateDetail } from "@/lib/templates-api";
+
+const NODE_TYPE_ICONS: Record<string, React.ReactNode> = {
+    MESSAGE_INBOUND: <MessageSquare className="w-4 h-4" />,
+    LEAD_AD_SUBMIT: <MousePointerClick className="w-4 h-4" />,
+    AI_REPLY: <Bot className="w-4 h-4" />,
+    SEND_MESSAGE: <Send className="w-4 h-4" />,
+    HUMAN_HANDOVER: <User className="w-4 h-4" />,
+    TAG_CONTACT: <Tag className="w-4 h-4" />,
+    ZOHO_UPSERT_LEAD: <Database className="w-4 h-4" />,
+    CONDITION: <GitBranch className="w-4 h-4" />,
+    WAIT_DELAY: <Clock className="w-4 h-4" />,
+};
+
+const NODE_TYPE_LABELS: Record<string, string> = {
+    MESSAGE_INBOUND: "Inbound Message",
+    LEAD_AD_SUBMIT: "Lead Ad Submission",
+    AI_REPLY: "AI Reply",
+    SEND_MESSAGE: "Send Message",
+    HUMAN_HANDOVER: "Human Handover",
+    TAG_CONTACT: "Tag Contact",
+    ZOHO_UPSERT_LEAD: "Zoho: Upsert Lead",
+    CONDITION: "Condition (Coming Soon)",
+    WAIT_DELAY: "Wait / Delay (Coming Soon)",
+};
+
+const INTEGRATION_LABELS: Record<string, string> = {
+    zoho: "Zoho CRM",
+    whatsapp: "WhatsApp",
+    meta: "Meta (Messenger/Instagram)",
+};
+
+function FlowSummary({ graph }: { graph: Record<string, any> }) {
+    const nodes: any[] = graph.nodes ?? [];
+    const edges: any[] = graph.edges ?? [];
+
+    const triggerNode = nodes.find((n: any) => n.type === "triggerNode");
+    const actionNodes = nodes.filter((n: any) => n.type === "actionNode");
+
+    return (
+        <div className="space-y-3">
+            {/* Trigger */}
+            {triggerNode && (
+                <div className="flex items-center gap-3 p-3 rounded-xl border border-teal-200 dark:border-teal-800 bg-teal-50 dark:bg-teal-950/20">
+                    <div className="p-2 rounded-lg bg-teal-600 text-white">
+                        <Zap className="w-4 h-4" />
+                    </div>
+                    <div>
+                        <p className="text-xs font-semibold text-teal-700 dark:text-teal-300 uppercase tracking-wide">
+                            Trigger
+                        </p>
+                        <p className="text-sm font-medium text-foreground">
+                            {NODE_TYPE_LABELS[triggerNode.data?.nodeType] ?? triggerNode.data?.nodeType}
+                        </p>
+                    </div>
+                </div>
+            )}
+
+            {/* Steps */}
+            {actionNodes.map((node: any, i: number) => (
+                <div key={node.id} className="flex items-center gap-3 p-3 rounded-xl border border-border bg-card">
+                    <div className="w-6 h-6 rounded-full border border-border bg-muted flex items-center justify-center text-xs font-bold text-muted-foreground shrink-0">
+                        {i + 1}
+                    </div>
+                    <span className="text-muted-foreground">
+                        {NODE_TYPE_ICONS[node.data?.nodeType] ?? <Bot className="w-4 h-4" />}
+                    </span>
+                    <p className="text-sm font-medium text-foreground">
+                        {NODE_TYPE_LABELS[node.data?.nodeType] ?? node.data?.nodeType}
+                    </p>
+                </div>
+            ))}
+
+            {actionNodes.length === 0 && (
+                <p className="text-sm text-muted-foreground">No action steps configured.</p>
+            )}
+
+            <p className="text-xs text-muted-foreground">
+                {edges.length} connection{edges.length !== 1 ? "s" : ""} in this flow
+            </p>
+        </div>
+    );
+}
+
+export default function TemplateDetailPage() {
+    const params = useParams();
+    const slug = params.slug as string;
+    const router = useRouter();
+
+    const [template, setTemplate] = useState<TemplateDetail | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [cloning, setCloning] = useState(false);
+    const [cloneSuccess, setCloneSuccess] = useState(false);
+    const [error, setError] = useState("");
+
+    useEffect(() => {
+        getTemplate(slug).then((res) => {
+            if (res.success && res.data) setTemplate(res.data);
+            else setError("Template not found.");
+            setLoading(false);
+        });
+    }, [slug]);
+
+    const handleClone = async () => {
+        setCloning(true);
+        const res = await cloneTemplate(slug);
+        if (res.success && res.data) {
+            setCloneSuccess(true);
+            setTimeout(() => router.push(res.data!.redirect_path), 1000);
+        } else {
+            setError(res.error ?? "Failed to clone template.");
+        }
+        setCloning(false);
+    };
+
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center h-64">
+                <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
+            </div>
+        );
+    }
+
+    if (error || !template) {
+        return (
+            <div className="p-8 max-w-4xl mx-auto space-y-4">
+                <Link href="/templates" className="flex items-center gap-2 text-muted-foreground hover:text-foreground text-sm">
+                    <ArrowLeft className="w-4 h-4" /> Back to Templates
+                </Link>
+                <div className="flex items-center gap-2 text-red-600">
+                    <AlertCircle className="w-5 h-5" />
+                    <p>{error || "Template not found."}</p>
+                </div>
+            </div>
+        );
+    }
+
+    const hasPublishedVersion = !!template.latest_version;
+
+    return (
+        <div className="p-8 max-w-5xl mx-auto space-y-8">
+            {/* Back */}
+            <Link
+                href="/templates"
+                className="flex items-center gap-2 text-muted-foreground hover:text-foreground text-sm w-fit"
+            >
+                <ArrowLeft className="w-4 h-4" />
+                Back to Templates
+            </Link>
+
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                {/* Left: Details */}
+                <div className="lg:col-span-2 space-y-6">
+                    <div className="space-y-3">
+                        <h1 className="text-3xl font-bold tracking-tight">{template.name}</h1>
+                        {template.description && (
+                            <p className="text-muted-foreground text-lg">{template.description}</p>
+                        )}
+                        <div className="flex flex-wrap gap-2">
+                            {template.platforms.map((p) => (
+                                <span
+                                    key={p}
+                                    className="text-xs font-semibold px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 uppercase tracking-wide"
+                                >
+                                    {p}
+                                </span>
+                            ))}
+                            {template.industry_tags.map((tag) => (
+                                <span
+                                    key={tag}
+                                    className="text-xs font-semibold px-2 py-1 rounded-full bg-muted text-muted-foreground uppercase tracking-wide"
+                                >
+                                    {tag}
+                                </span>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* Required integrations warning */}
+                    {template.required_integrations.length > 0 && (
+                        <div className="flex items-start gap-2 p-4 rounded-xl border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950/20 text-sm text-amber-700 dark:text-amber-300">
+                            <AlertCircle className="w-4 h-4 shrink-0 mt-0.5" />
+                            <div>
+                                <p className="font-semibold">Required integrations:</p>
+                                <ul className="mt-1 list-disc list-inside space-y-0.5">
+                                    {template.required_integrations.map((int) => (
+                                        <li key={int}>{INTEGRATION_LABELS[int] ?? int}</li>
+                                    ))}
+                                </ul>
+                                <p className="mt-2 text-xs">
+                                    Make sure these are connected in your workspace settings before using this template.
+                                </p>
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Flow Summary */}
+                    <div className="space-y-3">
+                        <h2 className="font-semibold text-lg">Flow Structure</h2>
+                        {hasPublishedVersion ? (
+                            <FlowSummary graph={template.latest_version!.builder_graph_json} />
+                        ) : (
+                            <p className="text-sm text-muted-foreground">
+                                No published version available yet.
+                            </p>
+                        )}
+                    </div>
+                </div>
+
+                {/* Right: CTA */}
+                <div className="space-y-4">
+                    <div className="rounded-2xl border border-border bg-card p-5 shadow-sm space-y-4 sticky top-6">
+                        <div>
+                            <p className="text-sm font-medium text-foreground">
+                                {hasPublishedVersion
+                                    ? `Version ${template.latest_version!.version_number}`
+                                    : "Not yet published"}
+                            </p>
+                            {template.latest_version?.published_at && (
+                                <p className="text-xs text-muted-foreground">
+                                    Published {new Date(template.latest_version.published_at).toLocaleDateString()}
+                                </p>
+                            )}
+                        </div>
+
+                        {hasPublishedVersion ? (
+                            <button
+                                onClick={handleClone}
+                                disabled={cloning || cloneSuccess}
+                                className={cn(
+                                    "w-full flex items-center justify-center gap-2 py-2.5 rounded-xl font-medium transition-colors",
+                                    cloneSuccess
+                                        ? "bg-teal-100 dark:bg-teal-900 text-teal-700 dark:text-teal-300"
+                                        : "bg-teal-600 hover:bg-teal-700 text-white disabled:opacity-50"
+                                )}
+                            >
+                                {cloning ? (
+                                    <Loader2 className="w-4 h-4 animate-spin" />
+                                ) : cloneSuccess ? (
+                                    <CheckCircle2 className="w-4 h-4" />
+                                ) : (
+                                    <Zap className="w-4 h-4" />
+                                )}
+                                {cloneSuccess ? "Opening canvas…" : "Use This Template"}
+                            </button>
+                        ) : (
+                            <div className="text-center text-sm text-muted-foreground py-2">
+                                Not available yet
+                            </div>
+                        )}
+
+                        {error && (
+                            <p className="text-xs text-red-600 text-center">{error}</p>
+                        )}
+
+                        <Link
+                            href="/templates"
+                            className="block text-center text-sm text-muted-foreground hover:text-foreground transition-colors"
+                        >
+                            Browse all templates
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

frontend/src/app/(dashboard)/templates/page.tsx

@@ -0,0 +1,267 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import {
+    LayoutTemplate,
+    Loader2,
+    Search,
+    Star,
+    ArrowRight,
+    Zap,
+    CheckCircle2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { listTemplates, cloneTemplate, type TemplateListItem } from "@/lib/templates-api";
+
+const CATEGORY_LABELS: Record<string, string> = {
+    lead_generation: "Lead Generation",
+    customer_support: "Customer Support",
+    sales: "Sales",
+    onboarding: "Onboarding",
+    general: "General",
+};
+
+const PLATFORM_LABELS: Record<string, string> = {
+    whatsapp: "WhatsApp",
+    meta: "Meta",
+};
+
+function TemplateBadge({ text, color = "default" }: { text: string; color?: "teal" | "blue" | "default" }) {
+    return (
+        <span
+            className={cn(
+                "text-[11px] font-semibold uppercase tracking-wide px-2 py-0.5 rounded-full",
+                color === "teal" && "bg-teal-100 dark:bg-teal-900 text-teal-700 dark:text-teal-300",
+                color === "blue" && "bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300",
+                color === "default" && "bg-muted text-muted-foreground"
+            )}
+        >
+            {text}
+        </span>
+    );
+}
+
+function TemplateCard({ template }: { template: TemplateListItem }) {
+    const router = useRouter();
+    const [cloning, setCloning] = useState(false);
+    const [cloned, setCloned] = useState(false);
+
+    const handleUse = async () => {
+        setCloning(true);
+        const res = await cloneTemplate(template.slug);
+        if (res.success && res.data) {
+            setCloned(true);
+            setTimeout(() => router.push(res.data!.redirect_path), 800);
+        }
+        setCloning(false);
+    };
+
+    return (
+        <div className="flex flex-col rounded-2xl border border-border bg-card shadow-sm hover:shadow-md hover:border-teal-200 transition-all overflow-hidden group">
+            {/* Featured badge */}
+            {template.is_featured && (
+                <div className="flex items-center gap-1 px-4 py-2 bg-amber-50 dark:bg-amber-950/30 border-b border-amber-200 dark:border-amber-800 text-amber-700 dark:text-amber-300 text-xs font-semibold">
+                    <Star className="w-3 h-3 fill-current" />
+                    Featured
+                </div>
+            )}
+
+            <div className="flex flex-col flex-1 p-5 space-y-3">
+                {/* Header */}
+                <div className="space-y-1.5">
+                    <div className="flex items-start justify-between gap-2">
+                        <h3 className="font-semibold text-foreground leading-tight">{template.name}</h3>
+                    </div>
+                    {template.description && (
+                        <p className="text-sm text-muted-foreground line-clamp-2">{template.description}</p>
+                    )}
+                </div>
+
+                {/* Tags */}
+                <div className="flex flex-wrap gap-1.5">
+                    {template.category && (
+                        <TemplateBadge
+                            text={CATEGORY_LABELS[template.category] ?? template.category}
+                            color="teal"
+                        />
+                    )}
+                    {template.platforms.map((p) => (
+                        <TemplateBadge key={p} text={PLATFORM_LABELS[p] ?? p} color="blue" />
+                    ))}
+                    {template.industry_tags.slice(0, 2).map((tag) => (
+                        <TemplateBadge key={tag} text={tag} />
+                    ))}
+                </div>
+
+                {template.required_integrations.length > 0 && (
+                    <p className="text-xs text-muted-foreground">
+                        Requires: {template.required_integrations.join(", ")}
+                    </p>
+                )}
+            </div>
+
+            {/* Footer */}
+            <div className="flex items-center gap-2 px-5 py-3 border-t border-border bg-muted/30">
+                <Link
+                    href={`/templates/${template.slug}`}
+                    className="flex-1 text-center text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+                >
+                    Preview
+                </Link>
+                <button
+                    onClick={handleUse}
+                    disabled={cloning || cloned}
+                    className={cn(
+                        "flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-lg text-sm font-medium transition-colors",
+                        cloned
+                            ? "bg-teal-100 dark:bg-teal-900 text-teal-700 dark:text-teal-300"
+                            : "bg-teal-600 hover:bg-teal-700 text-white disabled:opacity-50"
+                    )}
+                >
+                    {cloning ? (
+                        <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                    ) : cloned ? (
+                        <CheckCircle2 className="w-3.5 h-3.5" />
+                    ) : (
+                        <ArrowRight className="w-3.5 h-3.5" />
+                    )}
+                    {cloned ? "Opening…" : "Use Template"}
+                </button>
+            </div>
+        </div>
+    );
+}
+
+export default function TemplatesPage() {
+    const [templates, setTemplates] = useState<TemplateListItem[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [search, setSearch] = useState("");
+    const [categoryFilter, setCategoryFilter] = useState("");
+
+    useEffect(() => {
+        listTemplates().then((res) => {
+            if (res.success && res.data) setTemplates(res.data);
+            setLoading(false);
+        });
+    }, []);
+
+    const featured = templates.filter((t) => t.is_featured);
+    const filtered = templates.filter((t) => {
+        const matchSearch =
+            !search ||
+            t.name.toLowerCase().includes(search.toLowerCase()) ||
+            (t.description ?? "").toLowerCase().includes(search.toLowerCase());
+        const matchCat = !categoryFilter || t.category === categoryFilter;
+        return matchSearch && matchCat;
+    });
+
+    const categories = Array.from(new Set(templates.map((t) => t.category).filter(Boolean)));
+
+    return (
+        <div className="p-8 max-w-7xl mx-auto space-y-8">
+            {/* Header */}
+            <div className="space-y-1">
+                <div className="flex items-center gap-2">
+                    <LayoutTemplate className="w-6 h-6 text-teal-600" />
+                    <h1 className="text-3xl font-bold tracking-tight">Templates</h1>
+                </div>
+                <p className="text-muted-foreground">
+                    Pre-built automation flows. Clone one to get started instantly.
+                </p>
+            </div>
+
+            {/* Filters */}
+            <div className="flex items-center gap-3 flex-wrap">
+                <div className="relative flex-1 max-w-xs">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                    <input
+                        type="text"
+                        placeholder="Search templates…"
+                        className="w-full pl-9 pr-3 py-2 rounded-lg border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
+                        value={search}
+                        onChange={(e) => setSearch(e.target.value)}
+                    />
+                </div>
+                <div className="flex items-center gap-2 flex-wrap">
+                    <button
+                        onClick={() => setCategoryFilter("")}
+                        className={cn(
+                            "px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors",
+                            !categoryFilter
+                                ? "bg-teal-600 text-white border-teal-600"
+                                : "border-border hover:border-teal-400 text-foreground"
+                        )}
+                    >
+                        All
+                    </button>
+                    {categories.map((cat) => (
+                        <button
+                            key={cat}
+                            onClick={() => setCategoryFilter(cat === categoryFilter ? "" : cat)}
+                            className={cn(
+                                "px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors",
+                                categoryFilter === cat
+                                    ? "bg-teal-600 text-white border-teal-600"
+                                    : "border-border hover:border-teal-400 text-foreground"
+                            )}
+                        >
+                            {CATEGORY_LABELS[cat] ?? cat}
+                        </button>
+                    ))}
+                </div>
+            </div>
+
+            {loading ? (
+                <div className="flex items-center justify-center py-20">
+                    <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
+                </div>
+            ) : templates.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-20 border-2 border-dashed border-border rounded-2xl text-center space-y-3">
+                    <Zap className="w-12 h-12 text-muted-foreground/30" />
+                    <div>
+                        <p className="font-semibold">No templates yet</p>
+                        <p className="text-sm text-muted-foreground">
+                            Check back soon — templates are published by your account admin.
+                        </p>
+                    </div>
+                </div>
+            ) : (
+                <div className="space-y-8">
+                    {/* Featured section */}
+                    {featured.length > 0 && !search && !categoryFilter && (
+                        <div className="space-y-4">
+                            <h2 className="text-lg font-semibold flex items-center gap-2">
+                                <Star className="w-4 h-4 text-amber-500 fill-current" />
+                                Featured
+                            </h2>
+                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                                {featured.map((t) => (
+                                    <TemplateCard key={t.id} template={t} />
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
+                    {/* All templates */}
+                    <div className="space-y-4">
+                        {(search || categoryFilter) ? null : (
+                            <h2 className="text-lg font-semibold">All Templates</h2>
+                        )}
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                            {filtered.map((t) => (
+                                <TemplateCard key={t.id} template={t} />
+                            ))}
+                        </div>
+                        {filtered.length === 0 && (
+                            <div className="text-center py-12 text-muted-foreground">
+                                No templates match your search.
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

frontend/src/components/AdminSidebar.tsx

@@ -19,6 +19,7 @@ import {
     CreditCard,
     Landmark,
     SlidersHorizontal,
+    LayoutTemplate,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { adminAuth } from "@/lib/admin-auth";
@@ -34,6 +35,7 @@ const adminNavItems = [
     { name: "Email Logs",    href: "/admin/email-logs",    icon: Mail },
     { name: "Dispatch",      href: "/admin/dispatch",      icon: Send },
     { name: "Automations",   href: "/admin/automations",   icon: Zap },
+    { name: "Templates",     href: "/admin/templates",     icon: LayoutTemplate },
     { name: "Prompt Configs",href: "/admin/prompt-configs",icon: FileText },
     { name: "Zoho Health",   href: "/admin/zoho-health",   icon: Database },
     { name: "Monitoring",    href: "/admin/monitoring",    icon: Activity },

frontend/src/components/Sidebar.tsx

@@ -17,6 +17,7 @@ import {
     SendHorizontal,
     Inbox,
     Landmark,
+    LayoutTemplate,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api";
@@ -26,6 +27,7 @@ const navItems = [
     { name: "Inbox", href: "/inbox", icon: Inbox },
     { name: "Contacts", href: "/contacts", icon: Users },
     { name: "Automations", href: "/automations", icon: Zap },
+    { name: "Templates", href: "/templates", icon: LayoutTemplate },
     { name: "Outbound Queue", href: "/dispatch", icon: SendHorizontal },
     { name: "Prompt Studio", href: "/prompt-studio", icon: Sparkles },
     { name: "Test Chat", href: "/test-chat", icon: MessageSquare },

frontend/src/lib/admin-api.ts

@@ -361,3 +361,93 @@ export async function patchSystemSettings(settings: Record<string, any>) {
         body: JSON.stringify({ settings }),
     });
 }
+
+// ---- Template Catalog Admin (Mission 27) -----------------------------------
+
+export interface AdminTemplateItem {
+    id: string;
+    slug: string;
+    name: string;
+    description: string | null;
+    category: string;
+    industry_tags: string[];
+    platforms: string[];
+    required_integrations: string[];
+    is_featured: boolean;
+    is_active: boolean;
+    created_at: string;
+}
+
+export interface AdminTemplateVersionItem {
+    id: string;
+    version_number: number;
+    changelog: string | null;
+    is_published: boolean;
+    published_at: string | null;
+    created_at: string;
+}
+
+export async function getAdminTemplates(skip = 0, limit = 50) {
+    return adminRequest<{ items: AdminTemplateItem[]; total: number }>(
+        `/admin/templates?skip=${skip}&limit=${limit}`
+    );
+}
+
+export async function createAdminTemplate(payload: {
+    slug: string;
+    name: string;
+    description?: string;
+    category?: string;
+    industry_tags?: string[];
+    platforms?: string[];
+    required_integrations?: string[];
+    is_featured?: boolean;
+}) {
+    return adminRequest<{ id: string; slug: string; name: string }>("/admin/templates", {
+        method: "POST",
+        body: JSON.stringify(payload),
+    });
+}
+
+export async function patchAdminTemplate(
+    templateId: string,
+    payload: {
+        name?: string;
+        description?: string;
+        category?: string;
+        is_featured?: boolean;
+        is_active?: boolean;
+        industry_tags?: string[];
+        platforms?: string[];
+        required_integrations?: string[];
+    }
+) {
+    return adminRequest<{ id: string; updated: boolean }>(`/admin/templates/${templateId}`, {
+        method: "PATCH",
+        body: JSON.stringify(payload),
+    });
+}
+
+export async function createTemplateVersion(
+    templateId: string,
+    payload: { builder_graph_json: Record<string, any>; changelog?: string }
+) {
+    return adminRequest<{ valid: boolean; id?: string; version_number?: number; errors?: any[] }>(
+        `/admin/templates/${templateId}/versions`,
+        {
+            method: "POST",
+            body: JSON.stringify(payload),
+        }
+    );
+}
+
+export async function publishTemplateVersion(templateId: string) {
+    return adminRequest<{ published: boolean; version_number: number; published_at: string }>(
+        `/admin/templates/${templateId}/publish`,
+        { method: "POST" }
+    );
+}
+
+export async function getTemplateVersions(templateId: string) {
+    return adminRequest<AdminTemplateVersionItem[]>(`/admin/templates/${templateId}/versions`);
+}

frontend/src/lib/automations-api.ts

@@ -0,0 +1,164 @@
+/**
+ * Typed API wrappers for the Automation Builder v2 endpoints (Mission 27).
+ * Uses apiClient from api.ts — injects product JWT + X-Workspace-ID automatically.
+ */
+import { apiClient } from "./api";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface BuilderNode {
+    id: string;
+    type: "triggerNode" | "actionNode";
+    position: { x: number; y: number };
+    data: {
+        nodeType: string;
+        platform?: string;
+        config: Record<string, any>;
+        hasError?: boolean;
+    };
+}
+
+export interface BuilderEdge {
+    id: string;
+    source: string;
+    target: string;
+    sourceHandle?: string | null;
+}
+
+export interface BuilderGraph {
+    nodes: BuilderNode[];
+    edges: BuilderEdge[];
+}
+
+export interface ValidationError {
+    node_id: string;
+    field: string;
+    message: string;
+}
+
+export interface FlowDraft {
+    builder_graph_json: BuilderGraph | null;
+    last_validation_errors: { errors: ValidationError[]; validated_at: string } | null;
+    updated_at: string | null;
+}
+
+export interface FlowVersion {
+    id: string;
+    version_number: number;
+    is_published: boolean;
+    is_active: boolean;
+    created_at: string;
+}
+
+export interface SimulateStep {
+    node_id: string;
+    node_type: string;
+    description: string;
+    dispatch_blocked: boolean;
+    would_send?: string;
+    would_dispatch?: boolean;
+    mock_payload?: Record<string, any>;
+}
+
+export interface SimulateResult {
+    valid: boolean;
+    steps: SimulateStep[];
+    dispatch_blocked: boolean;
+    message: string;
+    errors?: ValidationError[];
+}
+
+export interface Flow {
+    id: string;
+    name: string;
+    description: string;
+    status: "draft" | "published" | "archived";
+    published_version_id: string | null;
+    created_at: string;
+    updated_at: string;
+}
+
+// ---------------------------------------------------------------------------
+// Flow CRUD
+// ---------------------------------------------------------------------------
+
+export function createFlow(name: string, description?: string) {
+    return apiClient.post<{ flow_id: string }>("/automations", { name, description });
+}
+
+export function listFlows() {
+    return apiClient.get<Flow[]>("/automations");
+}
+
+export function getFlow(flowId: string) {
+    return apiClient.get<Flow & { definition: any; version_number: number | null }>(
+        `/automations/${flowId}`
+    );
+}
+
+export function updateFlow(flowId: string, payload: { name?: string; description?: string }) {
+    return apiClient.patch<{ id: string; name: string }>(`/automations/${flowId}`, payload);
+}
+
+export function deleteFlow(flowId: string) {
+    return apiClient.delete<{ deleted: boolean }>(`/automations/${flowId}`);
+}
+
+// ---------------------------------------------------------------------------
+// Draft
+// ---------------------------------------------------------------------------
+
+export function getDraft(flowId: string) {
+    return apiClient.get<FlowDraft>(`/automations/${flowId}/draft`);
+}
+
+export function saveDraft(flowId: string, graph: BuilderGraph) {
+    return apiClient.put<{ saved: boolean; updated_at: string }>(`/automations/${flowId}/draft`, {
+        builder_graph_json: graph,
+    });
+}
+
+export function validateDraft(flowId: string) {
+    return apiClient.post<{ valid: boolean; errors: ValidationError[] }>(
+        `/automations/${flowId}/draft/validate`
+    );
+}
+
+// ---------------------------------------------------------------------------
+// Publish / Versions / Rollback
+// ---------------------------------------------------------------------------
+
+export function publishDraft(flowId: string) {
+    return apiClient.post<{
+        success: boolean;
+        published: boolean;
+        version_id?: string;
+        version_number?: number;
+        published_at?: string;
+        errors?: ValidationError[];
+    }>(`/automations/${flowId}/publish`);
+}
+
+export function getVersions(flowId: string) {
+    return apiClient.get<FlowVersion[]>(`/automations/${flowId}/versions`);
+}
+
+export function rollbackToVersion(flowId: string, versionId: string) {
+    return apiClient.post<{
+        new_version_id: string;
+        new_version_number: number;
+        rolled_back_to: number;
+    }>(`/automations/${flowId}/rollback/${versionId}`);
+}
+
+// ---------------------------------------------------------------------------
+// Simulate
+// ---------------------------------------------------------------------------
+
+export function simulate(flowId: string, mockPayload?: Record<string, any>) {
+    return apiClient.post<SimulateResult>(`/automations/${flowId}/simulate`, {
+        mock_payload: mockPayload ?? null,
+    });
+}

frontend/src/lib/templates-api.ts

@@ -0,0 +1,73 @@
+/**
+ * Typed API wrappers for the Template Catalog workspace endpoints (Mission 27).
+ * Uses apiClient from api.ts — injects product JWT + X-Workspace-ID automatically.
+ */
+import { apiClient } from "./api";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface TemplateListItem {
+    id: string;
+    slug: string;
+    name: string;
+    description: string | null;
+    category: string;
+    industry_tags: string[];
+    platforms: string[];
+    required_integrations: string[];
+    is_featured: boolean;
+}
+
+export interface TemplateVersion {
+    id: string;
+    version_number: number;
+    builder_graph_json: Record<string, any>;
+    changelog: string | null;
+    published_at: string | null;
+}
+
+export interface TemplateDetail extends TemplateListItem {
+    latest_version: TemplateVersion | null;
+}
+
+export interface TemplateFilters {
+    category?: string;
+    platform?: string;
+    featured?: boolean;
+    skip?: number;
+    limit?: number;
+}
+
+export interface CloneResult {
+    flow_id: string;
+    flow_name: string;
+    redirect_path: string;
+    template_slug: string;
+    required_integrations: string[];
+}
+
+// ---------------------------------------------------------------------------
+// Template Catalog API
+// ---------------------------------------------------------------------------
+
+export function listTemplates(filters: TemplateFilters = {}) {
+    const params = new URLSearchParams();
+    if (filters.category) params.set("category", filters.category);
+    if (filters.platform) params.set("platform", filters.platform);
+    if (filters.featured !== undefined) params.set("featured", String(filters.featured));
+    if (filters.skip !== undefined) params.set("skip", String(filters.skip));
+    if (filters.limit !== undefined) params.set("limit", String(filters.limit));
+
+    const query = params.toString() ? `?${params.toString()}` : "";
+    return apiClient.get<TemplateListItem[]>(`/templates${query}`);
+}
+
+export function getTemplate(slug: string) {
+    return apiClient.get<TemplateDetail>(`/templates/${slug}`);
+}
+
+export function cloneTemplate(slug: string, name?: string) {
+    return apiClient.post<CloneResult>(`/templates/${slug}/clone`, { name: name || "" });
+}