@hadoan

Prompt: Manageable, Shareable Sequence Presets (apps/web + apps/crm)

You are a product designer + UX writer + full-stack engineer working in the Corely monorepo. Implement a Sequence Presets system so presets are manageable (create/edit/duplicate/archive) and shareable (team visibility + share link) across the workspace, and the same capability exists in both frontends: apps/web and apps/crm.

Current state (pain)

In CRM → Sequences → New Sequence → Sequence Setup, users can apply a preset (e.g. "Apply Nails 3-step preset"), but cannot add or edit presets. Presets feel hardcoded.

Example preset content:

• Name: "Lead to Won – Nails"
• Description: "Automated day 1/day 3/day 7 email follow-up for nails leads."
• Steps: Email Auto (delay 0, 3, 7), subject/body filled.

Goals

1. Presets are first-class objects: create, edit, preview, apply, duplicate, archive.

2. Shareable:

   • Share within workspace via Team presets (visibility control).
   • Provide Share link action to copy a URL to the preset detail page (respect permissions).

3. Applying a preset creates an editable sequence draft (copy-by-default).

4. Same user experience in both apps/web and apps/crm with maximum reuse:

   • Shared contracts in packages/contracts
   • Prefer shared UI module/package for preset library + editor, imported by both apps (do not violate import boundaries).

5. System presets exist (read-only) and are clonable (e.g., Nails preset becomes a seeded system preset).

---

Deliverables (follow exactly)

1) UX spec

• Screens (desktop + mobile), flows, empty/loading/error states.
• Copy for headings, empty states, tooltips, and banners.

2) Information architecture + routing (both apps)

Define routes and where they appear in navigation:

• Where "Presets" lives (under CRM → Sequences).

• Required routes:

  • /crm/sequences/presets
  • /crm/sequences/presets/new
  • /crm/sequences/presets/:id
  • /crm/sequences/presets/:id/edit

• Applying presets from New Sequence should work in both apps.

3) Shared implementation strategy

Propose the cleanest approach to share code across apps/web and apps/crm:

• Contracts/types in packages/contracts

• Either:

  • a shared package like packages/crm-sequences-ui for screens/components/hooks, OR
  • a shared "module" folder pattern consumed by both apps

• Must obey architecture boundaries (no app importing another app’s internals; shared packages must not import app modules).

4) Data model

Define sequence_preset with:

• id
• workspaceId
• name
• description
• steps (JSON)
• tags (string[])
• visibility = system | team | personal
• ownerId (nullable for system)
• status = active | archived
• version (int)
• createdAt, updatedAt
  Optional fields for sharing:
• shareSlug (optional) OR rely on id-based URL (preferred: keep simple, rely on permissions)

Optional linking fields on sequence:

• basedOnPresetId (nullable)
• basedOnPresetVersion (nullable)
• detachedAt (nullable)

5) Permissions & visibility rules

• System: visible to all; read-only; can duplicate.
• Team: visible to all workspace members; editable by manage_team_presets permission OR owner.
• Personal: visible only to owner.
• Share link is only meaningful if the viewer has access; otherwise show a friendly "No access" state.

6) Versioning strategy

• Editing a preset increments version.

• Sequences store the preset + version they were based on (snapshot reference).

• Preset edits do not mutate existing sequences automatically.

• Banner in sequence editor when based on preset:

  • "Based on preset: X"
  • actions: View preset, Save as new preset, Detach

7) API endpoints (backend)

Specify endpoints + payload examples:

• GET /crm/sequence-presets (filters: q, tags, visibility, status, ownerId)
• GET /crm/sequence-presets/:id
• POST /crm/sequence-presets
• PATCH /crm/sequence-presets/:id
• POST /crm/sequence-presets/:id/duplicate
• POST /crm/sequence-presets/:id/archive
• POST /crm/sequences/:id/save-as-preset

Also define list response shape consistent with repo conventions:

• { items, pageInfo } or cursor style.

8) UI components (shared where possible)

Must include:

• PresetLibraryListReport (table-first CRUD)
• PresetPreviewDrawer
• PresetEditor (reuse SequenceBuilder UI)
• ApplyPresetModal (search + preview + apply)
• BasedOnPresetBanner
• SharePresetButton (copies URL, confirms toast)

9) Acceptance criteria (testable)

Include at least:

• Create personal preset (works)
• Admin (or permissioned user) can create/edit team preset
• System preset cannot be edited but can be duplicated
• Apply preset → editable sequence steps (copy)
• Duplicate works for all visibilities
• Archive hides from default list (with "Show archived" toggle)
• Share link copies working URL; users without access see "No access" state
• Search + filters (tag, visibility) work
• Required states: loading skeletons, empty state with CTA, error state with retry

10) Migration plan

Convert existing hardcoded preset(s) (e.g., Nails) into seeded System preset records:

• Seed on deploy or via migration
• Ensure it appears in preset library as "System"

11) Mock data

Provide 3 presets:

• System: "Lead to Won – Nails (3-step)"
• Team: "Inbound Demo Follow-up (4-step)"
• Personal: "My Short Nudge (2-step)"

---

UX requirements (must implement)

Preset Library (new screen)

• Table columns: Name, Steps, Channels, Tags, Visibility, Owner, Updated, Used count
• Row actions: Preview, Apply, Edit (if allowed), Duplicate, Archive, Share
• Toolbar: Search, filters, + New Preset
• Empty state: onboarding text + CTA

Preset Preview

• Shows full step list with delays + subjects; body preview truncated
• Actions: Apply, Duplicate, Share, Edit (if allowed)

Preset Editor

• Name, description, tags
• Steps: add/edit/reorder/delete
• Validation: no negative delays; email steps require subject/body
• Save button states: saving, saved, error

Apply preset in "New Sequence"

• Applying preset creates a copy into current builder
• "Based on preset" banner appears
• User can modify steps immediately

---

Cross-app requirement (critical)

Implement navigation + routes in both apps/web and apps/crm:

• Preset library is reachable from CRM → Sequences area
• The same preset pages exist in both apps
• Prefer shared UI package/module to avoid duplicating screens

---

Now produce the full spec and implementation plan with concrete UI copy, endpoint payloads, and route wiring notes for both apps.