refactor vibe coding components, basic email templates config #770

BilalG1 · 2025-07-15T23:34:38Z

https://www.loom.com/share/b43b8fc7dfc947ab88d3cf709d2a167e?sid=d6e635ce-ab0f-4e86-887b-373632996cea

Important

Refactor vibe coding components and add basic email template configurations, including new components and schema updates.

Email Templates:
- Adds route.tsx in api/latest/internal/email-templates to handle GET requests for email templates.
- Introduces useNewEmailTemplates() in admin-app-impl.ts to fetch new email templates.
- Adds listInternalEmailTemplatesNew() in admin-interface.ts to list new email templates.
Components:
- Adds VibeCodeEditor, VibePreviewPanel, VibeAssistantChat, and VibeCodeEditorLayout in vibe-coding for email template editing and preview.
- Refactors page-client.tsx in email-templates-new to use new components for template editing.
- Updates page-client.tsx in email-themes to use new vibe coding components.
Schema and Config:
- Adds emailTemplateListSchema in schema-fields.ts for email template validation.
- Updates emails.ts to include DEFAULT_EMAIL_TEMPLATES.
- Modifies schema.ts to include templateList in email configurations.

^{This description was created by}^{for 18fdae9. You can customize this summary. It will automatically update as commits are pushed.}

vercel · 2025-07-15T23:34:42Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
stack-backend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 17, 2025 7:14pm
stack-dashboard	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 17, 2025 7:14pm
stack-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 17, 2025 7:14pm
stack-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 17, 2025 7:14pm

greptile-apps

Greptile Summary

This PR implements a significant refactor of the email template and theme editing functionality, introducing a new modular "vibe-coding" component system. The changes centralize common UI patterns for code editing, preview, and AI-assisted editing capabilities.

Key changes include:

New VibeCodeEditor component using Monaco editor for TypeScript/JSX support
Three-panel layout system with preview, editor, and chat functionality
New email template schema and API endpoints supporting TSX-based templates
Standardized chat adapters for AI assistance in template editing
Migration path from old email templates to new system with backward compatibility

PR Description Notes:

PR description is missing key details about the changes being made
Consider adding migration notes for existing users

Confidence score: 3/5

This PR requires careful testing of email template rendering before merging
Score of 3 given due to inconsistent routing paths and incomplete TODOs in template implementation
The following files need more attention:
- apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates-new/page-client.tsx (routing inconsistencies)
- apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates-new/[templateId]/page-client.tsx (incomplete TODOs)

_{21 files reviewed, 14 comments}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-07-15T23:35:05Z

apps/dashboard/src/components/vibe-coding/theme-tool-components.tsx

+        ) : (
+          <XCircle className="size-4 text-red-500" />
+        )}
+        <span className="text-sm">Created email theme</span>


style: message is not dynamic based on success/failure state

Suggested change

<span className="text-sm">Created email theme</span>

<span className="text-sm">{result?.success ? 'Created email theme' : 'Failed to create email theme'}</span>

greptile-apps · 2025-07-15T23:35:05Z

apps/dashboard/src/components/vibe-coding/template-tool-components.tsx

+        ) : (
+          <XCircle className="size-4 text-red-500" />
+        )}
+        <span className="text-sm">Updated email template</span>


logic: message for CreateEmailTemplateUI should say 'Created email template' not 'Updated email template'

Suggested change

<span className="text-sm">Updated email template</span>

<span className="text-sm">Created email template</span>

greptile-apps · 2025-07-15T23:35:06Z

apps/dashboard/src/components/vibe-coding/vibe-assistant-chat.tsx

+      {toolComponents.map((ToolComponent, index) => (
+        <ToolComponent key={index} />
+      ))}


logic: Using array index as key can cause issues with component re-rendering. Use a stable unique identifier from the ToolComponent instead

greptile-apps · 2025-07-15T23:35:07Z

apps/dashboard/src/components/vibe-coding/vibe-preview-panel.tsx

+}: VibePreviewPanelProps) {
+  return (
+    <>
+      <div className="p-3 flex justify-between items-center">


style: div uses flex justify-between but only has one child element - remove justify-between or add expected right-side content

Suggested change

<div className="p-3 flex justify-between items-center">

<div className="p-3 flex items-center">

greptile-apps · 2025-07-15T23:35:07Z

...ashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates-new/page-client.tsx

+        title="Shared Email Server"
+        okButton={{
+          label: "Edit Templates Anyway", onClick: async () => {
+            router.push(`email-templates/${sharedSmtpWarningDialogOpen}`);


logic: Incorrect route path. Should be 'email-templates-new' to match the new route structure

Suggested change

router.push(`email-templates/${sharedSmtpWarningDialogOpen}`);

router.push(`email-templates-new/${sharedSmtpWarningDialogOpen}`);

greptile-apps · 2025-07-15T23:35:12Z

...app/(main)/(protected)/projects/[projectId]/email-templates-new/[templateId]/page-client.tsx

+                // TODO: Implement template update when API becomes available
+                console.log("Tool call content:", toolCallContent);
+              }


logic: Console.log of toolCallContent may leak sensitive template data to browser console

greptile-apps · 2025-07-15T23:35:12Z

...app/(main)/(protected)/projects/[projectId]/email-templates-new/[templateId]/page-client.tsx

+          onCodeChange={(code) => {
+            // TODO: Implement code change handling
+          }}
+          isLoading={false}


logic: isLoading prop is hardcoded to false - should reflect actual loading state from templates query

greptile-apps · 2025-07-15T23:35:13Z

packages/stack-shared/src/helpers/emails.ts

+  "e7d009ce-8d47-4528-b245-5bf119f2ffa3": {
+    displayName: "Email Verification",
+    description: "Will be sent to the user when they sign-up with email/password",
+    variables: [],


logic: variables array is empty but projectDisplayName is used in subject and template. Should define required variables.

Suggested change

variables: [],

variables: ["projectDisplayName"],

greptile-apps · 2025-07-15T23:35:13Z

apps/dashboard/src/components/vibe-coding/chat-adapters.ts

+  return {
+    async run({ messages, abortSignal }) {
+      try {
+        const formattedMessages = [];


style: array initialization should specify type formattedMessages: ChatContent[]

greptile-apps · 2025-07-15T23:35:13Z

packages/stack-shared/src/helpers/emails.ts

+  // "a70fb3a4-56c1-4e42-af25-49d25603abd0": {
+
+  // },
+  // "822687fe-8d0a-4467-a0d1-416b6e639478": {
+
+  // },
+  // "066dd73c-36da-4fd0-b6d6-ebf87683f8bc": {
+
+  // },
+  // "e84de395-2076-4831-9c19-8e9a96a868e4": {
+
+  // },


style: consider removing commented template IDs if not used. Can add when implementing.

...rd/src/app/(main)/(protected)/projects/[projectId]/email-templates-new/[templateId]/page.tsx

recurseml · 2025-07-15T23:35:49Z

😱 Found 1 issue. Time to roll up your sleeves! 😱

🗒️ View all ignored comments in this repo

The constraint 'TokenStoreType extends string' is too restrictive. It should likely be 'TokenStoreType extends string | object' to match the condition check in line 113 where TokenStoreType is checked against {}
Return type mismatch - the interface declares useUsers() returning ServerUser[] but the Team interface that this extends declares useUsers() returning TeamUser[]
There is a syntax error in the super constructor call due to the ellipsis operator used incorrectly. Objects aren't being merged correctly. This syntax usage can lead to runtime errors when trying to pass the merged object to 'super()'. Verify that the intended alterations to the object occur before or outside of the super() call if needed.
Throwing an error when no active span is found is too aggressive. The log function should gracefully fallback to console.log or another logging mechanism when there's no active span, since not all execution contexts will have an active span. This makes the code less resilient and could break functionality in non-traced environments.

📚 Relevant Docs

Function sets backendContext with a new configuration but doesn't pass 'defaultProjectKeys'. Since defaultProjectKeys is required in the type definition and cannot be updated (throws error if tried to set), this will cause a type error.
The schema is using array syntax for pick() which is incorrect for Yup schemas. The pick() method in Yup expects individual arguments, not an array. Should be changed to: emailConfigSchema.pick('type', 'host', 'port', 'username', 'sender_name', 'sender_email')

📚 Relevant Docs

Creating a refresh token with current timestamp as expiration means it expires immediately. Should set a future date for token expiration.
The 'tools' object is initialized as an empty object, even though 'tools' is presumably expected to contain tool definitions. This could cause the server capabilities to lack necessary tool configurations, thus potentially impacting functionalities that depend on certain tool setups.

📚 Relevant Docs

'STACK_SECRET_SERVER_KEY' is potentially being included in every request header without checking its existence again here. Although it's checked during initialization, this could lead to security issues as it's exposed in all communications where the header is logged or captured.

📚 Relevant Docs

When adding 'use client' directive at the beginning, it doesn't check if file.text already contains the 'use client' directive. This could lead to duplicate 'use client' directives if the file already has one.

📚 Relevant Docs

⚠️ Only 5 files were analyzed due to processing limits.

^{Need help? Join our Discord for support!
https://discord.gg/qEjHQk64Z9}

ellipsis-dev · 2025-07-15T23:36:42Z

...ashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates-new/page-client.tsx

+                  if (emailConfig?.type === 'shared') {
+                    setSharedSmtpWarningDialogOpen(template.id);
+                  } else {
+                    router.push(`email-templates-new/${template.id}`);


Consider using a tagged template literal (e.g. urlString``) to construct dynamic route URLs (both here and at line 62) to ensure proper escaping and reduce injection risks.

^{This comment was generated because it violated a code review rule: mrule_pmzJAgHDlFZgwIwD.}

N2D4

can you add a loom? I'll do a full review tmrw

N2D4 · 2025-07-17T18:06:12Z

ready to merge after loom

…/stack-auth into vibe-coding-templates

refactor vibe coding components, basic email templates config

18fdae9

github-actions bot assigned BilalG1 Jul 15, 2025

BilalG1 assigned N2D4 and unassigned BilalG1 Jul 15, 2025

greptile-apps bot reviewed Jul 15, 2025

View reviewed changes

recurseml bot reviewed Jul 15, 2025

View reviewed changes

...rd/src/app/(main)/(protected)/projects/[projectId]/email-templates-new/[templateId]/page.tsx Show resolved Hide resolved

ellipsis-dev bot reviewed Jul 15, 2025

View reviewed changes

N2D4 requested changes Jul 16, 2025

View reviewed changes

N2D4 approved these changes Jul 17, 2025

View reviewed changes

Merge branch 'email-themes-ui-fixes' into vibe-coding-templates

21ebd99

N2D4 assigned BilalG1 and unassigned N2D4 Jul 17, 2025

BilalG1 added 2 commits July 17, 2025 11:58

fix router link

bea324d

Merge branch 'vibe-coding-templates' of https://github.com/stack-auth…

4ffa255

…/stack-auth into vibe-coding-templates

BilalG1 merged commit 93a04d2 into email-themes-ui-fixes Jul 17, 2025
15 of 19 checks passed

BilalG1 deleted the vibe-coding-templates branch July 17, 2025 20:02

	<span className="text-sm">Created email theme</span>
	<span className="text-sm">{result?.success ? 'Created email theme' : 'Failed to create email theme'}</span>

	<span className="text-sm">Updated email template</span>
	<span className="text-sm">Created email template</span>

	<div className="p-3 flex justify-between items-center">
	<div className="p-3 flex items-center">

	router.push(`email-templates/${sharedSmtpWarningDialogOpen}`);
	router.push(`email-templates-new/${sharedSmtpWarningDialogOpen}`);

refactor vibe coding components, basic email templates config #770

refactor vibe coding components, basic email templates config #770

Uh oh!

Conversation

BilalG1 commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Greptile Summary

Confidence score: 3/5

Uh oh!

greptile-apps bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

recurseml bot commented Jul 15, 2025

Uh oh!

ellipsis-dev bot Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

N2D4 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

N2D4 commented Jul 17, 2025

Uh oh!

Uh oh!

Uh oh!

BilalG1 commented Jul 15, 2025 •

edited

Loading

vercel bot commented Jul 15, 2025 •

edited

Loading

N2D4 left a comment •

edited

Loading