Skip to content

Emails redesign#1076

Merged
N2D4 merged 75 commits intodevfrom
emails-redesign
Feb 16, 2026
Merged

Emails redesign#1076
N2D4 merged 75 commits intodevfrom
emails-redesign

Conversation

@Developing-Gamer
Copy link
Contributor

@Developing-Gamer Developing-Gamer commented Dec 25, 2025

Summary by CodeRabbit

  • New Features

    • WYSIWYG inline editing (commit/preview) for email templates, themes, and drafts, plus a mock-AI edit mode.
    • Delete actions for email drafts, templates, and themes.
    • Device viewport previews with visible editable regions.
  • Improvements

    • Richer editor layout (save/undo, confirm, debug), tighter preview/editor integration, in-iframe editing tooling, and redesigned glass-card email management UI.
    • Thread/chat and editor UX polish; improved tooltips and layout behavior.
  • Tests

    • New unit and end-to-end tests for templates, drafts, previews, and WYSIWYG edits.
  • Documentation

    • Added dashboard design guide section for catalog & product card grid.

Note

Modernizes email authoring and AI integration across backend and dashboard.

  • Switches AI to OpenRouter (STACK_OPENROUTER_API_KEY), updates internal chat to OpenRouter with mock mode fallback
  • Adds POST /internal/wysiwyg-edit AI endpoint to apply WYSIWYG text edits to JSX sources
  • Extends POST /emails/render-email to accept editable_markers/editable_source and return editable_regions
  • Adds delete routes for email drafts (DELETE /internal/email-drafts/:id), templates (DELETE /internal/email-templates/:templateId), and themes (DELETE /internal/email-themes/:id) with safeguards (no default/active theme deletion)
  • Improves template/theme management: validates theme_id, uses defaultNewTemplateSource, precise config overrides
  • Redesigns dashboard email editors with viewport selector (phone/tablet/desktop), AI WYSIWYG commit, save/undo, unsaved-change guard, and shared-SMTP warnings
  • Updates list pages to support create/delete flows and polished glassmorphic UI; adds Design Language page and catalog/grid guide
  • Fixes globe rendering (depth/culling, hover) and chart tooltip layering/cursor behavior

Written by Cursor Bugbot for commit 9ae5ad7. This will update automatically on new commits. Configure here.

@Developing-Gamer Developing-Gamer self-assigned this Dec 25, 2025
@vercel
Copy link

vercel bot commented Dec 25, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
stack-backend Ready Ready Preview, Comment Feb 16, 2026 10:58pm
stack-dashboard Ready Ready Preview, Comment Feb 16, 2026 10:58pm
stack-demo Ready Ready Preview, Comment Feb 16, 2026 10:58pm
stack-docs Ready Ready Preview, Comment Feb 16, 2026 10:58pm
test-sandbox Error Error Feb 16, 2026 10:58pm

@cmux-agent
Copy link

cmux-agent bot commented Dec 25, 2025

Older cmux preview screenshots (latest comment is below)

Preview Screenshots

Open Diff Heatmap

Preview screenshots are being captured...

Workspace and dev browser links will appear here once the preview environment is ready.


Generated by cmux preview system

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 25, 2025

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Adds WYSIWYG email editing end-to-end: JSX transpiler that injects editable-region sentinels, dashboard in-iframe editor with commit messaging, backend POST /internal/wysiwyg-edit (mock OpenRouter mode, timeout, guarded client), rendering support for editable markers, admin SDK/app hooks for apply/delete, and associated unit and e2e tests and UI wiring.

Changes

