fix(landing): second pass — fix remaining code quality issues

- auth-modal: add @sim/logger, log social sign-in errors instead of swallowing silently
- auth-modal: extract duplicated social button classes into SOCIAL_BTN constant
- auth-modal: remove unused isProduction from ProviderStatus interface
- auth-modal: memoize getBrandConfig() call
- footer: remove stale arrow destructuring left after interface cleanup, use cn() throughout
- footer-cta: replace inline styles on submit button with Tailwind classes via cn()
- footer-cta: replace caretColor inline style with caret-white utility
- templates: fix incorrect section value 'landing_preview' → 'templates' for PostHog tracking
- events: add 'templates' to landing_cta_clicked section union
- integrations: replace "canvas" with "workflow builder" per constitution rules
- llms-full: replace "canvas" terminology with "visual builder"/"workflow builder"

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

Author: waleedlatif1

apps/sim/app/(landing)/components/auth-modal/auth-modal.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { createLogger } from '@sim/logger'
 import { Loader2, X } from 'lucide-react'
 import Image from 'next/image'
 import { useRouter } from 'next/navigation'
@@ -11,6 +12,8 @@ import { captureClientEvent } from '@/lib/posthog/client'
 import type { PostHogEventMap } from '@/lib/posthog/events'
 import { getBrandConfig } from '@/ee/whitelabeling'
 
+const logger = createLogger('AuthModal')
+
 type AuthView = 'login' | 'signup'
 
 interface AuthModalProps {
@@ -22,25 +25,29 @@ interface AuthModalProps {
 interface ProviderStatus {
   githubAvailable: boolean
   googleAvailable: boolean
-  isProduction: boolean
 }
 
 let fetchPromise: Promise<ProviderStatus> | null = null
 
 const FALLBACK_STATUS: ProviderStatus = {
   githubAvailable: false,
   googleAvailable: false,
-  isProduction: false,
 }
 
+const SOCIAL_BTN =
+  'relative flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[var(--landing-border-strong)] text-[13.5px] text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)] disabled:cursor-not-allowed disabled:opacity-50'
+
 function fetchProviderStatus(): Promise<ProviderStatus> {
   if (fetchPromise) return fetchPromise
   fetchPromise = fetch('/api/auth/providers')
     .then((r) => {
       if (!r.ok) throw new Error(`HTTP ${r.status}`)
       return r.json()
     })
-    .then((data: ProviderStatus) => data)
+    .then(({ githubAvailable, googleAvailable }: ProviderStatus) => ({
+      githubAvailable,
+      googleAvailable,
+    }))
     .catch(() => {
       fetchPromise = null
       return FALLBACK_STATUS
@@ -54,7 +61,7 @@ export function AuthModal({ children, defaultView = 'login', source }: AuthModal
   const [view, setView] = useState<AuthView>(defaultView)
   const [providerStatus, setProviderStatus] = useState<ProviderStatus | null>(null)
   const [socialLoading, setSocialLoading] = useState<'github' | 'google' | null>(null)
-  const brand = getBrandConfig()
+  const brand = useMemo(() => getBrandConfig(), [])
 
   useEffect(() => {
     fetchProviderStatus().then(setProviderStatus)
@@ -81,7 +88,8 @@ export function AuthModal({ children, defaultView = 'login', source }: AuthModal
     setSocialLoading(provider)
     try {
       await client.signIn.social({ provider, callbackURL: '/workspace' })
-    } catch {
+    } catch (error) {
+      logger.warn('Social sign-in did not complete', { provider, error })
     } finally {
       setSocialLoading(null)
     }
@@ -140,7 +148,7 @@ export function AuthModal({ children, defaultView = 'login', source }: AuthModal
                     type='button'
                     onClick={() => handleSocialLogin('google')}
                     disabled={!!socialLoading}
-                    className='relative flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[var(--landing-border-strong)] text-[13.5px] text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)] disabled:cursor-not-allowed disabled:opacity-50'
+                    className={SOCIAL_BTN}
                   >
                     <GoogleIcon className='absolute left-4 h-[18px] w-[18px] shrink-0' />
                     <span>
@@ -153,7 +161,7 @@ export function AuthModal({ children, defaultView = 'login', source }: AuthModal
                     type='button'
                     onClick={() => handleSocialLogin('github')}
                     disabled={!!socialLoading}
-                    className='relative flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[var(--landing-border-strong)] text-[13.5px] text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)] disabled:cursor-not-allowed disabled:opacity-50'
+                    className={SOCIAL_BTN}
                   >
                     <GithubIcon className='absolute left-4 h-[18px] w-[18px] shrink-0' />
                     <span>

apps/sim/app/(landing)/components/footer/footer-cta.tsx

@@ -71,20 +71,19 @@ export function FooterCTA() {
             aria-label='Describe what you want to build'
             placeholder={animatedPlaceholder}
             rows={2}
-            className='m-0 box-border min-h-[48px] w-full resize-none border-0 bg-transparent px-1 py-1 font-body text-[var(--landing-text)] text-base leading-[24px] tracking-[-0.015em] outline-none placeholder:font-[380] placeholder:text-[var(--landing-text-muted)] focus-visible:ring-0'
-            style={{ caretColor: '#FFFFFF', maxHeight: `${MAX_HEIGHT}px` }}
+            className='m-0 box-border min-h-[48px] w-full resize-none border-0 bg-transparent px-1 py-1 font-body text-[var(--landing-text)] text-base leading-[24px] tracking-[-0.015em] caret-white outline-none placeholder:font-[380] placeholder:text-[var(--landing-text-muted)] focus-visible:ring-0'
+            style={{ maxHeight: `${MAX_HEIGHT}px` }}
           />
           <div className='flex items-center justify-end'>
             <button
               type='button'
               onClick={handleSubmit}
               disabled={isEmpty}
               aria-label='Submit message'
-              className='flex h-[28px] w-[28px] items-center justify-center rounded-full border-0 p-0 transition-colors'
-              style={{
-                background: isEmpty ? '#555555' : '#FFFFFF',
-                cursor: isEmpty ? 'not-allowed' : 'pointer',
-              }}
+              className={cn(
+                'flex h-[28px] w-[28px] items-center justify-center rounded-full border-0 p-0 transition-colors',
+                isEmpty ? 'cursor-not-allowed bg-[#555555]' : 'cursor-pointer bg-white'
+              )}
             >
               <ArrowUp size={16} strokeWidth={2.25} color={isEmpty ? '#888888' : '#1C1C1C'} />
             </button>

apps/sim/app/(landing)/components/footer/footer.tsx

@@ -1,5 +1,6 @@
 import Image from 'next/image'
 import Link from 'next/link'
+import { cn } from '@/lib/core/utils/cn'
 import { FooterCTA } from '@/app/(landing)/components/footer/footer-cta'
 
 const LINK_CLASS =
@@ -92,7 +93,7 @@ const LEGAL_LINKS: FooterItem[] = [
 function ChevronArrow({ external }: { external?: boolean }) {
   return (
     <svg
-      className={`h-3 w-3 shrink-0${external ? ' -rotate-45' : ''}`}
+      className={cn('h-3 w-3 shrink-0', external && '-rotate-45')}
       viewBox='0 0 10 10'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
@@ -125,26 +126,24 @@ function FooterColumn({ title, items }: { title: string; items: FooterItem[] })
     <div>
       <h3 className='mb-4 font-medium text-[var(--landing-text)] text-sm'>{title}</h3>
       <div className='flex flex-col gap-2.5'>
-        {items.map(({ label, href, external, arrow, externalArrow }) =>
+        {items.map(({ label, href, external, externalArrow }) =>
           external ? (
             <a
               key={label}
               href={href}
               target='_blank'
               rel='noopener noreferrer'
-              className={`${LINK_CLASS}${externalArrow ? ' group/link inline-flex items-center gap-1' : ''}`}
+              className={cn(
+                LINK_CLASS,
+                externalArrow && 'group/link inline-flex items-center gap-1'
+              )}
             >
               {label}
               {externalArrow && <ChevronArrow external />}
             </a>
           ) : (
-            <Link
-              key={label}
-              href={href}
-              className={`${LINK_CLASS}${arrow ? ' group/link inline-flex items-center gap-1.5' : ''}`}
-            >
+            <Link key={label} href={href} className={LINK_CLASS}>
               {label}
-              {arrow && <ChevronArrow />}
             </Link>
           )
         )}
@@ -161,7 +160,10 @@ export default function Footer({ hideCTA }: FooterProps) {
   return (
     <footer
       role='contentinfo'
-      className={`bg-[var(--landing-bg)] pb-10 font-[430] font-season text-sm${hideCTA ? ' pt-10' : ''}`}
+      className={cn(
+        'bg-[var(--landing-bg)] pb-10 font-[430] font-season text-sm',
+        hideCTA && 'pt-10'
+      )}
     >
       {!hideCTA && <FooterCTA />}
       <div className='relative px-[1.6vw] sm:px-8 lg:px-16'>

apps/sim/app/(landing)/components/templates/templates.tsx

@@ -300,7 +300,7 @@ export default function Templates() {
       setIsPreparingTemplate(false)
       trackLandingCta({
         label: activeWorkflow.name,
-        section: 'landing_preview',
+        section: 'templates',
         destination: '/signup',
       })
       router.push('/signup')

apps/sim/app/(landing)/integrations/[slug]/page.tsx

@@ -97,7 +97,7 @@ function buildFAQs(integration: Integration): FAQItem[] {
     },
     {
       question: `How do I connect ${name} to Sim?`,
-      answer: `Getting started takes under five minutes: (1) Create a free account at sim.ai. (2) Open your workspace and create an agent. (3) Drag a ${name} block onto the canvas. (4) ${authStep} (5) Choose the tool you want to use, wire it to the inputs you need, and click Run. Your agent is live.`,
+      answer: `Getting started takes under five minutes: (1) Create a free account at sim.ai. (2) Open your workspace and create an agent. (3) Drag a ${name} block onto the workflow builder. (4) ${authStep} (5) Choose the tool you want to use, wire it to the inputs you need, and click Run. Your agent is live.`,
     },
     {
       question: `Can I use ${name} as a tool inside an AI agent in Sim?`,
@@ -262,7 +262,7 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
         '@type': 'HowToStep',
         position: 2,
         name: `Add a ${name} block`,
-        text: `Open your workspace, drag a ${name} block onto the canvas, and authenticate with your ${name} credentials.`,
+        text: `Open your workspace, drag a ${name} block onto the workflow builder, and authenticate with your ${name} credentials.`,
       },
       {
         '@type': 'HowToStep',
@@ -455,10 +455,10 @@ export default async function IntegrationPage({ params }: { params: Promise<{ sl
                 title: `Add a ${name} block`,
                 body:
                   authType === 'oauth'
-                    ? `Open your workspace, drag a ${name} block onto the canvas, and connect your account with one-click OAuth.`
+                    ? `Open your workspace, drag a ${name} block onto the workflow builder, and connect your account with one-click OAuth.`
                     : authType === 'api-key'
-                      ? `Open your workspace, drag a ${name} block onto the canvas, and paste in your ${name} API key.`
-                      : `Open your workspace, drag a ${name} block onto the canvas, and authenticate your account.`,
+                      ? `Open your workspace, drag a ${name} block onto the workflow builder, and paste in your ${name} API key.`
+                      : `Open your workspace, drag a ${name} block onto the workflow builder, and authenticate your account.`,
               },
               {
                 step: '03',

apps/sim/app/llms-full.txt/route.ts

@@ -123,7 +123,7 @@ Built-in table creation and management:
 
 ### Frontend
 - Next.js 15 with App Router
-- React Flow for canvas visualization
+- React Flow for the visual builder
 - Tailwind CSS for styling
 - Zustand for state management
 
@@ -143,7 +143,7 @@ Built-in table creation and management:
 
 1. **Sign Up**: Create a free account at ${baseUrl}
 2. **Create Workspace**: Set up your first workspace
-3. **Build Workflow**: Drag blocks onto canvas and connect them
+3. **Build Workflow**: Drag blocks onto the workflow builder and connect them
 4. **Configure Blocks**: Set up LLM providers, tools, and integrations
 5. **Test**: Run the workflow manually to verify
 6. **Deploy**: Set up triggers for automated execution

apps/sim/lib/posthog/events.ts

@@ -23,6 +23,7 @@ export interface PostHogEventMap {
       | 'pricing'
       | 'features'
       | 'collaboration'
+      | 'templates'
       | 'landing_preview'
       | 'integrations'
     destination: 'auth_modal' | 'demo_modal' | '/signup' | '/login' | '/workspace' | (string & {})