Cohort / File(s) Summary
WYSIWYG API & AI
apps/backend/src/app/api/latest/internal/wysiwyg-edit/route.tsx, apps/backend/src/app/api/latest/internal/ai-chat/[threadId]/route.tsx, apps/backend/.env.development, docker/server/.env
Adds POST /internal/wysiwyg-edit with validation, mock mode via STACK_OPENROUTER_API_KEY sentinel, guarded OpenRouter/OpenAI client, configurable model, 2‑minute AbortController timeout; ai-chat route gains mock path and schema validation; env files updated.
JSX editable transpiler & tests
packages/stack-shared/src/utils/jsx-editable-transpiler.tsx, packages/stack-shared/src/utils/jsx-editable-transpiler.test.ts
New transpiler that injects editable sentinels and emits EditableMetadata; includes convertSentinelTokensToComments and comprehensive unit tests.
Email rendering pipeline
apps/backend/src/lib/email-rendering.tsx, apps/backend/src/lib/email-rendering.test.tsx, apps/backend/src/app/api/latest/emails/render-email/route.tsx
renderEmailWithTemplate gets editableMarkers/editableSource options, runs transpilation, merges editableRegions, converts sentinels to HTML comments, and returns editable_regions; tests updated.
Admin SDK & app impl
packages/stack-shared/src/interface/admin-interface.ts, packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts, packages/template/src/lib/stack-app/apps/interfaces/admin-app.ts
Added admin methods: applyWysiwygEdit, deleteEmailDraft, deleteEmailTemplate, deleteEmailTheme; extended preview APIs to support editable markers/source and hooks/caching.
Backend email CRUD & guards
apps/backend/src/app/api/latest/internal/email-drafts/[id]/route.tsx, apps/backend/src/app/api/latest/internal/email-templates/[templateId]/route.tsx, apps/backend/src/app/api/latest/internal/email-templates/route.tsx, apps/backend/src/app/api/latest/internal/email-themes/cud.tsx
Adds DELETE routes for drafts/templates, runtime guard requiring custom SMTP for template creation, guard preventing deleting active theme, and improved Prisma error mapping.
Dashboard preview & adapters
apps/dashboard/src/components/email-preview.tsx, apps/backend/src/lib/ai-chat/*, apps/backend/src/lib/ai-chat/email-*-adapter.ts, apps/dashboard/src/app/.../email-templates/*, .../email-themes/*, .../email-drafts/*
EmailPreview gains editMode, in-iframe WYSIWYG script and messaging/types, device viewports, onWysiwygEditCommit flow; AI prompts expanded; dashboard pages wired for save/undo and WYSIWYG commit flows.
Editor/layout & integrations
apps/dashboard/src/components/vibe-coding/vibe-code-layout.tsx, apps/dashboard/src/components/vibe-coding/code-editor.tsx, apps/dashboard/src/components/vibe-coding/index.ts
VibeCodeLayout and CodeEditor expanded with viewport support, onSave/onUndo/isDirty, wysiwygDebugInfo, resizable panels, mobile/desktop layouts; new exported types ViewportMode and WysiwygDebugInfo.
Frontend UX & component surface
many files under apps/dashboard/src/components/*, apps/dashboard/src/app/**
Widespread UI and API changes: inputs/selects/dropdowns styling, tooltip z-index fixes, editable-grid onUpdate API, assistant/chat redesign, router navigation confirmation, data-table onTableReady/showResetFilters, design-language page, and numerous component refinements.
Default templates & helpers
packages/stack-shared/src/helpers/emails.ts, apps/backend/src/lib/email-rendering.tsx
Adds defaultNewTemplateSource, refactors default templates to React-Email TSX sources; rendering pipeline integrates transpilation for editable markers.
Tests & e2e
apps/e2e/tests/**, packages/stack-shared/src/utils/jsx-editable-transpiler.test.ts
Unit and e2e tests added/updated for WYSIWYG edit endpoint, editable-marker rendering, template create/delete behavior, draft deletion, and email send/test flows.
Deps & config
package.json, packages/stack-shared/package.json, packages/template/*
Adds Babel tooling deps to stack-shared and root devDeps (e.g., @babel/generator), and simplifies packages/template codegen scripts.

Sequence Diagram(s)

sequenceDiagram
    participant User as User
    participant Client as Dashboard Client
    participant Layout as VibeCodeLayout
    participant Preview as EmailPreview
    participant Backend as Backend API
    participant AI as OpenRouter/OpenAI

    User->>Client: Edit region and click Commit
    Client->>Layout: onWysiwygEditCommit(metadata, newText)
    Layout->>Preview: optimistic preview update (in-iframe)
    Layout->>Backend: POST /internal/wysiwyg-edit (metadata, sourceType, old/new)
    Backend->>AI: generateText (system + user prompt) OR return mock
    AI-->>Backend: updated_source
    Backend-->>Layout: return updated_source
    Layout->>Client: update editor code and preview
    Client-->>User: show updated code/preview
Loading
sequenceDiagram
    participant User as User
    participant Client as Dashboard Client
    participant Dialog as Confirm Dialog
    participant Backend as Backend API
    participant DB as Database

    User->>Client: Click Delete template/draft/theme
    Client->>Dialog: open confirm
    User->>Dialog: Confirm
    Dialog->>Backend: DELETE /internal/.../{id}
    Backend->>Backend: verify admin, check shared-server or active-theme
    Backend->>DB: delete record / update config
    DB-->>Backend: success
    Backend-->>Client: 200 OK
    Client-->>User: refresh UI
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~75 minutes

Possibly related PRs

Suggested reviewers

  • Developing-Gamer

Poem

🐇
I nibble code and mark each line,
I hop where edits meet design,
Drafts unfurl and themes take shape,
AI hums and previews wake—what a scrape!
A little hop, and mailboxes smile.

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 40.20% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Emails redesign' is concise and directly reflects the main purpose of the PR, which is to modernize and redesign the email authoring, management, and rendering systems across the codebase.
Description check ✅ Passed The pull request description is comprehensive and well-structured. It includes a cursor-generated summary highlighting the main changes (OpenRouter migration, WYSIWYG editor, delete endpoints, dashboard redesign, UI improvements, and bug fixes) with sufficient detail and context for reviewers.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch emails-redesign

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@cmux-agent
Copy link

cmux-agent bot commented Dec 25, 2025

Older cmux preview screenshots (latest comment is below)

Preview Screenshots

Open Diff Heatmap

Preview screenshots are being captured...

Workspace and dev browser links will appear here once the preview environment is ready.


Generated by cmux preview system

@cmux-agent
Copy link

cmux-agent bot commented Dec 26, 2025

Older cmux preview screenshots (latest comment is below)

Preview Screenshots

Open Diff Heatmap

Preview screenshots are being captured...

Workspace and dev browser links will appear here once the preview environment is ready.


Generated by cmux preview system

@cmux-agent
Copy link

cmux-agent bot commented Dec 26, 2025

Older cmux preview screenshots (latest comment is below)

Preview Screenshots

Open Diff Heatmap

Preview screenshots are being captured...

Workspace and dev browser links will appear here once the preview environment is ready.


Generated by cmux preview system

@cmux-agent
Copy link

cmux-agent bot commented Dec 26, 2025

Older cmux preview screenshots (latest comment is below)

Preview Screenshots

Open Diff Heatmap

Preview screenshots are being captured...

Workspace and dev browser links will appear here once the preview environment is ready.


Generated by cmux preview system

@cmux-agent
Copy link

cmux-agent bot commented Dec 29, 2025

Older cmux preview screenshots (latest comment is below)

Preview Screenshots

Open Diff Heatmap

Preview screenshots are being captured...

Workspace and dev browser links will appear here once the preview environment is ready.


Generated by cmux preview system

@Developing-Gamer Developing-Gamer marked this pull request as ready for review January 3, 2026 07:51
Copilot AI review requested due to automatic review settings January 3, 2026 07:51
@claude
Copy link
Contributor

claude bot commented Jan 3, 2026

Claude encountered an error —— View job


I'll analyze this and get back to you.

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR redesigns the email system UI with a focus on modern, glassmorphic design patterns and improved user experience. It adds delete functionality for email themes, templates, and drafts, introduces device viewport preview modes for emails, and enhances the AI chat integration for email editing.

Key Changes:

  • Added delete operations for email themes, templates, and drafts with proper API endpoints
  • Redesigned email configuration pages with glassmorphic cards and improved layouts
  • Implemented device viewport simulation (phone/tablet/desktop) with realistic email client frames
  • Enhanced the vibe code layout with integrated toolbar, viewport switching, and code editor modal
  • Improved AI system prompts for better email design generation

Reviewed changes

Copilot reviewed 42 out of 42 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
packages/template/src/lib/stack-app/apps/interfaces/admin-app.ts Added delete methods for themes, templates, and drafts to admin interface
packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts Implemented delete methods with cache management and race condition handling
packages/stack-shared/src/interface/admin-interface.ts Added DELETE request handlers for themes, templates, and drafts
packages/stack-shared/src/helpers/emails.ts Updated email templates with improved styling and added default template source
packages/stack-ui/src/components/data-table/view-options.tsx Made view options customizable with variant, className, and iconClassName props
apps/dashboard/src/components/vibe-coding/* Complete redesign of code editing layout with hero-preview, viewport switching, and integrated chat
apps/dashboard/src/components/email-preview.tsx Added realistic email client frame simulation for phone/tablet/desktop views
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/emails/page-client.tsx Redesigned email server configuration with glassmorphic cards and improved UX
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/* Complete UI refresh with device preview and theme management
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/* Added delete functionality and redesigned template list with glassmorphic cards
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/* Full redesign with empty states, draft cards, and improved UX
apps/backend/src/app/api/latest/internal/email-/ Added DELETE endpoints with proper validation and error handling
apps/backend/src/lib/ai-chat/* Enhanced AI system prompts with detailed design principles and technical rules
apps/e2e/tests/* Added comprehensive tests for email template creation and SMTP configuration
Comments suppressed due to low confidence (1)

docker/dependencies/freestyle-mock/Dockerfile:19

  • This container exposes port 8080 and runs server.ts, which implements an HTTP endpoint that executes arbitrary TypeScript from the request body with no authentication or sandboxing, effectively giving any client that can reach this container full remote code execution with the service’s privileges. An attacker can POST to the script-execution endpoint and run filesystem, network, or process-manipulation code inside the container, including accessing any secrets available to the process. This service should only accept code from strictly trusted callers and run it in a strongly isolated environment (e.g., separate low-privilege container or sandbox) and/or avoid executing arbitrary user-supplied code altogether.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Jan 3, 2026

Greptile Summary

This PR implements a comprehensive redesign of the email system with device viewport previews, AI-assisted editing, and CRUD operations for templates, drafts, and themes.

Major Changes:

  • Added device viewport previews (phone, tablet, desktop) with realistic Gmail UI mockups
  • Implemented DELETE endpoints for email templates, drafts, and themes with proper validation
  • Added multi-provider AI support (OpenAI and OpenRouter) for template editing assistance
  • Enhanced email preview component with responsive design and email client frames
  • Added comprehensive E2E tests for template creation and deletion workflows

Critical Security Issue:

  • docker/dependencies/freestyle-mock/server.ts contains a severe remote code execution vulnerability - it accepts and executes arbitrary user-provided scripts without any validation or sandboxing. This service has full filesystem access, can spawn processes, and install arbitrary packages. Even for a mock service, this poses an extreme security risk if exposed to any network.

Security Improvements:

  • Added theme_id type validation in email template endpoint to prevent object injection attacks (line 43-45 in email-templates/[templateId]/route.tsx)
  • Proper authentication checks on all new DELETE endpoints
  • Validation to prevent deletion of default themes or themes currently in use

Confidence Score: 1/5

  • This PR contains a CRITICAL remote code execution vulnerability in the freestyle-mock server that must be addressed before merging
  • The freestyle-mock server accepts and executes arbitrary user-provided code without any validation, sandboxing, or security controls. It has full filesystem access, can spawn processes, modify environment variables, and install arbitrary npm packages. This is an extremely severe security vulnerability that poses a critical risk even in test/development environments. While the rest of the PR shows good security practices (type validation, proper authentication), this single issue is severe enough to warrant the lowest confidence score.
  • CRITICAL: docker/dependencies/freestyle-mock/server.ts requires immediate security review and remediation before this PR can be safely merged

Important Files Changed

Filename Overview
docker/dependencies/freestyle-mock/server.ts CRITICAL: Remote code execution vulnerability - accepts and executes arbitrary user scripts without validation
apps/backend/src/app/api/latest/internal/email-templates/[templateId]/route.tsx Added DELETE endpoint and theme_id validation. Good security improvement with type checking to prevent object injection
apps/backend/src/app/api/latest/internal/ai-chat/[threadId]/route.tsx Added multi-provider AI support (OpenAI/OpenRouter) with improved error handling and message validation

Sequence Diagram

sequenceDiagram
    participant User as User/Dashboard
    participant Dashboard as Dashboard Client
    participant Backend as Backend API
    participant AI as AI Provider (OpenAI/OpenRouter)
    participant Freestyle as Freestyle-Mock Server
    participant DB as Database

    Note over User,DB: Email Template Editing Flow

    User->>Dashboard: Edit email template
    Dashboard->>Backend: PATCH /email-templates/{id}
    Backend->>Backend: Validate theme_id type
    Backend->>Freestyle: POST /execute/v1/script
    Note right of Freestyle: Executes user-provided<br/>TSX code (SECURITY RISK)
    Freestyle->>Freestyle: Install dependencies
    Freestyle->>Freestyle: Execute script
    Freestyle-->>Backend: Return rendered HTML
    Backend->>DB: Update config override
    Backend-->>Dashboard: Return rendered HTML
    Dashboard-->>User: Show preview

    Note over User,DB: AI-Assisted Editing Flow

    User->>Dashboard: Ask AI for help
    Dashboard->>Backend: POST /ai-chat/{threadId}
    Backend->>Backend: Validate messages
    Backend->>AI: Generate text with tools
    AI-->>Backend: Response with tool calls
    Backend->>DB: Save thread message
    Backend-->>Dashboard: Return AI response
    Dashboard-->>User: Show AI suggestions

    Note over User,DB: Template Deletion Flow

    User->>Dashboard: Delete template
    Dashboard->>Backend: DELETE /email-templates/{id}
    Backend->>Backend: Check if template exists
    Backend->>DB: Set template config to null
    Backend-->>Dashboard: Success
    Dashboard-->>User: Refresh list
Loading

Developing-Gamer and others added 15 commits February 11, 2026 11:47
…-catch blocks with direct checks for draft existence before deletion and retrieval, improving code clarity. Update loading state management in email template client to prevent state updates after component unmount.
<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md

-->

---------

Co-authored-by: Konstantin Wohlwend <n2d4xc@gmail.com>
…ayout responsiveness. Updated sidebar layout styles, added data-full-bleed attributes to email draft and template components, and refactored VibeCodeLayout for better light mode handling.
… and enhance the Design Guide with clearer usage principles and best practices. Introduced new components: `DesignAlert`, `DesignBadge`, `DesignButton`, `DesignCard`, `DesignEditableGrid`, and `CursorBlastEffect`. Updated existing components to utilize the new structure, ensuring consistent UI patterns across the dashboard.
…pport. Added `useOffWhiteLightChrome` and `useOffWhiteLightMode` properties to `VibeCodeLayout` in both email drafts and themes for improved visual consistency.
…istency. Adjusted main content area and stack companion overlay for better responsiveness and visual clarity.
@Developing-Gamer Developing-Gamer enabled auto-merge (squash) February 13, 2026 01:47
@Developing-Gamer Developing-Gamer enabled auto-merge (squash) February 13, 2026 03:03
@N2D4 N2D4 disabled auto-merge February 16, 2026 22:57
@N2D4 N2D4 merged commit 11b6b42 into dev Feb 16, 2026
20 of 25 checks passed
@N2D4 N2D4 deleted the emails-redesign branch February 16, 2026 22:57
N2D4 pushed a commit that referenced this pull request Feb 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants